New Embedded Version

app.py

@@ -1,239 +1,216 @@
-import os
-# Ensure OMP_NUM_THREADS is set to avoid libgomp errors
-os.environ["OMP_NUM_THREADS"] = "1"
-
-from trame.app import get_server
-from trame_vuetify.ui.vuetify3 import SinglePageLayout
-from trame_vuetify.widgets import vuetify3
-from trame.widgets import html as trame_html
-import threading
-from concurrent.futures import ThreadPoolExecutor
-import time
-
-# Import embedded page wrappers (lazy load inside tabs)
-from importlib import import_module
-em_page = None
-qlbm_page = None
-
-# Force embedded mode for nested pages (avoid iframes/secondary servers)
-os.environ.setdefault("TRAME_EMBEDDED", "1")
-os.environ.setdefault("TRAME_DISABLE_BROWSER", "1")
-os.environ.setdefault("EM_APP_EMBEDDED", "1")
-os.environ.setdefault("DISABLE_EM_STANDALONE", "1")
-
-# Create a single server for the multipage app
-server = get_server()
-state, ctrl = server.state, server.controller
-
-# App state: landing chooser -> specific experience
-state.current_page = None  # "EM" or "QLBM" once selected
-
-# -------------------------------------------------------------------------
-# Thread pool for long-running jobs to avoid UI freezing by HF timeout
-# -------------------------------------------------------------------------
-MAX_WORKERS = int(os.environ.get("MAX_WORKERS", "4"))
-executor = ThreadPoolExecutor(max_workers=MAX_WORKERS)
-
-def submit_background(fn, *args, **kwargs):
-    """
-    Run a CPU-heavy / long job without blocking Trame's event loop.
-
-    Usage from pages:
-        from trame.app import get_server
-        server = get_server()
-        server.submit_background(long_fn, arg1, arg2, kw1=...)
-    """
-    return executor.submit(fn, *args, **kwargs)
-
-# Expose helper on the server so pages.em_page / pages.qlbm_page can use it
-server.submit_background = submit_background
-
-# Load Synopsys/Ansys logo as data URI for main toolbar
-import base64
-
-def _load_logo_data_uri():
-    base_dir = os.path.dirname(__file__)
-    candidates = [
-        os.path.join(base_dir, "ansys-part-of-synopsys-logo.svg"),
-        os.path.join(base_dir, "synopsys-logo-color-rgb.svg"),
-        os.path.join(base_dir, "synopsys-logo-color-rgb.png"),
-        os.path.join(base_dir, "synopsys-logo-color-rgb.jpg"),
-    ]
-    for p in candidates:
-        if os.path.exists(p):
-            ext = os.path.splitext(p)[1].lower()
-            mime = "image/svg+xml" if ext == ".svg" else ("image/png" if ext == ".png" else "image/jpeg")
-            with open(p, "rb") as f:
-                b64 = base64.b64encode(f.read()).decode("ascii")
-            return f"data:{mime};base64,{b64}"
-    return None
-
-def _stop_subapp(module_name: str, attr_name: str):
-    module = globals().get(attr_name)
-    if module is None:
-        try:
-            module = import_module(module_name)
-            globals()[attr_name] = module
-        except Exception:
-            return
-    stop_fn = getattr(module, "stop", None)
-    if callable(stop_fn):
-        try:
-            stop_fn()
-        except Exception:
-            pass
-
-
-# Safely initialize logo in state (trame state isn't a dict; avoid .get())
-try:
-    if not hasattr(state, "logo_src") or state.logo_src in (None, ""):
-        state.logo_src = _load_logo_data_uri()
-except Exception:
-    state.logo_src = _load_logo_data_uri()
-
-
-@state.change("current_page")
-def _handle_page_change(current_page, **_):
-    """Stop inactive subprocesses as users navigate between experiences."""
-    if current_page == "EM":
-        _stop_subapp("pages.qlbm_page", "qlbm_page")
-    elif current_page == "QLBM":
-        _stop_subapp("pages.em_page", "em_page")
-    else:
-        _stop_subapp("pages.em_page", "em_page")
-        _stop_subapp("pages.qlbm_page", "qlbm_page")
-
-with SinglePageLayout(server) as layout:
-    layout.title.set_text("Quantum Applications")
-    layout.toolbar.classes = "pl-2 pr-1 py-1 elevation-0"
-    layout.toolbar.style = "background-color: #ffffff; border-bottom: 3px solid #5f259f;"
-
-    with layout.toolbar:
-        vuetify3.VSpacer()
-        vuetify3.VBtn(
-            v_if="current_page",
-            text="Main Page",
-            variant="text",
-            color="primary",
-            prepend_icon="mdi-arrow-left",
-            click="current_page = null",
-            classes="mr-2",
-        )
-        vuetify3.VChip(
-            v_if="current_page",
-            label=True,
-            color="primary",
-            text_color="white",
-            children=["{{ current_page === 'EM' ? 'Electromagnetic Scattering' : 'Quantum LBM' }}"],
-            classes="mr-2",
-        )
-        vuetify3.VImg(
-            v_if="logo_src",
-            src=("logo_src", None),
-            style="height: 40px; width: auto;",
-            classes="ml-2",
-        )
-
-    with layout.content:
-        # Landing screen
-        with vuetify3.VContainer(
-            v_if="!current_page",
-            fluid=True,
-            classes="fill-height d-flex align-center justify-center pa-6",
-        ):
-            with vuetify3.VSheet(
-                elevation=6,
-                rounded=True,
-                style="max-width: 1080px; width: 100%; background: linear-gradient(135deg, #fdfbff, #f3ecff);",
-                classes="pa-8",
-            ):
-                vuetify3.VCardTitle(
-                    "Pick a quantum experience",
-                    classes="text-h4 text-primary font-weight-bold mb-2 text-center",
-                )
-                vuetify3.VCardSubtitle(
-                    "Choose one workflow. We'll spin up only that server until you switch back.",
-                    classes="text-body-1 text-center mb-6",
-                )
-                with vuetify3.VRow(justify="center", align="stretch", class_="text-left"):
-                    with vuetify3.VCol(cols=12, md=5, class_="d-flex"):
-                        with vuetify3.VCard(elevation=4, classes="pa-6 flex-grow-1"):
-                            vuetify3.VIcon("mdi-radar", size=52, color="primary", classes="mb-4")
-                            vuetify3.VCardTitle("Electromagnetic Scattering", classes="text-h5 mb-2")
-                            vuetify3.VCardText(
-                                "Placeholder",
-                                classes="text-body-2 mb-6",
-                            )
-                            vuetify3.VBtn(
-                                text="Launch EM",
-                                color="primary",
-                                block=True,
-                                prepend_icon="mdi-play-circle",
-                                size="large",
-                                click="current_page = 'EM'",
-                            )
-                    with vuetify3.VCol(cols=12, md=5, class_="d-flex"):
-                        with vuetify3.VCard(elevation=4, classes="pa-6 flex-grow-1"):
-                            vuetify3.VIcon("mdi-water", size=52, color="secondary", classes="mb-4")
-                            vuetify3.VCardTitle("Fluids", classes="text-h5 mb-2")
-                            vuetify3.VCardText(
-                                "Placeholder",
-                                classes="text-body-2 mb-6",
-                            )
-                            vuetify3.VBtn(
-                                text="Launch QLBM",
-                                color="secondary",
-                                block=True,
-                                prepend_icon="mdi-play-circle",
-                                size="large",
-                                click="current_page = 'QLBM'",
-                            )
-
-        # EM experience
-        with vuetify3.VContainer(v_if="current_page === 'EM'", fluid=True, classes="pa-0 fill-height"):
-            try:
-                if not globals().get("em_page"):
-                    globals()["em_page"] = import_module("pages.em_page")
-                em_page.build(server)
-            except Exception as e:
-                trame_html.Div(f"EM embed failed: {e}", style="padding:8px;color:#b00020;")
-
-        # QLBM experience
-        with vuetify3.VContainer(v_if="current_page === 'QLBM'", fluid=True, classes="pa-0 fill-height"):
-            try:
-                if not globals().get("qlbm_page"):
-                    globals()["qlbm_page"] = import_module("pages.qlbm_page")
-                qlbm_page.build(server)
-            except Exception as e:
-                trame_html.Div(f"QLBM embed failed: {e}", style="padding:8px;color:#b00020;")
-
-# -------------------------------------------------------------------------
-# Heartbeat: keep HuggingFace WebSocket alive during idle periods
-# -------------------------------------------------------------------------
-def _start_hf_heartbeat_thread(interval_s: int = 5):
-    """
-    Start a background thread that periodically flushes the server,
-    keeping the WebSocket "active" in the eyes of Hugging Face.
-    """
-    def _loop():
-        while True:
-            time.sleep(interval_s)
-            try:
-                server.controller.flush()
-            except Exception:
-                # If server is shutting down or flush fails, exit the thread
-                break
-
-    t = threading.Thread(target=_loop, daemon=True)
-    t.start()
-
-
-if __name__ == "__main__":
-
-    # Start HF heartbeat to prevent timeout
-    _start_hf_heartbeat_thread(interval_s=5)
-
-    # Allow reverse-proxy setups to pin the internal host/port independently from the public PORT
-    port = int(os.environ.get("APP_PORT") or os.environ.get("PORT", 7860))
-    host = os.environ.get("APP_HOST", "0.0.0.0")
-    server.start(host=host, port=port, open_browser=False)
+"""
+Quantum Applications - Unified Single-Server App
+
+This app provides both EM Scattering and QLBM experiences in a single Trame server,
+avoiding the multi-server/iframe approach that causes issues on HuggingFace Spaces.
+"""
+import os
+import errno
+os.environ["OMP_NUM_THREADS"] = "1"
+
+from trame.app import get_server
+from trame_vuetify.ui.vuetify3 import SinglePageLayout
+from trame_vuetify.widgets import vuetify3
+from trame.widgets import html as trame_html
+import threading
+import time
+import base64
+
+# Create a single server for the entire app
+server = get_server()
+state, ctrl = server.state, server.controller
+
+# App state
+state.current_page = None  # None = landing, "EM" or "QLBM"
+
+# --- Logo Loading ---
+def _load_logo_data_uri():
+    base_dir = os.path.dirname(__file__)
+    candidates = [
+        os.path.join(base_dir, "ansys-part-of-synopsys-logo.svg"),
+        os.path.join(base_dir, "synopsys-logo-color-rgb.svg"),
+        os.path.join(base_dir, "synopsys-logo-color-rgb.png"),
+        os.path.join(base_dir, "synopsys-logo-color-rgb.jpg"),
+    ]
+    for p in candidates:
+        if os.path.exists(p):
+            ext = os.path.splitext(p)[1].lower()
+            mime = "image/svg+xml" if ext == ".svg" else ("image/png" if ext == ".png" else "image/jpeg")
+            with open(p, "rb") as f:
+                b64 = base64.b64encode(f.read()).decode("ascii")
+            return f"data:{mime};base64,{b64}"
+    return None
+
+state.logo_src = _load_logo_data_uri()
+
+# --- Import Embedded Modules ---
+# These are lightweight modules that build UI without creating their own servers
+import qlbm_embedded
+import em_embedded
+
+# Set the shared server on both modules
+qlbm_embedded.set_server(server)
+em_embedded.set_server(server)
+
+# Initialize state for both modules
+qlbm_embedded.init_state()
+em_embedded.init_state()
+
+# --- Build the Layout ---
+with SinglePageLayout(server) as layout:
+    layout.title.set_text("Quantum Applications")
+    layout.toolbar.classes = "pl-2 pr-1 py-1 elevation-0"
+    layout.toolbar.style = "background-color: #ffffff; border-bottom: 3px solid #5f259f;"
+    
+    # Custom CSS
+    trame_html.Style("""
+    :root { --v-theme-primary: 95, 37, 159; }
+    .landing-card:hover { transform: translateY(-4px); transition: transform 0.2s ease; }
+    """)
+    
+    with layout.toolbar:
+        vuetify3.VSpacer()
+        
+        # Back button (shown when in a sub-app)
+        vuetify3.VBtn(
+            v_if="current_page",
+            text="Main Page",
+            variant="text",
+            color="primary",
+            prepend_icon="mdi-arrow-left",
+            click="current_page = null",
+            classes="mr-2",
+        )
+        
+        # Current page indicator
+        vuetify3.VChip(
+            v_if="current_page",
+            label=True,
+            color="primary",
+            text_color="white",
+            children=["{{ current_page === 'EM' ? 'Electromagnetic Scattering' : 'Quantum LBM' }}"],
+            classes="mr-2",
+        )
+        
+        # Logo
+        vuetify3.VImg(
+            v_if="logo_src",
+            src=("logo_src", None),
+            style="height: 40px; width: auto;",
+            classes="ml-2",
+        )
+    
+    with layout.content:
+        # === Landing Page ===
+        with vuetify3.VContainer(
+            v_if="!current_page",
+            fluid=True,
+            classes="fill-height d-flex align-center justify-center pa-6",
+        ):
+            with vuetify3.VSheet(
+                elevation=6,
+                rounded=True,
+                style="max-width: 1080px; width: 100%; background: linear-gradient(135deg, #fdfbff, #f3ecff);",
+                classes="pa-8",
+            ):
+                vuetify3.VCardTitle(
+                    "Quantum Simulation Hub",
+                    classes="text-h4 text-primary font-weight-bold mb-2 text-center",
+                )
+                vuetify3.VCardSubtitle(
+                    "Choose a quantum simulation experience. Both run on the same server for optimal performance.",
+                    classes="text-body-1 text-center mb-6",
+                )
+                
+                with vuetify3.VRow(justify="center", align="stretch", class_="text-left"):
+                    # EM Card
+                    with vuetify3.VCol(cols=12, md=5, class_="d-flex"):
+                        with vuetify3.VCard(elevation=4, classes="pa-6 flex-grow-1 landing-card"):
+                            vuetify3.VIcon("mdi-radar", size=52, color="primary", classes="mb-4")
+                            vuetify3.VCardTitle("Electromagnetic Scattering", classes="text-h5 mb-2")
+                            vuetify3.VCardText(
+                                "Simulate electromagnetic wave scattering using quantum algorithms. "
+                                "Configure geometry, excitation, and visualize field propagation.",
+                                classes="text-body-2 mb-6",
+                            )
+                            vuetify3.VBtn(
+                                text="Launch EM",
+                                color="primary",
+                                block=True,
+                                prepend_icon="mdi-play-circle",
+                                size="large",
+                                click="current_page = 'EM'",
+                            )
+                    
+                    # QLBM Card
+                    with vuetify3.VCol(cols=12, md=5, class_="d-flex"):
+                        with vuetify3.VCard(elevation=4, classes="pa-6 flex-grow-1 landing-card"):
+                            vuetify3.VIcon("mdi-water", size=52, color="secondary", classes="mb-4")
+                            vuetify3.VCardTitle("Quantum Lattice Boltzmann", classes="text-h5 mb-2")
+                            vuetify3.VCardText(
+                                "3D fluid simulation using Quantum Lattice Boltzmann Method. "
+                                "Explore advection-diffusion with quantum-enhanced computation.",
+                                classes="text-body-2 mb-6",
+                            )
+                            vuetify3.VBtn(
+                                text="Launch QLBM",
+                                color="secondary",
+                                block=True,
+                                prepend_icon="mdi-play-circle",
+                                size="large",
+                                click="current_page = 'QLBM'",
+                            )
+        
+        # === EM Experience ===
+        with vuetify3.VContainer(
+            v_if="current_page === 'EM'",
+            fluid=True,
+            classes="pa-0 fill-height",
+        ):
+            em_embedded.build_ui()
+        
+        # === QLBM Experience ===
+        with vuetify3.VContainer(
+            v_if="current_page === 'QLBM'",
+            fluid=True,
+            classes="pa-0 fill-height",
+        ):
+            qlbm_embedded.build_ui()
+
+# --- Heartbeat for HuggingFace ---
+def _start_hf_heartbeat_thread(interval_s: int = 5):
+    """Keep the WebSocket alive for HuggingFace Spaces."""
+    def _loop():
+        while True:
+            time.sleep(interval_s)
+            try:
+                server.controller.flush()
+            except Exception:
+                break
+    
+    t = threading.Thread(target=_loop, daemon=True)
+    t.start()
+
+# --- Entry Point ---
+if __name__ == "__main__":
+    # Start heartbeat
+    _start_hf_heartbeat_thread(interval_s=5)
+    
+    # Get port from environment (HuggingFace) or use default
+    base_port = int(os.environ.get("APP_PORT") or os.environ.get("PORT", 7860))
+    host = os.environ.get("APP_HOST", "0.0.0.0")
+    max_attempts = 10
+
+    print(f"Starting Quantum Applications server on {host}:{base_port}")
+    print("This is a SINGLE SERVER serving both EM and QLBM experiences.")
+
+    for attempt in range(max_attempts):
+        port = base_port + attempt
+        try:
+            server.start(host=host, port=port, open_browser=False)
+            break
+        except OSError as exc:
+            if getattr(exc, "errno", None) == errno.EADDRINUSE and attempt < max_attempts - 1:
+                print(f"Port {port} busy, retrying on port {port + 1}...")
+                continue
+            raise

