@optifye/dashboard-core 6.9.9 → 6.9.11

package/dist/index.css

@@ -5607,10 +5607,6 @@ input[type=range]:active::-moz-range-thumb {
     font-size: 1.875rem;
     line-height: 2.25rem;
   }
-  .lg\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
   .lg\:text-7xl {
     font-size: 4.5rem;
     line-height: 1;

package/dist/index.js

@@ -23099,7 +23099,7 @@ var OutputProgressChartComponent = ({
   ];
   const COLORS = ["#00AB45", "#f3f4f6"];
   const percentage = (currentOutput / targetOutput * 100).toFixed(1);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full aspect-square max-h-full", style: { maxWidth: "min(100%, 280px)" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full aspect-square max-h-full", style: { maxWidth: "min(100%, 280px)", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsx(
       recharts.Pie,
       {
@@ -23123,16 +23123,33 @@ var OutputProgressChartComponent = ({
         ))
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800", children: [
-        percentage,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm lg:text-base text-gray-500 mt-1 sm:mt-2", children: [
-        currentOutput,
-        " / ",
-        Math.round(targetOutput)
-      ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "font-bold text-gray-800",
+          style: { fontSize: "clamp(1.25rem, 8cqw, 2.5rem)" },
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: {
+            fontSize: "clamp(0.7rem, 3.5cqw, 1rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.5rem)"
+          },
+          children: [
+            currentOutput,
+            " / ",
+            Math.round(targetOutput)
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -23150,7 +23167,7 @@ var LargeOutputProgressChart = ({
   ];
   const COLORS = ["#00AB45", "#f3f4f6"];
   const percentage = (currentOutput / targetOutput * 100).toFixed(1);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", style: { minHeight: "100px", minWidth: "100px" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", style: { minHeight: "100px", minWidth: "100px", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsx(
       recharts.Pie,
       {
@@ -23174,16 +23191,40 @@ var LargeOutputProgressChart = ({
         ))
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl sm:text-5xl font-bold text-gray-900", children: currentOutput }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-500", children: [
-        "of ",
-        targetOutput
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-base font-medium text-gray-600 mt-1", children: [
-        percentage,
-        "%"
-      ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "font-bold text-gray-900",
+          style: { fontSize: "clamp(1.5rem, 10cqw, 3rem)" },
+          children: currentOutput
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: { fontSize: "clamp(0.75rem, 3.5cqw, 1rem)" },
+          children: [
+            "of ",
+            targetOutput
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "font-medium text-gray-600",
+          style: {
+            fontSize: "clamp(0.875rem, 4.5cqw, 1.25rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.5rem)"
+          },
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -25277,7 +25318,7 @@ var GaugeChart = ({
   };
   const gaugeColor = getColor();
   const targetAngle = target !== void 0 ? 180 - (target - min) / (max - min) * 180 : null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", style: { minHeight: "100px", minWidth: "100px" }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", style: { minHeight: "100px", minWidth: "100px", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       recharts.Pie,
       {
@@ -25310,17 +25351,44 @@ var GaugeChart = ({
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1 -left-1.5 w-3 h-3 bg-gray-800 rounded-full" })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-3xl font-bold text-gray-800", children: [
-        value.toFixed(unit === "%" ? 1 : 0),
-        unit
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600 mt-1 font-medium", children: label }),
-      target !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
-        "Target: ",
-        target,
-        unit
-      ] })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "font-bold text-gray-800",
+          style: { fontSize: "clamp(1.25rem, 8cqw, 2rem)" },
+          children: [
+            value.toFixed(unit === "%" ? 1 : 0),
+            unit
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "text-gray-600 font-medium",
+          style: {
+            fontSize: "clamp(0.75rem, 3.5cqw, 1rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.25rem)"
+          },
+          children: label
+        }
+      ),
+      target !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: {
+            fontSize: "clamp(0.7rem, 3cqw, 0.875rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.25rem)"
+          },
+          children: [
+            "Target: ",
+            target,
+            unit
+          ]
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-[15%] left-[15%] text-xs text-gray-500", children: [
       min,
@@ -29214,6 +29282,31 @@ var BottlenecksContent = ({
   const [categoryMetadata, setCategoryMetadata] = React23.useState([]);
   const [currentMetadataIndex, setCurrentMetadataIndex] = React23.useState(0);
   const [metadataCache, setMetadataCache] = React23.useState({});
+  const invalidateMetadataCache = React23.useCallback((categories) => {
+    setMetadataCache((prevCache) => {
+      if (!prevCache || Object.keys(prevCache).length === 0) {
+        return prevCache;
+      }
+      const targetCategories = categories ? (Array.isArray(categories) ? categories : [categories]).filter(Boolean) : null;
+      let updatedCache = null;
+      const shouldInvalidate = (key) => {
+        if (!targetCategories || targetCategories.length === 0) {
+          return true;
+        }
+        const [categoryId] = key.split("-");
+        return targetCategories.includes(categoryId);
+      };
+      Object.keys(prevCache).forEach((cacheKey) => {
+        if (shouldInvalidate(cacheKey)) {
+          if (!updatedCache) {
+            updatedCache = { ...prevCache };
+          }
+          delete updatedCache[cacheKey];
+        }
+      });
+      return updatedCache || prevCache;
+    });
+  }, []);
   const [triageClips, setTriageClips] = React23.useState([]);
   const [isLoadingTriageClips, setIsLoadingTriageClips] = React23.useState(false);
   const [isFullscreen, setIsFullscreen] = React23.useState(false);
@@ -29233,6 +29326,12 @@ var BottlenecksContent = ({
     onNewClips: (notification) => {
       console.log(`[BottlenecksContent] New clips detected:`, notification);
       if (notification.clips.length > 0) {
+        const categoryIds = notification.clips.map((clip) => clip.clip_type).filter(Boolean).map((value) => String(value));
+        if (categoryIds.length > 0) {
+          invalidateMetadataCache(categoryIds);
+        } else {
+          invalidateMetadataCache();
+        }
         fetchClipCounts();
       }
     }
@@ -29279,24 +29378,37 @@ var BottlenecksContent = ({
     shift: shift || "0"
   });
   React23.useEffect(() => {
-    if (clipTypes.length > 0 && !initialFilter) {
-      const priorityOrder = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
-      let selectedType = null;
-      for (const priorityType of priorityOrder) {
-        const type = clipTypes.find((t) => t.type === priorityType && (dynamicCounts[t.type] || 0) > 0);
-        if (type) {
-          selectedType = type;
-          break;
+    if (clipTypes.length > 0) {
+      const currentFilterCount = initialFilter ? dynamicCounts[initialFilter] || 0 : 0;
+      const hasAnyCounts = Object.values(dynamicCounts).some((c) => c > 0);
+      const userHasNotNavigated = !initialFilter || activeFilterRef.current === initialFilter;
+      const shouldRunSelection = !initialFilter || userHasNotNavigated && currentFilterCount === 0 && hasAnyCounts;
+      if (shouldRunSelection) {
+        let selectedType = null;
+        if (clipTypes.length === 1) {
+          selectedType = clipTypes[0];
+        } else {
+          const priorityOrder = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
+          for (const priorityType of priorityOrder) {
+            const type = clipTypes.find((t) => t.type === priorityType && (dynamicCounts[t.type] || 0) > 0);
+            if (type) {
+              selectedType = type;
+              break;
+            }
+          }
+          if (!selectedType) {
+            selectedType = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
+          }
+          if (!selectedType) {
+            selectedType = clipTypes[0];
+          }
+        }
+        if (selectedType && selectedType.type !== initialFilter) {
+          console.log(`[BottlenecksContent] Auto-selecting filter: ${selectedType.type} (count: ${dynamicCounts[selectedType.type] || 0})`);
+          setInitialFilter(selectedType.type);
+          setActiveFilter(selectedType.type);
+          activeFilterRef.current = selectedType.type;
         }
-      }
-      if (!selectedType) {
-        selectedType = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
-      }
-      const firstType = selectedType || clipTypes[0];
-      if (firstType) {
-        setInitialFilter(firstType.type);
-        setActiveFilter(firstType.type);
-        activeFilterRef.current = firstType.type;
       }
     }
   }, [clipTypes, dynamicCounts, initialFilter]);
@@ -29348,7 +29460,7 @@ var BottlenecksContent = ({
     } finally {
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts]);
+  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts, timezone, totalOutput]);
   const loadingCategoryRef = React23.useRef(null);
   const loadFirstVideoForCategory = React23.useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -29438,15 +29550,16 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, mergedCounts, effectiveShift]);
+  }, [workspaceId, date, s3ClipsService, mergedCounts, effectiveShift, timezone]);
   const handleRefreshClips = React23.useCallback(async () => {
     console.log("[BottlenecksContent] Refreshing clips after new additions");
     acknowledgeNewClips();
+    invalidateMetadataCache();
     await fetchClipCounts();
     if (activeFilter && mergedCounts[activeFilter] > 0) {
       await loadFirstVideoForCategory(activeFilter);
     }
-  }, [acknowledgeNewClips, fetchClipCounts, activeFilter, mergedCounts, loadFirstVideoForCategory]);
+  }, [acknowledgeNewClips, fetchClipCounts, activeFilter, mergedCounts, loadFirstVideoForCategory, invalidateMetadataCache]);
   React23.useEffect(() => {
     if (s3ClipsService) {
       fetchClipCounts();
@@ -29616,38 +29729,38 @@ var BottlenecksContent = ({
       loadingTimeoutRef.current = null;
     }
   }, []);
-  const loadCategoryMetadata = React23.useCallback(async (categoryId, autoLoadFirstVideo = false) => {
+  const loadCategoryMetadata = React23.useCallback(async (categoryId, autoLoadFirstVideo = false, forceRefresh = false) => {
     if (!workspaceId) {
       return;
     }
-    const cacheKey = `${categoryId}-${date || getOperationalDate(timezone)}-${effectiveShift}`;
-    if (metadataCache[cacheKey]) {
-      console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
-      setCategoryMetadata(metadataCache[cacheKey]);
-      categoryMetadataRef.current = metadataCache[cacheKey];
-      if (autoLoadFirstVideo && metadataCache[cacheKey].length > 0 && s3ClipsService) {
-        const firstClipMeta = metadataCache[cacheKey][0];
-        try {
-          const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
-          if (video && isMountedRef.current) {
-            setCurrentClipId(firstClipMeta.clipId);
-            setAllVideos([video]);
-            setCurrentIndex(0);
-            setCurrentMetadataIndex(0);
-            currentMetadataIndexRef.current = 0;
-            setIsCategoryLoading(false);
-            console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${metadataCache[cacheKey].length})`);
+    const resolvedDate = date || getOperationalDate(timezone);
+    const cacheKey = `${categoryId}-${resolvedDate}-${effectiveShift}`;
+    const cachedMetadata = !forceRefresh ? metadataCache[cacheKey] : void 0;
+    try {
+      if (cachedMetadata) {
+        console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
+        setCategoryMetadata(cachedMetadata);
+        categoryMetadataRef.current = cachedMetadata;
+        if (autoLoadFirstVideo && cachedMetadata.length > 0 && s3ClipsService) {
+          const firstClipMeta = cachedMetadata[0];
+          try {
+            const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
+            if (video && isMountedRef.current) {
+              setCurrentClipId(firstClipMeta.clipId);
+              setAllVideos([video]);
+              setCurrentIndex(0);
+              setCurrentMetadataIndex(0);
+              currentMetadataIndexRef.current = 0;
+              console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${cachedMetadata.length})`);
+            }
+          } catch (error2) {
+            console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
+            clearLoadingState();
           }
-        } catch (error2) {
-          console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
-          setIsCategoryLoading(false);
-          clearLoadingState();
         }
+        return;
       }
-      return;
-    }
-    try {
-      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}`);
+      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}${forceRefresh ? " (force refresh)" : ""}`);
       const { createClient: createClient5 } = await import('@supabase/supabase-js');
       const supabase = createClient5(
         process.env.NEXT_PUBLIC_SUPABASE_URL || "",
@@ -29672,8 +29785,8 @@ var BottlenecksContent = ({
             action: "percentile-clips",
             percentileAction: percentileType,
             workspaceId,
-            startDate: `${date || getOperationalDate(timezone)}T00:00:00Z`,
-            endDate: `${date || getOperationalDate(timezone)}T23:59:59Z`,
+            startDate: `${resolvedDate}T00:00:00Z`,
+            endDate: `${resolvedDate}T23:59:59Z`,
             percentile: 10,
             shiftId: effectiveShift,
             limit: 100
@@ -29689,7 +29802,7 @@ var BottlenecksContent = ({
           body: JSON.stringify({
             action: "clip-metadata",
             workspaceId,
-            date: date || getOperationalDate(timezone),
+            date: resolvedDate,
             shift: effectiveShift,
             category: categoryId,
             page: 1,
@@ -29734,19 +29847,22 @@ var BottlenecksContent = ({
               setCurrentIndex(0);
               setCurrentMetadataIndex(0);
               currentMetadataIndexRef.current = 0;
-              setIsCategoryLoading(false);
               console.log(`[BottlenecksContent] Auto-loaded first video: ${video.id} (1/${metadataClips.length})`);
             }
           } catch (error2) {
             console.error(`[BottlenecksContent] Error loading first video:`, error2);
-            setIsCategoryLoading(false);
           }
         }
+      } else {
+        setCategoryMetadata([]);
+        categoryMetadataRef.current = [];
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading category metadata:`, error2);
+    } finally {
+      setIsCategoryLoading(false);
     }
-  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService]);
+  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService, timezone, clearLoadingState]);
   const loadAndPlayClipById = React23.useCallback(async (clipId, categoryId, position) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}, position=${position}`);
@@ -29770,21 +29886,31 @@ var BottlenecksContent = ({
     }
     try {
       await loadCategoryMetadata(categoryId, false);
-      const metadataArray = categoryMetadataRef.current;
-      if (metadataArray.length > 0) {
-        const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
-        if (clickedClipIndex !== -1) {
-          setCurrentMetadataIndex(clickedClipIndex);
-          currentMetadataIndexRef.current = clickedClipIndex;
-          const video = await s3ClipsService.getClipById(clipId);
-          if (video) {
-            setPendingVideo(video);
-            setCurrentClipId(clipId);
-            setAllVideos([video]);
-            setCurrentIndex(0);
-            console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
-          }
-        }
+      let metadataArray = categoryMetadataRef.current;
+      const clipExistsInMetadata = metadataArray.some((clip) => clip.clipId === clipId);
+      if (metadataArray.length === 0 || !clipExistsInMetadata) {
+        console.warn(`[BottlenecksContent] Clip ${clipId} not found in metadata for ${categoryId} (cache hit: ${metadataArray.length > 0}) - forcing refresh`);
+        await loadCategoryMetadata(categoryId, false, true);
+        metadataArray = categoryMetadataRef.current;
+      }
+      if (metadataArray.length === 0) {
+        throw new Error(`No metadata available for category ${categoryId}`);
+      }
+      const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
+      if (clickedClipIndex === -1) {
+        throw new Error(`Clip ${clipId} not found after metadata refresh`);
+      }
+      setCurrentMetadataIndex(clickedClipIndex);
+      currentMetadataIndexRef.current = clickedClipIndex;
+      const video = await s3ClipsService.getClipById(clipId);
+      if (video) {
+        setPendingVideo(video);
+        setCurrentClipId(clipId);
+        setAllVideos([video]);
+        setCurrentIndex(0);
+        console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
+      } else {
+        throw new Error(`Failed to load video data for clip ${clipId}`);
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
@@ -29798,7 +29924,7 @@ var BottlenecksContent = ({
         clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, updateActiveFilter, clearLoadingState]);
+  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, loadCategoryMetadata]);
   React23.useCallback(async (categoryId, clipIndex) => {
     console.warn("[BottlenecksContent] loadAndPlayClip is deprecated, use loadAndPlayClipById instead");
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -29825,7 +29951,7 @@ var BottlenecksContent = ({
       });
       setIsNavigating(false);
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
+  }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById, timezone]);
   const handleNext = React23.useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29842,8 +29968,18 @@ var BottlenecksContent = ({
     }
     try {
       const currentMetaIndex = currentMetadataIndexRef.current;
-      const metadataArray = categoryMetadataRef.current;
+      let metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length === 0) {
+        console.log(`[handleNext] Metadata empty for ${currentFilter}, loading before navigation`);
+        await loadCategoryMetadata(currentFilter, false);
+        metadataArray = categoryMetadataRef.current;
+      }
       console.log(`[handleNext] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (metadataArray.length === 0) {
+        console.warn("[handleNext] No metadata available after refresh - stopping navigation");
+        clearLoadingState();
+        return;
+      }
       if (currentMetaIndex < metadataArray.length - 1) {
         const nextMetadataIndex = currentMetaIndex + 1;
         const nextClipMeta = metadataArray[nextMetadataIndex];
@@ -29878,7 +30014,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const handlePrevious = React23.useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29895,8 +30031,18 @@ var BottlenecksContent = ({
     }
     try {
       const currentMetaIndex = currentMetadataIndexRef.current;
-      const metadataArray = categoryMetadataRef.current;
+      let metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length === 0) {
+        console.log(`[handlePrevious] Metadata empty for ${currentFilter}, loading before navigation`);
+        await loadCategoryMetadata(currentFilter, false);
+        metadataArray = categoryMetadataRef.current;
+      }
       console.log(`[handlePrevious] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (metadataArray.length === 0) {
+        console.warn("[handlePrevious] No metadata available after refresh - stopping navigation");
+        clearLoadingState();
+        return;
+      }
       if (currentMetaIndex > 0) {
         const prevMetadataIndex = currentMetaIndex - 1;
         const prevClipMeta = metadataArray[prevMetadataIndex];
@@ -29927,7 +30073,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const currentVideo = React23.useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;

package/dist/index.mjs

@@ -23070,7 +23070,7 @@ var OutputProgressChartComponent = ({
   ];
   const COLORS = ["#00AB45", "#f3f4f6"];
   const percentage = (currentOutput / targetOutput * 100).toFixed(1);
-  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-square max-h-full", style: { maxWidth: "min(100%, 280px)" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-square max-h-full", style: { maxWidth: "min(100%, 280px)", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsx(
       Pie,
       {
@@ -23094,16 +23094,33 @@ var OutputProgressChartComponent = ({
         ))
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800", children: [
-        percentage,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-xs sm:text-sm lg:text-base text-gray-500 mt-1 sm:mt-2", children: [
-        currentOutput,
-        " / ",
-        Math.round(targetOutput)
-      ] })
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "font-bold text-gray-800",
+          style: { fontSize: "clamp(1.25rem, 8cqw, 2.5rem)" },
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: {
+            fontSize: "clamp(0.7rem, 3.5cqw, 1rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.5rem)"
+          },
+          children: [
+            currentOutput,
+            " / ",
+            Math.round(targetOutput)
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -23121,7 +23138,7 @@ var LargeOutputProgressChart = ({
   ];
   const COLORS = ["#00AB45", "#f3f4f6"];
   const percentage = (currentOutput / targetOutput * 100).toFixed(1);
-  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", style: { minHeight: "100px", minWidth: "100px" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", style: { minHeight: "100px", minWidth: "100px", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsx(
       Pie,
       {
@@ -23145,16 +23162,40 @@ var LargeOutputProgressChart = ({
         ))
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-4xl sm:text-5xl font-bold text-gray-900", children: currentOutput }),
-      /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-500", children: [
-        "of ",
-        targetOutput
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-base font-medium text-gray-600 mt-1", children: [
-        percentage,
-        "%"
-      ] })
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "font-bold text-gray-900",
+          style: { fontSize: "clamp(1.5rem, 10cqw, 3rem)" },
+          children: currentOutput
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: { fontSize: "clamp(0.75rem, 3.5cqw, 1rem)" },
+          children: [
+            "of ",
+            targetOutput
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "font-medium text-gray-600",
+          style: {
+            fontSize: "clamp(0.875rem, 4.5cqw, 1.25rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.5rem)"
+          },
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -25248,7 +25289,7 @@ var GaugeChart = ({
   };
   const gaugeColor = getColor();
   const targetAngle = target !== void 0 ? 180 - (target - min) / (max - min) * 180 : null;
-  return /* @__PURE__ */ jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", style: { minHeight: "100px", minWidth: "100px" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", style: { minHeight: "100px", minWidth: "100px", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsxs(
       Pie,
       {
@@ -25281,17 +25322,44 @@ var GaugeChart = ({
         children: /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -left-1.5 w-3 h-3 bg-gray-800 rounded-full" })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-3xl font-bold text-gray-800", children: [
-        value.toFixed(unit === "%" ? 1 : 0),
-        unit
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600 mt-1 font-medium", children: label }),
-      target !== void 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
-        "Target: ",
-        target,
-        unit
-      ] })
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "font-bold text-gray-800",
+          style: { fontSize: "clamp(1.25rem, 8cqw, 2rem)" },
+          children: [
+            value.toFixed(unit === "%" ? 1 : 0),
+            unit
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "text-gray-600 font-medium",
+          style: {
+            fontSize: "clamp(0.75rem, 3.5cqw, 1rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.25rem)"
+          },
+          children: label
+        }
+      ),
+      target !== void 0 && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: {
+            fontSize: "clamp(0.7rem, 3cqw, 0.875rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.25rem)"
+          },
+          children: [
+            "Target: ",
+            target,
+            unit
+          ]
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "absolute bottom-[15%] left-[15%] text-xs text-gray-500", children: [
       min,
@@ -29185,6 +29253,31 @@ var BottlenecksContent = ({
   const [categoryMetadata, setCategoryMetadata] = useState([]);
   const [currentMetadataIndex, setCurrentMetadataIndex] = useState(0);
   const [metadataCache, setMetadataCache] = useState({});
+  const invalidateMetadataCache = useCallback((categories) => {
+    setMetadataCache((prevCache) => {
+      if (!prevCache || Object.keys(prevCache).length === 0) {
+        return prevCache;
+      }
+      const targetCategories = categories ? (Array.isArray(categories) ? categories : [categories]).filter(Boolean) : null;
+      let updatedCache = null;
+      const shouldInvalidate = (key) => {
+        if (!targetCategories || targetCategories.length === 0) {
+          return true;
+        }
+        const [categoryId] = key.split("-");
+        return targetCategories.includes(categoryId);
+      };
+      Object.keys(prevCache).forEach((cacheKey) => {
+        if (shouldInvalidate(cacheKey)) {
+          if (!updatedCache) {
+            updatedCache = { ...prevCache };
+          }
+          delete updatedCache[cacheKey];
+        }
+      });
+      return updatedCache || prevCache;
+    });
+  }, []);
   const [triageClips, setTriageClips] = useState([]);
   const [isLoadingTriageClips, setIsLoadingTriageClips] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -29204,6 +29297,12 @@ var BottlenecksContent = ({
     onNewClips: (notification) => {
       console.log(`[BottlenecksContent] New clips detected:`, notification);
       if (notification.clips.length > 0) {
+        const categoryIds = notification.clips.map((clip) => clip.clip_type).filter(Boolean).map((value) => String(value));
+        if (categoryIds.length > 0) {
+          invalidateMetadataCache(categoryIds);
+        } else {
+          invalidateMetadataCache();
+        }
         fetchClipCounts();
       }
     }
@@ -29250,24 +29349,37 @@ var BottlenecksContent = ({
     shift: shift || "0"
   });
   useEffect(() => {
-    if (clipTypes.length > 0 && !initialFilter) {
-      const priorityOrder = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
-      let selectedType = null;
-      for (const priorityType of priorityOrder) {
-        const type = clipTypes.find((t) => t.type === priorityType && (dynamicCounts[t.type] || 0) > 0);
-        if (type) {
-          selectedType = type;
-          break;
+    if (clipTypes.length > 0) {
+      const currentFilterCount = initialFilter ? dynamicCounts[initialFilter] || 0 : 0;
+      const hasAnyCounts = Object.values(dynamicCounts).some((c) => c > 0);
+      const userHasNotNavigated = !initialFilter || activeFilterRef.current === initialFilter;
+      const shouldRunSelection = !initialFilter || userHasNotNavigated && currentFilterCount === 0 && hasAnyCounts;
+      if (shouldRunSelection) {
+        let selectedType = null;
+        if (clipTypes.length === 1) {
+          selectedType = clipTypes[0];
+        } else {
+          const priorityOrder = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
+          for (const priorityType of priorityOrder) {
+            const type = clipTypes.find((t) => t.type === priorityType && (dynamicCounts[t.type] || 0) > 0);
+            if (type) {
+              selectedType = type;
+              break;
+            }
+          }
+          if (!selectedType) {
+            selectedType = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
+          }
+          if (!selectedType) {
+            selectedType = clipTypes[0];
+          }
+        }
+        if (selectedType && selectedType.type !== initialFilter) {
+          console.log(`[BottlenecksContent] Auto-selecting filter: ${selectedType.type} (count: ${dynamicCounts[selectedType.type] || 0})`);
+          setInitialFilter(selectedType.type);
+          setActiveFilter(selectedType.type);
+          activeFilterRef.current = selectedType.type;
         }
-      }
-      if (!selectedType) {
-        selectedType = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
-      }
-      const firstType = selectedType || clipTypes[0];
-      if (firstType) {
-        setInitialFilter(firstType.type);
-        setActiveFilter(firstType.type);
-        activeFilterRef.current = firstType.type;
       }
     }
   }, [clipTypes, dynamicCounts, initialFilter]);
@@ -29319,7 +29431,7 @@ var BottlenecksContent = ({
     } finally {
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts]);
+  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts, timezone, totalOutput]);
   const loadingCategoryRef = useRef(null);
   const loadFirstVideoForCategory = useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -29409,15 +29521,16 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, mergedCounts, effectiveShift]);
+  }, [workspaceId, date, s3ClipsService, mergedCounts, effectiveShift, timezone]);
   const handleRefreshClips = useCallback(async () => {
     console.log("[BottlenecksContent] Refreshing clips after new additions");
     acknowledgeNewClips();
+    invalidateMetadataCache();
     await fetchClipCounts();
     if (activeFilter && mergedCounts[activeFilter] > 0) {
       await loadFirstVideoForCategory(activeFilter);
     }
-  }, [acknowledgeNewClips, fetchClipCounts, activeFilter, mergedCounts, loadFirstVideoForCategory]);
+  }, [acknowledgeNewClips, fetchClipCounts, activeFilter, mergedCounts, loadFirstVideoForCategory, invalidateMetadataCache]);
   useEffect(() => {
     if (s3ClipsService) {
       fetchClipCounts();
@@ -29587,38 +29700,38 @@ var BottlenecksContent = ({
       loadingTimeoutRef.current = null;
     }
   }, []);
-  const loadCategoryMetadata = useCallback(async (categoryId, autoLoadFirstVideo = false) => {
+  const loadCategoryMetadata = useCallback(async (categoryId, autoLoadFirstVideo = false, forceRefresh = false) => {
     if (!workspaceId) {
       return;
     }
-    const cacheKey = `${categoryId}-${date || getOperationalDate(timezone)}-${effectiveShift}`;
-    if (metadataCache[cacheKey]) {
-      console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
-      setCategoryMetadata(metadataCache[cacheKey]);
-      categoryMetadataRef.current = metadataCache[cacheKey];
-      if (autoLoadFirstVideo && metadataCache[cacheKey].length > 0 && s3ClipsService) {
-        const firstClipMeta = metadataCache[cacheKey][0];
-        try {
-          const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
-          if (video && isMountedRef.current) {
-            setCurrentClipId(firstClipMeta.clipId);
-            setAllVideos([video]);
-            setCurrentIndex(0);
-            setCurrentMetadataIndex(0);
-            currentMetadataIndexRef.current = 0;
-            setIsCategoryLoading(false);
-            console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${metadataCache[cacheKey].length})`);
+    const resolvedDate = date || getOperationalDate(timezone);
+    const cacheKey = `${categoryId}-${resolvedDate}-${effectiveShift}`;
+    const cachedMetadata = !forceRefresh ? metadataCache[cacheKey] : void 0;
+    try {
+      if (cachedMetadata) {
+        console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
+        setCategoryMetadata(cachedMetadata);
+        categoryMetadataRef.current = cachedMetadata;
+        if (autoLoadFirstVideo && cachedMetadata.length > 0 && s3ClipsService) {
+          const firstClipMeta = cachedMetadata[0];
+          try {
+            const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
+            if (video && isMountedRef.current) {
+              setCurrentClipId(firstClipMeta.clipId);
+              setAllVideos([video]);
+              setCurrentIndex(0);
+              setCurrentMetadataIndex(0);
+              currentMetadataIndexRef.current = 0;
+              console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${cachedMetadata.length})`);
+            }
+          } catch (error2) {
+            console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
+            clearLoadingState();
           }
-        } catch (error2) {
-          console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
-          setIsCategoryLoading(false);
-          clearLoadingState();
         }
+        return;
       }
-      return;
-    }
-    try {
-      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}`);
+      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}${forceRefresh ? " (force refresh)" : ""}`);
       const { createClient: createClient5 } = await import('@supabase/supabase-js');
       const supabase = createClient5(
         process.env.NEXT_PUBLIC_SUPABASE_URL || "",
@@ -29643,8 +29756,8 @@ var BottlenecksContent = ({
             action: "percentile-clips",
             percentileAction: percentileType,
             workspaceId,
-            startDate: `${date || getOperationalDate(timezone)}T00:00:00Z`,
-            endDate: `${date || getOperationalDate(timezone)}T23:59:59Z`,
+            startDate: `${resolvedDate}T00:00:00Z`,
+            endDate: `${resolvedDate}T23:59:59Z`,
             percentile: 10,
             shiftId: effectiveShift,
             limit: 100
@@ -29660,7 +29773,7 @@ var BottlenecksContent = ({
           body: JSON.stringify({
             action: "clip-metadata",
             workspaceId,
-            date: date || getOperationalDate(timezone),
+            date: resolvedDate,
             shift: effectiveShift,
             category: categoryId,
             page: 1,
@@ -29705,19 +29818,22 @@ var BottlenecksContent = ({
               setCurrentIndex(0);
               setCurrentMetadataIndex(0);
               currentMetadataIndexRef.current = 0;
-              setIsCategoryLoading(false);
               console.log(`[BottlenecksContent] Auto-loaded first video: ${video.id} (1/${metadataClips.length})`);
             }
           } catch (error2) {
             console.error(`[BottlenecksContent] Error loading first video:`, error2);
-            setIsCategoryLoading(false);
           }
         }
+      } else {
+        setCategoryMetadata([]);
+        categoryMetadataRef.current = [];
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading category metadata:`, error2);
+    } finally {
+      setIsCategoryLoading(false);
     }
-  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService]);
+  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService, timezone, clearLoadingState]);
   const loadAndPlayClipById = useCallback(async (clipId, categoryId, position) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}, position=${position}`);
@@ -29741,21 +29857,31 @@ var BottlenecksContent = ({
     }
     try {
       await loadCategoryMetadata(categoryId, false);
-      const metadataArray = categoryMetadataRef.current;
-      if (metadataArray.length > 0) {
-        const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
-        if (clickedClipIndex !== -1) {
-          setCurrentMetadataIndex(clickedClipIndex);
-          currentMetadataIndexRef.current = clickedClipIndex;
-          const video = await s3ClipsService.getClipById(clipId);
-          if (video) {
-            setPendingVideo(video);
-            setCurrentClipId(clipId);
-            setAllVideos([video]);
-            setCurrentIndex(0);
-            console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
-          }
-        }
+      let metadataArray = categoryMetadataRef.current;
+      const clipExistsInMetadata = metadataArray.some((clip) => clip.clipId === clipId);
+      if (metadataArray.length === 0 || !clipExistsInMetadata) {
+        console.warn(`[BottlenecksContent] Clip ${clipId} not found in metadata for ${categoryId} (cache hit: ${metadataArray.length > 0}) - forcing refresh`);
+        await loadCategoryMetadata(categoryId, false, true);
+        metadataArray = categoryMetadataRef.current;
+      }
+      if (metadataArray.length === 0) {
+        throw new Error(`No metadata available for category ${categoryId}`);
+      }
+      const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
+      if (clickedClipIndex === -1) {
+        throw new Error(`Clip ${clipId} not found after metadata refresh`);
+      }
+      setCurrentMetadataIndex(clickedClipIndex);
+      currentMetadataIndexRef.current = clickedClipIndex;
+      const video = await s3ClipsService.getClipById(clipId);
+      if (video) {
+        setPendingVideo(video);
+        setCurrentClipId(clipId);
+        setAllVideos([video]);
+        setCurrentIndex(0);
+        console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
+      } else {
+        throw new Error(`Failed to load video data for clip ${clipId}`);
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
@@ -29769,7 +29895,7 @@ var BottlenecksContent = ({
         clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, updateActiveFilter, clearLoadingState]);
+  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, loadCategoryMetadata]);
   useCallback(async (categoryId, clipIndex) => {
     console.warn("[BottlenecksContent] loadAndPlayClip is deprecated, use loadAndPlayClipById instead");
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -29796,7 +29922,7 @@ var BottlenecksContent = ({
       });
       setIsNavigating(false);
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
+  }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById, timezone]);
   const handleNext = useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29813,8 +29939,18 @@ var BottlenecksContent = ({
     }
     try {
       const currentMetaIndex = currentMetadataIndexRef.current;
-      const metadataArray = categoryMetadataRef.current;
+      let metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length === 0) {
+        console.log(`[handleNext] Metadata empty for ${currentFilter}, loading before navigation`);
+        await loadCategoryMetadata(currentFilter, false);
+        metadataArray = categoryMetadataRef.current;
+      }
       console.log(`[handleNext] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (metadataArray.length === 0) {
+        console.warn("[handleNext] No metadata available after refresh - stopping navigation");
+        clearLoadingState();
+        return;
+      }
       if (currentMetaIndex < metadataArray.length - 1) {
         const nextMetadataIndex = currentMetaIndex + 1;
         const nextClipMeta = metadataArray[nextMetadataIndex];
@@ -29849,7 +29985,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const handlePrevious = useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29866,8 +30002,18 @@ var BottlenecksContent = ({
     }
     try {
       const currentMetaIndex = currentMetadataIndexRef.current;
-      const metadataArray = categoryMetadataRef.current;
+      let metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length === 0) {
+        console.log(`[handlePrevious] Metadata empty for ${currentFilter}, loading before navigation`);
+        await loadCategoryMetadata(currentFilter, false);
+        metadataArray = categoryMetadataRef.current;
+      }
       console.log(`[handlePrevious] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (metadataArray.length === 0) {
+        console.warn("[handlePrevious] No metadata available after refresh - stopping navigation");
+        clearLoadingState();
+        return;
+      }
       if (currentMetaIndex > 0) {
         const prevMetadataIndex = currentMetaIndex - 1;
         const prevClipMeta = metadataArray[prevMetadataIndex];
@@ -29898,7 +30044,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const currentVideo = useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.9.9",
+  "version": "6.9.11",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",