npm - @optifye/dashboard-core - Versions diffs - 6.9.6 → 6.9.7 - Mend

@optifye/dashboard-core 6.9.6 → 6.9.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -6575,6 +6575,7 @@ interface FileManagerFiltersProps {
     date?: string;
     shift?: string | number;
     className?: string;
+    targetCycleTime?: number | null;
 }
 declare const FileManagerFilters: React__default.FC<FileManagerFiltersProps>;

package/dist/index.d.ts CHANGED Viewed

@@ -6575,6 +6575,7 @@ interface FileManagerFiltersProps {
     date?: string;
     shift?: string | number;
     className?: string;
+    targetCycleTime?: number | null;
 }
 declare const FileManagerFilters: React__default.FC<FileManagerFiltersProps>;

package/dist/index.js CHANGED Viewed

@@ -25662,18 +25662,30 @@ var BreakNotificationPopup = ({
   className = "",
   lineNames = {}
 }) => {
-  const [isDismissed, setIsDismissed] = React23.useState(false);
+  const [currentIndex, setCurrentIndex] = React23.useState(0);
+  const [visibleBreaks, setVisibleBreaks] = React23.useState(activeBreaks);
   const [currentTime, setCurrentTime] = React23.useState(/* @__PURE__ */ new Date());
+  React23.useEffect(() => {
+    setVisibleBreaks(activeBreaks);
+    if (currentIndex >= activeBreaks.length) {
+      setCurrentIndex(Math.max(0, activeBreaks.length - 1));
+    }
+  }, [activeBreaks, currentIndex]);
   React23.useEffect(() => {
     const timer = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
     return () => clearInterval(timer);
   }, []);
-  const handleDismiss = () => {
-    setIsDismissed(true);
+  const handleDismissAll = () => {
     onDismiss?.();
   };
+  const handleNext = () => {
+    setCurrentIndex((prev) => (prev + 1) % visibleBreaks.length);
+  };
+  const handlePrevious = () => {
+    setCurrentIndex((prev) => (prev - 1 + visibleBreaks.length) % visibleBreaks.length);
+  };
   const formatTime3 = (minutes) => {
     const hours = Math.floor(minutes / 60);
     const mins = minutes % 60;
@@ -25682,69 +25694,130 @@ var BreakNotificationPopup = ({
     }
     return `${mins}m`;
   };
-  if (!isVisible || isDismissed || activeBreaks.length === 0) {
+  const formatTo12Hour = (time24) => {
+    const [hours, minutes] = time24.split(":").map(Number);
+    if (isNaN(hours) || isNaN(minutes)) {
+      return time24;
+    }
+    const period = hours >= 12 ? "PM" : "AM";
+    const hours12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+    return `${hours12}:${minutes.toString().padStart(2, "0")} ${period}`;
+  };
+  if (!isVisible || visibleBreaks.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { children: activeBreaks.map((breakItem, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    motion.div,
-    {
-      initial: { opacity: 0, x: 100, y: -20 },
-      animate: { opacity: 1, x: 0, y: 0 },
-      exit: { opacity: 0, x: 100, y: -20 },
-      transition: { duration: 0.3, ease: "easeOut", delay: index * 0.1 },
-      className: `fixed right-4 z-50 max-w-xs w-full ${className}`,
-      style: { top: `${6 + index * 12}rem` },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(AxelOrb, { size: "md" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "font-semibold text-sm text-gray-900", children: [
-                breakItem.remarks || "Break",
-                (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 ml-1", children: [
-                  "\u2022 ",
-                  lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}`
-                ] })
+  const currentBreak = visibleBreaks[currentIndex];
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `fixed right-4 top-24 z-50 max-w-xs w-full ${className}`, children: [
+    visibleBreaks.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-white rounded-lg border border-gray-300 shadow-lg",
+          style: {
+            transform: "translateY(12px) scale(0.94)",
+            opacity: 0.6,
+            zIndex: -2
+          }
+        }
+      ),
+      visibleBreaks.length > 2 && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-white rounded-lg border border-gray-200 shadow-md",
+          style: {
+            transform: "translateY(6px) scale(0.97)",
+            opacity: 0.8,
+            zIndex: -1
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, x: 100, y: -20 },
+        animate: { opacity: 1, x: 0, y: 0 },
+        exit: { opacity: 0, x: -100, y: -20 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        className: "relative z-10",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-xl overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(AxelOrb, { size: "md" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "font-semibold text-sm text-gray-900", children: [
+                  currentBreak.remarks || "Break",
+                  lineNames[currentBreak.lineId] && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 ml-1", children: [
+                    "\u2022 ",
+                    lineNames[currentBreak.lineId]
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-4 h-4 text-amber-500" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-4 h-4 text-amber-500" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600 leading-relaxed mb-2", children: [
-              "Currently active from ",
-              breakItem.startTime,
-              " to ",
-              breakItem.endTime,
-              ". ",
-              formatTime3(breakItem.elapsedMinutes),
-              " elapsed of ",
-              formatTime3(breakItem.duration),
-              " total."
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "h-1.5 bg-blue-500 rounded-full transition-all duration-1000",
-                style: {
-                  width: `${Math.min(100, Math.max(0, breakItem.elapsedMinutes / breakItem.duration * 100))}%`
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600 mb-1", children: [
+                formatTo12Hour(currentBreak.startTime),
+                " - ",
+                formatTo12Hour(currentBreak.endTime)
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mb-2", children: [
+                formatTime3(currentBreak.elapsedMinutes),
+                " elapsed of ",
+                formatTime3(currentBreak.duration),
+                " total"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "h-1.5 bg-blue-500 rounded-full transition-all duration-1000",
+                  style: {
+                    width: `${Math.min(100, Math.max(0, currentBreak.elapsedMinutes / currentBreak.duration * 100))}%`
+                  }
                 }
-              }
-            ) }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleDismiss,
-            onTouchStart: () => {
-            },
-            className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center flex-shrink-0",
-            "aria-label": "Dismiss notification",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
-          }
-        )
-      ] }) }) })
-    },
-    `${breakItem.lineId}-${breakItem.startTime}-${index}`
-  )) });
+              ) }),
+              visibleBreaks.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-2 border-t border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handlePrevious,
+                    className: "p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors",
+                    "aria-label": "Previous break",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500", children: [
+                  currentIndex + 1,
+                  " of ",
+                  visibleBreaks.length,
+                  " breaks"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handleNext,
+                    className: "p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors",
+                    "aria-label": "Next break",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                  }
+                )
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleDismissAll,
+              onTouchStart: () => {
+              },
+              className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center flex-shrink-0",
+              "aria-label": "Dismiss all breaks",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
+            }
+          )
+        ] }) }) })
+      },
+      currentIndex
+    )
+  ] }) });
 };
 async function fetchAxelNotifications() {
   try {
@@ -26708,8 +26781,11 @@ var VideoPlayer = React23__namespace.default.forwardRef(({
         experimentalLLHLS: false,
         // Disable Low Latency HLS for VOD
         // Connection settings
-        enableWorker: true,
-        // Use web worker for better performance
+        // Chrome 130+ started throwing "Cannot perform Construct on a detached ArrayBuffer"
+        // whenever the transmux worker tried to rehydrate transferred buffers that originated
+        // from Blob-based playlists. Disabling the worker keeps playback stable at the cost
+        // of slightly higher main-thread usage, which is acceptable for the dashboard usage.
+        enableWorker: false,
         progressive: true,
         // Progressive download
         // Adaptive bitrate settings (if multi-quality available)
@@ -27719,10 +27795,30 @@ function useWorkspaceCrop(workspaceId) {
   }, [workspaceId]);
   return { crop, isLoading, error };
 }
-var getSeverityIcon = (severity, categoryId) => {
+var parseCycleTime = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+var extractCycleTimeSeconds = (clip) => {
+  return parseCycleTime(clip?.cycleTimeSeconds) ?? parseCycleTime(clip?.cycle_time_seconds) ?? parseCycleTime(clip?.duration) ?? parseCycleTime(clip?.original_task_metadata?.cycle_time) ?? null;
+};
+var getSeverityIcon = (severity, categoryId, cycleTimeSeconds, targetCycleTime) => {
   if (categoryId === "idle_time" || categoryId === "low_value" || categoryId === "longest-idles") {
     return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3 w-3 text-red-500" });
   }
+  if (categoryId === "cycle_completion" && targetCycleTime && targetCycleTime > 0 && cycleTimeSeconds !== null && cycleTimeSeconds !== void 0) {
+    if (cycleTimeSeconds <= targetCycleTime) {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-3 w-3 text-green-500" });
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3 w-3 text-red-500" });
+    }
+  }
   switch (severity) {
     case "high":
       return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3 w-3 text-red-500" });
@@ -27777,7 +27873,8 @@ var FileManagerFilters = ({
   workspaceId,
   date,
   shift,
-  className = ""
+  className = "",
+  targetCycleTime = null
 }) => {
   const [expandedNodes, setExpandedNodes] = React23.useState(/* @__PURE__ */ new Set());
   const [startTime, setStartTime] = React23.useState("");
@@ -27797,6 +27894,26 @@ var FileManagerFilters = ({
   const [percentileCounts, setPercentileCounts] = React23.useState({});
   const [percentileClips, setPercentileClips] = React23.useState({});
   const [loadingPercentile, setLoadingPercentile] = React23.useState(false);
+  const resolvedTargetCycleTime = targetCycleTime && targetCycleTime > 0 ? targetCycleTime : null;
+  const getClipBadge = React23.useCallback((node) => {
+    if (node.categoryId === "idle_time" || node.categoryId === "low_value") {
+      return { text: "Idle", className: "bg-red-100 text-red-700" };
+    }
+    if (node.categoryId === "cycle_completion" && resolvedTargetCycleTime && node.cycleTimeSeconds !== void 0 && node.cycleTimeSeconds !== null) {
+      const isFast = node.cycleTimeSeconds <= resolvedTargetCycleTime;
+      return {
+        text: isFast ? "Fast" : "Slow",
+        className: isFast ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
+      };
+    }
+    if (node.severity === "high") {
+      return { text: "Slow", className: "bg-red-100 text-red-700" };
+    }
+    if (node.severity === "medium") {
+      return { text: "Average", className: "bg-yellow-100 text-yellow-700" };
+    }
+    return { text: "Fast", className: "bg-green-100 text-green-700" };
+  }, [resolvedTargetCycleTime]);
   const fetchClipMetadata = React23.useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for clip metadata fetch");
@@ -28034,18 +28151,20 @@ var FileManagerFilters = ({
             timeZone: timezone
             // Use database timezone for display
           });
+          const cycleTime = extractCycleTimeSeconds(clip);
           return {
             id: clip.id,
             label: `${timeString}${clip.duration && category.id !== "idle_time" ? ` - (${clip.duration.toFixed(1)}s)` : ""}`,
             type: "video",
-            icon: getSeverityIcon(clip.severity, category.id),
+            icon: getSeverityIcon(clip.severity, category.id, cycleTime, resolvedTargetCycleTime),
             timestamp: clip.clip_timestamp,
             severity: clip.severity,
             clipId: clip.clipId,
             // Store stable UUID for navigation
             categoryId: category.id,
-            clipPosition: index + 1
+            clipPosition: index + 1,
             // Store 1-based position
+            cycleTimeSeconds: cycleTime
           };
         });
         regularCategoryNodes.push({
@@ -28084,15 +28203,17 @@ var FileManagerFilters = ({
             minute: "2-digit",
             timeZone: timezone
           });
+          const cycleTime = extractCycleTimeSeconds(clip);
           return {
             id: clip.id,
             label: `${timeString}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
             type: "video",
-            icon: getSeverityIcon(clip.severity, "fast-cycles"),
+            icon: getSeverityIcon(clip.severity, "fast-cycles", cycleTime, resolvedTargetCycleTime),
             timestamp: clip.creation_timestamp,
             severity: clip.severity,
             clipId: clip.id,
-            categoryId: "fast-cycles"
+            categoryId: "fast-cycles",
+            cycleTimeSeconds: cycleTime
           };
         })
       },
@@ -28114,15 +28235,17 @@ var FileManagerFilters = ({
             minute: "2-digit",
             timeZone: timezone
           });
+          const cycleTime = extractCycleTimeSeconds(clip);
           return {
             id: clip.id,
             label: `${timeString}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
             type: "video",
-            icon: getSeverityIcon(clip.severity, "slow-cycles"),
+            icon: getSeverityIcon(clip.severity, "slow-cycles", cycleTime, resolvedTargetCycleTime),
             timestamp: clip.creation_timestamp,
             severity: clip.severity,
             clipId: clip.id,
-            categoryId: "slow-cycles"
+            categoryId: "slow-cycles",
+            cycleTimeSeconds: cycleTime
           };
         })
       }
@@ -28243,7 +28366,10 @@ var FileManagerFilters = ({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-tight ${node.type === "category" || node.type === "percentile-category" ? "text-slate-800 text-sm" : "text-slate-700 text-xs"} ${isCurrentVideo ? "text-blue-700 font-bold" : ""} group-hover:text-slate-900 transition-colors duration-200`, children: node.label }),
                 node.type === "category" && categories.find((c) => c.id === node.id)?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: categories.find((c) => c.id === node.id)?.description }),
                 node.type === "percentile-category" && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: node.subtitle }),
-                node.type === "video" && node.severity && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${node.categoryId === "idle_time" || node.categoryId === "low_value" ? "bg-red-100 text-red-700" : node.severity === "high" ? "bg-red-100 text-red-700" : node.severity === "medium" ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700"}`, children: node.categoryId === "idle_time" || node.categoryId === "low_value" ? "Idle" : node.severity === "low" ? "Fast" : node.severity === "medium" ? "Average" : "Slow" }) })
+                node.type === "video" && (node.severity || node.categoryId === "cycle_completion" || node.categoryId === "idle_time" || node.categoryId === "low_value") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: (() => {
+                  const badge = getClipBadge(node);
+                  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${badge.className}`, children: badge.text });
+                })() })
               ] }),
               node.count !== void 0 && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2.5 py-1 text-sm font-bold rounded-lg shadow-sm border backdrop-blur-sm flex-shrink-0 group-hover:scale-105 transition-all duration-200 ${colorClasses ? `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border} bg-opacity-80` : "bg-slate-100/80 text-slate-700 border-slate-200/60"}`, children: node.count }) })
             ] })