app_old.py

@@ -0,0 +1,239 @@
+import os
+# Ensure OMP_NUM_THREADS is set to avoid libgomp errors
+os.environ["OMP_NUM_THREADS"] = "1"
+
+from trame.app import get_server
+from trame_vuetify.ui.vuetify3 import SinglePageLayout
+from trame_vuetify.widgets import vuetify3
+from trame.widgets import html as trame_html
+import threading
+from concurrent.futures import ThreadPoolExecutor
+import time
+
+# Import embedded page wrappers (lazy load inside tabs)
+from importlib import import_module
+em_page = None
+qlbm_page = None
+
+# Force embedded mode for nested pages (avoid iframes/secondary servers)
+os.environ.setdefault("TRAME_EMBEDDED", "1")
+os.environ.setdefault("TRAME_DISABLE_BROWSER", "1")
+os.environ.setdefault("EM_APP_EMBEDDED", "1")
+os.environ.setdefault("DISABLE_EM_STANDALONE", "1")
+
+# Create a single server for the multipage app
+server = get_server()
+state, ctrl = server.state, server.controller
+
+# App state: landing chooser -> specific experience
+state.current_page = None  # "EM" or "QLBM" once selected
+
+# -------------------------------------------------------------------------
+# Thread pool for long-running jobs to avoid UI freezing by HF timeout
+# -------------------------------------------------------------------------
+MAX_WORKERS = int(os.environ.get("MAX_WORKERS", "4"))
+executor = ThreadPoolExecutor(max_workers=MAX_WORKERS)
+
+def submit_background(fn, *args, **kwargs):
+    """
+    Run a CPU-heavy / long job without blocking Trame's event loop.
+
+    Usage from pages:
+        from trame.app import get_server
+        server = get_server()
+        server.submit_background(long_fn, arg1, arg2, kw1=...)
+    """
+    return executor.submit(fn, *args, **kwargs)
+
+# Expose helper on the server so pages.em_page / pages.qlbm_page can use it
+server.submit_background = submit_background
+
+# Load Synopsys/Ansys logo as data URI for main toolbar
+import base64
+
+def _load_logo_data_uri():
+    base_dir = os.path.dirname(__file__)
+    candidates = [
+        os.path.join(base_dir, "ansys-part-of-synopsys-logo.svg"),
+        os.path.join(base_dir, "synopsys-logo-color-rgb.svg"),
+        os.path.join(base_dir, "synopsys-logo-color-rgb.png"),
+        os.path.join(base_dir, "synopsys-logo-color-rgb.jpg"),
+    ]
+    for p in candidates:
+        if os.path.exists(p):
+            ext = os.path.splitext(p)[1].lower()
+            mime = "image/svg+xml" if ext == ".svg" else ("image/png" if ext == ".png" else "image/jpeg")
+            with open(p, "rb") as f:
+                b64 = base64.b64encode(f.read()).decode("ascii")
+            return f"data:{mime};base64,{b64}"
+    return None
+
+def _stop_subapp(module_name: str, attr_name: str):
+    module = globals().get(attr_name)
+    if module is None:
+        try:
+            module = import_module(module_name)
+            globals()[attr_name] = module
+        except Exception:
+            return
+    stop_fn = getattr(module, "stop", None)
+    if callable(stop_fn):
+        try:
+            stop_fn()
+        except Exception:
+            pass
+
+
+# Safely initialize logo in state (trame state isn't a dict; avoid .get())
+try:
+    if not hasattr(state, "logo_src") or state.logo_src in (None, ""):
+        state.logo_src = _load_logo_data_uri()
+except Exception:
+    state.logo_src = _load_logo_data_uri()
+
+
+@state.change("current_page")
+def _handle_page_change(current_page, **_):
+    """Stop inactive subprocesses as users navigate between experiences."""
+    if current_page == "EM":
+        _stop_subapp("pages.qlbm_page", "qlbm_page")
+    elif current_page == "QLBM":
+        _stop_subapp("pages.em_page", "em_page")
+    else:
+        _stop_subapp("pages.em_page", "em_page")
+        _stop_subapp("pages.qlbm_page", "qlbm_page")
+
+with SinglePageLayout(server) as layout:
+    layout.title.set_text("Quantum Applications")
+    layout.toolbar.classes = "pl-2 pr-1 py-1 elevation-0"
+    layout.toolbar.style = "background-color: #ffffff; border-bottom: 3px solid #5f259f;"
+
+    with layout.toolbar:
+        vuetify3.VSpacer()
+        vuetify3.VBtn(
+            v_if="current_page",
+            text="Main Page",
+            variant="text",
+            color="primary",
+            prepend_icon="mdi-arrow-left",
+            click="current_page = null",
+            classes="mr-2",
+        )
+        vuetify3.VChip(
+            v_if="current_page",
+            label=True,
+            color="primary",
+            text_color="white",
+            children=["{{ current_page === 'EM' ? 'Electromagnetic Scattering' : 'Quantum LBM' }}"],
+            classes="mr-2",
+        )
+        vuetify3.VImg(
+            v_if="logo_src",
+            src=("logo_src", None),
+            style="height: 40px; width: auto;",
+            classes="ml-2",
+        )
+
+    with layout.content:
+        # Landing screen
+        with vuetify3.VContainer(
+            v_if="!current_page",
+            fluid=True,
+            classes="fill-height d-flex align-center justify-center pa-6",
+        ):
+            with vuetify3.VSheet(
+                elevation=6,
+                rounded=True,
+                style="max-width: 1080px; width: 100%; background: linear-gradient(135deg, #fdfbff, #f3ecff);",
+                classes="pa-8",
+            ):
+                vuetify3.VCardTitle(
+                    "Pick a quantum experience",
+                    classes="text-h4 text-primary font-weight-bold mb-2 text-center",
+                )
+                vuetify3.VCardSubtitle(
+                    "Choose one workflow. We'll spin up only that server until you switch back.",
+                    classes="text-body-1 text-center mb-6",
+                )
+                with vuetify3.VRow(justify="center", align="stretch", class_="text-left"):
+                    with vuetify3.VCol(cols=12, md=5, class_="d-flex"):
+                        with vuetify3.VCard(elevation=4, classes="pa-6 flex-grow-1"):
+                            vuetify3.VIcon("mdi-radar", size=52, color="primary", classes="mb-4")
+                            vuetify3.VCardTitle("Electromagnetic Scattering", classes="text-h5 mb-2")
+                            vuetify3.VCardText(
+                                "Placeholder",
+                                classes="text-body-2 mb-6",
+                            )
+                            vuetify3.VBtn(
+                                text="Launch EM",
+                                color="primary",
+                                block=True,
+                                prepend_icon="mdi-play-circle",
+                                size="large",
+                                click="current_page = 'EM'",
+                            )
+                    with vuetify3.VCol(cols=12, md=5, class_="d-flex"):
+                        with vuetify3.VCard(elevation=4, classes="pa-6 flex-grow-1"):
+                            vuetify3.VIcon("mdi-water", size=52, color="secondary", classes="mb-4")
+                            vuetify3.VCardTitle("Fluids", classes="text-h5 mb-2")
+                            vuetify3.VCardText(
+                                "Placeholder",
+                                classes="text-body-2 mb-6",
+                            )
+                            vuetify3.VBtn(
+                                text="Launch QLBM",
+                                color="secondary",
+                                block=True,
+                                prepend_icon="mdi-play-circle",
+                                size="large",
+                                click="current_page = 'QLBM'",
+                            )
+
+        # EM experience
+        with vuetify3.VContainer(v_if="current_page === 'EM'", fluid=True, classes="pa-0 fill-height"):
+            try:
+                if not globals().get("em_page"):
+                    globals()["em_page"] = import_module("pages.em_page")
+                em_page.build(server)
+            except Exception as e:
+                trame_html.Div(f"EM embed failed: {e}", style="padding:8px;color:#b00020;")
+
+        # QLBM experience
+        with vuetify3.VContainer(v_if="current_page === 'QLBM'", fluid=True, classes="pa-0 fill-height"):
+            try:
+                if not globals().get("qlbm_page"):
+                    globals()["qlbm_page"] = import_module("pages.qlbm_page")
+                qlbm_page.build(server)
+            except Exception as e:
+                trame_html.Div(f"QLBM embed failed: {e}", style="padding:8px;color:#b00020;")
+
+# -------------------------------------------------------------------------
+# Heartbeat: keep HuggingFace WebSocket alive during idle periods
+# -------------------------------------------------------------------------
+def _start_hf_heartbeat_thread(interval_s: int = 5):
+    """
+    Start a background thread that periodically flushes the server,
+    keeping the WebSocket "active" in the eyes of Hugging Face.
+    """
+    def _loop():
+        while True:
+            time.sleep(interval_s)
+            try:
+                server.controller.flush()
+            except Exception:
+                # If server is shutting down or flush fails, exit the thread
+                break
+
+    t = threading.Thread(target=_loop, daemon=True)
+    t.start()
+
+
+if __name__ == "__main__":
+
+    # Start HF heartbeat to prevent timeout
+    _start_hf_heartbeat_thread(interval_s=5)
+
+    # Allow reverse-proxy setups to pin the internal host/port independently from the public PORT
+    port = int(os.environ.get("APP_PORT") or os.environ.get("PORT", 7860))
+    host = os.environ.get("APP_HOST", "0.0.0.0")
+    server.start(host=host, port=port, open_browser=False)

pages/em_page.py

@@ -1,70 +1,43 @@
+"""
+EM Page - Embedded Mode Wrapper
+
+This module provides the EM experience for the unified app.
+It uses the embedded module instead of spawning a subprocess.
+"""
 from trame_vuetify.widgets import vuetify3
 from trame.widgets import html as trame_html
 import os
-import subprocess
 import sys
-import atexit
-
-# Keep a single child process for the EM app
-_em_proc = None
-_EM_HOST = os.environ.get("EM_HOST", "127.0.0.1")
-_EM_IFRAME_SRC = os.environ.get("EM_IFRAME_SRC", "").strip()
 
+# Add parent directory to path for imports
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
 
