diff --git a/docs/user-guides/getting-started.md b/docs/user-guides/getting-started.md
index 1fb42c7a..4d7f42cd 100644
--- a/docs/user-guides/getting-started.md
+++ b/docs/user-guides/getting-started.md
@@ -283,23 +283,23 @@ MuJoCo does not currently ship first-party Python typing stubs. To enable proper
 
 > Thanks to the work by [@kevinzakka](https://github.com/google-deepmind/mujoco/issues/1292#issuecomment-1874138201) and [@mluogh-xdof](https://github.com/google-deepmind/mujoco/issues/1292#issuecomment-3208219200) for figuring all this out!
 
-1. In your terminal:
+1. From your project root, generate stubs into a local `typings/` directory:
 
     ```bash linenums="0"
-    pybind11-stubgen mujoco -o ~/typings/ --numpy-array-wrap-with-annotated
+    pybind11-stubgen mujoco -o typings/ --numpy-array-wrap-with-annotated
     ```
 
 2. Recent MuJoCo builds compiled with newer pybind11 versions correctly expose enums as `SupportsInt`. If you encounter Pyright enum type errors, apply the compatibility patch:
 
     ```bash linenums="0"
-    python ~/typings/patch_mujoco_enums.py ~/typings/mujoco/_enums.pyi
+    python typings/patch_mujoco_enums.py typings/mujoco/_enums.pyi
     ```
 
 3. Then in `pyproject.toml` (for me, VSCode already type hints correctly, but this should fix things if you use `pyright` with your pre-commit hooks):
 
     ```toml title="pyproject.toml"
     [tool.pyright]
-    stubPath = "~/typings"
+    stubPath = "typings"
     venvPath = "."
     venv = ".venv"
     ```
diff --git a/src/mujoco_mojo/__init__.py b/src/mujoco_mojo/__init__.py
index c8cf36a6..2d029fd6 100644
--- a/src/mujoco_mojo/__init__.py
+++ b/src/mujoco_mojo/__init__.py
@@ -2,6 +2,30 @@
 mujoco_mojo is a collection of Python objects built to make working with MuJoCo via Python easier.
 
 It provides vast bindings for all MJCF XML schema objects, tools to convert to XML, run MuJoCo simulations, and more.
+
+MuJoCo Type Stubs:
+------------------
+
+MuJoCo does not ship Python type stubs. Generate them once with pybind11-stubgen:
+
+.. code-block:: bash
+    pip install pybind11-stubgen
+    pybind11-stubgen mujoco -o typings/ --numpy-array-wrap-with-annotated
+
+Run this from the project root. The ``typings/`` directory is gitignored.
+Then add to pyproject.toml:
+
+.. code-block:: toml
+    [tool.pyright]
+    stubPath = "typings"
+    venvPath = "."
+    venv = ".venv"
+
+If you encounter Pyright enum errors on recent MuJoCo builds, apply the
+compatibility patch that ships alongside the stubs:
+
+.. code-block:: bash
+    python typings/patch_mujoco_enums.py typings/mujoco/_enums.pyi
 """
 
 from mujoco_mojo.__about__ import __version__  # noqa: F401
diff --git a/src/mujoco_mojo/utils/dataframe.py b/src/mujoco_mojo/utils/dataframe.py
index 8f605133..8c790a8a 100644
--- a/src/mujoco_mojo/utils/dataframe.py
+++ b/src/mujoco_mojo/utils/dataframe.py
@@ -1,7 +1,10 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Protocol, TypedDict, cast
+from typing import TYPE_CHECKING, Any, TypedDict, cast
+
+if TYPE_CHECKING:
+    from typing import Self
 
 import polars as pl
 from scipy.spatial.transform import Rotation as R
@@ -28,13 +31,6 @@
 logger = get_logger(__name__)
 
 
-class MojoFrameProtocol(Protocol):
-    """Protocol to tell type checkers that .mojo is available on the DataFrame."""
-
-    @property
-    def mojo(self) -> MojoNamespace: ...
-
-
 class _MojoFrame(pl.DataFrame):
     """
     Internal implementation of MojoFrame to house static loaders.
@@ -78,10 +74,30 @@ def from_dict(
 
 if TYPE_CHECKING:
     # MojoFrame is seen by the IDE as the combination of:
-    # 1. Our loaders (_MojoFrame)
+    # 1. loaders (_MojoFrame)
     # 2. Polars methods (pl.DataFrame)
-    # 3. Our namespace (MojoFrameProtocol)
-    class MojoDataFrame(_MojoFrame, MojoFrameProtocol): ...
+    # 3. namespace (MojoFrameProtocol)
+    class MojoDataFrame(_MojoFrame):
+        @property
+        def mojo(self) -> MojoNamespace: ...
+
+        # override polars methods that return DataFrame so the type propagates
+        def select(self, *args: Any, **kwargs: Any) -> Self: ...
+        def filter(self, *args: Any, **kwargs: Any) -> Self: ...
+        def with_columns(self, *args: Any, **kwargs: Any) -> Self: ...
+        def sort(self, *args: Any, **kwargs: Any) -> Self: ...
+        def head(self, *args: Any, **kwargs: Any) -> Self: ...
+        def tail(self, *args: Any, **kwargs: Any) -> Self: ...
+        def limit(self, *args: Any, **kwargs: Any) -> Self: ...
+        def slice(self, *args: Any, **kwargs: Any) -> Self: ...
+        def rename(self, *args: Any, **kwargs: Any) -> Self: ...
+        def drop(self, *args: Any, **kwargs: Any) -> Self: ...
+        def drop_nulls(self, *args: Any, **kwargs: Any) -> Self: ...
+        def unique(self, *args: Any, **kwargs: Any) -> Self: ...
+        def sample(self, *args: Any, **kwargs: Any) -> Self: ...
+        def join(self, *args: Any, **kwargs: Any) -> Self: ...
+        def hstack(self, *args: Any, **kwargs: Any) -> Self: ...
+        def vstack(self, *args: Any, **kwargs: Any) -> Self: ...
 else:
     # At runtime, it's just our internal class
     MojoDataFrame = _MojoFrame
@@ -93,7 +109,6 @@ class ColumnManifest(TypedDict):
     available_quats: list[str]
 
 
-@pl.api.register_dataframe_namespace("mojo")
 class MojoNamespace:
     """
     Enhanced Polars DataFrame for MuJoCo Mojo telemetry.
@@ -370,3 +385,7 @@ def with_filters(
         target_cols = columns or self._df.columns
         filter_map = {col: filters for col in target_cols}
         return self.with_filter_map(filter_map, omit_time=omit_time)
+
+
+if not TYPE_CHECKING:
+    pl.api.register_dataframe_namespace("mojo")(MojoNamespace)
diff --git a/src/mujoco_mojo/utils/filters/filters.py b/src/mujoco_mojo/utils/filters/filters.py
index 685a03d6..4a880bb7 100644
--- a/src/mujoco_mojo/utils/filters/filters.py
+++ b/src/mujoco_mojo/utils/filters/filters.py
@@ -60,6 +60,16 @@ class BaseFilter(ABC, BaseModel):
     def apply(self, expr: pl.Expr) -> pl.Expr:
         """Applies the transformation to a Polars expression."""
 
+    def apply_with_context(
+        self, series: pl.Series, df: pl.DataFrame
+    ) -> pl.Series | None:
+        """
+        Override for filters that need access to other columns.
+        Receives the current (already-transformed) series and the original dataframe.
+        Return None to fall back to apply(expr).
+        """
+        return None
+
 
 class ScaleFilter(BaseFilter):
     """Applies a linear transformation: (value * factor) + offset."""
@@ -97,12 +107,25 @@ class DerivativeFilter(BaseFilter):
     """The discriminator type for Pydantic."""
 
     dt: float = Field(default=0.001, gt=0)
-    """The time step between samples in seconds."""
+    """The time step between samples in seconds. Ignored when wrt_col is set."""
+
+    wrt_col: str | None = Field(default=None, json_schema_extra={"ui_type": "col"})
+    """Optional column to differentiate with respect to instead of a fixed dt."""
 
     def apply(self, expr: pl.Expr) -> pl.Expr:
         # Backward difference: (x[n] - x[n-1]) / dt
         return expr.diff().fill_null(0) / self.dt
 
+    def apply_with_context(
+        self, series: pl.Series, df: pl.DataFrame
+    ) -> pl.Series | None:
+        if not self.wrt_col or self.wrt_col not in df.columns:
+            return None
+        wrt = df[self.wrt_col].cast(pl.Float64)
+        # Avoid divide-by-zero at the first sample
+        dx = wrt.diff().fill_null(strategy="forward").fill_null(1)
+        return series.cast(pl.Float64).diff().fill_null(0) / dx
+
 
 class IntegralFilter(BaseFilter):
     """
@@ -114,12 +137,24 @@ class IntegralFilter(BaseFilter):
     """The discriminator type for Pydantic."""
 
     dt: float = Field(default=0.001, gt=0)
-    """The time step between samples in seconds."""
+    """The time step between samples in seconds. Ignored when wrt_col is set."""
+
+    wrt_col: str | None = Field(default=None, json_schema_extra={"ui_type": "col"})
+    """Optional column to integrate with respect to instead of a fixed dt."""
 
     def apply(self, expr: pl.Expr) -> pl.Expr:
-        # Simple cumulative trapezoidal or rectangular integration
+        # Simple rectangular integration with fixed step
         return expr.cum_sum() * self.dt
 
+    def apply_with_context(
+        self, series: pl.Series, df: pl.DataFrame
+    ) -> pl.Series | None:
+        if not self.wrt_col or self.wrt_col not in df.columns:
+            return None
+        wrt = df[self.wrt_col].cast(pl.Float64)
+        dx = wrt.diff().fill_null(0)
+        return (series.cast(pl.Float64) * dx).cum_sum()
+
 
 class LowPassFilter(BaseFilter):
     """
diff --git a/src/mujoco_mojo/utils/layers/cli.py b/src/mujoco_mojo/utils/layers/cli.py
index 48a049a0..988b1ef3 100644
--- a/src/mujoco_mojo/utils/layers/cli.py
+++ b/src/mujoco_mojo/utils/layers/cli.py
@@ -921,6 +921,25 @@ def init_project(
             border_style="cyan",
         )
     )
+    if not Path("typings", "mujoco").exists():
+        console.print("\n[bold yellow]Type Hints Setup[/bold yellow]")
+        console.print(
+            "[bold white]MuJoCo does not ship Python type stubs.[/bold white] "
+            "Generate them once for Pylance/Pyright autocomplete:\n\n"
+            "[bold yellow]"
+            "pip install pybind11-stubgen\n"
+            "pybind11-stubgen mujoco -o typings/ --numpy-array-wrap-with-annotated"
+            "[/bold yellow]\n\n"
+            "Run from the project root. Then add to [bold cyan]pyproject.toml[/bold cyan]:\n\n"
+            "[dim]"
+            "\\[tool.pyright]\n"
+            'stubPath = "typings"\n'
+            'venvPath = "."\n'
+            'venv    = ".venv"'
+            "[/dim]\n\n"
+            "[dim]Enum errors? Run: "
+            "python typings/patch_mujoco_enums.py typings/mujoco/_enums.pyi[/dim]"
+        )
 
 
 @cli_app.command(name="reloaded")
diff --git a/src/mujoco_mojo/utils/layers/dojo/plot_config.py b/src/mujoco_mojo/utils/layers/dojo/plot_config.py
index 8efa02b3..47f58a2c 100644
--- a/src/mujoco_mojo/utils/layers/dojo/plot_config.py
+++ b/src/mujoco_mojo/utils/layers/dojo/plot_config.py
@@ -84,6 +84,11 @@ class ShapeType(StrEnum):
     rect = "rect"
 
 
+class PlotType(StrEnum):
+    cartesian = "cartesian"
+    polar = "polar"
+
+
 # ---------------------------------------------------------------------------
 # Composite models
 # ---------------------------------------------------------------------------
@@ -98,6 +103,11 @@ class FilterEntry(BaseModel):
     enabled: bool = True
 
 
+class XAxisConfig(BaseModel):
+    col: str = "time"
+    filters: list[FilterEntry] = []
+
+
 class YAxisConfig(BaseModel):
     label: str
     color: str
@@ -128,7 +138,7 @@ class Shape(BaseModel):
 class PlotConfig(BaseModel):
     """Complete serialisable state of a trial-viewer plot."""
 
-    xAxis: str
+    xAxis: XAxisConfig = Field(default_factory=XAxisConfig)
     yAxes: dict[str, YAxisConfig]
     refFrame: str | None
     grid: GridMode
@@ -146,6 +156,7 @@ class PlotConfig(BaseModel):
     yScale: ScaleType
     xLogBase: float | None = None
     yLogBase: float | None = None
+    plotType: PlotType = PlotType.cartesian
     vsEnabled: bool
     vsRange: Annotated[tuple[float, float], Field()]
     annotations: list[Annotation]
diff --git a/src/mujoco_mojo/utils/layers/dojo/routers/mosaic.py b/src/mujoco_mojo/utils/layers/dojo/routers/mosaic.py
index 53642a5c..03105e6f 100644
--- a/src/mujoco_mojo/utils/layers/dojo/routers/mosaic.py
+++ b/src/mujoco_mojo/utils/layers/dojo/routers/mosaic.py
@@ -216,6 +216,8 @@ async def get_filter_schema():
     from pydantic_core import PydanticUndefined
 
     def _infer_type(prop: dict) -> str:
+        if prop.get("ui_type") == "col":
+            return "col"
         if "anyOf" in prop:
             non_null = [s for s in prop["anyOf"] if s.get("type") != "null"]
             prop = non_null[0] if non_null else {}
@@ -506,12 +508,15 @@ async def get_trial_data(
             if filter_list:
                 if series.dtype != pl.Float64:
                     series = series.cast(pl.Float64)
-                tmp = pl.DataFrame({col: series})
-                expr = pl.col(col)
                 for f in filter_list:
-                    expr = f.apply(expr)
-                tmp = tmp.with_columns(expr.alias(col))
-                series = tmp[col]
+                    # context-aware filters (e.g. derivative/integral wrt another col)
+                    ctx = f.apply_with_context(series, df)
+                    if ctx is not None:
+                        series = ctx
+                    else:
+                        tmp = pl.DataFrame({col: series})
+                        tmp = tmp.with_columns(f.apply(pl.col(col)).alias(col))
+                        series = tmp[col]
             data[col] = series.to_list()
 
         return {
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/base.html b/src/mujoco_mojo/utils/layers/dojo/templates/base.html
index d9917000..0f8e3094 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/base.html
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/base.html
@@ -101,6 +101,11 @@
       }
     }
   </style>
+  <style>
+    /* ── Plotly modebar ────────────────────────────────────────────────────── */
+    .modebar { border-radius: 0.5rem; overflow: hidden; }
+    .modebar-group { border-radius: 0.5rem; }
+  </style>
   <script>
     // 1. BLOCKING THEME CHECK
     tailwind.config = { darkMode: "class" };
@@ -139,9 +144,9 @@
   </div>
 
   <!-- header and main page contents -->
-  <div class=" max-w-6xl mx-auto p-4 md:p-8">
-    <header x-show="!$store.dojo.isFullscreen"
-            class="w-full flex flex-col md:flex-row justify-between items-stretch md:items-end border-b border-slate-400 dark:border-slate-700 pb-6 mb-4 gap-6">
+  <div x-data
+       :class="$store.dojo.isFullscreen ? 'w-full px-4 py-4' : 'max-w-6xl mx-auto p-4 md:p-8'">
+    <header class="w-full flex flex-col md:flex-row justify-between items-stretch md:items-end border-b border-slate-400 dark:border-slate-700 pb-6 mb-4 gap-6">
       <!-- logo, title, and nav selection -->
       <div class="w-full md:w-auto flex flex-col gap-4">
         <div class="flex items-center gap-3 md:gap-4 mb-2 md:mb-4">
@@ -194,9 +199,9 @@ <h1 class="text-2xl sm:text-3xl md:text-4xl font-black tracking-tight text-cyan-
       </div>
 
       <div x-data
-           class="w-full md:w-auto flex flex-col gap-3 items-stretch md:items-end">
-        <!-- control buttons -->
-        <div class="flex items-center justify-start md:justify-between w-full md:w-64 gap-3 md:gap-0">
+           class="w-full md:w-auto flex flex-col gap-3 items-stretch">
+        <!-- control buttons: refresh · mute · theme · fullscreen -->
+        <div class="flex items-center gap-2">
           {% if status_code is not defined %}
 
           <!-- auto refresh toggle button -->
@@ -288,11 +293,40 @@ <h1 class="text-2xl sm:text-3xl md:text-4xl font-black tracking-tight text-cyan-
               </svg>
             </button>
           </div>
+
+          {% if status_code is not defined %}
+          <!-- fullscreen toggle button -->
+          <button @click="$store.dojo.toggleFullscreen()"
+                  class="btn-icon btn-ghost"
+                  :title="$store.dojo.isFullscreen ? 'Exit Fullscreen (Esc)' : 'Fullscreen'">
+            <svg x-show="!$store.dojo.isFullscreen"
+                 class="w-5 h-5"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="2"
+                 viewBox="0 0 24 24">
+              <path stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75v4.5m0-4.5h-4.5m4.5 0L15 9m5.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15" />
+            </svg>
+            <svg x-show="$store.dojo.isFullscreen"
+                 x-cloak
+                 class="w-5 h-5"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="2"
+                 viewBox="0 0 24 24">
+              <path stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 9V4.5M9 9H4.5M9 9L3 3M15 9V4.5M15 9H19.5M15 9L21 3M9 15V19.5M9 15H4.5M9 15L3 21M15 15V19.5M15 15H19.5M15 15L21 21" />
+            </svg>
+          </button>
+          {% endif %}
         </div>
 
         <!-- job metadata -->
         {% if status_code is not defined %}
-        <div class="card p-3 space-y-1 w-full md:w-64">
+        <div class="card p-3 space-y-1 w-full">
           <div class="flex items-center gap-2">
             <span class="text-sm uppercase font-black text-slate-500 w-auto">Owner</span>
             <p class="font-mono text-slate-600 dark:text-slate-300 text-sm truncate">{{ owner }}</p>
@@ -309,7 +343,8 @@ <h1 class="text-2xl sm:text-3xl md:text-4xl font-black tracking-tight text-cyan-
     </header>
 
     <main class="relative min-h-[500px]"
-          x-data>
+          x-data
+          @keydown.escape.window="$store.dojo.exitFullscreen()">
 
       <div x-show="!$store.dojo.isPageReady"
            class="absolute inset-0 z-50 flex flex-col items-center justify-start pt-32 bg-slate-200/60 dark:bg-slate-900/60 backdrop-blur-md rounded-2xl transition-all duration-300"
@@ -344,19 +379,15 @@ <h1 class="text-2xl sm:text-3xl md:text-4xl font-black tracking-tight text-cyan-
       </div>
 
       <div class="transition-all duration-500 ease-out"
-           :class="{
-          'opacity-0 blur-md scale-98 pointer-events-none': !$store.dojo.isPageReady,
-          'opacity-100': $store.dojo.isPageReady && $store.dojo.isFullscreen,
-          'opacity-100 blur-0 scale-100': $store.dojo.isPageReady && !$store.dojo.isFullscreen
-       }">
+           :class="!$store.dojo.isPageReady ? 'opacity-0 blur-md scale-98 pointer-events-none' : 'opacity-100'">
         {% block content %}{% endblock %}
       </div>
     </main>
   </div>
 
   <footer x-data
-          x-show="!$store.dojo.isFullscreen"
-          class="max-w-6xl mx-auto px-8 mt-6 py-6 border-t border-slate-400 dark:border-slate-700 flex flex-row-reverse justify-between items-center text-sm text-slate-400 font-mono">
+          class="mt-6 py-6 border-t border-slate-400 dark:border-slate-700 flex flex-row-reverse justify-between items-center text-sm text-slate-400 font-mono"
+          :class="$store.dojo.isFullscreen ? 'w-full px-4' : 'max-w-6xl mx-auto px-8'">
     <div class="flex items-center gap-3"
          x-data>
       <!-- combined connection + sync pill -->
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/morph.html b/src/mujoco_mojo/utils/layers/dojo/templates/morph.html
index cb1d8d2a..3e42fbcc 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/morph.html
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/morph.html
@@ -7,36 +7,25 @@
     document.addEventListener("alpine:init", () => {
         const store = Alpine.store("dojo");
         if (store) {
-            if (typeof store.isFullscreen === 'undefined') store.isFullscreen = false;
-            store.setPageReady(true, true);
-        }
-    });
-
-    // Central function to exit Zen Mode
-    const exitFullscreen = () => {
-        const store = Alpine.store("dojo");
-        if (store && store.isFullscreen) {
+            // Morph has its own fullscreen (the iframe fills the screen), so reset
+            // the shared state without writing to localStorage — navigating back to
+            // Monitor/Mosaic/Trial Viewer will still restore their last fullscreen state.
             store.isFullscreen = false;
+            store.setPageReady(true, true);
         }
-    };
-
-    // 1. Listen on the Parent (Dojo) window
-    window.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') exitFullscreen();
     });
 
-    // 2. Listen inside the Child (Optuna) iframe
-    // This function is called by the iframe's onload attribute
+    // Forward Escape from inside the Optuna iframe to the parent store.
+    // Called by the iframe's onload attribute.
     const attachIframeListeners = () => {
         const iframe = document.getElementById('optuna-iframe');
         if (!iframe || !iframe.contentWindow) return;
-
         try {
             iframe.contentWindow.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') exitFullscreen();
+                if (e.key === 'Escape') Alpine.store('dojo').isFullscreen = false;
             });
         } catch (e) {
-            console.warn("Could not attach Escape listener to iframe. This usually happens if the iframe is cross-origin.");
+            console.warn("Could not attach Escape listener to iframe (cross-origin).");
         }
     };
 </script>
@@ -50,31 +39,6 @@
         <div class="w-full h-full overflow-hidden border border-slate-300 dark:border-slate-700 shadow-2xl bg-white"
              :class="$store.dojo.isFullscreen ? 'rounded-none border-none' : 'rounded-2xl'">
 
-            <button @click="$store.dojo.isFullscreen = !$store.dojo.isFullscreen"
-                    class="absolute top-4 right-4 z-[110] p-2 bg-slate-100/90 dark:bg-slate-800/90 hover:bg-cyan-500 hover:text-white text-slate-500 rounded-lg shadow-lg border border-slate-300 dark:border-slate-600 transition-all active:scale-95">
-                <svg x-show="!$store.dojo.isFullscreen"
-                     class="w-6 h-6"
-                     fill="none"
-                     stroke="currentColor"
-                     stroke-width="2"
-                     viewBox="0 0 24 24">
-                    <path stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75v4.5m0-4.5h-4.5m4.5 0L15 9m5.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15" />
-                </svg>
-                <svg x-show="$store.dojo.isFullscreen"
-                     x-cloak
-                     class="w-6 h-6"
-                     fill="none"
-                     stroke="currentColor"
-                     stroke-width="2"
-                     viewBox="0 0 24 24">
-                    <path stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M9 9V4.5M9 9H4.5M9 9L3 3M15 9V4.5M15 9H19.5M15 9L21 3M9 15V19.5M9 15H4.5M9 15L3 21M15 15V19.5M15 15H19.5M15 15L21 21" />
-                </svg>
-            </button>
-
             <iframe id="optuna-iframe"
                     src="/dashboard/"
                     class="w-full h-full border-none"
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_chart.html b/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_chart.html
index 6f30175a..5ba2e5ec 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_chart.html
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_chart.html
@@ -7,7 +7,8 @@
              undo · redo · download
          ══════════════════════════════════════════════════════════════════ -->
 
-<div class="flex flex-row gap-4 items-stretch h-[600px]">
+<div x-init="$watch('$store.dojo.isFullscreen', () => $nextTick(() => Plotly.Plots.resize(document.getElementById('plot-area'))))"
+     class="flex flex-row gap-4 items-stretch h-[600px]">
     <!-- ── PLOT AREA ────────────────────────────────────────────────── -->
     <div class="card flex-1 rounded-2xl shadow-2xl p-2 relative">
         <div :class="(data && Object.keys(config.yAxes).length > 0) ? 'opacity-100' : 'opacity-0 pointer-events-none'"
@@ -74,6 +75,44 @@
                     </p>
 
                     <div class="space-y-4">
+                        <!-- plot type toggle -->
+                        <div class="space-y-1">
+                            <label class="text-xs font-bold text-slate-500 uppercase">Plot Type</label>
+                            <div class="grid grid-cols-2 gap-2">
+                                <button @click="config.plotType = 'cartesian'; saveAndRender()"
+                                        class="py-2 rounded-lg border text-xs font-bold transition-all flex flex-col items-center gap-1"
+                                        :class="config.plotType !== 'polar'
+                                            ? 'bg-cyan-500 text-white border-cyan-500'
+                                            : 'bg-slate-100 dark:bg-slate-900 border-slate-300 dark:border-slate-700 text-slate-500 hover:border-cyan-500/50'">
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.25">
+                                        <line x1="4" y1="2" x2="4" y2="18"/>
+                                        <line x1="10" y1="2" x2="10" y2="18"/>
+                                        <line x1="16" y1="2" x2="16" y2="18"/>
+                                        <line x1="2" y1="4" x2="18" y2="4"/>
+                                        <line x1="2" y1="10" x2="18" y2="10"/>
+                                        <line x1="2" y1="16" x2="18" y2="16"/>
+                                    </svg>
+                                    Cartesian
+                                </button>
+                                <button @click="config.plotType = 'polar'; saveAndRender()"
+                                        class="py-2 rounded-lg border text-xs font-bold transition-all flex flex-col items-center gap-1"
+                                        :class="config.plotType === 'polar'
+                                            ? 'bg-cyan-500 text-white border-cyan-500'
+                                            : 'bg-slate-100 dark:bg-slate-900 border-slate-300 dark:border-slate-700 text-slate-500 hover:border-cyan-500/50'">
+                                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.25">
+                                        <circle cx="10" cy="10" r="3"/>
+                                        <circle cx="10" cy="10" r="6"/>
+                                        <circle cx="10" cy="10" r="9"/>
+                                        <line x1="10" y1="1" x2="10" y2="19"/>
+                                        <line x1="1" y1="10" x2="19" y2="10"/>
+                                        <line x1="3.6" y1="3.6" x2="16.4" y2="16.4"/>
+                                        <line x1="16.4" y1="3.6" x2="3.6" y2="16.4"/>
+                                    </svg>
+                                    Polar
+                                </button>
+                            </div>
+                        </div>
+
                         <!-- row 1 -->
                         <div class="grid grid-cols-2 gap-3 max-h-64">
                             <!-- gridlines -->
@@ -439,7 +478,7 @@
                                 <div class="relative mb-2">
                                     <input type="text"
                                            x-model.lazy="config.xAxisTitle"
-                                           :placeholder="config.xAxis"
+                                           :placeholder="config.xAxis.col"
                                            class="input-field w-full shadow-sm px-2 pr-8 py-1.5" />
 
                                     <button x-show="config.xAxisTitle"
@@ -520,8 +559,12 @@
                  @click.outside="if ($event.button !== 1) { annotationsOpen = false; annDraft = null; annEditIndex = null; }">
                 <button @click="annotationsOpen = !annotationsOpen"
                         class="sidebar-btn disabled:opacity-20"
-                        :class="annotationsOpen ? 'text-cyan-500 bg-cyan-100/50 dark:bg-slate-700/50' : 'text-slate-400 hover:text-cyan-500'"
-                        title="Manage Notes">
+                        :class="{
+                    'text-cyan-500 bg-cyan-100/50 dark:bg-slate-700/50': annotationsOpen && config.plotType !== 'polar',
+                    'text-slate-400 hover:text-cyan-500': config.plotType !== 'polar',
+                    'opacity-30 cursor-not-allowed pointer-events-none': config.plotType === 'polar'
+                }"
+                        :title="config.plotType === 'polar' ? 'Notes not available in Polar mode' : 'Manage Notes'">
                     <svg class="w-5 h-5"
                          :class="annotationsOpen ? 'text-cyan-500' : ''"
                          fill="none"
@@ -643,10 +686,11 @@
                 <button @click="shapesOpen = !shapesOpen"
                         class="sidebar-btn"
                         :class="{
-                'text-cyan-500 bg-cyan-100/50 dark:bg-slate-700/50': shapesOpen,
-                'animate-pulse ring-2 ring-cyan-500/50 text-cyan-500 bg-cyan-50 dark:bg-slate-800': placementMode
+                'text-cyan-500 bg-cyan-100/50 dark:bg-slate-700/50': shapesOpen && config.plotType !== 'polar',
+                'animate-pulse ring-2 ring-cyan-500/50 text-cyan-500 bg-cyan-50 dark:bg-slate-800': placementMode,
+                'opacity-30 cursor-not-allowed pointer-events-none': config.plotType === 'polar'
             }"
-                        title="Manage Shapes">
+                        :title="config.plotType === 'polar' ? 'Shapes not available in Polar mode' : 'Manage Shapes'">
 
                     <svg class="w-5 h-5"
                          fill="none"
@@ -781,7 +825,7 @@
                         <div class="mb-6 p-3 bg-cyan-500/5 border border-cyan-500/20 rounded-lg space-y-3">
                             <p class="text-sm font-bold text-cyan-500 uppercase"
                                x-text="shapeEditIndex !== null ? 'Edit Shape' : 'New Shape'"></p>
-                            {{ color_picker('shapeDraft.color', 'shapePicker', 'Shape Color', width=240) }}
+                            {{ color_picker('shapeDraft.color', 'shapePicker', 'Color', width=240) }}
                             <input type="text"
                                    x-model="shapeDraft.label"
                                    placeholder="Add a label..."
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_header.html b/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_header.html
index fa50ed08..40a60583 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_header.html
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_header.html
@@ -199,7 +199,9 @@
 
         <!-- versus selector -->
         <div class="relative w-full sm:w-[280px]"
-             x-data="{ open: false }">
+             x-data="{ open: false }"
+             x-init="$watch('open', v => $store.dojo.overlayCount = Math.max(0, $store.dojo.overlayCount + (v ? 1 : -1)))"
+             @mojo:escape.window="open = false">
             <div @click="if(vsDraft.enabled) open = !open"
                  class="flex items-center h-9 bg-slate-300/50 dark:bg-slate-800/50 p-1 rounded-md border border-slate-300 dark:border-slate-800 transition-all w-full justify-between select-none shadow-md"
                  :class="vsDraft.enabled ? 'cursor-pointer hover:border-slate-400 dark:hover:border-slate-600' : 'cursor-default'">
@@ -267,7 +269,7 @@
                  x-transition:enter-start="opacity-0 scale-95"
                  x-transition:enter-end="opacity-100 scale-100"
                  @click.away="open = false"
-                 class="absolute top-full right-0 mt-1 w-full bg-white dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-md z-[400] p-4 space-y-4 shadow-none">
+                 class="absolute top-full right-0 mt-1 w-full panel z-[400] space-y-4">
 
                 <p class="text-sm sm:text-sm font-black uppercase text-slate-400 tracking-widest border-b border-slate-100 dark:border-slate-800 pb-1">Range Settings</p>
 
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_series_panel.html b/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_series_panel.html
index 1dcec87f..8c8b1e81 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_series_panel.html
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/partials/trial_viewer/_series_panel.html
@@ -47,7 +47,7 @@
                  @click.away="xMenuOpen = false">
                 <button @click="xMenuOpen = !xMenuOpen"
                         class="w-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded px-3 py-1 text-xs font-mono font-bold text-slate-700 dark:text-slate-200 flex items-center justify-between gap-2 hover:border-cyan-500 transition-all min-w-[120px]">
-                    <span x-text="config.xAxis"
+                    <span x-text="config.xAxis.col"
                           class="truncate"></span>
                     <svg class="w-3 h-3 transition-transform duration-200"
                          :class="xMenuOpen ? 'rotate-180' : ''"
@@ -61,7 +61,7 @@
 
                 <div x-show="xMenuOpen"
                      x-transition
-                     class="absolute top-full left-0 mt-2 w-full sm:w-64 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl shadow-2xl z-[110] p-2">
+                     class="absolute top-full left-0 mt-2 w-full sm:w-56 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-xl shadow-2xl z-[110] p-2">
 
                     <div class="relative mb-2">
                         <input type="text"
@@ -118,12 +118,12 @@
                     <div class="max-h-64 overflow-y-auto custom-scrollbar space-y-1">
                         <template x-for="col in getFilteredCols('x')"
                                   :key="col">
-                            <button @click="config.xAxis = col; xMenuOpen = false; xSearch = ''; saveAndRender()"
+                            <button @click="config.xAxis.col = col; xMenuOpen = false; xSearch = ''; saveAndRender()"
                                     class="w-full text-left px-2 py-1.5 rounded hover:bg-slate-300 dark:hover:bg-slate-700 flex items-center justify-between group border-b last:border-none border-slate-100 dark:border-slate-700">
                                 <span class="text-sm font-mono font-bold pr-2"
-                                      :class="config.xAxis === col ? 'text-cyan-500' : 'text-slate-500 dark:text-slate-400'"
+                                      :class="config.xAxis.col === col ? 'text-cyan-500' : 'text-slate-500 dark:text-slate-400'"
                                       x-text="col"></span>
-                                <span x-show="config.xAxis === col"
+                                <span x-show="config.xAxis.col === col"
                                       class="w-1.5 h-1.5 rounded-full bg-cyan-500 shrink-0"></span>
                             </button>
                         </template>
@@ -135,6 +135,254 @@
                     </div>
                 </div>
             </div>
+
+            <!-- x-axis filter button + panel -->
+            <div class="relative shrink-0"
+                 x-data="{
+                     xfOpen: false, addOpen: false, expandedIdx: null,
+                     isDirty: false,
+                     temp: { filters: [] },
+                     tempSnapshot: '[]'
+                 }"
+                 x-init="$watch('xfOpen', v => {
+                     $store.dojo.overlayCount = Math.max(0, $store.dojo.overlayCount + (v ? 1 : -1));
+                     const cfgStr = JSON.stringify(config.xAxis ?? { filters: [] });
+                     if (v) {
+                         const stored = getDraft('__xaxis__');
+                         if (stored && stored.baseSnapshot === cfgStr) {
+                             temp = JSON.parse(JSON.stringify(stored.draft));
+                             tempSnapshot = cfgStr;
+                             isDirty = JSON.stringify(stored.draft) !== cfgStr;
+                         } else {
+                             temp = JSON.parse(JSON.stringify(config.xAxis ?? { filters: [] }));
+                             tempSnapshot = cfgStr;
+                             isDirty = false;
+                         }
+                     } else {
+                         if (JSON.stringify(temp) !== tempSnapshot) {
+                             saveDraft('__xaxis__', JSON.parse(JSON.stringify(temp)), tempSnapshot);
+                         } else {
+                             clearDraft('__xaxis__');
+                         }
+                     }
+                 })"
+                 @mojo:escape.window="xfOpen = false; addOpen = false"
+                 @click.outside="xfOpen = false">
+
+                <!-- trigger button -->
+                <button @click="xfOpen = !xfOpen"
+                        class="relative h-7 px-2 rounded flex items-center gap-1 border text-xs font-bold transition-all"
+                        :class="(config.xAxis?.filters?.length ?? 0) > 0
+                            ? 'bg-cyan-500/10 border-cyan-500 text-cyan-500'
+                            : 'bg-slate-100 dark:bg-slate-900 border-slate-300 dark:border-slate-700 text-slate-400 hover:border-cyan-500/50'"
+                        title="X-Axis Filters">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"/>
+                    </svg>
+                    <span x-show="(config.xAxis?.filters?.length ?? 0) > 0"
+                          x-text="config.xAxis.filters.length"
+                          class="text-xs font-black leading-none"></span>
+                </button>
+
+                <!-- panel -->
+                <div x-show="xfOpen"
+                     x-transition
+                     class="absolute top-full left-0 mt-1 w-64 panel z-[200] space-y-3"
+                     style="display:none;">
+
+                    <!-- header: title + add + apply -->
+                    <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700 pb-2">
+                        <p class="text-sm font-black uppercase text-slate-400 tracking-widest">X-Axis Filters</p>
+                        <div class="flex items-center gap-2">
+                            <!-- add dropdown -->
+                            <div class="relative" @click.away="addOpen = false">
+                                <button @click="addOpen = !addOpen"
+                                        class="flex items-center gap-1 text-xs px-2 py-1 rounded-md bg-cyan-500/10 border border-cyan-500/30 text-cyan-500 hover:bg-cyan-500/20 transition-colors font-mono font-bold">
+                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
+                                    Add
+                                </button>
+                                <div x-show="addOpen" x-transition
+                                     class="absolute right-0 top-full mt-1 w-64 bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-lg shadow-2xl z-[700] max-h-72 overflow-y-auto custom-scrollbar">
+                                    <template x-for="schema in filterSchemas" :key="schema.type">
+                                        <button @click="addFilterToTemp(temp, schema.type); isDirty = true; addOpen = false; expandedIdx = (temp.filters ?? []).length - 1"
+                                                class="w-full text-left px-3 py-2.5 border-b last:border-none border-slate-200 dark:border-slate-700 hover:bg-slate-300 dark:hover:bg-slate-700">
+                                            <span class="block text-xs font-mono font-black text-cyan-500 uppercase mb-0.5" x-text="schema.type.replace(/_/g, ' ')"></span>
+                                            <span class="block text-xs text-slate-500 dark:text-slate-400 leading-snug" x-text="schema.description"></span>
+                                        </button>
+                                    </template>
+                                </div>
+                            </div>
+                            <!-- apply button -->
+                            <button @click="config.xAxis = JSON.parse(JSON.stringify(temp)); saveAndRender(); isDirty = false; tempSnapshot = JSON.stringify(temp.filters)"
+                                    :disabled="!isDirty"
+                                    :class="isDirty
+                                        ? 'bg-cyan-500 hover:bg-cyan-600 text-white shadow-md'
+                                        : 'bg-slate-300 dark:bg-slate-700 text-slate-400 cursor-not-allowed grayscale-[50%]'"
+                                    class="text-xs px-2 py-1 rounded-md font-bold uppercase tracking-widest transition-all">
+                                Apply
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- filter stack -->
+                    <div class="space-y-1 max-h-64 overflow-y-auto custom-scrollbar">
+                        <template x-for="(f, fi) in (temp.filters ?? [])" :key="fi">
+                            <div class="rounded-md border transition-all"
+                                 :class="f.enabled !== false ? 'border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900/30' : 'border-slate-200 dark:border-slate-800 opacity-40'">
+                                <!-- row -->
+                                <div class="flex items-center gap-1.5 px-2 py-1.5">
+                                    <div class="flex flex-col shrink-0">
+                                        <button @click="moveFilterInTemp(temp, fi, -1); isDirty = true"
+                                                :disabled="fi === 0"
+                                                class="text-slate-500 hover:text-cyan-500 disabled:opacity-20 transition-colors h-3.5 flex items-end justify-center">
+                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 15l7-7 7 7"/></svg>
+                                        </button>
+                                        <button @click="moveFilterInTemp(temp, fi, 1); isDirty = true"
+                                                :disabled="fi >= (temp.filters ?? []).length - 1"
+                                                class="text-slate-500 hover:text-cyan-500 disabled:opacity-20 transition-colors h-3.5 flex items-start justify-center">
+                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
+                                        </button>
+                                    </div>
+                                    <span class="text-xs font-mono font-black px-1.5 py-0.5 rounded bg-cyan-500/10 text-cyan-500 uppercase shrink-0" x-text="f.type.replace(/_/g, ' ')"></span>
+                                    <span class="flex-1 text-xs font-mono text-slate-500 truncate min-w-0" x-text="getFilterSummary(f)"></span>
+                                    <button @click="expandedIdx = (expandedIdx === fi) ? null : fi"
+                                            x-show="(getFilterSchema(f.type)?.params ?? []).length > 0"
+                                            :class="expandedIdx === fi ? 'text-cyan-500' : 'text-slate-500'"
+                                            class="hover:text-cyan-500 transition-colors shrink-0">
+                                        <svg class="w-3.5 h-3.5 transition-transform" :class="expandedIdx === fi ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
+                                    </button>
+                                    <button @click="f.enabled = (f.enabled !== false) ? false : true; isDirty = true"
+                                            :class="f.enabled !== false ? 'text-cyan-500' : 'text-slate-400'"
+                                            class="transition-colors shrink-0">
+                                        <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="5" :fill="f.enabled !== false ? 'currentColor' : 'none'" stroke-width="2"/></svg>
+                                    </button>
+                                    <button @click="duplicateFilterInTemp(temp, fi); isDirty = true; expandedIdx = fi + 1"
+                                            class="text-slate-500 hover:text-cyan-500 transition-colors shrink-0">
+                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+                                    </button>
+                                    <button @click="removeFilterFromTemp(temp, fi); isDirty = true; if(expandedIdx === fi) expandedIdx = null"
+                                            class="text-slate-500 hover:text-rose-500 transition-colors shrink-0">
+                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
+                                    </button>
+                                </div>
+                                <!-- param editor -->
+                                <div x-show="expandedIdx === fi" x-transition
+                                     class="px-3 pb-2 pt-1 border-t border-slate-200 dark:border-slate-700 space-y-2">
+                                    <template x-for="param in (getFilterSchema(f.type)?.params ?? [])" :key="param.name">
+                                        <div class="flex items-center gap-2">
+                                            <span class="text-xs font-mono text-slate-500 uppercase tracking-wide w-20 shrink-0" x-text="param.name"></span>
+                                            <template x-if="param.type === 'int'">
+                                                <input type="number"
+                                                       :value="f[param.name]"
+                                                       step="1"
+                                                       @change="setFilterParamOnTemp(temp, fi, param.name, parseInt($event.target.value)); isDirty = true"
+                                                       class="input-field no-spin flex-1 min-w-0 px-2 py-1 text-xs text-right"/>
+                                            </template>
+                                            <template x-if="param.type === 'float'">
+                                                <input type="text"
+                                                       :value="f[param.name]"
+                                                       @keydown.enter.prevent="const v = evalMathExpr($event.target.value); if (v !== null) { setFilterParamOnTemp(temp, fi, param.name, v); isDirty = true; $event.target.value = v; } else $event.target.select()"
+                                                       @blur="const v = evalMathExpr($event.target.value); if (v !== null) { setFilterParamOnTemp(temp, fi, param.name, v); isDirty = true; } else $event.target.value = f[param.name]"
+                                                       class="input-field flex-1 min-w-0 px-2 py-1 text-xs text-right"
+                                                       title="Supports arithmetic: e.g. 180/pi, sqrt(2), sin(0.5)"/>
+                                            </template>
+                                            <template x-if="param.type === 'bool'">
+                                                <input type="checkbox"
+                                                       :checked="f[param.name]"
+                                                       @change="setFilterParamOnTemp(temp, fi, param.name, $event.target.checked); isDirty = true"
+                                                       class="rounded accent-cyan-500 w-4 h-4"/>
+                                            </template>
+                                            <template x-if="param.type === 'string' && f.type === 'unit'">
+                                                <div class="flex-1"
+                                                     x-data="{ uOpen: false, uCoords: { top: 0, left: 0, width: 0 } }"
+                                                     @click.away="uOpen = false">
+                                                    <button x-ref="uBtn"
+                                                            @click="const r = $refs.uBtn.getBoundingClientRect(); uCoords = { top: r.bottom + window.scrollY + 2, left: r.left + window.scrollX, width: r.width }; uOpen = !uOpen"
+                                                            class="{{ dropdown_trigger_sm }}">
+                                                        <span class="text-xs" x-text="f[param.name] || '— select —'"></span>
+                                                        <svg class="w-2.5 h-2.5 shrink-0 transition-transform" :class="uOpen ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
+                                                    </button>
+                                                    <template x-teleport="body">
+                                                        <div x-show="uOpen"
+                                                             x-transition
+                                                             @click.stop
+                                                             @click.away="uOpen = false"
+                                                             :style="`position:absolute;top:${uCoords.top}px;left:${uCoords.left}px;width:10rem;`"
+                                                             class="bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-lg shadow-2xl z-[800] max-h-52 overflow-y-auto custom-scrollbar"
+                                                             style="display:none;">
+                                                            <template x-for="group in getUnitOptions(getFilterSchema('unit')?.unit_groups, param.name === 'to_unit' ? f['from_unit'] : null)" :key="group.label">
+                                                                <div>
+                                                                    <div class="px-2 pt-1.5 pb-0.5 text-[9px] font-black uppercase text-slate-500 tracking-widest bg-slate-100 dark:bg-slate-900/50 sticky top-0" x-text="group.label"></div>
+                                                                    <template x-for="unit in group.units" :key="unit">
+                                                                        <button @click="setFilterParamOnTemp(temp, fi, param.name, unit); isDirty = true; uOpen = false"
+                                                                                :class="f[param.name] === unit ? 'bg-cyan-500 text-white font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700'"
+                                                                                class="w-full text-left px-3 py-1 text-xs font-mono border-b last:border-none border-slate-200 dark:border-slate-700"
+                                                                                x-text="unit">
+                                                                        </button>
+                                                                    </template>
+                                                                </div>
+                                                            </template>
+                                                        </div>
+                                                    </template>
+                                                </div>
+                                            </template>
+                                            <template x-if="param.type === 'string' && f.type !== 'unit'">
+                                                <input type="text"
+                                                       :value="f[param.name]"
+                                                       @change="setFilterParamOnTemp(temp, fi, param.name, $event.target.value); isDirty = true"
+                                                       class="input-field flex-1 px-2 py-1 text-xs"/>
+                                            </template>
+                                            <template x-if="param.type === 'col'">
+                                                <div class="flex-1 relative"
+                                                     x-data="{ cOpen: false, cSearch: '', cCoords: { top: 0, left: 0, width: 0 } }"
+                                                     @click.away="cOpen = false">
+                                                    <button x-ref="cBtn"
+                                                            @click="const r = $refs.cBtn.getBoundingClientRect(); cCoords = { top: r.bottom + window.scrollY + 2, left: r.left + window.scrollX, width: r.width }; cOpen = !cOpen"
+                                                            class="{{ dropdown_trigger_sm }}">
+                                                        <span class="text-xs truncate" x-text="f[param.name] || '— none —'"></span>
+                                                        <svg class="w-2.5 h-2.5 shrink-0 transition-transform" :class="cOpen ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
+                                                    </button>
+                                                    <template x-teleport="body">
+                                                        <div x-show="cOpen"
+                                                             x-transition
+                                                             @click.stop
+                                                             @click.away="cOpen = false"
+                                                             :style="`position:absolute;top:${cCoords.top}px;left:${cCoords.left}px;width:14rem;`"
+                                                             class="bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-lg shadow-2xl z-[800]"
+                                                             style="display:none;">
+                                                            <div class="p-1.5 border-b border-slate-200 dark:border-slate-700">
+                                                                <input type="text" x-model="cSearch" placeholder="Filter..." class="input-field w-full px-2 py-1 text-xs"/>
+                                                            </div>
+                                                            <div class="max-h-48 overflow-y-auto custom-scrollbar">
+                                                                <button @click="setFilterParamOnTemp(temp, fi, param.name, null); isDirty = true; cOpen = false"
+                                                                        :class="!f[param.name] ? 'bg-cyan-500 text-white font-bold' : 'text-slate-400 hover:bg-slate-300 dark:hover:bg-slate-700'"
+                                                                        class="w-full text-left px-3 py-1.5 text-xs font-mono border-b border-slate-200 dark:border-slate-700 italic">
+                                                                    — none (use dt) —
+                                                                </button>
+                                                                <template x-for="c in [...columns.filter(c => !cSearch || c.toLowerCase().includes(cSearch.toLowerCase()))].sort((a,b) => a==='time' ? -1 : b==='time' ? 1 : 0)" :key="c">
+                                                                    <button @click="setFilterParamOnTemp(temp, fi, param.name, c); isDirty = true; cOpen = false"
+                                                                            :class="f[param.name] === c ? 'bg-cyan-500 text-white font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700'"
+                                                                            class="w-full text-left px-3 py-1 text-xs font-mono border-b last:border-none border-slate-200 dark:border-slate-700 truncate"
+                                                                            x-text="c">
+                                                                    </button>
+                                                                </template>
+                                                            </div>
+                                                        </div>
+                                                    </template>
+                                                </div>
+                                            </template>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                        </template>
+                        <p x-show="(temp.filters?.length ?? 0) === 0"
+                           class="text-xs font-mono italic text-slate-500 dark:text-slate-500 text-center py-2 border border-dashed border-slate-300 dark:border-slate-700 rounded-md">
+                            No filters — raw signal
+                        </p>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <!-- rotation selector -->
@@ -428,6 +676,7 @@
         open: false,
         coords: { top: 0, left: 0, width: 0 }
      }"
+                         x-init="$watch('open', v => $store.dojo.overlayCount = Math.max(0, $store.dojo.overlayCount + (v ? 1 : -1)))"
                          @mojo:escape.window="open = false">
                         <span x-ref="anchor"
                               class="pl-1 pr-1 py-0.5 rounded text-sm font-mono font-bold flex items-center gap-1 group/chip transition-all shadow-sm border cursor-default"
@@ -599,7 +848,7 @@
                                                class="input-field w-full px-3 py-2" />
                                     </div>
                                     {% from 'partials/trial_viewer/_macros.html' import color_picker %}
-                                    {{ color_picker('temp.color', 'seriesPicker', 'Signal Color', on_change='isDirty = true') }}
+                                    {{ color_picker('temp.color', 'seriesPicker', 'Color', on_change='isDirty = true') }}
 
                                     <div class="grid grid-cols-2 gap-4">
                                         <div class="space-y-1">
@@ -843,15 +1092,21 @@
                                                                 <span class="text-xs font-mono text-slate-500 dark:text-slate-400 uppercase tracking-wide w-20 shrink-0"
                                                                       x-text="param.name"></span>
                                                                 <!-- float / int -->
-                                                                <template x-if="param.type === 'float' || param.type === 'int'">
+                                                                <template x-if="param.type === 'int'">
                                                                     <input type="number"
                                                                            :value="f[param.name]"
-                                                                           :step="param.type === 'int' ? 1 : 0.01"
-                                                                           :min="param.min ?? param.exclusive_min ?? undefined"
-                                                                           :max="param.max ?? undefined"
-                                                                           @change="setFilterParamOnTemp(temp, fi, param.name, param.type === 'int' ? parseInt($event.target.value) : parseFloat($event.target.value)); isDirty = true"
+                                                                           step="1"
+                                                                           @change="setFilterParamOnTemp(temp, fi, param.name, parseInt($event.target.value)); isDirty = true"
                                                                            class="input-field no-spin flex-1 px-2 py-1 text-xs text-right" />
                                                                 </template>
+                                                                <template x-if="param.type === 'float'">
+                                                                    <input type="text"
+                                                                           :value="f[param.name]"
+                                                                           @keydown.enter.prevent="const v = evalMathExpr($event.target.value); if (v !== null) { setFilterParamOnTemp(temp, fi, param.name, v); isDirty = true; $event.target.value = v; } else $event.target.select()"
+                                                                           @blur="const v = evalMathExpr($event.target.value); if (v !== null) { setFilterParamOnTemp(temp, fi, param.name, v); isDirty = true; } else $event.target.value = f[param.name]"
+                                                                           class="input-field flex-1 px-2 py-1 text-xs text-right"
+                                                                           title="Supports arithmetic: e.g. 180/pi, sqrt(2), sin(0.5)"/>
+                                                                </template>
                                                                 <!-- bool -->
                                                                 <template x-if="param.type === 'bool'">
                                                                     <input type="checkbox"
@@ -907,6 +1162,46 @@
                                                                            @change="setFilterParamOnTemp(temp, fi, param.name, $event.target.value); isDirty = true"
                                                                            class="input-field flex-1 px-2 py-1 text-xs" />
                                                                 </template>
+                                                                <!-- column reference dropdown -->
+                                                                <template x-if="param.type === 'col'">
+                                                                    <div class="flex-1 relative"
+                                                                         x-data="{ cOpen: false, cSearch: '', cCoords: { top: 0, left: 0, width: 0 } }"
+                                                                         @click.away="cOpen = false">
+                                                                        <button x-ref="cBtn"
+                                                                                @click="const r = $refs.cBtn.getBoundingClientRect(); cCoords = { top: r.bottom + window.scrollY + 2, left: r.left + window.scrollX, width: r.width }; cOpen = !cOpen"
+                                                                                class="{{ dropdown_trigger_sm }}">
+                                                                            <span class="text-xs truncate" x-text="f[param.name] || '— none —'"></span>
+                                                                            <svg class="w-2.5 h-2.5 shrink-0 transition-transform" :class="cOpen ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
+                                                                        </button>
+                                                                        <template x-teleport="body">
+                                                                            <div x-show="cOpen"
+                                                                                 x-transition
+                                                                                 @click.stop
+                                                                                 @click.away="cOpen = false"
+                                                                                 :style="`position:absolute;top:${cCoords.top}px;left:${cCoords.left}px;width:14rem;`"
+                                                                                 class="bg-white dark:bg-slate-800 border border-slate-400 dark:border-slate-700 rounded-lg shadow-2xl z-[800]"
+                                                                                 style="display:none;">
+                                                                                <div class="p-1.5 border-b border-slate-200 dark:border-slate-700">
+                                                                                    <input type="text" x-model="cSearch" placeholder="Filter..." class="input-field w-full px-2 py-1 text-xs"/>
+                                                                                </div>
+                                                                                <div class="max-h-48 overflow-y-auto custom-scrollbar">
+                                                                                    <button @click="setFilterParamOnTemp(temp, fi, param.name, null); isDirty = true; cOpen = false"
+                                                                                            :class="!f[param.name] ? 'bg-cyan-500 text-white font-bold' : 'text-slate-400 hover:bg-slate-300 dark:hover:bg-slate-700'"
+                                                                                            class="w-full text-left px-3 py-1.5 text-xs font-mono border-b border-slate-200 dark:border-slate-700 italic">
+                                                                                        — none (use dt) —
+                                                                                    </button>
+                                                                                    <template x-for="c in [...columns.filter(c => !cSearch || c.toLowerCase().includes(cSearch.toLowerCase()))].sort((a,b) => a==='time' ? -1 : b==='time' ? 1 : 0)" :key="c">
+                                                                                        <button @click="setFilterParamOnTemp(temp, fi, param.name, c); isDirty = true; cOpen = false"
+                                                                                                :class="f[param.name] === c ? 'bg-cyan-500 text-white font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700'"
+                                                                                                class="w-full text-left px-3 py-1 text-xs font-mono border-b last:border-none border-slate-200 dark:border-slate-700 truncate"
+                                                                                                x-text="c">
+                                                                                        </button>
+                                                                                    </template>
+                                                                                </div>
+                                                                            </div>
+                                                                        </template>
+                                                                    </div>
+                                                                </template>
                                                             </div>
                                                         </template>
                                                     </div>
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/js/main.js b/src/mujoco_mojo/utils/layers/dojo/templates/static/js/main.js
index 67970ee6..c991af78 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/js/main.js
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/static/js/main.js
@@ -22,7 +22,8 @@
   document.addEventListener("alpine:init", () => {
     Alpine.store("dojo", {
       isPageReady: false,
-      isFullscreen: false,
+      isFullscreen: localStorage.getItem("mojo_fullscreen") === "true",
+      overlayCount: 0,
       loadStartTime: Date.now(),
       isComplete: false,
       isMuted: localStorage.getItem("mojo_muted") !== "false",
@@ -173,6 +174,14 @@
           this.loadingInterval = null;
         }
       },
+      toggleFullscreen() {
+        this.isFullscreen = !this.isFullscreen;
+        localStorage.setItem("mojo_fullscreen", String(this.isFullscreen));
+      },
+      exitFullscreen() {
+        this.isFullscreen = false;
+        localStorage.setItem("mojo_fullscreen", "false");
+      },
       toggleMute() {
         this.isMuted = !this.isMuted;
         localStorage.setItem("mojo_muted", this.isMuted.toString());
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/js/trial-viewer.js b/src/mujoco_mojo/utils/layers/dojo/templates/static/js/trial-viewer.js
index fad3210b..01145f4d 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/js/trial-viewer.js
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/static/js/trial-viewer.js
@@ -2,7 +2,13 @@
 (() => {
   // src/lib/options.ts
   var DASH_OPTIONS = ["solid", "dash", "dot", "dashdot"];
-  var MARKER_OPTIONS = ["none", "circle", "square", "diamond", "cross"];
+  var MARKER_OPTIONS = [
+    "none",
+    "circle",
+    "square",
+    "diamond",
+    "cross"
+  ];
   var GRID_OPTIONS = ["none", "major", "all"];
   var LINE_MODE_OPTIONS = [
     { label: "Lines", value: "lines" },
@@ -67,7 +73,19 @@
 
   // src/trial-viewer.ts
   var tw = {
-    slate: { 50: "#f8fafc", 100: "#f1f5f9", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155", 800: "#1e293b", 900: "#0f172a", 950: "#020617" },
+    slate: {
+      50: "#f8fafc",
+      100: "#f1f5f9",
+      200: "#e2e8f0",
+      300: "#cbd5e1",
+      400: "#94a3b8",
+      500: "#64748b",
+      600: "#475569",
+      700: "#334155",
+      800: "#1e293b",
+      900: "#0f172a",
+      950: "#020617"
+    },
     cyan: { 400: "#22d3ee", 500: "#06b6d4", 600: "#0891b2" },
     emerald: { 500: "#10b981" },
     blue: { 500: "#3b82f6" },
@@ -76,7 +94,7 @@
     rose: { 500: "#ef4444" }
   };
   var DEFAULT_CONFIG = {
-    xAxis: "time",
+    xAxis: { col: "time", filters: [] },
     yAxes: {},
     refFrame: null,
     grid: "all",
@@ -92,6 +110,7 @@
     rangeY: null,
     xScale: "linear",
     yScale: "linear",
+    plotType: "cartesian",
     vsEnabled: false,
     vsRange: [0, 10],
     annotations: [],
@@ -110,6 +129,7 @@
       isMac: /Mac|iPhone|iPod|iPad/.test(navigator.platform),
       data: null,
       errorState: null,
+      _renderedPlotType: null,
       // --- UI / MENU STATES ---
       theme: "dark",
       xMenuOpen: false,
@@ -125,7 +145,14 @@
       columns: [],
       rotateableVectors: [],
       discoveryId: 0,
-      plotColors: [tw.cyan[500], tw.emerald[500], tw.blue[500], tw.violet[500], tw.amber[500], tw.rose[500]],
+      plotColors: [
+        tw.cyan[500],
+        tw.emerald[500],
+        tw.blue[500],
+        tw.violet[500],
+        tw.amber[500],
+        tw.rose[500]
+      ],
       // Toast (shared mixin)
       ...createToastMixin(),
       // Options — exposed so templates can use opts.lineMode, opts.interpLabel(...), etc.
@@ -149,6 +176,7 @@
       // tracks the last filter fingerprint that was fetched for each col; used to detect
       // real filter changes without relying on Alpine.js's (unreliable) oldValue deep clone
       filterFingerprints: {},
+      xAxisFilterFingerprint: "[]",
       // deduplicates filter error toasts so VS mode (N parallel fetches) shows each error once
       _shownFilterErrors: /* @__PURE__ */ new Set(),
       // in-progress signal editor edits that survive closing/reopening the panel
@@ -192,7 +220,9 @@
         if (this.historyIndex > 0) {
           this.isUndoing = true;
           this.historyIndex--;
-          this.config = JSON.parse(this.historyStack[this.historyIndex] ?? "{}");
+          this.config = JSON.parse(
+            this.historyStack[this.historyIndex] ?? "{}"
+          );
           this.persistHistory();
           void this.$nextTick(() => {
             this.isUndoing = false;
@@ -204,7 +234,9 @@
         if (this.historyIndex < this.historyStack.length - 1) {
           this.isUndoing = true;
           this.historyIndex++;
-          this.config = JSON.parse(this.historyStack[this.historyIndex] ?? "{}");
+          this.config = JSON.parse(
+            this.historyStack[this.historyIndex] ?? "{}"
+          );
           this.persistHistory();
           void this.$nextTick(() => {
             this.isUndoing = false;
@@ -213,7 +245,10 @@
         }
       },
       persistHistory() {
-        localStorage.setItem("mojo_mosaic_history", JSON.stringify({ stack: this.historyStack, index: this.historyIndex }));
+        localStorage.setItem(
+          "mojo_mosaic_history",
+          JSON.stringify({ stack: this.historyStack, index: this.historyIndex })
+        );
       },
       shiftY(index, direction, isWarp = false) {
         const keys = Object.keys(this.config.yAxes);
@@ -238,15 +273,25 @@
       async fetchTrialData(id, requiredCols = []) {
         let url = `/mosaic/${id}/data`;
         const colParams = new URLSearchParams();
-        if (requiredCols.length > 0) colParams.append("cols", requiredCols.join(","));
-        if (this.config.refFrame) colParams.append("rotate_by", this.config.refFrame);
+        if (requiredCols.length > 0)
+          colParams.append("cols", requiredCols.join(","));
+        if (this.config.refFrame)
+          colParams.append("rotate_by", this.config.refFrame);
         const filtersPayload = {};
+        const toActiveFilters = (filters) => filters.filter((f) => f.enabled !== false).map((f) => Object.fromEntries(Object.entries(f).filter(([k]) => k !== "enabled")));
         for (const col of requiredCols) {
           const yConfig = this.config.yAxes[col];
           if (yConfig?.filters && yConfig.filters.length > 0) {
-            const active = yConfig.filters.filter((f) => f.enabled !== false).map((f) => Object.fromEntries(Object.entries(f).filter(([k]) => k !== "enabled")));
+            const active = toActiveFilters(yConfig.filters);
             if (active.length > 0) filtersPayload[col] = active;
           }
+          if (col === this.config.xAxis.col) {
+            const xFilters = this.config.xAxis?.filters ?? [];
+            if (xFilters.length > 0) {
+              const active = toActiveFilters(xFilters);
+              if (active.length > 0) filtersPayload[col] = active;
+            }
+          }
         }
         if (Object.keys(filtersPayload).length > 0) {
           colParams.append("filters", JSON.stringify(filtersPayload));
@@ -261,7 +306,10 @@
             if (!this._shownFilterErrors.has(msg)) {
               this._shownFilterErrors.add(msg);
               this.notify(msg, "error");
-              setTimeout(() => this._shownFilterErrors.delete(msg), 5e3);
+              setTimeout(
+                () => this._shownFilterErrors.delete(msg),
+                5e3
+              );
             }
           });
         }
@@ -276,13 +324,19 @@
           try {
             const resp = await this.fetchTrialData(id, chunk);
             if (isVsDataset) {
-              this.vsDatasets[id] = { ...this.vsDatasets[id] ?? {}, ...resp.data };
+              this.vsDatasets[id] = {
+                ...this.vsDatasets[id] ?? {},
+                ...resp.data
+              };
               this.vsDatasets = { ...this.vsDatasets };
             } else {
               this.data = { ...this.data ?? {}, ...resp.data };
             }
-            if (Object.keys(this.config.yAxes).some((y) => chunk.includes(y))) this.renderPlot();
-            console.debug(`Dojo Hydration [${label}]: ${i + chunk.length}/${columnList.length}`);
+            if (Object.keys(this.config.yAxes).some((y) => chunk.includes(y)))
+              this.renderPlot();
+            console.debug(
+              `Dojo Hydration [${label}]: ${i + chunk.length}/${columnList.length}`
+            );
           } catch (e) {
             console.warn(`Hydration failed for ${id}`, e);
           }
@@ -290,12 +344,21 @@
       },
       async startBackgroundDiscovery() {
         const currentId = ++this.discoveryId;
-        const pendingCols = this.columns.filter((c) => !Object.prototype.hasOwnProperty.call(this.data ?? {}, c));
-        if (pendingCols.length > 0) await this.trickleFetch(this.trialId, pendingCols, "Current", false, currentId);
+        const pendingCols = this.columns.filter(
+          (c) => !Object.prototype.hasOwnProperty.call(this.data ?? {}, c)
+        );
+        if (pendingCols.length > 0)
+          await this.trickleFetch(
+            this.trialId,
+            pendingCols,
+            "Current",
+            false,
+            currentId
+          );
         if (currentId !== this.discoveryId) return;
         const start = Math.min(this.vsDraft.range[0], this.vsDraft.range[1]);
         const end = Math.max(this.vsDraft.range[0], this.vsDraft.range[1]);
-        const activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
+        const activeCols = [this.config.xAxis.col, ...Object.keys(this.config.yAxes)];
         const draftIds = this.allTrials.filter((id) => {
           const n = parseInt(id.split("_").pop() ?? "");
           return n >= start && n <= end && id !== this.trialId;
@@ -303,8 +366,17 @@
         for (const id of draftIds) {
           if (currentId !== this.discoveryId) return;
           const existing = this.vsDatasets[id];
-          const needsFetch = !existing || activeCols.some((c) => !Object.prototype.hasOwnProperty.call(existing, c));
-          if (needsFetch) await this.trickleFetch(id, activeCols, `Draft ${id}`, true, currentId);
+          const needsFetch = !existing || activeCols.some(
+            (c) => !Object.prototype.hasOwnProperty.call(existing, c)
+          );
+          if (needsFetch)
+            await this.trickleFetch(
+              id,
+              activeCols,
+              `Draft ${id}`,
+              true,
+              currentId
+            );
         }
       },
       // -----------------------------------------------------------------------
@@ -328,13 +400,27 @@
         if (this.placementMode === "vline") {
           newShape = { type: "vline", x0: pt.x, color: defaultColor, label: "" };
         } else if (this.placementMode === "hline") {
-          newShape = { type: "hline", x0: pt.x, y0: pt.y, color: defaultColor, label: "" };
+          newShape = {
+            type: "hline",
+            x0: pt.x,
+            y0: pt.y,
+            color: defaultColor,
+            label: ""
+          };
         } else if (this.placementMode === "rect") {
           if (!this.rectStart) {
             this.rectStart = { x: pt.x, y: pt.y };
             return true;
           }
-          newShape = { type: "rect", x0: this.rectStart.x, x1: pt.x, y0: this.rectStart.y, y1: pt.y, color: defaultColor, label: "" };
+          newShape = {
+            type: "rect",
+            x0: this.rectStart.x,
+            x1: pt.x,
+            y0: this.rectStart.y,
+            y1: pt.y,
+            color: defaultColor,
+            label: ""
+          };
           this.rectStart = null;
         }
         if (newShape) {
@@ -381,7 +467,9 @@
       startAnnEdit(index) {
         this.annEditIndex = index;
         this.annDraft = { ...this.config.annotations[index] };
-        void this.$nextTick(() => this.$refs["annInput"]?.focus());
+        void this.$nextTick(
+          () => this.$refs["annInput"]?.focus()
+        );
       },
       cancelAnnDraft() {
         this.annDraft = null;
@@ -390,7 +478,7 @@
       jumpToAnnotation(ann) {
         const el = document.getElementById("plot-area");
         if (!el || !this.data) return;
-        const xValues = this.data[this.config.xAxis] ?? [];
+        const xValues = this.data[this.config.xAxis.col] ?? [];
         const xMin = xValues[0] ?? 0;
         const xMax = xValues[xValues.length - 1] ?? 100;
         const xSpan = (xMax - xMin) * 0.1;
@@ -403,12 +491,23 @@
           newRangeX[0] -= newRangeX[1] - xMax;
           newRangeX[1] = xMax;
         }
-        const fullY = this.calculatePaddedRange(Object.keys(this.config.yAxes), false);
+        const fullY = this.calculatePaddedRange(
+          Object.keys(this.config.yAxes),
+          false
+        );
         const ySpan = Math.abs(fullY[1] - fullY[0]) * 0.2;
-        const newRangeY = [ann.y - ySpan / 2, ann.y + ySpan / 2];
+        const newRangeY = [
+          ann.y - ySpan / 2,
+          ann.y + ySpan / 2
+        ];
         this.config.rangeX = newRangeX;
         this.config.rangeY = newRangeY;
-        void Plotly.relayout(el, { "xaxis.range": newRangeX, "yaxis.range": newRangeY, "xaxis.autorange": false, "yaxis.autorange": false });
+        void Plotly.relayout(el, {
+          "xaxis.range": newRangeX,
+          "yaxis.range": newRangeY,
+          "xaxis.autorange": false,
+          "yaxis.autorange": false
+        });
         this.saveAndRender();
       },
       deleteAnnotation(index) {
@@ -450,7 +549,8 @@
         const observer = new MutationObserver((mutations) => {
           if (mutations.some((m) => m.attributeName === "class")) {
             this.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
-            if (this.data && Object.keys(this.config.yAxes).length > 0) this.renderPlot();
+            if (this.data && Object.keys(this.config.yAxes).length > 0)
+              this.renderPlot();
           }
         });
         observer.observe(document.documentElement, { attributes: true });
@@ -464,7 +564,10 @@
           const statusResp = await fetch("/monitor/api/status");
           const statusData = await statusResp.json();
           if (statusData && !statusData.error) {
-            Alpine.store("dojo").updateSync(Date.now(), statusData.is_complete);
+            Alpine.store("dojo").updateSync(
+              Date.now(),
+              statusData.is_complete
+            );
             const match = statusData.padding_style.match(/\d+/);
             this.paddingLen = match ? parseInt(match[0]) : 2;
           }
@@ -472,7 +575,10 @@
           console.warn("Dojo offline", e);
         }
         try {
-          const initialCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
+          const initialCols = [
+            this.config.xAxis.col,
+            ...Object.keys(this.config.yAxes)
+          ];
           const response = await this.fetchTrialData(this.trialId, initialCols);
           this.columns = response.columns.all.sort();
           this.rotateableVectors = response.columns.rotatable_vectors ?? [];
@@ -508,39 +614,57 @@
                 return;
               }
               if (event["xaxis.range[0]"] !== void 0) {
-                this.config.rangeX = [event["xaxis.range[0]"], event["xaxis.range[1]"]];
+                this.config.rangeX = [
+                  event["xaxis.range[0]"],
+                  event["xaxis.range[1]"]
+                ];
               }
               if (event["yaxis.range[0]"] !== void 0) {
-                this.config.rangeY = [event["yaxis.range[0]"], event["yaxis.range[1]"]];
+                this.config.rangeY = [
+                  event["yaxis.range[0]"],
+                  event["yaxis.range[1]"]
+                ];
               }
             });
             plotEl.addEventListener("click", (e) => {
               if (!this.placementMode) return;
               const target = e.target;
-              if (!target.classList.contains("nsewdrag") && !target.classList.contains("drag")) return;
+              if (!target.classList.contains("nsewdrag") && !target.classList.contains("drag"))
+                return;
               const rect = plotEl.getBoundingClientRect();
               const fullLayout = plotEl._fullLayout;
               if (!fullLayout) return;
               this.handlePlotClickForShapes({
-                x: fullLayout.xaxis.p2l(e.clientX - rect.left - fullLayout.margin.l),
-                y: fullLayout.yaxis.p2l(e.clientY - rect.top - fullLayout.margin.t)
+                x: fullLayout.xaxis.p2l(
+                  e.clientX - rect.left - fullLayout.margin.l
+                ),
+                y: fullLayout.yaxis.p2l(
+                  e.clientY - rect.top - fullLayout.margin.t
+                )
               });
             });
             document.addEventListener("mousedown", (e) => {
               if (e.button !== 1) return;
               const rect = plotEl.getBoundingClientRect();
-              if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) return;
+              if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom)
+                return;
               e.preventDefault();
               const fullLayout = plotEl._fullLayout;
               if (!fullLayout) return;
-              const xVal = fullLayout.xaxis.p2l(e.clientX - rect.left - fullLayout.margin.l);
-              const yVal = fullLayout.yaxis.p2l(e.clientY - rect.top - fullLayout.margin.t);
+              const xVal = fullLayout.xaxis.p2l(
+                e.clientX - rect.left - fullLayout.margin.l
+              );
+              const yVal = fullLayout.yaxis.p2l(
+                e.clientY - rect.top - fullLayout.margin.t
+              );
               setTimeout(() => {
                 this.annDraft = { x: xVal, y: yVal, text: "" };
                 this.annEditIndex = null;
                 this.annotationsOpen = true;
                 void this.$nextTick(() => {
-                  document.querySelector('[x-ref="annInput"]')?.focus();
+                  document.querySelector(
+                    '[x-ref="annInput"]'
+                  )?.focus();
                 });
               }, 0);
             });
@@ -577,7 +701,9 @@
             document.querySelector('input[type="number"]')?.focus();
           }
           if (e.key === "Escape") {
-            if (["INPUT", "TEXTAREA"].includes(tag)) e.target.blur();
+            const anyOpen = !!(this.placementMode || this.annotationsOpen || this.shapesOpen || this.xMenuOpen || this.yMenuOpen || this.refFrameMenuOpen || this.settingsOpen || this.downloadOpen || this.editorOpen || this.profilesOpen || this.vsMenuOpen || Alpine.store("dojo").overlayCount > 0 || ["INPUT", "TEXTAREA"].includes(tag));
+            if (["INPUT", "TEXTAREA"].includes(tag))
+              e.target.blur();
             this.placementMode = null;
             this.rectStart = null;
             this.cancelAnnDraft();
@@ -589,10 +715,12 @@
             this.profilesOpen = this.vsMenuOpen = false;
             this.profileSearch = "";
             window.dispatchEvent(new CustomEvent("mojo:escape"));
+            if (anyOpen) e.stopImmediatePropagation();
           }
           if (["INPUT", "TEXTAREA"].includes(tag)) return;
           if (e.key === "ArrowLeft") document.getElementById("nav-prev")?.click();
-          if (e.key === "ArrowRight") document.getElementById("nav-next")?.click();
+          if (e.key === "ArrowRight")
+            document.getElementById("nav-next")?.click();
           const isZ = e.key.toLowerCase() === "z";
           const isY = e.key.toLowerCase() === "y";
           const cmdOrCtrl = e.metaKey || e.ctrlKey;
@@ -605,7 +733,7 @@
             e.preventDefault();
             this.redo();
           }
-        });
+        }, { capture: true });
         const resp = await fetch("/mosaic/api/trials");
         const data = await resp.json();
         this.allTrials = data.trials ?? [];
@@ -622,43 +750,73 @@
           if (this.discoveryTimeout) clearTimeout(this.discoveryTimeout);
           this.discoveryTimeout = setTimeout(() => {
             if (this.vsDraft.enabled) {
-              console.debug("Predictive Sync: User adjusted range, starting hydration...");
+              console.debug(
+                "Predictive Sync: User adjusted range, starting hydration..."
+              );
               void this.startBackgroundDiscovery();
             }
           }, 500);
         });
-        this.$watch("config.refFrame", async (newValue, oldValue) => {
-          console.debug(`[Mojo] Frame Change: ${oldValue ?? "world"} -> ${newValue ?? "world"}`);
-          this.notify(`Frame: ${newValue || "world"}`, "info");
-          this.discoveryId++;
-          this.data = {};
-          this.vsDatasets = {};
-          const initialCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
-          const response = await this.fetchTrialData(this.trialId, initialCols);
-          this.columns = response.columns.all.sort();
-          this.rotateableVectors = response.columns.rotatable_vectors ?? [];
-          this.data = response.data;
-          void this.startBackgroundDiscovery();
-          if (this.config.vsEnabled) await this.syncVsRange();
-          this.saveAndRender();
-        });
+        this.$watch(
+          "config.refFrame",
+          async (newValue, oldValue) => {
+            console.debug(
+              `[Mojo] Frame Change: ${oldValue ?? "world"} -> ${newValue ?? "world"}`
+            );
+            this.notify(`Frame: ${newValue || "world"}`, "info");
+            this.discoveryId++;
+            this.data = {};
+            this.vsDatasets = {};
+            const initialCols = [
+              this.config.xAxis.col,
+              ...Object.keys(this.config.yAxes)
+            ];
+            const response = await this.fetchTrialData(this.trialId, initialCols);
+            this.columns = response.columns.all.sort();
+            this.rotateableVectors = response.columns.rotatable_vectors ?? [];
+            this.data = response.data;
+            void this.startBackgroundDiscovery();
+            if (this.config.vsEnabled) await this.syncVsRange();
+            this.saveAndRender();
+          }
+        );
         this.$watch("config", async (value, oldValue) => {
           if (!this.isEditingRaw) this.configRaw = JSON.stringify(value, null, 4);
-          if (this.config.vsEnabled && oldValue?.vsEnabled && (value.xAxis !== oldValue.xAxis || Object.keys(value.yAxes).length !== Object.keys(oldValue.yAxes ?? {}).length)) {
+          if (this.config.vsEnabled && oldValue?.vsEnabled && (value.xAxis.col !== oldValue?.xAxis?.col || Object.keys(value.yAxes).length !== Object.keys(oldValue.yAxes ?? {}).length)) {
             await this.syncVsRange();
           }
           this.pushHistory();
           const changedFilterCols = Object.keys(value.yAxes).filter((col) => {
-            const current = JSON.stringify((value.yAxes[col]?.filters ?? []).filter((f) => f.enabled !== false));
+            const current = JSON.stringify(
+              (value.yAxes[col]?.filters ?? []).filter(
+                (f) => f.enabled !== false
+              )
+            );
             return current !== (this.filterFingerprints[col] ?? "[]");
           });
-          if (changedFilterCols.length > 0) {
+          const xFilterCurrent = JSON.stringify(
+            (value.xAxis?.filters ?? []).filter((f) => f.enabled !== false)
+          );
+          const xFilterChanged = xFilterCurrent !== this.xAxisFilterFingerprint;
+          if (xFilterChanged) {
+            this.xAxisFilterFingerprint = xFilterCurrent;
+            if (this.data) delete this.data[value.xAxis.col];
+          }
+          const colsToRefetch = [
+            ...xFilterChanged ? [value.xAxis.col] : [],
+            ...changedFilterCols
+          ];
+          if (colsToRefetch.length > 0) {
             changedFilterCols.forEach((col) => {
-              this.filterFingerprints[col] = JSON.stringify((value.yAxes[col]?.filters ?? []).filter((f) => f.enabled !== false));
+              this.filterFingerprints[col] = JSON.stringify(
+                (value.yAxes[col]?.filters ?? []).filter(
+                  (f) => f.enabled !== false
+                )
+              );
               if (this.data) delete this.data[col];
             });
             this.vsDatasets = {};
-            const resp2 = await this.fetchTrialData(this.trialId, changedFilterCols);
+            const resp2 = await this.fetchTrialData(this.trialId, colsToRefetch);
             this.data = { ...this.data ?? {}, ...resp2.data };
             if (this.config.vsEnabled) await this.syncVsRange();
           }
@@ -687,14 +845,22 @@
         try {
           const start = Math.min(this.vsDraft.range[0], this.vsDraft.range[1]);
           const end = Math.max(this.vsDraft.range[0], this.vsDraft.range[1]);
-          let activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
+          let activeCols = [this.config.xAxis.col, ...Object.keys(this.config.yAxes)];
           if (this.config.refFrame) {
             const families = /* @__PURE__ */ new Set();
             Object.keys(this.config.yAxes).forEach((col) => {
-              if (col.includes(":")) families.add(col.substring(0, col.lastIndexOf(":")));
+              if (col.includes(":"))
+                families.add(col.substring(0, col.lastIndexOf(":")));
             });
-            families.forEach((fam) => activeCols.push(`${fam}:x`, `${fam}:y`, `${fam}:z`));
-            activeCols.push(`${this.config.refFrame}:w`, `${this.config.refFrame}:x`, `${this.config.refFrame}:y`, `${this.config.refFrame}:z`);
+            families.forEach(
+              (fam) => activeCols.push(`${fam}:x`, `${fam}:y`, `${fam}:z`)
+            );
+            activeCols.push(
+              `${this.config.refFrame}:w`,
+              `${this.config.refFrame}:x`,
+              `${this.config.refFrame}:y`,
+              `${this.config.refFrame}:z`
+            );
           }
           activeCols = [...new Set(activeCols)];
           const currentNum = parseInt(this.trialId.split("_").pop() ?? "");
@@ -702,19 +868,29 @@
             const n = parseInt(id.split("_").pop() ?? "");
             return n >= start && n <= end && n !== currentNum;
           });
-          await Promise.all(targetIds.map(async (id) => {
-            const existing = this.vsDatasets[id];
-            const needsFetch = !existing || activeCols.some((col) => !Object.prototype.hasOwnProperty.call(existing, col)) || this.config.refFrame !== null;
-            if (needsFetch) {
-              const response = await this.fetchTrialData(id, activeCols);
-              this.vsDatasets[id] = { ...this.vsDatasets[id] ?? {}, ...response.data };
-            }
-          }));
+          await Promise.all(
+            targetIds.map(async (id) => {
+              const existing = this.vsDatasets[id];
+              const needsFetch = !existing || activeCols.some(
+                (col) => !Object.prototype.hasOwnProperty.call(existing, col)
+              ) || this.config.refFrame !== null;
+              if (needsFetch) {
+                const response = await this.fetchTrialData(id, activeCols);
+                this.vsDatasets[id] = {
+                  ...this.vsDatasets[id] ?? {},
+                  ...response.data
+                };
+              }
+            })
+          );
           this.vsDatasets = { ...this.vsDatasets };
           this.config.vsRange = [start, end];
           this.config.vsEnabled = true;
           if (targetIds.length > 0) {
-            this.notify(`Comparing ${targetIds.length} trial${targetIds.length === 1 ? "" : "s"}`, "info");
+            this.notify(
+              `Comparing ${targetIds.length} trial${targetIds.length === 1 ? "" : "s"}`,
+              "info"
+            );
           }
         } finally {
           this.vsLoading = false;
@@ -751,7 +927,9 @@
           const query = new RegExp(pattern, "i");
           return this.smartSort(base.filter((c) => query.test(c)));
         } catch {
-          return this.smartSort(base.filter((c) => c.toLowerCase().includes(search.toLowerCase())));
+          return this.smartSort(
+            base.filter((c) => c.toLowerCase().includes(search.toLowerCase()))
+          );
         }
       },
       toggleRegexSegment(field, segment, depth) {
@@ -775,7 +953,9 @@
           }
           pathPart = parts.join("/");
           if (pathPart && pathPart.toLowerCase() !== "time") {
-            const isFolder = this.columns.some((c) => c.toLowerCase().startsWith(pathPart.toLowerCase() + "/"));
+            const isFolder = this.columns.some(
+              (c) => c.toLowerCase().startsWith(pathPart.toLowerCase() + "/")
+            );
             if (isFolder) pathPart += "/";
           }
         }
@@ -801,7 +981,10 @@
         const search = this[field + "Search"] ?? "";
         const [pathPart = "", suffixPart = ""] = search.split(":");
         const selected = (suffixPart ?? "").replace(/[()]/g, "").split("|").filter(Boolean).map((s) => ":" + s);
-        const pathRegex = new RegExp("^" + (pathPart ?? "").replace(/\//g, "\\/?"), "i");
+        const pathRegex = new RegExp(
+          "^" + (pathPart ?? "").replace(/\//g, "\\/?"),
+          "i"
+        );
         const matches = base.filter((c) => pathRegex.test(c));
         const available = matches.map((c) => c.includes(":") ? ":" + c.split(":").pop() : null).filter(Boolean);
         return this.smartSort([.../* @__PURE__ */ new Set([...selected, ...available])]);
@@ -833,24 +1016,29 @@
         if (!this.configRaw) return "";
         let html = this.configRaw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
         const regex = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?|[\[\]{},])|(\S+)/g;
-        return html.replace(regex, (match, _token, _i1, _i2, _i3, garbage) => {
-          if (garbage) return `<span class="text-rose-500 underline decoration-wavy underline-offset-2 font-bold">${garbage}</span>`;
-          let cls = "text-slate-500 dark:text-slate-400";
-          if (/^"/.test(match)) {
-            cls = /:$/.test(match) ? "text-cyan-600 dark:text-cyan-300" : "text-emerald-600 dark:text-emerald-400";
-          } else if (/true|false/.test(match)) {
-            cls = "text-violet-600 dark:text-violet-400";
-          } else if (/null/.test(match)) {
-            cls = "text-rose-500";
-          } else if (/-?\d/.test(match)) {
-            cls = "text-amber-600 dark:text-amber-500";
+        return html.replace(
+          regex,
+          (match, _token, _i1, _i2, _i3, garbage) => {
+            if (garbage)
+              return `<span class="text-rose-500 underline decoration-wavy underline-offset-2 font-bold">${garbage}</span>`;
+            let cls = "text-slate-500 dark:text-slate-400";
+            if (/^"/.test(match)) {
+              cls = /:$/.test(match) ? "text-cyan-600 dark:text-cyan-300" : "text-emerald-600 dark:text-emerald-400";
+            } else if (/true|false/.test(match)) {
+              cls = "text-violet-600 dark:text-violet-400";
+            } else if (/null/.test(match)) {
+              cls = "text-rose-500";
+            } else if (/-?\d/.test(match)) {
+              cls = "text-amber-600 dark:text-amber-500";
+            }
+            return `<span class="${cls}">${match}</span>`;
           }
-          return `<span class="${cls}">${match}</span>`;
-        });
+        );
       },
       validateConfig(cfg) {
         const errors = [];
-        if (!this.columns.includes(cfg.xAxis)) errors.push(`X-Axis "${cfg.xAxis}" not found in telemetry.`);
+        if (cfg.xAxis?.col && !this.columns.includes(cfg.xAxis.col))
+          errors.push(`X-Axis "${cfg.xAxis.col}" not found in telemetry.`);
         if (typeof cfg.yAxes !== "object" || Array.isArray(cfg.yAxes)) {
           errors.push("yAxes must be a hashmap.");
         } else {
@@ -858,7 +1046,8 @@
             if (!this.columns.includes(y)) errors.push(`Y-Axis "${y}" missing.`);
           });
         }
-        if (cfg.vsRange && cfg.vsRange[0] > cfg.vsRange[1]) errors.push("Comparison range start cannot be greater than end.");
+        if (cfg.vsRange && cfg.vsRange[0] > cfg.vsRange[1])
+          errors.push("Comparison range start cannot be greater than end.");
         return errors;
       },
       updateFromRaw() {
@@ -894,7 +1083,7 @@
             console.error("Stored config corrupt");
           }
         } else {
-          if (this.columns.includes("time")) this.config.xAxis = "time";
+          if (this.columns.includes("time")) this.config.xAxis.col = "time";
         }
         const savedHistory = localStorage.getItem("mojo_mosaic_history");
         if (savedHistory) {
@@ -937,9 +1126,14 @@
       // -----------------------------------------------------------------------
       copyShareLink() {
         try {
-          const encoded = LZString.compressToEncodedURIComponent(JSON.stringify(this.config));
+          const encoded = LZString.compressToEncodedURIComponent(
+            JSON.stringify(this.config)
+          );
           const shareBase = this.externalUrl + window.location.pathname;
-          void this.copyToClipboard(`${shareBase}?v=${encoded}`, "Shareable link copied!");
+          void this.copyToClipboard(
+            `${shareBase}?v=${encoded}`,
+            "Shareable link copied!"
+          );
         } catch {
           this.notify("Link generation failed", "error");
         }
@@ -948,10 +1142,12 @@
         void this.copyToClipboard(this.configRaw, "JSON Config copied!");
       },
       resetConfig() {
-        if (confirm("Reset plot to factory defaults? This will clear your current view.")) {
+        if (confirm(
+          "Reset plot to factory defaults? This will clear your current view."
+        )) {
           localStorage.removeItem("mojo_mosaic_config");
           this.config = JSON.parse(JSON.stringify(DEFAULT_CONFIG));
-          if (this.columns.includes("time")) this.config.xAxis = "time";
+          if (this.columns.includes("time")) this.config.xAxis.col = "time";
           this.notify("Settings Reset", "info");
           this.configRaw = JSON.stringify(this.config, null, 4);
         }
@@ -989,20 +1185,37 @@
         const bgColor = isDark ? tw.slate[800] : "#ffffff";
         const resW = Math.round(1280 * scale);
         const resH = Math.round(720 * scale);
-        this.notify(`Exporting ${resW}x${resH} ${format.toUpperCase()}...`, "info");
+        this.notify(
+          `Exporting ${resW}x${resH} ${format.toUpperCase()}...`,
+          "info"
+        );
         try {
           const origPaper = el.layout.paper_bgcolor;
           const origPlot = el.layout.plot_bgcolor;
-          await Plotly.relayout(el, { paper_bgcolor: bgColor, plot_bgcolor: bgColor });
-          const dataUrl = await Plotly.toImage(el, { format: plotlyFormat, width: 1280, height: 720, scale });
-          await Plotly.relayout(el, { paper_bgcolor: origPaper, plot_bgcolor: origPlot });
+          await Plotly.relayout(el, {
+            paper_bgcolor: bgColor,
+            plot_bgcolor: bgColor
+          });
+          const dataUrl = await Plotly.toImage(el, {
+            format: plotlyFormat,
+            width: 1280,
+            height: 720,
+            scale
+          });
+          await Plotly.relayout(el, {
+            paper_bgcolor: origPaper,
+            plot_bgcolor: origPlot
+          });
           const link = document.createElement("a");
           link.href = dataUrl;
           link.download = `${this.trialId}_${resW}p.${format}`;
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
-          this.notify(`${format.toUpperCase()} saved (${resW}\xD7${resH})`, "success");
+          this.notify(
+            `${format.toUpperCase()} saved (${resW}\xD7${resH})`,
+            "success"
+          );
         } catch (e) {
           console.error("Export failed", e);
           this.notify("Export failed", "error");
@@ -1012,14 +1225,16 @@
       },
       downloadCSV() {
         if (!this.data || Object.keys(this.config.yAxes).length === 0) return;
-        const activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
-        const rowCount = this.data[this.config.xAxis]?.length ?? 0;
+        const activeCols = [this.config.xAxis.col, ...Object.keys(this.config.yAxes)];
+        const rowCount = this.data[this.config.xAxis.col]?.length ?? 0;
         let csv = activeCols.join(",") + "\n";
         for (let i = 0; i < rowCount; i++) {
           csv += activeCols.map((col) => this.data[col]?.[i] ?? "").join(",") + "\n";
         }
         const link = document.createElement("a");
-        link.href = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8;" }));
+        link.href = URL.createObjectURL(
+          new Blob([csv], { type: "text/csv;charset=utf-8;" })
+        );
         link.setAttribute("download", `${this.trialId}_filtered.csv`);
         document.body.appendChild(link);
         link.click();
@@ -1029,7 +1244,11 @@
       },
       downloadJSON() {
         const link = document.createElement("a");
-        link.href = URL.createObjectURL(new Blob([JSON.stringify(this.config, null, 4)], { type: "application/json" }));
+        link.href = URL.createObjectURL(
+          new Blob([JSON.stringify(this.config, null, 4)], {
+            type: "application/json"
+          })
+        );
         link.setAttribute("download", `${this.trialId}_config.json`);
         document.body.appendChild(link);
         link.click();
@@ -1046,7 +1265,9 @@
         const reader = new FileReader();
         reader.onload = (event) => {
           try {
-            const imported = JSON.parse(event.target?.result);
+            const imported = JSON.parse(
+              event.target?.result
+            );
             this.config = { ...this.config, ...imported };
             this.notify("Configuration restored!", "success");
             this.configRaw = JSON.stringify(this.config, null, 4);
@@ -1085,7 +1306,8 @@
         this.notify("Signals Cleared", "info");
       },
       warpToTrial() {
-        if (this.warpId === null || this.warpId === void 0 || this.warpId === "") return;
+        if (this.warpId === null || this.warpId === void 0 || this.warpId === "")
+          return;
         const paddedNum = String(this.warpId).padStart(this.paddingLen, "0");
         window.location.href = `/mosaic/trial_${paddedNum}`;
       },
@@ -1110,6 +1332,68 @@
       getFilterSchema(filterType) {
         return this.filterSchemas.find((s) => s.type === filterType);
       },
+      evalMathExpr(expr) {
+        const s = String(expr ?? "").trim();
+        if (!s) return null;
+        const n = Number(s);
+        if (!isNaN(n)) return n;
+        try {
+          const fn = new Function(
+            "pi",
+            "e",
+            "sin",
+            "cos",
+            "tan",
+            "asin",
+            "acos",
+            "atan",
+            "atan2",
+            "sqrt",
+            "cbrt",
+            "log",
+            "log2",
+            "log10",
+            "abs",
+            "floor",
+            "ceil",
+            "round",
+            "sign",
+            "pow",
+            "exp",
+            "max",
+            "min",
+            `"use strict"; return (${s})`
+          );
+          const result = fn(
+            Math.PI,
+            Math.E,
+            Math.sin,
+            Math.cos,
+            Math.tan,
+            Math.asin,
+            Math.acos,
+            Math.atan,
+            Math.atan2,
+            Math.sqrt,
+            Math.cbrt,
+            Math.log,
+            Math.log2,
+            Math.log10,
+            Math.abs,
+            Math.floor,
+            Math.ceil,
+            Math.round,
+            Math.sign,
+            Math.pow,
+            Math.exp,
+            Math.max,
+            Math.min
+          );
+          if (typeof result === "number" && isFinite(result)) return result;
+        } catch {
+        }
+        return null;
+      },
       getUnitOptions(groups, fromUnit) {
         if (!groups) return [];
         if (!fromUnit) return groups;
@@ -1119,11 +1403,14 @@
       getFilterSummary(entry) {
         const schema = this.filterSchemas.find((s) => s.type === entry.type);
         if (!schema || schema.params.length === 0) return "";
-        if (entry.type === "unit") return `${entry["from_unit"] ?? "?"} \u2192 ${entry["to_unit"] ?? "?"}`;
+        if (entry.type === "unit")
+          return `${entry["from_unit"] ?? "?"} \u2192 ${entry["to_unit"] ?? "?"}`;
         const parts = schema.params.filter((p) => entry[p.name] != null).map((p) => {
           const val = entry[p.name];
-          if (typeof val === "boolean") return `${p.name}=${val ? "on" : "off"}`;
-          if (typeof val === "number") return `${p.name}=${parseFloat(val.toFixed(4))}`;
+          if (typeof val === "boolean")
+            return `${p.name}=${val ? "on" : "off"}`;
+          if (typeof val === "number")
+            return `${p.name}=${parseFloat(val.toFixed(4))}`;
           return `${p.name}=${val}`;
         });
         return parts.slice(0, 3).join(", ");
@@ -1155,7 +1442,9 @@
       },
       duplicateFilterInTemp(temp, index) {
         if (!temp.filters?.[index]) return;
-        const copy = JSON.parse(JSON.stringify(temp.filters[index]));
+        const copy = JSON.parse(
+          JSON.stringify(temp.filters[index])
+        );
         temp.filters.splice(index + 1, 0, copy);
       },
       // -----------------------------------------------------------------------
@@ -1171,23 +1460,29 @@
           const resp = await fetch("/mosaic/api/profiles");
           this.profiles = await resp.json();
           const colSet = new Set(this.columns);
-          const frames = new Set(this.columns.filter((c) => c.endsWith(":w")).map((c) => c.replace(":w", "")));
+          const frames = new Set(
+            this.columns.filter((c) => c.endsWith(":w")).map((c) => c.replace(":w", ""))
+          );
           const warnings = {};
-          await Promise.all(this.profiles.map(async (p) => {
-            try {
-              const pr = await fetch(this._profileUrl(p.name));
-              if (!pr.ok) return;
-              const cfg = await pr.json();
-              const w = [];
-              if (cfg.xAxis && !colSet.has(cfg.xAxis)) w.push(`x-axis "${cfg.xAxis}"`);
-              for (const key of Object.keys(cfg.yAxes ?? {})) {
-                if (!colSet.has(key)) w.push(`"${key}"`);
+          await Promise.all(
+            this.profiles.map(async (p) => {
+              try {
+                const pr = await fetch(this._profileUrl(p.name));
+                if (!pr.ok) return;
+                const cfg = await pr.json();
+                const w = [];
+                if (cfg.xAxis?.col && !colSet.has(cfg.xAxis.col))
+                  w.push(`x-axis "${cfg.xAxis.col}"`);
+                for (const key of Object.keys(cfg.yAxes ?? {})) {
+                  if (!colSet.has(key)) w.push(`"${key}"`);
+                }
+                if (cfg.refFrame && !frames.has(cfg.refFrame))
+                  w.push(`frame "${cfg.refFrame}"`);
+                if (w.length) warnings[p.name] = w;
+              } catch {
               }
-              if (cfg.refFrame && !frames.has(cfg.refFrame)) w.push(`frame "${cfg.refFrame}"`);
-              if (w.length) warnings[p.name] = w;
-            } catch {
-            }
-          }));
+            })
+          );
           this.profileWarnings = warnings;
         } catch (e) {
           console.warn("[mojo] Failed to load profiles", e);
@@ -1200,7 +1495,9 @@
           return;
         }
         const normalise = (s) => s.toLowerCase().replace(/\s+/g, "_");
-        const existing = this.profiles.find((p) => normalise(p.name) === normalise(name));
+        const existing = this.profiles.find(
+          (p) => normalise(p.name) === normalise(name)
+        );
         if (existing && !confirm(`Overwrite profile "${existing.name}"?`)) return;
         try {
           const resp = await fetch(this._profileUrl(name), {
@@ -1226,20 +1523,29 @@
           }
           const loaded = await resp.json();
           const colSet = new Set(this.columns);
-          const frames = new Set(this.columns.filter((c) => c.endsWith(":w")).map((c) => c.replace(":w", "")));
+          const frames = new Set(
+            this.columns.filter((c) => c.endsWith(":w")).map((c) => c.replace(":w", ""))
+          );
           const missing = [];
-          if (loaded.xAxis && !colSet.has(loaded.xAxis)) missing.push(`x-axis "${loaded.xAxis}"`);
+          if (loaded.xAxis?.col && !colSet.has(loaded.xAxis.col))
+            missing.push(`x-axis "${loaded.xAxis.col}"`);
           for (const key of Object.keys(loaded.yAxes ?? {})) {
             if (!colSet.has(key)) missing.push(`signal "${key}"`);
           }
-          if (loaded.refFrame && !frames.has(loaded.refFrame)) missing.push(`frame "${loaded.refFrame}"`);
+          if (loaded.refFrame && !frames.has(loaded.refFrame))
+            missing.push(`frame "${loaded.refFrame}"`);
           if (missing.length) {
-            throw new Error(`references columns not in this trial: ${missing.join(", ")}`);
+            throw new Error(
+              `references columns not in this trial: ${missing.join(", ")}`
+            );
           }
           this.config = { ...this.config, ...loaded };
           this.notify(`Profile "${name}" loaded`, "success");
         } catch (e) {
-          this.notify(`Failed to load "${name}": ${e.message}`, "error");
+          this.notify(
+            `Failed to load "${name}": ${e.message}`,
+            "error"
+          );
         }
       },
       async deleteProfile(name) {
@@ -1311,27 +1617,60 @@
         const isHoverDisabled = this.config.hover === "none";
         const showX = this.config.showSpike && !isHoverDisabled && (this.config.hover.includes("x") || this.config.hover === "closest");
         const showY = this.config.showSpike && !isHoverDisabled && (this.config.hover.includes("y") || this.config.hover === "closest");
+        const isPolar = this.config.plotType === "polar";
         const yKeys = Object.keys(this.config.yAxes);
         let traces = yKeys.map((key, i) => {
           const p = this.getYProps(key, i);
           if (!this.data[p.name]) return null;
+          const lineStyle = {
+            width: p.width,
+            color: p.color,
+            shape: this.config.interp,
+            dash: p.dash
+          };
+          if (isPolar) {
+            return {
+              r: this.data[p.name],
+              theta: this.data[this.config.xAxis.col],
+              name: p.label,
+              mode: this.config.linemode,
+              type: "scatterpolar",
+              line: lineStyle,
+              marker: { size: 6, symbol: p.marker },
+              opacity: p.opacity,
+              hoverlabel: {
+                namelength: -1,
+                bgcolor: tooltipBg,
+                bordercolor: tooltipBorder,
+                font: { family: "monospace", size: 12, color: tooltipFont }
+              },
+              hovertemplate: `<b>${key}</b><br>\u03B8: %{theta:.4f}<br>r: %{r:.4f}<extra></extra>`
+            };
+          }
           return {
-            x: this.data[this.config.xAxis],
+            x: this.data[this.config.xAxis.col],
             y: this.data[p.name],
             name: p.label,
             mode: this.config.linemode,
             type: "scatter",
-            line: { width: p.width, color: p.color, shape: this.config.interp, dash: p.dash },
+            line: lineStyle,
             marker: { size: 6, symbol: p.marker },
             opacity: p.opacity,
-            hoverlabel: { namelength: -1, bgcolor: tooltipBg, bordercolor: tooltipBorder, font: { family: "monospace", size: 12, color: tooltipFont } },
+            hoverlabel: {
+              namelength: -1,
+              bgcolor: tooltipBg,
+              bordercolor: tooltipBorder,
+              font: { family: "monospace", size: 12, color: tooltipFont }
+            },
             hovertemplate: `<b>${key}</b><br>%{x}: %{y:.4f}<extra></extra>`
           };
         }).filter((t) => t !== null);
         if (this.config.vsEnabled) {
           const [start, end] = this.config.vsRange;
           const legendTracker = /* @__PURE__ */ new Set();
-          const sortedVsIds = Object.keys(this.vsDatasets).sort((a, b) => parseInt(a.split("_").pop() ?? "0") - parseInt(b.split("_").pop() ?? "0"));
+          const sortedVsIds = Object.keys(this.vsDatasets).sort(
+            (a, b) => parseInt(a.split("_").pop() ?? "0") - parseInt(b.split("_").pop() ?? "0")
+          );
           sortedVsIds.forEach((vsId) => {
             const n = parseInt(vsId.split("_").pop() ?? "");
             if (n < start || n > end || vsId === this.trialId) return;
@@ -1341,15 +1680,34 @@
               const p = this.getYProps(key, i);
               if (!dataset[p.name]) return null;
               const isFirst = !legendTracker.has(key);
-              const t = {
-                x: dataset[this.config.xAxis],
+              const lineStyle = {
+                width: 1,
+                color: p.color,
+                shape: this.config.interp,
+                dash: "dot"
+              };
+              const t = isPolar ? {
+                r: dataset[p.name],
+                theta: dataset[this.config.xAxis.col],
+                name: `${p.label} (<i>vs.</i>)`,
+                legendgroup: `group_${key}`,
+                showlegend: isFirst,
+                mode: this.config.linemode,
+                type: "scatterpolar",
+                line: lineStyle,
+                opacity: 0.35,
+                marker: { size: 4, symbol: p.marker },
+                hoverlabel: { namelength: -1 },
+                hovertemplate: `<b>${key}</b> (#${n})<br>\u03B8: %{theta:.4f}<br>r: %{r:.4f}<extra></extra>`
+              } : {
+                x: dataset[this.config.xAxis.col],
                 y: dataset[p.name],
                 name: `${p.label} (<i>vs.</i>)`,
                 legendgroup: `group_${key}`,
                 showlegend: isFirst,
                 mode: this.config.linemode,
                 type: "scatter",
-                line: { width: 1, color: p.color, shape: this.config.interp, dash: "dot" },
+                line: lineStyle,
                 opacity: 0.35,
                 marker: { size: 4, symbol: p.marker },
                 hoverlabel: { namelength: -1 },
@@ -1365,7 +1723,10 @@
           type: this.config.xScale ?? "linear",
           ...this.config.rangeX ? {
             autorange: false,
-            range: this.config.xScale === "log" ? [Math.log10(Math.max(1e-6, this.config.rangeX[0])), Math.log10(Math.max(1e-6, this.config.rangeX[1]))] : this.config.rangeX
+            range: this.config.xScale === "log" ? [
+              Math.log10(Math.max(1e-6, this.config.rangeX[0])),
+              Math.log10(Math.max(1e-6, this.config.rangeX[1]))
+            ] : this.config.rangeX
           } : { autorange: true },
           dtick: this.config.xScale === "log" && this.config.xLogBase ? Math.log10(this.config.xLogBase) : void 0,
           gridcolor: majorGrid,
@@ -1373,7 +1734,10 @@
           minor: { showgrid: this.config.grid === "all", gridcolor: minorGrid },
           zeroline: false,
           tickfont: { color: textColor, size: 14 },
-          title: { text: this.config.xAxisTitle || this.config.xAxis, font: { size: 14, color: textColor, family: "monospace" } },
+          title: {
+            text: this.config.xAxisTitle || this.config.xAxis.col,
+            font: { size: 14, color: textColor, family: "monospace" }
+          },
           showspikes: showX,
           spikemode: "across",
           spikelinecolor: spikeColor,
@@ -1384,7 +1748,10 @@
           type: this.config.yScale ?? "linear",
           ...this.config.rangeY ? {
             autorange: false,
-            range: this.config.yScale === "log" ? [Math.log10(Math.max(1e-6, this.config.rangeY[0])), Math.log10(Math.max(1e-6, this.config.rangeY[1]))] : this.config.rangeY
+            range: this.config.yScale === "log" ? [
+              Math.log10(Math.max(1e-6, this.config.rangeY[0])),
+              Math.log10(Math.max(1e-6, this.config.rangeY[1]))
+            ] : this.config.rangeY
           } : { autorange: true },
           dtick: this.config.yScale === "log" && this.config.yLogBase ? Math.log10(this.config.yLogBase) : void 0,
           gridcolor: majorGrid,
@@ -1392,25 +1759,83 @@
           minor: { showgrid: this.config.grid === "all", gridcolor: minorGrid },
           zeroline: false,
           tickfont: { color: textColor, size: 14 },
-          title: { text: this.config.yAxisTitle + frameLabel, font: { size: 14, color: textColor, family: "monospace" } },
+          title: {
+            text: this.config.yAxisTitle + frameLabel,
+            font: { size: 14, color: textColor, family: "monospace" }
+          },
           showspikes: showY,
           spikemode: "across",
           spikelinecolor: spikeColor,
           spikethickness: -2
         };
+        const polarLayout = isPolar ? {
+          polar: {
+            bgcolor: "rgba(0,0,0,0)",
+            radialaxis: {
+              color: textColor,
+              gridcolor: majorGrid,
+              tickfont: { color: textColor, size: 14, family: "monospace" },
+              title: {
+                text: this.config.yAxisTitle || "r",
+                font: { size: 14, color: textColor, family: "monospace" }
+              }
+            },
+            angularaxis: {
+              color: textColor,
+              gridcolor: majorGrid,
+              tickfont: { color: textColor, size: 14, family: "monospace" },
+              title: {
+                text: this.config.xAxisTitle || this.config.xAxis.col,
+                font: { size: 14, color: textColor, family: "monospace" }
+              }
+            }
+          }
+        } : { xaxis: xAxisObj, yaxis: yAxisObj };
         const layout = {
-          uirevision: `${this.trialId}_${this.config.xAxis}_${Object.keys(this.config.yAxes).join("_")}`,
-          title: this.config.title ? { text: this.config.title, font: { family: "monospace", size: 16, color: isDark ? tw.slate[200] : tw.slate[800], weight: "bold" }, x: 0, xanchor: "left" } : null,
+          uirevision: `${this.trialId}_${this.config.xAxis.col}_${Object.keys(this.config.yAxes).join("_")}_${this.config.plotType}`,
+          title: this.config.title ? {
+            text: this.config.title,
+            font: {
+              family: "monospace",
+              size: 16,
+              color: isDark ? tw.slate[200] : tw.slate[800],
+              weight: "bold"
+            },
+            x: 0,
+            xanchor: "left"
+          } : null,
           paper_bgcolor: "rgba(0,0,0,0)",
           plot_bgcolor: "rgba(0,0,0,0)",
-          margin: { t: this.config.title ? 60 : 30, r: this.config.legendPos === "right" ? 150 : 30, b: this.config.legendPos === "bottom" ? 80 : 50, l: this.config.yAxisTitle ? 80 : 60 },
+          margin: {
+            t: this.config.title ? 60 : 30,
+            r: this.config.legendPos === "right" ? 150 : 30,
+            b: this.config.legendPos === "bottom" ? 80 : 50,
+            l: this.config.yAxisTitle ? 80 : 60
+          },
           hovermode: isHoverDisabled ? false : this.config.hover,
-          hoverlabel: { bgcolor: tooltipBg, bordercolor: tooltipBorder, font: { family: "monospace", size: 12, color: tooltipFont }, align: "left" },
+          hoverlabel: {
+            bgcolor: tooltipBg,
+            bordercolor: tooltipBorder,
+            font: { family: "monospace", size: 12, color: tooltipFont },
+            align: "left"
+          },
           showlegend: this.config.legendPos !== "hidden",
-          legend: this.config.legendPos === "right" ? { orientation: "v", x: 1.02, y: 1, font: { family: "monospace", size: 14, color: textColor }, groupclick: "togglegroup" } : { orientation: "h", y: -0.2, x: 0.5, xanchor: "center", font: { family: "monospace", size: 14, color: textColor }, groupclick: "togglegroup" },
-          xaxis: xAxisObj,
-          yaxis: yAxisObj,
-          annotations: [
+          legend: this.config.legendPos === "right" ? {
+            orientation: "v",
+            x: 1.02,
+            y: 1,
+            font: { family: "monospace", size: 14, color: textColor },
+            groupclick: "togglegroup"
+          } : {
+            orientation: "h",
+            y: -0.2,
+            x: 0.5,
+            xanchor: "center",
+            font: { family: "monospace", size: 14, color: textColor },
+            groupclick: "togglegroup"
+          },
+          ...polarLayout,
+          annotations: isPolar ? [] : [
             ...(this.config.annotations ?? []).map((ann) => ({
               x: ann.x,
               y: ann.y,
@@ -1419,7 +1844,11 @@
               arrowhead: 2,
               ax: 0,
               ay: -40,
-              font: { family: "monospace", size: 12, color: isDark ? tw.slate[50] : tw.slate[900] },
+              font: {
+                family: "monospace",
+                size: 12,
+                color: isDark ? tw.slate[50] : tw.slate[900]
+              },
               bgcolor: isDark ? tw.slate[800] : tw.slate[50],
               bordercolor: tw.cyan[500],
               borderwidth: 1,
@@ -1438,19 +1867,78 @@
                 x = s.x0;
                 y = s.y1 ?? 0;
               }
-              return { x, y, xref, yref, text: `<b>${s.label}</b>`, showarrow: false, xanchor, yanchor, font: { size: 10, color: s.color || tw.cyan[500], family: "monospace" }, bgcolor: isDark ? tw.slate[900] + "B3" : tw.slate[50] + "B3", borderpad: 2 };
+              return {
+                x,
+                y,
+                xref,
+                yref,
+                text: `<b>${s.label}</b>`,
+                showarrow: false,
+                xanchor,
+                yanchor,
+                font: {
+                  size: 10,
+                  color: s.color || tw.cyan[500],
+                  family: "monospace"
+                },
+                bgcolor: isDark ? tw.slate[900] + "B3" : tw.slate[50] + "B3",
+                borderpad: 2
+              };
             })
           ],
-          shapes: (this.config.shapes ?? []).map((s) => {
+          shapes: isPolar ? [] : (this.config.shapes ?? []).map((s) => {
             const shapeColor = s.color || tw.cyan[500];
-            const base = { line: { color: shapeColor, width: 2, dash: s.dash ?? "solid" }, layer: "below" };
-            if (s.type === "vline") return { ...base, type: "line", x0: s.x0, x1: s.x0, y0: 0, y1: 1, yref: "paper" };
-            if (s.type === "hline") return { ...base, type: "line", y0: s.y0, y1: s.y0, x0: 0, x1: 1, xref: "paper" };
-            if (s.type === "rect") return { ...base, type: "rect", x0: s.x0, x1: s.x1, y0: s.y0, y1: s.y1, fillcolor: isDark ? `${shapeColor}1A` : `${shapeColor}26`, line: { ...base.line, width: 1 } };
+            const base = {
+              line: { color: shapeColor, width: 2, dash: s.dash ?? "solid" },
+              layer: "below"
+            };
+            if (s.type === "vline")
+              return {
+                ...base,
+                type: "line",
+                x0: s.x0,
+                x1: s.x0,
+                y0: 0,
+                y1: 1,
+                yref: "paper"
+              };
+            if (s.type === "hline")
+              return {
+                ...base,
+                type: "line",
+                y0: s.y0,
+                y1: s.y0,
+                x0: 0,
+                x1: 1,
+                xref: "paper"
+              };
+            if (s.type === "rect")
+              return {
+                ...base,
+                type: "rect",
+                x0: s.x0,
+                x1: s.x1,
+                y0: s.y0,
+                y1: s.y1,
+                fillcolor: isDark ? `${shapeColor}1A` : `${shapeColor}26`,
+                line: { ...base.line, width: 1 }
+              };
             return base;
           })
         };
-        const config = { responsive: true, displaylogo: false, displayModeBar: true, modeBarButtonsToRemove: ["toImage"], doubleClick: false };
+        const config = {
+          responsive: true,
+          displaylogo: false,
+          displayModeBar: true,
+          modeBarButtonsToRemove: ["toImage"],
+          doubleClick: false
+        };
+        const plotEl = document.getElementById("plot-area");
+        if (plotEl && this._renderedPlotType !== this.config.plotType) {
+          Plotly.purge(plotEl);
+          this._renderedPlotType = this.config.plotType ?? null;
+          return Plotly.newPlot("plot-area", traces, layout, config);
+        }
         return Plotly.react("plot-area", traces, layout, config);
       }
     };
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/main.js b/src/mujoco_mojo/utils/layers/dojo/templates/static/main.js
deleted file mode 100644
index 97116d0f..00000000
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/main.js
+++ /dev/null
@@ -1,295 +0,0 @@
-// Global Helpers
-const formatTimeAgo = (seconds) => {
-  if (!seconds || seconds < 60) return `${seconds || 0}s ago`;
-  const mins = Math.floor(seconds / 60);
-  return mins < 60 ? `${mins}m ago` : `${Math.floor(mins / 60)}h ago`;
-};
-
-// Global Alpine Initialization
-document.addEventListener("alpine:init", () => {
-  Alpine.store("dojo", {
-    isPageReady: false,
-    isFullscreen: false,
-    loadStartTime: Date.now(),
-    isComplete: false,
-    isMuted: localStorage.getItem("mojo_muted") !== "false",
-    isAutoRefresh: localStorage.getItem("mojo_auto") !== "false",
-
-    // streaming state
-    isConnected: false,
-    isSyncing: false,
-    syncProgress: 0,
-    secondsSinceUpdate: 0,
-    lastUpdate: null,
-    source: null,
-
-    // loading messages
-    showPhrase: true,
-    loadingIndex: 0,
-    loadingInterval: null,
-    loadingPhrases: [
-      "Eliminating side fumbling in the kinematic tree...",
-      "Cooling off the physics engine...",
-      "Lubricating spurving bearings with phenylhydrobenzamine...",
-      "Was it (x, y, z, w) or (w, x, y, z)...?",
-      "Synchronizing cardinal grammeters with the warm-start...",
-      "Fromaging the bituminous spandrels for stability...",
-      "Reducing sinusoidal depleneration in the dingle arm...",
-      "Checking the prefabulated amulite for micro-cracks...",
-      "Recalculating Chomondeley's annual grillage coefficient...",
-      "Polishing the hydrocoptic marzelvanes...",
-      "Resolving contact constraints (it's complicated)...",
-      "Nubbing the regurgitative purwell to the wennel-sprocket...",
-      "Ensuring nofer trunnions are within tolerance...",
-      "Consulting the transcendental hopper dadoscope...",
-      "Minimizing side-fumbling in the ambifacient vaneshaft...",
-      "Aligning the lotus-o-delta stator windings...",
-      "Preparing for the inevitable...",
-      "Correcting the Lotus-o-delta offset in the kinematic tree...",
-      "Tightening the roffit bars on the spamshaft...",
-      "Re-aligning the hydrocoptic marzelvanes...",
-      "Calibrating the metapolar pilfrometer...",
-      "Evaluating the diathecial evolute of retrograde temperature...",
-      "De-nubbing the superaminative wennel-sprocket...",
-      "Buffering the anhydrous nagling pins...",
-      "Shimming the kyptonastic boiling tank...",
-      "Analyzing quasi-pietic stresses in the gremlin studs...",
-      "Applying drammock oil to the nivelsheave...",
-      "Synchronizing the barescent skor motion...",
-      "Filtering out reminative tetraiodohexamine...",
-      "Stabilizing the modial interaction of magneto-reluctance...",
-      "Compensating for capacitive directance...",
-      "Scrubbing the manestically placed grouting brushes...",
-      "Zeroing out the transcendental hopper dadoscope...",
-      "Wrangling the inertia tensor...",
-      "Converting Euler angles (and regretting it)...",
-      "Refining the convex hull of the collision geometry...",
-      "Validating the mass-proportional damping coefficients...",
-      "Buffering the unilateral phase detectors...",
-      "Extending the drawn reciprocating dingle arm...",
-      "Optimizing the panendermic semiboloid slots...",
-      "Bleeding air from the non-reversible tremie pipe...",
-      "Adjusting the differential girdlespring tension...",
-    ],
-
-    init() {
-      // 1. Immediate check on load
-      this.checkServerHealth();
-
-      // 2. Periodic heartbeat (every 1 seconds)
-      setInterval(() => {
-        this.checkServerHealth();
-      }, 10000);
-
-      // 3. Start the SSE sync if appropriate
-      this.startGlobalSync();
-    },
-
-    async checkServerHealth() {
-      // Create a timeout so the fetch doesn't hang for 30 seconds
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 2000);
-
-      try {
-        const response = await fetch("/monitor/api/status", {
-          method: "GET",
-          cache: "no-store", // CRITICAL: Stop the browser from lying to us
-          signal: controller.signal,
-        });
-
-        clearTimeout(timeoutId);
-
-        // Explicitly check for 200 OK
-        this.isConnected = response.ok;
-      } catch (err) {
-        // If the server is down, fetch throws a TypeError or AbortError
-        this.isConnected = false;
-
-        // If we were syncing, stop it now
-        if (this.source) {
-          this.stopGlobalSync();
-        }
-      }
-    },
-
-    setPageReady(val, force = false) {
-      if (val) {
-        // If we're forcing it (e.g., job is done), duration is 0.
-        // Otherwise, keep the 2-second technobabble for "immersion."
-        const minDuration = force ? 0 : 2000;
-
-        const elapsed = Date.now() - this.loadStartTime;
-        const remaining = Math.max(0, minDuration - elapsed);
-
-        setTimeout(() => {
-          this.isPageReady = true;
-          this.stopLoadingMessages();
-        }, remaining);
-      } else {
-        this.loadStartTime = Date.now();
-        this.isPageReady = false;
-        this.startLoadingMessages();
-      }
-    },
-
-    startLoadingMessages() {
-      if (this.loadingInterval) return;
-
-      // 1. Initial random seed
-      this.loadingIndex = Math.floor(
-        Math.random() * this.loadingPhrases.length,
-      );
-      this.showPhrase = true;
-
-      this.loadingInterval = setInterval(() => {
-        // 2. Start the exit transition
-        this.showPhrase = false;
-
-        setTimeout(() => {
-          // 3. Pick a new random index that ISN'T the current one
-          let nextIndex;
-          do {
-            nextIndex = Math.floor(Math.random() * this.loadingPhrases.length);
-          } while (nextIndex === this.loadingIndex);
-
-          this.loadingIndex = nextIndex;
-
-          // 4. Trigger the entry transition
-          this.showPhrase = true;
-        }, 300); // 300ms matches the x-transition duration
-      }, 4000);
-    },
-
-    stopLoadingMessages() {
-      clearInterval(this.loadingInterval);
-      this.loadingInterval = null;
-    },
-
-    toggleMute() {
-      this.isMuted = !this.isMuted;
-      localStorage.setItem("mojo_muted", this.isMuted.toString());
-    },
-
-    toggleAuto() {
-      this.isAutoRefresh = !this.isAutoRefresh;
-      localStorage.setItem("mojo_auto", this.isAutoRefresh);
-
-      if (this.isAutoRefresh) {
-        this.startGlobalSync();
-      } else {
-        this.stopGlobalSync();
-      }
-    },
-
-    // global sse management
-    startGlobalSync() {
-      if (this.source || !this.isAutoRefresh || this.isComplete) return;
-
-      this.source = new EventSource("/monitor/api/status/stream");
-
-      this.source.onmessage = (event) => {
-        // 1. SILENT GUARD: Skip empty keep-alive pings from the server
-        if (!event.data || !event.data.trim()) return;
-
-        try {
-          // 2. PROTECTIVE PARSE: Don't let a bad payload kill the app
-          const data = JSON.parse(event.data);
-
-          // 3. LOGICAL DISPATCH
-          if (data.type === "start") this.startSync();
-
-          if (data.type === "progress") this.setSyncProgress(data.value);
-
-          if (data.type === "final") {
-            this.endSync(Date.now(), data.status?.is_complete);
-
-            // Broadcast the update to other components (Mosaic/Monitor)
-            window.dispatchEvent(
-              new CustomEvent("mojo-data-updated", { detail: data.status }),
-            );
-          }
-        } catch (err) {
-          // 4. THE SAFETY NET: Handle non-JSON strings or HTML error pages
-          console.warn(
-            "[Mojo Sync] Received invalid payload. Stream may be idle or server errored.",
-            {
-              raw: event.data,
-              error: err.message,
-            },
-          );
-        }
-      };
-
-      this.source.onerror = (err) => {
-        console.error("[Mojo Sync] Connection lost. Attempting recovery...");
-        this.isSyncing = false;
-        this.stopGlobalSync();
-
-        // Attempt reconnection in 5s
-        setTimeout(() => this.startGlobalSync(), 5000);
-      };
-    },
-
-    stopGlobalSync() {
-      if (this.source) {
-        this.source.close();
-        this.source = null;
-        this.isConnected = false;
-        this.isSyncing = false;
-      }
-    },
-
-    // animation helpers for the 'laser beam'
-    startSync() {
-      this.isSyncing = true;
-      this.syncProgress = 0;
-    },
-
-    setSyncProgress(val) {
-      this.syncProgress = val;
-    },
-
-    endSync(timestamp, isComplete) {
-      this.syncProgress = 100;
-      this.lastUpdate = timestamp;
-      this.secondsSinceUpdate = 0;
-      this.isComplete = isComplete;
-      this.isSyncing = false;
-
-      // job is done and auto refresh should turn itself off
-      if (isComplete) {
-        this.stopGlobalSync();
-      }
-
-      setTimeout(() => {
-        this.syncProgress = 0;
-      }, 700);
-    },
-
-    updateSync(timestamp, isComplete = false) {
-      this.lastUpdate = timestamp;
-      this.secondsSinceUpdate = 0;
-      this.isComplete = isComplete;
-
-      if (isComplete) {
-        this.stopGlobalSync();
-      }
-    },
-  });
-
-  const store = Alpine.store("dojo");
-
-  // Global Timer
-  setInterval(() => {
-    if (store.lastUpdate) {
-      store.secondsSinceUpdate = Math.floor(
-        (Date.now() - store.lastUpdate) / 1000,
-      );
-    }
-  }, 1000);
-
-  if (!store.isPageReady) {
-    store.loadStartTime = Date.now(); // Record the exact start time of the app
-    store.startLoadingMessages();
-  }
-});
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/monitor.js b/src/mujoco_mojo/utils/layers/dojo/templates/static/monitor.js
deleted file mode 100644
index fd46b6ca..00000000
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/monitor.js
+++ /dev/null
@@ -1,298 +0,0 @@
-function monitor() {
-  return {
-    status: {
-      n_done: 0,
-      n_success: 0,
-      n_failed: 0,
-      success_tns: [],
-      failure_tns: [],
-      progress: 0,
-      padding_style: "02d", // fallback
-    },
-    stats: [],
-    hasInitialData: false,
-    hasCelebrated: false,
-
-    async init() {
-      // listen for data updates from the global store
-      window.addEventListener("mojo-data-updated", (e) => {
-        this.handleDataUpdate(e.detail);
-      });
-
-      // 1. Initial bootstrap
-      try {
-        const resp = await fetch("/monitor/api/status");
-        const data = await resp.json();
-
-        if (data && !data.error) {
-          Alpine.store("dojo").updateSync(Date.now(), data.is_complete);
-          this.handleDataUpdate(data);
-        }
-      } catch (e) {
-        console.warn("Monitor bootstrap failed.", e);
-      } finally {
-        // We must call this to restart the SSE connection if the job was restarted!
-        Alpine.store("dojo").startGlobalSync();
-
-        // tell the global store to start the live pulse if needed
-        const shouldForce = this.status.is_complete;
-        Alpine.store("dojo").setPageReady(true, shouldForce);
-      }
-    },
-
-    handleDataUpdate(data) {
-      this.status = data;
-      this.hasInitialData = true;
-      this.refreshStats();
-
-      if (this.status.is_complete) {
-        this.handleCompletion();
-      }
-    },
-
-    refreshStats() {
-      const totalDone = this.status.n_done || 0;
-      const n_trial = this.status.n_trial || 1;
-      const progress = ((totalDone / n_trial) * 100).toFixed(1);
-
-      // update tab title with progress
-      document.title = `${this.status.is_complete ? "✓" : "(" + progress + "%)"} Monitor | MuJoCo Mojo`;
-
-      const successPerc =
-        totalDone > 0
-          ? ((this.status.n_success / totalDone) * 100).toFixed(1)
-          : 0;
-      const failurePerc =
-        totalDone > 0
-          ? ((this.status.n_failed / totalDone) * 100).toFixed(1)
-          : 0;
-
-      const lastSuccess =
-        this.status.success_tns.length > 0
-          ? this.status.success_tns.slice(-1)[0]
-          : "None";
-      const lastFailure =
-        this.status.failure_tns.length > 0
-          ? this.status.failure_tns.slice(-1)[0]
-          : "None";
-
-      this.stats = [
-        {
-          label: "Successes",
-          value: `${this.status.n_success} (${successPerc}%)`,
-          color: "text-emerald-500",
-          subValue: `Last Success: Trial ${lastSuccess}`,
-        },
-        {
-          label: "Failures",
-          value: `${this.status.n_failed} (${failurePerc}%)`,
-          color: "text-rose-500",
-          subValue: `Last Failure: Trial ${lastFailure}`,
-        },
-        {
-          label: "Remaining",
-          value: `${this.status.n_remaining} (${(100 - progress).toFixed(1)}%)`,
-          color: "text-amber-500",
-          subValue: `${this.status.throughput} trials/min (${this.status.avg_duration} per trial)`,
-        },
-        {
-          label: "Time Elapsed",
-          value: this.status.elapsed,
-          color: "text-slate-500",
-          subValue: `Started: ${this.status.start_time}`,
-        },
-        {
-          label: "Total Done",
-          value: `${totalDone}`,
-          color: "text-cyan-500",
-          subValue: `Target: ${n_trial} trials`,
-        },
-        {
-          label: this.status.is_complete ? "Finished" : "Est. Remaining",
-          value: this.status.is_complete
-            ? "00:00:00"
-            : this.status.time_remaining,
-          color: "text-slate-500",
-          subValue: this.status.is_complete
-            ? "Job Complete"
-            : `ETA: ${this.status.end_time}`,
-        },
-      ];
-    },
-
-    handleCompletion() {
-      // Check the local variable instead of sessionStorage
-      if (this.hasCelebrated) return;
-
-      const theme = this.getHolidayTheme();
-      const chime = document.getElementById("chime");
-
-      if (!Alpine.store("dojo").isMuted) {
-        if (theme.audioUrl) {
-          const holidaySound = new Audio(theme.audioUrl);
-          holidaySound.play().catch(() => chime.play().catch(() => {}));
-        } else {
-          chime.play().catch(() => {});
-        }
-      }
-
-      setTimeout(() => {
-        this.fireConfetti(theme);
-      }, 300);
-
-      // Mark as celebrated so it doesn't fire again until the next refresh
-      this.hasCelebrated = true;
-    },
-
-    getHolidayTheme() {
-      const now = new Date();
-      const m = now.getMonth(); // 0-11
-      const d = now.getDate();
-      // const m = 2; // 0-11 // BUG placeholder
-      // const d = 17; // BUG placeholder
-
-      // New Year
-      if ((m === 11 && d === 31) || (m === 0 && d <= 2)) {
-        return {
-          name: "New Year",
-          emojis: ["🎆", "✨", "🥂"],
-          colors: ["#ffcc00", "#ffffff"],
-          audioUrl:
-            "https://actions.google.com/sounds/v1/human_voices/crowd_cheer.ogg", // TODO
-        };
-      }
-      // Pi Day
-      if (m === 2 && d === 14) {
-        return {
-          name: "Pi Day",
-          emojis: ["π", "🥧"],
-          colors: ["#ff9900"],
-          audioUrl:
-            "https://actions.google.com/sounds/v1/science_fiction/sci_fi_pulse.ogg", // TODO
-        };
-      }
-      // St. Patrick's
-      if (m === 2 && d === 17) {
-        return {
-          name: "St. Patrick's Day",
-          emojis: ["🍀", "🌈"],
-          colors: ["#22c55e", "#166534"],
-          audioUrl:
-            "https://actions.google.com/sounds/v1/foley/wind_chime_vibrant.ogg", // TODO
-        };
-      }
-      // May the 4th
-      if (m === 4 && d === 4) {
-        return {
-          name: "May the 4th",
-          emojis: ["⚔️", "🌌", "✨"],
-          colors: ["#FFE81F", "#2dd4bf"],
-          audioUrl:
-            "https://actions.google.com/sounds/v1/science_fiction/laser_burst.ogg", // TODO
-        };
-      }
-      // Halloween
-      if ((m === 9 && d >= 25) || (m === 10 && d === 1)) {
-        return {
-          name: "Halloween",
-          emojis: ["🎃", "👻", "🦇"],
-          colors: ["#ff6600", "#9437ff"],
-          audioUrl:
-            "https://actions.google.com/sounds/v1/horror/ghost_ly_laugh.ogg", // TODO
-        };
-      }
-      // Winter/Snow
-      if (m === 11 || (m === 0 && d <= 15)) {
-        return {
-          name: "Winter Snow",
-          emojis: ["❄️", "⛄", "🌨️"],
-          isSnow: true,
-          audioUrl:
-            "https://actions.google.com/sounds/v1/foley/sleigh_bells_ring.ogg", // TODO
-        };
-      }
-
-      return {
-        name: "Standard Mojo",
-        colors: ["#06b6d4", "#3b82f6", "#22c55e"],
-        // No audioUrl, defaults to chime
-      };
-    },
-
-    fireConfetti(theme = {}) {
-      const themeName = theme.name || "Standard Mojo";
-      const isSpecial = !!theme.emojis;
-      const isSnow = theme.isSnow || false;
-
-      console.log(
-        `%c 🎊 Mojo Celebration: ${themeName} `,
-        "background: #06b6d4; color: #fff; font-weight: bold; padding: 2px 4px; border-radius: 4px;",
-      );
-
-      const duration = 3000;
-      const animationEnd = Date.now() + duration;
-      const colors = theme.colors || ["#06b6d4", "#3b82f6", "#22c55e"];
-
-      // 1. Shapes + Color Fix (Pi will now be Orange, not Black)
-      let shapes = ["circle", "square"];
-      if (theme.emojis) {
-        shapes = theme.emojis.map((emoji) =>
-          confetti.shapeFromText({
-            text: emoji,
-            scalar: 5,
-            color: colors[0], // Forces the symbol to use the theme color
-          }),
-        );
-      }
-
-      // 2. Physics Profiles
-      const defaults = {
-        zIndex: 1000,
-        shapes: shapes,
-        colors: colors,
-        ticks: isSpecial ? 200 : 100,
-        scalar: isSpecial ? 5 : 1,
-        // Lower gravity (0.4) makes the rotation much slower and floatier
-        gravity: isSnow ? 0.4 : isSpecial ? 0.4 : 1.2,
-      };
-
-      const interval = setInterval(
-        () => {
-          const timeLeft = animationEnd - Date.now();
-          if (timeLeft <= 0) return clearInterval(interval);
-
-          if (isSnow) {
-            confetti({
-              ...defaults,
-              particleCount: 1,
-              startVelocity: 0,
-              drift: (Math.random() - 0.5) * 1.5,
-              origin: { x: Math.random(), y: -0.2 },
-            });
-          } else {
-            // 3. BOOSTED DENSITY & CENTER COVERAGE
-            // We increased standard from 50 to 150 particles per tick
-            const countMultiplier = isSpecial ? 40 : 150;
-            const particleCount = countMultiplier * (timeLeft / duration);
-
-            // Triple-pop: Fire 3 random bursts every interval to saturate the screen
-            for (let i = 0; i < 3; i++) {
-              confetti({
-                ...defaults,
-                particleCount: Math.ceil(particleCount / 3),
-                spread: isSpecial ? 90 : 360,
-                // Slower velocity (15) for special items makes them easier to read
-                startVelocity: isSpecial ? 15 : 45,
-                origin: {
-                  x: Math.random(), // FILL THE CENTER: Completely random horizontal
-                  y: Math.random() - 0.2, // Random vertical
-                },
-              });
-            }
-          }
-        },
-        isSpecial ? 400 : 250,
-      );
-    },
-  };
-}
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/mosaic.js b/src/mujoco_mojo/utils/layers/dojo/templates/static/mosaic.js
deleted file mode 100644
index 2f90fad2..00000000
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/mosaic.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// static/mosaic.js
-function mosaic() {
-  return {
-    trials: [],
-    loading: true,
-
-    async init() {
-      // 1. Bootstrap the global state (The Pulse Check)
-      try {
-        const statusResp = await fetch("/monitor/api/status");
-        const statusData = await statusResp.json();
-        if (statusData && !statusData.error) {
-          Alpine.store("dojo").updateSync(Date.now(), statusData.is_complete);
-        }
-      } catch (e) {
-        console.warn("Global bootstrap failed for Mosaic.", e);
-      }
-
-      // 2. Load the actual tiles
-      await this.refreshTiles();
-
-      // 3. Start the live pulse for the footer and auto-refresh
-      Alpine.store("dojo").startGlobalSync();
-
-      // 4. Listen for new data to refresh the grid live
-      window.addEventListener("mojo-data-updated", () => {
-        this.refreshTiles(false); // refresh without showing the big loading blur
-      });
-
-      this.loading = false;
-      Alpine.store("dojo").setPageReady(true);
-    },
-
-    async refreshTiles(showLoading = true) {
-      if (showLoading) this.loading = true;
-      try {
-        const resp = await fetch("/mosaic/api/trials");
-        const data = await resp.json();
-        this.trials = data.trials || [];
-      } catch (e) {
-        console.error("Mosaic refresh failed:", e);
-      } finally {
-        if (showLoading) this.loading = false;
-      }
-    },
-  };
-}
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/trial-viewer.js b/src/mujoco_mojo/utils/layers/dojo/templates/static/trial-viewer.js
deleted file mode 100644
index 457edd1d..00000000
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/trial-viewer.js
+++ /dev/null
@@ -1,2032 +0,0 @@
-/**
- * TAILWIND OFFLINE PALETTE
- * Formalized hex values extracted from Tailwind CSS defaults.
- */
-const tw = {
-  slate: {
-    50: "#f8fafc",
-    100: "#f1f5f9",
-    200: "#e2e8f0",
-    300: "#cbd5e1",
-    400: "#94a3b8",
-    500: "#64748b",
-    600: "#475569",
-    700: "#334155",
-    800: "#1e293b",
-    900: "#0f172a",
-    950: "#020617",
-  },
-  cyan: {
-    400: "#22d3ee",
-    500: "#06b6d4",
-    600: "#0891b2",
-  },
-  emerald: { 500: "#10b981" },
-  blue: { 500: "#3b82f6" },
-  violet: { 500: "#8b5cf6" },
-  amber: { 500: "#f59e0b" },
-  rose: { 500: "#ef4444" },
-};
-
-const DEFAULT_CONFIG = {
-  xAxis: "time",
-  yAxes: {}, // Key: signal name, Value: { label, color, width, etc. }
-  refFrame: null,
-  grid: "all",
-  linemode: "lines", // Renamed from markerMode for clarity
-  interp: "linear", // line interpolation (linear, spline, etc)
-  hover: "closest", // "x unified", "y unified", "closest", "x", "y", "none"
-  title: "",
-  xAxisTitle: "",
-  yAxisTitle: "",
-  showSpike: true,
-  legendPos: "bottom", // "bottom", "right", "hidden"
-  rangeX: null,
-  rangeY: null,
-  xScale: "linear",
-  yScale: "linear",
-  vsEnabled: false,
-  vsRange: [0, 10],
-  annotations: [], // Stores { x, y, text }
-  shapes: [], // Stores { type, x0, x1, y0, y1, label }
-};
-
-/**
- * trialViewer - Alpine.js Component
- * Handles telemetry data retrieval, Plotly rendering, and JSON configuration state.
- */
-function trialViewer(trialId, externalUrl) {
-  return {
-    // --- BASE STATE ---
-    trialId: trialId,
-    externalUrl: externalUrl,
-    warpId: null,
-    paddingLen: 2,
-    loading: true,
-    isMac: /Mac|iPhone|iPod|iPad/.test(navigator.platform),
-    data: null,
-    errorState: null,
-
-    // --- UI / MENU STATES ---
-    theme: "dark",
-    xMenuOpen: false,
-    xSearch: "",
-    yMenuOpen: false,
-    ySearch: "",
-    refFrameMenuOpen: false,
-    settingsOpen: false,
-    downloadOpen: false,
-
-    activeFrame: null,
-    dragCounter: 0, // tracks if a file is being hovered over the page
-    editorOpen: false, // Controls the visibility of the JSON editor drawer
-    columns: [],
-    rotateableVectors: [],
-    showToast: false,
-    toastMessage: "",
-    toastType: "success",
-    discoveryId: 0,
-    plotColors: [
-      tw.cyan[500],
-      tw.emerald[500],
-      tw.blue[500],
-      tw.violet[500],
-      tw.amber[500],
-      tw.rose[500],
-    ],
-
-    // --- SINGLE SOURCE OF TRUTH: PLOT CONFIGURATION ---
-    // This object is the master state. Changes here trigger re-renders.
-    config: JSON.parse(JSON.stringify(DEFAULT_CONFIG)), // deep clone the default config
-
-    // --- JSON EDITOR STATE ---
-    configRaw: "", // Pretty-printed string for the <textarea>
-    isValidJson: true, // Tracks if the user's manual JSON input is valid
-    isValidConfig: true, // Tracks logical correctness
-    configErrors: [], // List of specific error strings
-    isEditingRaw: false, // Guard to prevent auto-format loop
-
-    // --- MATCHUP STATE ---
-    vsDatasets: {}, // map of trial_id -> data object
-    allTrials: [], // full list from /mosaic/api/trials
-    vsMenuOpen: false,
-    vsLoading: false,
-    vsDraft: {
-      enabled: false,
-      range: [0, 0],
-    },
-
-    // --- HISTORY STATE ---
-    historyStack: [],
-    historyIndex: -1,
-    isUndoing: false, // Flag to prevent watcher from capturing history during undo/redo
-    maxHistory: 50,
-
-    // --- ANNOTATIONS ---
-    annotationsOpen: false,
-    annDraft: null, // Holds { x, y, text } while typing
-    annEditIndex: null,
-
-    // --- SHAPES ---
-    shapesOpen: false,
-    placementMode: null, // 'vline', 'hline', 'rect'
-    rectStart: null, // To store the first click of a rectangle
-    shapeDraft: null,
-    shapeEditIndex: null,
-
-    pushHistory() {
-      if (this.isUndoing) return;
-
-      const snapshot = JSON.stringify(this.config);
-
-      // If the state is identical to the current head, don't push
-      if (this.historyStack[this.historyIndex] === snapshot) return;
-
-      // Wipe any "redo" future if we make a new change
-      this.historyStack = this.historyStack.slice(0, this.historyIndex + 1);
-
-      this.historyStack.push(snapshot);
-      if (this.historyStack.length > this.maxHistory) this.historyStack.shift();
-
-      this.historyIndex = this.historyStack.length - 1;
-      this.persistHistory();
-    },
-
-    undo() {
-      if (this.historyIndex > 0) {
-        this.isUndoing = true;
-        this.historyIndex--;
-        this.config = JSON.parse(this.historyStack[this.historyIndex]);
-        this.persistHistory();
-        this.$nextTick(() => {
-          this.isUndoing = false;
-        });
-        this.notify("Undo", "info");
-      }
-    },
-
-    redo() {
-      if (this.historyIndex < this.historyStack.length - 1) {
-        this.isUndoing = true;
-        this.historyIndex++;
-        this.config = JSON.parse(this.historyStack[this.historyIndex]);
-        this.persistHistory();
-        this.$nextTick(() => {
-          this.isUndoing = false;
-        });
-        this.notify("Redo", "info");
-      }
-    },
-
-    persistHistory() {
-      const bundle = {
-        stack: this.historyStack,
-        index: this.historyIndex,
-      };
-      localStorage.setItem("mojo_mosaic_history", JSON.stringify(bundle));
-    },
-
-    shiftY(index, direction, isWarp = false) {
-      const keys = Object.keys(this.config.yAxes);
-      if (keys.length < 2) return;
-
-      let newKeys = [...keys];
-      const movedKey = newKeys.splice(index, 1)[0];
-
-      if (isWarp) {
-        direction === -1 ? newKeys.unshift(movedKey) : newKeys.push(movedKey);
-      } else {
-        newKeys.splice(index + direction, 0, movedKey);
-      }
-
-      // Reconstruct the object to enforce the new insertion order
-      const newYAxes = {};
-      newKeys.forEach((k) => {
-        newYAxes[k] = this.config.yAxes[k];
-      });
-      this.config.yAxes = newYAxes;
-
-      this.saveAndRender();
-    },
-
-    async fetchTrialData(id, requiredCols = []) {
-      console.debug(`loading ${id} (cols: ${requiredCols.join(",") || "all"})`);
-
-      // Construct query param for columns
-      let url = `/mosaic/${id}/data`;
-      const colParams = new URLSearchParams();
-
-      if (requiredCols.length > 0) {
-        colParams.append("cols", requiredCols.join(","));
-      }
-
-      if (this.config.refFrame) {
-        colParams.append("rotate_by", this.config.refFrame);
-      }
-
-      const queryStr = colParams.toString();
-      if (queryStr) url += `?${queryStr}`;
-
-      const resp = await fetch(url);
-      if (!resp.ok) throw new Error(`Trial ${id} failed`);
-
-      return await resp.json();
-    },
-
-    /**
-     * Helper to fetch in small chunks to keep the pipe clear
-     */
-    async trickleFetch(id, columnList, label, isVsDataset, loopId) {
-      const CHUNK_SIZE = 10;
-      for (let i = 0; i < columnList.length; i += CHUNK_SIZE) {
-        // --- THE SAFETY CHECK ---
-        // If a new discovery task started while we were waiting, exit now.
-        if (loopId !== this.discoveryId) return;
-
-        await new Promise((r) => setTimeout(r, 50));
-        const chunk = columnList.slice(i, i + CHUNK_SIZE);
-
-        try {
-          const resp = await this.fetchTrialData(id, chunk);
-
-          if (isVsDataset) {
-            this.vsDatasets[id] = {
-              ...(this.vsDatasets[id] || {}),
-              ...resp.data,
-            };
-            this.vsDatasets = { ...this.vsDatasets };
-          } else {
-            this.data = { ...(this.data || {}), ...resp.data };
-          }
-
-          if (Object.keys(this.config.yAxes).some((y) => chunk.includes(y))) {
-            this.renderPlot();
-          }
-
-          console.debug(
-            `Dojo Hydration [${label}]: ${i + chunk.length}/${columnList.length}`,
-          );
-        } catch (e) {
-          console.warn(`Hydration failed for ${id}`, e);
-        }
-      }
-    },
-
-    /**
-     * Loads data as a background process to fill the cache
-     */
-    async startBackgroundDiscovery() {
-      // Create a unique ID for this specific "worker" run
-      const currentId = ++this.discoveryId;
-
-      // 1. HORIZONTAL: Current Trial
-      const pendingCols = this.columns.filter(
-        (c) => !this.data.hasOwnProperty(c),
-      );
-      if (pendingCols.length > 0) {
-        await this.trickleFetch(
-          this.trialId,
-          pendingCols,
-          "Current",
-          false,
-          currentId,
-        );
-      }
-
-      // 2. VERTICAL: vsDraft Range
-      if (currentId !== this.discoveryId) return; // Exit if superseded
-
-      const start = Math.min(this.vsDraft.range[0], this.vsDraft.range[1]);
-      const end = Math.max(this.vsDraft.range[0], this.vsDraft.range[1]);
-      const activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
-
-      const draftIds = this.allTrials.filter((id) => {
-        const n = parseInt(id.split("_").pop());
-        return n >= start && n <= end && id !== this.trialId;
-      });
-
-      for (const id of draftIds) {
-        // Check again before starting a new fetch
-        if (currentId !== this.discoveryId) return;
-
-        const existing = this.vsDatasets[id];
-        const needsFetch =
-          !existing || activeCols.some((c) => !existing.hasOwnProperty(c));
-
-        if (needsFetch) {
-          await this.trickleFetch(
-            id,
-            activeCols,
-            `Draft ${id}`,
-            true,
-            currentId,
-          );
-        }
-      }
-    },
-
-    setPlacementMode(type) {
-      this.placementMode = type;
-      this.rectStart = null;
-      this.shapeDraft = null; // Clear any existing draft if starting a new placement
-
-      const label =
-        type === "vline"
-          ? "Vertical Line"
-          : type === "hline"
-            ? "Horizontal Line"
-            : "Area Rectangle";
-
-      this.notify(`Mode: ${label}. Click plot to place.`, "info");
-    },
-
-    deleteShape(index) {
-      this.config.shapes.splice(index, 1);
-      this.saveAndRender();
-    },
-
-    /**
-     * Handle Shape Creation inside plotly_click listener
-     */
-    handlePlotClickForShapes(pt) {
-      if (!this.placementMode) return false;
-      const defaultColor = tw.cyan[500];
-
-      let newShape = null;
-      if (this.placementMode === "vline") {
-        newShape = { type: "vline", x0: pt.x, color: defaultColor, label: "" };
-      } else if (this.placementMode === "hline") {
-        newShape = { type: "hline", y0: pt.y, color: defaultColor, label: "" };
-      } else if (this.placementMode === "rect") {
-        if (!this.rectStart) {
-          this.rectStart = { x: pt.x, y: pt.y };
-          return true; // Wait for second click
-        }
-        newShape = {
-          type: "rect",
-          x0: this.rectStart.x,
-          x1: pt.x,
-          y0: this.rectStart.y,
-          y1: pt.y,
-          color: defaultColor,
-          label: "",
-        };
-        this.rectStart = null;
-      }
-
-      if (newShape) {
-        if (!this.config.shapes) this.config.shapes = [];
-        this.config.shapes.push(newShape); // Push directly to list
-        this.placementMode = null; // Close placement mode
-        this.saveAndRender(); // Update plot immediately
-      }
-      return true;
-    },
-
-    saveShape() {
-      if (!this.config.shapes) this.config.shapes = [];
-      if (this.shapeEditIndex !== null) {
-        this.config.shapes[this.shapeEditIndex] = { ...this.shapeDraft };
-      } else {
-        this.config.shapes.push({ ...this.shapeDraft });
-      }
-      this.shapeDraft = null;
-      this.shapeEditIndex = null;
-      this.saveAndRender();
-    },
-
-    startShapeEdit(index) {
-      this.shapeEditIndex = index;
-      this.shapeDraft = { ...this.config.shapes[index] };
-      this.shapesOpen = true;
-    },
-
-    cancelShapeDraft() {
-      this.shapeDraft = null;
-      this.shapeEditIndex = null;
-      // If they were in the middle of a rectangle, reset that too
-      this.rectStart = null;
-    },
-
-    saveAnnotation() {
-      if (!this.annDraft || !this.annDraft.text.trim()) return;
-
-      if (this.annEditIndex !== null) {
-        // Update existing
-        this.config.annotations[this.annEditIndex] = { ...this.annDraft };
-      } else {
-        // Create new
-        if (!this.config.annotations) this.config.annotations = [];
-        this.config.annotations.push({ ...this.annDraft });
-      }
-
-      this.cancelAnnDraft();
-      this.saveAndRender();
-    },
-
-    startAnnEdit(index) {
-      this.annEditIndex = index;
-      this.annDraft = { ...this.config.annotations[index] };
-      this.$nextTick(() => this.$refs.annInput?.focus());
-    },
-
-    cancelAnnDraft() {
-      this.annDraft = null;
-      this.annEditIndex = null;
-    },
-
-    /**
-     * Pokes the plot to center on the note's timestamp
-     */
-    jumpToAnnotation(ann) {
-      const el = document.getElementById("plot-area");
-      if (!el || !this.data) return;
-
-      // 1. CALCULATE X (TIME) WINDOW
-      const xValues = this.data[this.config.xAxis] || [];
-      const xMin = xValues[0] || 0;
-      const xMax = xValues[xValues.length - 1] || 100;
-
-      // We'll show a 10% slice of the total trial duration
-      const xSpan = (xMax - xMin) * 0.1;
-      let newRangeX = [ann.x - xSpan / 2, ann.x + xSpan / 2];
-
-      // Clamp X so we don't zoom past the start/end of the data
-      if (newRangeX[0] < xMin) {
-        newRangeX[1] += xMin - newRangeX[0];
-        newRangeX[0] = xMin;
-      }
-      if (newRangeX[1] > xMax) {
-        newRangeX[0] -= newRangeX[1] - xMax;
-        newRangeX[1] = xMax;
-      }
-
-      // 2. CALCULATE Y (VALUE) WINDOW
-      // We use the full padded range of your active signals to find a 'reasonable' scale
-      const fullY = this.calculatePaddedRange(
-        Object.keys(this.config.yAxes),
-        false,
-      );
-      const yTotalHeight = Math.abs(fullY[1] - fullY[0]);
-
-      // We'll show a 20% vertical slice centered on the point
-      const ySpan = yTotalHeight * 0.2;
-      const newRangeY = [ann.y - ySpan / 2, ann.y + ySpan / 2];
-
-      // 3. APPLY TO STATE
-      this.config.rangeX = newRangeX;
-      this.config.rangeY = newRangeY;
-
-      // 4. COMMAND PLOTLY
-      // We use relayout here because it's an instant camera move.
-      Plotly.relayout(el, {
-        "xaxis.range": newRangeX,
-        "yaxis.range": newRangeY,
-        "xaxis.autorange": false,
-        "yaxis.autorange": false,
-      });
-
-      this.saveAndRender();
-    },
-
-    /**
-     * Remove an annotation by index
-     */
-    deleteAnnotation(index) {
-      this.config.annotations.splice(index, 1);
-      this.saveAndRender();
-    },
-
-    /**
-     * Edit existing text
-     */
-    editAnnotation(index) {
-      const ann = this.config.annotations[index];
-      const newText = prompt("Update Annotation:", ann.text);
-
-      if (newText !== null && newText.trim() !== "") {
-        this.config.annotations[index].text = newText;
-        this.saveAndRender();
-      }
-    },
-
-    // Add this near your other getters like highlightedJson
-    get selectableYColumns() {
-      if (!this.columns) return [];
-      if (!this.config.refFrame) return this.columns;
-
-      return this.columns.filter((col) => {
-        const parts = col.split(":");
-        const suffix = parts.pop(); // e.g., 'z' or 'mag'
-        const family = parts.join(":"); // e.g., 'Bodies/box1/xpos'
-
-        // Only allow x, y, z components for rotation mode
-        const isVectorComponent = ["x", "y", "z"].includes(suffix);
-        return isVectorComponent && this.rotateableVectors.includes(family);
-      });
-    },
-
-    get availableQuats() {
-      // If the manifest hasn't loaded yet, return empty
-      if (!this.columns || !Array.isArray(this.columns)) return [];
-      return this.columns
-        .filter((c) => c.endsWith(":w"))
-        .map((c) => c.replace(":w", ""));
-    },
-
-    async init() {
-      // 1. UI PRIMING
-      // Detect theme and set up the Warp ID from the URL string
-      this.theme = document.documentElement.classList.contains("dark")
-        ? "dark"
-        : "light";
-      const currentNum = parseInt(this.trialId.split("_").pop());
-      this.warpId = isNaN(currentNum) ? null : currentNum;
-
-      // 2. DOM & STATE OBSERVERS
-      // Watch for system theme changes (e.g., toggling dark mode via UI)
-      const observer = new MutationObserver((mutations) => {
-        if (mutations.some((m) => m.attributeName === "class")) {
-          this.theme = document.documentElement.classList.contains("dark")
-            ? "dark"
-            : "light";
-          if (this.data && Object.keys(this.config.yAxes).length > 0)
-            this.renderPlot();
-        }
-      });
-      observer.observe(document.documentElement, { attributes: true });
-
-      // 3. FETCH EXTERNAL STATUS (Padding & Sync)
-      try {
-        const statusResp = await fetch("/monitor/api/status");
-        const statusData = await statusResp.json();
-        if (statusData && !statusData.error) {
-          Alpine.store("dojo").updateSync(Date.now(), statusData.is_complete);
-          const match = statusData.padding_style.match(/\d+/);
-          this.paddingLen = match ? parseInt(match[0]) : 2;
-        }
-      } catch (e) {
-        console.warn("Dojo offline", e);
-      }
-
-      // 4. THE MAIN DATA LOAD
-      try {
-        // Load the main data the user is requesting
-        const initialCols = [
-          this.config.xAxis,
-          ...Object.keys(this.config.yAxes),
-        ];
-        const response = await this.fetchTrialData(this.trialId, initialCols);
-
-        this.columns = response.columns.all.sort();
-        this.rotateableVectors = response.columns.rotateable_vectors;
-
-        this.data = response.data;
-
-        // 5. CONFIG HYDRATION
-        const params = new URLSearchParams(window.location.search);
-        const shared = params.get("v");
-        if (shared) {
-          this.hydrateFromUrl(shared);
-          // CAPTURE SHARED STATE INTO DRAFT UI
-          this.vsDraft.enabled = this.config.vsEnabled;
-          this.vsDraft.range = [...this.config.vsRange];
-
-          // FORCE THE "REAL" PLOT STATE TO FALSE (Requires "Apply" click)
-          // We do this so the plot doesn't fetch comparisons until requested
-          this.config.vsEnabled = false;
-        } else {
-          this.loadConfig();
-          this.vsDraft.enabled = this.config.vsEnabled;
-          this.vsDraft.range = [...this.config.vsRange];
-        }
-
-        // Capture the very first state after hydration
-        this.$nextTick(() => {
-          this.pushHistory();
-        });
-
-        // 6. INITIAL PLOT RENDER & EVENT ATTACHMENT
-        this.$nextTick(async () => {
-          await this.renderPlot();
-          const plotEl = document.getElementById("plot-area");
-
-          // Attach the zoom/pan listener to capture manual ranges
-          plotEl.on("plotly_relayout", (event) => {
-            // Handle Reset (Double-click)
-            if (event["xaxis.autorange"] || event["yaxis.autorange"]) {
-              this.config.rangeX = null;
-              this.config.rangeY = null;
-
-              this.renderPlot();
-              return;
-            }
-            // Handle Manual Zoom/Pan
-            if (event["xaxis.range[0]"] !== undefined) {
-              this.config.rangeX = [
-                event["xaxis.range[0]"],
-                event["xaxis.range[1]"],
-              ];
-            }
-            if (event["yaxis.range[0]"] !== undefined) {
-              this.config.rangeY = [
-                event["yaxis.range[0]"],
-                event["yaxis.range[1]"],
-              ];
-            }
-          });
-
-          // annotations listener
-          plotEl.addEventListener("click", (e) => {
-            // 1. Target check: 'nsewdrag' is the class Plotly uses for the grid area
-            const isPlotValue =
-              e.target.classList.contains("nsewdrag") ||
-              e.target.classList.contains("drag");
-
-            if (!isPlotValue) return;
-
-            // 2. Coordinate Conversion
-            const rect = plotEl.getBoundingClientRect();
-            const fullLayout = plotEl._fullLayout;
-
-            // Convert pixels to data coordinates using Plotly's math engine
-            const xVal = fullLayout.xaxis.p2l(
-              e.clientX - rect.left - fullLayout.margin.l,
-            );
-            const yVal = fullLayout.yaxis.p2l(
-              e.clientY - rect.top - fullLayout.margin.t,
-            );
-            const pt = { x: xVal, y: yVal };
-
-            // 3. PRIORITY 1: Shapes (Geometric primitives)
-            if (this.placementMode) {
-              this.handlePlotClickForShapes(pt);
-              return;
-            }
-
-            // 4. PRIORITY 2: Annotations (Text Notes)
-            setTimeout(() => {
-              this.annDraft = {
-                x: pt.x,
-                y: pt.y,
-                text: "",
-              };
-              this.annEditIndex = null;
-              this.annotationsOpen = true;
-
-              this.$nextTick(() => {
-                const input = document.querySelector('[x-ref="annInput"]');
-                if (input) input.focus();
-              });
-            }, 0);
-          });
-
-          // Handle initial resize for hidden containers
-          setTimeout(() => {
-            if (plotEl?.offsetParent !== null) Plotly.Plots.resize(plotEl);
-          }, 100);
-        });
-      } catch (e) {
-        // Catch 404s or malformed JSON from fetchTrialData
-        this.errorState = e.message.includes("not found")
-          ? "not_found"
-          : "empty";
-        this.notify(e.message, "error");
-      } finally {
-        this.loading = false;
-        Alpine.store("dojo").startGlobalSync();
-        Alpine.store("dojo").setPageReady(true);
-      }
-
-      // 7. GLOBAL KEYBOARD SHORTCUTS
-      window.addEventListener("keydown", (e) => {
-        if (e.repeat) return;
-        if (
-          e.key === "/" &&
-          !["INPUT", "TEXTAREA"].includes(e.target.tagName)
-        ) {
-          e.preventDefault();
-          document.querySelector('input[type="number"]')?.focus();
-        }
-        if (e.key === "Escape") {
-          this.yMenuOpen = this.settingsOpen = this.editorOpen = false;
-          if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) e.target.blur();
-        }
-        if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return;
-        if (e.key === "ArrowLeft") document.getElementById("nav-prev")?.click();
-        if (e.key === "ArrowRight")
-          document.getElementById("nav-next")?.click();
-
-        const isZ = e.key.toLowerCase() === "z";
-        const isY = e.key.toLowerCase() === "y";
-        const cmdOrCtrl = e.metaKey || e.ctrlKey;
-
-        if (cmdOrCtrl && isZ) {
-          e.preventDefault();
-          if (e.shiftKey) this.redo();
-          else this.undo();
-        }
-        if (cmdOrCtrl && isY) {
-          e.preventDefault();
-          this.redo();
-        }
-      });
-
-      // FETCH TRIAL MANIFEST (For the slider/dropdown)
-      // Fetch the manifest so we know which IDs exist in the fleet
-      const resp = await fetch("/mosaic/api/trials");
-      const data = await resp.json();
-      this.allTrials = data.trials || [];
-
-      if (this.allTrials.length) {
-        const ids = this.allTrials
-          .map((id) => parseInt(id.split("_").pop()))
-          .filter((n) => !isNaN(n));
-        const minFleet = Math.min(...ids);
-        const maxFleet = Math.max(...ids);
-
-        // If the config is brand new [0,0], initialize it to the full fleet
-        if (this.config.vsRange[0] === 0 && this.config.vsRange[1] === 0) {
-          this.config.vsRange = [minFleet, maxFleet];
-          this.vsDraft.range = [minFleet, maxFleet];
-        }
-      }
-
-      // This watches the slider/draft range and prepares data before "Apply" is clicked.
-      this.$watch("vsDraft.range", () => {
-        // Debounce: Wait 500ms after the user stops sliding
-        if (this.discoveryTimeout) clearTimeout(this.discoveryTimeout);
-
-        this.discoveryTimeout = setTimeout(() => {
-          // Only pre-fetch if comparisons are actually enabled in the UI
-          if (this.vsDraft.enabled) {
-            console.debug(
-              "Predictive Sync: User adjusted range, starting hydration...",
-            );
-            this.startBackgroundDiscovery();
-          }
-        }, 500);
-      });
-
-      this.$watch("config.refFrame", async (newValue, oldValue) => {
-        // Because we are watching a string (a primitive), newValue and oldValue
-        // will actually be different!
-        console.debug(
-          `[Mojo] Frame Change: ${oldValue || "world"} -> ${newValue || "world"}`,
-        );
-
-        this.discoveryId++; // Kill active fetches
-        this.data = {};
-        this.vsDatasets = {};
-
-        // Fetch immediate traces
-        const initialCols = [
-          this.config.xAxis,
-          ...Object.keys(this.config.yAxes),
-        ];
-        const response = await this.fetchTrialData(this.trialId, initialCols);
-
-        this.columns = response.columns.all.sort();
-        this.rotateableVectors = response.columns.rotateable_vectors;
-        this.data = response.data;
-
-        // Trigger full background refresh in the new frame
-        this.startBackgroundDiscovery();
-
-        if (this.config.vsEnabled) {
-          await this.syncVsRange();
-        }
-
-        // Call your standard save/render
-        this.saveAndRender();
-      });
-
-      // Start the initial background load for the current trial + current draft
-      this.startBackgroundDiscovery();
-
-      this.configRaw = JSON.stringify(this.config, null, 4);
-
-      // Watch the master config: Any change here triggers a save and a redraw
-      this.$watch("config", async (value, oldValue) => {
-        if (!this.isEditingRaw) {
-          this.configRaw = JSON.stringify(value, null, 4);
-        }
-
-        // check if we need to fetch that data for the comparison trials.
-        if (
-          this.config.vsEnabled &&
-          oldValue?.vsEnabled && // Only auto-sync if it was already on
-          (value.xAxis !== oldValue?.xAxis ||
-            Object.keys(value.yAxes).length !==
-              Object.keys(oldValue?.yAxes || {}).length)
-        ) {
-          await this.syncVsRange();
-        }
-
-        this.pushHistory();
-        this.saveAndRender();
-      });
-    },
-
-    async syncVsRange() {
-      // 1. Force refresh manifest
-      try {
-        const resp = await fetch("/mosaic/api/trials");
-        const data = await resp.json();
-        this.allTrials = data.trials || [];
-      } catch (e) {
-        console.warn("Manifest sync failed", e);
-      }
-
-      if (!this.vsDraft.enabled) {
-        this.config.vsEnabled = false;
-        this.vsDatasets = {};
-        return;
-      }
-
-      // START LOADING
-      this.vsLoading = true;
-
-      try {
-        const start = Math.min(this.vsDraft.range[0], this.vsDraft.range[1]);
-        const end = Math.max(this.vsDraft.range[0], this.vsDraft.range[1]);
-        let activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
-
-        if (this.config.refFrame) {
-          const families = new Set();
-          Object.keys(this.config.yAxes).forEach((col) => {
-            if (col.includes(":")) {
-              families.add(col.substring(0, col.lastIndexOf(":")));
-            }
-          });
-
-          families.forEach((fam) => {
-            activeCols.push(`${fam}:x`, `${fam}:y`, `${fam}:z`);
-          });
-          // Also need the quat itself if the backend needs it for calculation
-          activeCols.push(
-            `${this.config.refFrame}:w`,
-            `${this.config.refFrame}:x`,
-            `${this.config.refFrame}:y`,
-            `${this.config.refFrame}:z`,
-          );
-        }
-        activeCols = [...new Set(activeCols)];
-
-        const currentNum = parseInt(this.trialId.split("_").pop());
-
-        const targetIds = this.allTrials.filter((id) => {
-          const n = parseInt(id.split("_").pop());
-          return n >= start && n <= end && n !== currentNum;
-        });
-
-        // Fetch missing data
-        await Promise.all(
-          targetIds.map(async (id) => {
-            const existing = this.vsDatasets[id];
-            const needsFetch =
-              !existing ||
-              activeCols.some((col) => !existing.hasOwnProperty(col)) ||
-              this.config.refFrame !== null; // Always fetch if we are in a non-world frame
-
-            if (needsFetch) {
-              const response = await this.fetchTrialData(id, activeCols);
-              this.vsDatasets[id] = {
-                ...(this.vsDatasets[id] || {}),
-                ...response.data,
-              };
-            }
-          }),
-        );
-
-        // 3. THE COMMIT
-        // Now that data is in memory, update the master config.
-        // This triggers the watcher, which calls saveAndRender() exactly once.
-        this.vsDatasets = { ...this.vsDatasets };
-        this.config.vsRange = [start, end];
-        this.config.vsEnabled = true;
-      } finally {
-        this.vsLoading = false;
-        // renderPlot is called automatically by the watcher on this.config
-      }
-    },
-
-    /**
-     * Specifically handles the toggle switch
-     */
-    handleVsToggle() {
-      // If user turns it OFF, we kill the lines immediately without an 'Apply' click
-      if (!this.vsDraft.enabled) {
-        this.config.vsEnabled = false;
-        this.renderPlot();
-      }
-      // If they turn it ON, we do nothing. They must click 'Apply' to see changes.
-    },
-
-    /**
-     * SMART SORT: Pins 'time' to the top, then sorts alphabetically.
-     */
-    smartSort(list) {
-      return list.sort((a, b) => {
-        const aIsTime = a.toLowerCase() === "time";
-        const bIsTime = b.toLowerCase() === "time";
-        if (aIsTime && !bIsTime) return -1;
-        if (!aIsTime && bIsTime) return 1;
-        return a.localeCompare(b, undefined, { sensitivity: "base" });
-      });
-    },
-
-    /**
-     * REFINED GENERIC LOGIC
-     */
-    getFilteredCols(field) {
-      // Safety: If columns haven't loaded yet, return empty array immediately
-      if (!this.columns || !Array.isArray(this.columns)) return [];
-
-      const base = field === "x" ? this.columns : this.selectableYColumns;
-      const search = this[field + "Search"];
-
-      if (!search) return this.smartSort([...base]);
-      try {
-        let pattern = search.replace(/\*/g, ".*");
-
-        // The "Fuzzy Bridge":
-        // This ensures that "xpos/" or "xpos" both match "xpos:x"
-        // It makes the trailing slash optional when followed by a suffix
-        pattern = pattern.replace(/\/?:/g, ".*:");
-
-        // If the user manually typed a trailing slash but it's a leaf,
-        // we make that slash optional in the regex.
-        if (pattern.endsWith("/")) {
-          pattern = pattern.replace(/\/$/, "\/?");
-        }
-
-        if (pattern.startsWith(":")) pattern = ".*" + pattern;
-        if (pattern.toLowerCase() === "time") pattern = "^time$";
-
-        const query = new RegExp(pattern, "i");
-        return this.smartSort(base.filter((c) => query.test(c)));
-      } catch (e) {
-        return this.smartSort(
-          this.smartSort(
-            base.filter((c) => c.toLowerCase().includes(search.toLowerCase())),
-          ),
-        );
-      }
-    },
-
-    toggleRegexSegment(field, segment, depth = null) {
-      const key = field + "Search";
-      let [pathPart, suffixPart] = (this[key] || "").split(":");
-      pathPart = pathPart || "";
-      suffixPart = suffixPart || "";
-
-      if (depth === "suffix") {
-        const cleanSeg = segment.replace(":", "");
-        // CRITICAL: Strip parentheses before splitting to prevent nesting
-        let items = suffixPart.replace(/[()]/g, "").split("|").filter(Boolean);
-
-        items = items.includes(cleanSeg)
-          ? items.filter((i) => i !== cleanSeg)
-          : [...items, cleanSeg];
-
-        // Rebuild flat: (x|y|z)
-        suffixPart =
-          items.length > 1 ? `(${items.sort().join("|")})` : items[0] || "";
-      } else {
-        let parts = pathPart.split("/").filter((p) => p !== "");
-        let target = parts[depth] || "";
-        let items = target.replace(/[()]/g, "").split("|").filter(Boolean);
-
-        items = items.includes(segment)
-          ? items.filter((i) => i !== segment)
-          : [...items, segment];
-
-        if (items.length === 0) {
-          parts = parts.slice(0, depth);
-        } else {
-          parts[depth] =
-            items.length === 1 ? items[0] : `(${items.sort().join("|")})`;
-        }
-
-        pathPart = parts.join("/");
-        if (pathPart && pathPart.toLowerCase() !== "time") {
-          const isFolder = this.columns.some((c) =>
-            c.toLowerCase().startsWith(pathPart.toLowerCase() + "/"),
-          );
-          if (isFolder) pathPart += "/";
-        }
-      }
-      this[key] = pathPart + (suffixPart ? ":" + suffixPart : "");
-    },
-
-    getSegmentsAtDepth(field, depth) {
-      const base = field === "x" ? this.columns : this.selectableYColumns;
-      const search = this[field + "Search"] || "";
-      const pathSearch = search.split(":")[0] || "";
-      const parts = pathSearch.split("/").filter((p) => p !== "");
-
-      // 1. Orphan Logic (keep current selections visible)
-      const selected = (parts[depth] || "")
-        .replace(/[()]/g, "")
-        .split("|")
-        .filter(Boolean);
-
-      // 2. Discovery Logic
-      const prefixParts = parts.slice(0, depth);
-      const prefix = prefixParts.join("/").replace(/\//g, "\\/?");
-      // If prefix is empty, we match the start of the string
-      const regex = new RegExp("^" + (prefix ? prefix : ""), "i");
-
-      const segments = base
-        .filter((c) => regex.test(c))
-        .map((c) => {
-          const p = c.split(":")[0].split("/");
-          return p[depth] || null;
-        })
-        .filter(Boolean);
-
-      return this.smartSort([...new Set([...selected, ...segments])]);
-    },
-
-    getAvailableSuffixes(field) {
-      const base = field === "x" ? this.columns : this.selectableYColumns;
-      const search = this[field + "Search"];
-      const [pathPart, suffixPart] = search.split(":");
-
-      // 1. Orphan logic
-      const selected = (suffixPart || "")
-        .replace(/[()]/g, "")
-        .split("|")
-        .filter(Boolean)
-        .map((s) => ":" + s);
-
-      // 2. Discovery: Find suffixes matching the current path
-      const pathRegex = new RegExp(
-        "^" + (pathPart || "").replace(/\//g, "\\/?"),
-        "i",
-      );
-      const matches = base.filter((c) => pathRegex.test(c));
-
-      const available = matches
-        .map((c) => (c.includes(":") ? ":" + c.split(":").pop() : null))
-        .filter(Boolean);
-      return this.smartSort([...new Set([...selected, ...available])]);
-    },
-
-    /**
-     * Helper to determine if a segment button should be highlighted.
-     * This handles the regex stripping so the HTML stays clean.
-     */
-    isSegmentActive(field, seg, depth) {
-      const search = this[field + "Search"] || "";
-      if (depth === "suffix") {
-        const suffixPart = search.split(":")[1] || "";
-        const items = suffixPart
-          .replace(/[()]/g, "")
-          .split("|")
-          .filter(Boolean);
-        return items.includes(seg.replace(":", ""));
-      } else {
-        const pathPart = search.split(":")[0] || "";
-        const levels = pathPart.split("/").filter((p) => p !== "");
-        const levelContent = levels[depth] || "";
-        const items = levelContent
-          .replace(/[()]/g, "")
-          .split("|")
-          .filter(Boolean);
-        return items.includes(seg);
-      }
-    },
-
-    getActiveLevels(field) {
-      const search = this[field + "Search"] || "";
-      // Isolate path from suffix
-      const pathOnly = search.split(":")[0] || "";
-      const parts = pathOnly.split("/").filter((p) => p !== "");
-
-      // Ensure we always show at least one level (the root)
-      return Array.from({ length: parts.length + 1 }, (_, i) => i);
-    },
-
-    /**
-     * GETTER: highlightedJson
-     * Injects Tailwind CSS classes for syntax highlighting.
-     */
-    get highlightedJson() {
-      if (!this.configRaw) return "";
-
-      // 1. Escape HTML
-      let html = this.configRaw
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-
-      /**
-       * 2. REVISED REGEX
-       * Group 1: Valid JSON Tokens
-       * Group 5: "Garbage" (Any non-whitespace characters not matched by Group 1)
-       */
-      const regex =
-        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?|[\[\]{},])|(\S+)/g;
-
-      return html.replace(
-        regex,
-        (match, token, _inner1, _inner2, _inner3, garbage) => {
-          // If it's garbage (text that doesn't belong in JSON), make it scream
-          if (garbage) {
-            return `<span class="text-rose-500 underline decoration-wavy underline-offset-2 font-bold">${garbage}</span>`;
-          }
-
-          let cls = "text-slate-500 dark:text-slate-400"; // Default: Structural (braces/commas)
-
-          if (/^"/.test(match)) {
-            if (/:$/.test(match)) {
-              cls = "text-cyan-600 dark:text-cyan-300"; // Keys
-            } else {
-              cls = "text-emerald-600 dark:text-emerald-400"; // Strings
-            }
-          } else if (/true|false/.test(match)) {
-            cls = "text-violet-600 dark:text-violet-400"; // Booleans
-          } else if (/null/.test(match)) {
-            cls = "text-rose-500"; // Null
-          } else if (/-?\d/.test(match)) {
-            cls = "text-amber-600 dark:text-amber-500"; // Numbers
-          }
-
-          return `<span class="${cls}">${match}</span>`;
-        },
-      );
-    },
-
-    getYProps(axis, index) {
-      const obj = this.config.yAxes[axis] || {};
-      return {
-        name: axis,
-        label: obj.label || axis,
-        color: obj.color || this.getSignalColor(index),
-        width: obj.width || 3,
-        opacity: obj.opacity || 1.0,
-        dash: obj.dash || "solid",
-        marker: obj.marker || "none",
-        scale: obj.scale || "1.0",
-      };
-    },
-
-    parseScale(scaleStr) {
-      try {
-        const safe = String(scaleStr)
-          .replace(/pi/gi, Math.PI)
-          .replace(/[^-()\d/*+.]/g, "");
-        return Function(`"use strict"; return (${safe})`)() || 1.0;
-      } catch {
-        return 1.0;
-      }
-    },
-
-    hydrateFromUrl(blob) {
-      try {
-        const decoded = LZString.decompressFromEncodedURIComponent(blob);
-        if (!decoded) throw new Error("Decompression failed");
-        const parsed = JSON.parse(decoded);
-
-        // We only merge the config; we no longer touch documentElement.classList
-        this.config = { ...this.config, ...parsed };
-
-        this.notify("Shared view loaded", "success");
-      } catch (e) {
-        this.notify("Failed to decode shared link", "error");
-        this.loadConfig();
-      }
-    },
-
-    /**
-     * Share Functionality:
-     * Minifies the JSON and (optionally) compresses it for the URL.
-     * For now, we'll use standard Base64 until we pull in LZ-String.
-     */
-    copyShareLink() {
-      try {
-        const minified = JSON.stringify(this.config);
-        const encoded = LZString.compressToEncodedURIComponent(minified);
-        const shareBase = this.externalUrl + window.location.pathname;
-
-        // Just call the helper
-        this.copyToClipboard(
-          `${shareBase}?v=${encoded}`,
-          "Shareable link copied!",
-        );
-      } catch (e) {
-        this.notify("Link generation failed", "error");
-      }
-    },
-
-    copyRawConfig() {
-      this.copyToClipboard(this.configRaw, "JSON Config copied!");
-    },
-
-    resetConfig() {
-      if (
-        confirm(
-          "Reset plot to factory defaults? This will clear your current view.",
-        )
-      ) {
-        // 1. Wipe persistence
-        localStorage.removeItem("mojo_mosaic_config");
-
-        // 2. Restore defaults (Deep copy to break references)
-        this.config = JSON.parse(JSON.stringify(DEFAULT_CONFIG));
-
-        // 3. Re-sync the X-axis fallback if telemetry is loaded
-        if (this.columns.includes("time")) this.config.xAxis = "time";
-
-        this.notify("Settings Reset", "info");
-
-        // 4. Update the editor text area
-        this.configRaw = JSON.stringify(this.config, null, 4);
-      }
-    },
-
-    /**
-     * Universal Clipboard Helper
-     * Handles Secure (HTTPS) and Insecure (HTTP) contexts
-     */
-    async copyToClipboard(text, successMsg = "Copied to clipboard!") {
-      // 1. Try the modern API first (Requires HTTPS/Localhost)
-      if (navigator.clipboard && window.isSecureContext) {
-        try {
-          await navigator.clipboard.writeText(text);
-          this.notify(successMsg, "success");
-          return;
-        } catch (err) {
-          console.warn("Modern clipboard failed, falling back...", err);
-        }
-      }
-
-      // 2. Fallback for HTTP / Older Browsers
-      const textArea = document.createElement("textarea");
-      textArea.value = text;
-      textArea.style.position = "fixed";
-      textArea.style.left = "-9999px";
-      textArea.style.top = "0";
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-
-      try {
-        const successful = document.execCommand("copy");
-        if (successful) {
-          this.notify(successMsg, "success");
-        } else {
-          throw new Error("execCommand returned false");
-        }
-      } catch (err) {
-        this.notify("Failed to copy to clipboard", "error");
-        console.error("Clipboard fallback failed", err);
-      }
-      document.body.removeChild(textArea);
-    },
-
-    /**
-     * Universal Notification Engine
-     * @param {string} msg - The message to display
-     * @param {string} type - success | error | info
-     */
-    notify(msg, type = "success") {
-      this.toastMessage = msg;
-      this.toastType = type;
-      this.showToast = true;
-
-      // Auto-hide after 3 seconds
-      setTimeout(() => {
-        this.showToast = false;
-      }, 3000);
-    },
-
-    /**
-     * Logical Validation for Mosaic Config
-     */
-    validateConfig(cfg) {
-      let errors = [];
-
-      // 1. Check X-Axis
-      if (!this.columns.includes(cfg.xAxis)) {
-        errors.push(`X-Axis "${cfg.xAxis}" not found in telemetry.`);
-      }
-
-      // 2. Check Y-Axes
-      if (typeof cfg.yAxes !== "object" || Array.isArray(cfg.yAxes)) {
-        errors.push("yAxes must be a hashmap.");
-      } else {
-        Object.keys(cfg.yAxes).forEach((y) => {
-          if (!this.columns.includes(y)) errors.push(`Y-Axis "${y}" missing.`);
-        });
-      }
-
-      // 3. Range Safety
-      if (cfg.vsRange && cfg.vsRange[0] > cfg.vsRange[1]) {
-        errors.push("Comparison range start cannot be greater than end.");
-      }
-
-      return errors;
-    },
-
-    /**
-     * Input Handler for JSON Editor
-     * Uses Object.assign to maintain reactivity without breaking the object reference.
-     */
-    updateFromRaw() {
-      try {
-        const parsed = JSON.parse(this.configRaw);
-        this.isValidJson = true;
-
-        if (parsed && typeof parsed === "object") {
-          // Check for logical errors
-          this.configErrors = this.validateConfig(parsed);
-          this.isValidConfig = this.configErrors.length === 0;
-
-          if (this.isValidConfig) {
-            // THE GUARD: Set this to true so the watcher ignores the change
-            this.isEditingRaw = true;
-
-            this.config = { ...this.config, ...parsed };
-
-            // Release the guard after the current reactive cycle
-            this.$nextTick(() => {
-              this.isEditingRaw = false;
-            });
-          }
-        }
-      } catch (e) {
-        this.isValidJson = false;
-        this.isValidConfig = false;
-      }
-    },
-
-    /**
-     * Hydration: Loads saved configuration from localStorage
-     */
-    loadConfig() {
-      const saved = localStorage.getItem("mojo_mosaic_config");
-      if (saved) {
-        try {
-          const parsed = JSON.parse(saved);
-          // Merge parsed data into default config to prevent missing keys
-          this.config = { ...this.config, ...parsed };
-        } catch (e) {
-          console.error("Stored config corrupt");
-        }
-      } else {
-        // Default fallback: Set X-axis to 'time' if available
-        if (this.columns.includes("time")) this.config.xAxis = "time";
-      }
-
-      // rehydrate history stack
-      const savedHistory = localStorage.getItem("mojo_mosaic_history");
-      if (savedHistory) {
-        try {
-          const { stack, index } = JSON.parse(savedHistory);
-          this.historyStack = stack;
-          this.historyIndex = index;
-        } catch (e) {
-          console.warn("History recovery failed, starting fresh.");
-          this.pushHistory();
-        }
-      } else {
-        this.pushHistory(); // First-time setup
-      }
-
-      // Sync the text editor string with the loaded object
-      this.configRaw = JSON.stringify(this.config, null, 4);
-    },
-
-    /**
-     * Persistence: Saves state and triggers plot refresh
-     */
-    saveAndRender() {
-      localStorage.setItem("mojo_mosaic_config", JSON.stringify(this.config));
-      this.persistHistory();
-      this.renderPlot();
-
-      // Guarded resize in case the plot container recently became visible
-      this.$nextTick(() => {
-        const el = document.getElementById("plot-area");
-        if (el && el.offsetParent !== null) Plotly.Plots.resize(el);
-      });
-    },
-
-    /**
-     * Export Plot as Image (PNG, JPG, SVG)
-     */
-    async downloadPlot(format, scale = 1) {
-      const el = document.getElementById("plot-area");
-      if (!el) return;
-
-      const plotlyFormat = format === "jpg" ? "jpeg" : format;
-      const isDark = document.documentElement.classList.contains("dark");
-      const bgColor = isDark ? tw.slate[800] : "#ffffff";
-
-      // Calculate resulting resolution for the notification
-      const resW = Math.round(1280 * scale);
-      const resH = Math.round(720 * scale);
-      this.notify(
-        `Exporting ${resW}x${resH} ${format.toUpperCase()}...`,
-        "info",
-      );
-
-      try {
-        const originalPaper = el.layout.paper_bgcolor;
-        const originalPlot = el.layout.plot_bgcolor;
-
-        // Apply background
-        await Plotly.relayout(el, {
-          paper_bgcolor: bgColor,
-          plot_bgcolor: bgColor,
-        });
-
-        const dataUrl = await Plotly.toImage(el, {
-          format: plotlyFormat,
-          width: 1280, // Keep base width stable
-          height: 720, // Keep base height stable
-          scale: scale, // Multiply EVERYTHING by this factor
-        });
-
-        // Restore transparency
-        await Plotly.relayout(el, {
-          paper_bgcolor: originalPaper,
-          plot_bgcolor: originalPlot,
-        });
-
-        const link = document.createElement("a");
-        link.href = dataUrl;
-        link.download = `${this.trialId}_${resW}p.${format}`;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      } catch (e) {
-        console.error("Export failed", e);
-      } finally {
-        this.downloadOpen = false;
-      }
-    },
-
-    /**
-     * Export Raw Data as CSV
-     */
-    /**
-     * Export ONLY currently displayed data as CSV
-     */
-    downloadCSV() {
-      if (!this.data || Object.keys(this.config.yAxes).length === 0) return;
-
-      // 1. Identify only the active columns (X + all selected Ys)
-      const activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
-      const rowCount = this.data[this.config.xAxis].length;
-
-      // 2. Build CSV with only those columns
-      let csv = activeCols.join(",") + "\n";
-      for (let i = 0; i < rowCount; i++) {
-        csv += activeCols.map((col) => this.data[col][i]).join(",") + "\n";
-      }
-
-      // 3. Standard Blob Download
-      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
-      const link = document.createElement("a");
-      link.href = URL.createObjectURL(blob);
-      link.setAttribute("download", `${this.trialId}_filtered.csv`);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-
-      this.downloadOpen = false;
-
-      this.notify("Filtered CSV Exported", "success");
-    },
-
-    /**
-     * Export the current Plot Configuration as a JSON file
-     */
-    downloadJSON() {
-      const configString = JSON.stringify(this.config, null, 4);
-      const blob = new Blob([configString], { type: "application/json" });
-
-      const link = document.createElement("a");
-      link.href = URL.createObjectURL(blob);
-      link.setAttribute("download", `${this.trialId}_config.json`);
-      document.body.appendChild(link);
-
-      link.click();
-      document.body.removeChild(link);
-
-      this.downloadOpen = false;
-
-      this.notify("Configuration JSON Exported", "success");
-    },
-
-    /**
-     * Handle File Drop
-     */
-    handleDrop(e) {
-      const file = e.dataTransfer.files[0];
-
-      if (
-        !file ||
-        (file.type !== "application/json" && !file.name.endsWith(".json"))
-      ) {
-        this.notify("Please drop a .json file", "error");
-        return;
-      }
-
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        try {
-          const importedConfig = JSON.parse(event.target.result);
-
-          // Merge with current config to ensure we don't break reactivity
-          this.config = { ...this.config, ...importedConfig };
-
-          this.notify("Configuration restored!", "success");
-
-          // Re-sync the raw text area if it's open
-          this.configRaw = JSON.stringify(this.config, null, 4);
-        } catch (err) {
-          console.error("JSON Import failed", err);
-
-          this.notify("Invalid Config File", "error");
-        }
-      };
-      reader.readAsText(file);
-    },
-
-    /**
-     * Toggle Logic: Adds/Removes signals from the Y-Axis array
-     */
-    toggleY(col) {
-      if (this.config.yAxes[col]) {
-        const { [col]: _, ...remainingY } = this.config.yAxes;
-        this.config.yAxes = remainingY;
-      } else {
-        // Find the next available color index
-        const nextIndex = Object.keys(this.config.yAxes).length;
-
-        // Initialize with DEFAULTS so Alpine has a "path" to watch
-        this.config.yAxes[col] = {
-          color: this.getSignalColor(nextIndex), // Hard-set the default hex
-          label: "",
-          width: 3,
-          opacity: 1,
-          scale: "1.0",
-          dash: "solid",
-        };
-      }
-      this.saveAndRender();
-    },
-
-    /**
-     * Clear all selected Y-Axis signals
-     */
-    clearYAxes() {
-      if (Object.keys(this.config.yAxes).length === 0) return;
-
-      this.config.yAxes = {};
-      this.config.yAxes = { ...this.config.yAxes };
-      this.saveAndRender(); // Saves to localStorage and updates Plotly
-
-      // Update the JSON editor if it's open
-      this.configRaw = JSON.stringify(this.config, null, 4);
-
-      this.notify("Signals Cleared", "info");
-    },
-
-    /**
-     * Navigation: Redirects to another trial within the same job
-     */
-    warpToTrial() {
-      if (
-        this.warpId === null ||
-        this.warpId === undefined ||
-        this.warpId === ""
-      )
-        return;
-
-      const paddedNum = String(this.warpId).padStart(this.paddingLen, "0");
-      window.location.href = `/mosaic/trial_${paddedNum}`;
-    },
-
-    /**
-     * Helper to get color by index (with modulo for safety)
-     */
-    getSignalColor(index) {
-      return this.plotColors[index % this.plotColors.length];
-    },
-
-    /**
-     * Shared helper to find the min/max of current active datasets
-     */
-    calculatePaddedRange(keys, padding = true) {
-      let globalMin = Infinity;
-      let globalMax = -Infinity;
-      const activeDatasets = [this.data];
-
-      if (this.config.vsEnabled) {
-        const [start, end] = this.config.vsRange;
-        Object.entries(this.vsDatasets).forEach(([vsId, dataset]) => {
-          const n = parseInt(vsId.split("_").pop());
-          if (n >= start && n <= end) activeDatasets.push(dataset);
-        });
-      }
-
-      activeDatasets.forEach((dataset) => {
-        keys.forEach((key, i) => {
-          const p = this.getYProps(key, i);
-          const scale = this.parseScale(p.scale);
-          const series = dataset[key];
-          if (!series) return;
-          for (let i = 0; i < series.length; i++) {
-            const val = series[i] * scale;
-            if (val < globalMin) globalMin = val;
-            if (val > globalMax) globalMax = val;
-          }
-        });
-      });
-
-      if (globalMin === Infinity) return [0, 1];
-      if (globalMin === globalMax) return [globalMin - 1, globalMax + 1];
-
-      const pad = padding ? (globalMax - globalMin) / 16 : 0;
-      return [globalMin - pad, globalMax + pad];
-    },
-
-    /**
-     * Plotly Engine: Renders the telemetry traces based on the current config object
-     */
-    renderPlot() {
-      if (!this.data) return;
-
-      // const el = document.getElementById("plot-area");
-      const isDark = document.documentElement.classList.contains("dark");
-
-      const textColor = isDark ? tw.slate[400] : tw.slate[600];
-      const majorGrid = isDark ? tw.slate[950] : tw.slate[200];
-      const minorGrid = isDark ? tw.slate[900] : tw.slate[100];
-      const tooltipBg = isDark ? tw.slate[900] : "#ffffff";
-      const tooltipFont = isDark ? tw.slate[50] : tw.slate[900];
-      const tooltipBorder = tw.cyan[500];
-      const spikeColor = isDark ? tw.cyan[500] : tw.cyan[500];
-
-      const isHoverDisabled = this.config.hover === "none";
-
-      const showX =
-        this.config.showSpike &&
-        !isHoverDisabled &&
-        (this.config.hover.includes("x") || this.config.hover === "closest");
-      const showY =
-        this.config.showSpike &&
-        !isHoverDisabled &&
-        (this.config.hover.includes("y") || this.config.hover === "closest");
-
-      // Determine final display ranges
-      const displayRangeX =
-        this.config.rangeX ||
-        this.calculatePaddedRange([this.config.xAxis], false);
-      const displayRangeY =
-        this.config.rangeY ||
-        this.calculatePaddedRange(Object.keys(this.config.yAxes));
-
-      // main traces
-      const yKeys = Object.keys(this.config.yAxes);
-      let traces = yKeys
-        .map((key, i) => {
-          const p = this.getYProps(key, i);
-          const scale = this.parseScale(p.scale);
-
-          if (!this.data[p.name]) return null;
-
-          return {
-            x: this.data[this.config.xAxis],
-            y: this.data[p.name].map((v) => v * scale),
-            name: p.label,
-            mode: this.config.linemode,
-            type: "scatter",
-            line: {
-              width: p.width,
-              color: p.color,
-              shape: this.config.interp,
-              dash: p.dash,
-            },
-            marker: { size: 6, symbol: p.marker },
-            opacity: p.opacity,
-            hoverlabel: {
-              namelength: -1,
-              bgcolor: tooltipBg,
-              bordercolor: tooltipBorder,
-              font: { family: "monospace", size: 12, color: tooltipFont },
-            },
-            hovertemplate: `<b>${key}</b><br>%{x}: %{y:.4f}<extra></extra>`,
-          };
-        })
-        .filter((trace) => trace !== null);
-
-      // vs traces
-      if (this.config.vsEnabled) {
-        const [start, end] = this.config.vsRange;
-
-        // Track which parameters have already created a legend entry
-        const legendTracker = new Set();
-
-        const sortedVsIds = Object.keys(this.vsDatasets).sort((a, b) => {
-          const numA = parseInt(a.split("_").pop());
-          const numB = parseInt(b.split("_").pop());
-          return numA - numB;
-        });
-
-        sortedVsIds.forEach((vsId) => {
-          const n = parseInt(vsId.split("_").pop());
-          if (n < start || n > end || vsId === this.trialId) return;
-
-          const dataset = this.vsDatasets[vsId];
-          if (!dataset) return;
-
-          const vsTraces = yKeys
-            .map((key, i) => {
-              const p = this.getYProps(key, i);
-
-              if (!dataset[p.name]) {
-                return null;
-              }
-
-              const scale = this.parseScale(p.scale);
-
-              // Check if this specific parameter has shown up in the legend yet
-              const isFirstEntryForThisParam = !legendTracker.has(key);
-
-              const t = {
-                x: dataset[this.config.xAxis],
-                y: dataset[p.name].map((v) => v * scale),
-                // Name it after the signal so the legend is clear
-                name: `${p.label} (<i>vs.</i>)`,
-                // Group by signal name so toggling one toggles all trials for that signal
-                legendgroup: `group_${key}`,
-                showlegend: isFirstEntryForThisParam,
-                mode: this.config.linemode,
-                type: "scatter",
-                line: {
-                  width: 1,
-                  color: p.color,
-                  shape: this.config.interp,
-                  dash: "dot",
-                },
-                opacity: 0.35,
-                marker: { size: 4, symbol: p.marker },
-                hoverlabel: { namelength: -1 },
-                hovertemplate: `<b>${key}</b> (#${n})<br>%{x}: %{y:.4f}<extra></extra>`,
-              };
-
-              // Mark this parameter as 'legend-accounted-for'
-              legendTracker.add(key);
-              return t;
-            })
-            .filter((trace) => trace !== null);
-          traces = [...traces, ...vsTraces];
-        });
-      }
-
-      // x axis config
-      const xAxisObj = {
-        type: this.config.xScale || "linear",
-        range:
-          this.config.xScale === "log"
-            ? [
-                Math.log10(Math.max(1e-6, displayRangeX[0])),
-                Math.log10(Math.max(1e-6, displayRangeX[1])),
-              ]
-            : displayRangeX,
-        dtick:
-          this.config.xScale === "log" && this.config.xLogBase
-            ? Math.log10(this.config.xLogBase)
-            : undefined,
-        // tickformat: ".3s",
-        gridcolor: majorGrid,
-        showgrid: this.config.grid !== "none",
-        minor: { showgrid: this.config.grid === "all", gridcolor: minorGrid },
-        zeroline: false,
-        tickfont: { color: textColor, size: 14 },
-        title: {
-          text: this.config.xAxisTitle || this.config.xAxis,
-          font: { size: 14, color: textColor, family: "monospace" },
-        },
-        autorange: false,
-        showspikes: showX,
-        spikemode: "across",
-        spikelinecolor: spikeColor,
-        spikethickness: -2,
-      };
-
-      const frameLabel = this.config.refFrame
-        ? `<br><span style="color: ${textColor}; font-size: 14px; opacity: 0.6;">[Frame: ${this.config.refFrame}]</span>`
-        : ``;
-
-      // y axis config
-      const yAxisObj = {
-        type: this.config.yScale || "linear",
-        range:
-          this.config.yScale === "log"
-            ? [
-                Math.log10(Math.max(1e-6, displayRangeY[0])),
-                Math.log10(Math.max(1e-6, displayRangeY[1])),
-              ]
-            : displayRangeY,
-        dtick:
-          this.config.yScale === "log" && this.config.yLogBase
-            ? Math.log10(this.config.yLogBase)
-            : undefined,
-        // tickformat: ",.3f",
-        gridcolor: majorGrid,
-        showgrid: this.config.grid !== "none",
-        minor: { showgrid: this.config.grid === "all", gridcolor: minorGrid },
-        zeroline: false,
-        tickfont: { color: textColor, size: 14 },
-        title: {
-          text: this.config.yAxisTitle + frameLabel,
-          font: { size: 14, color: textColor, family: "monospace" },
-        },
-        autorange: false,
-        showspikes: showY,
-        spikemode: "across",
-        spikelinecolor: spikeColor,
-        spikethickness: -2,
-      };
-
-      // layout
-      const layout = {
-        uirevision: `${this.trialId}_${this.config.xAxis}_${Object.keys(this.config.yAxes).join("_")}`,
-        title: this.config.title
-          ? {
-              text: this.config.title,
-              font: {
-                family: "monospace",
-                size: 16,
-                color: isDark ? tw.slate[200] : tw.slate[800],
-                weight: "bold",
-              },
-              x: 0,
-              xanchor: "left",
-            }
-          : null,
-        paper_bgcolor: "rgba(0,0,0,0)",
-        plot_bgcolor: "rgba(0,0,0,0)",
-        margin: {
-          t: this.config.title ? 60 : 30,
-          r: this.config.legendPos === "right" ? 150 : 30,
-          b: this.config.legendPos === "bottom" ? 80 : 50,
-          l: this.config.yAxisTitle ? 80 : 60,
-        },
-        hovermode: isHoverDisabled ? false : this.config.hover,
-        hoverlabel: {
-          bgcolor: tooltipBg,
-          bordercolor: tooltipBorder,
-          font: { family: "monospace", size: 12, color: tooltipFont },
-          align: "left",
-        },
-        showlegend: this.config.legendPos !== "hidden",
-        legend:
-          this.config.legendPos === "right"
-            ? {
-                orientation: "v",
-                x: 1.02,
-                y: 1,
-                font: { family: "monospace", size: 14, color: textColor },
-                groupclick: "togglegroup",
-              }
-            : {
-                orientation: "h",
-                y: -0.2,
-                x: 0.5,
-                xanchor: "center",
-                font: { family: "monospace", size: 14, color: textColor },
-                groupclick: "togglegroup",
-              },
-        xaxis: xAxisObj,
-        yaxis: yAxisObj,
-        annotations: [
-          // 1. Existing Notes (with arrows)
-          ...(this.config.annotations || []).map((ann) => ({
-            x: ann.x,
-            y: ann.y,
-            text: ann.text,
-            showarrow: true,
-            arrowhead: 2,
-            ax: 0,
-            ay: -40,
-            font: {
-              family: "monospace",
-              size: 12,
-              color: isDark ? tw.slate[50] : tw.slate[900],
-            },
-            bgcolor: isDark ? tw.slate[800] : tw.slate[50],
-            bordercolor: tw.cyan[500],
-            borderwidth: 1,
-            borderpad: 4,
-          })),
-
-          // 2. Shape Labels (pinned to geometry)
-          ...(this.config.shapes || [])
-            .filter((s) => s.label)
-            .map((s) => {
-              let x = s.x0;
-              let y = s.y0;
-              let xanchor = "left";
-              let yanchor = "bottom";
-              let xref = "x";
-              let yref = "y";
-
-              // Positioning logic to keep labels on the plot edge or shape corner
-              if (s.type === "vline") {
-                y = 1;
-                yref = "paper"; // Top of the plot
-              } else if (s.type === "hline") {
-                x = 1;
-                xref = "paper";
-                xanchor = "right"; // Right side of the plot
-              } else if (s.type === "rect") {
-                x = s.x0;
-                y = s.y1; // Top-left corner of the rect
-              }
-
-              return {
-                x,
-                y,
-                xref,
-                yref,
-                text: `<b>${s.label}</b>`,
-                showarrow: false, // No arrows for shape labels
-                xanchor,
-                yanchor,
-                font: {
-                  size: 10,
-                  color: s.color || tw.cyan[500],
-                  family: "monospace",
-                },
-                bgcolor: isDark ? tw.slate[900] + "B3" : tw.slate[50] + "B3",
-                borderpad: 2,
-              };
-            }),
-        ],
-        shapes: (this.config.shapes || []).map((s) => {
-          const isDark = document.documentElement.classList.contains("dark");
-          const shapeColor = s.color || tw.cyan[500];
-
-          const base = {
-            line: { color: shapeColor, width: 2, dash: s.dash || "solid" },
-            layer: "below",
-          };
-
-          if (s.type === "vline") {
-            return {
-              ...base,
-              type: "line",
-              x0: s.x0,
-              x1: s.x0,
-              y0: 0,
-              y1: 1,
-              yref: "paper",
-            };
-          }
-          if (s.type === "hline") {
-            return {
-              ...base,
-              type: "line",
-              y0: s.y0,
-              y1: s.y0,
-              x0: 0,
-              x1: 1,
-              xref: "paper",
-            };
-          }
-          if (s.type === "rect") {
-            return {
-              ...base,
-              type: "rect",
-              x0: s.x0,
-              x1: s.x1,
-              y0: s.y0,
-              y1: s.y1,
-              fillcolor: isDark ? `${shapeColor}1A` : `${shapeColor}26`,
-              line: { ...base.line, width: 1 },
-            };
-          }
-        }),
-      };
-
-      // config
-      const config = {
-        responsive: true, // adapt to page changes
-        displaylogo: false, // hide plotly logo
-        displayModeBar: true, // keep mode bar always visible
-        modeBarButtonsToRemove: ["toImage"], // we have our own download options
-      };
-
-      return Plotly.react("plot-area", traces, layout, config);
-    },
-  };
-}
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/lib/plot-config.generated.ts b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/lib/plot-config.generated.ts
index 8dc0ccdc..3e90d8bf 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/lib/plot-config.generated.ts
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/lib/plot-config.generated.ts
@@ -1,5 +1,5 @@
 // ============================================================
-// AUTO-GENERATED — do not edit manually.
+// AUTO-GENERATED - do not edit manually.
 // Source: src/mujoco_mojo/utils/layers/dojo/plot_config.py
 // Regenerate: python scripts/gen_ts_models.py
 // ============================================================
@@ -20,13 +20,7 @@ export interface FilterEntry {
 
 export type GridMode = "none" | "major" | "all";
 
-export type HoverMode =
-  | "x unified"
-  | "y unified"
-  | "closest"
-  | "x"
-  | "y"
-  | "none";
+export type HoverMode = "x unified" | "y unified" | "closest" | "x" | "y" | "none";
 
 export type InterpMode = "linear" | "spline" | "hv" | "vh" | "hvh" | "vhv";
 
@@ -36,6 +30,8 @@ export type LineMode = "lines" | "markers" | "lines+markers";
 
 export type MarkerSymbol = "none" | "circle" | "square" | "diamond" | "cross";
 
+export type PlotType = "cartesian" | "polar";
+
 export type ScaleType = "linear" | "log";
 
 export interface Shape {
@@ -51,6 +47,11 @@ export interface Shape {
 
 export type ShapeType = "vline" | "hline" | "rect";
 
+export interface XAxisConfig {
+  col?: string;
+  filters?: FilterEntry[];
+}
+
 export interface YAxisConfig {
   label: string;
   color: string;
@@ -63,7 +64,7 @@ export interface YAxisConfig {
 
 /** Complete serialisable state of a trial-viewer plot. */
 export interface PlotConfig {
-  xAxis: string;
+  xAxis?: XAxisConfig;
   yAxes: Record<string, YAxisConfig>;
   refFrame: string | null;
   grid: GridMode;
@@ -81,6 +82,7 @@ export interface PlotConfig {
   yScale: ScaleType;
   xLogBase?: number | null;
   yLogBase?: number | null;
+  plotType?: PlotType;
   vsEnabled: boolean;
   vsRange: [number, number];
   annotations: Annotation[];
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/models.ts b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/models.ts
index 0df9e182..d25db403 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/models.ts
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/models.ts
@@ -102,6 +102,7 @@ export interface NotificationEntry {
 export interface DojoStore {
   isPageReady: boolean;
   isFullscreen: boolean;
+  overlayCount: number;
   isComplete: boolean;
   isMuted: boolean;
   isAutoRefresh: boolean;
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/store.ts b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/store.ts
index 7c1830c4..4fbe0a02 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/store.ts
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/store.ts
@@ -8,7 +8,8 @@ window.notifTimeAgo = notifTimeAgo;
 document.addEventListener('alpine:init', () => {
   Alpine.store('dojo', {
     isPageReady: false,
-    isFullscreen: false,
+    isFullscreen: localStorage.getItem('mojo_fullscreen') === 'true',
+    overlayCount: 0,
     loadStartTime: Date.now(),
     isComplete: false,
     isMuted: localStorage.getItem('mojo_muted') !== 'false',
@@ -169,6 +170,14 @@ document.addEventListener('alpine:init', () => {
       }
     },
 
+    toggleFullscreen() {
+      this.isFullscreen = !this.isFullscreen;
+      localStorage.setItem('mojo_fullscreen', String(this.isFullscreen));
+    },
+    exitFullscreen() {
+      this.isFullscreen = false;
+      localStorage.setItem('mojo_fullscreen', 'false');
+    },
     toggleMute() {
       this.isMuted = !this.isMuted;
       localStorage.setItem('mojo_muted', this.isMuted.toString());
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/trial-viewer.ts b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/trial-viewer.ts
index 6a7dffdd..3e43c4bf 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/trial-viewer.ts
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/trial-viewer.ts
@@ -40,7 +40,7 @@ const tw = {
 } as const;
 
 const DEFAULT_CONFIG: PlotConfig = {
-  xAxis: "time",
+  xAxis: { col: "time", filters: [] },
   yAxes: {},
   refFrame: null,
   grid: "all",
@@ -56,6 +56,7 @@ const DEFAULT_CONFIG: PlotConfig = {
   rangeY: null,
   xScale: "linear",
   yScale: "linear",
+  plotType: "cartesian",
   vsEnabled: false,
   vsRange: [0, 10],
   annotations: [],
@@ -79,6 +80,7 @@ function trialViewer(trialId: string, externalUrl: string) {
     isMac: /Mac|iPhone|iPod|iPad/.test(navigator.platform),
     data: null as Record<string, number[]> | null,
     errorState: null as string | null,
+    _renderedPlotType: null as string | null,
 
     // --- UI / MENU STATES ---
     theme: "dark",
@@ -132,6 +134,7 @@ function trialViewer(trialId: string, externalUrl: string) {
     // tracks the last filter fingerprint that was fetched for each col; used to detect
     // real filter changes without relying on Alpine.js's (unreliable) oldValue deep clone
     filterFingerprints: {} as Record<string, string>,
+    xAxisFilterFingerprint: "[]" as string,
     // deduplicates filter error toasts so VS mode (N parallel fetches) shows each error once
     _shownFilterErrors: new Set<string>(),
     // in-progress signal editor edits that survive closing/reopening the panel
@@ -249,20 +252,25 @@ function trialViewer(trialId: string, externalUrl: string) {
       if (this.config.refFrame)
         colParams.append("rotate_by", this.config.refFrame);
 
-      // include active filter stacks for requested yAxis columns
+      // include active filter stacks for requested columns (x-axis and y-axes)
       const filtersPayload: Record<string, object[]> = {};
+      const toActiveFilters = (filters: { enabled?: boolean; [k: string]: unknown }[]) =>
+        filters
+          .filter((f) => f.enabled !== false)
+          .map((f) => Object.fromEntries(Object.entries(f).filter(([k]) => k !== "enabled")));
       for (const col of requiredCols) {
         const yConfig = this.config.yAxes[col];
         if (yConfig?.filters && yConfig.filters.length > 0) {
-          const active = yConfig.filters
-            .filter((f) => f.enabled !== false)
-            .map((f) =>
-              Object.fromEntries(
-                Object.entries(f).filter(([k]) => k !== "enabled"),
-              ),
-            );
+          const active = toActiveFilters(yConfig.filters);
           if (active.length > 0) filtersPayload[col] = active;
         }
+        if (col === this.config.xAxis!.col!) {
+          const xFilters = this.config.xAxis?.filters ?? [];
+          if (xFilters.length > 0) {
+            const active = toActiveFilters(xFilters);
+            if (active.length > 0) filtersPayload[col] = active;
+          }
+        }
       }
       if (Object.keys(filtersPayload).length > 0) {
         colParams.append("filters", JSON.stringify(filtersPayload));
@@ -340,7 +348,7 @@ function trialViewer(trialId: string, externalUrl: string) {
 
       const start = Math.min(this.vsDraft.range[0], this.vsDraft.range[1]);
       const end = Math.max(this.vsDraft.range[0], this.vsDraft.range[1]);
-      const activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
+      const activeCols = [this.config.xAxis!.col!, ...Object.keys(this.config.yAxes)];
 
       const draftIds = this.allTrials.filter((id) => {
         const n = parseInt(id.split("_").pop() ?? "");
@@ -490,7 +498,7 @@ function trialViewer(trialId: string, externalUrl: string) {
           })
         | null;
       if (!el || !this.data) return;
-      const xValues = this.data[this.config.xAxis] ?? [];
+      const xValues = this.data[this.config.xAxis!.col!] ?? [];
       const xMin = xValues[0] ?? 0;
       const xMax = xValues[xValues.length - 1] ?? 100;
       const xSpan = (xMax - xMin) * 0.1;
@@ -612,7 +620,7 @@ function trialViewer(trialId: string, externalUrl: string) {
 
       try {
         const initialCols = [
-          this.config.xAxis,
+          this.config.xAxis!.col!,
           ...Object.keys(this.config.yAxes),
         ];
         const response = await this.fetchTrialData(this.trialId, initialCols);
@@ -766,6 +774,10 @@ function trialViewer(trialId: string, externalUrl: string) {
         (Alpine.store("dojo") as DojoStore).setPageReady(true);
       }
 
+      // Capture phase so this runs before Alpine's bubble-phase window listeners
+      // (e.g. @keydown.escape.window in base.html). stopImmediatePropagation()
+      // in the Escape branch then prevents those listeners from firing when a
+      // panel was open.
       window.addEventListener("keydown", (e) => {
         if (e.repeat) return;
         const tag = (e.target as HTMLElement).tagName;
@@ -776,6 +788,14 @@ function trialViewer(trialId: string, externalUrl: string) {
           )?.focus();
         }
         if (e.key === "Escape") {
+          const anyOpen = !!(
+            this.placementMode || this.annotationsOpen || this.shapesOpen ||
+            this.xMenuOpen || this.yMenuOpen || this.refFrameMenuOpen ||
+            this.settingsOpen || this.downloadOpen || this.editorOpen ||
+            this.profilesOpen || this.vsMenuOpen ||
+            (Alpine.store("dojo") as DojoStore).overlayCount > 0 ||
+            ["INPUT", "TEXTAREA"].includes(tag)
+          );
           if (["INPUT", "TEXTAREA"].includes(tag))
             (e.target as HTMLElement).blur();
           this.placementMode = null;
@@ -789,6 +809,9 @@ function trialViewer(trialId: string, externalUrl: string) {
           this.profilesOpen = this.vsMenuOpen = false;
           this.profileSearch = "";
           window.dispatchEvent(new CustomEvent("mojo:escape"));
+          // Stop immediate propagation when something was open so Alpine's
+          // bubble-phase @keydown.escape.window handler doesn't also fire.
+          if (anyOpen) e.stopImmediatePropagation();
         }
         if (["INPUT", "TEXTAREA"].includes(tag)) return;
         if (e.key === "ArrowLeft") document.getElementById("nav-prev")?.click();
@@ -807,7 +830,7 @@ function trialViewer(trialId: string, externalUrl: string) {
           e.preventDefault();
           this.redo();
         }
-      });
+      }, { capture: true });
 
       const resp = await fetch("/mosaic/api/trials");
       const data = (await resp.json()) as TrialManifest;
@@ -848,7 +871,7 @@ function trialViewer(trialId: string, externalUrl: string) {
           this.data = {};
           this.vsDatasets = {};
           const initialCols = [
-            this.config.xAxis,
+            this.config.xAxis!.col!,
             ...Object.keys(this.config.yAxes),
           ];
           const response = await this.fetchTrialData(this.trialId, initialCols);
@@ -866,7 +889,7 @@ function trialViewer(trialId: string, externalUrl: string) {
         if (
           this.config.vsEnabled &&
           oldValue?.vsEnabled &&
-          (value.xAxis !== oldValue.xAxis ||
+          (value.xAxis!.col! !== oldValue?.xAxis?.col ||
             Object.keys(value.yAxes).length !==
               Object.keys(oldValue.yAxes ?? {}).length)
         ) {
@@ -885,7 +908,21 @@ function trialViewer(trialId: string, externalUrl: string) {
           );
           return current !== (this.filterFingerprints[col] ?? "[]");
         });
-        if (changedFilterCols.length > 0) {
+        // detect x-axis filter changes
+        const xFilterCurrent = JSON.stringify(
+          (value.xAxis?.filters ?? []).filter((f) => f.enabled !== false),
+        );
+        const xFilterChanged = xFilterCurrent !== this.xAxisFilterFingerprint;
+        if (xFilterChanged) {
+          this.xAxisFilterFingerprint = xFilterCurrent;
+          if (this.data) delete this.data[value.xAxis!.col!];
+        }
+
+        const colsToRefetch = [
+          ...(xFilterChanged ? [value.xAxis!.col!] : []),
+          ...changedFilterCols,
+        ];
+        if (colsToRefetch.length > 0) {
           changedFilterCols.forEach((col) => {
             this.filterFingerprints[col] = JSON.stringify(
               (value.yAxes[col]?.filters ?? []).filter(
@@ -895,10 +932,7 @@ function trialViewer(trialId: string, externalUrl: string) {
             if (this.data) delete this.data[col];
           });
           this.vsDatasets = {};
-          const resp = await this.fetchTrialData(
-            this.trialId,
-            changedFilterCols,
-          );
+          const resp = await this.fetchTrialData(this.trialId, colsToRefetch);
           this.data = { ...(this.data ?? {}), ...resp.data };
           if (this.config.vsEnabled) await this.syncVsRange();
         }
@@ -932,7 +966,7 @@ function trialViewer(trialId: string, externalUrl: string) {
       try {
         const start = Math.min(this.vsDraft.range[0], this.vsDraft.range[1]);
         const end = Math.max(this.vsDraft.range[0], this.vsDraft.range[1]);
-        let activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
+        let activeCols = [this.config.xAxis!.col!, ...Object.keys(this.config.yAxes)];
 
         if (this.config.refFrame) {
           const families = new Set<string>();
@@ -1190,8 +1224,8 @@ function trialViewer(trialId: string, externalUrl: string) {
 
     validateConfig(cfg: PlotConfig): string[] {
       const errors: string[] = [];
-      if (!this.columns.includes(cfg.xAxis))
-        errors.push(`X-Axis "${cfg.xAxis}" not found in telemetry.`);
+      if (cfg.xAxis?.col && !this.columns.includes(cfg.xAxis.col))
+        errors.push(`X-Axis "${cfg.xAxis.col}" not found in telemetry.`);
       if (typeof cfg.yAxes !== "object" || Array.isArray(cfg.yAxes)) {
         errors.push("yAxes must be a hashmap.");
       } else {
@@ -1238,7 +1272,7 @@ function trialViewer(trialId: string, externalUrl: string) {
           console.error("Stored config corrupt");
         }
       } else {
-        if (this.columns.includes("time")) this.config.xAxis = "time";
+        if (this.columns.includes("time")) this.config.xAxis!.col! = "time";
       }
 
       const savedHistory = localStorage.getItem("mojo_mosaic_history");
@@ -1313,7 +1347,7 @@ function trialViewer(trialId: string, externalUrl: string) {
       ) {
         localStorage.removeItem("mojo_mosaic_config");
         this.config = JSON.parse(JSON.stringify(DEFAULT_CONFIG)) as PlotConfig;
-        if (this.columns.includes("time")) this.config.xAxis = "time";
+        if (this.columns.includes("time")) this.config.xAxis!.col! = "time";
         this.notify("Settings Reset", "info");
         this.configRaw = JSON.stringify(this.config, null, 4);
       }
@@ -1396,8 +1430,8 @@ function trialViewer(trialId: string, externalUrl: string) {
 
     downloadCSV() {
       if (!this.data || Object.keys(this.config.yAxes).length === 0) return;
-      const activeCols = [this.config.xAxis, ...Object.keys(this.config.yAxes)];
-      const rowCount = this.data[this.config.xAxis]?.length ?? 0;
+      const activeCols = [this.config.xAxis!.col!, ...Object.keys(this.config.yAxes)];
+      const rowCount = this.data[this.config.xAxis!.col!]?.length ?? 0;
       let csv = activeCols.join(",") + "\n";
       for (let i = 0; i < rowCount; i++) {
         csv +=
@@ -1520,6 +1554,35 @@ function trialViewer(trialId: string, externalUrl: string) {
       return this.filterSchemas.find((s) => s.type === filterType);
     },
 
+    evalMathExpr(expr: string): number | null {
+      const s = String(expr ?? "").trim();
+      if (!s) return null;
+      const n = Number(s);
+      if (!isNaN(n)) return n;
+      try {
+        // Expose a safe math context — no access to globals beyond these names.
+        const fn = new Function(
+          "pi", "e",
+          "sin", "cos", "tan", "asin", "acos", "atan", "atan2",
+          "sqrt", "cbrt", "log", "log2", "log10",
+          "abs", "floor", "ceil", "round", "sign",
+          "pow", "exp", "max", "min",
+          `"use strict"; return (${s})`,
+        );
+        const result = fn(
+          Math.PI, Math.E,
+          Math.sin, Math.cos, Math.tan, Math.asin, Math.acos, Math.atan, Math.atan2,
+          Math.sqrt, Math.cbrt, Math.log, Math.log2, Math.log10,
+          Math.abs, Math.floor, Math.ceil, Math.round, Math.sign,
+          Math.pow, Math.exp, Math.max, Math.min,
+        ) as unknown;
+        if (typeof result === "number" && isFinite(result)) return result;
+      } catch {
+        // invalid expression — fall through
+      }
+      return null;
+    },
+
     getUnitOptions(
       groups: UnitGroup[] | undefined,
       fromUnit: string | null | undefined,
@@ -1621,8 +1684,8 @@ function trialViewer(trialId: string, externalUrl: string) {
               if (!pr.ok) return;
               const cfg = (await pr.json()) as Partial<PlotConfig>;
               const w: string[] = [];
-              if (cfg.xAxis && !colSet.has(cfg.xAxis))
-                w.push(`x-axis "${cfg.xAxis}"`);
+              if (cfg.xAxis?.col && !colSet.has(cfg.xAxis.col))
+                w.push(`x-axis "${cfg.xAxis!.col!}"`);
               for (const key of Object.keys(cfg.yAxes ?? {})) {
                 if (!colSet.has(key)) w.push(`"${key}"`);
               }
@@ -1685,8 +1748,8 @@ function trialViewer(trialId: string, externalUrl: string) {
             .map((c) => c.replace(":w", "")),
         );
         const missing: string[] = [];
-        if (loaded.xAxis && !colSet.has(loaded.xAxis))
-          missing.push(`x-axis "${loaded.xAxis}"`);
+        if (loaded.xAxis?.col && !colSet.has(loaded.xAxis.col))
+          missing.push(`x-axis "${loaded.xAxis!.col!}"`);
         for (const key of Object.keys(loaded.yAxes ?? {})) {
           if (!colSet.has(key)) missing.push(`signal "${key}"`);
         }
@@ -1815,23 +1878,44 @@ function trialViewer(trialId: string, externalUrl: string) {
         !isHoverDisabled &&
         (this.config.hover.includes("y") || this.config.hover === "closest");
 
+      const isPolar = this.config.plotType === "polar";
       const yKeys = Object.keys(this.config.yAxes);
       let traces: object[] = yKeys
         .map((key, i) => {
           const p = this.getYProps(key, i);
           if (!this.data![p.name]) return null;
+          const lineStyle = {
+            width: p.width,
+            color: p.color,
+            shape: this.config.interp,
+            dash: p.dash,
+          };
+          if (isPolar) {
+            return {
+              r: this.data![p.name]!,
+              theta: this.data![this.config.xAxis!.col!],
+              name: p.label,
+              mode: this.config.linemode,
+              type: "scatterpolar",
+              line: lineStyle,
+              marker: { size: 6, symbol: p.marker },
+              opacity: p.opacity,
+              hoverlabel: {
+                namelength: -1,
+                bgcolor: tooltipBg,
+                bordercolor: tooltipBorder,
+                font: { family: "monospace", size: 12, color: tooltipFont },
+              },
+              hovertemplate: `<b>${key}</b><br>θ: %{theta:.4f}<br>r: %{r:.4f}<extra></extra>`,
+            };
+          }
           return {
-            x: this.data![this.config.xAxis],
+            x: this.data![this.config.xAxis!.col!],
             y: this.data![p.name]!,
             name: p.label,
             mode: this.config.linemode,
             type: "scatter",
-            line: {
-              width: p.width,
-              color: p.color,
-              shape: this.config.interp,
-              dash: p.dash,
-            },
+            line: lineStyle,
             marker: { size: 6, symbol: p.marker },
             opacity: p.opacity,
             hoverlabel: {
@@ -1863,25 +1947,41 @@ function trialViewer(trialId: string, externalUrl: string) {
               const p = this.getYProps(key, i);
               if (!dataset[p.name]) return null;
               const isFirst = !legendTracker.has(key);
-              const t = {
-                x: dataset[this.config.xAxis],
-                y: dataset[p.name]!,
-                name: `${p.label} (<i>vs.</i>)`,
-                legendgroup: `group_${key}`,
-                showlegend: isFirst,
-                mode: this.config.linemode,
-                type: "scatter",
-                line: {
-                  width: 1,
-                  color: p.color,
-                  shape: this.config.interp,
-                  dash: "dot",
-                },
-                opacity: 0.35,
-                marker: { size: 4, symbol: p.marker },
-                hoverlabel: { namelength: -1 },
-                hovertemplate: `<b>${key}</b> (#${n})<br>%{x}: %{y:.4f}<extra></extra>`,
+              const lineStyle = {
+                width: 1,
+                color: p.color,
+                shape: this.config.interp,
+                dash: "dot",
               };
+              const t = isPolar
+                ? {
+                    r: dataset[p.name]!,
+                    theta: dataset[this.config.xAxis!.col!],
+                    name: `${p.label} (<i>vs.</i>)`,
+                    legendgroup: `group_${key}`,
+                    showlegend: isFirst,
+                    mode: this.config.linemode,
+                    type: "scatterpolar",
+                    line: lineStyle,
+                    opacity: 0.35,
+                    marker: { size: 4, symbol: p.marker },
+                    hoverlabel: { namelength: -1 },
+                    hovertemplate: `<b>${key}</b> (#${n})<br>θ: %{theta:.4f}<br>r: %{r:.4f}<extra></extra>`,
+                  }
+                : {
+                    x: dataset[this.config.xAxis!.col!],
+                    y: dataset[p.name]!,
+                    name: `${p.label} (<i>vs.</i>)`,
+                    legendgroup: `group_${key}`,
+                    showlegend: isFirst,
+                    mode: this.config.linemode,
+                    type: "scatter",
+                    line: lineStyle,
+                    opacity: 0.35,
+                    marker: { size: 4, symbol: p.marker },
+                    hoverlabel: { namelength: -1 },
+                    hovertemplate: `<b>${key}</b> (#${n})<br>%{x}: %{y:.4f}<extra></extra>`,
+                  };
               legendTracker.add(key);
               return t;
             })
@@ -1914,7 +2014,7 @@ function trialViewer(trialId: string, externalUrl: string) {
         zeroline: false,
         tickfont: { color: textColor, size: 14 },
         title: {
-          text: this.config.xAxisTitle || this.config.xAxis,
+          text: this.config.xAxisTitle || this.config.xAxis!.col!,
           font: { size: 14, color: textColor, family: "monospace" },
         },
         showspikes: showX,
@@ -1960,8 +2060,34 @@ function trialViewer(trialId: string, externalUrl: string) {
         spikethickness: -2,
       };
 
+      const polarLayout = isPolar
+        ? {
+            polar: {
+              bgcolor: "rgba(0,0,0,0)",
+              radialaxis: {
+                color: textColor,
+                gridcolor: majorGrid,
+                tickfont: { color: textColor, size: 14, family: "monospace" },
+                title: {
+                  text: this.config.yAxisTitle || "r",
+                  font: { size: 14, color: textColor, family: "monospace" },
+                },
+              },
+              angularaxis: {
+                color: textColor,
+                gridcolor: majorGrid,
+                tickfont: { color: textColor, size: 14, family: "monospace" },
+                title: {
+                  text: this.config.xAxisTitle || this.config.xAxis!.col!,
+                  font: { size: 14, color: textColor, family: "monospace" },
+                },
+              },
+            },
+          }
+        : { xaxis: xAxisObj, yaxis: yAxisObj };
+
       const layout = {
-        uirevision: `${this.trialId}_${this.config.xAxis}_${Object.keys(this.config.yAxes).join("_")}`,
+        uirevision: `${this.trialId}_${this.config.xAxis!.col!}_${Object.keys(this.config.yAxes).join("_")}_${this.config.plotType}`,
         title: this.config.title
           ? {
               text: this.config.title,
@@ -2008,9 +2134,8 @@ function trialViewer(trialId: string, externalUrl: string) {
                 font: { family: "monospace", size: 14, color: textColor },
                 groupclick: "togglegroup",
               },
-        xaxis: xAxisObj,
-        yaxis: yAxisObj,
-        annotations: [
+        ...polarLayout,
+        annotations: isPolar ? [] : [
           ...(this.config.annotations ?? []).map((ann) => ({
             x: ann.x,
             y: ann.y,
@@ -2068,7 +2193,7 @@ function trialViewer(trialId: string, externalUrl: string) {
               };
             }),
         ],
-        shapes: (this.config.shapes ?? []).map((s) => {
+        shapes: isPolar ? [] : (this.config.shapes ?? []).map((s) => {
           const shapeColor = s.color || tw.cyan[500];
           const base = {
             line: { color: shapeColor, width: 2, dash: s.dash ?? "solid" },
@@ -2116,6 +2241,12 @@ function trialViewer(trialId: string, externalUrl: string) {
         modeBarButtonsToRemove: ["toImage"],
         doubleClick: false as const,
       };
+      const plotEl = document.getElementById("plot-area");
+      if (plotEl && this._renderedPlotType !== this.config.plotType) {
+        Plotly.purge(plotEl);
+        this._renderedPlotType = this.config.plotType ?? null;
+        return Plotly.newPlot("plot-area", traces, layout, config);
+      }
       return Plotly.react("plot-area", traces, layout, config);
     },
   };
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/types/global.d.ts b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/types/global.d.ts
index 54bb7c70..18c6ace7 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/types/global.d.ts
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/src/types/global.d.ts
@@ -6,6 +6,8 @@ declare global {
   // Minimal Plotly surface used by trial-viewer
   const Plotly: {
     react(el: string | HTMLElement, data: object[], layout: object, config?: object): Promise<void>;
+    newPlot(el: string | HTMLElement, data: object[], layout: object, config?: object): Promise<void>;
+    purge(el: string | HTMLElement): void;
     relayout(el: string | HTMLElement, update: object): Promise<void>;
     toImage(el: string | HTMLElement, opts: object): Promise<string>;
     Plots: { resize(el: HTMLElement): void };
diff --git a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/tsconfig.json b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/tsconfig.json
index 6b84f665..f6615eb8 100644
--- a/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/tsconfig.json
+++ b/src/mujoco_mojo/utils/layers/dojo/templates/static/ts/tsconfig.json
@@ -5,7 +5,7 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "target": "ES2020",
-    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "noEmit": true,
     "sourceMap": true,
     "strict": true,