@@ -28910,6 +29036,19 @@ var BottlenecksContent = ({
     }
   }, [shift, date, timezone, shiftConfig, workspaceId]);
   const { crop: workspaceCrop} = useWorkspaceCrop(workspaceId);
+  const { metrics: workspaceMetrics } = useWorkspaceDetailedMetrics(
+    workspaceId,
+    date,
+    shift !== void 0 && shift !== null ? Number(shift) : void 0
+  );
+  const workspaceTargetCycleTimeRaw = workspaceMetrics?.ideal_cycle_time;
+  const workspaceTargetCycleTime = (() => {
+    if (workspaceTargetCycleTimeRaw === void 0 || workspaceTargetCycleTimeRaw === null) {
+      return null;
+    }
+    const numericValue = typeof workspaceTargetCycleTimeRaw === "number" ? workspaceTargetCycleTimeRaw : Number(workspaceTargetCycleTimeRaw);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  })();
   const videoRef = React23.useRef(null);
   const [initialFilter, setInitialFilter] = React23.useState("");
   const currentIndexRef = React23.useRef(0);
@@ -29852,21 +29991,33 @@ var BottlenecksContent = ({
       return () => window.removeEventListener("keydown", handleEscape);
     }
   }, [isFullscreen, exitFullscreen]);