-def _kill_em_process():
-    """Ensure any running EM process is terminated."""
-    global _em_proc
-    if _em_proc and _em_proc.poll() is None:
-        try:
-            _em_proc.terminate()
-            _em_proc.wait(timeout=2)
-        except Exception:
-            try:
-                _em_proc.kill()
-            except Exception:
-                pass
-    _em_proc = None
+try:
+    import em_embedded
+    _EM_AVAILABLE = True
+except ImportError as e:
+    _EM_AVAILABLE = False
+    _EM_ERROR = str(e)
 
 
-def _ensure_em_process_started():
-    global _em_proc
-    # Check if process is still running
-    if (_em_proc and _em_proc.poll() is None):
+def build(server):
+    """Build the EM UI using the embedded module."""
+    if not _EM_AVAILABLE:
+        with vuetify3.VContainer(fluid=True, classes="pa-4"):
+            trame_html.Div(
+                f"EM module failed to load: {_EM_ERROR}",
+                style="color: #b00020; padding: 12px;"
+            )
         return
     
-    # Kill any stale process first
-    _kill_em_process()
+    # Set the server and initialize state
+    em_embedded.set_server(server)
+    em_embedded.init_state()
     
-    base_dir = os.path.dirname(os.path.dirname(__file__))
-    em_path = os.path.join(base_dir, "em_trame.py")
-    env = os.environ.copy()
-    # Prevent hosted platforms from forcing the subprocess to bind to $PORT
-    env.pop("PORT", None)
-    env.pop("HF_PORT", None)
-    # Port used by iframe
-    env.setdefault("EM_APP_PORT", env.get("PORT_EM", "8701"))
-    env.setdefault("EM_HOST", _EM_HOST)
-    # Start em_trame.py in a separate process
-    python_exe = sys.executable or "python"
-    _em_proc = subprocess.Popen([python_exe, em_path], cwd=base_dir, env=env)
+    # Build the UI
+    em_embedded.build_ui()
 
 
-# Register cleanup on exit
-atexit.register(_kill_em_process)
-
-
-def build(server):
-    """Render the EM app via iframe and ensure its process is running."""
-    _ensure_em_process_started()
-    port = os.environ.get("EM_APP_PORT", os.environ.get("PORT_EM", "8701"))
-    host = os.environ.get("EM_HOST", _EM_HOST)
-    iframe_src = _EM_IFRAME_SRC or f"http://{host}:{port}/"
-    with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
-        trame_html.Iframe(
-            src=("em_iframe_src", iframe_src),
-            style="border:0; width:100%; height: calc(100vh - 64px);",
-        )
-        trame_html.Div(
-            "If the EM page is blank, wait a few seconds for the subprocess to start.",
-            style="color: rgba(0,0,0,.6); padding: 6px;",
-        )
+def stop():
+    """Stop any running EM processes (no-op in embedded mode)."""
+    pass

pages/em_page_subprocess.py

@@ -0,0 +1,70 @@
+from trame_vuetify.widgets import vuetify3
+from trame.widgets import html as trame_html
+import os
+import subprocess
+import sys
+import atexit
+
+# Keep a single child process for the EM app
+_em_proc = None
+_EM_HOST = os.environ.get("EM_HOST", "127.0.0.1")
+_EM_IFRAME_SRC = os.environ.get("EM_IFRAME_SRC", "").strip()
+
+
+def _kill_em_process():
+    """Ensure any running EM process is terminated."""
+    global _em_proc
+    if _em_proc and _em_proc.poll() is None:
+        try:
+            _em_proc.terminate()
+            _em_proc.wait(timeout=2)
+        except Exception:
+            try:
+                _em_proc.kill()
+            except Exception:
+                pass
+    _em_proc = None
+
+
+def _ensure_em_process_started():
+    global _em_proc
+    # Check if process is still running
+    if (_em_proc and _em_proc.poll() is None):
+        return
+    
+    # Kill any stale process first
+    _kill_em_process()
+    
+    base_dir = os.path.dirname(os.path.dirname(__file__))
+    em_path = os.path.join(base_dir, "em_trame.py")
+    env = os.environ.copy()
+    # Prevent hosted platforms from forcing the subprocess to bind to $PORT
+    env.pop("PORT", None)
+    env.pop("HF_PORT", None)
+    # Port used by iframe
+    env.setdefault("EM_APP_PORT", env.get("PORT_EM", "8701"))
+    env.setdefault("EM_HOST", _EM_HOST)
+    # Start em_trame.py in a separate process
+    python_exe = sys.executable or "python"
+    _em_proc = subprocess.Popen([python_exe, em_path], cwd=base_dir, env=env)
+
+
+# Register cleanup on exit
+atexit.register(_kill_em_process)
+
+
+def build(server):
+    """Render the EM app via iframe and ensure its process is running."""
+    _ensure_em_process_started()
+    port = os.environ.get("EM_APP_PORT", os.environ.get("PORT_EM", "8701"))
+    host = os.environ.get("EM_HOST", _EM_HOST)
+    iframe_src = _EM_IFRAME_SRC or f"http://{host}:{port}/"
+    with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
+        trame_html.Iframe(
+            src=("em_iframe_src", iframe_src),
+            style="border:0; width:100%; height: calc(100vh - 64px);",
+        )
+        trame_html.Div(
+            "If the EM page is blank, wait a few seconds for the subprocess to start.",
+            style="color: rgba(0,0,0,.6); padding: 6px;",
+        )

pages/qlbm_page.py

@@ -1,128 +1,43 @@
-"""Embedded QLBM fluids page wrapper.
-Starts the standalone qlbm.py server in a background subprocess so the main
-multi-page app only needs `python app.py`.
+"""
+QLBM Page - Embedded Mode Wrapper
 
