@grafana/scenes 6.35.2--canary.1148.17723712400.0 → 6.35.3

package/dist/index.d.ts

@@ -1318,6 +1318,13 @@ declare class UserActionEvent extends BusEventWithPayload<UserActionEventPayload
  */
 declare function lookupVariable(name: string, sceneObject: SceneObject): SceneVariable | null;
 
+interface LongFrameEvent {
+    duration: number;
+    timestamp: number;
+    method: 'manual' | 'loaf';
+}
+type LongFrameCallback = (event: LongFrameEvent) => void;
+
 interface QueryResultWithState {
     state: LoadingState;
 }
@@ -1328,6 +1335,9 @@ interface SceneQueryControllerEntry {
     cancel?: () => void;
 }
 type SceneQueryControllerEntryType = 'data' | 'annotations' | 'variable' | 'alerts' | 'plugin' | string;
+
+
+
 interface SceneInteractionProfileEvent {
     origin: string;
     duration: number;
@@ -1338,6 +1348,8 @@ interface SceneInteractionProfileEvent {
     crumbs: string[];
     startTs: number;
     endTs: number;
+    longFramesCount: number;
+    longFramesTotalTime: number;
 }
 interface SceneQueryStateControllerState extends SceneObjectState {
     isRunning: boolean;
@@ -1533,6 +1545,23 @@ declare class PanelContextEventBus implements EventBus {
     newScopedBus(key: string, filter: EventFilterOptions): EventBus;
 }
 
+/**
+ * SceneRenderProfiler tracks dashboard interaction performance including:
+ * - Total interaction duration
+ * - Network time
+ * - Long frame detection (50ms threshold) during interaction using LoAF API (default) or manual tracking (fallback)
+ * - Slow frame detection (30ms threshold) for tail recording after interaction
+ *
+ * Long frame detection during interaction:
+ * - 50ms threshold aligned with LoAF API default
+ * - LoAF API preferred (Chrome 123+) with manual fallback
+ * - Provides script attribution when using LoAF API
+ *
+ * Slow frame detection for tail recording:
+ * - 30ms threshold for post-interaction monitoring
+ * - Manual frame timing measurement
+ * - Captures rendering delays after user interaction completes
+ */
 declare class SceneRenderProfiler {
     #private;
     private queryController?;

package/dist/index.js

@@ -137,21 +137,21 @@ class UserActionEvent extends data.BusEventWithPayload {
 }
 UserActionEvent.type = "scene-object-user-action";
 
-var __typeError$4 = (msg) => {
+var __typeError$5 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
+var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
 var _ref;
 class SceneObjectRef {
   constructor(ref) {
-    __privateAdd$4(this, _ref);
-    __privateSet$4(this, _ref, ref);
+    __privateAdd$5(this, _ref);
+    __privateSet$5(this, _ref, ref);
   }
   resolve() {
-    return __privateGet$4(this, _ref);
+    return __privateGet$5(this, _ref);
   }
 }
 _ref = new WeakMap();
@@ -599,14 +599,23 @@ function writeSceneLog(logger, message, ...rest) {
     console.log(`${logger}: `, message, ...rest);
   }
 }
+function writeSceneLogStyled(logger, message, style, ...rest) {
+  let loggingEnabled = false;
+  if (typeof window !== "undefined") {
+    loggingEnabled = localStorage.getItem("grafana.debug.scenes") === "true";
+  }
+  if (loggingEnabled) {
+    console.log(`%c${logger}: ${message}`, style, ...rest);
+  }
+}
 
-var __typeError$3 = (msg) => {
+var __typeError$4 = (msg) => {
   throw TypeError(msg);
 };
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
+var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
+var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
 var _running, _tryCompleteProfileFrameId;
 function isQueryController(s) {
   return "isQueryController" in s;
@@ -616,10 +625,10 @@ class SceneQueryController extends SceneObjectBase {
     super({ ...state, isRunning: false });
     this.profiler = profiler;
     this.isQueryController = true;
-    __privateAdd$3(this, _running, /* @__PURE__ */ new Set());
-    __privateAdd$3(this, _tryCompleteProfileFrameId, null);
+    __privateAdd$4(this, _running, /* @__PURE__ */ new Set());
+    __privateAdd$4(this, _tryCompleteProfileFrameId, null);
     this.runningQueriesCount = () => {
-      return __privateGet$3(this, _running).size;
+      return __privateGet$4(this, _running).size;
     };
     if (profiler) {
       this.profiler = profiler;
@@ -628,7 +637,7 @@ class SceneQueryController extends SceneObjectBase {
     this.addActivationHandler(() => {
       var _a;
       (_a = this.profiler) == null ? void 0 : _a.setQueryController(this);
-      return () => __privateGet$3(this, _running).clear();
+      return () => __privateGet$4(this, _running).clear();
     });
   }
   startProfile(name) {
@@ -643,19 +652,19 @@ class SceneQueryController extends SceneObjectBase {
     (_a = this.profiler) == null ? void 0 : _a.cancelProfile();
   }
   queryStarted(entry) {
-    __privateGet$3(this, _running).add(entry);
+    __privateGet$4(this, _running).add(entry);
     this.changeRunningQueryCount(1, entry);
     if (!this.state.isRunning) {
       this.setState({ isRunning: true });
     }
   }
   queryCompleted(entry) {
-    if (!__privateGet$3(this, _running).has(entry)) {
+    if (!__privateGet$4(this, _running).has(entry)) {
       return;
     }
-    __privateGet$3(this, _running).delete(entry);
+    __privateGet$4(this, _running).delete(entry);
     this.changeRunningQueryCount(-1);
-    if (__privateGet$3(this, _running).size === 0) {
+    if (__privateGet$4(this, _running).size === 0) {
       this.setState({ isRunning: false });
     }
   }
@@ -672,10 +681,10 @@ class SceneQueryController extends SceneObjectBase {
       }
     }
     if (this.state.enableProfiling) {
-      if (__privateGet$3(this, _tryCompleteProfileFrameId)) {
-        cancelAnimationFrame(__privateGet$3(this, _tryCompleteProfileFrameId));
+      if (__privateGet$4(this, _tryCompleteProfileFrameId)) {
+        cancelAnimationFrame(__privateGet$4(this, _tryCompleteProfileFrameId));
       }
-      __privateSet$3(this, _tryCompleteProfileFrameId, requestAnimationFrame(() => {
+      __privateSet$4(this, _tryCompleteProfileFrameId, requestAnimationFrame(() => {
         var _a2;
         (_a2 = this.profiler) == null ? void 0 : _a2.tryCompletingProfile();
       }));
@@ -683,7 +692,7 @@ class SceneQueryController extends SceneObjectBase {
   }
   cancelAll() {
     var _a;
-    for (const entry of __privateGet$3(this, _running).values()) {
+    for (const entry of __privateGet$4(this, _running).values()) {
       (_a = entry.cancel) == null ? void 0 : _a.call(entry);
     }
   }
@@ -853,6 +862,187 @@ function isValid$1(value, roundUp, timeZone) {
   return parsed.isValid();
 }
 
+var __typeError$3 = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
+var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
+var _isTracking, _callback, _frameTrackingId, _lastFrameTime, _loafObserver;
+const LONG_FRAME_THRESHOLD = 50;
+class LongFrameDetector {
+  constructor() {
+    __privateAdd$3(this, _isTracking, false);
+    __privateAdd$3(this, _callback, null);
+    // Manual tracking state
+    __privateAdd$3(this, _frameTrackingId, null);
+    __privateAdd$3(this, _lastFrameTime, 0);
+    // LoAF tracking state
+    __privateAdd$3(this, _loafObserver, null);
+    /**
+     * Measure frame durations using requestAnimationFrame
+     */
+    this.measureFrames = () => {
+      if (!__privateGet$3(this, _isTracking)) {
+        return;
+      }
+      const currentFrameTime = performance.now();
+      const frameLength = currentFrameTime - __privateGet$3(this, _lastFrameTime);
+      if (frameLength > LONG_FRAME_THRESHOLD) {
+        const event = {
+          duration: frameLength,
+          timestamp: currentFrameTime,
+          method: "manual"
+        };
+        if (__privateGet$3(this, _callback)) {
+          __privateGet$3(this, _callback).call(this, event);
+        }
+        if (typeof performance !== "undefined" && performance.mark && performance.measure) {
+          const frameId = `long-frame-manual-${currentFrameTime.toFixed(0)}`;
+          const startMarkName = `${frameId}-start`;
+          const endMarkName = `${frameId}-end`;
+          const measureName = `Long Frame (Manual): ${frameLength.toFixed(1)}ms`;
+          try {
+            performance.mark(startMarkName, { startTime: currentFrameTime - frameLength });
+            performance.mark(endMarkName, { startTime: currentFrameTime });
+            performance.measure(measureName, startMarkName, endMarkName);
+          } catch (e) {
+            performance.mark(measureName);
+          }
+        }
+        writeSceneLog(
+          "LongFrameDetector",
+          `Long frame detected (manual): ${frameLength}ms (threshold: ${LONG_FRAME_THRESHOLD}ms)`
+        );
+      }
+      __privateSet$3(this, _lastFrameTime, currentFrameTime);
+      if (__privateGet$3(this, _isTracking)) {
+        __privateSet$3(this, _frameTrackingId, requestAnimationFrame(this.measureFrames));
+      }
+    };
+  }
+  /**
+   * Check if LoAF API is available in the browser
+   */
+  isLoAFAvailable() {
+    return typeof PerformanceObserver !== "undefined" && PerformanceObserver.supportedEntryTypes && PerformanceObserver.supportedEntryTypes.includes("long-animation-frame");
+  }
+  /**
+   * Start detecting long frames and call the provided callback when they occur
+   */
+  start(callback) {
+    if (__privateGet$3(this, _isTracking)) {
+      writeSceneLog("LongFrameDetector", "Already tracking frames, stopping previous session");
+      this.stop();
+    }
+    __privateSet$3(this, _callback, callback);
+    __privateSet$3(this, _isTracking, true);
+    if (this.isLoAFAvailable()) {
+      this.startLoAFTracking();
+    } else {
+      this.startManualFrameTracking();
+    }
+    writeSceneLog(
+      "LongFrameDetector",
+      `Started tracking with ${this.isLoAFAvailable() ? "LoAF API" : "manual"} method, threshold: ${LONG_FRAME_THRESHOLD}ms`
+    );
+  }
+  /**
+   * Stop detecting long frames
+   */
+  stop() {
+    if (!__privateGet$3(this, _isTracking)) {
+      return;
+    }
+    __privateSet$3(this, _isTracking, false);
+    __privateSet$3(this, _callback, null);
+    this.stopLoAFTracking();
+    this.stopManualFrameTracking();
+  }
+  /**
+   * Check if currently tracking frames
+   */
+  isTracking() {
+    return __privateGet$3(this, _isTracking);
+  }
+  /**
+   * Start tracking using the Long Animation Frame API
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongAnimationFrameTiming
+   */
+  startLoAFTracking() {
+    if (!this.isLoAFAvailable()) {
+      writeSceneLog("LongFrameDetector", "LoAF API not available, falling back to manual tracking");
+      this.startManualFrameTracking();
+      return;
+    }
+    try {
+      __privateSet$3(this, _loafObserver, new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          const event = {
+            duration: entry.duration,
+            timestamp: entry.startTime,
+            method: "loaf"
+          };
+          if (__privateGet$3(this, _callback)) {
+            __privateGet$3(this, _callback).call(this, event);
+          }
+          if (typeof performance !== "undefined" && performance.mark && performance.measure) {
+            const frameId = `long-frame-${entry.startTime.toFixed(0)}`;
+            const startMarkName = `${frameId}-start`;
+            const endMarkName = `${frameId}-end`;
+            const measureName = `Long Frame (LoAF): ${entry.duration.toFixed(1)}ms`;
+            try {
+              performance.mark(startMarkName, { startTime: entry.startTime });
+              performance.mark(endMarkName, { startTime: entry.startTime + entry.duration });
+              performance.measure(measureName, startMarkName, endMarkName);
+            } catch (e) {
+              performance.mark(measureName);
+            }
+          }
+          writeSceneLog("LongFrameDetector", `Long frame detected (LoAF): ${entry.duration}ms at ${entry.startTime}ms`);
+        }
+      }));
+      __privateGet$3(this, _loafObserver).observe({ type: "long-animation-frame", buffered: false });
+    } catch (error) {
+      writeSceneLog("LongFrameDetector", "Failed to start LoAF tracking, falling back to manual:", error);
+      this.startManualFrameTracking();
+    }
+  }
+  /**
+   * Stop LoAF tracking
+   */
+  stopLoAFTracking() {
+    if (__privateGet$3(this, _loafObserver)) {
+      __privateGet$3(this, _loafObserver).disconnect();
+      __privateSet$3(this, _loafObserver, null);
+      writeSceneLog("LongFrameDetector", "Stopped LoAF tracking");
+    }
+  }
+  /**
+   * Start manual frame tracking using requestAnimationFrame
+   */
+  startManualFrameTracking() {
+    __privateSet$3(this, _lastFrameTime, performance.now());
+    __privateSet$3(this, _frameTrackingId, requestAnimationFrame(() => this.measureFrames()));
+  }
+  /**
+   * Stop manual frame tracking
+   */
+  stopManualFrameTracking() {
+    if (__privateGet$3(this, _frameTrackingId)) {
+      cancelAnimationFrame(__privateGet$3(this, _frameTrackingId));
+      __privateSet$3(this, _frameTrackingId, null);
+      writeSceneLog("LongFrameDetector", "Stopped manual frame tracking");
+    }
+  }
+}
+_isTracking = new WeakMap();
+_callback = new WeakMap();
+_frameTrackingId = new WeakMap();
+_lastFrameTime = new WeakMap();
+_loafObserver = new WeakMap();
+
 var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
@@ -860,9 +1050,17 @@ var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Ca
 var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
-var _profileInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _visibilityChangeHandler;
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet$2(obj, member, value);
+  },
+  get _() {
+    return __privateGet$2(obj, member, getter);
+  }
+});
+var _profileInProgress, _profileStartTs, _trailAnimationFrameId, _recordedTrailingSpans, _longFrameDetector, _longFramesCount, _longFramesTotalTime, _visibilityChangeHandler;
 const POST_STORM_WINDOW = 2e3;
-const SPAN_THRESHOLD = 30;
+const DEFAULT_LONG_FRAME_THRESHOLD = 30;
 const TAB_INACTIVE_THRESHOLD = 1e3;
 class SceneRenderProfiler {
   constructor(queryController) {
@@ -872,9 +1070,13 @@ class SceneRenderProfiler {
     __privateAdd$2(this, _trailAnimationFrameId, null);
     // Will keep measured lengths trailing frames
     __privateAdd$2(this, _recordedTrailingSpans, []);
+    // Long frame tracking
+    __privateAdd$2(this, _longFrameDetector);
+    __privateAdd$2(this, _longFramesCount, 0);
+    __privateAdd$2(this, _longFramesTotalTime, 0);
     __privateAdd$2(this, _visibilityChangeHandler, null);
     this.measureTrailingFrames = (measurementStartTs, lastFrameTime, profileStartTs) => {
-      var _a;
+      var _a, _b, _c, _d;
       const currentFrameTime = performance.now();
       const frameLength = currentFrameTime - lastFrameTime;
       if (frameLength > TAB_INACTIVE_THRESHOLD) {
@@ -893,18 +1095,60 @@ class SceneRenderProfiler {
         const slowFrames = processRecordedSpans(__privateGet$2(this, _recordedTrailingSpans));
         const slowFramesTime = slowFrames.reduce((acc, val) => acc + val, 0);
         writeSceneLog(
-          this.constructor.name,
-          "Profile tail recorded, slow frames duration:",
-          slowFramesTime,
-          slowFrames,
-          __privateGet$2(this, _profileInProgress)
+          "SceneRenderProfiler",
+          `Profile tail recorded - Slow frames: ${slowFramesTime.toFixed(1)}ms (${slowFrames.length} frames)`
         );
+        writeSceneLog("", `  \u251C\u2500 Origin: ${((_a = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _a.origin) || "unknown"}`);
+        writeSceneLog("", `  \u2514\u2500 Crumbs:`, ((_b = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _b.crumbs) || []);
         __privateSet$2(this, _recordedTrailingSpans, []);
         const profileDuration = measurementStartTs - profileStartTs;
-        writeSceneLog(
-          this.constructor.name,
-          "Stoped recording, total measured time (network included):",
-          profileDuration + slowFramesTime
+        if (typeof performance !== "undefined" && performance.mark) {
+          const profileName = ((_c = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _c.origin) || "unknown";
+          const totalTime = profileDuration + slowFramesTime;
+          performance.mark(`Dashboard Profile End: ${profileName}`);
+          const startMarkName = `Dashboard Profile Start: ${profileName}`;
+          try {
+            performance.measure(
+              `Dashboard Profile: ${profileName} (${totalTime.toFixed(1)}ms)`,
+              startMarkName,
+              `Dashboard Profile End: ${profileName}`
+            );
+          } catch (e) {
+            performance.mark(`Dashboard Profile Complete: ${profileName} (${totalTime.toFixed(1)}ms)`);
+          }
+          if (slowFrames.length > 0) {
+            const slowFramesMarkName = `Slow Frames Summary: ${slowFrames.length} frames (${slowFramesTime.toFixed(
+              1
+            )}ms)`;
+            performance.mark(slowFramesMarkName);
+            slowFrames.forEach((frameTime, index) => {
+              if (frameTime > 16) {
+                try {
+                  const frameStartTime = __privateGet$2(this, _profileStartTs) + profileDuration + (index > 0 ? slowFrames.slice(0, index).reduce((sum, t) => sum + t, 0) : 0);
+                  const frameId = `slow-frame-${index}`;
+                  const frameStartMark = `${frameId}-start`;
+                  const frameEndMark = `${frameId}-end`;
+                  performance.mark(frameStartMark, { startTime: frameStartTime });
+                  performance.mark(frameEndMark, { startTime: frameStartTime + frameTime });
+                  performance.measure(`Slow Frame ${index + 1}: ${frameTime.toFixed(1)}ms`, frameStartMark, frameEndMark);
+                } catch (e) {
+                  performance.mark(`Slow Frame ${index + 1}: ${frameTime.toFixed(1)}ms`);
+                }
+              }
+            });
+          }
+        }
+        const completionTimestamp = performance.now();
+        writeSceneLog("SceneRenderProfiler", "Profile completed");
+        writeSceneLog("", `  \u251C\u2500 Timestamp: ${completionTimestamp.toFixed(1)}ms`);
+        writeSceneLog("", `  \u251C\u2500 Total time: ${(profileDuration + slowFramesTime).toFixed(1)}ms`);
+        writeSceneLog("", `  \u251C\u2500 Slow frames: ${slowFramesTime}ms (${slowFrames.length} frames)`);
+        writeSceneLog("", `  \u2514\u2500 Long frames: ${__privateGet$2(this, _longFramesTotalTime)}ms (${__privateGet$2(this, _longFramesCount)} frames)`);
+        __privateGet$2(this, _longFrameDetector).stop();
+        writeSceneLogStyled(
+          "SceneRenderProfiler",
+          `Stopped long frame detection - profile complete at ${completionTimestamp.toFixed(1)}ms`,
+          "color: #00CC00; font-weight: bold;"
         );
         __privateSet$2(this, _trailAnimationFrameId, null);
         const profileEndTs = profileStartTs + profileDuration + slowFramesTime;
@@ -916,7 +1160,7 @@ class SceneRenderProfiler {
           end: profileEndTs
         });
         const networkDuration = captureNetwork(profileStartTs, profileEndTs);
-        if (((_a = this.queryController) == null ? void 0 : _a.state.onProfileComplete) && __privateGet$2(this, _profileInProgress)) {
+        if (((_d = this.queryController) == null ? void 0 : _d.state.onProfileComplete) && __privateGet$2(this, _profileInProgress)) {
           this.queryController.state.onProfileComplete({
             origin: __privateGet$2(this, _profileInProgress).origin,
             crumbs: __privateGet$2(this, _profileInProgress).crumbs,
@@ -924,6 +1168,8 @@ class SceneRenderProfiler {
             networkDuration,
             startTs: profileStartTs,
             endTs: profileEndTs,
+            longFramesCount: __privateGet$2(this, _longFramesCount),
+            longFramesTotalTime: __privateGet$2(this, _longFramesTotalTime),
             // @ts-ignore
             jsHeapSizeLimit: performance.memory ? performance.memory.jsHeapSizeLimit : 0,
             // @ts-ignore
@@ -943,6 +1189,7 @@ class SceneRenderProfiler {
         }
       }
     };
+    __privateSet$2(this, _longFrameDetector, new LongFrameDetector());
     this.setupVisibilityChangeHandler();
   }
   setQueryController(queryController) {
@@ -967,6 +1214,7 @@ class SceneRenderProfiler {
       document.removeEventListener("visibilitychange", __privateGet$2(this, _visibilityChangeHandler));
       __privateSet$2(this, _visibilityChangeHandler, null);
     }
+    __privateGet$2(this, _longFrameDetector).stop();
     this.cancelProfile();
   }
   startProfile(name) {
@@ -996,14 +1244,32 @@ class SceneRenderProfiler {
    *               - "clean": Started when no profile is currently active
    */
   _startNewProfile(name, force = false) {
+    var _a;
     __privateSet$2(this, _profileInProgress, { origin: name, crumbs: [] });
     __privateSet$2(this, _profileStartTs, performance.now());
-    writeSceneLog(
+    __privateSet$2(this, _longFramesCount, 0);
+    __privateSet$2(this, _longFramesTotalTime, 0);
+    if (typeof performance !== "undefined" && performance.mark) {
+      const markName = `Dashboard Profile Start: ${name}`;
+      performance.mark(markName);
+    }
+    writeSceneLogStyled(
       "SceneRenderProfiler",
       `Profile started[${force ? "forced" : "clean"}]`,
-      __privateGet$2(this, _profileInProgress),
-      __privateGet$2(this, _profileStartTs)
+      "color: #FFCC00; font-weight: bold;"
     );
+    writeSceneLog("", `  \u251C\u2500 Origin: ${((_a = __privateGet$2(this, _profileInProgress)) == null ? void 0 : _a.origin) || "unknown"}`);
+    writeSceneLog("", `  \u2514\u2500 Timestamp: ${__privateGet$2(this, _profileStartTs).toFixed(1)}ms`);
+    __privateGet$2(this, _longFrameDetector).start((event) => {
+      if (!__privateGet$2(this, _profileInProgress) || !__privateGet$2(this, _profileStartTs)) {
+        return;
+      }
+      if (event.timestamp < __privateGet$2(this, _profileStartTs)) {
+        return;
+      }
+      __privateWrapper(this, _longFramesCount)._++;
+      __privateSet$2(this, _longFramesTotalTime, __privateGet$2(this, _longFramesTotalTime) + event.duration);
+    });
   }
   recordProfileTail(measurementStartTime, profileStartTs) {
     __privateSet$2(this, _trailAnimationFrameId, requestAnimationFrame(
@@ -1014,7 +1280,7 @@ class SceneRenderProfiler {
     var _a;
     writeSceneLog("SceneRenderProfiler", "Trying to complete profile", __privateGet$2(this, _profileInProgress));
     if (((_a = this.queryController) == null ? void 0 : _a.runningQueriesCount()) === 0 && __privateGet$2(this, _profileInProgress)) {
-      writeSceneLog("SceneRenderProfiler", "All queries completed, stopping profile");
+      writeSceneLog("SceneRenderProfiler", "All queries completed, starting tail measurement");
       this.recordProfileTail(performance.now(), __privateGet$2(this, _profileStartTs));
     }
   }
@@ -1037,7 +1303,11 @@ class SceneRenderProfiler {
         cancelAnimationFrame(__privateGet$2(this, _trailAnimationFrameId));
         __privateSet$2(this, _trailAnimationFrameId, null);
       }
+      __privateGet$2(this, _longFrameDetector).stop();
+      writeSceneLog("SceneRenderProfiler", "Stopped long frame detection - profile cancelled");
       __privateSet$2(this, _recordedTrailingSpans, []);
+      __privateSet$2(this, _longFramesCount, 0);
+      __privateSet$2(this, _longFramesTotalTime, 0);
     }
   }
   addCrumb(crumb) {
@@ -1051,10 +1321,13 @@ _profileInProgress = new WeakMap();
 _profileStartTs = new WeakMap();
 _trailAnimationFrameId = new WeakMap();
 _recordedTrailingSpans = new WeakMap();
+_longFrameDetector = new WeakMap();
+_longFramesCount = new WeakMap();
+_longFramesTotalTime = new WeakMap();
 _visibilityChangeHandler = new WeakMap();
 function processRecordedSpans(spans) {
   for (let i = spans.length - 1; i >= 0; i--) {
-    if (spans[i] > SPAN_THRESHOLD) {
+    if (spans[i] > DEFAULT_LONG_FRAME_THRESHOLD) {
       return spans.slice(0, i + 1);
     }
   }