-  const getClipTypeLabel = (video) => {
+  const getClipTypeLabel = React23.useCallback((video) => {
     if (!video) return "";
     const currentFilter = activeFilterRef.current;
+    const targetCycleTime = workspaceTargetCycleTime || 0;
     if (isPercentileCategory(currentFilter)) {
       const percentileValue = video.percentile?.toFixed(1);
-      switch (currentFilter) {
-        case "fast-cycles":
-          return `\u26A1 Fast Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
-        case "slow-cycles":
-          return `\u{1F40C} Slow Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
-        case "longest-idles":
-          return `\u23F0 Long Idle ${percentileValue ? `(${percentileValue}%)` : ""}`;
-        default:
-          return video.description || "Performance Clip";
+      const cycleTime = video.cycle_time_seconds || 0;
+      if (currentFilter === "fast-cycles" || currentFilter === "slow-cycles") {
+        if (targetCycleTime > 0 && cycleTime > 0) {
+          if (cycleTime < targetCycleTime) {
+            return `\u26A1 Fast Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+          } else {
+            return `\u{1F40C} Slow Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+          }
+        } else {
+          switch (currentFilter) {
+            case "fast-cycles":
+              return `\u26A1 Fast Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+            case "slow-cycles":
+              return `\u{1F40C} Slow Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+          }
+        }
       }
+      if (currentFilter === "longest-idles") {
+        return `\u23F0 Long Idle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+      }
+      return video.description || "Performance Clip";
     }
     switch (video.type) {
       case "low_value":
@@ -29885,7 +30036,7 @@ var BottlenecksContent = ({
       default:
         return video.description || "";
     }
-  };
+  }, [workspaceTargetCycleTime]);
   if (!dashboardConfig?.s3Config) {
     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" }),
@@ -30157,12 +30308,32 @@ var BottlenecksContent = ({
               badgeText = "Idle";
               badgeColor = "bg-red-100 text-red-700";
             } else {
-              if (clip.severity === "high" || clip.duration && clip.duration > 60) {
-                badgeText = "Slow";
-                badgeColor = "bg-red-100 text-red-700";
+              const parseCycleTime2 = (value) => {
+                if (typeof value === "number") return isNaN(value) ? null : value;
+                if (typeof value === "string") {
+                  const parsed = parseFloat(value);
+                  return isNaN(parsed) ? null : parsed;
+                }
+                return null;
+              };
+              const clipCycleTime = parseCycleTime2(clip.cycle_time_seconds) ?? parseCycleTime2(clip.duration) ?? parseCycleTime2(clip.original_task_metadata?.cycle_time);
+              const targetCycleTime = workspaceTargetCycleTime && workspaceTargetCycleTime > 0 ? workspaceTargetCycleTime : null;
+              if (clipCycleTime && targetCycleTime) {
+                if (clipCycleTime <= targetCycleTime) {
+                  badgeText = "Fast";
+                  badgeColor = "bg-green-100 text-green-700";
+                } else {
+                  badgeText = "Slow";
+                  badgeColor = "bg-red-100 text-red-700";
+                }
               } else {
-                badgeText = "Average";
-                badgeColor = "bg-yellow-100 text-yellow-700";
+                if (clip.severity === "high" || clip.duration && clip.duration > 60) {
+                  badgeText = "Slow";
+                  badgeColor = "bg-red-100 text-red-700";
+                } else {
+                  badgeText = "Average";
+                  badgeColor = "bg-yellow-100 text-yellow-700";
+                }
               }
             }
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -30205,6 +30376,7 @@ var BottlenecksContent = ({
             workspaceId,
             date: date || getOperationalDate(timezone),
             shift: effectiveShift,
+            targetCycleTime: workspaceTargetCycleTime,
             onFilterChange: (filterId) => {
               updateActiveFilter(filterId);
               const category = categoriesToShow.find((cat) => cat.type === filterId);
@@ -41492,7 +41664,6 @@ function HomeView({
   factoryName = "Simba Beer - Line 1"
 }) {
   const [isHydrated, setIsHydrated] = React23.useState(false);
-  const [selectedLineId, setSelectedLineId] = React23.useState(factoryViewId);
   const [isChangingFilter, setIsChangingFilter] = React23.useState(false);
   const [errorMessage, setErrorMessage] = React23.useState(null);
   const [displayNamesInitialized, setDisplayNamesInitialized] = React23.useState(false);
@@ -41509,9 +41680,36 @@ function HomeView({
     }
     return [factoryViewId, ...allLineIds];
   }, [factoryViewId, allLineIds, isSupervisor, hasMultipleLines]);
+  const LINE_FILTER_STORAGE_KEY = "optifye_home_line_filter";
+  const [selectedLineId, setSelectedLineId] = React23.useState(() => {
+    if (typeof window === "undefined") {
+      return factoryViewId;
+    }
+    try {
+      const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
+      if (savedLineId) {
+        const allAvailableIds = [factoryViewId, ...allLineIds];
+        if (allAvailableIds.includes(savedLineId)) {
+          return savedLineId;
+        }
+      }
+    } catch (error) {
+      console.warn("Failed to read line filter from sessionStorage:", error);
+    }
+    return factoryViewId;
+  });
   React23.useEffect(() => {
     if (user) {
       if (isSupervisor && allLineIds.length > 0) {
+        try {
+          const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
+          if (savedLineId && allLineIds.includes(savedLineId)) {
+            setSelectedLineId(savedLineId);
+            return;
+          }
+        } catch (error) {
+          console.warn("Failed to read line filter from sessionStorage:", error);
+        }
         setSelectedLineId(allLineIds[0]);
       }
     }
@@ -41592,6 +41790,12 @@ function HomeView({
     }
     return allActiveBreaks.filter((breakItem) => breakItem.lineId === selectedLineId);
   }, [allActiveBreaks, selectedLineId, factoryViewId]);
+  const [breakNotificationsDismissed, setBreakNotificationsDismissed] = React23.useState(false);
+  React23.useEffect(() => {
+    if (activeBreaks.length > 0) {
+      setBreakNotificationsDismissed(false);
+    }
+  }, [activeBreaks.length]);
   const showBottleneckNotification = React23.useCallback(async (bottleneck) => {
     try {
       console.log("\u{1F514} [Notification] Raw bottleneck data:", bottleneck);
@@ -41890,7 +42094,12 @@ function HomeView({
   const handleLineChange = React23.useCallback((value) => {
     setIsChangingFilter(true);
     setSelectedLineId(value);
-  }, []);
+    try {
+      sessionStorage.setItem(LINE_FILTER_STORAGE_KEY, value);
+    } catch (error) {
+      console.warn("Failed to save line filter to sessionStorage:", error);
+    }
+  }, [LINE_FILTER_STORAGE_KEY]);
   React23.useEffect(() => {
     if (!metricsLoading && !kpisLoading && isChangingFilter) {
       if (workspaceMetrics.length > 0 || selectedLineId === factoryViewId) {
@@ -42003,7 +42212,8 @@ function HomeView({
           {
             activeBreaks,
             lineNames,
-            isVisible: !breaksLoading && !breaksError
+            isVisible: !breaksLoading && !breaksError && !breakNotificationsDismissed,
+            onDismiss: () => setBreakNotificationsDismissed(true)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/index.mjs CHANGED Viewed

@@ -11,7 +11,7 @@ import Hls2 from 'hls.js';
 import useSWR from 'swr';
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
-import { Camera, ChevronDown, ChevronUp, Check, Map as Map$1, Video, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ArrowDown, ArrowUp, Pause, Play, XCircle, ChevronLeft, ChevronRight, Maximize2, Sparkles, TrendingUp, Settings2, CheckCircle2, RefreshCw, TrendingDown, FolderOpen, Folder, HelpCircle, Sliders, Activity, Layers, Filter, Search, Edit2, AlertTriangle, CheckCircle, Building2, Mail, Users, User, Lock, ArrowRight, Info, Share2, Trophy, Target, Download, Sun, Moon, MousePointer, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, UserPlus, Settings, LifeBuoy, EyeOff, Eye, MoreVertical, UserCog, Zap, Shield, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, Map as Map$1, Video, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ArrowDown, ArrowUp, ChevronLeft, ChevronRight, Pause, Play, XCircle, Maximize2, Sparkles, TrendingUp, Settings2, CheckCircle2, RefreshCw, TrendingDown, FolderOpen, Folder, HelpCircle, Sliders, Activity, Layers, Filter, Search, Edit2, AlertTriangle, CheckCircle, Building2, Mail, Users, User, Lock, ArrowRight, Info, Share2, Trophy, Target, Download, Sun, Moon, MousePointer, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, UserPlus, Settings, LifeBuoy, EyeOff, Eye, MoreVertical, UserCog, Zap, Shield, UserCircle } from 'lucide-react';
 import { toast } from 'sonner';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, PieChart, Pie, Cell, ReferenceLine, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
@@ -25632,18 +25632,30 @@ var BreakNotificationPopup = ({
   className = "",
   lineNames = {}
 }) => {
-  const [isDismissed, setIsDismissed] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [visibleBreaks, setVisibleBreaks] = useState(activeBreaks);
   const [currentTime, setCurrentTime] = useState(/* @__PURE__ */ new Date());
+  useEffect(() => {
+    setVisibleBreaks(activeBreaks);
+    if (currentIndex >= activeBreaks.length) {
+      setCurrentIndex(Math.max(0, activeBreaks.length - 1));
+    }
+  }, [activeBreaks, currentIndex]);
   useEffect(() => {
     const timer = setInterval(() => {
       setCurrentTime(/* @__PURE__ */ new Date());
     }, 6e4);
     return () => clearInterval(timer);
   }, []);
-  const handleDismiss = () => {
-    setIsDismissed(true);
+  const handleDismissAll = () => {
     onDismiss?.();
   };
+  const handleNext = () => {
+    setCurrentIndex((prev) => (prev + 1) % visibleBreaks.length);
+  };
+  const handlePrevious = () => {
+    setCurrentIndex((prev) => (prev - 1 + visibleBreaks.length) % visibleBreaks.length);
+  };
   const formatTime3 = (minutes) => {
     const hours = Math.floor(minutes / 60);
     const mins = minutes % 60;
@@ -25652,69 +25664,130 @@ var BreakNotificationPopup = ({
     }
     return `${mins}m`;
   };
-  if (!isVisible || isDismissed || activeBreaks.length === 0) {
+  const formatTo12Hour = (time24) => {
+    const [hours, minutes] = time24.split(":").map(Number);
+    if (isNaN(hours) || isNaN(minutes)) {
+      return time24;
+    }
+    const period = hours >= 12 ? "PM" : "AM";
+    const hours12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+    return `${hours12}:${minutes.toString().padStart(2, "0")} ${period}`;
+  };
+  if (!isVisible || visibleBreaks.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: activeBreaks.map((breakItem, index) => /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0, x: 100, y: -20 },
-      animate: { opacity: 1, x: 0, y: 0 },
-      exit: { opacity: 0, x: 100, y: -20 },
-      transition: { duration: 0.3, ease: "easeOut", delay: index * 0.1 },
-      className: `fixed right-4 z-50 max-w-xs w-full ${className}`,
-      style: { top: `${6 + index * 12}rem` },
-      children: /* @__PURE__ */ jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(AxelOrb, { size: "md" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
-              /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm text-gray-900", children: [
-                breakItem.remarks || "Break",
-                (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 ml-1", children: [
-                  "\u2022 ",
-                  lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}`
-                ] })
+  const currentBreak = visibleBreaks[currentIndex];
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsxs("div", { className: `fixed right-4 top-24 z-50 max-w-xs w-full ${className}`, children: [
+    visibleBreaks.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-white rounded-lg border border-gray-300 shadow-lg",
+          style: {
+            transform: "translateY(12px) scale(0.94)",
+            opacity: 0.6,
+            zIndex: -2
+          }
+        }
+      ),
+      visibleBreaks.length > 2 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-white rounded-lg border border-gray-200 shadow-md",
+          style: {
+            transform: "translateY(6px) scale(0.97)",
+            opacity: 0.8,
+            zIndex: -1
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, x: 100, y: -20 },
+        animate: { opacity: 1, x: 0, y: 0 },
+        exit: { opacity: 0, x: -100, y: -20 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        className: "relative z-10",
+        children: /* @__PURE__ */ jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-xl overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(AxelOrb, { size: "md" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+                /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm text-gray-900", children: [
+                  currentBreak.remarks || "Break",
+                  lineNames[currentBreak.lineId] && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 ml-1", children: [
+                    "\u2022 ",
+                    lineNames[currentBreak.lineId]
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(Coffee, { className: "w-4 h-4 text-amber-500" })
               ] }),
-              /* @__PURE__ */ jsx(Coffee, { className: "w-4 h-4 text-amber-500" })
-            ] }),
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 leading-relaxed mb-2", children: [
-              "Currently active from ",
-              breakItem.startTime,
-              " to ",
-              breakItem.endTime,
-              ". ",
-              formatTime3(breakItem.elapsedMinutes),
-              " elapsed of ",
-              formatTime3(breakItem.duration),
-              " total."
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "h-1.5 bg-blue-500 rounded-full transition-all duration-1000",
-                style: {
-                  width: `${Math.min(100, Math.max(0, breakItem.elapsedMinutes / breakItem.duration * 100))}%`
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 mb-1", children: [
+                formatTo12Hour(currentBreak.startTime),
+                " - ",
+                formatTo12Hour(currentBreak.endTime)
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 mb-2", children: [
+                formatTime3(currentBreak.elapsedMinutes),
+                " elapsed of ",
+                formatTime3(currentBreak.duration),
+                " total"
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-1.5 bg-blue-500 rounded-full transition-all duration-1000",
+                  style: {
+                    width: `${Math.min(100, Math.max(0, currentBreak.elapsedMinutes / currentBreak.duration * 100))}%`
+                  }
                 }
-              }
-            ) }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleDismiss,
-            onTouchStart: () => {
-            },
-            className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center flex-shrink-0",
-            "aria-label": "Dismiss notification",
-            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
-          }
-        )
-      ] }) }) })
-    },
-    `${breakItem.lineId}-${breakItem.startTime}-${index}`
-  )) });
+              ) }),
+              visibleBreaks.length > 1 && /* @__PURE__ */ jsx("div", { className: "mt-3 pt-2 border-t border-gray-100", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handlePrevious,
+                    className: "p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors",
+                    "aria-label": "Previous break",
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+                  currentIndex + 1,
+                  " of ",
+                  visibleBreaks.length,
+                  " breaks"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleNext,
+                    className: "p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors",
+                    "aria-label": "Next break",
+                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+                  }
+                )
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleDismissAll,
+              onTouchStart: () => {
+              },
+              className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center flex-shrink-0",
+              "aria-label": "Dismiss all breaks",
+              children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
+            }
+          )
+        ] }) }) })
+      },
+      currentIndex
+    )
+  ] }) });
 };
 async function fetchAxelNotifications() {
   try {
@@ -26678,8 +26751,11 @@ var VideoPlayer = React23__default.forwardRef(({
         experimentalLLHLS: false,
         // Disable Low Latency HLS for VOD
         // Connection settings
-        enableWorker: true,
-        // Use web worker for better performance
+        // Chrome 130+ started throwing "Cannot perform Construct on a detached ArrayBuffer"
+        // whenever the transmux worker tried to rehydrate transferred buffers that originated
+        // from Blob-based playlists. Disabling the worker keeps playback stable at the cost
+        // of slightly higher main-thread usage, which is acceptable for the dashboard usage.
+        enableWorker: false,
         progressive: true,
         // Progressive download
         // Adaptive bitrate settings (if multi-quality available)
@@ -27689,10 +27765,30 @@ function useWorkspaceCrop(workspaceId) {
   }, [workspaceId]);
   return { crop, isLoading, error };
 }
-var getSeverityIcon = (severity, categoryId) => {
+var parseCycleTime = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+var extractCycleTimeSeconds = (clip) => {
+  return parseCycleTime(clip?.cycleTimeSeconds) ?? parseCycleTime(clip?.cycle_time_seconds) ?? parseCycleTime(clip?.duration) ?? parseCycleTime(clip?.original_task_metadata?.cycle_time) ?? null;
+};
+var getSeverityIcon = (severity, categoryId, cycleTimeSeconds, targetCycleTime) => {
   if (categoryId === "idle_time" || categoryId === "low_value" || categoryId === "longest-idles") {
     return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-red-500" });
   }
+  if (categoryId === "cycle_completion" && targetCycleTime && targetCycleTime > 0 && cycleTimeSeconds !== null && cycleTimeSeconds !== void 0) {
+    if (cycleTimeSeconds <= targetCycleTime) {
+      return /* @__PURE__ */ jsx(CheckCircle, { className: "h-3 w-3 text-green-500" });
+    } else {
+      return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-red-500" });
+    }
+  }
   switch (severity) {
     case "high":
       return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-red-500" });
@@ -27747,7 +27843,8 @@ var FileManagerFilters = ({
   workspaceId,
   date,
   shift,
-  className = ""
+  className = "",
+  targetCycleTime = null
 }) => {
   const [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set());
   const [startTime, setStartTime] = useState("");
@@ -27767,6 +27864,26 @@ var FileManagerFilters = ({
   const [percentileCounts, setPercentileCounts] = useState({});
   const [percentileClips, setPercentileClips] = useState({});
   const [loadingPercentile, setLoadingPercentile] = useState(false);
+  const resolvedTargetCycleTime = targetCycleTime && targetCycleTime > 0 ? targetCycleTime : null;
+  const getClipBadge = useCallback((node) => {
+    if (node.categoryId === "idle_time" || node.categoryId === "low_value") {
+      return { text: "Idle", className: "bg-red-100 text-red-700" };
+    }
+    if (node.categoryId === "cycle_completion" && resolvedTargetCycleTime && node.cycleTimeSeconds !== void 0 && node.cycleTimeSeconds !== null) {
+      const isFast = node.cycleTimeSeconds <= resolvedTargetCycleTime;
+      return {
+        text: isFast ? "Fast" : "Slow",
+        className: isFast ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
+      };
+    }
+    if (node.severity === "high") {
+      return { text: "Slow", className: "bg-red-100 text-red-700" };
+    }
+    if (node.severity === "medium") {
+      return { text: "Average", className: "bg-yellow-100 text-yellow-700" };
+    }
+    return { text: "Fast", className: "bg-green-100 text-green-700" };
+  }, [resolvedTargetCycleTime]);
   const fetchClipMetadata = useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for clip metadata fetch");
@@ -28004,18 +28121,20 @@ var FileManagerFilters = ({
             timeZone: timezone
             // Use database timezone for display
           });
+          const cycleTime = extractCycleTimeSeconds(clip);
           return {
             id: clip.id,
             label: `${timeString}${clip.duration && category.id !== "idle_time" ? ` - (${clip.duration.toFixed(1)}s)` : ""}`,
             type: "video",
-            icon: getSeverityIcon(clip.severity, category.id),
+            icon: getSeverityIcon(clip.severity, category.id, cycleTime, resolvedTargetCycleTime),
             timestamp: clip.clip_timestamp,
             severity: clip.severity,
             clipId: clip.clipId,
             // Store stable UUID for navigation
             categoryId: category.id,
-            clipPosition: index + 1
+            clipPosition: index + 1,
             // Store 1-based position
+            cycleTimeSeconds: cycleTime
           };
         });
         regularCategoryNodes.push({
@@ -28054,15 +28173,17 @@ var FileManagerFilters = ({
             minute: "2-digit",
             timeZone: timezone
           });
+          const cycleTime = extractCycleTimeSeconds(clip);
           return {
             id: clip.id,
             label: `${timeString}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
             type: "video",
-            icon: getSeverityIcon(clip.severity, "fast-cycles"),
+            icon: getSeverityIcon(clip.severity, "fast-cycles", cycleTime, resolvedTargetCycleTime),
             timestamp: clip.creation_timestamp,
             severity: clip.severity,
             clipId: clip.id,
-            categoryId: "fast-cycles"
+            categoryId: "fast-cycles",
+            cycleTimeSeconds: cycleTime
           };
         })
       },
@@ -28084,15 +28205,17 @@ var FileManagerFilters = ({
             minute: "2-digit",
             timeZone: timezone
           });
+          const cycleTime = extractCycleTimeSeconds(clip);
           return {
             id: clip.id,
             label: `${timeString}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
             type: "video",
-            icon: getSeverityIcon(clip.severity, "slow-cycles"),
+            icon: getSeverityIcon(clip.severity, "slow-cycles", cycleTime, resolvedTargetCycleTime),
             timestamp: clip.creation_timestamp,
             severity: clip.severity,
             clipId: clip.id,
-            categoryId: "slow-cycles"
+            categoryId: "slow-cycles",
+            cycleTimeSeconds: cycleTime
           };
         })
       }
@@ -28213,7 +28336,10 @@ var FileManagerFilters = ({
                 /* @__PURE__ */ jsx("div", { className: `font-semibold tracking-tight ${node.type === "category" || node.type === "percentile-category" ? "text-slate-800 text-sm" : "text-slate-700 text-xs"} ${isCurrentVideo ? "text-blue-700 font-bold" : ""} group-hover:text-slate-900 transition-colors duration-200`, children: node.label }),
                 node.type === "category" && categories.find((c) => c.id === node.id)?.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: categories.find((c) => c.id === node.id)?.description }),
                 node.type === "percentile-category" && node.subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: node.subtitle }),
-                node.type === "video" && node.severity && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ jsx("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${node.categoryId === "idle_time" || node.categoryId === "low_value" ? "bg-red-100 text-red-700" : node.severity === "high" ? "bg-red-100 text-red-700" : node.severity === "medium" ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700"}`, children: node.categoryId === "idle_time" || node.categoryId === "low_value" ? "Idle" : node.severity === "low" ? "Fast" : node.severity === "medium" ? "Average" : "Slow" }) })
+                node.type === "video" && (node.severity || node.categoryId === "cycle_completion" || node.categoryId === "idle_time" || node.categoryId === "low_value") && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: (() => {
+                  const badge = getClipBadge(node);
+                  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${badge.className}`, children: badge.text });
+                })() })
               ] }),
               node.count !== void 0 && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsx("span", { className: `px-2.5 py-1 text-sm font-bold rounded-lg shadow-sm border backdrop-blur-sm flex-shrink-0 group-hover:scale-105 transition-all duration-200 ${colorClasses ? `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border} bg-opacity-80` : "bg-slate-100/80 text-slate-700 border-slate-200/60"}`, children: node.count }) })
             ] })
