@optifye/dashboard-core 6.11.24 → 6.11.26

package/dist/index.js

@@ -3016,6 +3016,7 @@ var AuthService = class {
       scope_ttl_seconds: enrichedUser.scope_ttl_seconds,
       access_scope: enrichedUser.access_scope,
       company_id: enrichedUser.company_id,
+      company: enrichedUser.company,
       first_login_completed: enrichedUser.profile.first_login_completed,
       properties: {
         company_id: enrichedUser.company_id,
@@ -13284,7 +13285,7 @@ var parseEfficiencyLegend = (legend) => {
     critical_threshold: coerce(legend.critical_threshold, DEFAULT_EFFICIENCY_LEGEND.critical_threshold)
   };
 };
-var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds }) => {
+var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, lineIds, userAccessibleLineIds }) => {
   const { supabaseUrl, supabaseKey } = useDashboardConfig();
   const entityConfig = useEntityConfig();
   const databaseConfig = useDatabaseConfig();
@@ -13301,9 +13302,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
     return getConfiguredLineIds(entityConfig);
   }, [entityConfig]);
   const targetFactoryLineIds = React142.useMemo(() => {
-    const sourceLineIds = userAccessibleLineIds !== void 0 ? userAccessibleLineIds : configuredLineIds;
+    const sourceLineIds = lineIds !== void 0 ? lineIds : userAccessibleLineIds !== void 0 ? userAccessibleLineIds : configuredLineIds;
     return Array.from(new Set((sourceLineIds || []).filter(Boolean)));
-  }, [userAccessibleLineIds, configuredLineIds]);
+  }, [lineIds, userAccessibleLineIds, configuredLineIds]);
   const { shiftConfig: staticShiftConfig } = useDashboardConfig();
   const {
     shiftConfigMap: multiLineShiftConfigMap,
@@ -13356,6 +13357,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
   const operationalShiftKeyRef = React142.useRef(operationalShiftKey);
   const configuredLineIdsRef = React142.useRef(configuredLineIds);
   const userAccessibleLineIdsRef = React142.useRef(userAccessibleLineIds);
+  const explicitLineIdsRef = React142.useRef(lineIds);
   React142.useEffect(() => {
     onLineMetricsUpdateRef.current = onLineMetricsUpdate;
   }, [onLineMetricsUpdate]);
@@ -13371,6 +13373,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
   React142.useEffect(() => {
     userAccessibleLineIdsRef.current = userAccessibleLineIds;
   }, [userAccessibleLineIds]);
+  React142.useEffect(() => {
+    explicitLineIdsRef.current = lineIds;
+  }, [lineIds]);
   const companySpecificMetricsTable = React142.useMemo(
     () => getCompanyMetricsTableName(entityConfig.companyId, "performance_metrics"),
     [entityConfig.companyId]
@@ -13721,6 +13726,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
     isFactoryView,
     multiLineShiftConfigMap,
     staticShiftConfig,
+    lineIds,
     userAccessibleLineIds,
     effectiveWorkspaceConfig,
     shiftLoading,
@@ -13838,7 +13844,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
       logDebug("[useDashboardMetrics] Setting up group subscriptions:", {
         groupCount: currentShiftGroups.length
       });
-      const targetFactoryLineIdsForSubscriptions = currentUserAccessibleLineIds !== void 0 ? currentUserAccessibleLineIds : currentConfiguredLineIds;
+      const targetFactoryLineIdsForSubscriptions = explicitLineIdsRef.current !== void 0 ? explicitLineIdsRef.current : currentUserAccessibleLineIds !== void 0 ? currentUserAccessibleLineIds : currentConfiguredLineIds;
       const targetFactoryLineIdSet = new Set(
         (targetFactoryLineIdsForSubscriptions || []).filter(Boolean)
       );
@@ -14009,7 +14015,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
       });
       const currentShiftDetails = shiftConfig ? getCurrentShift(defaultTimezone, shiftConfig) : getCurrentShift(defaultTimezone, staticShiftConfig);
       const operationalDateForSubscription = currentShiftDetails.date;