-Environment variables:
-  QLBM_APP_PORT / PORT_QLBM -> port (default 8702)
-  QLBM_HOST                 -> host interface (default 127.0.0.1)
+This module provides the QLBM experience for the unified app.
+It uses the embedded module instead of spawning a subprocess.
 """
-from __future__ import annotations
-import os, sys, subprocess, atexit
 from trame_vuetify.widgets import vuetify3
 from trame.widgets import html as trame_html
-import shutil
-
-_gpu_status = {
-    "checked": False,
-    "available": False,
-    "reason": ""
-}
-
-
-def _detect_gpu_availability(force_recheck=False):
-    """Best-effort CUDA GPU detection for hosted environments."""
-    global _gpu_status
-    if _gpu_status["checked"] and not force_recheck:
-        return _gpu_status["available"], _gpu_status["reason"]
-
-    allow_missing = os.environ.get("QLBM_IGNORE_GPU_CHECK", "0") == "1"
-    if allow_missing:
-        _gpu_status.update({"checked": True, "available": True, "reason": ""})
-        return True, ""
- 
-    def _has_devices(val: str | None) -> bool:
-        if not val:
-            return False
-        lowered = val.strip().lower()
-        return lowered not in ("", "none", "nodevfiles", "-1")
-
-    nvidia_devices = os.environ.get("NVIDIA_VISIBLE_DEVICES")
-    cuda_devices = os.environ.get("CUDA_VISIBLE_DEVICES")
-    saw_env_nvidia = _has_devices(nvidia_devices)
-    saw_env_cuda = _has_devices(cuda_devices)
+import os
+import sys
 
-    # Heuristics: presence of device files or nvidia-smi
-    has_proc_entry = os.path.exists("/proc/driver/nvidia/version")
-    has_nvidia_smi = shutil.which("nvidia-smi") is not None
-    has_gpu = (saw_env_nvidia or saw_env_cuda or has_proc_entry or has_nvidia_smi)
+# Add parent directory to path for imports
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
 
-    if has_gpu:
-        _gpu_status.update({"checked": True, "available": True, "reason": ""})
-        return True, ""
+try:
+    import qlbm_embedded
+    _QLBM_AVAILABLE = True
+except ImportError as e:
+    _QLBM_AVAILABLE = False
+    _QLBM_ERROR = str(e)
 
-    reason = "No NVIDIA GPU detected (CUDA_VISIBLE_DEVICES/NVIDIA_VISIBLE_DEVICES unset and no nvidia drivers present)."
-    _gpu_status.update({"checked": True, "available": False, "reason": reason})
-    return False, reason
 
-_qlbm_proc = None
-_QLBM_HOST = os.environ.get("QLBM_HOST", "127.0.0.1")
-_QLBM_IFRAME_SRC = os.environ.get("QLBM_IFRAME_SRC", "").strip()
-
-
-def _kill_qlbm_process():
-    global _qlbm_proc
-    if _qlbm_proc and _qlbm_proc.poll() is None:
-        try:
-            _qlbm_proc.terminate()
-            _qlbm_proc.wait(timeout=2)
-        except Exception:
-            try:
-                _qlbm_proc.kill()
-            except Exception:
-                pass
-    _qlbm_proc = None
-
-
-def _ensure_qlbm_process_started():
-    global _qlbm_proc
-    if _qlbm_proc and _qlbm_proc.poll() is None:
-        return
-    _kill_qlbm_process()
-    base_dir = os.path.dirname(os.path.dirname(__file__))
-    qlbm_path = os.path.join(base_dir, "qlbm.py")
-    env = os.environ.copy()
-    env.pop("PORT", None)
-    env.pop("HF_PORT", None)
-    env.setdefault("QLBM_APP_PORT", env.get("PORT_QLBM", "8702"))
-    env.setdefault("QLBM_HOST", _QLBM_HOST)
-    py = sys.executable or "python"
-    _qlbm_proc = subprocess.Popen([py, qlbm_path], cwd=base_dir, env=env)
-
-
-atexit.register(_kill_qlbm_process)
-
-
-def build(server):  # signature matches app.py expectation
-    if os.environ.get("DISABLE_SUBAPPS", "").strip() == "1":
-        with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
-            trame_html.Div(
-                "This tab is disabled in single-port environments. Please run locally to enable the QLBM view.",
-                style="padding:12px;color:#555;",
-            )
-        return
-    gpu_ok, gpu_reason = _detect_gpu_availability()
-    if not gpu_ok:
-        with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
+def build(server):
+    """Build the QLBM UI using the embedded module."""
+    if not _QLBM_AVAILABLE:
+        with vuetify3.VContainer(fluid=True, classes="pa-4"):
             trame_html.Div(
-                "QLBM requires an NVIDIA CUDA-capable GPU, which is not available in this environment.",
-                style="padding:12px;color:#b00020;font-weight:600;",
-            )
-            trame_html.Div(
-                f"Details: {gpu_reason} Run the FLUIDS tab locally with a GPU or set QLBM_IGNORE_GPU_CHECK=1 to bypass this guard.",
-                style="padding:8px 12px;color:#555;",
+                f"QLBM module failed to load: {_QLBM_ERROR}",
+                style="color: #b00020; padding: 12px;"
             )
         return
-    _ensure_qlbm_process_started()
-    port = os.environ.get("QLBM_APP_PORT", os.environ.get("PORT_QLBM", "8702"))
-    host = os.environ.get("QLBM_HOST", _QLBM_HOST)
-    iframe_src = _QLBM_IFRAME_SRC or f"http://{host}:{port}/"
-    with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
-        trame_html.Iframe(
-            src=("qlbm_iframe_src", iframe_src),
-            style="border:0;width:100%;height:100%;min-height:0;",
-        )
-        trame_html.Div(
-            "If the QLBM view is blank, wait a few seconds for the subprocess to start.",
-            style="color:rgba(0,0,0,.6);padding:6px;",
-        )
-
+    
+    # Set the server and initialize state
+    qlbm_embedded.set_server(server)
+    qlbm_embedded.init_state()
+    
+    # Build the UI
+    qlbm_embedded.build_ui()
+
+
+def stop():
+    """Stop any running QLBM processes (no-op in embedded mode)."""
+    pass

pages/qlbm_page_subprocess.py

@@ -0,0 +1,128 @@
+"""Embedded QLBM fluids page wrapper.
+Starts the standalone qlbm.py server in a background subprocess so the main
+multi-page app only needs `python app.py`.
+
+Environment variables:
+  QLBM_APP_PORT / PORT_QLBM -> port (default 8702)
+  QLBM_HOST                 -> host interface (default 127.0.0.1)
+"""
+from __future__ import annotations
+import os, sys, subprocess, atexit
+from trame_vuetify.widgets import vuetify3
+from trame.widgets import html as trame_html
+import shutil
+
+_gpu_status = {
+    "checked": False,
+    "available": False,
+    "reason": ""
+}
+
+
+def _detect_gpu_availability(force_recheck=False):
+    """Best-effort CUDA GPU detection for hosted environments."""
+    global _gpu_status
+    if _gpu_status["checked"] and not force_recheck:
+        return _gpu_status["available"], _gpu_status["reason"]
+
+    allow_missing = os.environ.get("QLBM_IGNORE_GPU_CHECK", "0") == "1"
+    if allow_missing:
+        _gpu_status.update({"checked": True, "available": True, "reason": ""})
+        return True, ""
+ 
+    def _has_devices(val: str | None) -> bool:
+        if not val:
+            return False
+        lowered = val.strip().lower()
+        return lowered not in ("", "none", "nodevfiles", "-1")
+
+    nvidia_devices = os.environ.get("NVIDIA_VISIBLE_DEVICES")
+    cuda_devices = os.environ.get("CUDA_VISIBLE_DEVICES")
+    saw_env_nvidia = _has_devices(nvidia_devices)
+    saw_env_cuda = _has_devices(cuda_devices)
+
+    # Heuristics: presence of device files or nvidia-smi
+    has_proc_entry = os.path.exists("/proc/driver/nvidia/version")
+    has_nvidia_smi = shutil.which("nvidia-smi") is not None
+    has_gpu = (saw_env_nvidia or saw_env_cuda or has_proc_entry or has_nvidia_smi)
+
+    if has_gpu:
+        _gpu_status.update({"checked": True, "available": True, "reason": ""})
+        return True, ""
+
+    reason = "No NVIDIA GPU detected (CUDA_VISIBLE_DEVICES/NVIDIA_VISIBLE_DEVICES unset and no nvidia drivers present)."
+    _gpu_status.update({"checked": True, "available": False, "reason": reason})
+    return False, reason
+
+_qlbm_proc = None
+_QLBM_HOST = os.environ.get("QLBM_HOST", "127.0.0.1")
+_QLBM_IFRAME_SRC = os.environ.get("QLBM_IFRAME_SRC", "").strip()
+
+
+def _kill_qlbm_process():
+    global _qlbm_proc
+    if _qlbm_proc and _qlbm_proc.poll() is None:
+        try:
+            _qlbm_proc.terminate()
+            _qlbm_proc.wait(timeout=2)
+        except Exception:
+            try:
+                _qlbm_proc.kill()
+            except Exception:
+                pass
+    _qlbm_proc = None
+
+
+def _ensure_qlbm_process_started():
+    global _qlbm_proc
+    if _qlbm_proc and _qlbm_proc.poll() is None:
+        return
+    _kill_qlbm_process()
+    base_dir = os.path.dirname(os.path.dirname(__file__))
+    qlbm_path = os.path.join(base_dir, "qlbm.py")
+    env = os.environ.copy()
+    env.pop("PORT", None)
+    env.pop("HF_PORT", None)
+    env.setdefault("QLBM_APP_PORT", env.get("PORT_QLBM", "8702"))
+    env.setdefault("QLBM_HOST", _QLBM_HOST)
+    py = sys.executable or "python"
+    _qlbm_proc = subprocess.Popen([py, qlbm_path], cwd=base_dir, env=env)
+
+
+atexit.register(_kill_qlbm_process)
+
+
+def build(server):  # signature matches app.py expectation
+    if os.environ.get("DISABLE_SUBAPPS", "").strip() == "1":
+        with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
+            trame_html.Div(
+                "This tab is disabled in single-port environments. Please run locally to enable the QLBM view.",
+                style="padding:12px;color:#555;",
+            )
+        return
+    gpu_ok, gpu_reason = _detect_gpu_availability()
+    if not gpu_ok:
+        with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
+            trame_html.Div(
+                "QLBM requires an NVIDIA CUDA-capable GPU, which is not available in this environment.",
+                style="padding:12px;color:#b00020;font-weight:600;",
+            )
+            trame_html.Div(
+                f"Details: {gpu_reason} Run the FLUIDS tab locally with a GPU or set QLBM_IGNORE_GPU_CHECK=1 to bypass this guard.",
+                style="padding:8px 12px;color:#555;",
+            )
+        return
+    _ensure_qlbm_process_started()
+    port = os.environ.get("QLBM_APP_PORT", os.environ.get("PORT_QLBM", "8702"))
+    host = os.environ.get("QLBM_HOST", _QLBM_HOST)
+    iframe_src = _QLBM_IFRAME_SRC or f"http://{host}:{port}/"
+    with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
+        trame_html.Iframe(
+            src=("qlbm_iframe_src", iframe_src),
+            style="border:0;width:100%;height:100%;min-height:0;",
+        )
+        trame_html.Div(
+            "If the QLBM view is blank, wait a few seconds for the subprocess to start.",
+            style="color:rgba(0,0,0,.6);padding:6px;",
+        )
+

qlbm_embedded.py

@@ -0,0 +1,1472 @@
+"""
+QLBM Embedded Mode Module
+
+This module provides functions to build the QLBM UI into an existing Trame server,
+enabling single-server architecture for the unified app.
+
+Contains ALL features from qlbm.py but designed for embedded use.
+"""
+import os
+import numpy as np
+import math
+import pyvista as pv
+import plotly.graph_objects as go
+import tempfile
+from pathlib import Path
+from datetime import datetime
+from trame_vuetify.widgets import vuetify3
+from trame.widgets import html
+from trame_plotly.widgets import plotly as plotly_widgets
+from pyvista.trame.ui import plotter_ui
+
+# Set offscreen before pyvista usage
+pv.OFF_SCREEN = True
+
+# --- Backend Detection ---
+def _env_flag(name: str) -> bool:
+    return os.environ.get(name, "").strip().lower() in ("1", "true", "yes")
+
+def _should_disable_quantum_backend() -> str | None:
+    """Return a reason string if quantum backend should be disabled, else None."""
+    if _env_flag("FORCE_CPU_DEMO"):
+        return "FORCE_CPU_DEMO environment variable is set"
+    if _env_flag("HUGGINGFACE_SPACE") or os.environ.get("SPACE_ID"):
+        return "Hugging Face Spaces detected (no GPU runtime)"
+    return None
+
+_disable_reason = _should_disable_quantum_backend()
+simulate_qlbm_3D_and_animate = None
+
+if _disable_reason:
+    _SIMULATION_BACKEND_READY = False
+    _SIMULATION_BACKEND_NOTE = f"CPU demo mode active ({_disable_reason}). Results are approximate."
+    _SIMULATION_MODE_LABEL = "CPU demo backend"
+    _SIMULATION_DISABLED_REASON = _disable_reason
+else:
+    try:
+        from fluid3d_pyvista import simulate_qlbm_3D_and_animate
+        _SIMULATION_BACKEND_READY = True
+        _SIMULATION_BACKEND_NOTE = ""
+        _SIMULATION_MODE_LABEL = "Quantum CUDA-Q backend"
+        _SIMULATION_DISABLED_REASON = None
+    except Exception as exc:
+        simulate_qlbm_3D_and_animate = None
+        _SIMULATION_BACKEND_READY = False
+        _SIMULATION_BACKEND_NOTE = f"CPU demo mode active (import error: {exc}). Results are approximate."
+        _SIMULATION_MODE_LABEL = "CPU demo backend"
+        _SIMULATION_DISABLED_REASON = str(exc)
+
+_SIMULATION_CAN_RUN = True  # CPU demo is always available
+_CPU_DEMO_MAX_GRID = 48
+
+# Module-level state
+_server = None
+_state = None
+_ctrl = None
+_plotter = None
+_initialized = False
+
+# Global simulation data
+simulation_data_frames = []
+simulation_times = []
+current_grid_object = None
+
+GRID_SIZES = [8, 16, 32, 64, 128, 256]
+_WORKFLOW_BASE_STYLE = "font-size: 0.8rem; border: 1px solid transparent; transition: box-shadow 0.2s ease;"
+_WORKFLOW_HIGHLIGHT_STYLE = "font-size: 0.8rem; box-shadow: 0 0 0 2px #6200ea;"
+_WORKFLOW_CARD_KEYS = ["overview_card_style", "distribution_card_style", "advect_card_style", "meshing_card_style", "backend_card_style"]
+
+_PROBLEM_GEOMETRY_MAP = {
+    "Scalar advection-diffusion in a box": "Cube",
+    "Laminar flow & heat transfer for a heated body in water.": "Rectangular domain with a heated box (3D)",
+}
+
+
+def set_server(server):
+    """Set the server for embedded mode."""
+    global _server, _state, _ctrl
+    _server = server
+    _state = server.state
+    _ctrl = server.controller
+
+
+def init_state():
+    """Initialize QLBM state variables with all features from qlbm.py."""
+    global _initialized
+    if _initialized or _state is None:
+        return
+    
+    _state.update({
+        # Console & Status
+        "qlbm_console_output": "QLBM Console initialized.\n",
+        "qlbm_status_visible": True,
+        "qlbm_status_message": "Ready",
+        "qlbm_status_type": "info",
+        "qlbm_simulation_progress": 0,
+        "qlbm_show_progress": False,
+        
+        # Distribution
+        "qlbm_dist_modes": ["Sinusoidal", "Gaussian"],
+        "qlbm_dist_type": None,
+        "qlbm_nx": 32,
+        "qlbm_show_edges": False,
+        "qlbm_custom_dist_params": False,
+        
+        # Sinusoidal params
+        "qlbm_sine_k_x": 1.0,
+        "qlbm_sine_k_y": 1.0,
+        "qlbm_sine_k_z": 1.0,
+        
+        # Gaussian params
+        "qlbm_gauss_cx": 16.0,
+        "qlbm_gauss_cy": 16.0,
+        "qlbm_gauss_cz": 16.0,
+        "qlbm_gauss_sigma": 6.0,
+        
+        # Problem & Geometry
+        "qlbm_qlbm_problems": [
+            "Scalar advection-diffusion in a box",
+            "Laminar flow & heat transfer for a heated body in water.",
+        ],
+        "qlbm_problems_selection": None,
+        "qlbm_geometry_selection": None,
+        "qlbm_domain_L": 1.0,
+        "qlbm_domain_W": 1.0,
+        "qlbm_domain_H": 1.0,
+        
+        # Boundary conditions
+        "qlbm_boundary_condition": "Periodic",
+        
+        # Advecting fields
+        "qlbm_advecting_field": None,
+        "qlbm_show_advect_params": False,
+        "qlbm_vx_expr": "0.2",
+        "qlbm_vy_expr": "-0.15",
+        "qlbm_vz_expr": "0.3",
+        
+        # Meshing
+        "qlbm_grid_index": 2,  # Index into GRID_SIZES
+        "qlbm_grid_size": 32,
+        "qlbm_time_steps": 10,
+        
+        # Backend
+        "qlbm_backend_type": None,
+        "qlbm_selected_simulator": "IBM Qiskit simulator",
+        "qlbm_selected_qpu": "IBM QPU",
+        
+        # Simulation state
+        "qlbm_is_running": False,
+        "qlbm_run_error": "",
+        "qlbm_simulation_has_run": False,
+        "qlbm_time_val": 0,
+        "qlbm_max_time_step": 0,
+        "qlbm_time_slider_labels": [],
+        "qlbm_current_time_label": "0.0",
+        
+        # Qubit info
+        "qlbm_qubit_grid_info": "Grid Size: 32 × 32 × 32",
+        "qlbm_qubit_warning": "",
+        
+        # Backend info
+        "qlbm_simulation_backend_ready": _SIMULATION_CAN_RUN,
+        "qlbm_simulation_backend_note": _SIMULATION_BACKEND_NOTE,
+        "qlbm_simulation_backend_mode": _SIMULATION_MODE_LABEL,
+        
+        # Workflow highlighting
+        "qlbm_workflow_step": 0,
+        "qlbm_overview_card_style": _WORKFLOW_BASE_STYLE,
+        "qlbm_distribution_card_style": _WORKFLOW_BASE_STYLE,
+        "qlbm_advect_card_style": _WORKFLOW_BASE_STYLE,
+        "qlbm_meshing_card_style": _WORKFLOW_BASE_STYLE,
+        "qlbm_backend_card_style": _WORKFLOW_BASE_STYLE,
+        
+        # Pick point text
+        "qlbm_pick_text": "",
+    })
+    _initialized = True
+
+
+def log_to_console(message):
+    """Log a message to the QLBM console."""
+    if _state is None:
+        return
+    timestamp = datetime.now().strftime("%H:%M:%S")
+    new_line = f"[{timestamp}] {message}\n"
+    _state.qlbm_console_output = (_state.qlbm_console_output or "") + new_line
+
+
+def _set_pick_text(text):
+    """Set the pick text for point picking."""
+    if _state is not None:
+        _state.qlbm_pick_text = text
+
+
+def _create_plotter():
+    """Create and return the PyVista plotter."""
+    global _plotter
+    if _plotter is None:
+        pv.OFF_SCREEN = True
+        _plotter = pv.Plotter()
+    return _plotter
+
+
+def _ensure_point_picking(callback):
+    """Enable point picking on the plotter."""
+    global _plotter
+    if _plotter is None:
+        return
+    try:
+        _plotter.enable_point_picking(
+            callback=callback,
+            show_message=False,
+            use_picker=True,
+            pickable_window=False,
+            show_point=True,
+            point_size=12,
+            color="red",
+        )
+    except Exception:
+        pass
+
+
+# --- Workflow Highlighting ---
+def _determine_workflow_step():
+    """Determine current workflow step based on state."""
+    if _state is None:
+        return 0
+    if not _state.qlbm_problems_selection:
+        return 0
+    if not _state.qlbm_dist_type:
+        return 1
+    if not _state.qlbm_advecting_field:
+        return 2
+    if not _state.qlbm_backend_type:
+        return 4
+    return 5
+
+
+def _apply_workflow_highlights(step):
+    """Apply highlighting to the current workflow step card."""
+    if _state is None:
+        return
+    for i, key in enumerate(_WORKFLOW_CARD_KEYS):
+        attr = f"qlbm_{key}"
+        if hasattr(_state, attr):
+            setattr(_state, attr, _WORKFLOW_HIGHLIGHT_STYLE if i == step else _WORKFLOW_BASE_STYLE)
+
+
+# --- Qubit Info ---
+def update_qubit_3D_info(grid_size: int):
+    """Generate qubit requirement plot and info strings."""
+    try:
+        num_reg_qubits = int(math.log2(grid_size)) if grid_size > 0 else 3
+        x = np.array([16, 32, 64, 128, 256])
+        y = np.log2(x).astype(int)
+        fig = go.Figure()
+        fig.add_trace(go.Scatter(x=x, y=y, mode='lines', name='Qubits/Direction', line=dict(color='#7A3DB5', width=3)))
+        fig.add_trace(go.Scatter(x=[grid_size], y=[num_reg_qubits], mode='markers',
+                                 marker=dict(size=12, color='red'), name='Current Selection'))
+        fig.update_layout(
+            xaxis_title="Grid Size (Points/Direction)",
+            yaxis_title="Qubits/Direction",
+            width=616,
+            height=320,
+            margin=dict(l=40, r=20, t=20, b=40)
+        )
+        grid_display = f"Grid Size: {grid_size} × {grid_size} × {grid_size}"
+        warning = ""
+        if grid_size > 64:
+            warning = "⚠️ Warning: Grid sizes > 64 may exceed simulator/memory limits!"
+        elif grid_size > 16 and _state and _state.qlbm_selected_qpu == "IBM QPU" and _state.qlbm_backend_type == "QPU":
+            warning = "⚠️ Warning: Grid size > 16 may exceed IBM QPU capacity!"
+        return fig, grid_display, warning
+    except Exception:
+        return go.Figure(), "Grid Size: N/A", ""
+
+
+# --- Velocity Presets ---
+def set_velocity_preset(preset_name):
+    """Map velocity preset buttons to expression triplets."""
+    if _state is None:
+        return
+    mapping = {
+        "Uniform": ("0.2", "-0.15", "0.3"),
+        "Swirl": ("0.3*sin(-2*pi*z)", "0.2", "0.3*sin(2*pi*x)"),
+        "Shear": ("abs(z-0.5)*1.2-0.3", "0", "0"),
+        "TGV": ("0.15*cos(2*pi*x)*sin(2*pi*y)*sin(2*pi*z)", "-0.3*sin(2*pi*x)*cos(2*pi*y)*sin(2*pi*z)", "0.15*sin(2*pi*x)*sin(2*pi*y)*cos(2*pi*z)"),
+    }
+    vx, vy, vz = mapping.get(preset_name, mapping["Uniform"])
+    _state.qlbm_advecting_field = preset_name
+    _state.qlbm_vx_expr = vx
+    _state.qlbm_vy_expr = vy
+    _state.qlbm_vz_expr = vz
+
+
+def make_velocity_func(expr):
+    """Convert a string expression into a function of (x, y, z)."""
+    def func(x, y, z):
+        context = {
+            "x": x, "y": y, "z": z, 
+            "sin": np.sin, "cos": np.cos, "tan": np.tan,
+            "pi": np.pi, "abs": np.abs, "exp": np.exp, "sqrt": np.sqrt
+        }
+        try:
+            return eval(str(expr), {"__builtins__": {}}, context)
+        except Exception as e:
+            print(f"Error evaluating velocity expression '{expr}': {e}")
+            return np.zeros_like(x) if isinstance(x, np.ndarray) else 0.0
+    return func
+
+
+def _safe_velocity_sample(func) -> float:
+    try:
+        val = func(0.5, 0.5, 0.5)
+        if isinstance(val, np.ndarray):
+            val = float(np.mean(val))
+        return float(val)
+    except Exception:
+        return 0.0
+
+
+def build_ui():
+    """Build the QLBM UI into the current Trame context."""
+    if _state is None:
+        raise RuntimeError("Server not set. Call set_server() first.")
+    
+    init_state()
+    plotter = _create_plotter()
+    
+    # Register state change handlers
+    _register_handlers()
+    
+    # Apply initial CSS
+    html.Style("""
+    :root{ --v-theme-primary:95,37,159; }
+    .example-img{ max-width:100%; border-radius:4px; }
+    .warn-text{ color:#b71c1c; font-size:0.85rem; }
+    """)
+    
+    # Build the UI
+    with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
+        with vuetify3.VRow(no_gutters=True, classes="fill-height"):
+            # Left Column: Controls
+            with vuetify3.VCol(cols=5, classes="pa-2 d-flex flex-column", style="overflow-y: auto; max-height: 200vh;"):
+                _build_control_panels(plotter)
+            
+            # Right Column: Visualization
+            with vuetify3.VCol(cols=7, classes="pa-1 d-flex flex-column"):
+                _build_visualization_panel(plotter)
+        
+        # Floating status window
+        _build_status_window()
+
+
+# --- Distribution Figure Functions ---
+def get_initial_distribution_figure(distribution_type, N, show_edges=False):
+    """Generate a 3D Plotly figure for the initial distribution."""
+    if _state is None:
+        return go.Figure()
+        
+    if distribution_type == "Sinusoidal":
+        kx = max(1.0, round(float(_state.qlbm_sine_k_x))) if hasattr(_state, "qlbm_sine_k_x") else 1.0
+        ky = max(1.0, round(float(_state.qlbm_sine_k_y))) if hasattr(_state, "qlbm_sine_k_y") else 1.0
+        kz = max(1.0, round(float(_state.qlbm_sine_k_z))) if hasattr(_state, "qlbm_sine_k_z") else 1.0
+        selected_func = lambda x, y, z: \
+            np.sin(x * 2 * np.pi * kx / N) * \
+            np.sin(y * 2 * np.pi * ky / N) * \
+            np.sin(z * 2 * np.pi * kz / N) + 1
+        title = f"Sinusoidal Distribution (N={N})"
+
+    elif distribution_type == "Gaussian":
+        cx = _state.qlbm_gauss_cx if hasattr(_state, "qlbm_gauss_cx") else N/2
+        cy = _state.qlbm_gauss_cy if hasattr(_state, "qlbm_gauss_cy") else N/2
+        cz = _state.qlbm_gauss_cz if hasattr(_state, "qlbm_gauss_cz") else N/2
+        sigma = _state.qlbm_gauss_sigma if hasattr(_state, "qlbm_gauss_sigma") and _state.qlbm_gauss_sigma > 0 else 0.1
+        
+        selected_func = lambda x, y, z: \
+            np.exp(-((x - cx)**2 / (2 * sigma**2) +
+                     (y - cy)**2 / (2 * sigma**2) +
+                     (z - cz)**2 / (2 * sigma**2))) * 1.8 + 0.2
+        title = f"Gaussian Distribution (N={N})"
+
+    else:
+        return go.Figure()
+
+    # Create 3D grid
+    x_indices = np.linspace(0, 1, N)
+    y_indices = np.linspace(0, 1, N)
+    z_indices = np.linspace(0, 1, N)
+    X, Y, Z = np.meshgrid(x_indices, y_indices, z_indices, indexing='ij')
+
+    # Calculate distribution values
+    xi = np.arange(0, N)
+    yi = np.arange(0, N)
+    zi = np.arange(0, N)
+    Xi, Yi, Zi = np.meshgrid(xi, yi, zi, indexing='ij')
+    values = selected_func(Xi, Yi, Zi)
+
+    # Create Plotly visualization
+    isomin = np.min(values)
+    isomax = np.max(values)
+    surface_count = 5
+    
+    if distribution_type == "Sinusoidal":
+        isomin = 0.1
+        isomax = 1.9
+        surface_count = 4
+
+    data = [go.Isosurface(
+        x=X.flatten(),
+        y=Y.flatten(),
+        z=Z.flatten(),
+        value=values.flatten(),
+        isomin=isomin,
+        isomax=isomax,
+        surface_count=surface_count,
+        colorscale='Blues',
+        opacity=0.35,
+        caps=dict(x_show=False, y_show=False, z_show=False)
+    )]
+
+    if show_edges:
+        # Create grid lines
+        Y_yz, Z_yz = np.meshgrid(y_indices, z_indices, indexing='ij')
+        Y_flat, Z_flat = Y_yz.flatten(), Z_yz.flatten()
+        num_lines = len(Y_flat)
+        
+        xe = np.full(num_lines * 3, np.nan)
+        xe[0::3], xe[1::3] = 0, 1
+        ye = np.full(num_lines * 3, np.nan)
+        ye[0::3] = ye[1::3] = Y_flat
+        ze = np.full(num_lines * 3, np.nan)
+        ze[0::3] = ze[1::3] = Z_flat
+        
+        X_xz, Z_xz = np.meshgrid(x_indices, z_indices, indexing='ij')
+        X_flat, Z_flat = X_xz.flatten(), Z_xz.flatten()
+        num_lines = len(X_flat)
+        
+        xe_y = np.full(num_lines * 3, np.nan)
+        xe_y[0::3] = xe_y[1::3] = X_flat
+        ye_y = np.full(num_lines * 3, np.nan)
+        ye_y[0::3], ye_y[1::3] = 0, 1
+        ze_y = np.full(num_lines * 3, np.nan)
+        ze_y[0::3] = ze_y[1::3] = Z_flat
+
+        X_xy, Y_xy = np.meshgrid(x_indices, y_indices, indexing='ij')
+        X_flat, Y_flat = X_xy.flatten(), Y_xy.flatten()
+        num_lines = len(X_flat)
+        
+        xe_z = np.full(num_lines * 3, np.nan)
+        xe_z[0::3] = xe_z[1::3] = X_flat
+        ye_z = np.full(num_lines * 3, np.nan)
+        ye_z[0::3] = ye_z[1::3] = Y_flat
+        ze_z = np.full(num_lines * 3, np.nan)
+        ze_z[0::3], ze_z[1::3] = 0, 1
+
+        x_all = np.concatenate([xe, xe_y, xe_z])
+        y_all = np.concatenate([ye, ye_y, ye_z])
+        z_all = np.concatenate([ze, ze_y, ze_z])
+
+        data.append(go.Scatter3d(
+            x=x_all, y=y_all, z=z_all,
+            mode='lines',
+            line=dict(color='black', width=1),
+            opacity=0.22,
+            name='Grid Edges'
+        ))
+
+    fig = go.Figure(data=data)
+    
+    fig.update_layout(
+        title=title,
+        scene=dict(
+            xaxis=dict(backgroundcolor="white", showbackground=True, gridcolor="lightgrey", zerolinecolor="lightgrey", title='X'),
+            yaxis=dict(backgroundcolor="white", showbackground=True, gridcolor="lightgrey", zerolinecolor="lightgrey", title='Y'),
+            zaxis=dict(backgroundcolor="white", showbackground=True, gridcolor="lightgrey", zerolinecolor="lightgrey", title='Z'),
+        ),
+        margin=dict(l=0, r=0, b=0, t=40),
+        width=800,
+        height=700
+    )
+    return fig
+
+
+def update_view():
+    """Update the preview visualization."""
+    global current_grid_object
+    
+    if _state is None:
+        return
+
+    # If simulation has run, don't update the preview
+    if _state.qlbm_simulation_has_run:
+        return
+
+    try:
+        N = int(_state.qlbm_nx)
+        distribution_type = _state.qlbm_dist_type
+        
+        show_edges = _state.qlbm_show_edges
+        fig = get_initial_distribution_figure(distribution_type, N, show_edges)
+        if hasattr(_ctrl, "qlbm_preview_update"):
+            _ctrl.qlbm_preview_update(fig)
+        
+    except Exception as e:
+        print(f"Error updating view: {e}")
+
+
+def on_pick_point(point, *_) -> None:
+    """Handle point picking on the 3D visualization."""
+    global current_grid_object
+    if point is None or current_grid_object is None:
+        return
+    closest_id = current_grid_object.find_closest_point(point)
+    if closest_id == -1:
+        return
+    values = current_grid_object.point_data.get('scalars')
+    if values is None:
+        return
+
+    coords = current_grid_object.points[closest_id]
+    val = float(values[closest_id])
+    
+    x, y, z = coords
+    _set_pick_text(f"Position: ({x:.3f}, {y:.3f}, {z:.3f})\nValue: {val:.4g}")
+    if hasattr(_ctrl, "qlbm_view_update"):
+        _ctrl.qlbm_view_update()
+
+
+# --- Geometry Figure ---
+def get_geometry_figure():
+    """Generates a 3D Plotly figure for the selected geometry."""
+    if _state is None:
+        return go.Figure()
+        
+    geom = _state.qlbm_geometry_selection
+    
+    if geom == "Cube":
+        fig = _create_box_figure(1, 1, 1, "Cube")
+        
+    elif geom == "Rectangular domain with a heated box (3D)":
+        try:
+            L = float(_state.qlbm_domain_L)
+            W = float(_state.qlbm_domain_W)
+            H = float(_state.qlbm_domain_H)
+        except:
+            L, W, H = 1.0, 1.0, 1.0
+            
+        max_dim = max(L, W, H)
+        if max_dim > 0:
+            L /= max_dim
+            W /= max_dim
+            H /= max_dim
+            
+        fig = _create_box_figure(L, W, H, "Rectangular Domain")
+        
+    else:
+        fig = go.Figure()
+        fig.update_layout(
+            scene=dict(xaxis=dict(visible=False), yaxis=dict(visible=False), zaxis=dict(visible=False)),
+            margin=dict(l=0, r=0, b=0, t=0),
+        )
+        return fig
+
+    fig.update_layout(
+        scene=dict(
+            xaxis=dict(visible=False),
+            yaxis=dict(visible=False),
+            zaxis=dict(visible=False),
+            aspectmode='data'
+        ),
+        margin=dict(l=0, r=0, b=0, t=30),
+    )
+    return fig
+
+
+def _create_box_figure(lx, ly, lz, title):
+    """Create a 3D box figure."""
+    x = [0, lx, lx, 0, 0, lx, lx, 0]
+    y = [0, 0, ly, ly, 0, 0, ly, ly]
+    z = [0, 0, 0, 0, lz, lz, lz, lz]
+    
+    fig = go.Figure()
+    
+    fig.add_trace(go.Mesh3d(
+        x=x, y=y, z=z,
+        i=[7, 0, 0, 0, 4, 4, 6, 6, 4, 0, 3, 2],
+        j=[3, 4, 1, 2, 5, 6, 5, 2, 0, 1, 6, 3],
+        k=[0, 7, 2, 3, 6, 7, 1, 1, 5, 5, 7, 6],
+        opacity=0.2,
+        color='blue',
+        flatshading=True,
+        name=title,
+        showscale=False
+    ))
+    
+    xe = [0, lx, lx, 0, 0, None, 0, lx, lx, 0, 0, None, 0, 0, None, lx, lx, None, lx, lx, None, 0, 0]
+    ye = [0, 0, ly, ly, 0, None, 0, 0, ly, ly, 0, None, 0, 0, None, 0, 0, None, ly, ly, None, ly, ly]
+    ze = [0, 0, 0, 0, 0, None, lz, lz, lz, lz, lz, None, 0, lz, None, 0, lz, None, 0, lz, None, 0, lz]
+    
+    fig.add_trace(go.Scatter3d(
+        x=xe, y=ye, z=ze,
+        mode='lines',
+        line=dict(color='black', width=3),
+        showlegend=False
+    ))
+    
+    fig.update_layout(title=title)
+    return fig
+
+
+def update_geometry_view():
+    """Update the geometry visualization."""
+    try:
+        fig = get_geometry_figure()
+        if hasattr(_ctrl, "qlbm_geometry_plot_update"):
+            _ctrl.qlbm_geometry_plot_update(fig)
+    except Exception as e:
+        print(f"Error updating geometry view: {e}")
+
+
+# --- CPU Demo Simulation ---
+def _cpu_distribution_field(distribution_type: str, Xi, Yi, Zi, grid_size: int, drift, phase_fraction: float):
+    """Generate the distribution field for CPU demo simulation."""
+    if _state is None:
+        return np.ones_like(Xi)
+        
+    if distribution_type == "Sinusoidal":
+        kx = max(1.0, round(float(_state.qlbm_sine_k_x))) if hasattr(_state, "qlbm_sine_k_x") else 1.0
+        ky = max(1.0, round(float(_state.qlbm_sine_k_y))) if hasattr(_state, "qlbm_sine_k_y") else 1.0
+        kz = max(1.0, round(float(_state.qlbm_sine_k_z))) if hasattr(_state, "qlbm_sine_k_z") else 1.0
+        x_term = np.sin((np.mod(Xi + drift[0], grid_size)) * 2 * np.pi * kx / grid_size)
+        y_term = np.sin((np.mod(Yi + drift[1], grid_size)) * 2 * np.pi * ky / grid_size)
+        z_term = np.sin((np.mod(Zi + drift[2], grid_size)) * 2 * np.pi * kz / grid_size)
+        field = x_term * y_term * z_term + 1.0
+    else:
+        # Gaussian
+        nx_val = max(1.0, float(_state.qlbm_nx)) if hasattr(_state, "qlbm_nx") else float(grid_size)
+        cx = float(_state.qlbm_gauss_cx) if hasattr(_state, "qlbm_gauss_cx") else nx_val / 2
+        cy = float(_state.qlbm_gauss_cy) if hasattr(_state, "qlbm_gauss_cy") else nx_val / 2
+        cz = float(_state.qlbm_gauss_cz) if hasattr(_state, "qlbm_gauss_cz") else nx_val / 2
+        sigma = float(_state.qlbm_gauss_sigma) if hasattr(_state, "qlbm_gauss_sigma") else nx_val / 6
+        scale = (grid_size - 1) / nx_val if nx_val else 1.0
+        cx = cx * scale + drift[0]
+        cy = cy * scale + drift[1]
+        cz = cz * scale + drift[2]
+        sigma = max(1.0, sigma * scale)
+        field = np.exp(-(((Xi - cx) ** 2 + (Yi - cy) ** 2 + (Zi - cz) ** 2) / (2 * sigma ** 2))) * 1.8 + 0.2
+
+    modulation = 0.15 * np.sin(2 * np.pi * phase_fraction + (Xi + Yi + Zi) * np.pi / max(1, grid_size))
+    return field + modulation
+
+
+def _run_cpu_demo_simulation(grid_size: int, T: int, distribution_type: str, vx_func, vy_func, vz_func, progress_callback=None):
+    """Run CPU demo simulation."""
+    grid_size = int(max(8, min(grid_size, _CPU_DEMO_MAX_GRID)))
+    idx_coords = np.linspace(0, grid_size - 1, grid_size, dtype=np.float32)
+    Xi, Yi, Zi = np.meshgrid(idx_coords, idx_coords, idx_coords, indexing='ij')
+    geom_coords = np.linspace(0, 1, grid_size, dtype=np.float32)
+    Xg, Yg, Zg = np.meshgrid(geom_coords, geom_coords, geom_coords, indexing='ij')
+
+    if T <= 0:
+        target = 1.0
+    else:
+        target = float(T)
+    num_frames = min(30, max(2, int(min(target, 20)) + 1))
+    timeline = list(np.linspace(0.0, target, num_frames))
+    if len(timeline) < 2:
+        timeline.append(target)
+
+    vx = _safe_velocity_sample(vx_func)
+    vy = _safe_velocity_sample(vy_func)
+    vz = _safe_velocity_sample(vz_func)
+    drift_scale = 0.25 * grid_size
+
+    frames = []
+    for idx, t_val in enumerate(timeline):
+        phase_fraction = idx / (len(timeline) - 1) if len(timeline) > 1 else 0.0
+        drift = (
+            vx * phase_fraction * drift_scale,
+            vy * phase_fraction * drift_scale,
+            vz * phase_fraction * drift_scale,
+        )
+        field = _cpu_distribution_field(distribution_type, Xi, Yi, Zi, grid_size, drift, phase_fraction)
+        frames.append(field.astype(np.float32))
+        
+        if progress_callback:
+            percent = int(((idx + 1) / len(timeline)) * 100)
+            progress_callback(percent)
+
+    grid = pv.StructuredGrid()
+    grid.points = np.column_stack((Xg.ravel(), Yg.ravel(), Zg.ravel()))
+    grid.dimensions = [grid_size, grid_size, grid_size]
+    grid["scalars"] = frames[0].ravel()
+
+    times = [float(t) for t in timeline]
+    return frames, times, grid
+
+
+# --- Export Functions ---
+def export_simulation_vtk():
+    """Download the current simulation volume as a VTK file."""
+    global current_grid_object
+
+    if not _state.qlbm_simulation_has_run or current_grid_object is None:
+        log_to_console("VTK export unavailable: run a simulation first.")
+        return
+
+    temp_path = None
+    try:
+        suffix = datetime.now().strftime("%Y%m%d_%H%M%S")
+        grid_size = int(_state.qlbm_grid_size or 0)
+        filename = f"qlbm_volume_n{grid_size}_{suffix}.vts"
+
+        tmp = tempfile.NamedTemporaryFile(suffix=".vts", delete=False)
+        tmp.close()
+        temp_path = Path(tmp.name)
+
+        current_grid_object.save(str(temp_path))
+        _server.controller.download_file(temp_path.read_bytes(), filename)
+        log_to_console(f"Exported VTK to {filename}")
+    except Exception as exc:
+        log_to_console(f"VTK export failed: {exc}")
+    finally:
+        if temp_path and temp_path.exists():
+            try:
+                temp_path.unlink()
+            except Exception:
+                pass
+
+
+def export_simulation_mp4():
+    """Render the simulation frames to an MP4 animation for download."""
+    global simulation_data_frames, current_grid_object
+
+    if not _state.qlbm_simulation_has_run or not simulation_data_frames:
+        log_to_console("MP4 export unavailable: run a simulation first.")
+        return
+    if current_grid_object is None:
+        log_to_console("MP4 export failed: missing grid data.")
+        return
+
+    temp_path = None
+    movie_plotter = None
+    try:
+        suffix = datetime.now().strftime("%Y%m%d_%H%M%S")
+        grid_size = int(_state.qlbm_grid_size or 0)
+        filename = f"qlbm_animation_n{grid_size}_{suffix}.mp4"
+
+        tmp = tempfile.NamedTemporaryFile(suffix=".mp4", delete=False)
+        tmp.close()
+        temp_path = Path(tmp.name)
+
+        movie_plotter = pv.Plotter(off_screen=True, window_size=(1280, 720))
+        try:
+            camera_position = _plotter.camera_position if _plotter and _plotter.camera_position else None
+        except Exception:
+            camera_position = None
+
+        base_grid = current_grid_object.copy()
+        movie_plotter.open_movie(str(temp_path), framerate=15)
+
+        for frame_data in simulation_data_frames:
+            base_grid["scalars"] = np.asarray(frame_data).ravel()
+            iso_mesh = base_grid.contour(isosurfaces=7, scalars="scalars")
+            movie_plotter.clear()
+            movie_plotter.add_mesh(
+                iso_mesh,
+                cmap="Blues",
+                opacity=0.35,
+                show_scalar_bar=False,
+            )
+            movie_plotter.add_axes()
+            if camera_position:
+                try:
+                    movie_plotter.camera_position = camera_position
+                except Exception:
+                    pass
+            else:
+                movie_plotter.view_isometric()
+            movie_plotter.render()
+            movie_plotter.write_frame()
+
+        movie_plotter.close()
+        movie_plotter = None
+
+        _server.controller.download_file(temp_path.read_bytes(), filename)
+        log_to_console(f"Exported MP4 to {filename}")
+    except Exception as exc:
+        log_to_console(f"MP4 export failed: {exc}")
+    finally:
+        if movie_plotter is not None:
+            try:
+                movie_plotter.close()
+            except Exception:
+                pass
+        if temp_path and temp_path.exists():
+            try:
+                temp_path.unlink()
+            except Exception:
+                pass
+
+
+# --- Main Simulation ---
+def run_simulation():
+    """Run the QLBM simulation."""
+    global simulation_data_frames, simulation_times, current_grid_object, _plotter
+    
+    if not _SIMULATION_CAN_RUN:
+        msg = _SIMULATION_DISABLED_REASON or "Simulation backend is not available on this platform."
+        _state.qlbm_run_error = msg
+        log_to_console(f"Error: {msg}")
+        _state.qlbm_status_message = "Error: Backend unavailable"
+        _state.qlbm_status_type = "error"
+        return
+
+    _state.qlbm_is_running = True
+    _state.qlbm_run_error = ""
+    _state.qlbm_simulation_has_run = False
+    _state.qlbm_show_progress = True
+    _state.qlbm_simulation_progress = 0
+    _state.qlbm_status_message = "Running simulation..."
+    _state.qlbm_status_type = "info"
+    
+    # Log initial configuration
+    config_lines = [
+        "Job Initiated",
+        f"  Grid Size: {_state.qlbm_grid_size} × {_state.qlbm_grid_size} × {_state.qlbm_grid_size}",
+        f"  Time Steps: {_state.qlbm_time_steps}",
+        f"  Distribution: {_state.qlbm_dist_type}",
+        f"  Boundary: {_state.qlbm_boundary_condition}",
+        f"  Backend: {_state.qlbm_backend_type}",
+        f"  Velocity: vx={_state.qlbm_vx_expr}, vy={_state.qlbm_vy_expr}, vz={_state.qlbm_vz_expr}",
+    ]
+    for line in config_lines:
+        log_to_console(line)
+    
+    last_logged_percent = 0
+    def _progress_callback(percent):
+        nonlocal last_logged_percent
+        _state.qlbm_simulation_progress = percent
+        if percent - last_logged_percent >= 10:
+            log_to_console(f"Simulation progress: {int(percent)}%")
+            last_logged_percent = percent
+    
+    try:
+        grid_size = int(_state.qlbm_grid_size)
+        num_reg_qubits = int(math.log2(grid_size)) if grid_size > 0 else 3
+        T = int(_state.qlbm_time_steps)
+        distribution_type = _state.qlbm_dist_type
+        boundary_condition = _state.qlbm_boundary_condition
+        
+        vx_func = make_velocity_func(_state.qlbm_vx_expr)
+        vy_func = make_velocity_func(_state.qlbm_vy_expr)
+        vz_func = make_velocity_func(_state.qlbm_vz_expr)
+        
+        _progress_callback(0)
+        
+        if simulate_qlbm_3D_and_animate is not None:
+            log_to_console("Running CUDA-Q Simulation...")
+            _plotter.clear()
+            _, frames, times, grid_obj = simulate_qlbm_3D_and_animate(
+                num_reg_qubits=num_reg_qubits,
+                T=T,
+                distribution_type=distribution_type,
+                vx_input=vx_func,
+                vy_input=vy_func,
+                vz_input=vz_func,
+                boundary_condition=boundary_condition,
+                plotter=_plotter,
+                add_slider=False,
+                progress_callback=_progress_callback
+            )
+        else:
+            log_to_console("Running CPU Demo Simulation...")
+            frames, times, grid_obj = _run_cpu_demo_simulation(
+                grid_size=grid_size,
+                T=T,
+                distribution_type=distribution_type or "Sinusoidal",
+                vx_func=vx_func,
+                vy_func=vy_func,
+                vz_func=vz_func,
+                progress_callback=_progress_callback
+            )
+        
+        _progress_callback(100)
+        
+        # Update plotter with results
+        if grid_obj:
+            _plotter.clear()
+            isosurfaces = grid_obj.contour(isosurfaces=7, scalars="scalars")
+            _plotter.add_mesh(isosurfaces, cmap="Blues", opacity=0.3, show_scalar_bar=True)
+            _plotter.add_axes()
+            _plotter.show_grid()
+        
+        # Store Results
+        if frames and len(frames) > 0:
+            simulation_data_frames = frames
+            simulation_times = times
+            current_grid_object = grid_obj
+            
+            _state.qlbm_max_time_step = len(frames) - 1
+            _state.qlbm_time_val = 0
+            _state.qlbm_time_slider_labels = [f"{t:.1f}" for t in times] if times else [str(i) for i in range(len(frames))]
+            _state.qlbm_simulation_has_run = True
+            
+            _ensure_point_picking(on_pick_point)
+            
+            if hasattr(_ctrl, "qlbm_view_update"):
+                _ctrl.qlbm_view_update()
+            log_to_console("Simulation completed successfully.")
+            _state.qlbm_status_message = "Simulation completed successfully."
+            _state.qlbm_status_type = "success"
+            _state.qlbm_simulation_progress = 100
+        else:
+            _state.qlbm_run_error = "Simulation produced no data."
+            log_to_console("Error: Simulation produced no data.")
+            _state.qlbm_status_message = "Error: No data produced"
+            _state.qlbm_status_type = "error"
+
+    except Exception as e:
+        _state.qlbm_run_error = f"Simulation failed: {str(e)}"
+        log_to_console(f"Simulation Error: {e}")
+        print(f"Simulation Error: {e}")
+        _state.qlbm_status_message = "Simulation failed"
+        _state.qlbm_status_type = "error"
+    finally:
+        _state.qlbm_is_running = False
+        if _state.qlbm_status_type != "success":
+            _state.qlbm_show_progress = False
+
+
+def stop_simulation():
+    """Stop the running simulation."""
+    if _state is None:
+        return
+    _state.qlbm_is_running = False
+    log_to_console("Simulation stopped by user")
+
+
+def reset_simulation():
+    """Reset the simulation state."""
+    global _plotter
+    if _state is None:
+        return
+    _state.qlbm_is_running = False
+    _state.qlbm_run_error = ""
+    _state.qlbm_simulation_has_run = False
+    _state.qlbm_dist_type = None
+    _state.qlbm_show_edges = False
+    _state.qlbm_problems_selection = None
+    _state.qlbm_geometry_selection = None
+    _state.qlbm_backend_type = None
+    _state.qlbm_advecting_field = None
+    _state.qlbm_show_advect_params = False
+    if _plotter:
+        _plotter.clear()
+    if hasattr(_ctrl, "qlbm_view_update"):
+        _ctrl.qlbm_view_update()
+    _apply_workflow_highlights(_determine_workflow_step())
+    log_to_console("Simulation reset")
+
+
+def _register_handlers():
+    """Register state change handlers."""
+    
+    @_state.change("qlbm_advecting_field")
+    def _on_advect_dropdown_change(qlbm_advecting_field, **_):
+        if qlbm_advecting_field:
+            set_velocity_preset(qlbm_advecting_field)
+        _apply_workflow_highlights(_determine_workflow_step())
+
+    @_state.change("qlbm_grid_index")
+    def _on_grid_index_change(qlbm_grid_index, **_):
+        """Map discrete slider index to allowed grid sizes."""
+        try:
+            if qlbm_grid_index is None:
+                return
+            if isinstance(qlbm_grid_index, (int, float)):
+                idx = int(qlbm_grid_index)
+                idx = max(0, min(idx, len(GRID_SIZES) - 1))
+                val = GRID_SIZES[idx]
+                
+                if _state.qlbm_grid_size != val:
+                    _state.qlbm_grid_size = val
+                    fig, info, warn = update_qubit_3D_info(val)
+                    _state.qlbm_qubit_grid_info = info
+                    _state.qlbm_qubit_warning = warn
+                    if hasattr(_ctrl, "qlbm_qubit_plot_update"):
+                        _ctrl.qlbm_qubit_plot_update(fig)
+                
+                if _state.qlbm_nx != val:
+                    _state.qlbm_nx = val
+                    _state.qlbm_gauss_cx = val / 2
+                    _state.qlbm_gauss_cy = val / 2
+                    _state.qlbm_gauss_cz = val / 2
+                    _state.qlbm_show_edges = True
+                    update_view()
+
+        except Exception:
+            pass
+        finally:
+            _apply_workflow_highlights(_determine_workflow_step())
+
+    @_state.change("qlbm_problems_selection")
+    def _on_problem_selection_change(qlbm_problems_selection, **_):
+        """Auto-select geometry based on the chosen problem."""
+        try:
+            if not qlbm_problems_selection:
+                _state.qlbm_geometry_selection = None
+                return
+
+            if isinstance(qlbm_problems_selection, str):
+                normalized = qlbm_problems_selection.strip()
+                _state.qlbm_geometry_selection = _PROBLEM_GEOMETRY_MAP.get(normalized)
+            else:
+                _state.qlbm_geometry_selection = None
+        except Exception:
+            _state.qlbm_geometry_selection = None
+        finally:
+            _apply_workflow_highlights(_determine_workflow_step())
+
+    @_state.change("qlbm_dist_type")
+    def _on_dist_type_change(qlbm_dist_type, **_):
+        if _state.qlbm_show_edges:
+            _state.qlbm_show_edges = False
+        update_view()
+        _apply_workflow_highlights(_determine_workflow_step())
+
+    @_state.change("qlbm_show_edges", "qlbm_sine_k_x", "qlbm_sine_k_y", "qlbm_sine_k_z", 
+                   "qlbm_gauss_cx", "qlbm_gauss_cy", "qlbm_gauss_cz", "qlbm_gauss_sigma")
+    def on_param_change(**kwargs):
+        update_view()
+        _apply_workflow_highlights(_determine_workflow_step())
+
+    @_state.change("qlbm_geometry_selection", "qlbm_domain_L", "qlbm_domain_W", "qlbm_domain_H")
+    def _on_geometry_selection_change(**_):
+        update_geometry_view()
+        _apply_workflow_highlights(_determine_workflow_step())
+
+    @_state.change("qlbm_backend_type")
+    def _on_backend_type_change(**_):
+        _apply_workflow_highlights(_determine_workflow_step())
+
+    @_state.change("qlbm_time_val")
+    def update_time_frame(qlbm_time_val, **_):
+        """Update the plotter with the frame corresponding to time_val."""
+        global simulation_data_frames, simulation_times, current_grid_object, _plotter
+        
+        if not _state.qlbm_simulation_has_run or not simulation_data_frames or current_grid_object is None:
+            return
+            
+        try:
+            idx = int(qlbm_time_val)
+            if 0 <= idx < len(simulation_data_frames):
+                current_grid_object["scalars"] = simulation_data_frames[idx].flatten()
+                isosurfaces = current_grid_object.contour(isosurfaces=7, scalars="scalars")
+                
+                _plotter.clear()
+                _plotter.add_mesh(isosurfaces, cmap="Blues", opacity=0.3, show_scalar_bar=True)
+                _plotter.add_axes()
+                _plotter.show_grid()
+                
+                t_val = simulation_times[idx] if idx < len(simulation_times) else idx
+                _state.qlbm_current_time_label = f"{t_val:.2f}" if isinstance(t_val, float) else str(t_val)
+                _plotter.add_text(f"Time: {t_val:.2f}" if isinstance(t_val, float) else f"Time: {t_val}", 
+                                  name="time_label", position="upper_right")
+                
+                _ensure_point_picking(on_pick_point)
+                
+                if hasattr(_ctrl, "qlbm_view_update"):
+                    _ctrl.qlbm_view_update()
+        except Exception as e:
+            print(f"Error updating time frame: {e}")
+
+
+def _build_control_panels(plotter):
+    """Build the left control panel cards."""
+    
+    # Overview card
+    with vuetify3.VCard(classes="mb-2", style=("qlbm_overview_card_style", _WORKFLOW_BASE_STYLE)):
+        vuetify3.VCardTitle("Overview", classes="text-subtitle-2 font-weight-bold text-primary")
+        with vuetify3.VCardText():
+            vuetify3.VDivider(classes="my-2")
+            vuetify3.VCardSubtitle("Problems", classes="text-caption font-weight-bold mt-2")
+            vuetify3.VSelect(
+                key="qlbm_overview_problems",
+                label="Select a problem",
+                v_model=("qlbm_problems_selection", None),
+                items=(
+                    "qlbm_qlbm_problems",
+                    [
+                        "Scalar advection-diffusion in a box",
+                        "Laminar flow & heat transfer for a heated body in water.",
+                    ],
+                ),
+                placeholder="Select",
+                density="compact",
+                hide_details=True,
+                color="primary",
+                classes="mb-2"
+            )
+            vuetify3.VCardSubtitle("Governing Equations", classes="text-caption font-weight-bold mt-2")
+            vuetify3.VListItemTitle("Laminar Navier-Stokes including energy", classes="text-caption")
+            vuetify3.VCardSubtitle("Inputs", classes="text-caption font-weight-bold mt-2")
+            vuetify3.VListItemTitle("Geometry, Boundary conditions - temperature and flow", classes="text-caption")
+            vuetify3.VCardSubtitle("Outputs", classes="text-caption font-weight-bold mt-2")
+            vuetify3.VListItemTitle("Surface plots on sections OR sampling through a line in 3D domain", classes="text-caption")
+
+    # Geometry card
+    with vuetify3.VCard(classes="mb-2"):
+        vuetify3.VCardTitle("Geometry", classes="text-subtitle-2 font-weight-bold text-primary")
+        with vuetify3.VCardText():
+            vuetify3.VAlert(
+                v_if="qlbm_geometry_selection",
+                type="info",
+                variant="tonal",
+                density="compact",
+                color="primary",
+                children=["Selected Geometry: ", "{{ qlbm_geometry_selection }}"],
+                classes="mb-2"
+            )
+            vuetify3.VAlert(
+                v_if="!qlbm_geometry_selection",
+                type="info",
+                variant="tonal",
+                density="compact",
+                color="primary",
+                children=["No geometry selected. Choose a problem to auto-set."],
+                classes="mb-2"
+            )
+            with vuetify3.VContainer(v_if="qlbm_geometry_selection === 'Rectangular domain with a heated box (3D)'", classes="pa-0 mt-2"):
+                vuetify3.VCardSubtitle("Domain dimensions", classes="text-caption font-weight-bold mb-2")
+                with vuetify3.VRow(dense=True):
+                    with vuetify3.VCol():
+                        vuetify3.VTextField(label="Length (L)", v_model=("qlbm_domain_L", 1.0), type="number", step="0.1", density="compact", hide_details=True, color="primary")
+                    with vuetify3.VCol():
+                        vuetify3.VTextField(label="Width (W)", v_model=("qlbm_domain_W", 1.0), type="number", step="0.1", density="compact", hide_details=True, color="primary")
+                    with vuetify3.VCol():
+                        vuetify3.VTextField(label="Height (H)", v_model=("qlbm_domain_H", 1.0), type="number", step="0.1", density="compact", hide_details=True, color="primary")
+
+    # Initial Distribution card
+    with vuetify3.VCard(classes="mb-2", style=("qlbm_distribution_card_style", _WORKFLOW_BASE_STYLE)):
+        vuetify3.VCardTitle("Initial Distribution", classes="text-subtitle-2 font-weight-bold text-primary")
+        with vuetify3.VCardText():
+            with vuetify3.VRow(classes="d-flex align-center mb-2", no_gutters=True):
+                with vuetify3.VCol(cols="auto", classes="flex-grow-1"):
+                    vuetify3.VSelect(
+                        label="Initial Distribution",
+                        v_model=("qlbm_dist_type", None),
+                        items=("qlbm_dist_modes",),
+                        density="compact",
+                        hide_details=True
+                    )
+                with vuetify3.VCol(cols="auto", classes="ml-2"):
+                    with vuetify3.VBtn(
+                        icon=True, density="compact", variant="text",
+                        click="qlbm_custom_dist_params = !qlbm_custom_dist_params"
+                    ):
+                        vuetify3.VIcon("mdi-cog", color=("qlbm_custom_dist_params ? 'primary' : 'grey'",))
+
+    # Sinusoidal controls
+    with vuetify3.VCard(classes="mb-2", v_if="qlbm_custom_dist_params && qlbm_dist_type === 'Sinusoidal'"):
+        vuetify3.VCardTitle("Sinusoidal Frequencies")
+        with vuetify3.VCardText():
+            for axis in ['x', 'y', 'z']:
+                vuetify3.VSlider(
+                    label=f"Freq {axis.upper()}", 
+                    v_model=(f"qlbm_sine_k_{axis}", 1.0), 
+                    min=1, max=5, step=1, 
+                    thumb_label="always", density="compact"
+                )
+
+    # Gaussian controls
+    with vuetify3.VCard(classes="mb-2", v_if="qlbm_custom_dist_params && qlbm_dist_type === 'Gaussian'"):
+        vuetify3.VCardTitle("Gaussian Parameters")
+        with vuetify3.VCardText():
+            for axis in ['x', 'y', 'z']:
+                vuetify3.VSlider(
+                    label=f"Center {axis.upper()}", 
+                    v_model=(f"qlbm_gauss_c{axis}", 16), 
+                    min=0, max=("qlbm_nx", 32), step=1, 
+                    thumb_label="always", density="compact"
+                )
+            vuetify3.VSlider(
+                label="Width (Sigma)", 
+                v_model=("qlbm_gauss_sigma", 6.0), 
+                min=1.0, max=20.0, step=0.5, 
+                thumb_label="always", density="compact"
+            )
+
+    # Boundary Conditions
+    with vuetify3.VCard(classes="mb-2"):
+        vuetify3.VCardTitle("Boundary Conditions", classes="text-subtitle-2 font-weight-bold text-primary")
+        with vuetify3.VCardText():
+            vuetify3.VSelect(label="Boundary Condition", v_model=("qlbm_boundary_condition", "Periodic"), 
+                           items=("['Periodic']",), density="compact", hide_details=True, color="primary")
+
+    # Advecting Fields
+    with vuetify3.VCard(classes="mb-2", style=("qlbm_advect_card_style", _WORKFLOW_BASE_STYLE)):
+        vuetify3.VCardTitle("Advecting Fields", classes="text-subtitle-2 font-weight-bold text-primary")
+        with vuetify3.VCardText():
+            with vuetify3.VRow(classes="d-flex align-center mb-2", no_gutters=True):
+                with vuetify3.VCol(cols="auto", classes="flex-grow-1"):
+                    vuetify3.VSelect(
+                        label="Select Advecting field",
+                        v_model=("qlbm_advecting_field", None),
+                        items=("['Uniform', 'Swirl', 'Shear', 'TGV']",),
+                        density="compact",
+                        hide_details=True,
+                        color="primary",
+                        placeholder="Select",
+                    )
+                with vuetify3.VCol(cols="auto", classes="ml-2"):
+                    with vuetify3.VBtn(
+                        icon=True, density="compact", variant="text",
+                        click="qlbm_show_advect_params = !qlbm_show_advect_params"
+                    ):
+                        vuetify3.VIcon("mdi-cog", color=("qlbm_show_advect_params ? 'primary' : 'grey'",))
+            with vuetify3.VContainer(v_if="qlbm_show_advect_params", classes="pa-0 mt-2"):
+                html.Div("Velocity Components", classes="text-caption mb-1")
+                vuetify3.VTextField(label="Velocity vx", v_model=("qlbm_vx_expr", "0.2"), density="compact", hide_details=True, color="primary", classes="mb-1")
+                vuetify3.VTextField(label="Velocity vy", v_model=("qlbm_vy_expr", "-0.15"), density="compact", hide_details=True, color="primary", classes="mb-1")
+                vuetify3.VTextField(label="Velocity vz", v_model=("qlbm_vz_expr", "0.3"), density="compact", hide_details=True, color="primary")
+
+    # Meshing
+    with vuetify3.VCard(classes="mb-2", style=("qlbm_meshing_card_style", _WORKFLOW_BASE_STYLE)):
+        vuetify3.VCardTitle("Meshing", classes="text-subtitle-2 font-weight-bold text-primary")
+        with vuetify3.VCardText():
+            with vuetify3.VMenu(open_on_hover=True, close_on_content_click=False, location="end"):
+                with vuetify3.Template(v_slot_activator="{ props }"):
+                    with vuetify3.VSlider(
+                        v_bind="props",
+                        label="Number of Points / Direction",
+                        v_model=("qlbm_grid_index", 2),
+                        min=0, max=5, step=1,
+                        thumb_label="always",
+                        show_ticks="always",
+                        color="primary",
+                        density="compact",
+                        hide_details=True
+                    ):
+                        vuetify3.Template(v_slot_thumb_label="{ modelValue }", children=["{{ ['8','16','32','64','128','256'][modelValue] }}"])
+                with vuetify3.VSheet(classes="pa-2", elevation=6, rounded=True, style="width: 700px;"):
+                    with vuetify3.VContainer(fluid=True, classes="pa-0"):
+                        qubit_fig = plotly_widgets.Figure(figure=go.Figure(), style="width: 616px; height: 320px; min-height: 320px;", responsive=True)
+                        _ctrl.qlbm_qubit_plot_update = qubit_fig.update
+                        html.Div("{{ qlbm_qubit_grid_info }}", classes="mt-2 text-caption")
+                        html.Div("{{ qlbm_qubit_warning }}", classes="warn-text")
+                        vuetify3.VAlert(v_if="qlbm_grid_size > 32", type="warning", variant="tonal", density="compact", 
+                                       children=["Warning: High grid size may impact performance."], classes="mt-2")
+
+    # Time
+    with vuetify3.VCard(classes="mb-2"):
+        vuetify3.VCardTitle("Time", classes="text-subtitle-2 font-weight-bold text-primary")
+        with vuetify3.VCardText():
+            vuetify3.VSlider(label="Total Time", v_model=("qlbm_time_steps", 10), min=0, max=2000, step=10, 
+                           thumb_label="always", show_ticks="always", color="primary", density="compact", hide_details=True)
+            vuetify3.VAlert(v_if="qlbm_time_steps > 100", type="warning", variant="tonal", density="compact", 
+                           children=["Warning: High time steps may increase runtime."], classes="mt-2")
+
+    # Backends
+    with vuetify3.VCard(classes="mb-2", style=("qlbm_backend_card_style", _WORKFLOW_BASE_STYLE)):
+        vuetify3.VCardTitle("Backends", classes="text-subtitle-2 font-weight-bold text-primary")
+        with vuetify3.VCardText():
+            with vuetify3.VRow(dense=True, classes="mb-2"):
+                with vuetify3.VCol():
+                    vuetify3.VAlert(
+                        type="info",
+                        color="primary",
+                        variant="tonal",
+                        density="compact",
+                        children=[
+                            "Selected: ",
+                            "{{ qlbm_backend_type || '—' }}",
+                            " - ",
+                            "{{ qlbm_backend_type === 'Simulator' ? qlbm_selected_simulator : (qlbm_backend_type === 'QPU' ? qlbm_selected_qpu : '—') }}",
+                        ],
+                    )
+            with vuetify3.VMenu(open_on_hover=True, close_on_content_click=True, location="end"):
+                with vuetify3.Template(v_slot_activator="{ props }"):
+                    vuetify3.VBtn(v_bind="props", text="Choose Backend", color="primary", variant="tonal", block=True)
+                with vuetify3.VList(density="compact"):
+                    with vuetify3.VMenu(open_on_hover=True, close_on_content_click=True, location="end", offset=8):
+                        with vuetify3.Template(v_slot_activator="{ props }"):
+                            vuetify3.VListItem(v_bind="props", title="Simulator", prepend_icon="mdi-robot-outline", append_icon="mdi-chevron-right")
+                        with vuetify3.VList(density="compact"):
+                            vuetify3.VListItem(title="IBM Qiskit simulator", click="qlbm_backend_type = 'Simulator'; qlbm_selected_simulator = 'IBM Qiskit simulator'")
+                    with vuetify3.VMenu(open_on_hover=True, close_on_content_click=True, location="end", offset=8):
+                        with vuetify3.Template(v_slot_activator="{ props }"):
+                            vuetify3.VListItem(v_bind="props", title="QPU", prepend_icon="mdi-chip", append_icon="mdi-chevron-right")
+                        with vuetify3.VList(density="compact"):
+                            vuetify3.VListItem(title="IBM QPU", click="qlbm_backend_type = 'QPU'; qlbm_selected_qpu = 'IBM QPU'")
+                            vuetify3.VListItem(title="IonQ QPU", click="qlbm_backend_type = 'QPU'; qlbm_selected_qpu = 'IonQ QPU'")
+            
+            # IBM QPU Warning for grid > 16
+            vuetify3.VAlert(
+                v_if="qlbm_backend_type === 'QPU' && qlbm_selected_qpu === 'IBM QPU' && qlbm_grid_size > 16",
+                type="warning",
+                variant="tonal",
+                density="compact",
+                children=["⚠️ Grid size > 16 may exceed IBM QPU capacity!"],
+                classes="mt-2"
+            )
+            
+            vuetify3.VDivider(classes="my-3")
+            vuetify3.VBtn(
+                text="Run",
+                color="primary",
+                block=True,
+                disabled=("qlbm_is_running || !qlbm_simulation_backend_ready", False),
+                click=run_simulation,
+                style=("qlbm_is_running ? '' : 'background-color:#87CEFA;'", ""),
+            )
+            html.Div("Backend: {{ qlbm_simulation_backend_mode }}", classes="text-caption text-medium-emphasis mt-2")
+            vuetify3.VAlert(
+                v_if="qlbm_simulation_backend_note",
+                type="info",
+                variant="tonal",
+                density="compact",
+                children=["{{ qlbm_simulation_backend_note }}"],
+                classes="mt-2",
+            )
+            with vuetify3.VRow(dense=True, classes="mt-2"):
+                with vuetify3.VCol(cols=6):
+                    vuetify3.VBtn(
+                        text="Reset",
+                        color="#8BC34A",
+                        variant="tonal",
+                        block=True,
+                        disabled=("qlbm_is_running", False),
+                        click=reset_simulation,
+                    )
+                with vuetify3.VCol(cols=6):
+                    vuetify3.VBtn(
+                        text="STOP",
+                        color="#FF7043",
+                        variant="tonal",
+                        block=True,
+                        click=stop_simulation,
+                        disabled=("!qlbm_is_running", True),
+                    )
+
+
+def _build_visualization_panel(plotter):
+    """Build the right visualization panel."""
+    
+    # Main Plot Card
+    with vuetify3.VCard(classes="mb-1 flex-grow-1 d-flex flex-column", elevation=2, style="min-height: 0;"):
+         
+         # Geometry Preview (Plotly)
+         with vuetify3.VContainer(v_if="!qlbm_simulation_has_run && !qlbm_dist_type && qlbm_geometry_selection", 
+                                  fluid=True, classes="pa-0 flex-grow-1", style="width: 100%; height: 100%;"):
+            geom_fig = plotly_widgets.Figure(figure=go.Figure(), style="width: 100%; height: 100%;", responsive=True)
+            _ctrl.qlbm_geometry_plot_update = geom_fig.update
+
+         # Distribution Preview (Plotly)
+         with vuetify3.VContainer(v_if="!qlbm_simulation_has_run && qlbm_dist_type", 
+                                  fluid=True, classes="pa-0 flex-grow-1", style="width: 100%; height: 100%;"):
+            preview_fig = plotly_widgets.Figure(figure=go.Figure(), style="width:100%; height:100%;", responsive=True)
+            _ctrl.qlbm_preview_update = preview_fig.update
+
+         # Download controls
+         with vuetify3.VContainer(v_if="qlbm_simulation_has_run", classes="px-4 pt-3 pb-1 d-flex justify-end", 
+                                  style="width: 100%; flex: 0 0 auto;"):
+             with vuetify3.VMenu(location="bottom end"):
+                 with vuetify3.Template(v_slot_activator="{ props }"):
+                     vuetify3.VBtn(
+                         v_bind="props",
+                         text="Download",
+                         color="primary",
+                         variant="tonal",
+                         prepend_icon="mdi-download"
+                     )
+                 with vuetify3.VList(density="compact"):
+                     vuetify3.VListItem(
+                         title="Export as VTK",
+                         prepend_icon="mdi-content-save",
+                         click=export_simulation_vtk
+                     )
+                     vuetify3.VListItem(
+                         title="Export as MP4",
+                         prepend_icon="mdi-movie",
+                         click=export_simulation_mp4
+                     )
+
+         # Simulation Result (PyVista)
+         with vuetify3.VContainer(v_if="qlbm_simulation_has_run", fluid=True, classes="pa-0 flex-grow-1", 
+                                  style="width: 100%; height: 100%;"):
+            view = plotter_ui(plotter)
+            _ctrl.qlbm_view_update = view.update
+         
+         # Time Slider
+         with vuetify3.VContainer(v_if="qlbm_simulation_has_run", classes="px-4 pb-4", style="width: 90%; flex: 0 0 auto;"):
+             with vuetify3.VSlider(
+                 v_model=("qlbm_time_val", 0),
+                 min=0,
+                 max=("qlbm_max_time_step", 10),
+                 step=1,
+                 label="Time",
+                 thumb_label="always",
+                 density="compact",
+                 hide_details=True,
+                 color="primary"
+             ):
+                 vuetify3.Template(
+                     v_slot_thumb_label="{ modelValue }",
+                     children=["{{ qlbm_time_slider_labels[modelValue] || modelValue }}"]
+                 )
+
+    # Console Window
+    with vuetify3.VCard(classes="mt-1", style="font-size: 0.8rem; flex: 0 0 auto;"):
+        vuetify3.VCardTitle("Status", classes="text-subtitle-1 text-primary", style="font-size: 0.9rem; padding: 6px 10px;")
+        with vuetify3.VCardText(classes="py-1 px-2", style="height: 150px; overflow-y: auto; background-color: #f5f5f5; font-family: monospace;"):
+            vuetify3.VTextarea(
+                v_model=("qlbm_console_output", ""),
+                readonly=True,
+                auto_grow=False,
+                rows=6,
+                variant="plain",
+                hide_details=True,
+                style="font-family: monospace; width: 100%; height: 100%;"
+            )
+
+
+def _build_status_window():
+    """Build the floating status window."""
+    with vuetify3.VCard(
+        v_if="qlbm_status_visible",
+        style="position: fixed; bottom: 16px; right: 16px; z-index: 1000; min-width: 320px; max-width: 450px;",
+        elevation=8
+    ):
+        with vuetify3.VCardTitle(classes="d-flex align-center", style="font-size: 0.95rem; padding: 8px 12px;"):
+            vuetify3.VIcon("mdi-information-outline", size="small", classes="mr-2")
+            html.Span("Simulation Status")
+            vuetify3.VSpacer()
+            vuetify3.VBtn(
+                icon="mdi-close",
+                size="x-small",
+                variant="text",
+                click="qlbm_status_visible = false"
+            )
+        vuetify3.VDivider()
+        with vuetify3.VCardText(classes="py-2 px-3"):
+            vuetify3.VAlert(
+                type=("qlbm_status_type", "info"),
+                variant="tonal",
+                density="compact",
+                children=["{{ qlbm_status_message }}"]
+            )
+            with vuetify3.VContainer(v_if="qlbm_show_progress", classes="pa-0 mt-2"):
+                vuetify3.VProgressLinear(
+                    model_value=("qlbm_simulation_progress", 0),
+                    color="primary",
+                    height=6,
+                    striped=True
+                )
+                html.Div(
+                    "{{ qlbm_simulation_progress }}% complete",
+                    classes="text-caption text-center mt-1",
+                    style="font-size: 0.75rem;"
+                )
+