refactor: load client scripts with @JsModule instead of executeJs

observability-kit-micrometer/src/main/java/com/vaadin/observability/micrometer/MetricsServiceInitListener.java

@@ -222,6 +222,7 @@ public void serviceInit(ServiceInitEvent event) {
         boolean productionMode = event.getSource().getDeploymentConfiguration()
                 .isProductionMode();
         if (!ObservabilityLicense.isLicensed(productionMode)) {
+            ObservabilityKit.setLicenseMissing(true);
             LOGGER.warn(
                     "No valid {} license found. Observability Kit instrumentation "
                             + "will not be registered and no telemetry will be collected. "
@@ -234,14 +235,10 @@ public void serviceInit(ServiceInitEvent event) {
                 : ObservabilityKit.getObservationRegistry();
         // Record the bound registry so the dev-mode Copilot metrics panel can
         // read the live meters regardless of deployment type.
+        ObservabilityKit.setLicenseMissing(false);
         ObservabilityKit.setActiveMeterRegistry(r);
         ObservabilityUsage.markAsUsed(s);
         bind(event, r, or, s);
-        if (!productionMode) {
-            event.getSource()
-                    .addUIInitListener(uiEvent -> ObservabilityDevToolsClient
-                            .inject(uiEvent.getUI()));
-        }
     }
 
     void bind(ServiceInitEvent event, MeterRegistry registry,

observability-kit-micrometer/src/main/java/com/vaadin/observability/micrometer/ObservabilityKit.java

@@ -9,6 +9,7 @@
 package com.vaadin.observability.micrometer;
 
 import java.util.Objects;
+import java.util.concurrent.atomic.AtomicBoolean;
 import java.util.concurrent.atomic.AtomicReference;
 
 import io.micrometer.core.instrument.MeterRegistry;
@@ -55,6 +56,13 @@ public final class ObservabilityKit {
      */
     private static final AtomicReference<RecentClientErrors> RECENT_CLIENT_ERRORS = new AtomicReference<>();
 
+    /**
+     * Whether {@code serviceInit} skipped binding because the kit has no valid
+     * license. Read by the dev-mode Copilot panel, which says so rather than
+     * showing empty sections that read like an idle application.
+     */
+    private static final AtomicBoolean LICENSE_MISSING = new AtomicBoolean();
+
     private ObservabilityKit() {
     }
 
@@ -91,6 +99,24 @@ static void setActiveMeterRegistry(MeterRegistry registry) {
         ACTIVE_METER_REGISTRY.set(registry);
     }
 
+    /**
+     * Records whether the license check at {@code serviceInit} failed. Called
+     * from {@code MetricsServiceInitListener}.
+     */
+    static void setLicenseMissing(boolean missing) {
+        LICENSE_MISSING.set(missing);
+    }
+
+    /**
+     * Whether instrumentation was not bound because the kit has no valid
+     * license. Read by the dev-mode Copilot metrics panel.
+     *
+     * @return {@code true} if the last license check failed
+     */
+    public static boolean isLicenseMissing() {
+        return LICENSE_MISSING.get();
+    }
+
     /**
      * The registry instrumentation is currently publishing to, or {@code null}
      * if instrumentation has not been bound. Read by the dev-mode Copilot
@@ -171,5 +197,6 @@ static void reset() {
         RECENT_INTERACTIONS.set(null);
         RECENT_QUERIES.set(null);
         RECENT_CLIENT_ERRORS.set(null);
+        LICENSE_MISSING.set(false);
     }
 }

observability-kit-micrometer/src/main/java/com/vaadin/observability/micrometer/client/MetricsCollectorElement.java

@@ -10,38 +10,35 @@
 
 import java.util.List;
 
-import com.vaadin.flow.component.AttachEvent;
 import com.vaadin.flow.component.ClientCallable;
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.UI;
-import com.vaadin.observability.micrometer.ClientResourceLoader;
+import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.observability.micrometer.ObservabilitySettings;
 
 /**
  * Hidden helper component attached to each UI when client metrics are enabled.
  * Exposes a {@link ClientCallable} that receives batches of
- * {@link ClientSample} from the in-browser collector. Loads the client JS on
- * first attach and re-attaches itself to its UI if removed.
+ * {@link ClientSample} from the in-browser collector, whose script defines the
+ * element and starts collecting once it is attached. Re-attaches itself to its
+ * UI if removed.
  */
+@JsModule("./VaadinMetricsClient.js")
 @Tag("vaadin-metrics-collector")
 public final class MetricsCollectorElement extends Component {
 
-    private static final String CLIENT_INIT_KEY = "vaadinMetricsClientInitialized";
-    private static final String CLIENT_RESOURCE = "META-INF/frontend/VaadinMetricsClient.js";
-
     /**
      * Tells the in-browser collector whether to gather the message of an error
      * it reports. Decided on the server rather than left to its retention rule:
      * a message nothing would keep should not be buffered in the tab and posted
      * either, since the browser holds its buffer in {@code sessionStorage}
      * across a reload and an outage.
      */
-    private static final String DETAILS_PRELUDE = "window.__vaadinMicrometerDetails=%s;";
+    private static final String DETAILS_ATTRIBUTE = "details";
 
     private final transient ClientMetricsBinder binder;
     private final transient ClientRateLimiter limiter;
-    private final boolean collectErrorMessages;
 
     /**
      * @deprecated use
@@ -66,10 +63,10 @@ public MetricsCollectorElement(ClientMetricsBinder binder,
     public MetricsCollectorElement(ClientMetricsBinder binder,
             ObservabilitySettings settings, boolean collectErrorMessages) {
         this.binder = binder;
-        this.collectErrorMessages = collectErrorMessages;
         this.limiter = new ClientRateLimiter(
                 settings.getClientRatePerSession());
         getElement().getStyle().set("display", "none");
+        getElement().setAttribute(DETAILS_ATTRIBUTE, collectErrorMessages);
         addDetachListener(event -> {
             UI ui = event.getUI();
             if (ui != null && !ui.isClosing()) {
@@ -78,13 +75,6 @@ public MetricsCollectorElement(ClientMetricsBinder binder,
         });
     }
 
-    @Override
-    protected void onAttach(AttachEvent event) {
-        ClientResourceLoader.loadOnce(event.getUI(), CLIENT_INIT_KEY,
-                CLIENT_RESOURCE, MetricsCollectorElement.class,
-                DETAILS_PRELUDE.formatted(collectErrorMessages));
-    }
-
     @ClientCallable
     public void recordSamples(List<ClientSample> samples) {
         if (binder == null || samples == null || samples.isEmpty()) {

observability-kit-micrometer/src/main/java/com/vaadin/observability/micrometer/devtools/ObservabilityDevToolsHandler.java

@@ -27,6 +27,7 @@
 
 import com.vaadin.base.devserver.DevToolsInterface;
 import com.vaadin.base.devserver.DevToolsMessageHandler;
+import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.observability.micrometer.ObservabilityKit;
 import com.vaadin.observability.micrometer.insights.InsightsService;
 
@@ -46,7 +47,11 @@
  * meter table is only worth polling while the panel is open, whereas the panel
  * watches for new insights whether or not anyone is looking at it, and that
  * background poll should not snapshot the whole registry every time.
+ * <p>
+ * The panel itself is the development-only module declared here, which the
+ * frontend build picks up because this class is a dev-tools entry point.
  */
+@JsModule(value = "./VaadinObservabilityDevTools.js", developmentOnly = true)
 public class ObservabilityDevToolsHandler implements DevToolsMessageHandler {
 
     static final String COMMAND_REFRESH = "observability-kit-refresh";
@@ -82,6 +87,9 @@ public boolean handleMessage(String command, JsonNode data,
     private void sendSnapshot(DevToolsInterface devToolsInterface) {
         Map<String, Object> payload = new LinkedHashMap<>();
         payload.put("timestamp", System.currentTimeMillis());
+        // The panel is shown whether or not the kit is licensed; this is what
+        // lets it say why its sections are empty.
+        payload.put("licensed", !ObservabilityKit.isLicenseMissing());
         payload.put("meters", snapshot());
         devToolsInterface.send(COMMAND_METRICS, payload);
     }

observability-kit-micrometer/src/main/resources/META-INF/frontend/VaadinMetricsClient.js

@@ -1,16 +1,19 @@
 // Copyright 2000-2026 Vaadin Ltd.
 // Licensed under the Vaadin Commercial License and Service Terms.
 //
-// In-browser collector for observability-kit. Injected per UI by
-// MetricsCollectorElement via Page.executeJs. The IIFE is idempotent so the
-// re-attach path does not double-install hooks.
-(function () {
+// In-browser collector for observability-kit, bundled through the @JsModule
+// on MetricsCollectorElement. Loading the module only defines the
+// <vaadin-metrics-collector> element; nothing is collected until the server
+// attaches one, which it does only when client metrics are enabled. The
+// install is idempotent so the re-attach path does not double-install hooks.
+var COLLECTOR_TAG = 'vaadin-metrics-collector';
+
+function installCollector() {
   if (window.__vaadinMicrometerInstalled) {
     return;
   }
   window.__vaadinMicrometerInstalled = true;
 
-  var COLLECTOR_TAG = 'vaadin-metrics-collector';
   var BUFFER_MAX = 200;
   var FLUSH_INTERVAL_MS = 5000;
   // How long a handed-over batch may go unanswered before a flush takes it
@@ -473,15 +476,17 @@
     return text.length > DETAIL_MAX ? text.slice(0, DETAIL_MAX) : text;
   }
 
-  // Whether the application asked for error messages to be collected. Set by
-  // the server ahead of this script. The message is gathered only when it is
-  // on, rather than gathered and discarded later: a browser error message can
-  // quote whatever the page was working with, and buffering one puts it in
-  // sessionStorage and then on the wire, neither of which a server-side
-  // retention rule can undo. The server applies the same rule again, for the
-  // page that was already open when the setting changed.
+  // Whether the application asked for error messages to be collected, which the
+  // server says with the `details` attribute on the collector element. The
+  // message is gathered only when it is on, rather than gathered and discarded
+  // later: a browser error message can quote whatever the page was working
+  // with, and buffering one puts it in sessionStorage and then on the wire,
+  // neither of which a server-side retention rule can undo. The server applies
+  // the same rule again, for the page that was already open when the setting
+  // changed.
   function detailsEnabled() {
-    return window.__vaadinMicrometerDetails === true;
+    var el = document.querySelector(COLLECTOR_TAG);
+    return !!el && el.hasAttribute('details');
   }
 
 
@@ -1269,4 +1274,15 @@
       return buffer.length;
     }
   };
-})();
+}
+
+if (!customElements.get(COLLECTOR_TAG)) {
+  customElements.define(
+    COLLECTOR_TAG,
+    class extends HTMLElement {
+      connectedCallback() {
+        installCollector();
+      }
+    }
+  );
+}