@@ -28880,6 +29006,19 @@ var BottlenecksContent = ({
     }
   }, [shift, date, timezone, shiftConfig, workspaceId]);
   const { crop: workspaceCrop} = useWorkspaceCrop(workspaceId);
+  const { metrics: workspaceMetrics } = useWorkspaceDetailedMetrics(
+    workspaceId,
+    date,
+    shift !== void 0 && shift !== null ? Number(shift) : void 0
+  );
+  const workspaceTargetCycleTimeRaw = workspaceMetrics?.ideal_cycle_time;
+  const workspaceTargetCycleTime = (() => {
+    if (workspaceTargetCycleTimeRaw === void 0 || workspaceTargetCycleTimeRaw === null) {
+      return null;
+    }
+    const numericValue = typeof workspaceTargetCycleTimeRaw === "number" ? workspaceTargetCycleTimeRaw : Number(workspaceTargetCycleTimeRaw);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  })();
   const videoRef = useRef(null);
   const [initialFilter, setInitialFilter] = useState("");
   const currentIndexRef = useRef(0);
@@ -29822,21 +29961,33 @@ var BottlenecksContent = ({
       return () => window.removeEventListener("keydown", handleEscape);
     }
   }, [isFullscreen, exitFullscreen]);
-  const getClipTypeLabel = (video) => {
+  const getClipTypeLabel = useCallback((video) => {
     if (!video) return "";
     const currentFilter = activeFilterRef.current;
+    const targetCycleTime = workspaceTargetCycleTime || 0;
     if (isPercentileCategory(currentFilter)) {
       const percentileValue = video.percentile?.toFixed(1);
-      switch (currentFilter) {
-        case "fast-cycles":
-          return `\u26A1 Fast Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
-        case "slow-cycles":
-          return `\u{1F40C} Slow Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
-        case "longest-idles":
-          return `\u23F0 Long Idle ${percentileValue ? `(${percentileValue}%)` : ""}`;
-        default:
-          return video.description || "Performance Clip";
+      const cycleTime = video.cycle_time_seconds || 0;
+      if (currentFilter === "fast-cycles" || currentFilter === "slow-cycles") {
+        if (targetCycleTime > 0 && cycleTime > 0) {
+          if (cycleTime < targetCycleTime) {
+            return `\u26A1 Fast Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+          } else {
+            return `\u{1F40C} Slow Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+          }
+        } else {
+          switch (currentFilter) {
+            case "fast-cycles":
+              return `\u26A1 Fast Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+            case "slow-cycles":
+              return `\u{1F40C} Slow Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+          }
+        }
       }
+      if (currentFilter === "longest-idles") {
+        return `\u23F0 Long Idle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+      }
+      return video.description || "Performance Clip";
     }
     switch (video.type) {
       case "low_value":
@@ -29855,7 +30006,7 @@ var BottlenecksContent = ({
       default:
         return video.description || "";
     }
-  };
+  }, [workspaceTargetCycleTime]);
   if (!dashboardConfig?.s3Config) {
     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" }),
@@ -30127,12 +30278,32 @@ var BottlenecksContent = ({
               badgeText = "Idle";
               badgeColor = "bg-red-100 text-red-700";
             } else {
-              if (clip.severity === "high" || clip.duration && clip.duration > 60) {
-                badgeText = "Slow";
-                badgeColor = "bg-red-100 text-red-700";
+              const parseCycleTime2 = (value) => {
+                if (typeof value === "number") return isNaN(value) ? null : value;
+                if (typeof value === "string") {
+                  const parsed = parseFloat(value);
+                  return isNaN(parsed) ? null : parsed;
+                }
+                return null;
+              };
+              const clipCycleTime = parseCycleTime2(clip.cycle_time_seconds) ?? parseCycleTime2(clip.duration) ?? parseCycleTime2(clip.original_task_metadata?.cycle_time);
+              const targetCycleTime = workspaceTargetCycleTime && workspaceTargetCycleTime > 0 ? workspaceTargetCycleTime : null;
+              if (clipCycleTime && targetCycleTime) {
+                if (clipCycleTime <= targetCycleTime) {
+                  badgeText = "Fast";
+                  badgeColor = "bg-green-100 text-green-700";
+                } else {
+                  badgeText = "Slow";
+                  badgeColor = "bg-red-100 text-red-700";
+                }
               } else {
-                badgeText = "Average";
-                badgeColor = "bg-yellow-100 text-yellow-700";
+                if (clip.severity === "high" || clip.duration && clip.duration > 60) {
+                  badgeText = "Slow";
+                  badgeColor = "bg-red-100 text-red-700";
+                } else {
+                  badgeText = "Average";
+                  badgeColor = "bg-yellow-100 text-yellow-700";
+                }
               }
             }
             return /* @__PURE__ */ jsx(
@@ -30175,6 +30346,7 @@ var BottlenecksContent = ({
             workspaceId,
             date: date || getOperationalDate(timezone),
             shift: effectiveShift,
+            targetCycleTime: workspaceTargetCycleTime,
             onFilterChange: (filterId) => {
               updateActiveFilter(filterId);
               const category = categoriesToShow.find((cat) => cat.type === filterId);
@@ -41462,7 +41634,6 @@ function HomeView({
   factoryName = "Simba Beer - Line 1"
 }) {
   const [isHydrated, setIsHydrated] = useState(false);
-  const [selectedLineId, setSelectedLineId] = useState(factoryViewId);
   const [isChangingFilter, setIsChangingFilter] = useState(false);
   const [errorMessage, setErrorMessage] = useState(null);
   const [displayNamesInitialized, setDisplayNamesInitialized] = useState(false);
@@ -41479,9 +41650,36 @@ function HomeView({
     }
     return [factoryViewId, ...allLineIds];
   }, [factoryViewId, allLineIds, isSupervisor, hasMultipleLines]);
+  const LINE_FILTER_STORAGE_KEY = "optifye_home_line_filter";
+  const [selectedLineId, setSelectedLineId] = useState(() => {
+    if (typeof window === "undefined") {
+      return factoryViewId;
+    }
+    try {
+      const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
+      if (savedLineId) {
+        const allAvailableIds = [factoryViewId, ...allLineIds];
+        if (allAvailableIds.includes(savedLineId)) {
+          return savedLineId;
+        }
+      }
+    } catch (error) {
+      console.warn("Failed to read line filter from sessionStorage:", error);
+    }
+    return factoryViewId;
+  });
   useEffect(() => {
     if (user) {
       if (isSupervisor && allLineIds.length > 0) {
+        try {
+          const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
+          if (savedLineId && allLineIds.includes(savedLineId)) {
+            setSelectedLineId(savedLineId);
+            return;
+          }
+        } catch (error) {
+          console.warn("Failed to read line filter from sessionStorage:", error);
+        }
         setSelectedLineId(allLineIds[0]);
       }
     }
@@ -41562,6 +41760,12 @@ function HomeView({
     }
     return allActiveBreaks.filter((breakItem) => breakItem.lineId === selectedLineId);
   }, [allActiveBreaks, selectedLineId, factoryViewId]);
+  const [breakNotificationsDismissed, setBreakNotificationsDismissed] = useState(false);
+  useEffect(() => {
+    if (activeBreaks.length > 0) {
+      setBreakNotificationsDismissed(false);
+    }
+  }, [activeBreaks.length]);
   const showBottleneckNotification = useCallback(async (bottleneck) => {
     try {
       console.log("\u{1F514} [Notification] Raw bottleneck data:", bottleneck);
@@ -41860,7 +42064,12 @@ function HomeView({
   const handleLineChange = useCallback((value) => {
     setIsChangingFilter(true);
     setSelectedLineId(value);
-  }, []);
+    try {
+      sessionStorage.setItem(LINE_FILTER_STORAGE_KEY, value);
+    } catch (error) {
+      console.warn("Failed to save line filter to sessionStorage:", error);
+    }
+  }, [LINE_FILTER_STORAGE_KEY]);
   useEffect(() => {
     if (!metricsLoading && !kpisLoading && isChangingFilter) {
       if (workspaceMetrics.length > 0 || selectedLineId === factoryViewId) {
@@ -41973,7 +42182,8 @@ function HomeView({
           {
             activeBreaks,
             lineNames,
-            isVisible: !breaksLoading && !breaksError
+            isVisible: !breaksLoading && !breaksError && !breakNotificationsDismissed,
+            onDismiss: () => setBreakNotificationsDismissed(true)
           }
         ),
         /* @__PURE__ */ jsx(

package/package.json CHANGED Viewed

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