@optifye/dashboard-core 6.6.9 → 6.6.11

package/dist/index.css

@@ -2148,6 +2148,9 @@ body {
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
+.bg-black\/90 {
+  background-color: rgb(0 0 0 / 0.9);
+}
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));

package/dist/index.d.mts

@@ -1299,11 +1299,11 @@ declare class S3ClipsSupabaseService {
     /**
      * Get clip counts with optional video index
      */
-    getClipCountsCacheFirst(workspaceId: string, date: string, shiftId: string | number, buildIndex?: boolean): Promise<ClipCountsWithIndex | Record<string, number>>;
+    getClipCountsCacheFirst(workspaceId: string, date: string, shiftId: string | number, buildIndex?: boolean, totalOutput?: number): Promise<ClipCountsWithIndex | Record<string, number>>;
     /**
      * Get clip counts (simplified version)
      */
-    getClipCounts(workspaceId: string, date: string, shiftId: string | number): Promise<Record<string, number>>;
+    getClipCounts(workspaceId: string, date: string, shiftId: string | number, totalOutput?: number): Promise<Record<string, number>>;
     /**
      * Get clip by ID - stable navigation method
      * This ensures navigation works even when new clips are added
@@ -3257,7 +3257,7 @@ declare function useClipTypes(): UseClipTypesResult;
 /**
  * Hook to get clip types with counts for a specific workspace/date/shift
  */
-declare function useClipTypesWithCounts(workspaceId: string, date: string, shiftId: string | number): UseClipTypesResult & {
+declare function useClipTypesWithCounts(workspaceId: string, date: string, shiftId: string | number, totalOutput?: number): UseClipTypesResult & {
     counts: Record<string, number>;
 };
 
@@ -5334,6 +5334,10 @@ interface BottlenecksContentProps {
      * Optional className for styling
      */
     className?: string;
+    /**
+     * Total output from workspace metrics for cycle completion adjustment
+     */
+    totalOutput?: number;
 }
 /**
  * Filter type for bottleneck clips - expanded for new video types

package/dist/index.d.ts

@@ -1299,11 +1299,11 @@ declare class S3ClipsSupabaseService {
     /**
      * Get clip counts with optional video index
      */
-    getClipCountsCacheFirst(workspaceId: string, date: string, shiftId: string | number, buildIndex?: boolean): Promise<ClipCountsWithIndex | Record<string, number>>;
+    getClipCountsCacheFirst(workspaceId: string, date: string, shiftId: string | number, buildIndex?: boolean, totalOutput?: number): Promise<ClipCountsWithIndex | Record<string, number>>;
     /**
      * Get clip counts (simplified version)
      */
-    getClipCounts(workspaceId: string, date: string, shiftId: string | number): Promise<Record<string, number>>;
+    getClipCounts(workspaceId: string, date: string, shiftId: string | number, totalOutput?: number): Promise<Record<string, number>>;
     /**
      * Get clip by ID - stable navigation method
      * This ensures navigation works even when new clips are added
@@ -3257,7 +3257,7 @@ declare function useClipTypes(): UseClipTypesResult;
 /**
  * Hook to get clip types with counts for a specific workspace/date/shift
  */
-declare function useClipTypesWithCounts(workspaceId: string, date: string, shiftId: string | number): UseClipTypesResult & {
+declare function useClipTypesWithCounts(workspaceId: string, date: string, shiftId: string | number, totalOutput?: number): UseClipTypesResult & {
     counts: Record<string, number>;
 };
 
@@ -5334,6 +5334,10 @@ interface BottlenecksContentProps {
      * Optional className for styling
      */
     className?: string;
+    /**
+     * Total output from workspace metrics for cycle completion adjustment
+     */
+    totalOutput?: number;
 }
 /**
  * Filter type for bottleneck clips - expanded for new video types

package/dist/index.js

@@ -3765,7 +3765,7 @@ var S3ClipsSupabaseService = class {
   /**
    * Get clip counts with optional video index
    */
-  async getClipCountsCacheFirst(workspaceId, date, shiftId, buildIndex = false) {
+  async getClipCountsCacheFirst(workspaceId, date, shiftId, buildIndex = false, totalOutput) {
     const cacheKey = `clip-counts:${workspaceId}:${date}:${shiftId}`;
     return this.deduplicate(cacheKey, async () => {
       console.log(`[S3ClipsSupabase] Fetching clip counts from Supabase for:`, {
@@ -3776,7 +3776,8 @@ var S3ClipsSupabaseService = class {
       const response = await this.fetchWithAuth("count", {
         workspaceId,
         date,
-        shift: shiftId.toString()
+        shift: shiftId.toString(),
+        totalOutput
       });
       console.log(`[S3ClipsSupabase] Count API response:`, response);
       const counts = response.counts || {};
@@ -3828,8 +3829,8 @@ var S3ClipsSupabaseService = class {
   /**
    * Get clip counts (simplified version)
    */
-  async getClipCounts(workspaceId, date, shiftId) {
-    const result = await this.getClipCountsCacheFirst(workspaceId, date, shiftId, false);
+  async getClipCounts(workspaceId, date, shiftId, totalOutput) {
+    const result = await this.getClipCountsCacheFirst(workspaceId, date, shiftId, false, totalOutput);
     if (typeof result === "object" && "counts" in result) {
       return result.counts;
     }
@@ -9020,7 +9021,7 @@ function useClipTypes() {
     refresh: fetchClipTypes
   };
 }
-function useClipTypesWithCounts(workspaceId, date, shiftId) {
+function useClipTypesWithCounts(workspaceId, date, shiftId, totalOutput) {
   const { clipTypes, isLoading: typesLoading, error: typesError, refresh } = useClipTypes();
   const [counts, setCounts] = React21.useState({});
   const [countsLoading, setCountsLoading] = React21.useState(false);
@@ -9045,7 +9046,8 @@ function useClipTypesWithCounts(workspaceId, date, shiftId) {
         const clipCounts = await s3Service.getClipCounts(
           workspaceId,
           date,
-          shiftId.toString()
+          shiftId.toString(),
+          totalOutput
         );
         console.log("[useClipTypesWithCounts] Received counts:", clipCounts);
         setCounts(clipCounts);
@@ -9056,7 +9058,7 @@ function useClipTypesWithCounts(workspaceId, date, shiftId) {
       }
     };
     fetchCounts();
-  }, [s3Service, workspaceId, date, shiftId]);
+  }, [s3Service, workspaceId, date, shiftId, totalOutput]);
   return {
     clipTypes: clipTypes.map((type) => ({
       ...type,
@@ -22277,7 +22279,7 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6 sm:py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
           "Standard: ",
           workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -25957,8 +25959,19 @@ var WorkspaceMonthlyHistory = ({
     const daysInMonth = new Date(year, month + 1, 0).getDate();
     const dailyData = [];
     let maxOutput = 0;
-    let totalIdealOutput = 0;
-    let validDaysCount = 0;
+    let lastSetTarget = 0;
+    for (let day = daysInMonth; day >= 1; day--) {
+      const dayData = data.find((d) => {
+        const date = new Date(d.date);
+        return date.getDate() === day;
+      });
+      const shiftData = dayData ? selectedShift === "day" ? dayData.dayShift : dayData.nightShift : null;
+      const idealOutput = shiftData ? shiftData.idealOutput : 0;
+      if (idealOutput > 0) {
+        lastSetTarget = idealOutput;
+        break;
+      }
+    }
     for (let day = 1; day <= daysInMonth; day++) {
       const dayData = data.find((d) => {
         const date = new Date(d.date);
@@ -25968,11 +25981,7 @@ var WorkspaceMonthlyHistory = ({
       const output = shiftData && hasRealData(shiftData) ? shiftData.output : 0;
       const idealOutput = shiftData ? shiftData.idealOutput : 0;
       if (output > maxOutput) maxOutput = output;
-      if (idealOutput > 0) {
-        totalIdealOutput += idealOutput;
-        validDaysCount++;
-      }
-      const color2 = output >= idealOutput ? "#00AB45" : "#E34329";
+      const color2 = output >= lastSetTarget ? "#00AB45" : "#E34329";
       dailyData.push({
         hour: getOrdinal(day),
         // Using ordinal format (1st, 2nd, 3rd, etc.)
@@ -25987,14 +25996,13 @@ var WorkspaceMonthlyHistory = ({
         // Not used but keeps structure consistent
       });
     }
-    const avgIdealOutput = validDaysCount > 0 ? totalIdealOutput / validDaysCount : 0;
-    const calculatedMax = Math.max(maxOutput, avgIdealOutput);
+    const calculatedMax = Math.max(maxOutput, lastSetTarget);
     const yAxisMax = calculatedMax > 0 ? calculatedMax * 1.1 : 100;
-    return { data: dailyData, maxOutput, avgIdealOutput, yAxisMax };
+    return { data: dailyData, maxOutput, lastSetTarget, yAxisMax };
   }, [data, month, year, selectedShift]);
   const yAxisTicks = React21.useMemo(() => {
     const max = chartData.yAxisMax;
-    const target = chartData.avgIdealOutput;
+    const target = chartData.lastSetTarget;
     if (!max || max <= 0) return void 0;
     const desiredIntervals = 4;
     const roughStep = max / desiredIntervals;
@@ -26012,7 +26020,7 @@ var WorkspaceMonthlyHistory = ({
       ticks.push(Math.round(target));
     }
     return Array.from(new Set(ticks)).filter((v) => v >= 0 && v <= max).sort((a, b) => a - b);
-  }, [chartData.yAxisMax, chartData.avgIdealOutput]);
+  }, [chartData.yAxisMax, chartData.lastSetTarget]);
   const pieChartData = React21.useMemo(() => {
     const validShifts = data.map((d) => selectedShift === "day" ? d.dayShift : d.nightShift).filter(hasRealData);
     if (validShifts.length === 0) return [];
@@ -26324,7 +26332,7 @@ var WorkspaceMonthlyHistory = ({
                     tick: (props) => {
                       const { x, y, payload } = props;
                       const value = Math.round(payload.value);
-                      const targetValue = Math.round(chartData.avgIdealOutput);
+                      const targetValue = Math.round(chartData.lastSetTarget);
                       const isTarget = Math.abs(value - targetValue) < 1 && targetValue > 0;
                       return /* @__PURE__ */ jsxRuntime.jsx(
                         "text",
@@ -26348,10 +26356,10 @@ var WorkspaceMonthlyHistory = ({
                     content: CustomTooltip
                   }
                 ),
-                chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                chartData.lastSetTarget > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                   recharts.ReferenceLine,
                   {
-                    y: chartData.avgIdealOutput,
+                    y: chartData.lastSetTarget,
                     stroke: "#E34329",
                     strokeDasharray: "5 5",
                     strokeWidth: 2
@@ -26409,11 +26417,11 @@ var WorkspaceMonthlyHistory = ({
               ]
             }
           ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center gap-6 mt-3", children: chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center gap-6 mt-3", children: chartData.lastSetTarget > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-0.5 border-t-2 border-dashed", style: { borderColor: "#E34329" } }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-600", children: [
               "Target: ",
-              Math.round(chartData.avgIdealOutput),
+              Math.round(chartData.lastSetTarget),
               " units/day"
             ] })
           ] }) })
@@ -27259,6 +27267,36 @@ var TimePickerDropdown = ({
     ] })
   ] });
 };
+var ERROR_MAPPING = {
+  1: {
+    // MEDIA_ERR_ABORTED
+    code: 1,
+    type: "recoverable" /* RECOVERABLE */,
+    message: "Video loading was interrupted",
+    canRetry: true
+  },
+  2: {
+    // MEDIA_ERR_NETWORK
+    code: 2,
+    type: "recoverable" /* RECOVERABLE */,
+    message: "Network error - please check your internet connection",
+    canRetry: true
+  },
+  3: {
+    // MEDIA_ERR_DECODE
+    code: 3,
+    type: "non_recoverable" /* NON_RECOVERABLE */,
+    message: "Stream corrupted due to internet connection",
+    canRetry: false
+  },
+  4: {
+    // MEDIA_ERR_SRC_NOT_SUPPORTED
+    code: 4,
+    type: "non_recoverable" /* NON_RECOVERABLE */,
+    message: "Video format not supported by your browser. Please use Google Chrome.",
+    canRetry: false
+  }
+};
 var videoPlayerStyles = `
   .video-player-container {
     width: 100%;
@@ -27489,8 +27527,21 @@ var VideoPlayer = React21__namespace.default.forwardRef(({
     player.on("seeked", () => onSeeked?.(player));
     player.on("error", () => {
       const error = player.error();
-      console.error("Video.js error:", error);
-      onError?.(player, error);
+      const errorCode = error?.code ?? 0;
+      const errorInfo = ERROR_MAPPING[errorCode] || {
+        code: errorCode || 0,
+        type: "non_recoverable" /* NON_RECOVERABLE */,
+        message: "Unknown playback error occurred",
+        canRetry: false
+      };
+      console.error("[VideoPlayer] Video.js error:", {
+        code: errorCode,
+        type: errorInfo.type,
+        message: errorInfo.message,
+        canRetry: errorInfo.canRetry,
+        originalError: error
+      });
+      onError?.(player, errorInfo);
     });
     if (src) {
       const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
@@ -28668,7 +28719,7 @@ var FileManagerFilters = ({
     ];
     percentileCategories.forEach((category) => {
       if (category.count > 0 && shouldShowCategory(category.id)) {
-        tree.unshift(category);
+        tree.push(category);
       }
     });
     return tree;
@@ -29223,7 +29274,8 @@ var BottlenecksContent = ({
   workspaceName,
   date,
   shift,
-  className
+  className,
+  totalOutput
 }) => {
   const dashboardConfig = useDashboardConfig();
   const timezone = useAppTimezone();
@@ -29322,8 +29374,9 @@ var BottlenecksContent = ({
   } = useClipTypesWithCounts(
     workspaceId,
     date || getOperationalDate(timezone),
-    effectiveShift
+    effectiveShift,
     // Use same shift as video loading for consistency
+    totalOutput
   );
   console.log("[BottlenecksContent] Clip types data:", {
     clipTypes,
@@ -29368,8 +29421,9 @@ var BottlenecksContent = ({
       const fullResult = await s3ClipsService.getClipCounts(
         workspaceId,
         operationalDate,
-        shiftStr
-        // Don't build index - use pagination for cost efficiency
+        shiftStr,
+        totalOutput
+        // Pass totalOutput for cycle completion adjustment
       );
       console.log(`[BottlenecksContent] Direct fetch result:`, fullResult);
       if (fullResult) {
@@ -29382,7 +29436,12 @@ var BottlenecksContent = ({
     } catch (err) {
       console.error("[BottlenecksContent] Error fetching clip counts:", err);
       if (isMountedRef.current) {
-        setError("Failed to load clip counts. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load clip counts. Please try again.",
+          canSkip: false,
+          canRetry: true
+        });
         setIsLoading(false);
       }
     } finally {
@@ -29466,7 +29525,12 @@ var BottlenecksContent = ({
     } catch (err) {
       console.error("Error loading first video for category:", err);
       if (isMountedRef.current) {
-        setError("Failed to load clips. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load clips. Please try again.",
+          canSkip: false,
+          canRetry: true
+        });
         setIsCategoryLoading(false);
       }
     } finally {
@@ -29748,7 +29812,12 @@ var BottlenecksContent = ({
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
       if (isMountedRef.current) {
-        setError("Failed to load selected clip. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load selected clip. Please try again.",
+          canSkip: true,
+          canRetry: true
+        });
         clearLoadingState();
       }
     }
@@ -29771,7 +29840,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error in legacy loadAndPlayClip:`, error2);
-      setError("Failed to load selected clip. Please try again.");
+      setError({
+        type: "fatal",
+        message: "Failed to load selected clip. Please try again.",
+        canSkip: true,
+        canRetry: true
+      });
       setIsNavigating(false);
     }
   }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
@@ -29811,7 +29885,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[handleNext] Error navigating:`, error2);
-      setError("Failed to navigate to next clip");
+      setError({
+        type: "fatal",
+        message: "Failed to navigate to next clip",
+        canSkip: true,
+        canRetry: true
+      });
       clearLoadingState();
     }
   }, [clearLoadingState, s3ClipsService]);
@@ -29847,7 +29926,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[handlePrevious] Error navigating:`, error2);
-      setError("Failed to navigate to previous clip");
+      setError({
+        type: "fatal",
+        message: "Failed to navigate to previous clip",
+        canSkip: true,
+        canRetry: true
+      });
       clearLoadingState();
     }
   }, [clearLoadingState, s3ClipsService]);
@@ -29860,7 +29944,7 @@ var BottlenecksContent = ({
   const handleVideoReady = React21.useCallback((player) => {
     console.log("Video.js player ready - NOT clearing loading (wait for playing event)");
     videoRetryCountRef.current = 0;
-    if (error?.includes("Retrying")) {
+    if (error?.isRetrying) {
       setError(null);
     }
   }, [error]);
@@ -29905,20 +29989,53 @@ var BottlenecksContent = ({
   }, [clearLoadingState]);
   const handleVideoLoadingChange = React21.useCallback((isLoading2) => {
     console.log(`[BottlenecksContent] Video loading state changed: ${isLoading2}`);
+    if (error && error.type === "fatal") {
+      console.log(`[BottlenecksContent] Ignoring loading state change - fatal error is showing`);
+      return;
+    }
     setIsVideoBuffering(isLoading2);
-  }, []);
+  }, [error]);
   const handleVideoEnded = React21.useCallback((player) => {
     handleNext();
   }, [handleNext]);
   const videoRetryCountRef = React21.useRef(0);
-  const handleVideoError = React21.useCallback((player, error2) => {
-    console.error("Video.js error:", error2);
+  const handleVideoError = React21.useCallback((player, errorInfo) => {
+    console.error("[BottlenecksContent] Video.js error:", errorInfo);
     setIsPlaying(false);
+    setIsVideoBuffering(false);
+    const errorCode = errorInfo?.code || 0;
+    const canRetry = errorInfo?.canRetry ?? false;
+    const errorMessage = errorInfo?.message || "Unknown error";
+    console.log(`[Video Error] Code: ${errorCode}, Can Retry: ${canRetry}, Message: ${errorMessage}`);
+    if (!canRetry) {
+      console.log("[Video Error] Non-recoverable error - showing error overlay immediately");
+      setError({
+        type: "fatal",
+        code: errorCode,
+        message: errorMessage,
+        canSkip: true,
+        canRetry: false
+      });
+      clearLoadingState();
+      videoRetryCountRef.current = 0;
+      trackCoreEvent("clips_video_error_non_recoverable", {
+        workspaceId,
+        category: activeFilterRef.current,
+        videoId: currentVideo?.id,
+        errorCode,
+        errorMessage
+      });
+      return;
+    }
     if (videoRetryCountRef.current < 3 && currentVideo) {
       videoRetryCountRef.current++;
       const retryDelay = 1e3 * videoRetryCountRef.current;
-      console.log(`[Video Error] Retrying... Attempt ${videoRetryCountRef.current}/3 in ${retryDelay}ms`);
-      setError(`Retrying... (${videoRetryCountRef.current}/3)`);
+      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);
@@ -29926,16 +30043,26 @@ var BottlenecksContent = ({
         }
       }, retryDelay);
     } else {
-      setError("Video failed to load after 3 attempts. The stream may be corrupted.");
+      console.log("[Video Error] Retries exhausted - showing final error overlay");
+      setError({
+        type: "fatal",
+        code: errorCode,
+        message: errorMessage,
+        canSkip: true,
+        canRetry: true
+        // Allow manual retry for network errors
+      });
       videoRetryCountRef.current = 0;
       trackCoreEvent("clips_video_error_final", {
         workspaceId,
         category: activeFilterRef.current,
         videoId: currentVideo?.id,
-        attempts: videoRetryCountRef.current
+        errorCode,
+        errorMessage,
+        attempts: 3
       });
     }
-  }, [currentVideo, workspaceId]);
+  }, [currentVideo, workspaceId, clearLoadingState]);
   React21.useEffect(() => {
     isMountedRef.current = true;
     return () => {
@@ -29953,9 +30080,13 @@ var BottlenecksContent = ({
   }, [s3ClipsService]);
   React21.useEffect(() => {
     if (filteredVideos.length > 0 && currentIndex < filteredVideos.length) {
+      if (error && error.type === "fatal") {
+        console.log("[BottlenecksContent] Not clearing fatal error on video change - let user handle it");
+        return;
+      }
       setError(null);
     }
-  }, [currentIndex, filteredVideos]);
+  }, [currentIndex, filteredVideos, error]);
   React21.useEffect(() => {
     if (!isTransitioning && pendingVideo) {
       const timer = setTimeout(() => {
@@ -30030,11 +30161,11 @@ var BottlenecksContent = ({
   if ((isLoading || clipTypesLoading) && allVideos.length === 0 && Object.keys(mergedCounts).length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow p-4 flex items-center justify-center h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
-  if (error || clipTypesError) {
+  if (error && error.type === "fatal" && !hasInitialLoad || clipTypesError) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "Error Loading Clips" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 max-w-md", children: error || clipTypesError })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 max-w-md", children: error?.message || clipTypesError })
     ] });
   }
   const categoriesToShow = clipTypes.length > 0 ? clipTypes : [];
@@ -30081,7 +30212,7 @@ var BottlenecksContent = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: categoryMetadata.length > 0 ? `${currentMetadataIndex + 1} / ${categoryMetadata.length}` : "0 / 0" }),
-              error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600 font-medium", children: error })
+              error && error.type === "retrying" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-orange-600 font-medium", children: error.message })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -30095,7 +30226,6 @@ var BottlenecksContent = ({
             )
           ] })
         ] }) }),
