@optifye/dashboard-core 6.9.5 → 6.9.7

package/dist/index.mjs

@@ -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';
@@ -9573,8 +9573,13 @@ var getAllWorkspaceDisplayNamesAsync = async (companyId, lineId) => {
     return { ...runtimeWorkspaceDisplayNames[lineId] };
   }
   const allNames = {};
-  Object.values(runtimeWorkspaceDisplayNames).forEach((lineNames) => {
-    Object.assign(allNames, lineNames);
+  Object.entries(runtimeWorkspaceDisplayNames).forEach(([lineId2, lineNames]) => {
+    Object.entries(lineNames).forEach(([workspaceId, displayName]) => {
+      allNames[`${lineId2}_${workspaceId}`] = displayName;
+      if (!allNames[workspaceId]) {
+        allNames[workspaceId] = displayName;
+      }
+    });
   });
   return allNames;
 };
@@ -24699,7 +24704,11 @@ var VideoGridView = React23__default.memo(({
                 isVeryLowEfficiency,
                 cropping: workspaceCropping,
                 canvasFps: canvasConfig?.fps,
-                displayName: displayNames[workspace.workspace_name] || workspace.workspace_name,
+                displayName: (
+                  // Create line-aware lookup key: lineId_workspaceName
+                  // This ensures correct mapping when multiple lines have same workspace names
+                  displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id)
+                ),
                 useRAF: canvasConfig?.useRAF,
                 compact: !selectedLine,
                 onMouseEnter: onWorkspaceHover ? () => onWorkspaceHover(workspaceId) : void 0,
@@ -24748,7 +24757,7 @@ var MapGridView = React23__default.memo(({
       efficiency: workspace.efficiency,
       action_count: workspace.action_count
     });
-    const displayName = displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+    const displayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
     const navParams = getWorkspaceNavigationParams(workspaceId, displayName, workspace.line_id);
     router.push(`/workspace/${workspaceId}${navParams}`);
   }, [router, displayNames]);
@@ -24777,7 +24786,7 @@ var MapGridView = React23__default.memo(({
           if (!workspace) return null;
           const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
           getPerformanceColor(workspace.efficiency);
-          const workspaceDisplayName = displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+          const workspaceDisplayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
           return /* @__PURE__ */ jsx(
             motion.div,
             {
@@ -25623,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;
@@ -25643,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 {
@@ -26669,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)
@@ -27680,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" });
@@ -27738,7 +27843,8 @@ var FileManagerFilters = ({
   workspaceId,
   date,
   shift,
-  className = ""
+  className = "",
+  targetCycleTime = null
 }) => {
   const [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set());
   const [startTime, setStartTime] = useState("");
@@ -27758,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");
@@ -27995,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({
@@ -28045,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
           };
         })
       },
@@ -28075,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
           };
         })
       }
@@ -28204,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 }) })
             ] })
@@ -28871,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);
@@ -29813,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":
@@ -29846,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" }),
@@ -30118,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(
@@ -30166,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);
@@ -41453,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);
@@ -41470,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]);
       }
     }
@@ -41507,11 +41714,12 @@ function HomeView({
     };
     initDisplayNames();
   }, [selectedLineId, factoryViewId, allLineIds]);
+  const displayNameLineId = selectedLineId === factoryViewId ? void 0 : selectedLineId;
   const {
     displayNames: workspaceDisplayNames,
     loading: displayNamesLoading,
     error: displayNamesError
-  } = useWorkspaceDisplayNames(selectedLineId, void 0);
+  } = useWorkspaceDisplayNames(displayNameLineId, void 0);
   useCallback(() => {
     console.log("Refetching KPIs after line metrics update");
   }, []);
@@ -41552,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);
@@ -41850,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) {
@@ -41875,7 +42094,7 @@ function HomeView({
       /* @__PURE__ */ jsx(SelectContent, { className: "z-50 bg-white shadow-lg border border-gray-200 rounded-md text-xs sm:text-sm", children: availableLineIds.map((id3) => /* @__PURE__ */ jsx(SelectItem, { value: id3, children: lineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
     ] });
   }, [availableLineIds, handleLineChange, selectedLineId, lineNames, factoryViewId, allLineIds.length]);
-  const isInitialLoading = !isHydrated || displayNamesLoading || !displayNamesInitialized && displayNamesLoading;
+  const isInitialLoading = !isHydrated || displayNamesLoading || !displayNamesInitialized;
   const isDataLoading = metricsLoading || kpisLoading;
   if (isInitialLoading) {
     return /* @__PURE__ */ jsx(LoadingPageCmp, { message: "Loading Dashboard..." });
@@ -41963,7 +42182,8 @@ function HomeView({
           {
             activeBreaks,
             lineNames,
-            isVisible: !breaksLoading && !breaksError
+            isVisible: !breaksLoading && !breaksError && !breakNotificationsDismissed,
+            onDismiss: () => setBreakNotificationsDismissed(true)
           }
         ),
         /* @__PURE__ */ jsx(