@optifye/dashboard-core 6.11.25 → 6.11.26

package/dist/index.js

@@ -3016,6 +3016,7 @@ var AuthService = class {
       scope_ttl_seconds: enrichedUser.scope_ttl_seconds,
       access_scope: enrichedUser.access_scope,
       company_id: enrichedUser.company_id,
+      company: enrichedUser.company,
       first_login_completed: enrichedUser.profile.first_login_completed,
       properties: {
         company_id: enrichedUser.company_id,
@@ -20256,6 +20257,17 @@ function useCompanyHasVlmEnabledLine(options = {}) {
   };
 }
 
+// src/lib/hooks/useCompanyFastSlowClipFiltersEnabled.ts
+function useCompanyFastSlowClipFiltersEnabled() {
+  const { user, loading } = useAuth();
+  const company = user?.company || user?.properties?.company;
+  const explicitValue = company?.enable_fast_slow_clip_filters;
+  return {
+    isFastSlowClipFiltersEnabled: typeof explicitValue === "boolean" ? explicitValue : true,
+    isResolved: !loading || typeof explicitValue === "boolean"
+  };
+}
+
 // src/lib/utils/api.ts
 var apiUtils = {
   /**
@@ -38226,14 +38238,15 @@ var HlsVideoPlayer = React142.forwardRef(({
     };
   }, [effectiveSrc, initializePlayer, cleanupBlobUrl]);
   React142.useEffect(() => {
-    if (videoRef.current) {
-      if (autoplay) {
-        videoRef.current.play().catch((err) => {
-          console.warn("[HlsVideoPlayer] Autoplay failed:", err);
-        });
-      }
+    if (!videoRef.current || !autoplay || !effectiveSrc) {
+      return;
     }
-  }, [autoplay]);
+    videoRef.current.play().catch((err) => {
+      if (err?.name !== "AbortError") {
+        console.warn("[HlsVideoPlayer] Autoplay failed:", err);
+      }
+    });
+  }, [autoplay, effectiveSrc]);
   const resetControlsTimeout = React142.useCallback(() => {
     if (controlsPinned) {
       setShowControls(true);
@@ -40154,7 +40167,8 @@ var FileManagerFilters = ({
   snapshotClipId,
   className = "",
   targetCycleTime = null,
-  idleTimeVlmEnabled = false
+  idleTimeVlmEnabled = false,
+  showPercentileCycleFilters = true
 }) => {
   const [expandedNodes, setExpandedNodes] = React142.useState(/* @__PURE__ */ new Set());
   const [startTime, setStartTime] = React142.useState("");
@@ -40433,6 +40447,9 @@ var FileManagerFilters = ({
     }
   }, [ensureAllIdleTimeClipMetadataLoaded]);
   const fetchPercentileClips = React142.useCallback(async (type) => {
+    if (!showPercentileCycleFilters && type !== "idle-times") {
+      return;
+    }
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for percentile clips fetch");
       return;
@@ -40479,7 +40496,7 @@ var FileManagerFilters = ({
     } catch (error) {
       console.error(`[FileManager] Error fetching ${type} clips:`, error);
     }
-  }, [workspaceId, date, shift, filterState.percentile, supabase]);
+  }, [workspaceId, date, shift, filterState.percentile, showPercentileCycleFilters, supabase]);
   const percentileCountsKey = React142.useMemo(() => {
     if (!workspaceId || !date || shift === void 0) {
       return null;
@@ -40487,7 +40504,7 @@ var FileManagerFilters = ({
     return `${workspaceId}:${date}:${shift}:${filterState.percentile}`;
   }, [workspaceId, date, shift, filterState.percentile]);
   React142.useEffect(() => {
-    if (!percentileCountsKey) {
+    if (!showPercentileCycleFilters || !percentileCountsKey) {
       percentileCountsKeyRef.current = null;
       percentilePrefetchRef.current = { key: null, types: /* @__PURE__ */ new Set() };
       setPercentileCounts({
@@ -40507,8 +40524,11 @@ var FileManagerFilters = ({
       "slow-cycles": null
     });
     setPercentileClips({});
-  }, [percentileCountsKey]);
+  }, [showPercentileCycleFilters, percentileCountsKey]);
   React142.useEffect(() => {
+    if (!showPercentileCycleFilters) {
+      return;
+    }
     if (!prefetchedPercentileCounts || !percentileCountsKey) {
       return;
     }
@@ -40523,8 +40543,11 @@ var FileManagerFilters = ({
       "fast-cycles": typeof prefetchedPercentileCounts.counts["fast-cycles"] === "number" ? prefetchedPercentileCounts.counts["fast-cycles"] : prev["fast-cycles"],
       "slow-cycles": typeof prefetchedPercentileCounts.counts["slow-cycles"] === "number" ? prefetchedPercentileCounts.counts["slow-cycles"] : prev["slow-cycles"]
     }));
-  }, [prefetchedPercentileCounts, percentileCountsKey, filterState.percentile]);
+  }, [showPercentileCycleFilters, prefetchedPercentileCounts, percentileCountsKey, filterState.percentile]);
   const fetchPercentileCounts = React142.useCallback(async (options) => {
+    if (!showPercentileCycleFilters) {
+      return;
+    }
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for percentile counts fetch");
       return;
@@ -40578,9 +40601,9 @@ var FileManagerFilters = ({
     } catch (error) {
       console.error("[FileManager] Error fetching percentile counts:", error);
     }
-  }, [workspaceId, date, shift, filterState.percentile, supabase, percentileCounts, percentileClips, fetchPercentileClips]);
+  }, [workspaceId, date, shift, filterState.percentile, showPercentileCycleFilters, supabase, percentileCounts, percentileClips, fetchPercentileClips]);
   React142.useEffect(() => {
-    if (!isReady || !percentileCountsKey) {
+    if (!showPercentileCycleFilters || !isReady || !percentileCountsKey) {
       return;
     }
     const schedule = () => {
@@ -40591,13 +40614,13 @@ var FileManagerFilters = ({
     } else {
       setTimeout(schedule, 0);
     }
-  }, [isReady, percentileCountsKey, fetchPercentileCounts]);
+  }, [showPercentileCycleFilters, isReady, percentileCountsKey, fetchPercentileCounts]);
   const shouldShowCategory = React142.useCallback((categoryId) => {
     switch (categoryId) {
       case "fast-cycles":
-        return filterState.showFastCycles;
+        return showPercentileCycleFilters && filterState.showFastCycles;
       case "slow-cycles":
-        return filterState.showSlowCycles;
+        return showPercentileCycleFilters && filterState.showSlowCycles;
       case "longest-idles":
         return false;
       // filterState.showLongestIdles; // Temporarily disabled
@@ -40610,7 +40633,7 @@ var FileManagerFilters = ({
       default:
         return true;
     }
-  }, [filterState]);
+  }, [filterState, showPercentileCycleFilters]);
   const getPercentileIcon = React142.useCallback((type, isExpanded, colorClasses) => {
     const iconMap = {
       "fast-cycles": { icon: lucideReact.TrendingUp, color: "text-green-600" },
@@ -40781,7 +40804,7 @@ var FileManagerFilters = ({
     const filteredSlowCycles = (percentileClips["slow-cycles"] || []).filter((clip) => isClipInTimeRange(clip.creation_timestamp || ""));
     const fastCount = typeof percentileCounts["fast-cycles"] === "number" ? percentileCounts["fast-cycles"] : null;
     const slowCount = typeof percentileCounts["slow-cycles"] === "number" ? percentileCounts["slow-cycles"] : null;
-    const percentileCategories = [
+    const percentileCategories = showPercentileCycleFilters ? [
       {
         id: "fast-cycles",
         label: "Fast Cycles",
@@ -40879,7 +40902,7 @@ var FileManagerFilters = ({
           };
         })
       } */
-    ];
+    ] : [];
     const orderedIds = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
     orderedIds.forEach((orderedId) => {
       const percentileCategory = percentileCategories.find((cat) => cat.id === orderedId);
@@ -40904,7 +40927,7 @@ var FileManagerFilters = ({
       }
     });
     return tree;
-  }, [categories, expandedNodes, counts, clipMetadata, percentileCounts, percentileClips, shouldShowCategory, getPercentileIcon, isClipInTimeRange, isTimeFilterActive]);
+  }, [categories, expandedNodes, counts, clipMetadata, percentileCounts, percentileClips, shouldShowCategory, getPercentileIcon, isClipInTimeRange, isTimeFilterActive, showPercentileCycleFilters]);
   const toggleExpanded = (nodeId) => {
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(nodeId)) {
@@ -40916,10 +40939,10 @@ var FileManagerFilters = ({
         console.log(`[FileManager] Fetching clips for expanded category: ${nodeId}`);
         fetchClipMetadata(nodeId, 1);
       }
-      if (nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+      if (showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
         fetchPercentileClips("fast-cycles");
       }
-      if (nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+      if (showPercentileCycleFilters && nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
         fetchPercentileClips("slow-cycles");
       }
     }
@@ -40937,10 +40960,10 @@ var FileManagerFilters = ({
           console.log(`[FileManager] Fetching clips for expanded category: ${node.id}`);
           fetchClipMetadata(node.id, 1);
         }
-        if (node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+        if (showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
           fetchPercentileClips("fast-cycles");
         }
-        if (node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+        if (showPercentileCycleFilters && node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
           fetchPercentileClips("slow-cycles");
         }
       }
@@ -41378,7 +41401,8 @@ var FileManagerFilters = ({
 };
 var PERCENTILE_PRESETS = [5, 10, 15, 20, 25, 30];
 var AdvancedFilterDialog = ({
-  onApply
+  onApply,
+  showPercentileCycleFilters = true
 }) => {
   const {
     state,
@@ -41445,7 +41469,7 @@ var AdvancedFilterDialog = ({
             )
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-8 overflow-y-auto max-h-[60vh]", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            showPercentileCycleFilters && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-gradient-to-r from-emerald-100 to-blue-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-emerald-600" }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -41538,7 +41562,7 @@ var AdvancedFilterDialog = ({
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-br from-green-50 to-red-50 rounded-xl p-4 space-y-3", children: [
+                showPercentileCycleFilters && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-br from-green-50 to-red-50 rounded-xl p-4 space-y-3", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-sm font-bold text-gray-700 uppercase tracking-wide flex items-center space-x-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-4 w-4 text-emerald-600" }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Performance Extremes" })
@@ -41819,6 +41843,7 @@ var BottlenecksContent = ({
   const supabase = useSupabase();
   const timezone = useAppTimezone();
   const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
+  const { isFastSlowClipFiltersEnabled } = useCompanyFastSlowClipFiltersEnabled();
   const { shiftConfig, isLoading: isShiftConfigLoading } = useDynamicShiftConfig(lineId);
   const { effectiveShift, effectiveDate } = React142.useMemo(() => {
     if (shift !== void 0 && shift !== null && date) {
@@ -41875,12 +41900,16 @@ var BottlenecksContent = ({
   }), []);
   const [initialFilter, setInitialFilter] = React142.useState("");
   const currentIndexRef = React142.useRef(0);
+  const currentClipIdRef = React142.useRef(null);
   const currentPositionRef = React142.useRef(0);
   const currentTotalRef = React142.useRef(0);
   const activeFilterRef = React142.useRef(initialFilter);
   const isMountedRef = React142.useRef(true);
   const fetchInProgressRef = React142.useRef(/* @__PURE__ */ new Set());
   const refreshCountsTimeoutRef = React142.useRef(null);
+  const awaitingNextClipRef = React142.useRef(false);
+  const retryTimeoutRef = React142.useRef(null);
+  const navigationLockRef = React142.useRef(false);
   const [isPlaying, setIsPlaying] = React142.useState(false);
   const [currentTime, setCurrentTime] = React142.useState(0);
   const [duration, setDuration] = React142.useState(0);
@@ -41889,6 +41918,7 @@ var BottlenecksContent = ({
   const [playbackSpeed, setPlaybackSpeed] = React142.useState(1);
   const [currentPosition, setCurrentPosition] = React142.useState(0);
   const [currentTotal, setCurrentTotal] = React142.useState(0);
+  const [playerInstanceNonce, setPlayerInstanceNonce] = React142.useState(0);
   const [isTransitioning, setIsTransitioning] = React142.useState(false);
   const [pendingVideo, setPendingVideo] = React142.useState(null);
   const [isVideoBuffering, setIsVideoBuffering] = React142.useState(false);
@@ -41945,14 +41975,29 @@ var BottlenecksContent = ({
   const [isFullscreen, setIsFullscreen] = React142.useState(false);
   const categoryMetadataRef = React142.useRef([]);
   const currentMetadataIndexRef = React142.useRef(0);
+  const clearRetryTimeout = React142.useCallback(() => {
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+    }
+  }, []);
+  const bumpPlayerInstanceNonce = React142.useCallback(() => {
+    setPlayerInstanceNonce((prev) => prev + 1);
+  }, []);
   const updateActiveFilter = React142.useCallback((newFilter) => {
     console.log(`[BottlenecksContent] Updating active filter: ${activeFilterRef.current} -> ${newFilter}`);
+    awaitingNextClipRef.current = false;
+    navigationLockRef.current = false;
+    clearRetryTimeout();
     setActiveFilter(newFilter);
     activeFilterRef.current = newFilter;
-  }, []);
+  }, [clearRetryTimeout]);
   React142.useEffect(() => {
     currentIndexRef.current = currentIndex;
   }, [currentIndex]);
+  React142.useEffect(() => {
+    currentClipIdRef.current = currentClipId;
+  }, [currentClipId]);
   React142.useEffect(() => {
     currentPositionRef.current = currentPosition;
   }, [currentPosition]);
@@ -42361,8 +42406,11 @@ var BottlenecksContent = ({
     }
   }, [activeFilter, s3ClipsService, mergedCounts, loadFirstVideoForCategory, allVideos, firstClip]);
   const isPercentileCategory = React142.useCallback((categoryId) => {
+    if (!isFastSlowClipFiltersEnabled) {
+      return false;
+    }
     return ["fast-cycles", "slow-cycles", "longest-idles"].includes(categoryId);
-  }, []);
+  }, [isFastSlowClipFiltersEnabled]);
   const getMetadataCacheKey = React142.useCallback((categoryId) => {
     return `${categoryId}-${effectiveDateString}-${effectiveShiftId}-${snapshotDateTime ?? "nosnap"}-${snapshotClipId ?? "nosnap"}`;
   }, [effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId]);
@@ -42394,6 +42442,21 @@ var BottlenecksContent = ({
         return [categoryId];
     }
   }, []);
+  React142.useEffect(() => {
+    if (isFastSlowClipFiltersEnabled) {
+      return;
+    }
+    if (activeFilter !== "fast-cycles" && activeFilter !== "slow-cycles") {
+      return;
+    }
+    const fallbackFilter = ["cycle_completion", "idle_time"].find((type) => (dynamicCounts[type] || 0) > 0) || clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0)?.type || clipTypes[0]?.type;
+    if (!fallbackFilter || fallbackFilter === activeFilter) {
+      return;
+    }
+    setCategoryMetadata([]);
+    categoryMetadataRef.current = [];
+    updateActiveFilter(fallbackFilter);
+  }, [isFastSlowClipFiltersEnabled, activeFilter, dynamicCounts, clipTypes, updateActiveFilter]);
   React142.useCallback((categoryId) => {
     if (isPercentileCategory(categoryId)) {
       return categoryMetadata.length;
@@ -42423,6 +42486,7 @@ var BottlenecksContent = ({
     }
   }, [isNavigating, currentIndex, filteredVideos.length]);
   const clearLoadingState = React142.useCallback(() => {
+    navigationLockRef.current = false;
     setIsTransitioning(false);
     setIsNavigating(false);
     if (loadingTimeoutRef.current) {
@@ -42434,6 +42498,11 @@ var BottlenecksContent = ({
     if (!workspaceId) {
       return;
     }
+    if (!isFastSlowClipFiltersEnabled && (categoryId === "fast-cycles" || categoryId === "slow-cycles")) {
+      setCategoryMetadata([]);
+      categoryMetadataRef.current = [];
+      return;
+    }
     if (!isEffectiveShiftReady) {
       console.log("[BottlenecksContent] Skipping metadata load - shift/date not ready");
       return;
@@ -42586,7 +42655,7 @@ var BottlenecksContent = ({
     } finally {
       setIsCategoryLoading(false);
     }
-  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, supabase]);
+  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, isFastSlowClipFiltersEnabled, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, supabase]);
   React142.useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -42637,8 +42706,12 @@ var BottlenecksContent = ({
   const loadAndPlayClipById = React142.useCallback(async (clipId, categoryId, position, metadataContext) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}, position=${position}`);
+    awaitingNextClipRef.current = false;
+    navigationLockRef.current = true;
+    clearRetryTimeout();
     setIsTransitioning(true);
     setIsInitialLoading(true);
+    setIsNavigating(true);
     setError(null);
     if (videoRef.current?.player) {
       try {
@@ -42736,7 +42809,67 @@ var BottlenecksContent = ({
         clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, loadCategoryMetadata, applyMetadataSnapshot, mergedCounts, isPercentileCategory]);
+  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, clearRetryTimeout, loadCategoryMetadata, applyMetadataSnapshot, mergedCounts, isPercentileCategory]);
+  const restartCurrentClipPlayback = React142.useCallback(() => {
+    if (!currentClipId) {
+      return;
+    }
+    console.log(`[BottlenecksContent] Restarting playback for clip ${currentClipId}`);
+    awaitingNextClipRef.current = false;
+    navigationLockRef.current = true;
+    clearRetryTimeout();
+    setError(null);
+    setIsTransitioning(true);
+    setIsInitialLoading(true);
+    setIsNavigating(true);
+    setIsVideoBuffering(false);
+    bumpPlayerInstanceNonce();
+  }, [currentClipId, clearRetryTimeout, bumpPlayerInstanceNonce]);
+  React142.useEffect(() => {
+    if (!newClipsNotification || !awaitingNextClipRef.current || !s3ClipsService) {
+      return;
+    }
+    const activeCategory = activeFilterRef.current;
+    if (!activeCategory || activeCategory === "all" || isPercentileCategory(activeCategory)) {
+      return;
+    }
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      void (async () => {
+        const incomingClips = [...newClipsNotification.clips].reverse();
+        for (const incomingClip of incomingClips) {
+          if (cancelled || !incomingClip?.id || incomingClip.id === currentClipId) {
+            continue;
+          }
+          const incomingVideo = await s3ClipsService.getClipById(incomingClip.id);
+          if (cancelled || !incomingVideo || incomingVideo.type !== activeCategory) {
+            continue;
+          }
+          console.log(`[BottlenecksContent] Autoplaying incoming ${activeCategory} clip ${incomingClip.id}`);
+          invalidateMetadataCache(activeCategory);
+          await loadAndPlayClipById(incomingClip.id, activeCategory, 1, {
+            clips: [{ clipId: incomingClip.id }],
+            total: Math.max(mergedCounts[activeCategory] || 0, 1)
+          });
+          void loadCategoryMetadata(activeCategory, false, true);
+          return;
+        }
+      })();
+    }, 300);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [
+    newClipsNotification,
+    s3ClipsService,
+    isPercentileCategory,
+    currentClipId,
+    invalidateMetadataCache,
+    loadAndPlayClipById,
+    loadCategoryMetadata,
+    mergedCounts
+  ]);
   React142.useCallback(async (categoryId, clipIndex) => {
     console.warn("[BottlenecksContent] loadAndPlayClip is deprecated, use loadAndPlayClipById instead");
     if (!workspaceId || !s3ClipsService || !isMountedRef.current || !isEffectiveShiftReady) return;
@@ -42765,8 +42898,11 @@ var BottlenecksContent = ({
     }
   }, [workspaceId, s3ClipsService, effectiveDateString, effectiveShiftId, loadAndPlayClipById, isEffectiveShiftReady]);
   const handleNext = React142.useCallback(async () => {
-    if (!isMountedRef.current) return;
+    if (!isMountedRef.current || navigationLockRef.current) return;
     const currentFilter = activeFilterRef.current;
+    navigationLockRef.current = true;
+    clearRetryTimeout();
+    setIsNavigating(true);
     setIsTransitioning(true);
     setIsInitialLoading(true);
     setError(null);
@@ -42796,10 +42932,32 @@ var BottlenecksContent = ({
         );
         const olderClip = neighbors.previous;
         if (!olderClip) {
-          console.log("[handleNext] Already at last clip in category");
-          clearLoadingState();
+          let metadataArray3 = categoryMetadataRef.current;
+          if (metadataArray3.length === 0) {
+            console.log(`[handleNext] Metadata empty for ${currentFilter}, loading before loop restart`);
+            await loadCategoryMetadata(currentFilter, false, true);
+            metadataArray3 = categoryMetadataRef.current;
+          }
+          const firstClipMeta = metadataArray3[0];
+          if (firstClipMeta?.clipId && firstClipMeta.clipId !== currentClipId) {
+            console.log(`[handleNext] Reached end of ${currentFilter}, looping back to newest clip ${firstClipMeta.clipId}`);
+            await loadAndPlayClipById(firstClipMeta.clipId, currentFilter, 1, {
+              clips: metadataArray3,
+              total: mergedCounts[currentFilter] || metadataArray3.length
+            });
+            return;
+          }
+          console.log("[handleNext] Reached live edge, waiting for the next clip");
+          awaitingNextClipRef.current = true;
+          navigationLockRef.current = false;
+          setIsInitialLoading(false);
+          setIsVideoBuffering(false);
+          setIsPlaying(false);
+          setIsNavigating(false);
+          setIsTransitioning(false);
           return;
         }
+        awaitingNextClipRef.current = false;
         setPendingVideo(olderClip);
         setCurrentClipId(olderClip.id || null);
         setAllVideos([olderClip]);
@@ -42855,8 +43013,23 @@ var BottlenecksContent = ({
           clearLoadingState();
         }
       } else {
-        console.log(`[handleNext] Already at last clip in category`);
-        clearLoadingState();
+        const firstClipMeta = metadataArray[0];
+        if (firstClipMeta?.clipId && firstClipMeta.clipId !== currentClipId) {
+          console.log(`[handleNext] Reached end of ${currentFilter}, looping back to newest percentile clip ${firstClipMeta.clipId}`);
+          await loadAndPlayClipById(firstClipMeta.clipId, currentFilter, 1, {
+            clips: metadataArray,
+            total: metadataArray.length
+          });
+          return;
+        }
+        console.log(`[handleNext] Reached live edge for ${currentFilter}, waiting for the next clip`);
+        awaitingNextClipRef.current = true;
+        navigationLockRef.current = false;
+        setIsInitialLoading(false);
+        setIsVideoBuffering(false);
+        setIsPlaying(false);
+        setIsNavigating(false);
+        setIsTransitioning(false);
       }
     } catch (error2) {
       console.error(`[handleNext] Error navigating:`, error2);
@@ -42868,10 +43041,13 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
+  }, [clearLoadingState, clearRetryTimeout, s3ClipsService, loadCategoryMetadata, loadAndPlayClipById, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
   const handlePrevious = React142.useCallback(async () => {
-    if (!isMountedRef.current) return;
+    if (!isMountedRef.current || navigationLockRef.current) return;
     const currentFilter = activeFilterRef.current;
+    navigationLockRef.current = true;
+    clearRetryTimeout();
+    setIsNavigating(true);
     setIsTransitioning(true);
     setIsInitialLoading(true);
     setError(null);
@@ -42969,7 +43145,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
+  }, [clearLoadingState, clearRetryTimeout, s3ClipsService, loadCategoryMetadata, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
   const currentVideo = React142.useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -43136,6 +43312,8 @@ var BottlenecksContent = ({
     }
   }, [error, playbackSpeed]);
   const handleVideoPlay = React142.useCallback(async (player) => {
+    awaitingNextClipRef.current = false;
+    clearRetryTimeout();
     setIsPlaying(true);
     setIsInitialLoading(false);
     if (currentVideo && !currentVideo.creation_timestamp && s3ClipsService) {
@@ -43157,7 +43335,7 @@ var BottlenecksContent = ({
         console.warn("[BottlenecksContent] Failed to load metadata for current video:", error2);
       }
     }
-  }, [currentVideo, s3ClipsService]);
+  }, [currentVideo, s3ClipsService, clearRetryTimeout]);
   const handleVideoPause = React142.useCallback((player) => {
     setIsPlaying(false);
   }, []);
@@ -43168,8 +43346,10 @@ var BottlenecksContent = ({
     setDuration(duration2);
   }, []);
   const handleLoadedData = React142.useCallback((player) => {
-    console.log("Video data loaded - NOT clearing loading (wait for playing event)");
-  }, []);
+    console.log("Video data loaded - clearing transition overlay");
+    setIsInitialLoading(false);
+    clearLoadingState();
+  }, [clearLoadingState]);
   const handleVideoPlaying = React142.useCallback((player) => {
     console.log("Video playing - hiding transition overlay (most reliable)");
     clearLoadingState();
@@ -43190,6 +43370,7 @@ var BottlenecksContent = ({
     console.error("[BottlenecksContent] Video.js error:", errorInfo);
     setIsPlaying(false);
     setIsVideoBuffering(false);
+    clearRetryTimeout();
     const errorCode = errorInfo?.code || 0;
     const canRetry = errorInfo?.canRetry ?? false;
     const errorMessage = errorInfo?.message || "Unknown error";
@@ -43217,17 +43398,24 @@ var BottlenecksContent = ({
     if (videoRetryCountRef.current < 3 && currentVideo) {
       videoRetryCountRef.current++;
       const retryDelay = 1e3 * videoRetryCountRef.current;
+      const retryClipId = currentVideo.id;
+      const retryCategory = activeFilterRef.current;
       console.log(`[Video Error] Recoverable error - Retrying... Attempt ${videoRetryCountRef.current}/3 in ${retryDelay}ms`);
       setError({
         type: "retrying",
         message: `Retrying... (${videoRetryCountRef.current}/3)`,
         isRetrying: true
       });
-      setTimeout(() => {
-        if (videoRef.current && currentVideo && isMountedRef.current) {
-          setError(null);
-          videoRef.current.dispose();
+      retryTimeoutRef.current = setTimeout(() => {
+        retryTimeoutRef.current = null;
+        if (!isMountedRef.current) {
+          return;
+        }
+        if (currentClipIdRef.current !== retryClipId || activeFilterRef.current !== retryCategory) {
+          console.log("[Video Error] Skipping stale retry for previous clip");
+          return;
         }
+        restartCurrentClipPlayback();
       }, retryDelay);
     } else {
       console.log("[Video Error] Retries exhausted - showing final error overlay");
@@ -43249,7 +43437,7 @@ var BottlenecksContent = ({
         attempts: 3
       });
     }
-  }, [currentVideo, workspaceId, clearLoadingState]);
+  }, [currentVideo, workspaceId, clearLoadingState, clearRetryTimeout, restartCurrentClipPlayback]);
   React142.useEffect(() => {
     isMountedRef.current = true;
     return () => {
@@ -43261,10 +43449,11 @@ var BottlenecksContent = ({
         clearTimeout(loadingTimeoutRef.current);
         loadingTimeoutRef.current = null;
       }
+      clearRetryTimeout();
       setIsCategoryLoading(false);
       setIsNavigating(false);
     };
-  }, [s3ClipsService]);
+  }, [s3ClipsService, clearRetryTimeout]);
   React142.useEffect(() => {
     if (filteredVideos.length > 0 && currentIndex < filteredVideos.length) {
       if (error && error.type === "fatal") {
@@ -43480,7 +43669,8 @@ var BottlenecksContent = ({
                 isShareLoading,
                 isShareCopied,
                 options: videoPlayerOptions
-              }
+              },
+              `${currentVideo.id}-${playerInstanceNonce}-inline`
             )
           }
         ),
@@ -43511,11 +43701,8 @@ var BottlenecksContent = ({
               "button",
               {
                 onClick: () => {
-                  setError(null);
                   videoRetryCountRef.current = 0;
-                  if (videoRef.current) {
-                    videoRef.current.dispose();
-                  }
+                  restartCurrentClipPlayback();
                 },
                 className: "px-5 py-2.5 bg-gray-600 hover:bg-gray-700 rounded-md text-sm font-medium transition-colors",
                 children: "Retry"
@@ -43747,7 +43934,7 @@ var BottlenecksContent = ({
             currentVideoId: currentVideo?.id,
             counts: mergedCounts,
             isReady: hasInitialLoad,
-            prefetchedPercentileCounts: prefetchedPercentileCounts || void 0,
+            prefetchedPercentileCounts: isFastSlowClipFiltersEnabled ? prefetchedPercentileCounts || void 0 : void 0,
             workspaceId,
             date: effectiveDateString,
             shift: effectiveShiftId,
@@ -43756,6 +43943,7 @@ var BottlenecksContent = ({
             targetCycleTime: workspaceTargetCycleTime,
             clipClassifications,
             idleTimeVlmEnabled,
+            showPercentileCycleFilters: isFastSlowClipFiltersEnabled,
             onFilterChange: (filterId) => {
               updateActiveFilter(filterId);
               const category = categoriesToShow.find((cat) => cat.type === filterId);
@@ -43904,7 +44092,8 @@ var BottlenecksContent = ({
                     isShareLoading,
                     isShareCopied,
                     options: videoPlayerOptions
-                  }
+                  },
+                  `${currentVideo.id}-${playerInstanceNonce}-fullscreen`
                 )
               }
             ),
@@ -43968,6 +44157,7 @@ var BottlenecksContent = ({
     !triageMode && /* @__PURE__ */ jsxRuntime.jsx(
       AdvancedFilterDialog,
       {
+        showPercentileCycleFilters: isFastSlowClipFiltersEnabled,
         onApply: () => {
           console.log("[BottlenecksContent] Advanced filters applied, will refresh clips...");
         }
@@ -69644,6 +69834,10 @@ var WorkspaceDetailView = ({
     shiftId: selectedShift,
     companyId: dashboardConfig?.entityConfig?.companyId
   });
+  const {
+    isFastSlowClipFiltersEnabled,
+    isResolved: isFastSlowClipFiltersResolved
+  } = useCompanyFastSlowClipFiltersEnabled();
   const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
   dashboardConfig?.supervisorConfig?.enabled || false;
   const effectiveLineId = lineId || selectedLineId;
@@ -69730,15 +69924,19 @@ var WorkspaceDetailView = ({
     return `${workspaceId}:${percentileDate}:${percentileShiftId.toString()}:10`;
   }, [workspaceId, percentileDate, percentileShiftId]);
   React142.useEffect(() => {
-    if (!percentileCountsKey) {
+    if (!isFastSlowClipFiltersEnabled || !percentileCountsKey) {
       setPrefetchedPercentileCounts(null);
       return;
     }
     if (prefetchedPercentileCounts && prefetchedPercentileCounts.key !== percentileCountsKey) {
       setPrefetchedPercentileCounts(null);
     }
-  }, [percentileCountsKey, prefetchedPercentileCounts]);
+  }, [isFastSlowClipFiltersEnabled, percentileCountsKey, prefetchedPercentileCounts]);
   React142.useEffect(() => {
+    if (!isFastSlowClipFiltersEnabled || !isFastSlowClipFiltersResolved) {
+      setPrefetchedPercentileCounts(null);
+      return;
+    }
     if (!percentileCountsKey || !percentileDate || percentileShiftId === null || percentileShiftId === void 0) {
       return;
     }
@@ -69805,7 +70003,16 @@ var WorkspaceDetailView = ({
     return () => {
       controller.abort();
     };
-  }, [percentileCountsKey, percentileDate, percentileShiftId, workspaceId, supabase, prefetchedPercentileCounts]);
+  }, [
+    isFastSlowClipFiltersEnabled,
+    isFastSlowClipFiltersResolved,
+    percentileCountsKey,
+    percentileDate,
+    percentileShiftId,
+    workspaceId,
+    supabase,
+    prefetchedPercentileCounts
+  ]);
   const {
     metrics: historicMetrics,
     isLoading: historicLoading,
@@ -71081,7 +71288,7 @@ var WorkspaceDetailView = ({
               shift,
               totalOutput: workspace?.total_actions,
               workspaceMetrics: detailedWorkspaceMetrics || void 0,
-              prefetchedPercentileCounts,
+              prefetchedPercentileCounts: isFastSlowClipFiltersEnabled ? prefetchedPercentileCounts : null,
               className: "h-[calc(100vh-10rem)]"
             }
           ) })
@@ -80488,6 +80695,7 @@ exports.useClipTypes = useClipTypes;
 exports.useClipTypesWithCounts = useClipTypesWithCounts;
 exports.useClipsInit = useClipsInit;
 exports.useCompanyClipsCost = useCompanyClipsCost;
+exports.useCompanyFastSlowClipFiltersEnabled = useCompanyFastSlowClipFiltersEnabled;
 exports.useCompanyHasVlmEnabledLine = useCompanyHasVlmEnabledLine;
 exports.useCompanyUsersUsage = useCompanyUsersUsage;
 exports.useComponentOverride = useComponentOverride;