@optifye/dashboard-core 6.12.15 → 6.12.16

package/dist/automation.js

@@ -0,0 +1,2312 @@
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var Hls = require('hls.js');
+require('mixpanel-browser');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Hls__default = /*#__PURE__*/_interopDefault(Hls);
+
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/lib/types/efficiencyLegend.ts
+var DEFAULT_EFFICIENCY_LEGEND = {
+  green_min: 80,
+  green_max: 100,
+  yellow_min: 70,
+  yellow_max: 79,
+  red_min: 0,
+  red_max: 69,
+  critical_threshold: 50
+};
+function getEfficiencyColor(efficiency, legend = DEFAULT_EFFICIENCY_LEGEND) {
+  if (efficiency >= legend.green_min) {
+    return "green";
+  } else if (efficiency >= legend.yellow_min) {
+    return "yellow";
+  } else {
+    return "red";
+  }
+}
+var _getSupabaseInstance = () => {
+  {
+    throw new Error(
+      "Supabase client has not been initialized in @optifye/dashboard-core. Ensure your application is wrapped in the <SupabaseProvider> component from @optifye/dashboard-core and that it is rendered before any hook or service using Supabase is called."
+    );
+  }
+};
+
+// src/lib/services/hlsAuthService.ts
+async function getAuthTokenForHls(supabase) {
+  try {
+    const { data: { session } } = await supabase.auth.getSession();
+    if (!session?.access_token) {
+      console.warn("[HLS Auth] No active session, R2 streaming may fail");
+      return null;
+    }
+    console.log("[HLS Auth] Retrieved token for HLS.js requests");
+    return session.access_token;
+  } catch (error) {
+    console.error("[HLS Auth] Error getting auth token:", error);
+    return null;
+  }
+}
+
+// src/lib/utils/r2Detection.ts
+function isR2WorkerUrl(url, r2WorkerDomain) {
+  if (!url || !r2WorkerDomain) return false;
+  try {
+    const workerDomain = new URL(r2WorkerDomain).hostname;
+    return url.includes(workerDomain);
+  } catch {
+    return url.includes(r2WorkerDomain.replace(/https?:\/\//, ""));
+  }
+}
+
+// src/lib/utils/browser.ts
+function isSafari() {
+  if (typeof window === "undefined") return false;
+  const ua = window.navigator.userAgent;
+  const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
+  const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
+  return isSafariUA || isIOS;
+}
+
+// src/lib/hooks/useHlsStream.ts
+var HLS_CONFIG = {
+  // Buffer configuration for 60s segments
+  maxBufferLength: 180,
+  // Allow ~3 segments buffered for stability
+  maxMaxBufferLength: 600,
+  // 10 minutes max buffer
+  maxBufferSize: 120 * 1e3 * 1e3,
+  // 120MB buffer size
+  maxBufferHole: 0.5,
+  // Tolerate minor timestamp gaps
+  // Low latency optimizations
+  lowLatencyMode: false,
+  // We prioritize stability over latency
+  enableWorker: true,
+  // Offload processing to web worker
+  // Aggressive preloading
+  startLevel: -1,
+  // Auto-select quality
+  autoStartLoad: true,
+  startPosition: -1,
+  // Start at live edge when available
+  // Network optimization
+  manifestLoadingMaxRetry: 6,
+  levelLoadingMaxRetry: 6,
+  fragLoadingMaxRetry: 6,
+  manifestLoadingRetryDelay: 250,
+  // Faster retries
+  levelLoadingRetryDelay: 250,
+  fragLoadingRetryDelay: 250,
+  manifestLoadingTimeOut: 9e4,
+  levelLoadingTimeOut: 9e4,
+  fragLoadingTimeOut: 9e4,
+  maxConcurrentLoading: 2,
+  // ABR (Adaptive Bitrate) settings
+  abrEwmaFastLive: 3,
+  abrEwmaSlowLive: 9,
+  abrEwmaFastVoD: 3,
+  abrEwmaSlowVoD: 9,
+  abrEwmaDefaultEstimate: 1e6,
+  // 1 Mbps default
+  abrBandWidthFactor: 0.95,
+  abrBandWidthUpFactor: 0.7,
+  abrMaxWithRealBitrate: true,
+  // Fragment loading optimization
+  maxFragLookUpTolerance: 1,
+  // Enable all optimizations
+  enableCEA708Captions: false,
+  // Disable if not needed
+  enableWebVTT: false,
+  // Disable if not needed
+  enableIMSC1: false,
+  // Disable if not needed
+  // Progressive loading
+  progressive: true,
+  liveSyncDurationCount: 2,
+  // Stay ~2 segments behind live for a full segment buffer
+  liveMaxLatencyDurationCount: 3,
+  // Cap drift to ~3 segments
+  maxLiveSyncPlaybackRate: 1
+  // Do not chase live edge; prioritize continuity
+};
+var failedUrls = /* @__PURE__ */ new Map();
+var MAX_FAILURES_PER_URL = 3;
+var FAILURE_EXPIRY_MS = 5 * 60 * 1e3;
+var LIVE_RELOAD_MIN_INTERVAL_MS = 15 * 1e3;
+var DEFAULT_LIVE_OFFSET_SECONDS = 120;
+var DEFAULT_MAX_MANIFEST_AGE_MS = 10 * 60 * 1e3;
+var SEGMENT_MAX_AGE_MS = 10 * 60 * 1e3;
+var SEGMENT_TIMESTAMP_REGEX = /(\d{8}T\d{6}Z)(?=\.ts(?:$|[?#]))/;
+var STALE_MANIFEST_POLL_INITIAL_DELAY_MS = 15 * 1e3;
+var STALE_MANIFEST_POLL_MAX_DELAY_MS = 60 * 1e3;
+function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
+  const latestSrcRef = React.useRef(src);
+  latestSrcRef.current = src;
+  const shouldPlayRef = React.useRef(shouldPlay);
+  shouldPlayRef.current = shouldPlay;
+  const onFatalErrorRef = React.useRef(onFatalError);
+  onFatalErrorRef.current = onFatalError;
+  const urlFailure = failedUrls.get(src);
+  const isPermanentlyFailed = urlFailure?.permanentlyFailed || false;
+  const cleanupFailedUrls = () => {
+    const now = Date.now();
+    const expiredUrls = [];
+    failedUrls.forEach((failure, url) => {
+      if (now - failure.timestamp > FAILURE_EXPIRY_MS) {
+        expiredUrls.push(url);
+      }
+    });
+    expiredUrls.forEach((url) => {
+      console.log(`[HLS] Removing expired failure entry for: ${url}`);
+      failedUrls.delete(url);
+    });
+  };
+  const [restartKey, setRestartKey] = React.useState(0);
+  const [isStale, setIsStale] = React.useState(false);
+  const [staleReason, setStaleReason] = React.useState(null);
+  const hlsRef = React.useRef(null);
+  const stallCheckIntervalRef = React.useRef(null);
+  const noProgressTimerRef = React.useRef(null);
+  const lastTimeUpdateRef = React.useRef(0);
+  const softRestartCountRef = React.useRef(0);
+  const isNativeHlsRef = React.useRef(false);
+  const playbackRateIntervalRef = React.useRef(null);
+  const waitingTimerRef = React.useRef(null);
+  const playRetryTimerRef = React.useRef(null);
+  const playRetryCountRef = React.useRef(0);
+  const manifestWatchdogRef = React.useRef(null);
+  const nativeFreshnessIntervalRef = React.useRef(null);
+  const lastHiddenAtRef = React.useRef(null);
+  const manifestRetryTimerRef = React.useRef(null);
+  const manifestRetryDelayRef = React.useRef(5e3);
+  const lastLiveReloadRef = React.useRef(0);
+  const isR2StreamRef = React.useRef(false);
+  const nativeStreamUrlRef = React.useRef(null);
+  const forcedLiveStartRef = React.useRef(false);
+  const activeStreamUrlRef = React.useRef(null);
+  const targetDurationRef = React.useRef(null);
+  const lastManifestLoadRef = React.useRef(0);
+  const lastFragLoadRef = React.useRef(0);
+  const lastFragSnRef = React.useRef(null);
+  const lastWindowStartSnRef = React.useRef(null);
+  const lastWindowEndSnRef = React.useRef(null);
+  const lastFragTimeoutSnRef = React.useRef(null);
+  const lastFragTimeoutAtRef = React.useRef(null);
+  const fragTimeoutCountRef = React.useRef(0);
+  const lastManifestEndSnRef = React.useRef(null);
+  const lastManifestEndSnUpdatedAtRef = React.useRef(null);
+  const staleManifestTriggeredRef = React.useRef(false);
+  const staleManifestUrlRef = React.useRef(null);
+  const staleManifestEndSnRef = React.useRef(null);
+  const staleManifestPollTimerRef = React.useRef(null);
+  const staleManifestPollDelayRef = React.useRef(STALE_MANIFEST_POLL_INITIAL_DELAY_MS);
+  const lastSegmentTimestampMsRef = React.useRef(null);
+  const authTokenRef = React.useRef(null);
+  const proxyEnabled = process.env.NEXT_PUBLIC_HLS_PROXY_ENABLED === "true";
+  const proxyBaseUrl = (process.env.NEXT_PUBLIC_HLS_PROXY_URL || "/api/stream").replace(/\/$/, "");
+  const debugEnabled = process.env.NEXT_PUBLIC_HLS_DEBUG === "true";
+  const maxManifestAgeMs = (() => {
+    const raw = process.env.NEXT_PUBLIC_HLS_MAX_MANIFEST_AGE_MS;
+    const parsed = raw ? Number(raw) : NaN;
+    return Number.isFinite(parsed) ? parsed : DEFAULT_MAX_MANIFEST_AGE_MS;
+  })();
+  const manifestStaleThresholdMs = maxManifestAgeMs > 0 ? Math.min(maxManifestAgeMs, SEGMENT_MAX_AGE_MS) : SEGMENT_MAX_AGE_MS;
+  const debugLog = (...args) => {
+    if (debugEnabled) {
+      console.log(...args);
+    }
+  };
+  const getProgramDateTimeMs = (value) => {
+    if (value instanceof Date) return value.getTime();
+    if (typeof value === "number") return value;
+    if (typeof value === "string") {
+      const parsed = Date.parse(value);
+      return Number.isNaN(parsed) ? null : parsed;
+    }
+    return null;
+  };
+  const parseSegmentTimestampMs = (value) => {
+    const match = value.match(SEGMENT_TIMESTAMP_REGEX);
+    if (!match) return null;
+    const stamp = match[1];
+    const year = Number(stamp.slice(0, 4));
+    const month = Number(stamp.slice(4, 6));
+    const day = Number(stamp.slice(6, 8));
+    const hour = Number(stamp.slice(9, 11));
+    const minute = Number(stamp.slice(11, 13));
+    const second = Number(stamp.slice(13, 15));
+    if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day) || !Number.isFinite(hour) || !Number.isFinite(minute) || !Number.isFinite(second) || month < 1 || month > 12 || day < 1 || day > 31 || hour < 0 || hour > 23 || minute < 0 || minute > 59 || second < 0 || second > 59) {
+      return null;
+    }
+    const timestampMs = Date.UTC(year, month - 1, day, hour, minute, second);
+    return Number.isNaN(timestampMs) ? null : timestampMs;
+  };
+  const getFragmentTimestampMs = (fragment, enforceSegmentAge = false) => {
+    if (fragment?.relurl) {
+      const parsed = parseSegmentTimestampMs(fragment.relurl);
+      if (parsed !== null) return parsed;
+    }
+    if (fragment?.url) {
+      const parsed = parseSegmentTimestampMs(fragment.url);
+      if (parsed !== null) return parsed;
+    }
+    if (enforceSegmentAge) return null;
+    return getProgramDateTimeMs(fragment?.programDateTime);
+  };
+  const getLatestFragmentTimestampMs = (fragments, enforceSegmentAge = false) => {
+    if (!Array.isArray(fragments) || fragments.length === 0) return null;
+    for (let i = fragments.length - 1; i >= 0; i -= 1) {
+      const timestampMs = getFragmentTimestampMs(fragments[i], enforceSegmentAge);
+      if (timestampMs !== null) {
+        return timestampMs;
+      }
+    }
+    return null;
+  };
+  const parseManifestStatus = (manifestText) => {
+    let mediaSequence = null;
+    let segmentCount = 0;
+    let lastProgramDateTimeMs = null;
+    let lastSegmentTimestampMs = null;
+    const lines = manifestText.split(/\r?\n/);
+    for (const rawLine of lines) {
+      const line = rawLine.trim();
+      if (!line) continue;
+      if (line.startsWith("#EXT-X-MEDIA-SEQUENCE:")) {
+        const value = Number.parseInt(line.replace("#EXT-X-MEDIA-SEQUENCE:", ""), 10);
+        if (Number.isFinite(value)) {
+          mediaSequence = value;
+        }
+      } else if (line.startsWith("#EXT-X-PROGRAM-DATE-TIME:")) {
+        const timestamp = line.replace("#EXT-X-PROGRAM-DATE-TIME:", "").trim();
+        const parsed = Date.parse(timestamp);
+        if (!Number.isNaN(parsed)) {
+          lastProgramDateTimeMs = parsed;
+        }
+      } else if (line.startsWith("#EXTINF:")) {
+        segmentCount += 1;
+      } else if (!line.startsWith("#")) {
+        const segmentTimestampMs = parseSegmentTimestampMs(line);
+        if (segmentTimestampMs !== null) {
+          lastSegmentTimestampMs = segmentTimestampMs;
+        }
+      }
+    }
+    let lastSequenceNumber = null;
+    if (mediaSequence !== null && segmentCount > 0) {
+      lastSequenceNumber = mediaSequence + segmentCount - 1;
+    }
+    return { lastProgramDateTimeMs, lastSequenceNumber, lastSegmentTimestampMs };
+  };
+  const evaluateSegmentFreshness = ({
+    segmentTimestampMs,
+    fallbackTimestampMs,
+    enforceSegmentAge
+  }) => {
+    if (segmentTimestampMs !== null) {
+      const ageMs = Date.now() - segmentTimestampMs;
+      return {
+        isFresh: ageMs <= SEGMENT_MAX_AGE_MS,
+        ageMs,
+        reason: `segment age ${Math.round(ageMs / 1e3)}s`
+      };
+    }
+    if (enforceSegmentAge) {
+      return { isFresh: false, ageMs: null, reason: "segment timestamp missing" };
+    }
+    if (fallbackTimestampMs !== null) {
+      const ageMs = Date.now() - fallbackTimestampMs;
+      return {
+        isFresh: ageMs <= SEGMENT_MAX_AGE_MS,
+        ageMs,
+        reason: `program date time age ${Math.round(ageMs / 1e3)}s`
+      };
+    }
+    return { isFresh: true, ageMs: null, reason: null };
+  };
+  const fetchManifestStatus = async (manifestUrl) => {
+    const headers = {};
+    if (authTokenRef.current) {
+      headers.Authorization = `Bearer ${authTokenRef.current}`;
+    }
+    const response = await fetch(buildCacheBustedUrl(manifestUrl), {
+      method: "GET",
+      cache: "no-store",
+      headers
+    });
+    if (!response.ok) {
+      throw new Error(`Manifest fetch failed: ${response.status}`);
+    }
+    const manifestText = await response.text();
+    return parseManifestStatus(manifestText);
+  };
+  const stopStaleManifestPolling = () => {
+    if (staleManifestPollTimerRef.current) {
+      clearTimeout(staleManifestPollTimerRef.current);
+      staleManifestPollTimerRef.current = null;
+    }
+    staleManifestTriggeredRef.current = false;
+    staleManifestUrlRef.current = null;
+    staleManifestEndSnRef.current = null;
+    staleManifestPollDelayRef.current = STALE_MANIFEST_POLL_INITIAL_DELAY_MS;
+    setIsStale(false);
+    setStaleReason(null);
+  };
+  const pollStaleManifestOnce = async () => {
+    if (!staleManifestTriggeredRef.current) return;
+    if (!shouldPlayRef.current) {
+      stopStaleManifestPolling();
+      return;
+    }
+    const manifestUrl = staleManifestUrlRef.current;
+    if (!manifestUrl) {
+      stopStaleManifestPolling();
+      return;
+    }
+    try {
+      const {
+        lastProgramDateTimeMs,
+        lastSequenceNumber,
+        lastSegmentTimestampMs
+      } = await fetchManifestStatus(manifestUrl);
+      if (lastSegmentTimestampMs !== null) {
+        lastSegmentTimestampMsRef.current = lastSegmentTimestampMs;
+      }
+      const enforceSegmentAge = isR2StreamRef.current;
+      const hasAnyTimestamp = lastSegmentTimestampMs !== null || lastProgramDateTimeMs !== null;
+      const freshness = evaluateSegmentFreshness({
+        segmentTimestampMs: lastSegmentTimestampMs,
+        fallbackTimestampMs: lastProgramDateTimeMs,
+        enforceSegmentAge
+      });
+      const priorEndSn = staleManifestEndSnRef.current;
+      const isSequenceAdvanced = typeof lastSequenceNumber === "number" && (priorEndSn === null || lastSequenceNumber > priorEndSn);
+      if (freshness.isFresh || !enforceSegmentAge && !hasAnyTimestamp && isSequenceAdvanced) {
+        stopStaleManifestPolling();
+        if (hlsRef.current) {
+          hlsRef.current.startLoad(-1);
+          seekToLiveEdge();
+          attemptPlay("stale manifest recovered");
+        } else {
+          setRestartKey((k) => k + 1);
+        }
+        return;
+      }
+    } catch (error) {
+      debugLog("[HLS] Stale manifest poll failed", error);
+    }
+    staleManifestPollDelayRef.current = Math.min(
+      staleManifestPollDelayRef.current + 5e3,
+      STALE_MANIFEST_POLL_MAX_DELAY_MS
+    );
+    scheduleStaleManifestPoll();
+  };
+  const scheduleStaleManifestPoll = () => {
+    if (!staleManifestTriggeredRef.current) return;
+    if (staleManifestPollTimerRef.current) return;
+    const delay = staleManifestPollDelayRef.current;
+    staleManifestPollTimerRef.current = setTimeout(() => {
+      staleManifestPollTimerRef.current = null;
+      void pollStaleManifestOnce();
+    }, delay);
+  };
+  const startStaleManifestPolling = (reason) => {
+    if (staleManifestTriggeredRef.current) return;
+    staleManifestTriggeredRef.current = true;
+    staleManifestUrlRef.current = activeStreamUrlRef.current || latestSrcRef.current;
+    staleManifestEndSnRef.current = lastManifestEndSnRef.current;
+    staleManifestPollDelayRef.current = STALE_MANIFEST_POLL_INITIAL_DELAY_MS;
+    setIsStale(true);
+    setStaleReason(reason);
+    const hls = hlsRef.current;
+    if (hls) {
+      hls.stopLoad();
+    }
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+    }
+    console.warn(`[HLS] Manifest stale, pausing playback (${reason})`);
+    scheduleStaleManifestPoll();
+  };
+  const isProxyUrl = (url) => {
+    if (!proxyEnabled || !proxyBaseUrl) return false;
+    try {
+      const base = proxyBaseUrl.startsWith("http") ? proxyBaseUrl : new URL(proxyBaseUrl, window.location.origin).toString();
+      return url.startsWith(base);
+    } catch {
+      return url.includes(proxyBaseUrl);
+    }
+  };
+  const isSnapshotStreamUrl = (url) => url.includes("/api/automation/snapshot/stream/");
+  const getR2CameraUuid = (url) => {
+    try {
+      const parsed = new URL(url);
+      const match2 = parsed.pathname.match(/\/segments\/([^\/]+)\/index\.m3u8$/);
+      if (match2) {
+        return match2[1];
+      }
+    } catch {
+    }
+    const match = url.match(/\/segments\/([^\/]+)\/index\.m3u8/);
+    return match ? match[1] : null;
+  };
+  const cleanup = () => {
+    if (stallCheckIntervalRef.current) {
+      clearInterval(stallCheckIntervalRef.current);
+      stallCheckIntervalRef.current = null;
+    }
+    if (noProgressTimerRef.current) {
+      clearTimeout(noProgressTimerRef.current);
+      noProgressTimerRef.current = null;
+    }
+    if (playbackRateIntervalRef.current) {
+      clearInterval(playbackRateIntervalRef.current);
+      playbackRateIntervalRef.current = null;
+    }
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+      waitingTimerRef.current = null;
+    }
+    if (playRetryTimerRef.current) {
+      clearTimeout(playRetryTimerRef.current);
+      playRetryTimerRef.current = null;
+    }
+    if (manifestWatchdogRef.current) {
+      clearInterval(manifestWatchdogRef.current);
+      manifestWatchdogRef.current = null;
+    }
+    if (nativeFreshnessIntervalRef.current) {
+      clearInterval(nativeFreshnessIntervalRef.current);
+      nativeFreshnessIntervalRef.current = null;
+    }
+    if (manifestRetryTimerRef.current) {
+      clearTimeout(manifestRetryTimerRef.current);
+      manifestRetryTimerRef.current = null;
+    }
+    stopStaleManifestPolling();
+    lastHiddenAtRef.current = null;
+    if (nativeStreamUrlRef.current) {
+      nativeStreamUrlRef.current = null;
+    }
+    activeStreamUrlRef.current = null;
+    forcedLiveStartRef.current = false;
+    lastLiveReloadRef.current = 0;
+    targetDurationRef.current = null;
+    lastManifestLoadRef.current = 0;
+    lastFragLoadRef.current = 0;
+    lastFragSnRef.current = null;
+    lastWindowStartSnRef.current = null;
+    lastWindowEndSnRef.current = null;
+    lastFragTimeoutSnRef.current = null;
+    lastFragTimeoutAtRef.current = null;
+    fragTimeoutCountRef.current = 0;
+    lastManifestEndSnRef.current = null;
+    lastManifestEndSnUpdatedAtRef.current = null;
+    staleManifestTriggeredRef.current = false;
+    lastSegmentTimestampMsRef.current = null;
+    manifestRetryDelayRef.current = 5e3;
+    playRetryCountRef.current = 0;
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      video.removeEventListener("waiting", handleWaiting);
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("ended", handleEnded);
+      video.removeEventListener("error", handleNativeError);
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", handleVisibilityChange);
+      }
+    }
+    lastTimeUpdateRef.current = 0;
+    softRestartCountRef.current = 0;
+  };
+  const getLiveOffsetSeconds = () => {
+    const targetDuration = targetDurationRef.current;
+    if (targetDuration && Number.isFinite(targetDuration)) {
+      return Math.max(targetDuration * 2, targetDuration);
+    }
+    return DEFAULT_LIVE_OFFSET_SECONDS;
+  };
+  const seekToLiveEdge = () => {
+    const hls = hlsRef.current;
+    const video = videoRef.current;
+    if (!hls || !video) return;
+    if (hls.liveSyncPosition !== null && hls.liveSyncPosition !== void 0) {
+      video.currentTime = hls.liveSyncPosition;
+    } else if (hls.levels?.[hls.currentLevel]?.details) {
+      const levelDetails = hls.levels[hls.currentLevel].details;
+      const edge = levelDetails?.edge;
+      if (edge !== void 0 && edge !== null) {
+        const offset = getLiveOffsetSeconds();
+        video.currentTime = Math.max(0, edge - offset);
+      }
+    }
+  };
+  const getLiveEdgeTime = () => {
+    const video = videoRef.current;
+    if (!video || video.seekable.length === 0) return null;
+    const end = video.seekable.end(video.seekable.length - 1);
+    if (!Number.isFinite(end)) return null;
+    const offset = getLiveOffsetSeconds();
+    return Math.max(0, end - offset);
+  };
+  const getWaitingTimeoutMs = () => {
+    const targetDuration = targetDurationRef.current;
+    if (targetDuration && Number.isFinite(targetDuration)) {
+      return Math.max(2e4, targetDuration * 1e3 * 0.5);
+    }
+    return 3e4;
+  };
+  const getManifestStaleTimeoutMs = () => {
+    const targetDuration = targetDurationRef.current;
+    if (targetDuration && Number.isFinite(targetDuration)) {
+      return Math.max(targetDuration * 2e3, 12e4);
+    }
+    return 12e4;
+  };
+  const isManifestUrl = (url) => url.includes(".m3u8");
+  const getBufferGap = (video) => {
+    if (!video.buffered.length) return null;
+    const end = video.buffered.end(video.buffered.length - 1);
+    if (!Number.isFinite(end)) return null;
+    return Math.max(0, end - video.currentTime);
+  };
+  const getBufferThresholds = () => {
+    const targetDuration = targetDurationRef.current ?? 60;
+    return {
+      low: Math.max(5, targetDuration * 0.1),
+      mid: Math.max(10, targetDuration * 0.2),
+      high: Math.max(18, targetDuration * 0.35)
+    };
+  };
+  const shouldAttemptRecovery = () => {
+    if (!isR2StreamRef.current) return true;
+    if (!lastManifestLoadRef.current) return false;
+    const now = Date.now();
+    const timeoutMs = getManifestStaleTimeoutMs();
+    const manifestAge = now - lastManifestLoadRef.current;
+    return manifestAge > timeoutMs;
+  };
+  const getDesiredLivePosition = () => {
+    const hls = hlsRef.current;
+    if (hls?.liveSyncPosition !== null && hls?.liveSyncPosition !== void 0) {
+      if (Number.isFinite(hls.liveSyncPosition)) {
+        return hls.liveSyncPosition;
+      }
+    }
+    if (hls?.levels?.[hls.currentLevel]?.details) {
+      const levelDetails = hls.levels[hls.currentLevel].details;
+      const edge = levelDetails?.edge;
+      if (edge !== void 0 && edge !== null) {
+        return Math.max(0, edge - getLiveOffsetSeconds());
+      }
+    }
+    return getLiveEdgeTime();
+  };
+  const schedulePlayRetry = (reason) => {
+    if (playRetryTimerRef.current) return;
+    if (playRetryCountRef.current >= 3) return;
+    playRetryCountRef.current += 1;
+    playRetryTimerRef.current = setTimeout(() => {
+      playRetryTimerRef.current = null;
+      attemptPlay();
+    }, 1e3);
+  };
+  const attemptPlay = (reason) => {
+    const video = videoRef.current;
+    if (!video || !shouldPlayRef.current) return;
+    if (staleManifestTriggeredRef.current) return;
+    if (!video.paused || video.seeking) return;
+    if (video.readyState < 2) return;
+    video.play().then(() => {
+      playRetryCountRef.current = 0;
+    }).catch((err) => {
+      if (err?.name === "AbortError") {
+        schedulePlayRetry();
+        return;
+      }
+      console.error("[HLS] Play failed:", err);
+    });
+  };
+  const handleCanPlay = () => {
+    attemptPlay();
+  };
+  const handleVisibilityChange = () => {
+    if (typeof document === "undefined") return;
+    if (document.hidden) {
+      lastHiddenAtRef.current = Date.now();
+      return;
+    }
+    const lastHiddenAt = lastHiddenAtRef.current;
+    lastHiddenAtRef.current = null;
+    if (!lastHiddenAt) return;
+    if (Date.now() - lastHiddenAt < 3e4) return;
+    void refreshLiveStream("tab visible after idle");
+    attemptPlay();
+  };
+  const startManifestWatchdog = () => {
+    if (manifestWatchdogRef.current) return;
+    if (!isR2StreamRef.current) return;
+    manifestWatchdogRef.current = setInterval(() => {
+      if (staleManifestTriggeredRef.current) return;
+      if (!lastManifestLoadRef.current) return;
+      const now = Date.now();
+      const staleTimeoutMs = getManifestStaleTimeoutMs();
+      if (now - lastManifestLoadRef.current < staleTimeoutMs) return;
+      if (now - lastLiveReloadRef.current < LIVE_RELOAD_MIN_INTERVAL_MS) return;
+      lastLiveReloadRef.current = now;
+      softRestart("manifest stale watchdog");
+    }, 15e3);
+  };
+  const scheduleManifestRetry = (reason) => {
+    if (manifestRetryTimerRef.current) return;
+    const delay = manifestRetryDelayRef.current;
+    manifestRetryTimerRef.current = setTimeout(() => {
+      manifestRetryTimerRef.current = null;
+      softRestart(reason);
+      manifestRetryDelayRef.current = Math.min(manifestRetryDelayRef.current + 5e3, 3e4);
+    }, delay);
+  };
+  const resetManifestRetry = () => {
+    if (manifestRetryTimerRef.current) {
+      clearTimeout(manifestRetryTimerRef.current);
+      manifestRetryTimerRef.current = null;
+    }
+    manifestRetryDelayRef.current = 5e3;
+  };
+  const markStaleStream = (reason) => {
+    startStaleManifestPolling(reason);
+  };
+  const setPlaybackRate = (rate) => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (!Number.isFinite(rate)) return;
+    if (Math.abs(video.playbackRate - rate) < 0.01) return;
+    video.playbackRate = rate;
+  };
+  const startPlaybackGovernor = () => {
+    if (playbackRateIntervalRef.current) return;
+    playbackRateIntervalRef.current = setInterval(() => {
+      const video = videoRef.current;
+      if (!video || video.paused || video.seeking) return;
+      if (!isR2StreamRef.current) return;
+      const bufferGap = getBufferGap(video);
+      if (bufferGap === null) return;
+      const { low, mid, high } = getBufferThresholds();
+      let desiredRate = 1;
+      if (bufferGap < low) {
+        desiredRate = 0.8;
+      } else if (bufferGap < mid) {
+        desiredRate = 0.9;
+      } else if (bufferGap < high) {
+        desiredRate = 0.95;
+      }
+      setPlaybackRate(desiredRate);
+    }, 2e3);
+  };
+  const buildCacheBustedUrl = (url) => {
+    if (typeof window === "undefined") {
+      return url;
+    }
+    try {
+      const parsed = new URL(url, window.location.origin);
+      parsed.searchParams.set("ts", Date.now().toString());
+      return parsed.toString();
+    } catch {
+      const separator = url.includes("?") ? "&" : "?";
+      return `${url}${separator}ts=${Date.now()}`;
+    }
+  };
+  const ensureManifestFreshness = async (manifestUrl, enforceSegmentAge, reason) => {
+    try {
+      const status = await fetchManifestStatus(manifestUrl);
+      if (status.lastSegmentTimestampMs !== null) {
+        lastSegmentTimestampMsRef.current = status.lastSegmentTimestampMs;
+      }
+      const freshness = evaluateSegmentFreshness({
+        segmentTimestampMs: status.lastSegmentTimestampMs,
+        fallbackTimestampMs: status.lastProgramDateTimeMs,
+        enforceSegmentAge
+      });
+      if (!freshness.isFresh) {
+        markStaleStream(freshness.reason || reason);
+        return false;
+      }
+      return true;
+    } catch (error) {
+      debugLog("[HLS] Manifest freshness check failed", error);
+      {
+        markStaleStream("manifest freshness check failed");
+        return false;
+      }
+    }
+  };
+  const startNativeFreshnessMonitor = (manifestUrl) => {
+    if (nativeFreshnessIntervalRef.current) return;
+    nativeFreshnessIntervalRef.current = setInterval(() => {
+      if (staleManifestTriggeredRef.current) return;
+      void ensureManifestFreshness(manifestUrl, true, "native freshness check");
+    }, 3e4);
+  };
+  const refreshLiveStream = async (reason) => {
+    if (!isR2StreamRef.current) return;
+    const now = Date.now();
+    if (now - lastLiveReloadRef.current < LIVE_RELOAD_MIN_INTERVAL_MS) {
+      return;
+    }
+    lastLiveReloadRef.current = now;
+    const video = videoRef.current;
+    const hls = hlsRef.current;
+    if (hls) {
+      console.log(`[HLS] Live reload (${reason})`);
+      softRestart(reason);
+      return;
+    }
+    if (video && nativeStreamUrlRef.current) {
+      console.log(`[HLS] Native live reload (${reason})`);
+      const isFresh = await ensureManifestFreshness(nativeStreamUrlRef.current, true, "native live reload");
+      if (!isFresh) {
+        return;
+      }
+      const refreshedUrl = buildCacheBustedUrl(nativeStreamUrlRef.current);
+      video.src = refreshedUrl;
+      video.load();
+      const edgeTime = getLiveEdgeTime();
+      if (edgeTime !== null) {
+        video.currentTime = edgeTime;
+      }
+      attemptPlay();
+    }
+  };
+  const softRestart = (reason) => {
+    if (staleManifestTriggeredRef.current) {
+      debugLog("[HLS] Skip soft restart while manifest is stale", reason);
+      return;
+    }
+    console.warn(`[HLS] Soft restart: ${reason}`);
+    const hls = hlsRef.current;
+    if (!hls) return;
+    try {
+      const video = videoRef.current;
+      const isR2Stream = isR2StreamRef.current;
+      const desiredPosition = isR2Stream ? getDesiredLivePosition() : null;
+      hls.stopLoad();
+      if (desiredPosition !== null && Number.isFinite(desiredPosition)) {
+        hls.startLoad(desiredPosition);
+        if (video) {
+          video.currentTime = desiredPosition;
+        }
+      } else {
+        hls.startLoad(-1);
+        if (!isR2Stream) {
+          seekToLiveEdge();
+        }
+      }
+      softRestartCountRef.current++;
+      if (softRestartCountRef.current >= 5) {
+        hardRestart(`${reason} (escalated after ${softRestartCountRef.current} soft restarts)`);
+      }
+    } catch (error) {
+      console.error("[HLS] Soft restart failed:", error);
+      hardRestart(`${reason} (soft restart error)`);
+    }
+  };
+  const hardRestart = (reason) => {
+    if (staleManifestTriggeredRef.current) {
+      debugLog("[HLS] Skip hard restart while manifest is stale", reason);
+      return;
+    }
+    console.warn(`[HLS] Hard restart: ${reason}`);
+    cleanupFailedUrls();
+    const failure = failedUrls.get(src);
+    const failureCount = failure ? failure.count : 0;
+    const isR2Stream = isR2StreamRef.current;
+    if (!isR2Stream && failureCount >= MAX_FAILURES_PER_URL) {
+      console.error(`[HLS] URL has failed ${failureCount} times. Marking as permanently failed: ${src}`);
+      failedUrls.set(src, {
+        count: failureCount,
+        timestamp: Date.now(),
+        permanentlyFailed: true
+      });
+      cleanup();
+      onFatalErrorRef.current?.();
+      return;
+    }
+    if (!isR2Stream) {
+      failedUrls.set(src, {
+        count: failureCount + 1,
+        timestamp: Date.now(),
+        permanentlyFailed: false
+      });
+    } else if (failedUrls.has(src)) {
+      failedUrls.delete(src);
+    }
+    cleanup();
+    setRestartKey((k) => k + 1);
+    softRestartCountRef.current = 0;
+    if (reason.includes("404 hard restart")) {
+      onFatalErrorRef.current?.();
+    }
+  };
+  const handleLoadedMetadata = () => {
+    if (!isR2StreamRef.current) return;
+    const video = videoRef.current;
+    if (!video) return;
+    const edgeTime = getLiveEdgeTime();
+    if (edgeTime !== null) {
+      video.currentTime = edgeTime;
+    }
+  };
+  const handleEnded = () => {
+    if (isNativeHlsRef.current) {
+      void refreshLiveStream("ended");
+      return;
+    }
+    if (isR2StreamRef.current) {
+      softRestart("ended");
+    }
+  };
+  const handleWaiting = () => {
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+    }
+    if (isNativeHlsRef.current) {
+      if (!isR2StreamRef.current) return;
+      waitingTimerRef.current = setTimeout(() => {
+        void refreshLiveStream("native waiting timeout");
+      }, getWaitingTimeoutMs());
+      return;
+    }
+    console.log("[HLS] Video waiting (buffer underrun)");
+    if (isR2StreamRef.current) {
+      waitingTimerRef.current = setTimeout(() => {
+        const video = videoRef.current;
+        if (video && video.readyState < 3) {
+          if (shouldAttemptRecovery()) {
+            softRestart("waiting timeout");
+          } else {
+            handleWaiting();
+          }
+        }
+      }, getWaitingTimeoutMs());
+      return;
+    }
+    waitingTimerRef.current = setTimeout(() => {
+      const video = videoRef.current;
+      if (video && video.readyState < 3) {
+        softRestart("waiting timeout");
+      }
+    }, 1e4);
+  };
+  const handleTimeUpdate = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    lastTimeUpdateRef.current = video.currentTime;
+    playRetryCountRef.current = 0;
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+      waitingTimerRef.current = null;
+    }
+  };
+  const handleNativeError = () => {
+    console.error("[HLS] Native video error");
+    hardRestart("native video error");
+  };
+  const startStallDetection = () => {
+    if (isNativeHlsRef.current || isR2StreamRef.current) return;
+    stallCheckIntervalRef.current = setInterval(() => {
+      const video = videoRef.current;
+      if (!video || video.paused || video.ended) return;
+      if (video.readyState < 3 || video.seeking) return;
+      const currentTime = video.currentTime;
+      const lastTime = lastTimeUpdateRef.current;
+      const bufferGap = getBufferGap(video);
+      const nearBufferEnd = bufferGap !== null && bufferGap < 0.5;
+      if (Math.abs(currentTime - lastTime) < 0.1 && video.readyState >= 2) {
+        if (nearBufferEnd && !shouldAttemptRecovery()) {
+          if (noProgressTimerRef.current) {
+            clearTimeout(noProgressTimerRef.current);
+            noProgressTimerRef.current = null;
+          }
+          return;
+        }
+        console.warn("[HLS] Playback stall detected");
+        if (!noProgressTimerRef.current) {
+          noProgressTimerRef.current = setTimeout(() => {
+            if (nearBufferEnd && !shouldAttemptRecovery()) {
+              noProgressTimerRef.current = null;
+              return;
+            }
+            softRestart("playback stall");
+            noProgressTimerRef.current = null;
+          }, nearBufferEnd ? getWaitingTimeoutMs() : 12e3);
+        }
+      } else {
+        if (noProgressTimerRef.current) {
+          clearTimeout(noProgressTimerRef.current);
+          noProgressTimerRef.current = null;
+        }
+      }
+    }, 7e3);
+  };
+  React.useEffect(() => {
+    if (!src || !shouldPlay) {
+      cleanup();
+      return;
+    }
+    let isCancelled = false;
+    const r2WorkerDomain = process.env.NEXT_PUBLIC_R2_WORKER_DOMAIN || "https://r2-stream-proxy.optifye-r2.workers.dev";
+    const isR2Stream = isR2WorkerUrl(src, r2WorkerDomain);
+    isR2StreamRef.current = isR2Stream;
+    if (isPermanentlyFailed && !isR2Stream) {
+      console.warn(`[HLS] URL is permanently failed, not attempting to load: ${src}`);
+      onFatalErrorRef.current?.();
+      return;
+    }
+    if (isPermanentlyFailed && isR2Stream && failedUrls.has(src)) {
+      failedUrls.delete(src);
+    }
+    const video = videoRef.current;
+    if (!video) return;
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+    }
+    const initialize = async () => {
+      const canUseNative = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
+      isNativeHlsRef.current = canUseNative && !isR2Stream;
+      let authToken = null;
+      if (isR2Stream) {
+        try {
+          const supabase = _getSupabaseInstance();
+          authToken = await getAuthTokenForHls(supabase);
+        } catch (error) {
+          console.warn("[HLS] Unable to retrieve auth token for R2 streaming:", error);
+        }
+      }
+      authTokenRef.current = authToken;
+      if (isCancelled) return;
+      const cameraUuid = isR2Stream ? getR2CameraUuid(src) : null;
+      const proxyPlaylistUrl = proxyEnabled && isR2Stream && proxyBaseUrl && cameraUuid ? `${proxyBaseUrl}/segments/${cameraUuid}/index.m3u8` : null;
+      const resolvedSrc = proxyPlaylistUrl || src;
+      const resolvedHlsSrc = src;
+      const shouldUseProxy = proxyEnabled && isR2Stream && canUseNative && !Hls__default.default.isSupported() && isSafari();
+      if (shouldUseProxy) {
+        if (cameraUuid) {
+          isNativeHlsRef.current = true;
+          nativeStreamUrlRef.current = resolvedSrc;
+          activeStreamUrlRef.current = resolvedSrc;
+          console.log("[HLS] Using proxy playlist for Safari R2 stream");
+          const isFresh = await ensureManifestFreshness(resolvedSrc, true, "native proxy start");
+          if (!isFresh) {
+            return;
+          }
+          video.src = resolvedSrc;
+          video.addEventListener("waiting", handleWaiting);
+          video.addEventListener("loadedmetadata", handleLoadedMetadata);
+          video.addEventListener("canplay", handleCanPlay);
+          video.addEventListener("ended", handleEnded);
+          video.addEventListener("error", handleNativeError);
+          startNativeFreshnessMonitor(resolvedSrc);
+          attemptPlay();
+          return;
+        }
+        console.warn("[HLS] Safari R2 proxy unavailable, falling back to direct URL");
+      }
+      if (!proxyEnabled && isR2Stream && canUseNative && !Hls__default.default.isSupported() && isSafari()) {
+        console.warn("[HLS] Safari native R2 streaming requires proxy. Falling back.");
+        onFatalErrorRef.current?.();
+        return;
+      }
+      if (Hls__default.default.isSupported() && !isNativeHlsRef.current) {
+        const usesSnapshotStream = isSnapshotStreamUrl(resolvedHlsSrc);
+        const mergedConfig = {
+          ...HLS_CONFIG,
+          ...hlsConfig,
+          enableWorker: usesSnapshotStream ? false : hlsConfig?.enableWorker ?? HLS_CONFIG.enableWorker,
+          xhrSetup: (xhr, url) => {
+            const usesProxy = isProxyUrl(url);
+            if (isSnapshotStreamUrl(url)) {
+              xhr.withCredentials = true;
+            }
+            if (isR2WorkerUrl(url, r2WorkerDomain) || usesProxy) {
+              if (isManifestUrl(url)) {
+                xhr.open("GET", buildCacheBustedUrl(url), true);
+              }
+              if (authToken) {
+                xhr.setRequestHeader("Authorization", `Bearer ${authToken}`);
+              }
+            }
+          },
+          fetchSetup: (context, initParams) => {
+            const isR2Url = isR2WorkerUrl(context.url, r2WorkerDomain);
+            const isManifestRequest = isManifestUrl(context.url);
+            const usesProxy = isProxyUrl(context.url);
+            const isSnapshotStream = isSnapshotStreamUrl(context.url);
+            let requestUrl = context.url;
+            if (isSnapshotStream) {
+              initParams.credentials = "include";
+            }
+            if (isR2Url || usesProxy) {
+              if (authToken) {
+                initParams.headers = {
+                  ...initParams.headers,
+                  "Authorization": `Bearer ${authToken}`
+                };
+              }
+              if (isManifestRequest) {
+                requestUrl = buildCacheBustedUrl(context.url);
+                initParams.cache = "no-store";
+              }
+            }
+            return new Request(requestUrl, initParams);
+          }
+        };
+        const hls = new Hls__default.default(mergedConfig);
+        hlsRef.current = hls;
+        hls.attachMedia(video);
+        hls.loadSource(resolvedHlsSrc);
+        activeStreamUrlRef.current = resolvedHlsSrc;
+        hls.on(Hls__default.default.Events.ERROR, (_, data) => {
+          debugLog("[HLS] Error", {
+            type: data.type,
+            details: data.details,
+            fatal: data.fatal,
+            response: data.response?.code,
+            frag: data.frag?.sn
+          });
+          if (data.type === Hls__default.default.ErrorTypes.MEDIA_ERROR && data.details === Hls__default.default.ErrorDetails.BUFFER_STALLED_ERROR) {
+            debugLog("[HLS] Buffer stalled, waiting for next segment");
+            attemptPlay();
+            return;
+          }
+          if (data.type === Hls__default.default.ErrorTypes.NETWORK_ERROR && (data.details === Hls__default.default.ErrorDetails.FRAG_LOAD_TIMEOUT || data.details === Hls__default.default.ErrorDetails.FRAG_LOAD_ERROR)) {
+            const fragSn = data.frag?.sn;
+            const windowStart = lastWindowStartSnRef.current;
+            const windowEnd = lastWindowEndSnRef.current;
+            if (typeof fragSn === "number" && typeof windowStart === "number" && fragSn < windowStart) {
+              softRestart("frag fell out of window");
+              return;
+            }
+            if (typeof fragSn === "number" && typeof windowEnd === "number" && fragSn > windowEnd) {
+              softRestart("frag ahead of window");
+              return;
+            }
+            const now = Date.now();
+            if (lastFragTimeoutSnRef.current === fragSn && lastFragTimeoutAtRef.current) {
+              if (now - lastFragTimeoutAtRef.current < 12e4) {
+                fragTimeoutCountRef.current += 1;
+              } else {
+                fragTimeoutCountRef.current = 1;
+              }
+            } else {
+              fragTimeoutCountRef.current = 1;
+              lastFragTimeoutSnRef.current = fragSn ?? null;
+            }
+            lastFragTimeoutAtRef.current = now;
+            if (fragTimeoutCountRef.current >= 2) {
+              softRestart("frag load timeout");
+            }
+            return;
+          }
+          if (data.type === Hls__default.default.ErrorTypes.NETWORK_ERROR && (data.details === Hls__default.default.ErrorDetails.MANIFEST_LOAD_TIMEOUT || data.details === Hls__default.default.ErrorDetails.MANIFEST_LOAD_ERROR)) {
+            if (data.response?.code === 404 && isR2StreamRef.current) {
+              markStaleStream("manifest 404");
+              return;
+            }
+            scheduleManifestRetry("manifest load timeout");
+            return;
+          }
+          if (!data.fatal) return;
+          console.error("[HLS] Fatal error:", data.type, data.details);
+          if (data.response?.code === 404) {
+            if (data.details === Hls__default.default.ErrorDetails.MANIFEST_LOAD_ERROR || data.details === Hls__default.default.ErrorDetails.LEVEL_LOAD_ERROR) {
+              if (isR2StreamRef.current) {
+                markStaleStream("manifest 404");
+                return;
+              }
+              hardRestart("404 manifest hard restart");
+              return;
+            }
+            softRestart("frag 404");
+            return;
+          }
+          switch (data.type) {
+            case Hls__default.default.ErrorTypes.NETWORK_ERROR:
+              if (isR2StreamRef.current && data.details === Hls__default.default.ErrorDetails.MANIFEST_LOAD_TIMEOUT) {
+                softRestart("manifest load timeout");
+                break;
+              }
+              softRestart(`${data.type}: ${data.details}`);
+              break;
+            case Hls__default.default.ErrorTypes.MEDIA_ERROR:
+              softRestart(`${data.type}: ${data.details}`);
+              break;
+            default:
+              hardRestart(`Fatal ${data.type}: ${data.details}`);
+              break;
+          }
+        });
+        hls.on(Hls__default.default.Events.MANIFEST_PARSED, () => {
+          if (failedUrls.has(src)) {
+            console.log(`[HLS] Stream loaded successfully, resetting failure count for: ${src}`);
+            failedUrls.delete(src);
+          }
+          if (isR2Stream) {
+            seekToLiveEdge();
+          }
+          attemptPlay();
+        });
+        hls.on(Hls__default.default.Events.LEVEL_LOADED, (_event, data) => {
+          if (!data?.details) return;
+          const details = data.details;
+          if (isR2Stream) {
+            lastManifestLoadRef.current = Date.now();
+            resetManifestRetry();
+            if (details.endList) {
+              details.endList = false;
+            }
+            details.live = true;
+            details.type = "LIVE";
+            if (details.targetduration && Number.isFinite(details.targetduration)) {
+              targetDurationRef.current = details.targetduration;
+            }
+            if (typeof details.startSN === "number") {
+              lastWindowStartSnRef.current = details.startSN;
+            }
+            if (typeof details.endSN === "number") {
+              lastWindowEndSnRef.current = Math.max(details.endSN - 1, details.startSN ?? details.endSN);
+            }
+            if (Array.isArray(details.fragments) && details.fragments.length > 0) {
+              const firstSn = details.fragments[0]?.sn;
+              const lastSn = details.fragments[details.fragments.length - 1]?.sn;
+              if (typeof firstSn === "number") {
+                lastWindowStartSnRef.current = firstSn;
+              }
+              if (typeof lastSn === "number") {
+                lastWindowEndSnRef.current = lastSn;
+              }
+            }
+          }
+          if (!details.endList) {
+            const now = Date.now();
+            const fragments = Array.isArray(details.fragments) ? details.fragments : [];
+            const lastFragment = fragments.length ? fragments[fragments.length - 1] : void 0;
+            const segmentTimestampMs = getLatestFragmentTimestampMs(fragments, true);
+            const enforceSegmentAge = isR2StreamRef.current;
+            if (segmentTimestampMs !== null) {
+              lastSegmentTimestampMsRef.current = segmentTimestampMs;
+            }
+            const freshness = evaluateSegmentFreshness({
+              segmentTimestampMs,
+              fallbackTimestampMs: getProgramDateTimeMs(lastFragment?.programDateTime),
+              enforceSegmentAge
+            });
+            if (!freshness.isFresh) {
+              markStaleStream(freshness.reason || "segment stale");
+              return;
+            }
+            const endSn = typeof details.endSN === "number" ? details.endSN : lastFragment?.sn;
+            if (typeof endSn === "number") {
+              if (lastManifestEndSnRef.current === endSn) {
+                const lastUpdatedAt = lastManifestEndSnUpdatedAtRef.current;
+                if (lastUpdatedAt && now - lastUpdatedAt > manifestStaleThresholdMs) {
+                  markStaleStream(`sequence stalled at ${endSn}`);
+                  return;
+                }
+              } else {
+                lastManifestEndSnRef.current = endSn;
+                lastManifestEndSnUpdatedAtRef.current = now;
+              }
+            }
+          }
+          debugLog("[HLS] Level loaded", {
+            targetduration: details.targetduration,
+            edge: details.edge,
+            fragments: data.details?.fragments?.length
+          });
+          if (isR2Stream && !forcedLiveStartRef.current) {
+            forcedLiveStartRef.current = true;
+            seekToLiveEdge();
+          }
+        });
+        hls.on(Hls__default.default.Events.MANIFEST_LOADED, () => {
+          if (!isR2Stream) return;
+          lastManifestLoadRef.current = Date.now();
+          resetManifestRetry();
+        });
+        hls.on(Hls__default.default.Events.FRAG_LOADING, (_event, data) => {
+          if (staleManifestTriggeredRef.current) return;
+          const frag = data?.frag;
+          if (!frag || frag.sn === "initSegment") return;
+          const enforceSegmentAge = isR2StreamRef.current;
+          const segmentTimestampMs = getFragmentTimestampMs(frag, true);
+          if (segmentTimestampMs !== null) {
+            lastSegmentTimestampMsRef.current = segmentTimestampMs;
+          }
+          const freshness = evaluateSegmentFreshness({
+            segmentTimestampMs,
+            fallbackTimestampMs: getProgramDateTimeMs(frag.programDateTime),
+            enforceSegmentAge
+          });
+          if (!freshness.isFresh) {
+            if (frag.loader?.abort) {
+              frag.loader.abort();
+            }
+            markStaleStream(freshness.reason || "segment stale");
+          }
+        });
+        hls.on(Hls__default.default.Events.FRAG_LOADED, (_event, data) => {
+          if (!isR2Stream) return;
+          lastFragLoadRef.current = Date.now();
+          if (typeof data?.frag?.sn === "number") {
+            lastFragSnRef.current = data.frag.sn;
+          }
+        });
+        hls.on(Hls__default.default.Events.FRAG_BUFFERED, () => {
+          attemptPlay();
+        });
+        video.addEventListener("waiting", handleWaiting);
+        video.addEventListener("timeupdate", handleTimeUpdate);
+        video.addEventListener("loadedmetadata", handleLoadedMetadata);
+        video.addEventListener("canplay", handleCanPlay);
+        video.addEventListener("ended", handleEnded);
+        startStallDetection();
+        startPlaybackGovernor();
+        startManifestWatchdog();
+        startManifestWatchdog();
+        return;
+      }
+      if (canUseNative) {
+        isNativeHlsRef.current = true;
+        console.log("[HLS] Using native HLS");
+        nativeStreamUrlRef.current = resolvedSrc;
+        activeStreamUrlRef.current = resolvedSrc;
+        if (isR2Stream) {
+          const isFresh = await ensureManifestFreshness(resolvedSrc, true, "native start");
+          if (!isFresh) {
+            return;
+          }
+        }
+        video.src = resolvedSrc;
+        video.addEventListener("waiting", handleWaiting);
+        video.addEventListener("loadedmetadata", handleLoadedMetadata);
+        video.addEventListener("canplay", handleCanPlay);
+        video.addEventListener("ended", handleEnded);
+        video.addEventListener("error", handleNativeError);
+        startPlaybackGovernor();
+        startManifestWatchdog();
+        if (isR2Stream) {
+          startNativeFreshnessMonitor(resolvedSrc);
+        }
+        attemptPlay();
+      } else {
+        console.error("[HLS] HLS not supported");
+      }
+    };
+    initialize();
+    return () => {
+      isCancelled = true;
+      cleanup();
+    };
+  }, [src, shouldPlay, restartKey, isPermanentlyFailed]);
+  return {
+    restartKey,
+    isNativeHls: isNativeHlsRef.current,
+    isStale,
+    staleReason,
+    lastSegmentTimestampMs: lastSegmentTimestampMsRef.current
+  };
+}
+
+// src/lib/hooks/useHlsStreamWithCropping.ts
+function useHlsStreamWithCropping(videoRef, canvasRef, options) {
+  const { src, shouldPlay, cropping, canvasFps = 30, useRAF = true, onFatalError, hlsConfig } = options;
+  const animationFrameRef = React.useRef(null);
+  const intervalRef = React.useRef(null);
+  const isDrawingRef = React.useRef(false);
+  const hlsState = useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig });
+  const calculateCropRect = React.useCallback((video, cropping2) => {
+    const videoWidth = video.videoWidth;
+    const videoHeight = video.videoHeight;
+    const sx = cropping2.x / 100 * videoWidth;
+    const sy = cropping2.y / 100 * videoHeight;
+    const sw = cropping2.width / 100 * videoWidth;
+    const sh = cropping2.height / 100 * videoHeight;
+    return { sx, sy, sw, sh };
+  }, []);
+  const drawFrame = React.useCallback(() => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas || !cropping) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    if (video.readyState < 2) return;
+    try {
+      const videoWidth = video.videoWidth;
+      const videoHeight = video.videoHeight;
+      if (!videoWidth || !videoHeight) return;
+      const { sx, sy, sw, sh } = calculateCropRect(video, cropping);
+      const canvasContainer = canvas.parentElement;
+      if (canvasContainer) {
+        const containerWidth = canvasContainer.clientWidth;
+        const containerHeight = canvasContainer.clientHeight;
+        if (canvas.width !== containerWidth || canvas.height !== containerHeight) {
+          canvas.width = containerWidth;
+          canvas.height = containerHeight;
+        }
+      }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(
+        video,
+        sx,
+        sy,
+        sw,
+        sh,
+        // Source rectangle (cropped portion)
+        0,
+        0,
+        canvas.width,
+        canvas.height
+        // Destination rectangle (full canvas)
+      );
+    } catch (err) {
+      console.warn("Canvas drawing error:", err);
+    }
+  }, [videoRef, canvasRef, cropping, calculateCropRect]);
+  const startCanvasRendering = React.useCallback(() => {
+    if (isDrawingRef.current) return;
+    isDrawingRef.current = true;
+    if (useRAF) {
+      const animate = () => {
+        drawFrame();
+        animationFrameRef.current = requestAnimationFrame(animate);
+      };
+      animate();
+    } else {
+      const frameInterval = 1e3 / canvasFps;
+      intervalRef.current = setInterval(drawFrame, frameInterval);
+    }
+  }, [drawFrame, canvasFps, useRAF]);
+  const stopCanvasRendering = React.useCallback(() => {
+    isDrawingRef.current = false;
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  React.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !cropping || !shouldPlay) {
+      stopCanvasRendering();
+      return;
+    }
+    const handlePlay = () => {
+      if (cropping) {
+        startCanvasRendering();
+      }
+    };
+    const handlePause = () => {
+      stopCanvasRendering();
+    };
+    const handleEnded = () => {
+      stopCanvasRendering();
+    };
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("ended", handleEnded);
+    if (!video.paused && video.readyState >= 2) {
+      startCanvasRendering();
+    }
+    return () => {
+      stopCanvasRendering();
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("ended", handleEnded);
+    };
+  }, [videoRef, cropping, shouldPlay, startCanvasRendering, stopCanvasRendering]);
+  return {
+    ...hlsState,
+    isCanvasRendering: isDrawingRef.current
+  };
+}
+
+// src/lib/utils/dashboardReload.ts
+var reloadAttempts = [];
+var createThrottledReload = (interval = 5e3, maxReloads = 3) => {
+  const circuitBreakerWindow = 1e4;
+  const circuitBreakerThreshold = 5;
+  let last = 0;
+  let queued = false;
+  let reloadCount = 0;
+  let firstReloadTime = 0;
+  const resetWindow = 6e4;
+  const doReload = () => {
+    if (typeof window !== "undefined") {
+      const now = Date.now();
+      reloadAttempts.push(now);
+      const cutoff = now - circuitBreakerWindow;
+      const recentAttempts = reloadAttempts.filter((t) => t > cutoff);
+      reloadAttempts.length = 0;
+      reloadAttempts.push(...recentAttempts);
+      if (recentAttempts.length >= circuitBreakerThreshold) {
+        console.error(`[Dashboard Reload] Circuit breaker triggered! ${recentAttempts.length} reload attempts in ${circuitBreakerWindow}ms`);
+        const errorDiv = document.createElement("div");
+        errorDiv.id = "reload-circuit-breaker";
+        errorDiv.style.cssText = `
+          position: fixed;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: #dc2626;
+          color: white;
+          padding: 20px 32px;
+          border-radius: 12px;
+          z-index: 99999;
+          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+          font-family: system-ui, -apple-system, sans-serif;
+        `;
+        errorDiv.innerHTML = `
+          <div style="display: flex; align-items: center; gap: 16px;">
+            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+            </svg>
+            <div>
+              <div style="font-weight: 600; font-size: 16px; margin-bottom: 4px;">Too many reload attempts detected</div>
+              <div style="font-size: 14px; opacity: 0.9;">Please check your network connection and refresh manually.</div>
+            </div>
+          </div>
+        `;
+        const existing = document.getElementById("reload-circuit-breaker");
+        if (existing) existing.remove();
+        document.body.appendChild(errorDiv);
+        return;
+      }
+      if (now - firstReloadTime > resetWindow) {
+        reloadCount = 0;
+        firstReloadTime = now;
+      }
+      if (reloadCount === 0) {
+        firstReloadTime = now;
+      }
+      reloadCount++;
+      if (reloadCount > maxReloads) {
+        console.error(`[Dashboard Reload] Maximum reload attempts (${maxReloads}) reached. Stopping to prevent infinite loop.`);
+        const errorDiv = document.createElement("div");
+        errorDiv.style.cssText = `
+          position: fixed;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          background: #ef4444;
+          color: white;
+          padding: 16px 24px;
+          border-radius: 8px;
+          z-index: 9999;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        `;
+        errorDiv.innerHTML = `
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            <span>Stream connection failed. Please refresh the page manually.</span>
+          </div>
+        `;
+        document.body.appendChild(errorDiv);
+        setTimeout(() => {
+          document.body.removeChild(errorDiv);
+        }, 1e4);
+        return;
+      }
+      console.warn(`[Dashboard Reload] Reloading dashboard (attempt ${reloadCount}/${maxReloads})`);
+      window.location.reload();
+    }
+  };
+  return () => {
+    const now = Date.now();
+    if (now - last >= interval) {
+      last = now;
+      doReload();
+    } else if (!queued) {
+      queued = true;
+      setTimeout(() => {
+        queued = false;
+        last = Date.now();
+        doReload();
+      }, interval - (now - last));
+    }
+  };
+};
+var throttledReloadDashboard = createThrottledReload(5e3, 3);
+
+// src/lib/utils/rateLimit.ts
+var rateLimitMap = /* @__PURE__ */ new Map();
+function checkRateLimit(identifier, options = {}) {
+  const windowMs = options.windowMs || 60 * 1e3;
+  const maxRequests = options.maxRequests || 3;
+  const now = Date.now();
+  const userLimit = rateLimitMap.get(identifier);
+  if (userLimit && userLimit.resetTime < now) {
+    rateLimitMap.delete(identifier);
+  }
+  if (!userLimit || userLimit.resetTime < now) {
+    rateLimitMap.set(identifier, {
+      count: 1,
+      resetTime: now + windowMs
+    });
+    return { allowed: true };
+  }
+  if (userLimit.count >= maxRequests) {
+    const retryAfter = Math.ceil((userLimit.resetTime - now) / 1e3);
+    return { allowed: false, retryAfter };
+  }
+  userLimit.count++;
+  return { allowed: true };
+}
+
+// src/lib/utils/sentryContext.ts
+function getSentry() {
+  try {
+    return __require("@sentry/nextjs");
+  } catch {
+    return null;
+  }
+}
+var UUID_PATTERN = /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi;
+var LONG_HEX_PATTERN = /\b[0-9a-f]{24,}\b/gi;
+var EMAIL_PATTERN = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/gi;
+var BEARER_PATTERN = /\bBearer\s+[A-Za-z0-9._~+/=-]+/gi;
+var URI_PATTERN = /\b[a-z][a-z0-9+.-]{1,31}:\/\/[^\s)]+/gi;
+var MEDIA_PATH_PATTERN = /\b[^\s)]+\.m3u8(?:\?[^\s)]*)?/gi;
+var SENSITIVE_ASSIGNMENT_PATTERN = /\b([A-Za-z0-9_.-]*(?:authorization|cookie|password|secret|token|session|email|api[_-]?key)[A-Za-z0-9_.-]*)\b\s*[:=]\s*["']?[^"'\s,;)}\]]+/gi;
+var SENSITIVE_KEY_PATTERN = /(authorization|cookie|password|secret|token|session|email|api[_-]?key|url|stream|playlist|media)/i;
+var sanitizeString = (value) => {
+  return value.replace(BEARER_PATTERN, "Bearer [redacted]").replace(SENSITIVE_ASSIGNMENT_PATTERN, (_match, key) => `${key}=[redacted]`).replace(URI_PATTERN, "[url]").replace(MEDIA_PATH_PATTERN, "[media]").replace(EMAIL_PATTERN, "[email]").replace(UUID_PATTERN, ":uuid").replace(LONG_HEX_PATTERN, ":id").replace(/\?.*$/, "").replace(/\s+/g, " ").trim();
+};
+var sanitizeRoute = (value) => {
+  if (typeof value !== "string" || value.trim().length === 0) return void 0;
+  try {
+    const parsed = new URL(value, "https://optifye.local");
+    return sanitizeString(parsed.pathname);
+  } catch {
+    return sanitizeString(value.split("?")[0] || value);
+  }
+};
+var sanitizeValue = (value, depth = 0) => {
+  if (depth > 3) return "[truncated]";
+  if (typeof value === "string") return sanitizeString(value);
+  if (typeof value === "number" || typeof value === "boolean" || value === null || value === void 0) return value;
+  if (Array.isArray(value)) {
+    return value.slice(0, 20).map((item) => sanitizeValue(item, depth + 1));
+  }
+  if (typeof value === "object") {
+    const sanitized = {};
+    Object.entries(value).forEach(([key, item]) => {
+      sanitized[key] = SENSITIVE_KEY_PATTERN.test(key) ? "[redacted]" : sanitizeValue(item, depth + 1);
+    });
+    return sanitized;
+  }
+  return String(value);
+};
+var sanitizeExtras = (extras) => {
+  if (!extras) return void 0;
+  return sanitizeValue(extras);
+};
+function addSentryBreadcrumb(message, options = {}) {
+  const sentry = getSentry();
+  if (!sentry?.addBreadcrumb) return;
+  const route = sanitizeRoute(options.route || options.extras?.route || options.extras?.endpoint || options.extras?.url);
+  const data = sanitizeExtras({
+    surface: options.surface,
+    route,
+    status: options.status,
+    ...options.extras
+  });
+  sentry.addBreadcrumb({
+    category: options.category || options.surface || "frontend",
+    message: sanitizeString(message),
+    level: options.severity || "info",
+    data
+  });
+}
+
+// src/lib/services/mixpanelService.ts
+var ROOT_DASHBOARD_EVENT_NAMES = {
+  operations_overview: "Operations Overview Page Clicked",
+  monitor: "Live Monitor Clicked"
+};
+var MIXPANEL_EVENT_NAME_ALIASES = {
+  "Operations Overview clicked": ROOT_DASHBOARD_EVENT_NAMES.operations_overview,
+  "monitor page clicked": ROOT_DASHBOARD_EVENT_NAMES.monitor
+};
+var MAX_QUEUED_MIXPANEL_ACTIONS = 200;
+var isMixpanelInitialized = false;
+var queuedMixpanelActions = [];
+var MIXPANEL_WARNING_RATE_LIMIT = {
+  windowMs: 10 * 60 * 1e3,
+  // 10 minutes
+  maxRequests: 2
+};
+var baseMixpanelExtras = () => ({
+  isInitialized: isMixpanelInitialized,
+  environment: process.env.NODE_ENV
+});
+var shouldReportMixpanel = (key, isError) => {
+  const options = MIXPANEL_WARNING_RATE_LIMIT;
+  return checkRateLimit(`mixpanel:${key}`, options).allowed;
+};
+var reportMixpanelWarning = (key, message, extras) => {
+  if (!shouldReportMixpanel(key)) return;
+  addSentryBreadcrumb(message, {
+    surface: "mixpanel",
+    severity: "warning",
+    extras: {
+      key,
+      ...baseMixpanelExtras(),
+      ...extras
+    }
+  });
+};
+var normalizeCoreEventName = (eventName) => {
+  const canonicalName = MIXPANEL_EVENT_NAME_ALIASES[eventName] || eventName;
+  if (canonicalName !== eventName) {
+    reportMixpanelWarning(`event_alias:${eventName}`, "Mixpanel event alias rewritten to canonical name", {
+      operation: "track_event",
+      originalEventName: eventName,
+      canonicalEventName: canonicalName
+    });
+  }
+  return canonicalName;
+};
+var queueMixpanelAction = (action) => {
+  if (queuedMixpanelActions.length >= MAX_QUEUED_MIXPANEL_ACTIONS) {
+    queuedMixpanelActions.shift();
+    reportMixpanelWarning("queue_overflow", "Mixpanel queue overflow, dropping oldest queued action", {
+      operation: "queue",
+      maxQueuedActions: MAX_QUEUED_MIXPANEL_ACTIONS
+    });
+  }
+  queuedMixpanelActions.push(action);
+};
+var trackCoreEvent = (eventName, properties) => {
+  const normalizedEventName = normalizeCoreEventName(eventName);
+  {
+    const mergedProps2 = {
+      ...{},
+      ...properties || {}
+    };
+    queueMixpanelAction({
+      type: "track",
+      eventName: normalizedEventName,
+      properties: mergedProps2
+    });
+    reportMixpanelWarning("track_event_queued", "Mixpanel not initialized yet: event queued", {
+      operation: "track_event",
+      eventName: normalizedEventName
+    });
+    return;
+  }
+};
+
+// src/lib/constants/videoGridMetricMode.ts
+var VALID_VIDEO_GRID_METRIC_MODES = /* @__PURE__ */ new Set([
+  "efficiency",
+  "recent_flow",
+  "recent_flow_wip_gated"
+]);
+var normalizeVideoGridMetricMode = (value, assemblyEnabled = false) => {
+  const normalized = typeof value === "string" ? value.trim().toLowerCase() : "";
+  if (VALID_VIDEO_GRID_METRIC_MODES.has(normalized)) {
+    return normalized;
+  }
+  return assemblyEnabled ? "recent_flow_wip_gated" : "efficiency";
+};
+var isRecentFlowVideoGridMetricMode = (value, assemblyEnabled = false) => {
+  const normalized = normalizeVideoGridMetricMode(value, assemblyEnabled);
+  return normalized === "recent_flow" || normalized === "recent_flow_wip_gated";
+};
+var isWipGatedVideoGridMetricMode = (value, assemblyEnabled = false) => normalizeVideoGridMetricMode(value, assemblyEnabled) === "recent_flow_wip_gated";
+
+// src/components/dashboard/grid/videoGridMetricUtils.ts
+var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+var isVideoGridRecentFlowEnabled = (workspace) => isRecentFlowVideoGridMetricMode(
+  workspace.video_grid_metric_mode,
+  workspace.assembly_enabled === true
+);
+var isVideoGridWipGated = (workspace) => isWipGatedVideoGridMetricMode(
+  workspace.video_grid_metric_mode,
+  workspace.assembly_enabled === true
+);
+var hasVideoGridRecentFlow = (workspace) => isVideoGridRecentFlowEnabled(workspace) && isFiniteNumber(workspace.recent_flow_percent);
+var isVideoGridRecentFlowUnavailable = (workspace) => isVideoGridRecentFlowEnabled(workspace) && !hasVideoGridRecentFlow(workspace);
+var getRawVideoGridMetricValue = (workspace) => {
+  const recentFlowPercent = workspace.recent_flow_percent;
+  if (hasVideoGridRecentFlow(workspace) && isFiniteNumber(recentFlowPercent)) {
+    return recentFlowPercent;
+  }
+  if (isVideoGridRecentFlowUnavailable(workspace)) {
+    return null;
+  }
+  return workspace.efficiency;
+};
+var hasIncomingWipMapping = (workspace) => Boolean(workspace.incoming_wip_buffer_name);
+var getVideoGridBaseColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
+  const metricValue = getRawVideoGridMetricValue(workspace);
+  if (!isFiniteNumber(metricValue)) {
+    return "neutral";
+  }
+  return getEfficiencyColor(metricValue, legend);
+};
+var isLowWipGreenOverride = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
+  if (workspace.scheduled_break_active === true) {
+    return false;
+  }
+  if (workspace.recent_flow_forced_zero_after_shift === true) {
+    return false;
+  }
+  if (!hasVideoGridRecentFlow(workspace) || !isVideoGridWipGated(workspace)) {
+    return false;
+  }
+  if (getVideoGridBaseColorState(workspace, legend) !== "red") {
+    return false;
+  }
+  if (!hasIncomingWipMapping(workspace)) {
+    return false;
+  }
+  return isFiniteNumber(workspace.incoming_wip_current) && workspace.incoming_wip_current <= 1;
+};
+var isHighEfficiencyRedFlowOverride = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
+  if (workspace.scheduled_break_active === true) {
+    return false;
+  }
+  if (workspace.recent_flow_forced_zero_after_shift === true) {
+    return false;
+  }
+  if (!hasVideoGridRecentFlow(workspace) || !isVideoGridWipGated(workspace)) {
+    return false;
+  }
+  if (isLowWipGreenOverride(workspace, legend)) {
+    return false;
+  }
+  if (getVideoGridBaseColorState(workspace, legend) !== "red") {
+    return false;
+  }
+  return isFiniteNumber(workspace.efficiency) && workspace.efficiency > 100;
+};
+var getVideoGridMetricValue = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => isHighEfficiencyRedFlowOverride(workspace, legend) ? workspace.efficiency : getRawVideoGridMetricValue(workspace);
+var toMinuteBucket = (minuteBucket) => Number.isFinite(minuteBucket) ? Math.floor(minuteBucket) : Math.floor(Date.now() / 6e4);
+var getEffectiveFlowMinuteBucket = (workspace) => {
+  const effectiveAt = workspace.recent_flow_effective_end_at;
+  if (!effectiveAt) {
+    return void 0;
+  }
+  const timestamp = Date.parse(effectiveAt);
+  if (!Number.isFinite(timestamp)) {
+    return void 0;
+  }
+  return Math.floor(timestamp / 6e4);
+};
+var hashWorkspaceKey = (workspace) => {
+  const workspaceKey = workspace.workspace_uuid || workspace.workspace_name || "unknown";
+  let hash = 0;
+  for (let index = 0; index < workspaceKey.length; index += 1) {
+    hash = (hash * 31 + workspaceKey.charCodeAt(index)) % 2147483647;
+  }
+  return hash;
+};
+var getSyntheticLowWipDisplayValue = (workspace, minuteBucket) => {
+  const bucket = getEffectiveFlowMinuteBucket(workspace) ?? toMinuteBucket(minuteBucket);
+  const offset = (hashWorkspaceKey(workspace) % 11 + bucket % 11 + 11) % 11;
+  return 100 + offset;
+};
+var getVideoGridDisplayValue = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND, minuteBucket) => isLowWipGreenOverride(workspace, legend) ? getSyntheticLowWipDisplayValue(workspace, minuteBucket) : getVideoGridMetricValue(workspace, legend);
+var getVideoGridColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
+  const baseColor = getVideoGridBaseColorState(workspace, legend);
+  if (!hasVideoGridRecentFlow(workspace)) {
+    return baseColor;
+  }
+  if (!isVideoGridWipGated(workspace)) {
+    return baseColor;
+  }
+  if (baseColor !== "red") {
+    return baseColor;
+  }
+  if (isLowWipGreenOverride(workspace, legend)) {
+    return "green";
+  }
+  if (isHighEfficiencyRedFlowOverride(workspace, legend)) {
+    return getEfficiencyColor(workspace.efficiency, legend);
+  }
+  if (!hasIncomingWipMapping(workspace)) {
+    return baseColor;
+  }
+  if (!isFiniteNumber(workspace.incoming_wip_current)) {
+    return "neutral";
+  }
+  return baseColor;
+};
+function getTrendArrowAndColor(trend) {
+  if (trend > 0) {
+    return { arrow: "\u2191", color: "text-green-400" };
+  } else if (trend < 0) {
+    return { arrow: "\u2193", color: "text-red-400" };
+  } else {
+    return { arrow: "\u2192", color: "text-gray-400" };
+  }
+}
+var VideoCard = React__default.default.memo(({
+  workspace,
+  hlsUrl,
+  shouldPlay,
+  onClick,
+  onFatalError,
+  legend,
+  cropping,
+  canvasFps = 30,
+  useRAF = true,
+  className = "",
+  compact = false,
+  displayMinuteBucket,
+  displayName,
+  lastSeenLabel,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const videoRef = React.useRef(null);
+  const canvasRef = React.useRef(null);
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const { isStale: isStreamStale } = useHlsStreamWithCropping(videoRef, canvasRef, {
+    src: hlsUrl,
+    shouldPlay,
+    cropping,
+    canvasFps,
+    useRAF,
+    onFatalError: onFatalError ?? (() => throttledReloadDashboard())
+  });
+  const showOffline = Boolean(isStreamStale);
+  const lastSeenText = lastSeenLabel || "Unknown";
+  const workspaceDisplayName = displayName || workspace.displayName || workspace.workspace_name;
+  const videoGridMetricValue = getVideoGridMetricValue(workspace, effectiveLegend);
+  const videoGridDisplayValue = getVideoGridDisplayValue(workspace, effectiveLegend, displayMinuteBucket);
+  const videoGridColorState = getVideoGridColorState(workspace, effectiveLegend);
+  const isRecentFlowCard = isVideoGridRecentFlowEnabled(workspace);
+  const isHighEfficiencyOverride = isHighEfficiencyRedFlowOverride(workspace, effectiveLegend);
+  const hasDisplayMetric = typeof videoGridDisplayValue === "number" && Number.isFinite(videoGridDisplayValue);
+  const hasBarMetric = typeof videoGridMetricValue === "number" && Number.isFinite(videoGridMetricValue);
+  const shouldRenderMetricBadge = hasDisplayMetric;
+  const badgeTitle = isHighEfficiencyOverride ? `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%` : hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
+  const badgeLabel = `${Math.round(videoGridDisplayValue ?? 0)}%`;
+  const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
+  const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
+  const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
+  const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
+  const handleClick = React.useCallback(() => {
+    trackCoreEvent("Workspace Card Clicked", {
+      workspace_id: workspace.workspace_uuid,
+      workspace_name: workspace.workspace_name,
+      efficiency: workspace.efficiency,
+      status: efficiencyStatus,
+      trend: workspace.trend
+    });
+    if (onClick) {
+      onClick();
+    }
+  }, [onClick, workspace, efficiencyStatus]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] active:scale-[0.995] transition-transform duration-200 shadow-sm touch-manipulation ${className}`,
+      style: { width: "100%", height: "100%" },
+      onClick: handleClick,
+      onMouseEnter,
+      onMouseLeave,
+      onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
+      onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
+      title: displayName,
+      tabIndex: 0,
+      "aria-label": `Open workspace ${displayName}`,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-10", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "video",
+              {
+                ref: videoRef,
+                className: `h-full w-full object-cover ${cropping ? "hidden" : ""}`,
+                playsInline: true,
+                muted: true,
+                disablePictureInPicture: true,
+                controlsList: "nodownload noplaybackrate"
+              }
+            ),
+            cropping && /* @__PURE__ */ jsxRuntime.jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: "h-full w-full object-cover"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-0 z-20 pointer-events-none ${efficiencyOverlayClass}` }),
+          showOffline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/70 px-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: `${compact ? "w-4 h-4" : "w-5 h-5"} text-amber-300` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-semibold text-white ${compact ? "text-[11px]" : "text-xs"}`, children: "Not streaming" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-gray-200 ${compact ? "text-[10px]" : "text-[11px]"}`, children: [
+              "Last seen: ",
+              lastSeenText
+            ] })
+          ] }) }),
+          shouldRenderMetricBadge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute ${compact ? "top-1 right-1" : "top-2 right-2"} z-30`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-testid": "video-card-metric-badge",
+              className: `bg-black/70 backdrop-blur-sm rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
+              title: badgeTitle,
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute bottom-0 left-0 right-0 ${compact ? "h-0.5" : "h-1"} bg-black/50 z-30`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-testid": "video-card-metric-bar",
+              className: `h-full ${efficiencyBarClass} transition-all duration-500`,
+              style: { width: `${hasBarMetric ? Math.min(100, Math.max(0, videoGridMetricValue)) : videoGridColorState === "neutral" ? 100 : 0}%` }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 sm:${compact ? "p-1" : "p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { size: compact ? 10 : 12, className: "shrink-0 text-white" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `min-w-0 truncate text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex shrink-0 items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
+            trendInfo && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${compact ? "text-sm" : "text-lg"} ${trendInfo.color}`,
+                style: { lineHeight: 1, display: "flex", alignItems: "center" },
+                children: trendInfo.arrow
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full ${showOffline ? "bg-red-500" : "bg-green-500"}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: showOffline ? "Offline" : "Live" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}, (prevProps, nextProps) => {
+  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
+    return false;
+  }
+  if (prevProps.workspace.workspace_uuid !== nextProps.workspace.workspace_uuid || prevProps.workspace.workspace_name !== nextProps.workspace.workspace_name || prevProps.workspace.line_id !== nextProps.workspace.line_id) {
+    return false;
+  }
+  if (prevProps.displayName !== nextProps.displayName) {
+    return false;
+  }
+  if (prevProps.lastSeenLabel !== nextProps.lastSeenLabel) {
+    return false;
+  }
+  if (prevProps.legend !== nextProps.legend) {
+    return false;
+  }
+  if (prevProps.compact !== nextProps.compact) {
+    return false;
+  }
+  if (prevProps.displayMinuteBucket !== nextProps.displayMinuteBucket) {
+    return false;
+  }
+  if (prevProps.hlsUrl !== nextProps.hlsUrl || prevProps.shouldPlay !== nextProps.shouldPlay) {
+    return false;
+  }
+  if (prevProps.cropping?.x !== nextProps.cropping?.x || prevProps.cropping?.y !== nextProps.cropping?.y || prevProps.cropping?.width !== nextProps.cropping?.width || prevProps.cropping?.height !== nextProps.cropping?.height) {
+    return false;
+  }
+  return true;
+});
+VideoCard.displayName = "VideoCard";
+var MOBILE_SCROLL_THRESHOLD = 15;
+var MOBILE_BREAKPOINT_PX = 640;
+var sortWorkspaces = (left, right) => {
+  if (left.line_id !== right.line_id) {
+    return left.line_id.localeCompare(right.line_id);
+  }
+  const leftMatch = left.workspace_name.match(/WS(\d+)/);
+  const rightMatch = right.workspace_name.match(/WS(\d+)/);
+  if (leftMatch && rightMatch) {
+    return parseInt(leftMatch[1], 10) - parseInt(rightMatch[1], 10);
+  }
+  return left.workspace_name.localeCompare(right.workspace_name, void 0, { numeric: true });
+};
+var RecentFlowSnapshotGrid = ({
+  workspaces,
+  videoStreamsByWorkspaceId,
+  legend,
+  className = ""
+}) => {
+  const containerRef = React.useRef(null);
+  const readinessRef = React.useRef(null);
+  const [gridCols, setGridCols] = React.useState(4);
+  const [gridRows, setGridRows] = React.useState(1);
+  const [isMobileScrollableGrid, setIsMobileScrollableGrid] = React.useState(false);
+  const sortedWorkspaces = React.useMemo(
+    () => [...workspaces || []].sort(sortWorkspaces),
+    [workspaces]
+  );
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const displayMinuteBucket = Math.floor(Date.now() / 6e4);
+  const expectedVideoCount = React.useMemo(
+    () => sortedWorkspaces.filter((workspace) => {
+      const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+      return Boolean(workspaceId && videoStreamsByWorkspaceId[workspaceId]?.hls_url);
+    }).length,
+    [sortedWorkspaces, videoStreamsByWorkspaceId]
+  );
+  const publishSnapshotReadiness = React.useCallback((readyVideoCount) => {
+    const status = {
+      expectedVideoCount,
+      readyVideoCount,
+      status: expectedVideoCount === 0 ? "no_videos" : readyVideoCount >= expectedVideoCount ? "ready" : "loading",
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const isReady = expectedVideoCount > 0 && status.status === "ready";
+    if (typeof window !== "undefined") {
+      window.__OPTIFYE_SNAPSHOT_READY__ = isReady;
+      window.__OPTIFYE_SNAPSHOT_VIDEO_STATUS__ = status;
+    }
+    const marker = readinessRef.current;
+    if (marker) {
+      marker.dataset.ready = isReady ? "true" : "false";
+      marker.dataset.status = status.status;
+      marker.dataset.expectedVideoCount = String(status.expectedVideoCount);
+      marker.dataset.readyVideoCount = String(status.readyVideoCount);
+      marker.dataset.updatedAt = status.updatedAt;
+    }
+  }, [expectedVideoCount]);
+  const calculateOptimalGrid = React.useCallback(() => {
+    if (!containerRef.current) return;
+    const containerPadding = 16;
+    const rawContainerWidth = containerRef.current.clientWidth;
+    const containerWidth = rawContainerWidth - containerPadding;
+    const containerHeight = containerRef.current.clientHeight - containerPadding;
+    const count = sortedWorkspaces.length;
+    if (count === 0) {
+      setGridCols(1);
+      setGridRows(1);
+      setIsMobileScrollableGrid(false);
+      return;
+    }
+    const shouldUseMobileScroll = rawContainerWidth < MOBILE_BREAKPOINT_PX && count >= MOBILE_SCROLL_THRESHOLD;
+    const optimalLayouts = {
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 2,
+      5: 3,
+      6: 3,
+      7: 4,
+      8: 4,
+      9: 3,
+      10: 5,
+      11: 4,
+      12: 4,
+      13: 5,
+      14: 5,
+      15: 5,
+      16: 4,
+      17: 6,
+      18: 6,
+      19: 5,
+      20: 5,
+      21: 7,
+      22: 6,
+      23: 6,
+      24: 6
+    };
+    let bestCols = optimalLayouts[count] || Math.ceil(Math.sqrt(count));
+    const containerAspectRatio = containerWidth / containerHeight;
+    const targetAspectRatio = 16 / 9;
+    const gap = 8;
+    if (containerAspectRatio > targetAspectRatio * 1.5 && count > 6) {
+      bestCols = Math.min(bestCols + 1, Math.ceil(count / 2));
+    }
+    const minCellWidth = 100;
+    const availableWidth = containerWidth - gap * (bestCols - 1);
+    const cellWidth = availableWidth / bestCols;
+    if (cellWidth < minCellWidth && bestCols > 1) {
+      bestCols = Math.max(1, Math.floor((containerWidth + gap) / (minCellWidth + gap)));
+    }
+    setGridCols(bestCols);
+    setGridRows(Math.ceil(count / bestCols));
+    setIsMobileScrollableGrid(shouldUseMobileScroll);
+  }, [sortedWorkspaces.length]);
+  React.useEffect(() => {
+    calculateOptimalGrid();
+    window.addEventListener("resize", calculateOptimalGrid);
+    return () => window.removeEventListener("resize", calculateOptimalGrid);
+  }, [calculateOptimalGrid]);
+  React.useEffect(() => {
+    const attachedVideos = /* @__PURE__ */ new Set();
+    const videoEvents = ["loadeddata", "canplay", "playing", "timeupdate", "error", "stalled"];
+    const hasDecodedFrame = (video) => video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && video.videoWidth > 0 && video.videoHeight > 0;
+    const updateReadiness = () => {
+      const videos = Array.from(containerRef.current?.querySelectorAll("video") ?? []);
+      const readyVideoCount = videos.filter(hasDecodedFrame).length;
+      publishSnapshotReadiness(Math.min(readyVideoCount, expectedVideoCount));
+      for (const video of videos) {
+        if (attachedVideos.has(video)) continue;
+        attachedVideos.add(video);
+        for (const eventName of videoEvents) {
+          video.addEventListener(eventName, updateReadiness);
+        }
+      }
+    };
+    publishSnapshotReadiness(0);
+    updateReadiness();
+    const intervalId = window.setInterval(updateReadiness, 250);
+    return () => {
+      window.clearInterval(intervalId);
+      for (const video of attachedVideos) {
+        for (const eventName of videoEvents) {
+          video.removeEventListener(eventName, updateReadiness);
+        }
+      }
+      if (typeof window !== "undefined") {
+        window.__OPTIFYE_SNAPSHOT_READY__ = false;
+        window.__OPTIFYE_SNAPSHOT_VIDEO_STATUS__ = void 0;
+      }
+    };
+  }, [expectedVideoCount, publishSnapshotReadiness]);
+  if (!sortedWorkspaces.length) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: readinessRef,
+          "data-testid": "snapshot-video-readiness",
+          "data-ready": "false",
+          "data-status": "no_videos",
+          "data-expected-video-count": "0",
+          "data-ready-video-count": "0",
+          hidden: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[320px] items-center justify-center rounded-md border border-dashed border-slate-300 bg-slate-50 text-sm font-medium text-slate-500", children: "No workstation snapshot available" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-label": "Recent-flow workstation snapshot",
+      className: `relative h-full min-h-0 w-full overflow-hidden bg-slate-50/30 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: readinessRef,
+            "data-testid": "snapshot-video-readiness",
+            "data-ready": "false",
+            "data-status": expectedVideoCount === 0 ? "no_videos" : "loading",
+            "data-expected-video-count": expectedVideoCount,
+            "data-ready-video-count": "0",
+            hidden: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: containerRef,
+            "data-testid": "video-grid-scroll-container",
+            "data-mobile-scrollable": isMobileScrollableGrid ? "true" : "false",
+            className: `absolute inset-0 w-full overflow-x-hidden px-1 py-1 sm:px-2 sm:py-2 ${isMobileScrollableGrid ? "overflow-y-auto" : "overflow-hidden"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-testid": "video-grid-layout",
+                className: `grid min-w-0 w-full gap-1.5 sm:gap-2 ${isMobileScrollableGrid ? "content-start" : "h-full"}`,
+                style: {
+                  gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
+                  gridTemplateRows: isMobileScrollableGrid ? void 0 : `repeat(${gridRows}, 1fr)`,
+                  gridAutoFlow: "row"
+                },
+                children: sortedWorkspaces.map((workspace) => {
+                  const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+                  const stream = workspaceId ? videoStreamsByWorkspaceId[workspaceId] : null;
+                  const hlsUrl = stream?.hls_url || "";
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-workspace-id": workspaceId,
+                      className: isMobileScrollableGrid ? "workspace-card relative min-w-0 w-full aspect-video min-h-[92px]" : "workspace-card relative min-w-0 w-full h-full",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        VideoCard,
+                        {
+                          workspace,
+                          hlsUrl,
+                          shouldPlay: Boolean(hlsUrl),
+                          legend: effectiveLegend,
+                          cropping: stream?.crop || void 0,
+                          canvasFps: 10,
+                          useRAF: false,
+                          displayMinuteBucket,
+                          displayName: workspace.displayName || workspace.workspace_name,
+                          compact: true
+                        }
+                      ) })
+                    },
+                    `${workspace.line_id}-${workspaceId}`
+                  );
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.RecentFlowSnapshotGrid = RecentFlowSnapshotGrid;