-        /* Show video if we have filtered videos and current video, or show loading */
         filteredVideos.length > 0 && currentVideo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             CroppedVideoPlayer,
@@ -30127,30 +30257,44 @@ var BottlenecksContent = ({
               }
             }
           ),
-          (isTransitioning || isVideoBuffering && isInitialLoading) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-          !isTransitioning && isVideoBuffering && !isInitialLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-          error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/80 text-white p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md", children: [
+          (isTransitioning || isVideoBuffering && isInitialLoading) && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+          !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+          error && error.type === "retrying" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
+          ] }) }),
+          error && error.type === "fatal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/90 text-white p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md", children: [
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Video Stream Error" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-300 mb-4", children: "The video stream appears to be corrupted or unavailable. This may be due to:" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "text-sm text-gray-300 text-left space-y-1 mb-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Incomplete video encoding" }),
-              /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Network connectivity issues" }),
-              /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Server processing errors" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => {
-                  setError(null);
-                  if (videoRef.current) {
-                    videoRef.current.dispose();
-                  }
-                },
-                className: "px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium",
-                children: "Retry"
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: error.code === 3 ? "Stream Corrupted" : error.code === 4 ? "Format Not Supported" : error.code === 2 ? "Network Error" : error.code === 1 ? "Loading Interrupted" : "Playback Error" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-300 mb-6", children: error.message }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
+              error.canSkip && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setError(null);
+                    videoRetryCountRef.current = 0;
+                    handleNext();
+                  },
+                  className: "px-5 py-2.5 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition-colors",
+                  children: "Skip to Next Clip"
+                }
+              ),
+              error.canRetry && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setError(null);
+                    videoRetryCountRef.current = 0;
+                    if (videoRef.current) {
+                      videoRef.current.dispose();
+                    }
+                  },
+                  className: "px-5 py-2.5 bg-gray-600 hover:bg-gray-700 rounded-md text-sm font-medium transition-colors",
+                  children: "Retry"
+                }
+              )
+            ] })
           ] }) }),
           (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" || currentVideo.type === "idle_time" ? "bg-purple-400" : isPercentileCategory(activeFilterRef.current) ? activeFilterRef.current === "fast-cycles" ? "bg-green-600" : activeFilterRef.current === "slow-cycles" ? "bg-red-700" : "bg-orange-500" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-gray-500"} mr-2 animate-pulse` }),
@@ -42659,7 +42803,7 @@ var WorkspaceDetailView = ({
                   /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
                     /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
                       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
                         "Standard: ",
                         workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -42779,7 +42923,7 @@ var WorkspaceDetailView = ({
                   /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
                     /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
                       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
                         "Standard: ",
                         workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -42854,6 +42998,7 @@ var WorkspaceDetailView = ({
                 workspaceName: formattedWorkspaceName,
                 date,
                 shift,
+                totalOutput: workspace?.total_actions,
                 className: "h-[calc(100vh-10rem)]"
               }
             ) })

package/dist/index.mjs

@@ -3735,7 +3735,7 @@ var S3ClipsSupabaseService = class {
   /**
    * Get clip counts with optional video index
    */
-  async getClipCountsCacheFirst(workspaceId, date, shiftId, buildIndex = false) {
+  async getClipCountsCacheFirst(workspaceId, date, shiftId, buildIndex = false, totalOutput) {
     const cacheKey = `clip-counts:${workspaceId}:${date}:${shiftId}`;
     return this.deduplicate(cacheKey, async () => {
       console.log(`[S3ClipsSupabase] Fetching clip counts from Supabase for:`, {
@@ -3746,7 +3746,8 @@ var S3ClipsSupabaseService = class {
       const response = await this.fetchWithAuth("count", {
         workspaceId,
         date,
-        shift: shiftId.toString()
+        shift: shiftId.toString(),
+        totalOutput
       });
       console.log(`[S3ClipsSupabase] Count API response:`, response);
       const counts = response.counts || {};
@@ -3798,8 +3799,8 @@ var S3ClipsSupabaseService = class {
   /**
    * Get clip counts (simplified version)
    */
-  async getClipCounts(workspaceId, date, shiftId) {
-    const result = await this.getClipCountsCacheFirst(workspaceId, date, shiftId, false);
+  async getClipCounts(workspaceId, date, shiftId, totalOutput) {
+    const result = await this.getClipCountsCacheFirst(workspaceId, date, shiftId, false, totalOutput);
     if (typeof result === "object" && "counts" in result) {
       return result.counts;
     }
@@ -8990,7 +8991,7 @@ function useClipTypes() {
     refresh: fetchClipTypes
   };
 }
-function useClipTypesWithCounts(workspaceId, date, shiftId) {
+function useClipTypesWithCounts(workspaceId, date, shiftId, totalOutput) {
   const { clipTypes, isLoading: typesLoading, error: typesError, refresh } = useClipTypes();
   const [counts, setCounts] = useState({});
   const [countsLoading, setCountsLoading] = useState(false);
@@ -9015,7 +9016,8 @@ function useClipTypesWithCounts(workspaceId, date, shiftId) {
         const clipCounts = await s3Service.getClipCounts(
           workspaceId,
           date,
-          shiftId.toString()
+          shiftId.toString(),
+          totalOutput
         );
         console.log("[useClipTypesWithCounts] Received counts:", clipCounts);
         setCounts(clipCounts);
@@ -9026,7 +9028,7 @@ function useClipTypesWithCounts(workspaceId, date, shiftId) {
       }
     };
     fetchCounts();
-  }, [s3Service, workspaceId, date, shiftId]);
+  }, [s3Service, workspaceId, date, shiftId, totalOutput]);
   return {
     clipTypes: clipTypes.map((type) => ({
       ...type,
@@ -22247,7 +22249,7 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
       /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6 sm:py-3", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+        /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
         /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
           "Standard: ",
           workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -25927,8 +25929,19 @@ var WorkspaceMonthlyHistory = ({
     const daysInMonth = new Date(year, month + 1, 0).getDate();
     const dailyData = [];
     let maxOutput = 0;
-    let totalIdealOutput = 0;
-    let validDaysCount = 0;
+    let lastSetTarget = 0;
+    for (let day = daysInMonth; day >= 1; day--) {
+      const dayData = data.find((d) => {
+        const date = new Date(d.date);
+        return date.getDate() === day;
+      });
+      const shiftData = dayData ? selectedShift === "day" ? dayData.dayShift : dayData.nightShift : null;
+      const idealOutput = shiftData ? shiftData.idealOutput : 0;
+      if (idealOutput > 0) {
+        lastSetTarget = idealOutput;
+        break;
+      }
+    }
     for (let day = 1; day <= daysInMonth; day++) {
       const dayData = data.find((d) => {
         const date = new Date(d.date);
@@ -25938,11 +25951,7 @@ var WorkspaceMonthlyHistory = ({
       const output = shiftData && hasRealData(shiftData) ? shiftData.output : 0;
       const idealOutput = shiftData ? shiftData.idealOutput : 0;
       if (output > maxOutput) maxOutput = output;
-      if (idealOutput > 0) {
-        totalIdealOutput += idealOutput;
-        validDaysCount++;
-      }
-      const color2 = output >= idealOutput ? "#00AB45" : "#E34329";
+      const color2 = output >= lastSetTarget ? "#00AB45" : "#E34329";
       dailyData.push({
         hour: getOrdinal(day),
         // Using ordinal format (1st, 2nd, 3rd, etc.)
@@ -25957,14 +25966,13 @@ var WorkspaceMonthlyHistory = ({
         // Not used but keeps structure consistent
       });
     }
-    const avgIdealOutput = validDaysCount > 0 ? totalIdealOutput / validDaysCount : 0;
-    const calculatedMax = Math.max(maxOutput, avgIdealOutput);
+    const calculatedMax = Math.max(maxOutput, lastSetTarget);
     const yAxisMax = calculatedMax > 0 ? calculatedMax * 1.1 : 100;
-    return { data: dailyData, maxOutput, avgIdealOutput, yAxisMax };
+    return { data: dailyData, maxOutput, lastSetTarget, yAxisMax };
   }, [data, month, year, selectedShift]);
   const yAxisTicks = useMemo(() => {
     const max = chartData.yAxisMax;
-    const target = chartData.avgIdealOutput;
+    const target = chartData.lastSetTarget;
     if (!max || max <= 0) return void 0;
     const desiredIntervals = 4;
     const roughStep = max / desiredIntervals;
@@ -25982,7 +25990,7 @@ var WorkspaceMonthlyHistory = ({
       ticks.push(Math.round(target));
     }
     return Array.from(new Set(ticks)).filter((v) => v >= 0 && v <= max).sort((a, b) => a - b);
-  }, [chartData.yAxisMax, chartData.avgIdealOutput]);
+  }, [chartData.yAxisMax, chartData.lastSetTarget]);
   const pieChartData = useMemo(() => {
     const validShifts = data.map((d) => selectedShift === "day" ? d.dayShift : d.nightShift).filter(hasRealData);
     if (validShifts.length === 0) return [];
@@ -26294,7 +26302,7 @@ var WorkspaceMonthlyHistory = ({
                     tick: (props) => {
                       const { x, y, payload } = props;
                       const value = Math.round(payload.value);
-                      const targetValue = Math.round(chartData.avgIdealOutput);
+                      const targetValue = Math.round(chartData.lastSetTarget);
                       const isTarget = Math.abs(value - targetValue) < 1 && targetValue > 0;
                       return /* @__PURE__ */ jsx(
                         "text",
@@ -26318,10 +26326,10 @@ var WorkspaceMonthlyHistory = ({
                     content: CustomTooltip
                   }
                 ),
-                chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsx(
+                chartData.lastSetTarget > 0 && /* @__PURE__ */ jsx(
                   ReferenceLine,
                   {
-                    y: chartData.avgIdealOutput,
+                    y: chartData.lastSetTarget,
                     stroke: "#E34329",
                     strokeDasharray: "5 5",
                     strokeWidth: 2
@@ -26379,11 +26387,11 @@ var WorkspaceMonthlyHistory = ({
               ]
             }
           ) }) }),
-          /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-6 mt-3", children: chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-6 mt-3", children: chartData.lastSetTarget > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx("div", { className: "w-12 h-0.5 border-t-2 border-dashed", style: { borderColor: "#E34329" } }),
             /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-600", children: [
               "Target: ",
-              Math.round(chartData.avgIdealOutput),
+              Math.round(chartData.lastSetTarget),
               " units/day"
             ] })
           ] }) })
@@ -27229,6 +27237,36 @@ var TimePickerDropdown = ({
     ] })
   ] });
 };
+var ERROR_MAPPING = {
+  1: {
+    // MEDIA_ERR_ABORTED
+    code: 1,
+    type: "recoverable" /* RECOVERABLE */,
+    message: "Video loading was interrupted",
+    canRetry: true
+  },
+  2: {
+    // MEDIA_ERR_NETWORK
+    code: 2,
+    type: "recoverable" /* RECOVERABLE */,
+    message: "Network error - please check your internet connection",
+    canRetry: true
+  },
+  3: {
+    // MEDIA_ERR_DECODE
+    code: 3,
+    type: "non_recoverable" /* NON_RECOVERABLE */,
+    message: "Stream corrupted due to internet connection",
+    canRetry: false
+  },
+  4: {
+    // MEDIA_ERR_SRC_NOT_SUPPORTED
+    code: 4,
+    type: "non_recoverable" /* NON_RECOVERABLE */,
+    message: "Video format not supported by your browser. Please use Google Chrome.",
+    canRetry: false
+  }
+};
 var videoPlayerStyles = `
   .video-player-container {
     width: 100%;
@@ -27459,8 +27497,21 @@ var VideoPlayer = React21__default.forwardRef(({
     player.on("seeked", () => onSeeked?.(player));
     player.on("error", () => {
       const error = player.error();
-      console.error("Video.js error:", error);
-      onError?.(player, error);
+      const errorCode = error?.code ?? 0;
+      const errorInfo = ERROR_MAPPING[errorCode] || {
+        code: errorCode || 0,
+        type: "non_recoverable" /* NON_RECOVERABLE */,
+        message: "Unknown playback error occurred",
+        canRetry: false
+      };
+      console.error("[VideoPlayer] Video.js error:", {
+        code: errorCode,
+        type: errorInfo.type,
+        message: errorInfo.message,
+        canRetry: errorInfo.canRetry,
+        originalError: error
+      });
+      onError?.(player, errorInfo);
     });
     if (src) {
       const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
@@ -28638,7 +28689,7 @@ var FileManagerFilters = ({
     ];
     percentileCategories.forEach((category) => {
       if (category.count > 0 && shouldShowCategory(category.id)) {
-        tree.unshift(category);
+        tree.push(category);
       }
     });
     return tree;
@@ -29193,7 +29244,8 @@ var BottlenecksContent = ({
   workspaceName,
   date,
   shift,
-  className
+  className,
+  totalOutput
 }) => {
   const dashboardConfig = useDashboardConfig();
   const timezone = useAppTimezone();
@@ -29292,8 +29344,9 @@ var BottlenecksContent = ({
   } = useClipTypesWithCounts(
     workspaceId,
     date || getOperationalDate(timezone),
-    effectiveShift
+    effectiveShift,
     // Use same shift as video loading for consistency
+    totalOutput
   );
   console.log("[BottlenecksContent] Clip types data:", {
     clipTypes,
@@ -29338,8 +29391,9 @@ var BottlenecksContent = ({
       const fullResult = await s3ClipsService.getClipCounts(
         workspaceId,
         operationalDate,
-        shiftStr
-        // Don't build index - use pagination for cost efficiency
+        shiftStr,
+        totalOutput
+        // Pass totalOutput for cycle completion adjustment
       );
       console.log(`[BottlenecksContent] Direct fetch result:`, fullResult);
       if (fullResult) {
@@ -29352,7 +29406,12 @@ var BottlenecksContent = ({
     } catch (err) {
       console.error("[BottlenecksContent] Error fetching clip counts:", err);
       if (isMountedRef.current) {
-        setError("Failed to load clip counts. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load clip counts. Please try again.",
+          canSkip: false,
+          canRetry: true
+        });
         setIsLoading(false);
       }
     } finally {
@@ -29436,7 +29495,12 @@ var BottlenecksContent = ({
     } catch (err) {
       console.error("Error loading first video for category:", err);
       if (isMountedRef.current) {
-        setError("Failed to load clips. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load clips. Please try again.",
+          canSkip: false,
+          canRetry: true
+        });
         setIsCategoryLoading(false);
       }
     } finally {
@@ -29718,7 +29782,12 @@ var BottlenecksContent = ({
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
       if (isMountedRef.current) {
-        setError("Failed to load selected clip. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load selected clip. Please try again.",
+          canSkip: true,
+          canRetry: true
+        });
         clearLoadingState();
       }
     }
@@ -29741,7 +29810,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error in legacy loadAndPlayClip:`, error2);
-      setError("Failed to load selected clip. Please try again.");
+      setError({
+        type: "fatal",
+        message: "Failed to load selected clip. Please try again.",
+        canSkip: true,
+        canRetry: true
+      });
       setIsNavigating(false);
     }
   }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
@@ -29781,7 +29855,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[handleNext] Error navigating:`, error2);
-      setError("Failed to navigate to next clip");
+      setError({
+        type: "fatal",
+        message: "Failed to navigate to next clip",
+        canSkip: true,
+        canRetry: true
+      });
       clearLoadingState();
     }
   }, [clearLoadingState, s3ClipsService]);
@@ -29817,7 +29896,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[handlePrevious] Error navigating:`, error2);
-      setError("Failed to navigate to previous clip");
+      setError({
+        type: "fatal",
+        message: "Failed to navigate to previous clip",
+        canSkip: true,
+        canRetry: true
+      });
       clearLoadingState();
     }
   }, [clearLoadingState, s3ClipsService]);
@@ -29830,7 +29914,7 @@ var BottlenecksContent = ({
   const handleVideoReady = useCallback((player) => {
     console.log("Video.js player ready - NOT clearing loading (wait for playing event)");
     videoRetryCountRef.current = 0;
-    if (error?.includes("Retrying")) {
+    if (error?.isRetrying) {
       setError(null);
     }
   }, [error]);
@@ -29875,20 +29959,53 @@ var BottlenecksContent = ({
   }, [clearLoadingState]);
   const handleVideoLoadingChange = useCallback((isLoading2) => {
     console.log(`[BottlenecksContent] Video loading state changed: ${isLoading2}`);
+    if (error && error.type === "fatal") {
+      console.log(`[BottlenecksContent] Ignoring loading state change - fatal error is showing`);
+      return;
+    }
     setIsVideoBuffering(isLoading2);
-  }, []);
+  }, [error]);
   const handleVideoEnded = useCallback((player) => {
     handleNext();
   }, [handleNext]);
   const videoRetryCountRef = useRef(0);
-  const handleVideoError = useCallback((player, error2) => {
-    console.error("Video.js error:", error2);
+  const handleVideoError = useCallback((player, errorInfo) => {
+    console.error("[BottlenecksContent] Video.js error:", errorInfo);
     setIsPlaying(false);
+    setIsVideoBuffering(false);
+    const errorCode = errorInfo?.code || 0;
+    const canRetry = errorInfo?.canRetry ?? false;
+    const errorMessage = errorInfo?.message || "Unknown error";
+    console.log(`[Video Error] Code: ${errorCode}, Can Retry: ${canRetry}, Message: ${errorMessage}`);
+    if (!canRetry) {
+      console.log("[Video Error] Non-recoverable error - showing error overlay immediately");
+      setError({
+        type: "fatal",
+        code: errorCode,
+        message: errorMessage,
+        canSkip: true,
+        canRetry: false
+      });
+      clearLoadingState();
+      videoRetryCountRef.current = 0;
+      trackCoreEvent("clips_video_error_non_recoverable", {
+        workspaceId,
+        category: activeFilterRef.current,
+        videoId: currentVideo?.id,
+        errorCode,
+        errorMessage
+      });
+      return;
+    }
     if (videoRetryCountRef.current < 3 && currentVideo) {
       videoRetryCountRef.current++;
       const retryDelay = 1e3 * videoRetryCountRef.current;
-      console.log(`[Video Error] Retrying... Attempt ${videoRetryCountRef.current}/3 in ${retryDelay}ms`);
-      setError(`Retrying... (${videoRetryCountRef.current}/3)`);
+      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);
@@ -29896,16 +30013,26 @@ var BottlenecksContent = ({
         }
       }, retryDelay);
     } else {
-      setError("Video failed to load after 3 attempts. The stream may be corrupted.");
+      console.log("[Video Error] Retries exhausted - showing final error overlay");
+      setError({
+        type: "fatal",
+        code: errorCode,
+        message: errorMessage,
+        canSkip: true,
+        canRetry: true
+        // Allow manual retry for network errors
+      });
       videoRetryCountRef.current = 0;
       trackCoreEvent("clips_video_error_final", {
         workspaceId,
         category: activeFilterRef.current,
         videoId: currentVideo?.id,
-        attempts: videoRetryCountRef.current
+        errorCode,
+        errorMessage,
+        attempts: 3
       });
     }
-  }, [currentVideo, workspaceId]);
+  }, [currentVideo, workspaceId, clearLoadingState]);
   useEffect(() => {
     isMountedRef.current = true;
     return () => {
@@ -29923,9 +30050,13 @@ var BottlenecksContent = ({
   }, [s3ClipsService]);
   useEffect(() => {
     if (filteredVideos.length > 0 && currentIndex < filteredVideos.length) {
+      if (error && error.type === "fatal") {
+        console.log("[BottlenecksContent] Not clearing fatal error on video change - let user handle it");
+        return;
+      }
       setError(null);
     }
-  }, [currentIndex, filteredVideos]);
+  }, [currentIndex, filteredVideos, error]);
   useEffect(() => {
     if (!isTransitioning && pendingVideo) {
       const timer = setTimeout(() => {
@@ -30000,11 +30131,11 @@ var BottlenecksContent = ({
   if ((isLoading || clipTypesLoading) && allVideos.length === 0 && Object.keys(mergedCounts).length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "flex-grow p-4 flex items-center justify-center h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
-  if (error || clipTypesError) {
+  if (error && error.type === "fatal" && !hasInitialLoad || clipTypesError) {
     return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
       /* @__PURE__ */ jsx(XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "Error Loading Clips" }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: error || clipTypesError })
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: error?.message || clipTypesError })
     ] });
   }
   const categoriesToShow = clipTypes.length > 0 ? clipTypes : [];
@@ -30051,7 +30182,7 @@ var BottlenecksContent = ({
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
               /* @__PURE__ */ jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: categoryMetadata.length > 0 ? `${currentMetadataIndex + 1} / ${categoryMetadata.length}` : "0 / 0" }),
-              error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-600 font-medium", children: error })
+              error && error.type === "retrying" && /* @__PURE__ */ jsx("span", { className: "text-xs text-orange-600 font-medium", children: error.message })
             ] }),
             /* @__PURE__ */ jsx(
               "button",
@@ -30065,7 +30196,6 @@ var BottlenecksContent = ({
             )
           ] })
         ] }) }),
-        /* Show video if we have filtered videos and current video, or show loading */
         filteredVideos.length > 0 && currentVideo ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
           /* @__PURE__ */ jsx(
             CroppedVideoPlayer,
@@ -30097,30 +30227,44 @@ var BottlenecksContent = ({
               }
             }
           ),
-          (isTransitioning || isVideoBuffering && isInitialLoading) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-          !isTransitioning && isVideoBuffering && !isInitialLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-          error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/80 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+          (isTransitioning || isVideoBuffering && isInitialLoading) && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+          !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+          error && error.type === "retrying" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md" }),
+            /* @__PURE__ */ jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
+          ] }) }),
+          error && error.type === "fatal" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/90 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
             /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Video Stream Error" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-4", children: "The video stream appears to be corrupted or unavailable. This may be due to:" }),
-            /* @__PURE__ */ jsxs("ul", { className: "text-sm text-gray-300 text-left space-y-1 mb-4", children: [
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Incomplete video encoding" }),
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Network connectivity issues" }),
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Server processing errors" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => {
-                  setError(null);
-                  if (videoRef.current) {
-                    videoRef.current.dispose();
-                  }
-                },
-                className: "px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium",
-                children: "Retry"
-              }
-            )
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: error.code === 3 ? "Stream Corrupted" : error.code === 4 ? "Format Not Supported" : error.code === 2 ? "Network Error" : error.code === 1 ? "Loading Interrupted" : "Playback Error" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-6", children: error.message }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
+              error.canSkip && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setError(null);
+                    videoRetryCountRef.current = 0;
+                    handleNext();
+                  },
+                  className: "px-5 py-2.5 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition-colors",
+                  children: "Skip to Next Clip"
+                }
+              ),
+              error.canRetry && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setError(null);
+                    videoRetryCountRef.current = 0;
+                    if (videoRef.current) {
+                      videoRef.current.dispose();
+                    }
+                  },
+                  className: "px-5 py-2.5 bg-gray-600 hover:bg-gray-700 rounded-md text-sm font-medium transition-colors",
+                  children: "Retry"
+                }
+              )
+            ] })
           ] }) }),
           (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
             /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" || currentVideo.type === "idle_time" ? "bg-purple-400" : isPercentileCategory(activeFilterRef.current) ? activeFilterRef.current === "fast-cycles" ? "bg-green-600" : activeFilterRef.current === "slow-cycles" ? "bg-red-700" : "bg-orange-500" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-gray-500"} mr-2 animate-pulse` }),
@@ -42629,7 +42773,7 @@ var WorkspaceDetailView = ({
                   /* @__PURE__ */ jsxs(Card2, { children: [
                     /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
                     /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+                      /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
                       /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
                         "Standard: ",
                         workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -42749,7 +42893,7 @@ var WorkspaceDetailView = ({
                   /* @__PURE__ */ jsxs(Card2, { children: [
                     /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
                     /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+                      /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
                       /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
                         "Standard: ",
                         workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -42824,6 +42968,7 @@ var WorkspaceDetailView = ({
                 workspaceName: formattedWorkspaceName,
                 date,
                 shift,
+                totalOutput: workspace?.total_actions,
                 className: "h-[calc(100vh-10rem)]"
               }
             ) })

package/package.json

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