-      const targetLineIds = isFactory ? currentUserAccessibleLineIds || currentConfiguredLineIds : [currentLineIdToUse];
+      const targetLineIds = isFactory ? explicitLineIdsRef.current || currentUserAccessibleLineIds || currentConfiguredLineIds : [currentLineIdToUse];
       const filteredLineIds = targetLineIds.filter((id3) => id3 && id3 !== factoryViewIdentifier);
       if (filteredLineIds.length === 0) {
         logDebug("[useDashboardMetrics] Realtime setup skipped: no line IDs after filtering", {
@@ -20251,6 +20257,17 @@ function useCompanyHasVlmEnabledLine(options = {}) {
   };
 }
 
+// src/lib/hooks/useCompanyFastSlowClipFiltersEnabled.ts
+function useCompanyFastSlowClipFiltersEnabled() {
+  const { user, loading } = useAuth();
+  const company = user?.company || user?.properties?.company;
+  const explicitValue = company?.enable_fast_slow_clip_filters;
+  return {
+    isFastSlowClipFiltersEnabled: typeof explicitValue === "boolean" ? explicitValue : true,
+    isResolved: !loading || typeof explicitValue === "boolean"
+  };
+}
+
 // src/lib/utils/api.ts
 var apiUtils = {
   /**
@@ -20423,13 +20440,15 @@ var buildKPIsFromLineMetricsRow = (row) => {
 };
 var aggregateKPIsFromLineMetricsRows = (rows) => {
   if (!rows || rows.length === 0) return createDefaultKPIs();
-  const currentOutputSum = rows.reduce((sum, row) => sum + toNumber(row.current_output), 0);
-  const lineThresholdSum = rows.reduce((sum, row) => sum + toNumber(row.line_threshold), 0);
-  const idealOutputSum = rows.reduce(
+  const eligibleRows = rows.filter((row) => toNumber(row?.avg_efficiency) >= 5);
+  if (eligibleRows.length === 0) return createDefaultKPIs();
+  const currentOutputSum = eligibleRows.reduce((sum, row) => sum + toNumber(row.current_output), 0);
+  const lineThresholdSum = eligibleRows.reduce((sum, row) => sum + toNumber(row.line_threshold), 0);
+  const idealOutputSum = eligibleRows.reduce(
     (sum, row) => sum + (toNumber(row.ideal_output) || toNumber(row.line_threshold)),
     0
   );
-  const efficiencyValues = rows.map((row) => {
+  const efficiencyValues = eligibleRows.map((row) => {
     const value = row?.avg_efficiency;
     if (typeof value === "number" && Number.isFinite(value)) return value;
     if (typeof value === "string" && value.trim() !== "") {
@@ -20439,10 +20458,10 @@ var aggregateKPIsFromLineMetricsRows = (rows) => {
     return null;
   }).filter((value) => value !== null);
   const avgEfficiency = efficiencyValues.length > 0 ? efficiencyValues.reduce((sum, value) => sum + value, 0) / efficiencyValues.length : 0;
-  const numLines = rows.length;
-  const avgCycleTime = numLines > 0 ? rows.reduce((sum, row) => sum + toNumber(row.avg_cycle_time), 0) / numLines : 0;
-  const totalUnderperforming = rows.reduce((sum, row) => sum + toNumber(row.underperforming_workspaces), 0);
-  const totalWorkspaces = rows.reduce((sum, row) => sum + toNumber(row.total_workspaces), 0);
+  const numLines = eligibleRows.length;
+  const avgCycleTime = numLines > 0 ? eligibleRows.reduce((sum, row) => sum + toNumber(row.avg_cycle_time), 0) / numLines : 0;
+  const totalUnderperforming = eligibleRows.reduce((sum, row) => sum + toNumber(row.underperforming_workspaces), 0);
+  const totalWorkspaces = eligibleRows.reduce((sum, row) => sum + toNumber(row.total_workspaces), 0);
   return {
     underperformingWorkers: {
       current: totalUnderperforming,
@@ -34598,6 +34617,8 @@ var logDebug2 = (...args) => {
 var VideoGridView = React142__namespace.default.memo(({
   workspaces,
   selectedLine,
+  lineNames = {},
+  lineOrder = [],
   className = "",
   legend,
   videoSources = {},
@@ -34700,6 +34721,44 @@ var VideoGridView = React142__namespace.default.memo(({
       }
     }) : workspaces;
   }, [workspaces, selectedLine]);
+  const sortedWorkspaces = React142.useMemo(() => {
+    return [...filteredWorkspaces].sort((a, b) => {
+      if (a.line_id !== b.line_id) {
+        return (a.line_id || "").localeCompare(b.line_id || "");
+      }
+      const aMatch = a.workspace_name.match(/WS(\d+)/);
+      const bMatch = b.workspace_name.match(/WS(\d+)/);
+      if (aMatch && bMatch) {
+        const aNum = parseInt(aMatch[1], 10);
+        const bNum = parseInt(bMatch[1], 10);
+        return aNum - bNum;
+      }
+      return a.workspace_name.localeCompare(b.workspace_name);
+    });
+  }, [filteredWorkspaces]);
+  const lineGroups = React142.useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    sortedWorkspaces.forEach((workspace) => {
+      const lineId = workspace.line_id || "unknown";
+      const existing = grouped.get(lineId);
+      if (existing) {
+        existing.push(workspace);
+        return;
+      }
+      grouped.set(lineId, [workspace]);
+    });
+    const sortedRemainingLineIds = Array.from(grouped.keys()).sort((a, b) => a.localeCompare(b));
+    const orderedLineIds = [
+      ...lineOrder.filter((lineId) => grouped.has(lineId)),
+      ...sortedRemainingLineIds.filter((lineId) => !lineOrder.includes(lineId))
+    ];
+    return orderedLineIds.map((lineId) => ({
+      lineId,
+      lineName: lineNames[lineId] || `Line ${lineId.substring(0, 4)}`,
+      workspaces: grouped.get(lineId) || []
+    }));
+  }, [sortedWorkspaces, lineOrder, lineNames]);
+  lineGroups.length > 1;
   const streamsReady = !videoStreamsLoading;
   const calculateOptimalGrid = React142.useCallback(() => {
     if (!containerRef.current) return;
@@ -34863,108 +34922,130 @@ var VideoGridView = React142__namespace.default.memo(({
       stream_source: isR2Stream ? "r2" : "media_config"
     });
   }, []);
+  const workspaceCards = React142.useMemo(() => {
+    return sortedWorkspaces.map((workspace) => {
+      const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+      const workspaceKey = `${workspace.line_id || "unknown"}-${workspaceId}`;
+      const isVisible = visibleWorkspaces.has(workspaceId);
+      const isVeryLowEfficiency = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
+      const workspaceCropping = getWorkspaceCropping(workspaceId, workspace.workspace_name);
+      const workspaceStream = videoStreamsByWorkspaceId?.[workspaceId];
+      const lastSeenLabel = workspace.workspace_uuid ? lastSeenByWorkspaceId[workspace.workspace_uuid]?.timeSinceLastUpdate : void 0;
+      const r2Url = workspaceStream?.hls_url;
+      const fallbackUrl = getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id);
+      const hasR2Stream = Boolean(r2Url);
+      const useFallback = r2FallbackWorkspaces.has(workspaceId) || streamsReady && !hasR2Stream;
+      const hlsUrl = useFallback ? fallbackUrl : r2Url ?? "";
+      const isR2Stream = !useFallback && hasR2Stream;
+      const canAttemptR2 = hasR2Stream && !r2FallbackWorkspaces.has(workspaceId);
+      const shouldPlay = isVisible && Boolean(hlsUrl) && (!failedStreams.has(workspaceId) || canAttemptR2);
+      return {
+        workspace,
+        workspaceId,
+        workspaceKey,
+        isVisible,
+        isVeryLowEfficiency,
+        workspaceCropping,
+        fallbackUrl,
+        hlsUrl,
+        isR2Stream,
+        shouldPlay,
+        lastSeenLabel
+      };
+    });
+  }, [
+    sortedWorkspaces,
+    visibleWorkspaces,
+    getWorkspaceCropping,
+    videoStreamsByWorkspaceId,
+    lastSeenByWorkspaceId,
+    getWorkspaceHlsUrl,
+    r2FallbackWorkspaces,
+    streamsReady,
+    failedStreams
+  ]);
+  React142.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    workspaceCards.forEach((card) => {
+      map.set(card.workspaceKey, card);
+    });
+    return map;
+  }, [workspaceCards]);
+  const croppedActiveCount = React142.useMemo(() => {
+    return workspaceCards.reduce((count, card) => {
+      if (card.shouldPlay && card.workspaceCropping) {
+        return count + 1;
+      }
+      return count;
+    }, 0);
+  }, [workspaceCards]);
+  const throttleCropping = croppedActiveCount > 10;
+  const effectiveCanvasFps = throttleCropping ? 10 : canvasConfig?.fps;
+  const effectiveUseRAF = throttleCropping ? false : canvasConfig?.useRAF;
   const displayMinuteBucket = Math.floor(Date.now() / 6e4);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full w-full p-3 sm:p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const renderWorkspaceCard = React142.useCallback((card, className2) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "grid h-full w-full gap-3 sm:gap-2",
-      style: {
-        gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-        gridTemplateRows: `repeat(${gridRows}, 1fr)`,
-        gridAutoFlow: "row"
-      },
-      children: (() => {
-        const sortedWorkspaces = [...filteredWorkspaces].sort((a, b) => {
-          if (a.line_id !== b.line_id) {
-            return (a.line_id || "").localeCompare(b.line_id || "");
-          }
-          const aMatch = a.workspace_name.match(/WS(\d+)/);
-          const bMatch = b.workspace_name.match(/WS(\d+)/);
-          if (aMatch && bMatch) {
-            const aNum = parseInt(aMatch[1]);
-            const bNum = parseInt(bMatch[1]);
-            return aNum - bNum;
-          }
-          return a.workspace_name.localeCompare(b.workspace_name);
-        });
-        const workspaceCards = sortedWorkspaces.map((workspace) => {
-          const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
-          `${workspace.line_id || "unknown"}-${workspaceId}`;
-          const isVisible = visibleWorkspaces.has(workspaceId);
-          const isVeryLowEfficiency = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
-          const workspaceCropping = getWorkspaceCropping(workspaceId, workspace.workspace_name);
-          const workspaceStream = videoStreamsByWorkspaceId?.[workspaceId];
-          const lastSeenLabel = workspace.workspace_uuid ? lastSeenByWorkspaceId[workspace.workspace_uuid]?.timeSinceLastUpdate : void 0;
-          const r2Url = workspaceStream?.hls_url;
-          const fallbackUrl = getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id);
-          const hasR2Stream = Boolean(r2Url);
-          const useFallback = r2FallbackWorkspaces.has(workspaceId) || streamsReady && !hasR2Stream;
-          const hlsUrl = useFallback ? fallbackUrl : r2Url ?? "";
-          const isR2Stream = !useFallback && hasR2Stream;
-          const canAttemptR2 = hasR2Stream && !r2FallbackWorkspaces.has(workspaceId);
-          const shouldPlay = isVisible && Boolean(hlsUrl) && (!failedStreams.has(workspaceId) || canAttemptR2);
-          return {
-            workspace,
-            workspaceId,
-            isVisible,
-            isVeryLowEfficiency,
-            workspaceCropping,
-            fallbackUrl,
-            hlsUrl,
-            isR2Stream,
-            shouldPlay,
-            lastSeenLabel
-          };
-        });
-        const croppedActiveCount = workspaceCards.reduce((count, card) => {
-          if (card.shouldPlay && card.workspaceCropping) {
-            return count + 1;
-          }
-          return count;
-        }, 0);
-        const throttleCropping = croppedActiveCount > 10;
-        const effectiveCanvasFps = throttleCropping ? 10 : canvasConfig?.fps;
-        const effectiveUseRAF = throttleCropping ? false : canvasConfig?.useRAF;
-        return workspaceCards.map((card) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-workspace-id": card.workspaceId,
-            className: "workspace-card relative w-full h-full",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-              VideoCard,
-              {
-                workspace: card.workspace,
-                hlsUrl: card.hlsUrl,
-                shouldPlay: card.shouldPlay,
-                onClick: () => handleWorkspaceClick(card.workspace),
-                onFatalError: () => handleStreamError(card.workspaceId, {
-                  isR2Stream: card.isR2Stream,
-                  fallbackUrl: card.fallbackUrl
-                }),
-                isVeryLowEfficiency: card.isVeryLowEfficiency,
-                legend: effectiveLegend,
-                cropping: card.workspaceCropping,
-                canvasFps: effectiveCanvasFps,
-                displayName: (
-                  // Create line-aware lookup key: lineId_workspaceName
-                  // This ensures correct mapping when multiple lines have same workspace names
-                  displayNames[`${card.workspace.line_id}_${card.workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
-                  getWorkspaceDisplayName(card.workspace.workspace_name, card.workspace.line_id)
-                ),
-                lastSeenLabel: card.lastSeenLabel,
-                useRAF: effectiveUseRAF,
-                displayMinuteBucket,
-                compact: !selectedLine,
-                onMouseEnter: onWorkspaceHover ? () => onWorkspaceHover(card.workspaceId) : void 0,
-                onMouseLeave: onWorkspaceHoverEnd ? () => onWorkspaceHoverEnd(card.workspaceId) : void 0
-              }
-            ) })
+      "data-workspace-id": card.workspaceId,
+      className: className2,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        VideoCard,
+        {
+          workspace: card.workspace,
+          hlsUrl: card.hlsUrl,
+          shouldPlay: card.shouldPlay,
+          onClick: () => handleWorkspaceClick(card.workspace),
+          onFatalError: () => handleStreamError(card.workspaceId, {
+            isR2Stream: card.isR2Stream,
+            fallbackUrl: card.fallbackUrl
+          }),
+          isVeryLowEfficiency: card.isVeryLowEfficiency,
+          legend: effectiveLegend,
+          cropping: card.workspaceCropping,
+          canvasFps: effectiveCanvasFps,
+          displayName: displayNames[`${card.workspace.line_id}_${card.workspace.workspace_name}`] || getWorkspaceDisplayName(card.workspace.workspace_name, card.workspace.line_id),
+          lastSeenLabel: card.lastSeenLabel,
+          useRAF: effectiveUseRAF,
+          displayMinuteBucket,
+          compact: !selectedLine,
+          onMouseEnter: onWorkspaceHover ? () => onWorkspaceHover(card.workspaceId) : void 0,
+          onMouseLeave: onWorkspaceHoverEnd ? () => onWorkspaceHoverEnd(card.workspaceId) : void 0
+        }
+      ) })
+    },
+    card.workspaceKey
+  ), [
+    displayNames,
+    displayMinuteBucket,
+    effectiveCanvasFps,
+    effectiveLegend,
+    effectiveUseRAF,
+    getWorkspaceDisplayName,
+    handleStreamError,
+    handleWorkspaceClick,
+    onWorkspaceHover,
+    onWorkspaceHoverEnd,
+    selectedLine
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "h-full w-full px-1 sm:px-2 py-1 sm:py-2",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "grid h-full w-full gap-1.5 sm:gap-2",
+          style: {
+            gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
+            gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+            gridAutoFlow: "row"
           },
-          card.workspaceId
-        ));
-      })()
+          children: workspaceCards.map((card) => renderWorkspaceCard(card, "workspace-card relative w-full h-full"))
+        }
+      )
     }
-  ) }) });
+  ) });
 });
 VideoGridView.displayName = "VideoGridView";
 var MapGridView = React142__namespace.default.memo(({
@@ -38157,14 +38238,15 @@ var HlsVideoPlayer = React142.forwardRef(({
     };
   }, [effectiveSrc, initializePlayer, cleanupBlobUrl]);
   React142.useEffect(() => {
-    if (videoRef.current) {
-      if (autoplay) {
-        videoRef.current.play().catch((err) => {
-          console.warn("[HlsVideoPlayer] Autoplay failed:", err);
-        });
-      }
+    if (!videoRef.current || !autoplay || !effectiveSrc) {
+      return;
     }
-  }, [autoplay]);
+    videoRef.current.play().catch((err) => {
+      if (err?.name !== "AbortError") {
+        console.warn("[HlsVideoPlayer] Autoplay failed:", err);
+      }
+    });
+  }, [autoplay, effectiveSrc]);
   const resetControlsTimeout = React142.useCallback(() => {
     if (controlsPinned) {
       setShowControls(true);
@@ -40085,7 +40167,8 @@ var FileManagerFilters = ({
   snapshotClipId,
   className = "",
   targetCycleTime = null,
-  idleTimeVlmEnabled = false
+  idleTimeVlmEnabled = false,
+  showPercentileCycleFilters = true
 }) => {
   const [expandedNodes, setExpandedNodes] = React142.useState(/* @__PURE__ */ new Set());
   const [startTime, setStartTime] = React142.useState("");
@@ -40364,6 +40447,9 @@ var FileManagerFilters = ({
     }
   }, [ensureAllIdleTimeClipMetadataLoaded]);
   const fetchPercentileClips = React142.useCallback(async (type) => {
+    if (!showPercentileCycleFilters && type !== "idle-times") {
+      return;
+    }
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for percentile clips fetch");
       return;
@@ -40410,7 +40496,7 @@ var FileManagerFilters = ({
     } catch (error) {
       console.error(`[FileManager] Error fetching ${type} clips:`, error);
     }
-  }, [workspaceId, date, shift, filterState.percentile, supabase]);
+  }, [workspaceId, date, shift, filterState.percentile, showPercentileCycleFilters, supabase]);
   const percentileCountsKey = React142.useMemo(() => {
     if (!workspaceId || !date || shift === void 0) {
       return null;
@@ -40418,7 +40504,7 @@ var FileManagerFilters = ({
     return `${workspaceId}:${date}:${shift}:${filterState.percentile}`;
   }, [workspaceId, date, shift, filterState.percentile]);
   React142.useEffect(() => {
-    if (!percentileCountsKey) {
+    if (!showPercentileCycleFilters || !percentileCountsKey) {
       percentileCountsKeyRef.current = null;
       percentilePrefetchRef.current = { key: null, types: /* @__PURE__ */ new Set() };
       setPercentileCounts({
@@ -40438,8 +40524,11 @@ var FileManagerFilters = ({
       "slow-cycles": null
     });
     setPercentileClips({});
-  }, [percentileCountsKey]);
+  }, [showPercentileCycleFilters, percentileCountsKey]);
   React142.useEffect(() => {
+    if (!showPercentileCycleFilters) {
+      return;
+    }
     if (!prefetchedPercentileCounts || !percentileCountsKey) {
       return;
     }
@@ -40454,8 +40543,11 @@ var FileManagerFilters = ({
       "fast-cycles": typeof prefetchedPercentileCounts.counts["fast-cycles"] === "number" ? prefetchedPercentileCounts.counts["fast-cycles"] : prev["fast-cycles"],
       "slow-cycles": typeof prefetchedPercentileCounts.counts["slow-cycles"] === "number" ? prefetchedPercentileCounts.counts["slow-cycles"] : prev["slow-cycles"]
     }));
-  }, [prefetchedPercentileCounts, percentileCountsKey, filterState.percentile]);
+  }, [showPercentileCycleFilters, prefetchedPercentileCounts, percentileCountsKey, filterState.percentile]);
   const fetchPercentileCounts = React142.useCallback(async (options) => {
+    if (!showPercentileCycleFilters) {
+      return;
+    }
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for percentile counts fetch");
       return;
@@ -40509,9 +40601,9 @@ var FileManagerFilters = ({
     } catch (error) {
       console.error("[FileManager] Error fetching percentile counts:", error);
     }
-  }, [workspaceId, date, shift, filterState.percentile, supabase, percentileCounts, percentileClips, fetchPercentileClips]);
+  }, [workspaceId, date, shift, filterState.percentile, showPercentileCycleFilters, supabase, percentileCounts, percentileClips, fetchPercentileClips]);
   React142.useEffect(() => {
-    if (!isReady || !percentileCountsKey) {
+    if (!showPercentileCycleFilters || !isReady || !percentileCountsKey) {
       return;
     }
     const schedule = () => {
@@ -40522,13 +40614,13 @@ var FileManagerFilters = ({
     } else {
       setTimeout(schedule, 0);
     }
-  }, [isReady, percentileCountsKey, fetchPercentileCounts]);
+  }, [showPercentileCycleFilters, isReady, percentileCountsKey, fetchPercentileCounts]);
   const shouldShowCategory = React142.useCallback((categoryId) => {
     switch (categoryId) {
       case "fast-cycles":
-        return filterState.showFastCycles;
+        return showPercentileCycleFilters && filterState.showFastCycles;
       case "slow-cycles":
-        return filterState.showSlowCycles;
+        return showPercentileCycleFilters && filterState.showSlowCycles;
       case "longest-idles":
         return false;
       // filterState.showLongestIdles; // Temporarily disabled
@@ -40541,7 +40633,7 @@ var FileManagerFilters = ({
       default:
         return true;
     }
-  }, [filterState]);
+  }, [filterState, showPercentileCycleFilters]);
   const getPercentileIcon = React142.useCallback((type, isExpanded, colorClasses) => {
     const iconMap = {
       "fast-cycles": { icon: lucideReact.TrendingUp, color: "text-green-600" },
@@ -40712,7 +40804,7 @@ var FileManagerFilters = ({
     const filteredSlowCycles = (percentileClips["slow-cycles"] || []).filter((clip) => isClipInTimeRange(clip.creation_timestamp || ""));
     const fastCount = typeof percentileCounts["fast-cycles"] === "number" ? percentileCounts["fast-cycles"] : null;
     const slowCount = typeof percentileCounts["slow-cycles"] === "number" ? percentileCounts["slow-cycles"] : null;
-    const percentileCategories = [
+    const percentileCategories = showPercentileCycleFilters ? [
       {
         id: "fast-cycles",
         label: "Fast Cycles",
@@ -40810,7 +40902,7 @@ var FileManagerFilters = ({
           };
         })
       } */
-    ];
+    ] : [];
     const orderedIds = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
     orderedIds.forEach((orderedId) => {
       const percentileCategory = percentileCategories.find((cat) => cat.id === orderedId);
@@ -40835,7 +40927,7 @@ var FileManagerFilters = ({
       }
     });
     return tree;
-  }, [categories, expandedNodes, counts, clipMetadata, percentileCounts, percentileClips, shouldShowCategory, getPercentileIcon, isClipInTimeRange, isTimeFilterActive]);
+  }, [categories, expandedNodes, counts, clipMetadata, percentileCounts, percentileClips, shouldShowCategory, getPercentileIcon, isClipInTimeRange, isTimeFilterActive, showPercentileCycleFilters]);
   const toggleExpanded = (nodeId) => {
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(nodeId)) {
@@ -40847,10 +40939,10 @@ var FileManagerFilters = ({
         console.log(`[FileManager] Fetching clips for expanded category: ${nodeId}`);
         fetchClipMetadata(nodeId, 1);
       }
-      if (nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+      if (showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
         fetchPercentileClips("fast-cycles");
       }
-      if (nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+      if (showPercentileCycleFilters && nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
         fetchPercentileClips("slow-cycles");
       }
     }
@@ -40868,10 +40960,10 @@ var FileManagerFilters = ({
           console.log(`[FileManager] Fetching clips for expanded category: ${node.id}`);
           fetchClipMetadata(node.id, 1);
         }
-        if (node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+        if (showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
           fetchPercentileClips("fast-cycles");
         }
-        if (node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+        if (showPercentileCycleFilters && node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
           fetchPercentileClips("slow-cycles");
         }
       }
@@ -41309,7 +41401,8 @@ var FileManagerFilters = ({
 };
 var PERCENTILE_PRESETS = [5, 10, 15, 20, 25, 30];
 var AdvancedFilterDialog = ({
-  onApply
+  onApply,
+  showPercentileCycleFilters = true
 }) => {
   const {
     state,
@@ -41376,7 +41469,7 @@ var AdvancedFilterDialog = ({
             )
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-8 overflow-y-auto max-h-[60vh]", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            showPercentileCycleFilters && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-gradient-to-r from-emerald-100 to-blue-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-emerald-600" }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -41469,7 +41562,7 @@ var AdvancedFilterDialog = ({
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-br from-green-50 to-red-50 rounded-xl p-4 space-y-3", children: [
+                showPercentileCycleFilters && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-br from-green-50 to-red-50 rounded-xl p-4 space-y-3", children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-sm font-bold text-gray-700 uppercase tracking-wide flex items-center space-x-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "h-4 w-4 text-emerald-600" }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Performance Extremes" })
@@ -41750,6 +41843,7 @@ var BottlenecksContent = ({
   const supabase = useSupabase();
   const timezone = useAppTimezone();
   const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
+  const { isFastSlowClipFiltersEnabled } = useCompanyFastSlowClipFiltersEnabled();
   const { shiftConfig, isLoading: isShiftConfigLoading } = useDynamicShiftConfig(lineId);
   const { effectiveShift, effectiveDate } = React142.useMemo(() => {
     if (shift !== void 0 && shift !== null && date) {
@@ -41806,12 +41900,16 @@ var BottlenecksContent = ({
   }), []);
   const [initialFilter, setInitialFilter] = React142.useState("");
   const currentIndexRef = React142.useRef(0);
+  const currentClipIdRef = React142.useRef(null);
   const currentPositionRef = React142.useRef(0);
   const currentTotalRef = React142.useRef(0);
   const activeFilterRef = React142.useRef(initialFilter);
   const isMountedRef = React142.useRef(true);
   const fetchInProgressRef = React142.useRef(/* @__PURE__ */ new Set());
   const refreshCountsTimeoutRef = React142.useRef(null);
+  const awaitingNextClipRef = React142.useRef(false);
+  const retryTimeoutRef = React142.useRef(null);
+  const navigationLockRef = React142.useRef(false);
   const [isPlaying, setIsPlaying] = React142.useState(false);
   const [currentTime, setCurrentTime] = React142.useState(0);
   const [duration, setDuration] = React142.useState(0);
@@ -41820,6 +41918,7 @@ var BottlenecksContent = ({
   const [playbackSpeed, setPlaybackSpeed] = React142.useState(1);
   const [currentPosition, setCurrentPosition] = React142.useState(0);
   const [currentTotal, setCurrentTotal] = React142.useState(0);
+  const [playerInstanceNonce, setPlayerInstanceNonce] = React142.useState(0);
   const [isTransitioning, setIsTransitioning] = React142.useState(false);
   const [pendingVideo, setPendingVideo] = React142.useState(null);
   const [isVideoBuffering, setIsVideoBuffering] = React142.useState(false);
@@ -41876,14 +41975,29 @@ var BottlenecksContent = ({
   const [isFullscreen, setIsFullscreen] = React142.useState(false);
   const categoryMetadataRef = React142.useRef([]);
   const currentMetadataIndexRef = React142.useRef(0);
+  const clearRetryTimeout = React142.useCallback(() => {
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+    }
+  }, []);
+  const bumpPlayerInstanceNonce = React142.useCallback(() => {
+    setPlayerInstanceNonce((prev) => prev + 1);
+  }, []);
   const updateActiveFilter = React142.useCallback((newFilter) => {
     console.log(`[BottlenecksContent] Updating active filter: ${activeFilterRef.current} -> ${newFilter}`);
+    awaitingNextClipRef.current = false;
+    navigationLockRef.current = false;
+    clearRetryTimeout();
     setActiveFilter(newFilter);
     activeFilterRef.current = newFilter;
-  }, []);
+  }, [clearRetryTimeout]);
   React142.useEffect(() => {
     currentIndexRef.current = currentIndex;
   }, [currentIndex]);
+  React142.useEffect(() => {
+    currentClipIdRef.current = currentClipId;
+  }, [currentClipId]);
   React142.useEffect(() => {
     currentPositionRef.current = currentPosition;
   }, [currentPosition]);
@@ -42292,8 +42406,11 @@ var BottlenecksContent = ({
     }
   }, [activeFilter, s3ClipsService, mergedCounts, loadFirstVideoForCategory, allVideos, firstClip]);
   const isPercentileCategory = React142.useCallback((categoryId) => {
+    if (!isFastSlowClipFiltersEnabled) {
+      return false;
+    }
     return ["fast-cycles", "slow-cycles", "longest-idles"].includes(categoryId);
-  }, []);
+  }, [isFastSlowClipFiltersEnabled]);
   const getMetadataCacheKey = React142.useCallback((categoryId) => {
     return `${categoryId}-${effectiveDateString}-${effectiveShiftId}-${snapshotDateTime ?? "nosnap"}-${snapshotClipId ?? "nosnap"}`;
   }, [effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId]);
@@ -42325,6 +42442,21 @@ var BottlenecksContent = ({
         return [categoryId];
     }
   }, []);
+  React142.useEffect(() => {
+    if (isFastSlowClipFiltersEnabled) {
+      return;
+    }
+    if (activeFilter !== "fast-cycles" && activeFilter !== "slow-cycles") {
+      return;
+    }
+    const fallbackFilter = ["cycle_completion", "idle_time"].find((type) => (dynamicCounts[type] || 0) > 0) || clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0)?.type || clipTypes[0]?.type;
+    if (!fallbackFilter || fallbackFilter === activeFilter) {
+      return;
+    }
+    setCategoryMetadata([]);
+    categoryMetadataRef.current = [];
+    updateActiveFilter(fallbackFilter);
+  }, [isFastSlowClipFiltersEnabled, activeFilter, dynamicCounts, clipTypes, updateActiveFilter]);
   React142.useCallback((categoryId) => {
     if (isPercentileCategory(categoryId)) {
       return categoryMetadata.length;
@@ -42354,6 +42486,7 @@ var BottlenecksContent = ({
     }
   }, [isNavigating, currentIndex, filteredVideos.length]);
   const clearLoadingState = React142.useCallback(() => {
+    navigationLockRef.current = false;
     setIsTransitioning(false);
     setIsNavigating(false);
     if (loadingTimeoutRef.current) {
@@ -42365,6 +42498,11 @@ var BottlenecksContent = ({
     if (!workspaceId) {
       return;
     }
+    if (!isFastSlowClipFiltersEnabled && (categoryId === "fast-cycles" || categoryId === "slow-cycles")) {
+      setCategoryMetadata([]);
+      categoryMetadataRef.current = [];
+      return;
+    }
     if (!isEffectiveShiftReady) {
       console.log("[BottlenecksContent] Skipping metadata load - shift/date not ready");
       return;
@@ -42517,7 +42655,7 @@ var BottlenecksContent = ({
     } finally {
       setIsCategoryLoading(false);
     }
-  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, supabase]);
+  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, isFastSlowClipFiltersEnabled, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, supabase]);
   React142.useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -42568,8 +42706,12 @@ var BottlenecksContent = ({
   const loadAndPlayClipById = React142.useCallback(async (clipId, categoryId, position, metadataContext) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}, position=${position}`);
+    awaitingNextClipRef.current = false;
+    navigationLockRef.current = true;
+    clearRetryTimeout();
     setIsTransitioning(true);
     setIsInitialLoading(true);
+    setIsNavigating(true);
     setError(null);
     if (videoRef.current?.player) {
       try {
@@ -42667,7 +42809,67 @@ var BottlenecksContent = ({
         clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, loadCategoryMetadata, applyMetadataSnapshot, mergedCounts, isPercentileCategory]);
+  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, clearRetryTimeout, loadCategoryMetadata, applyMetadataSnapshot, mergedCounts, isPercentileCategory]);
+  const restartCurrentClipPlayback = React142.useCallback(() => {
+    if (!currentClipId) {
+      return;
+    }
+    console.log(`[BottlenecksContent] Restarting playback for clip ${currentClipId}`);
+    awaitingNextClipRef.current = false;
+    navigationLockRef.current = true;
+    clearRetryTimeout();
+    setError(null);
+    setIsTransitioning(true);
+    setIsInitialLoading(true);
+    setIsNavigating(true);
+    setIsVideoBuffering(false);
+    bumpPlayerInstanceNonce();
+  }, [currentClipId, clearRetryTimeout, bumpPlayerInstanceNonce]);
+  React142.useEffect(() => {
+    if (!newClipsNotification || !awaitingNextClipRef.current || !s3ClipsService) {
+      return;
+    }
+    const activeCategory = activeFilterRef.current;
+    if (!activeCategory || activeCategory === "all" || isPercentileCategory(activeCategory)) {
+      return;
+    }
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      void (async () => {
+        const incomingClips = [...newClipsNotification.clips].reverse();
+        for (const incomingClip of incomingClips) {
+          if (cancelled || !incomingClip?.id || incomingClip.id === currentClipId) {
+            continue;
+          }
+          const incomingVideo = await s3ClipsService.getClipById(incomingClip.id);
+          if (cancelled || !incomingVideo || incomingVideo.type !== activeCategory) {
+            continue;
+          }
+          console.log(`[BottlenecksContent] Autoplaying incoming ${activeCategory} clip ${incomingClip.id}`);
+          invalidateMetadataCache(activeCategory);
+          await loadAndPlayClipById(incomingClip.id, activeCategory, 1, {
+            clips: [{ clipId: incomingClip.id }],
+            total: Math.max(mergedCounts[activeCategory] || 0, 1)
+          });
+          void loadCategoryMetadata(activeCategory, false, true);
+          return;
+        }
+      })();
+    }, 300);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [
+    newClipsNotification,
+    s3ClipsService,
+    isPercentileCategory,
+    currentClipId,
+    invalidateMetadataCache,
+    loadAndPlayClipById,
+    loadCategoryMetadata,
+    mergedCounts
+  ]);
   React142.useCallback(async (categoryId, clipIndex) => {
     console.warn("[BottlenecksContent] loadAndPlayClip is deprecated, use loadAndPlayClipById instead");
     if (!workspaceId || !s3ClipsService || !isMountedRef.current || !isEffectiveShiftReady) return;
@@ -42696,8 +42898,11 @@ var BottlenecksContent = ({
     }
   }, [workspaceId, s3ClipsService, effectiveDateString, effectiveShiftId, loadAndPlayClipById, isEffectiveShiftReady]);
   const handleNext = React142.useCallback(async () => {
-    if (!isMountedRef.current) return;
+    if (!isMountedRef.current || navigationLockRef.current) return;
     const currentFilter = activeFilterRef.current;
+    navigationLockRef.current = true;
+    clearRetryTimeout();
+    setIsNavigating(true);
     setIsTransitioning(true);
     setIsInitialLoading(true);
     setError(null);
@@ -42727,10 +42932,32 @@ var BottlenecksContent = ({
         );
         const olderClip = neighbors.previous;
         if (!olderClip) {
-          console.log("[handleNext] Already at last clip in category");
-          clearLoadingState();
+          let metadataArray3 = categoryMetadataRef.current;
+          if (metadataArray3.length === 0) {
+            console.log(`[handleNext] Metadata empty for ${currentFilter}, loading before loop restart`);
+            await loadCategoryMetadata(currentFilter, false, true);
+            metadataArray3 = categoryMetadataRef.current;
+          }
+          const firstClipMeta = metadataArray3[0];
+          if (firstClipMeta?.clipId && firstClipMeta.clipId !== currentClipId) {
+            console.log(`[handleNext] Reached end of ${currentFilter}, looping back to newest clip ${firstClipMeta.clipId}`);
+            await loadAndPlayClipById(firstClipMeta.clipId, currentFilter, 1, {
+              clips: metadataArray3,
+              total: mergedCounts[currentFilter] || metadataArray3.length
+            });
+            return;
+          }
+          console.log("[handleNext] Reached live edge, waiting for the next clip");
+          awaitingNextClipRef.current = true;
+          navigationLockRef.current = false;
+          setIsInitialLoading(false);
+          setIsVideoBuffering(false);
+          setIsPlaying(false);
+          setIsNavigating(false);
+          setIsTransitioning(false);
           return;
         }
+        awaitingNextClipRef.current = false;
         setPendingVideo(olderClip);
         setCurrentClipId(olderClip.id || null);
         setAllVideos([olderClip]);
@@ -42786,8 +43013,23 @@ var BottlenecksContent = ({
           clearLoadingState();
         }
       } else {
-        console.log(`[handleNext] Already at last clip in category`);
-        clearLoadingState();
+        const firstClipMeta = metadataArray[0];
+        if (firstClipMeta?.clipId && firstClipMeta.clipId !== currentClipId) {
+          console.log(`[handleNext] Reached end of ${currentFilter}, looping back to newest percentile clip ${firstClipMeta.clipId}`);
+          await loadAndPlayClipById(firstClipMeta.clipId, currentFilter, 1, {
+            clips: metadataArray,
+            total: metadataArray.length
+          });
+          return;
+        }
+        console.log(`[handleNext] Reached live edge for ${currentFilter}, waiting for the next clip`);
+        awaitingNextClipRef.current = true;
+        navigationLockRef.current = false;
+        setIsInitialLoading(false);
+        setIsVideoBuffering(false);
+        setIsPlaying(false);
+        setIsNavigating(false);
+        setIsTransitioning(false);
       }
     } catch (error2) {
       console.error(`[handleNext] Error navigating:`, error2);
@@ -42799,10 +43041,13 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
+  }, [clearLoadingState, clearRetryTimeout, s3ClipsService, loadCategoryMetadata, loadAndPlayClipById, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
   const handlePrevious = React142.useCallback(async () => {
-    if (!isMountedRef.current) return;
+    if (!isMountedRef.current || navigationLockRef.current) return;
     const currentFilter = activeFilterRef.current;
+    navigationLockRef.current = true;
+    clearRetryTimeout();
+    setIsNavigating(true);
     setIsTransitioning(true);
     setIsInitialLoading(true);
     setError(null);
@@ -42900,7 +43145,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
+  }, [clearLoadingState, clearRetryTimeout, s3ClipsService, loadCategoryMetadata, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
   const currentVideo = React142.useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -43067,6 +43312,8 @@ var BottlenecksContent = ({
     }
   }, [error, playbackSpeed]);
   const handleVideoPlay = React142.useCallback(async (player) => {
+    awaitingNextClipRef.current = false;
+    clearRetryTimeout();
     setIsPlaying(true);
     setIsInitialLoading(false);
     if (currentVideo && !currentVideo.creation_timestamp && s3ClipsService) {
@@ -43088,7 +43335,7 @@ var BottlenecksContent = ({
         console.warn("[BottlenecksContent] Failed to load metadata for current video:", error2);
       }
     }
-  }, [currentVideo, s3ClipsService]);
+  }, [currentVideo, s3ClipsService, clearRetryTimeout]);
   const handleVideoPause = React142.useCallback((player) => {
     setIsPlaying(false);
   }, []);
@@ -43099,8 +43346,10 @@ var BottlenecksContent = ({
     setDuration(duration2);
   }, []);
   const handleLoadedData = React142.useCallback((player) => {
-    console.log("Video data loaded - NOT clearing loading (wait for playing event)");
-  }, []);
+    console.log("Video data loaded - clearing transition overlay");
+    setIsInitialLoading(false);
+    clearLoadingState();
+  }, [clearLoadingState]);
   const handleVideoPlaying = React142.useCallback((player) => {
     console.log("Video playing - hiding transition overlay (most reliable)");
     clearLoadingState();
@@ -43121,6 +43370,7 @@ var BottlenecksContent = ({
     console.error("[BottlenecksContent] Video.js error:", errorInfo);
     setIsPlaying(false);
     setIsVideoBuffering(false);
+    clearRetryTimeout();
     const errorCode = errorInfo?.code || 0;
     const canRetry = errorInfo?.canRetry ?? false;
     const errorMessage = errorInfo?.message || "Unknown error";
@@ -43148,17 +43398,24 @@ var BottlenecksContent = ({
     if (videoRetryCountRef.current < 3 && currentVideo) {
       videoRetryCountRef.current++;
       const retryDelay = 1e3 * videoRetryCountRef.current;
+      const retryClipId = currentVideo.id;
+      const retryCategory = activeFilterRef.current;
       console.log(`[Video Error] Recoverable error - Retrying... Attempt ${videoRetryCountRef.current}/3 in ${retryDelay}ms`);
       setError({
         type: "retrying",
         message: `Retrying... (${videoRetryCountRef.current}/3)`,
         isRetrying: true
       });
-      setTimeout(() => {
-        if (videoRef.current && currentVideo && isMountedRef.current) {
-          setError(null);
-          videoRef.current.dispose();
+      retryTimeoutRef.current = setTimeout(() => {
+        retryTimeoutRef.current = null;
+        if (!isMountedRef.current) {
+          return;
         }
+        if (currentClipIdRef.current !== retryClipId || activeFilterRef.current !== retryCategory) {
+          console.log("[Video Error] Skipping stale retry for previous clip");
+          return;
+        }
+        restartCurrentClipPlayback();
       }, retryDelay);
     } else {
       console.log("[Video Error] Retries exhausted - showing final error overlay");
@@ -43180,7 +43437,7 @@ var BottlenecksContent = ({
         attempts: 3
       });
     }
-  }, [currentVideo, workspaceId, clearLoadingState]);
+  }, [currentVideo, workspaceId, clearLoadingState, clearRetryTimeout, restartCurrentClipPlayback]);
   React142.useEffect(() => {
     isMountedRef.current = true;
     return () => {
@@ -43192,10 +43449,11 @@ var BottlenecksContent = ({
         clearTimeout(loadingTimeoutRef.current);
         loadingTimeoutRef.current = null;
       }
+      clearRetryTimeout();
       setIsCategoryLoading(false);
       setIsNavigating(false);
     };
-  }, [s3ClipsService]);
+  }, [s3ClipsService, clearRetryTimeout]);
   React142.useEffect(() => {
     if (filteredVideos.length > 0 && currentIndex < filteredVideos.length) {
       if (error && error.type === "fatal") {
@@ -43411,7 +43669,8 @@ var BottlenecksContent = ({
                 isShareLoading,
                 isShareCopied,
                 options: videoPlayerOptions
-              }
+              },
+              `${currentVideo.id}-${playerInstanceNonce}-inline`
             )
           }
         ),
@@ -43442,11 +43701,8 @@ var BottlenecksContent = ({
               "button",
               {
                 onClick: () => {
-                  setError(null);
                   videoRetryCountRef.current = 0;
-                  if (videoRef.current) {
-                    videoRef.current.dispose();
-                  }
+                  restartCurrentClipPlayback();
                 },
                 className: "px-5 py-2.5 bg-gray-600 hover:bg-gray-700 rounded-md text-sm font-medium transition-colors",
                 children: "Retry"
@@ -43678,7 +43934,7 @@ var BottlenecksContent = ({
             currentVideoId: currentVideo?.id,
             counts: mergedCounts,
             isReady: hasInitialLoad,
-            prefetchedPercentileCounts: prefetchedPercentileCounts || void 0,
+            prefetchedPercentileCounts: isFastSlowClipFiltersEnabled ? prefetchedPercentileCounts || void 0 : void 0,
             workspaceId,
             date: effectiveDateString,
             shift: effectiveShiftId,
@@ -43687,6 +43943,7 @@ var BottlenecksContent = ({
             targetCycleTime: workspaceTargetCycleTime,
             clipClassifications,
             idleTimeVlmEnabled,
+            showPercentileCycleFilters: isFastSlowClipFiltersEnabled,
             onFilterChange: (filterId) => {
               updateActiveFilter(filterId);
               const category = categoriesToShow.find((cat) => cat.type === filterId);
@@ -43835,7 +44092,8 @@ var BottlenecksContent = ({
                     isShareLoading,
                     isShareCopied,
                     options: videoPlayerOptions
-                  }
+                  },
+                  `${currentVideo.id}-${playerInstanceNonce}-fullscreen`
                 )
               }
             ),
@@ -43899,6 +44157,7 @@ var BottlenecksContent = ({
     !triageMode && /* @__PURE__ */ jsxRuntime.jsx(
       AdvancedFilterDialog,
       {
+        showPercentileCycleFilters: isFastSlowClipFiltersEnabled,
         onApply: () => {
           console.log("[BottlenecksContent] Advanced filters applied, will refresh clips...");
         }
@@ -50387,29 +50646,29 @@ var Legend5 = ({
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const exclamationLabel = useBottleneckLabel ? "Bottleneck" : "<50% efficiency";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-3 bg-white/95 rounded-lg shadow-sm px-2 sm:px-4 py-1 sm:py-1.5 border border-gray-200/60 backdrop-blur-sm text-[10px] sm:text-sm", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 text-xs font-medium text-slate-600", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-medium text-gray-700 hidden sm:block", children: [
       metricLabel,
       ":"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#00AB45]/90 ring-1 ring-[#00AB45]/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.green_min, effectiveLegend.green_max) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-[#00AB45]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPercentRange(effectiveLegend.green_min, effectiveLegend.green_max) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#FFB020]/90 ring-1 ring-[#FFB020]/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.yellow_min, effectiveLegend.yellow_max) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-[#FFB020]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPercentRange(effectiveLegend.yellow_min, effectiveLegend.yellow_max) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#E34329]/90 ring-1 ring-[#E34329]/20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.red_min, effectiveLegend.red_max) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-[#E34329]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPercentRange(effectiveLegend.red_min, effectiveLegend.red_max) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-6 bg-gray-200 mx-1" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-3 h-3 sm:w-5 sm:h-5 bg-[#E34329]/90 rounded-full ring-1 ring-[#E34329]/20 text-white font-bold text-[8px] sm:text-xs", children: "!" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: exclamationLabel })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-slate-200 mx-1" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-3 h-3 sm:w-4 sm:h-4 bg-[#E34329] rounded-full text-white font-bold text-[8px] sm:text-[10px]", children: "!" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: exclamationLabel })
     ] })
   ] });
 };
@@ -50519,6 +50778,7 @@ var WorkspaceGrid = React142__namespace.default.memo(({
   isPdfMode = false,
   customWorkspacePositions,
   lineNames = {},
+  lineOrder = [],
   factoryView = "factory",
   line2Uuid = "line-2",
   className = "",
@@ -50529,7 +50789,8 @@ var WorkspaceGrid = React142__namespace.default.memo(({
   videoStreamsLoading = false,
   displayNames = {},
   onWorkspaceHover,
-  onWorkspaceHoverEnd
+  onWorkspaceHoverEnd,
+  toolbarRightContent
 }) => {
   const dashboardConfig = useDashboardConfig();
   const mapViewEnabled = dashboardConfig?.mapViewConfig?.enabled ?? false;
@@ -50563,29 +50824,30 @@ var WorkspaceGrid = React142__namespace.default.memo(({
     () => viewMode === "video" ? getVideoGridLegendLabel(workspaces) : MAP_GRID_LEGEND_LABEL,
     [viewMode, workspaces]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col w-full h-full overflow-hidden bg-slate-50/50 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-none px-4 py-3 z-20 flex flex-row items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex bg-white/95 rounded-lg shadow-sm px-4 py-2 border border-slate-200/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 shrink-0", children: [
+        toolbarRightContent,
         mapViewEnabled && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: handleViewModeToggle,
-            className: "flex items-center gap-2 px-3 py-1.5 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition-colors duration-200",
+            className: "flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-200 rounded-md shadow-sm hover:bg-slate-50 transition-colors duration-200 text-slate-700",
             title: viewMode === "video" ? "Switch to Map View" : "Switch to Video View",
             children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Map, { className: "w-4 h-4 text-gray-600" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm text-gray-700", children: "Map View" })
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Map, { className: "w-4 h-4 text-slate-500" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Map View" })
             ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "w-4 h-4 text-gray-600" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm text-gray-700", children: "Video View" })
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "w-4 h-4 text-slate-500" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Video View" })
             ] })
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1 mr-32", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-14 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden px-3 py-2 bg-white border-b border-slate-200/60 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
       motion.div,
       {
         initial: { opacity: 0 },
@@ -50597,6 +50859,8 @@ var WorkspaceGrid = React142__namespace.default.memo(({
           VideoGridViewComponent,
           {
             workspaces,
+            lineNames,
+            lineOrder,
             videoSources,
             videoStreamsByWorkspaceId,
             videoStreamsLoading,
@@ -59459,6 +59723,7 @@ function HomeView({
     [dbLines]
   );
   const isSupervisor = user?.role_level === "supervisor";
+  const hasUser = Boolean(user);
   const visibleLineIds = React142.useMemo(() => {
     const scoped = Array.from(new Set(allLineIds.filter(Boolean)));
     if (enabledLineIdSet.size === 0) {
@@ -59468,57 +59733,100 @@ function HomeView({
   }, [allLineIds, enabledLineIdSet]);
   const fallbackLineId = visibleLineIds[0] || defaultLineId;
   const defaultHomeLineId = fallbackLineId;
-  const availableLineIds = React142.useMemo(() => {
-    if (visibleLineIds.length > 1) {
-      return [...visibleLineIds, factoryViewId];
-    }
-    return visibleLineIds;
-  }, [visibleLineIds, factoryViewId]);
-  const LINE_FILTER_STORAGE_KEY = "optifye_home_line_filter";
-  const [selectedLineId, setSelectedLineId] = React142.useState(() => {
+  const visibleLineIdsKey = visibleLineIds.join(",");
+  const normalizeSelectedLineIds = (lineIdsToNormalize) => {
+    const allowedLineIds = new Set(visibleLineIds);
+    const requestedLineIds = new Set((lineIdsToNormalize || []).filter(Boolean));
+    const normalized = visibleLineIds.filter((lineId) => requestedLineIds.has(lineId) && allowedLineIds.has(lineId));
+    if (normalized.length > 0) {
+      return normalized;
+    }
+    if (defaultHomeLineId && allowedLineIds.has(defaultHomeLineId)) {
+      return [defaultHomeLineId];
+    }
+    return visibleLineIds.length > 0 ? [visibleLineIds[0]] : [];
+  };
+  const selectedLineIdsEqual = (left, right) => {
+    if (left.length !== right.length) return false;
+    return left.every((value, index) => value === right[index]);
+  };
+  const isAllLinesSelection = (lineIdsToCheck) => visibleLineIds.length > 0 && lineIdsToCheck.length === visibleLineIds.length;
+  const readPersistedSelectedLineIds = () => {
     if (typeof window === "undefined") {
-      return defaultHomeLineId;
+      return null;
     }
     try {
-      const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
-      if (savedLineId) {
-        if (availableLineIds.includes(savedLineId)) {
-          return savedLineId;
+      const savedLineIds = sessionStorage.getItem("optifye_home_line_filters_v2");
+      if (savedLineIds) {
+        const parsedLineIds = JSON.parse(savedLineIds);
+        if (Array.isArray(parsedLineIds)) {
+          return normalizeSelectedLineIds(parsedLineIds.map((lineId) => String(lineId)));
+        }
+      }
+      const legacyLineId = sessionStorage.getItem("optifye_home_line_filter");
+      if (legacyLineId) {
+        if (legacyLineId === factoryViewId) {
+          return normalizeSelectedLineIds(visibleLineIds);
         }
+        return normalizeSelectedLineIds([legacyLineId]);
       }
     } catch (error) {
       console.warn("Failed to read line filter from sessionStorage:", error);
     }
-    return defaultHomeLineId;
-  });
+    return null;
+  };
+  const [selectedLineIds, setSelectedLineIds] = React142.useState(() => readPersistedSelectedLineIds() || normalizeSelectedLineIds([defaultHomeLineId]));
+  const [isLineSelectorOpen, setIsLineSelectorOpen] = React142.useState(false);
+  const [pendingSelectedLineIds, setPendingSelectedLineIds] = React142.useState([]);
+  const lineSelectorRef = React142.useRef(null);
+  React142.useEffect(() => {
+    if (isLineSelectorOpen) {
+      setPendingSelectedLineIds(selectedLineIds);
+    }
+  }, [isLineSelectorOpen, selectedLineIds]);
   React142.useEffect(() => {
-    if (!user || availableLineIds.length === 0) {
+    if (!hasUser || visibleLineIds.length === 0) {
       return;
     }
-    try {
-      const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
-      if (savedLineId && availableLineIds.includes(savedLineId)) {
-        if (savedLineId !== selectedLineId) {
-          setSelectedLineId(savedLineId);
-        }
-        return;
+    const restoredLineIds = readPersistedSelectedLineIds();
+    setSelectedLineIds((previousSelectedLineIds) => {
+      if (restoredLineIds) {
+        return selectedLineIdsEqual(restoredLineIds, previousSelectedLineIds) ? previousSelectedLineIds : restoredLineIds;
       }
+      const normalizedCurrentLineIds = normalizeSelectedLineIds(previousSelectedLineIds);
+      return selectedLineIdsEqual(normalizedCurrentLineIds, previousSelectedLineIds) ? previousSelectedLineIds : normalizedCurrentLineIds;
+    });
+  }, [hasUser, visibleLineIdsKey, defaultHomeLineId, factoryViewId]);
+  React142.useEffect(() => {
+    try {
+      sessionStorage.setItem("optifye_home_line_filters_v2", JSON.stringify(selectedLineIds));
+      sessionStorage.removeItem("optifye_home_line_filter");
     } catch (error) {
-      console.warn("Failed to read line filter from sessionStorage:", error);
+      console.warn("Failed to save line filter to sessionStorage:", error);
     }
-    if (availableLineIds.includes(selectedLineId)) {
+  }, [selectedLineIds]);
+  React142.useEffect(() => {
+    if (!isLineSelectorOpen) {
       return;
     }
-    if (defaultHomeLineId !== selectedLineId) {
-      setSelectedLineId(defaultHomeLineId);
-    }
-  }, [
-    user,
-    availableLineIds,
-    defaultHomeLineId,
-    selectedLineId,
-    LINE_FILTER_STORAGE_KEY
-  ]);
+    const handleClickOutside = (event) => {
+      if (lineSelectorRef.current && !lineSelectorRef.current.contains(event.target)) {
+        setIsLineSelectorOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isLineSelectorOpen]);
+  const primarySelectedLineId = selectedLineIds[0] || defaultHomeLineId;
+  const isMultiLineSelection = selectedLineIds.length > 1;
+  const selectedLineIdsKey = selectedLineIds.join(",");
+  const selectedLineIdSet = React142.useMemo(
+    () => new Set(selectedLineIds),
+    [selectedLineIds]
+  );
+  const metricsScopeLineId = isMultiLineSelection ? factoryViewId : primarySelectedLineId;
   const userCompanyId = React142.useMemo(() => {
     return user?.properties?.company_id || user?.company_id || entityConfig.companyId;
   }, [user, entityConfig.companyId]);
@@ -59538,12 +59846,8 @@ function HomeView({
   React142.useEffect(() => {
     const initDisplayNames = async () => {
       try {
-        if (selectedLineId === factoryViewId) {
-          for (const lineId of visibleLineIds) {
-            await preInitializeWorkspaceDisplayNames(lineId);
-          }
-        } else {
-          await preInitializeWorkspaceDisplayNames(selectedLineId);
+        for (const lineId of selectedLineIds) {
+          await preInitializeWorkspaceDisplayNames(lineId);
         }
         setDisplayNamesInitialized(true);
       } catch (error) {
@@ -59552,8 +59856,8 @@ function HomeView({
       }
     };
     initDisplayNames();
-  }, [selectedLineId, factoryViewId, visibleLineIds]);
-  const displayNameLineId = selectedLineId === factoryViewId ? void 0 : selectedLineId;
+  }, [selectedLineIdsKey]);
+  const displayNameLineId = isMultiLineSelection ? void 0 : primarySelectedLineId;
   const {
     displayNames: workspaceDisplayNames,
     loading: displayNamesLoading,
@@ -59582,7 +59886,8 @@ function HomeView({
     error: metricsError,
     refetch: refetchMetrics
   } = useDashboardMetrics({
-    lineId: selectedLineId,
+    lineId: metricsScopeLineId,
+    lineIds: selectedLineIds,
     onLineMetricsUpdate: handleLineMetricsUpdate,
     userAccessibleLineIds: visibleLineIds
     // Pass user's accessible lines for supervisor filtering
@@ -59590,10 +59895,8 @@ function HomeView({
   const trendGroups = React142.useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
     if (!lineMetricsRows.length) return null;
-    if (selectedLineId === factoryViewId) {
-      const candidateLineIds = visibleLineIds.filter((id3) => id3 && id3 !== factoryViewId);
-      if (!candidateLineIds.length) return null;
-      const rowsForLines = lineMetricsRows.filter((row2) => candidateLineIds.includes(row2?.line_id));
+    if (selectedLineIds.length > 1) {
+      const rowsForLines = lineMetricsRows.filter((row2) => selectedLineIdSet.has(row2?.line_id));
       if (!rowsForLines.length) return null;
       const groupsMap = /* @__PURE__ */ new Map();
       rowsForLines.forEach((row2) => {
@@ -59616,16 +59919,16 @@ function HomeView({
         shiftId: group.shiftId
       }));
     }
-    const row = lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
+    const row = lineMetricsRows.find((r2) => r2?.line_id === primarySelectedLineId);
     if (!row?.date || row?.shift_id === void 0 || row?.shift_id === null) {
       return null;
     }
     return [{
-      lineIds: [selectedLineId],
+      lineIds: [primarySelectedLineId],
       date: row.date,
       shiftId: row.shift_id
     }];
-  }, [selectedLineId, factoryViewId, visibleLineIds, lineMetrics]);
+  }, [lineMetrics, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
   const trendOptions = React142.useMemo(() => {
     if (!trendGroups || !userCompanyId) return null;
     return {
@@ -59653,17 +59956,18 @@ function HomeView({
   }, [workspaceMetrics, metricsLoading, metricsError]);
   const kpis = React142.useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
-    if (selectedLineId === factoryViewId) {
-      if (metricsLoading && lineMetricsRows.length === 0) return null;
-      return aggregateKPIsFromLineMetricsRows(lineMetricsRows);
+    if (selectedLineIds.length > 1) {
+      const rowsForSelectedLines = lineMetricsRows.filter((row2) => selectedLineIdSet.has(row2?.line_id));
+      if (metricsLoading && rowsForSelectedLines.length === 0) return null;
+      return aggregateKPIsFromLineMetricsRows(rowsForSelectedLines);
     }
-    const row = lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
+    const row = lineMetricsRows.find((r2) => r2?.line_id === primarySelectedLineId);
     if (!row) {
       if (metricsLoading) return null;
       return buildKPIsFromLineMetricsRow(null);
     }
     return buildKPIsFromLineMetricsRow(row);
-  }, [selectedLineId, factoryViewId, lineMetrics, metricsLoading]);
+  }, [lineMetrics, metricsLoading, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
   const kpisWithTrend = React142.useMemo(() => {
     if (!kpis) return null;
     if (!kpiTrend) return kpis;
@@ -59688,30 +59992,30 @@ function HomeView({
     };
   }, [kpis, kpiTrend]);
   const selectedLineMeta = React142.useMemo(
-    () => dbLines.find((line) => line.id === selectedLineId),
-    [dbLines, selectedLineId]
+    () => selectedLineIds.length === 1 ? dbLines.find((line) => line.id === primarySelectedLineId) : void 0,
+    [dbLines, primarySelectedLineId, selectedLineIds.length]
   );
-  const selectedMonitoringMode = selectedLineId === factoryViewId ? "output" : selectedLineMeta?.monitoring_mode ?? "output";
+  const selectedMonitoringMode = selectedLineIds.length === 1 ? selectedLineMeta?.monitoring_mode ?? "output" : "output";
   const isUptimeMode = selectedMonitoringMode === "uptime";
   const averageIdleTimeSeconds = React142.useMemo(() => {
     if (!isUptimeMode) return null;
-    const targetWorkspaces = selectedLineId === factoryViewId ? workspaceMetrics : workspaceMetrics.filter((ws) => ws.line_id === selectedLineId);
+    const targetWorkspaces = workspaceMetrics.filter((ws) => ws.line_id === primarySelectedLineId);
     const idleValues = targetWorkspaces.map((ws) => ws.idle_time).filter((value) => Number.isFinite(value));
     if (idleValues.length === 0) return 0;
     const totalIdle = idleValues.reduce((sum, value) => sum + value, 0);
     return totalIdle / idleValues.length;
-  }, [isUptimeMode, selectedLineId, factoryViewId, workspaceMetrics]);
+  }, [isUptimeMode, primarySelectedLineId, workspaceMetrics]);
   const {
     activeBreaks: allActiveBreaks,
     isLoading: breaksLoading,
     error: breaksError
-  } = useActiveBreaks(allLineIds);
+  } = useActiveBreaks(visibleLineIds);
   const activeBreaks = React142.useMemo(() => {
-    if (selectedLineId === factoryViewId) {
+    if (isAllLinesSelection(selectedLineIds)) {
       return allActiveBreaks;
     }
-    return allActiveBreaks.filter((breakItem) => breakItem.lineId === selectedLineId);
-  }, [allActiveBreaks, selectedLineId, factoryViewId]);
+    return allActiveBreaks.filter((breakItem) => selectedLineIdSet.has(breakItem.lineId));
+  }, [allActiveBreaks, selectedLineIdSet, selectedLineIds]);
   const activeBreakLineIds = React142.useMemo(
     () => new Set(activeBreaks.map((breakItem) => breakItem.lineId)),
     [activeBreaks]
@@ -60018,7 +60322,7 @@ function HomeView({
     // Round to 1 decimal
     kpisWithTrend?.avgCycleTime?.change,
     kpisWithTrend?.qualityCompliance?.value ? Math.round(kpisWithTrend.qualityCompliance.value) : null,
-    selectedLineId
+    selectedLineIdsKey
   ]);
   React142.useEffect(() => {
     setIsHydrated(true);
@@ -60035,27 +60339,62 @@ function HomeView({
       setErrorMessage(null);
     }
   }, [metricsError]);
-  const handleLineChange = React142.useCallback((value) => {
+  const getTrackedLineScope = React142.useCallback((lineIdsForScope) => {
+    if (isAllLinesSelection(lineIdsForScope)) {
+      return factoryViewId;
+    }
+    if (lineIdsForScope.length === 1) {
+      return lineIdsForScope[0];
+    }
+    return "custom_multi";
+  }, [factoryViewId, visibleLineIds.length]);
+  const getLineSelectionLabel = React142.useCallback((lineIdsForScope) => {
+    if (isAllLinesSelection(lineIdsForScope)) {
+      return "All Lines";
+    }
+    if (lineIdsForScope.length === 1) {
+      const lineId = lineIdsForScope[0];
+      return mergedLineNames[lineId] || `Line ${lineId.substring(0, 4)}`;
+    }
+    return `${lineIdsForScope.length} Lines Selected`;
+  }, [mergedLineNames, visibleLineIds.length]);
+  const updateSelectedLineIds = React142.useCallback((nextLineIds) => {
+    const normalizedLineIds = normalizeSelectedLineIds(nextLineIds);
+    if (selectedLineIdsEqual(normalizedLineIds, selectedLineIds)) {
+      return;
+    }
     setIsChangingFilter(true);
-    setSelectedLineId(value);
+    setSelectedLineIds(normalizedLineIds);
     trackCoreEvent("monitor line filter changed", {
-      previous_line_id: selectedLineId,
-      new_line_id: value,
-      line_name: mergedLineNames[value] || (value === factoryViewId ? "All Lines" : `Line ${value.substring(0, 4)}`)
+      previous_line_id: getTrackedLineScope(selectedLineIds),
+      new_line_id: getTrackedLineScope(normalizedLineIds),
+      previous_line_ids: selectedLineIds,
+      new_line_ids: normalizedLineIds,
+      selected_line_count: normalizedLineIds.length,
+      selection_mode: isAllLinesSelection(normalizedLineIds) ? "all" : normalizedLineIds.length === 1 ? "single" : "custom",
+      line_name: getLineSelectionLabel(normalizedLineIds)
     });
-    try {
-      sessionStorage.setItem(LINE_FILTER_STORAGE_KEY, value);
-    } catch (error) {
-      console.warn("Failed to save line filter to sessionStorage:", error);
+  }, [factoryViewId, getLineSelectionLabel, getTrackedLineScope, selectedLineIds, selectedLineIdsKey, visibleLineIds]);
+  React142.useCallback(() => {
+    updateSelectedLineIds(visibleLineIds);
+  }, [updateSelectedLineIds, visibleLineIds]);
+  React142.useCallback((lineId) => {
+    const currentSelection = new Set(selectedLineIds);
+    if (currentSelection.has(lineId)) {
+      if (currentSelection.size <= 1) {
+        return;
+      }
+      currentSelection.delete(lineId);
+    } else {
+      currentSelection.add(lineId);
     }
-  }, [LINE_FILTER_STORAGE_KEY, selectedLineId, mergedLineNames, factoryViewId]);
+    updateSelectedLineIds(Array.from(currentSelection));
+  }, [selectedLineIds, updateSelectedLineIds]);
   React142.useEffect(() => {
     if (!metricsLoading && isChangingFilter) {
-      if (workspaceMetrics.length > 0 || selectedLineId === factoryViewId) {
-        setIsChangingFilter(false);
-      }
+      setIsChangingFilter(false);
     }
-  }, [metricsLoading, workspaceMetrics, isChangingFilter, selectedLineId, factoryViewId]);
+  }, [metricsLoading, isChangingFilter]);
   React142.useEffect(() => {
     if (!metricsLoading && !hasInitialDataLoaded) {
       setHasInitialDataLoaded(true);
@@ -60074,11 +60413,107 @@ function HomeView({
     if (visibleLineIds.length <= 1) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: handleLineChange, value: selectedLineId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[200px] bg-white border border-gray-200 shadow-sm rounded-md h-9 sm:h-9 text-xs sm:text-sm px-2 sm:px-3", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a line" }) }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SelectItem, { value: id3, children: mergedLineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
+    const allLinesSelected = isAllLinesSelection(pendingSelectedLineIds);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: lineSelectorRef, className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsLineSelectorOpen((previous) => !previous),
+          className: "flex min-w-[180px] items-center justify-between gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-left text-sm font-medium shadow-sm transition-colors hover:bg-slate-50 text-slate-700",
+          "aria-haspopup": "menu",
+          "aria-expanded": isLineSelectorOpen,
+          "aria-label": "Select lines",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: getLineSelectionLabel(selectedLineIds) }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `h-4 w-4 text-slate-400 transition-transform ${isLineSelectorOpen ? "rotate-180" : ""}` })
+          ]
+        }
+      ),
+      isLineSelectorOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 w-[280px] rounded-lg border border-slate-200 bg-white p-3 shadow-xl flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-2 border-b border-slate-100", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-slate-800", children: "Select Lines" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setPendingSelectedLineIds([]),
+              className: "text-xs font-medium text-blue-600 hover:text-blue-700 transition-colors",
+              children: "Clear All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm font-medium text-slate-900 hover:bg-slate-50 transition-colors", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500",
+              checked: allLinesSelected,
+              onChange: () => setPendingSelectedLineIds(allLinesSelected ? [] : visibleLineIds)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "All Lines" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-56 space-y-0.5 overflow-y-auto pr-1", children: visibleLineIds.map((lineId) => {
+          const isChecked = pendingSelectedLineIds.includes(lineId);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors text-slate-700 hover:bg-slate-50",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500",
+                    checked: isChecked,
+                    onChange: () => {
+                      setPendingSelectedLineIds((prev) => {
+                        const current = new Set(prev);
+                        if (current.has(lineId)) {
+                          current.delete(lineId);
+                        } else {
+                          current.add(lineId);
+                        }
+                        return Array.from(current);
+                      });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: mergedLineNames[lineId] || `Line ${lineId.substring(0, 4)}` })
+              ]
+            },
+            lineId
+          );
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-3 pb-1 mt-1 border-t border-slate-100 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (pendingSelectedLineIds.length > 0) {
+                updateSelectedLineIds(pendingSelectedLineIds);
+              }
+              setIsLineSelectorOpen(false);
+            },
+            disabled: pendingSelectedLineIds.length === 0,
+            className: "bg-blue-600 text-white px-4 py-1.5 rounded-md text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors w-full",
+            children: "Apply"
+          }
+        ) })
+      ] }) : null
     ] });
-  }, [availableLineIds, handleLineChange, selectedLineId, mergedLineNames, factoryViewId, visibleLineIds.length]);
+  }, [
+    getLineSelectionLabel,
+    isLineSelectorOpen,
+    mergedLineNames,
+    selectedLineIds,
+    pendingSelectedLineIds,
+    visibleLineIds,
+    updateSelectedLineIds,
+    isAllLinesSelection
+  ]);
   const useSmoothLoading = (isLoading, minDuration = 400) => {
     const [showLoading, setShowLoading] = React142.useState(isLoading);
     const loadingStartRef2 = React142.useRef(null);
@@ -60124,11 +60559,11 @@ function HomeView({
   const isDataLoading = metricsLoading || displayNamesLoading && workspaceMetrics.length === 0;
   const hasKpiDataReady = React142.useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
-    if (selectedLineId === factoryViewId) {
-      return lineMetricsRows.length > 0;
+    if (selectedLineIds.length > 1) {
+      return lineMetricsRows.some((row) => selectedLineIdSet.has(row?.line_id));
     }
-    return lineMetricsRows.some((row) => row?.line_id === selectedLineId);
-  }, [lineMetrics, selectedLineId, factoryViewId]);
+    return lineMetricsRows.some((row) => row?.line_id === primarySelectedLineId);
+  }, [lineMetrics, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
   const isKpiLoading = !hasKpiDataReady;
   React142.useEffect(() => {
     const minLoadingDurationMs = 250;
@@ -60190,76 +60625,77 @@ function HomeView({
             DashboardHeader,
             {
               lineTitle,
-              lineId: selectedLineId === factoryViewId ? allLineIds[0] : selectedLineId,
+              lineId: primarySelectedLineId,
               className: "w-full",
               headerControls: kpiSectionControl
             }
           ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-1 sm:right-6 sm:top-3 z-30 flex items-center space-x-2", children: lineSelectorComponent && lineSelectorComponent }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-100px)] sm:min-h-0", children: workspaceMetricsWithBreakState.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-              motion.div,
-              {
-                initial: { opacity: 0, scale: 0.98 },
-                animate: { opacity: 1, scale: 1 },
-                transition: { duration: 0.3 },
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[calc(100vh-100px)] sm:min-h-0", children: workspaceMetricsWithBreakState.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.98 },
+              animate: { opacity: 1, scale: 1 },
+              transition: { duration: 0.3 },
+              className: "h-full",
+              children: React142__namespace.default.createElement(WorkspaceGrid, {
+                workspaces: workspaceMetricsWithBreakState,
+                lineNames: mergedLineNames,
+                lineOrder: selectedLineIds,
+                factoryView: factoryViewId,
+                legend: efficiencyLegend,
+                videoSources,
+                videoStreamsByWorkspaceId,
+                videoStreamsLoading,
+                displayNames: workspaceDisplayNames,
+                hasFlowBuffers,
                 className: "h-full",
-                children: React142__namespace.default.createElement(WorkspaceGrid, {
-                  workspaces: workspaceMetricsWithBreakState,
-                  lineNames,
-                  factoryView: factoryViewId,
-                  legend: efficiencyLegend,
-                  videoSources,
-                  videoStreamsByWorkspaceId,
-                  videoStreamsLoading,
-                  displayNames: workspaceDisplayNames,
-                  hasFlowBuffers,
-                  className: "h-full",
-                  onWorkspaceHover: handleWorkspaceHover,
-                  onWorkspaceHoverEnd: handleWorkspaceHoverEnd
-                })
-              },
-              selectedLineId
-            ) : !shouldShowDataLoading && hasInitialDataLoaded ? /* @__PURE__ */ jsxRuntime.jsx(
-              motion.div,
-              {
-                initial: { opacity: 0 },
-                animate: { opacity: 1 },
-                transition: { duration: 0.3 },
-                children: /* @__PURE__ */ jsxRuntime.jsx(NoWorkspaceData, { message: "No workspace data available. Select another line or check configurations." })
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              motion.div,
-              {
-                initial: { opacity: 0, scale: 0.98 },
-                animate: { opacity: 1, scale: 1 },
-                transition: { duration: 0.3 },
+                toolbarRightContent: lineSelectorComponent,
+                onWorkspaceHover: handleWorkspaceHover,
+                onWorkspaceHoverEnd: handleWorkspaceHoverEnd
+              })
+            },
+            selectedLineIdsKey
+          ) : !shouldShowDataLoading && hasInitialDataLoaded ? /* @__PURE__ */ jsxRuntime.jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              transition: { duration: 0.3 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(NoWorkspaceData, { message: "No workspace data available. Adjust the selected lines or check configurations." })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.98 },
+              animate: { opacity: 1, scale: 1 },
+              transition: { duration: 0.3 },
+              className: "h-full",
+              children: React142__namespace.default.createElement(WorkspaceGrid, {
+                workspaces: [],
+                // Show empty grid while loading
+                lineNames: mergedLineNames,
+                lineOrder: selectedLineIds,
+                factoryView: factoryViewId,
+                legend: efficiencyLegend,
+                videoSources,
+                videoStreamsByWorkspaceId,
+                videoStreamsLoading,
+                displayNames: workspaceDisplayNames,
+                hasFlowBuffers,
                 className: "h-full",
-                children: React142__namespace.default.createElement(WorkspaceGrid, {
-                  workspaces: [],
-                  // Show empty grid while loading
-                  lineNames,
-                  factoryView: factoryViewId,
-                  legend: efficiencyLegend,
-                  videoSources,
-                  videoStreamsByWorkspaceId,
-                  videoStreamsLoading,
-                  displayNames: workspaceDisplayNames,
-                  hasFlowBuffers,
-                  className: "h-full",
-                  onWorkspaceHover: handleWorkspaceHover,
-                  onWorkspaceHoverEnd: handleWorkspaceHoverEnd
-                })
-              },
-              selectedLineId
-            ) })
-          ] })
+                toolbarRightContent: lineSelectorComponent,
+                onWorkspaceHover: handleWorkspaceHover,
+                onWorkspaceHoverEnd: handleWorkspaceHoverEnd
+              })
+            },
+            selectedLineIdsKey
+          ) }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           BreakNotificationPopup,
           {
             activeBreaks,
-            lineNames,
+            lineNames: mergedLineNames,
             isVisible: !breaksLoading && !breaksError && !breakNotificationsDismissed,
             onDismiss: () => setBreakNotificationsDismissed(true)
           }
@@ -69398,6 +69834,10 @@ var WorkspaceDetailView = ({
     shiftId: selectedShift,
     companyId: dashboardConfig?.entityConfig?.companyId
   });
+  const {
+    isFastSlowClipFiltersEnabled,
+    isResolved: isFastSlowClipFiltersResolved
+  } = useCompanyFastSlowClipFiltersEnabled();
   const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
   dashboardConfig?.supervisorConfig?.enabled || false;
   const effectiveLineId = lineId || selectedLineId;
@@ -69484,15 +69924,19 @@ var WorkspaceDetailView = ({
     return `${workspaceId}:${percentileDate}:${percentileShiftId.toString()}:10`;
   }, [workspaceId, percentileDate, percentileShiftId]);
   React142.useEffect(() => {
-    if (!percentileCountsKey) {
+    if (!isFastSlowClipFiltersEnabled || !percentileCountsKey) {
       setPrefetchedPercentileCounts(null);
       return;
     }
     if (prefetchedPercentileCounts && prefetchedPercentileCounts.key !== percentileCountsKey) {
       setPrefetchedPercentileCounts(null);
     }
-  }, [percentileCountsKey, prefetchedPercentileCounts]);
+  }, [isFastSlowClipFiltersEnabled, percentileCountsKey, prefetchedPercentileCounts]);
   React142.useEffect(() => {
+    if (!isFastSlowClipFiltersEnabled || !isFastSlowClipFiltersResolved) {
+      setPrefetchedPercentileCounts(null);
+      return;
+    }
     if (!percentileCountsKey || !percentileDate || percentileShiftId === null || percentileShiftId === void 0) {
       return;
     }
@@ -69559,7 +70003,16 @@ var WorkspaceDetailView = ({
     return () => {
       controller.abort();
     };
-  }, [percentileCountsKey, percentileDate, percentileShiftId, workspaceId, supabase, prefetchedPercentileCounts]);
+  }, [
+    isFastSlowClipFiltersEnabled,
+    isFastSlowClipFiltersResolved,
+    percentileCountsKey,
+    percentileDate,
+    percentileShiftId,
+    workspaceId,
+    supabase,
+    prefetchedPercentileCounts
+  ]);
   const {
     metrics: historicMetrics,
     isLoading: historicLoading,
@@ -70835,7 +71288,7 @@ var WorkspaceDetailView = ({
               shift,
               totalOutput: workspace?.total_actions,
               workspaceMetrics: detailedWorkspaceMetrics || void 0,
-              prefetchedPercentileCounts,
+              prefetchedPercentileCounts: isFastSlowClipFiltersEnabled ? prefetchedPercentileCounts : null,
               className: "h-[calc(100vh-10rem)]"
             }
           ) })
@@ -80242,6 +80695,7 @@ exports.useClipTypes = useClipTypes;
 exports.useClipTypesWithCounts = useClipTypesWithCounts;
 exports.useClipsInit = useClipsInit;
 exports.useCompanyClipsCost = useCompanyClipsCost;
+exports.useCompanyFastSlowClipFiltersEnabled = useCompanyFastSlowClipFiltersEnabled;
 exports.useCompanyHasVlmEnabledLine = useCompanyHasVlmEnabledLine;
 exports.useCompanyUsersUsage = useCompanyUsersUsage;
 exports.useComponentOverride = useComponentOverride;