@optifye/dashboard-core 6.11.43 → 6.11.44

package/dist/index.js

@@ -13487,10 +13487,19 @@ function getEfficiencyTextColorClasses(efficiency, legend = DEFAULT_EFFICIENCY_L
 
 // src/lib/hooks/useDashboardMetrics.ts
 var DEBUG_DASHBOARD_LOGS = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
+var REALTIME_REFRESH_DEBOUNCE_MS = 1500;
+var REALTIME_REFRESH_MIN_INTERVAL_MS = 5e3;
 var logDebug = (...args) => {
   if (!DEBUG_DASHBOARD_LOGS) return;
   console.log(...args);
 };
+var buildMetricsScopeKey = (lineId, lineIds) => {
+  const normalizedLineIds = Array.from(new Set((lineIds || []).filter(Boolean))).sort();
+  if (normalizedLineIds.length > 0) {
+    return `${lineId}|${normalizedLineIds.join(",")}`;
+  }
+  return lineId;
+};
 var parseEfficiencyLegend = (legend) => {
   if (!legend) return null;
   const coerce = (value, fallback) => {
@@ -13570,6 +13579,7 @@ var useDashboardMetrics = ({
   const supabase = useSupabase();
   const [metrics2, setMetrics] = React143.useState({ workspaceMetrics: [], lineMetrics: [] });
   const [metricsLineId, setMetricsLineId] = React143.useState(lineId ?? null);
+  const [metricsScopeKey, setMetricsScopeKey] = React143.useState(() => buildMetricsScopeKey(lineId, lineIds));
   const [isLoading, setIsLoading] = React143.useState(true);
   const [error, setError] = React143.useState(null);
   const lineIdRef = React143.useRef(lineId);
@@ -13579,8 +13589,10 @@ var useDashboardMetrics = ({
   const abortControllerRef = React143.useRef(null);
   const lastFetchKeyRef = React143.useRef(null);
   const inFlightFetchKeyRef = React143.useRef(null);
-  const updateQueueRef = React143.useRef(false);
   const onLineMetricsUpdateRef = React143.useRef(onLineMetricsUpdate);
+  const pendingRealtimeRefreshRef = React143.useRef(false);
+  const realtimeRefreshTimerRef = React143.useRef(null);
+  const lastRealtimeRefreshStartedAtRef = React143.useRef(0);
   const shiftGroupsRef = React143.useRef(shiftGroups);
   const operationalShiftKeyRef = React143.useRef(operationalShiftKey);
   const configuredLineIdsRef = React143.useRef(configuredLineIds);
@@ -13608,15 +13620,17 @@ var useDashboardMetrics = ({
     () => getCompanyMetricsTableName(entityConfig.companyId, "performance_metrics"),
     [entityConfig.companyId]
   );
+  const requestedScopeKey = React143.useMemo(
+    () => buildMetricsScopeKey(lineId, isFactoryView ? targetFactoryLineIds : void 0),
+    [isFactoryView, lineId, targetFactoryLineIds]
+  );
   React143.useEffect(() => {
     lineIdRef.current = lineId;
-    setMetrics({ workspaceMetrics: [], lineMetrics: [], metadata: void 0, efficiencyLegend: DEFAULT_EFFICIENCY_LEGEND });
-    setMetricsLineId(null);
     setIsLoading(true);
     setError(null);
     lastFetchKeyRef.current = null;
     inFlightFetchKeyRef.current = null;
-  }, [lineId]);
+  }, [lineId, requestedScopeKey]);
   const fetchAllMetrics = React143.useCallback(async (options = {}) => {
     const { force = false } = options;
     const currentLineIdToUse = lineIdRef.current;
@@ -13629,7 +13643,6 @@ var useDashboardMetrics = ({
       companySpecificMetricsTable
     });
     if (!currentLineIdToUse || !supabase || !enabled || shiftLoading || isTimezoneLoading || companySpecificMetricsTable.includes("unknown_company")) {
-      updateQueueRef.current = false;
       if (!metrics2?.workspaceMetrics?.length && !metrics2?.lineMetrics?.length && !shiftLoading) setIsLoading(false);
       if (companySpecificMetricsTable.includes("unknown_company") && !error) {
         setError({ message: "Company ID not configured for metrics table.", code: "CONFIG_ERROR" });
@@ -13642,6 +13655,10 @@ var useDashboardMetrics = ({
     const usesShiftGroups = isFactory && shiftGroups.length > 0;
     const singleShiftDetails = usesShiftGroups ? null : shiftConfig ? getCurrentShift(defaultTimezone, shiftConfig) : shiftGroups.length === 1 ? { date: shiftGroups[0].date, shiftId: shiftGroups[0].shiftId } : getCurrentShift(defaultTimezone, staticShiftConfig);
     const fetchKey = usesShiftGroups ? `factory|${companyId || "unknown"}|${shiftGroupsKey}` : isFactory ? `factory|${companyId || "unknown"}|${singleShiftDetails?.date}|${singleShiftDetails?.shiftId}|${targetLineIdsKey}` : `${currentLineIdToUse}|${companyId || "unknown"}|${singleShiftDetails?.date}|${singleShiftDetails?.shiftId}`;
+    const responseScopeKey = buildMetricsScopeKey(
+      currentLineIdToUse,
+      isFactory ? targetLineIds : void 0
+    );
     logDebug("[useDashboardMetrics] Fetch key details:", {
       isFactory,
       usesShiftGroups,
@@ -13651,14 +13668,8 @@ var useDashboardMetrics = ({
       singleShiftDetails,
       fetchKey
     });
-    if (inFlightFetchKeyRef.current === fetchKey) {
-      updateQueueRef.current = false;
-      return;
-    }
-    if (!force && lastFetchKeyRef.current === fetchKey) {
-      updateQueueRef.current = false;
-      return;
-    }
+    if (inFlightFetchKeyRef.current === fetchKey) return;
+    if (!force && lastFetchKeyRef.current === fetchKey) return;
     const requestId = ++activeRequestIdRef.current;
     const requestLineId = currentLineIdToUse;
     isFetchingRef.current = true;
@@ -13681,6 +13692,7 @@ var useDashboardMetrics = ({
           efficiencyLegend: DEFAULT_EFFICIENCY_LEGEND
         });
         setMetricsLineId(requestLineId);
+        setMetricsScopeKey(responseScopeKey);
         lastFetchKeyRef.current = inFlightFetchKeyRef.current;
         return;
       }
@@ -13890,6 +13902,7 @@ var useDashboardMetrics = ({
       hydrateFromBackend(idleTimeVlmByLine);
       setMetrics(newMetricsState);
       setMetricsLineId(requestLineId);
+      setMetricsScopeKey(responseScopeKey);
       lastFetchKeyRef.current = inFlightFetchKeyRef.current;
     } catch (err) {
       if (abortController.signal.aborted || err?.name === "AbortError") {
@@ -13912,9 +13925,24 @@ var useDashboardMetrics = ({
       if (requestId === activeRequestIdRef.current) {
         setIsLoading(false);
         isFetchingRef.current = false;
-        updateQueueRef.current = false;
         activeFetchLineIdRef.current = null;
         inFlightFetchKeyRef.current = null;
+        if (pendingRealtimeRefreshRef.current) {
+          const elapsedSinceLastRealtimeRefresh = Date.now() - lastRealtimeRefreshStartedAtRef.current;
+          const minIntervalRemaining = Math.max(0, REALTIME_REFRESH_MIN_INTERVAL_MS - elapsedSinceLastRealtimeRefresh);
+          const nextDelay = Math.max(REALTIME_REFRESH_DEBOUNCE_MS, minIntervalRemaining);
+          if (realtimeRefreshTimerRef.current === null) {
+            realtimeRefreshTimerRef.current = window.setTimeout(() => {
+              realtimeRefreshTimerRef.current = null;
+              if (!pendingRealtimeRefreshRef.current || isFetchingRef.current || inFlightFetchKeyRef.current) {
+                return;
+              }
+              pendingRealtimeRefreshRef.current = false;
+              lastRealtimeRefreshStartedAtRef.current = Date.now();
+              fetchAllMetricsRef.current({ force: true, reason: "subscription" });
+            }, nextDelay);
+          }
+        }
       }
     }
   }, [
@@ -13944,20 +13972,59 @@ var useDashboardMetrics = ({
   React143.useEffect(() => {
     fetchAllMetricsRef.current = fetchAllMetrics;
   }, [fetchAllMetrics]);
-  const queueUpdate = React143.useCallback(() => {
-    if (updateQueueRef.current || !supabase) {
-      if (updateQueueRef.current) {
-        logDebug("[useDashboardMetrics] queueUpdate skipped: update already queued");
+  const clearRealtimeRefreshTimer = React143.useCallback(() => {
+    if (realtimeRefreshTimerRef.current !== null) {
+      window.clearTimeout(realtimeRefreshTimerRef.current);
+      realtimeRefreshTimerRef.current = null;
+    }
+  }, []);
+  const scheduleRealtimeRefresh = React143.useCallback(() => {
+    if (!enabled || !supabase) {
+      pendingRealtimeRefreshRef.current = false;
+      clearRealtimeRefreshTimer();
+      return;
+    }
+    if (!pendingRealtimeRefreshRef.current || realtimeRefreshTimerRef.current !== null) {
+      return;
+    }
+    const elapsedSinceLastRealtimeRefresh = Date.now() - lastRealtimeRefreshStartedAtRef.current;
+    const minIntervalRemaining = Math.max(0, REALTIME_REFRESH_MIN_INTERVAL_MS - elapsedSinceLastRealtimeRefresh);
+    const nextDelay = Math.max(REALTIME_REFRESH_DEBOUNCE_MS, minIntervalRemaining);
+    realtimeRefreshTimerRef.current = window.setTimeout(() => {
+      realtimeRefreshTimerRef.current = null;
+      if (!pendingRealtimeRefreshRef.current) {
+        return;
       }
+      if (isFetchingRef.current || inFlightFetchKeyRef.current) {
+        scheduleRealtimeRefresh();
+        return;
+      }
+      pendingRealtimeRefreshRef.current = false;
+      lastRealtimeRefreshStartedAtRef.current = Date.now();
+      fetchAllMetricsRef.current({ force: true, reason: "subscription" });
+    }, nextDelay);
+  }, [clearRealtimeRefreshTimer, enabled, supabase]);
+  React143.useEffect(() => {
+    return () => {
+      clearRealtimeRefreshTimer();
+      pendingRealtimeRefreshRef.current = false;
+    };
+  }, [clearRealtimeRefreshTimer]);
+  const queueUpdate = React143.useCallback(() => {
+    if (!enabled) {
+      logDebug("[useDashboardMetrics] queueUpdate skipped: metrics disabled");
+      return;
+    }
+    if (!supabase) {
       if (!supabase) {
         logDebug("[useDashboardMetrics] queueUpdate skipped: supabase not ready");
       }
       return;
     }
-    logDebug("[useDashboardMetrics] queueUpdate triggered from realtime");
-    updateQueueRef.current = true;
-    fetchAllMetricsRef.current({ force: true, reason: "subscription" });
-  }, [supabase, enabled]);
+    pendingRealtimeRefreshRef.current = true;
+    logDebug("[useDashboardMetrics] queueUpdate queued realtime refresh");
+    scheduleRealtimeRefresh();
+  }, [enabled, scheduleRealtimeRefresh, supabase]);
   React143.useEffect(() => {
     if (enabled && lineId && supabase && !shiftLoading && !isTimezoneLoading) {
       fetchAllMetrics({ reason: "line-change" });
@@ -14077,7 +14144,7 @@ var useDashboardMetrics = ({
           { event: "*", schema, table: companySpecificMetricsTable, filter: filter2 },
           (payload) => {
             const payloadData = payload.new || payload.old;
-            console.log("[useDashboardMetrics] \u{1F4E1} WS_METRICS payload received:", {
+            logDebug("[useDashboardMetrics] \u{1F4E1} WS_METRICS payload received:", {
               eventType: payload.eventType,
               lineId: payloadData?.line_id,
               workspaceId: payloadData?.workspace_id,
@@ -14099,14 +14166,14 @@ var useDashboardMetrics = ({
               shiftId: payloadData?.shift_id
             });
             if (payloadData?.date === group.date && payloadData?.shift_id === group.shiftId) {
-              console.log("[useDashboardMetrics] \u2705 WS Date/shift match - triggering update");
+              logDebug("[useDashboardMetrics] \u2705 WS Date/shift match - triggering update");
               queueUpdate();
             } else {
-              console.log("[useDashboardMetrics] \u274C WS Date/shift mismatch - update SKIPPED");
+              logDebug("[useDashboardMetrics] \u274C WS Date/shift mismatch - update SKIPPED");
             }
           }
         ).subscribe((status) => {
-          console.log("[useDashboardMetrics] \u{1F4F6} WS metrics subscription:", {
+          logDebug("[useDashboardMetrics] \u{1F4F6} WS metrics subscription:", {
             channel: wsChannelName,
             status,
             table: companySpecificMetricsTable,
@@ -14124,7 +14191,7 @@ var useDashboardMetrics = ({
           { event: "*", schema, table: configuredLineMetricsTable, filter: filter2 },
           (payload) => {
             const payloadData = payload.new || payload.old;
-            console.log("[useDashboardMetrics] \u{1F4E1} LINE_METRICS payload received:", {
+            logDebug("[useDashboardMetrics] \u{1F4E1} LINE_METRICS payload received:", {
               eventType: payload.eventType,
               lineId: payloadData?.line_id,
               date: payloadData?.date,
@@ -14144,15 +14211,15 @@ var useDashboardMetrics = ({
               shiftId: payloadData?.shift_id
             });
             if (payloadData?.date === group.date && payloadData?.shift_id === group.shiftId) {
-              console.log("[useDashboardMetrics] \u2705 Date/shift match - triggering update");
+              logDebug("[useDashboardMetrics] \u2705 Date/shift match - triggering update");
               queueUpdate();
               onLineMetricsUpdateRef.current?.();
             } else {
-              console.log("[useDashboardMetrics] \u274C Date/shift mismatch - update SKIPPED");
+              logDebug("[useDashboardMetrics] \u274C Date/shift mismatch - update SKIPPED");
             }
           }
         ).subscribe((status) => {
-          console.log("[useDashboardMetrics] \u{1F4F6} Line metrics subscription:", {
+          logDebug("[useDashboardMetrics] \u{1F4F6} Line metrics subscription:", {
             channel: lmChannelName,
             status,
             table: configuredLineMetricsTable,
@@ -14248,7 +14315,7 @@ var useDashboardMetrics = ({
           { event: "*", schema, table, filter: filter2 },
           (payload) => {
             const payloadData = payload.new || payload.old;
-            console.log(`[useDashboardMetrics] \u{1F4E1} ${table.toUpperCase()} payload received (single-line):`, {
+            logDebug(`[useDashboardMetrics] \u{1F4E1} ${table.toUpperCase()} payload received (single-line):`, {
               eventType: payload.eventType,
               table: payload.table,
               lineId: payloadData?.line_id,
@@ -14272,14 +14339,14 @@ var useDashboardMetrics = ({
               shiftId: payloadData?.shift_id
             });
             if (payloadData?.date === operationalDateForSubscription && payloadData?.shift_id === currentShiftDetails.shiftId) {
-              console.log(`[useDashboardMetrics] \u2705 ${table} Date/shift match - triggering update`);
+              logDebug(`[useDashboardMetrics] \u2705 ${table} Date/shift match - triggering update`);
               callback();
             } else {
-              console.log(`[useDashboardMetrics] \u274C ${table} Date/shift mismatch - update SKIPPED`);
+              logDebug(`[useDashboardMetrics] \u274C ${table} Date/shift mismatch - update SKIPPED`);
             }
           }
         ).subscribe((status) => {
-          console.log(`[useDashboardMetrics] \u{1F4F6} ${table} subscription:`, {
+          logDebug(`[useDashboardMetrics] \u{1F4F6} ${table} subscription:`, {
             channel: channelName,
             status,
             table,
@@ -14328,14 +14395,17 @@ var useDashboardMetrics = ({
     lineId
     // NOTE: userAccessibleLineIds removed - accessed via ref
   ]);
-  const isMetricsForActiveLine = metricsLineId === lineId;
-  const safeMetrics = isMetricsForActiveLine ? metrics2 : { workspaceMetrics: [], lineMetrics: [], metadata: void 0, efficiencyLegend: DEFAULT_EFFICIENCY_LEGEND };
+  const isCurrentScopeResolved = metricsScopeKey === requestedScopeKey;
+  const hasLastGoodMetrics = metrics2.workspaceMetrics.length > 0 || metrics2.lineMetrics.length > 0;
+  const canReuseLastGoodMetrics = hasLastGoodMetrics && !isCurrentScopeResolved && (isLoading || !!error);
+  const safeMetrics = isCurrentScopeResolved || canReuseLastGoodMetrics ? metrics2 : { workspaceMetrics: [], lineMetrics: [], metadata: void 0, efficiencyLegend: DEFAULT_EFFICIENCY_LEGEND };
   return {
     workspaceMetrics: safeMetrics?.workspaceMetrics || [],
     lineMetrics: safeMetrics?.lineMetrics || [],
     efficiencyLegend: safeMetrics?.efficiencyLegend || DEFAULT_EFFICIENCY_LEGEND,
     metadata: safeMetrics?.metadata,
-    isLoading: enabled ? isLoading || !isMetricsForActiveLine : false,
+    isLoading: enabled ? isLoading || !isCurrentScopeResolved && !canReuseLastGoodMetrics : false,
+    isCurrentScopeResolved,
     error,
     refetch: () => {
       if (!enabled) {
@@ -16783,6 +16853,7 @@ var isInitialized = false;
 var isInitializing = false;
 var initializedWithLineIds = [];
 var missingLineContextWarnings = /* @__PURE__ */ new Set();
+var lineLoadPromises = /* @__PURE__ */ new Map();
 var initializationPromise = null;
 var workspaceDisplayNamesListeners = /* @__PURE__ */ new Set();
 var notifyWorkspaceDisplayNamesListeners = (changedLineId) => {
@@ -16798,6 +16869,30 @@ var subscribeWorkspaceDisplayNames = (listener) => {
   workspaceDisplayNamesListeners.add(listener);
   return () => workspaceDisplayNamesListeners.delete(listener);
 };
+var storeLineDisplayNames = (lineId, lineDisplayNamesMap) => {
+  runtimeWorkspaceDisplayNames[lineId] = {};
+  lineDisplayNamesMap.forEach((displayName, workspaceId) => {
+    runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
+  });
+};
+var ensureLineWorkspaceDisplayNamesLoaded = async (lineId) => {
+  if (!lineId || runtimeWorkspaceDisplayNames[lineId]) {
+    return;
+  }
+  const existingPromise = lineLoadPromises.get(lineId);
+  if (existingPromise) {
+    await existingPromise;
+    return;
+  }
+  const loadPromise = workspaceService.getWorkspaceDisplayNames(void 0, lineId).then((lineDisplayNamesMap) => {
+    storeLineDisplayNames(lineId, lineDisplayNamesMap);
+    notifyWorkspaceDisplayNamesListeners(lineId);
+  }).finally(() => {
+    lineLoadPromises.delete(lineId);
+  });
+  lineLoadPromises.set(lineId, loadPromise);
+  await loadPromise;
+};
 var getAllWorkspaceDisplayNamesSnapshot = (lineId) => {
   if (lineId && runtimeWorkspaceDisplayNames[lineId]) {
     return { ...runtimeWorkspaceDisplayNames[lineId] };
@@ -16862,6 +16957,7 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
       }
       console.log("\u{1F504} Target line IDs for workspace filtering:", targetLineIds);
       runtimeWorkspaceDisplayNames = {};
+      lineLoadPromises.clear();
       if (targetLineIds.length > 0) {
         const results = await Promise.all(
           targetLineIds.map(async (lineId) => {
@@ -16871,10 +16967,7 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
           })
         );
         results.forEach(({ lineId, lineDisplayNamesMap }) => {
-          runtimeWorkspaceDisplayNames[lineId] = {};
-          lineDisplayNamesMap.forEach((displayName, workspaceId) => {
-            runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
-          });
+          storeLineDisplayNames(lineId, lineDisplayNamesMap);
           console.log(`\u2705 Stored ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
         });
       } else {
@@ -16906,13 +16999,8 @@ var preInitializeWorkspaceDisplayNames = async (lineId) => {
     if (lineId && !runtimeWorkspaceDisplayNames[lineId]) {
       console.log(`\u{1F504} Line ${lineId} not in cache, fetching...`);
       try {
-        const lineDisplayNamesMap = await workspaceService.getWorkspaceDisplayNames(void 0, lineId);
-        runtimeWorkspaceDisplayNames[lineId] = {};
-        lineDisplayNamesMap.forEach((displayName, workspaceId) => {
-          runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
-        });
-        console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
-        notifyWorkspaceDisplayNamesListeners(lineId);
+        await ensureLineWorkspaceDisplayNamesLoaded(lineId);
+        console.log(`\u2705 Added workspaces for line ${lineId}`);
       } catch (error) {
         console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
       }
@@ -16925,13 +17013,8 @@ var preInitializeWorkspaceDisplayNames = async (lineId) => {
     if (lineId && !runtimeWorkspaceDisplayNames[lineId]) {
       console.log(`\u{1F504} Line ${lineId} not in cache after init, fetching...`);
       try {
-        const lineDisplayNamesMap = await workspaceService.getWorkspaceDisplayNames(void 0, lineId);
-        runtimeWorkspaceDisplayNames[lineId] = {};
-        lineDisplayNamesMap.forEach((displayName, workspaceId) => {
-          runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
-        });
-        console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
-        notifyWorkspaceDisplayNamesListeners(lineId);
+        await ensureLineWorkspaceDisplayNamesLoaded(lineId);
+        console.log(`\u2705 Added workspaces for line ${lineId}`);
       } catch (error) {
         console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
       }
@@ -16968,13 +17051,8 @@ var getWorkspaceDisplayName = (workspaceId, lineId) => {
   }
   if (isInitialized && lineId && !runtimeWorkspaceDisplayNames[lineId]) {
     console.log(`\u{1F504} Line ${lineId} not in cache, fetching its workspaces...`);
-    workspaceService.getWorkspaceDisplayNames(void 0, lineId).then((lineDisplayNamesMap) => {
-      runtimeWorkspaceDisplayNames[lineId] = {};
-      lineDisplayNamesMap.forEach((displayName2, workspaceId2) => {
-        runtimeWorkspaceDisplayNames[lineId][workspaceId2] = displayName2;
-      });
-      console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId} to cache`);
-      notifyWorkspaceDisplayNamesListeners(lineId);
+    ensureLineWorkspaceDisplayNamesLoaded(lineId).then(() => {
+      console.log(`\u2705 Added workspaces for line ${lineId} to cache`);
     }).catch((error) => {
       console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
     });
@@ -17016,13 +17094,8 @@ var getShortWorkspaceDisplayName = (workspaceId, lineId) => {
   }
   if (isInitialized && lineId && !runtimeWorkspaceDisplayNames[lineId]) {
     console.log(`\u{1F504} Line ${lineId} not in cache, fetching its workspaces...`);
-    workspaceService.getWorkspaceDisplayNames(void 0, lineId).then((lineDisplayNamesMap) => {
-      runtimeWorkspaceDisplayNames[lineId] = {};
-      lineDisplayNamesMap.forEach((displayName2, workspaceId2) => {
-        runtimeWorkspaceDisplayNames[lineId][workspaceId2] = displayName2;
-      });
-      console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId} to cache`);
-      notifyWorkspaceDisplayNamesListeners(lineId);
+    ensureLineWorkspaceDisplayNamesLoaded(lineId).then(() => {
+      console.log(`\u2705 Added workspaces for line ${lineId} to cache`);
     }).catch((error) => {
       console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
     });
@@ -17102,6 +17175,7 @@ var refreshWorkspaceDisplayNames = async (companyId) => {
   workspaceService.clearWorkspaceDisplayNamesCache();
   runtimeWorkspaceDisplayNames = {};
   isInitialized = false;
+  lineLoadPromises.clear();
   await initializeWorkspaceDisplayNames();
   notifyWorkspaceDisplayNamesListeners();
 };
@@ -17111,6 +17185,7 @@ var clearWorkspaceDisplayNamesCache = () => {
   isInitialized = false;
   isInitializing = false;
   initializedWithLineIds = [];
+  lineLoadPromises.clear();
   initializationPromise = null;
   notifyWorkspaceDisplayNamesListeners();
 };
@@ -17240,7 +17315,16 @@ var useWorkspaceDisplayNamesMap = (workspaceIds, lineId, companyId) => {
     refetch: fetchDisplayNames
   };
 };
-var useWorkspaceVideoStreams = (workspaces) => {
+var useWorkspaceVideoStreams = (workspaces, options = {}) => {
+  const explicitLineIdsKey = React143.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const lineId of options.lineIds || []) {
+      if (lineId) {
+        ids.add(lineId);
+      }
+    }
+    return Array.from(ids).sort().join(",");
+  }, [options.lineIds]);
   const workspaceIdsKey = React143.useMemo(() => {
     const ids = /* @__PURE__ */ new Set();
     for (const workspace of workspaces) {
@@ -17250,7 +17334,7 @@ var useWorkspaceVideoStreams = (workspaces) => {
     }
     return Array.from(ids).sort().join(",");
   }, [workspaces]);
-  const lineIdsKey = React143.useMemo(() => {
+  const inferredLineIdsKey = React143.useMemo(() => {
     const ids = /* @__PURE__ */ new Set();
     for (const workspace of workspaces) {
       if (workspace.line_id) {
@@ -17259,18 +17343,19 @@ var useWorkspaceVideoStreams = (workspaces) => {
     }
     return Array.from(ids).sort().join(",");
   }, [workspaces]);
+  const lineIdsKey = explicitLineIdsKey || inferredLineIdsKey;
   const requestKey = React143.useMemo(() => {
-    if (workspaceIdsKey) {
-      return `workspaces:${workspaceIdsKey}`;
-    }
     if (lineIdsKey) {
       return `lines:${lineIdsKey}`;
     }
+    if (workspaceIdsKey) {
+      return `workspaces:${workspaceIdsKey}`;
+    }
     return "";
   }, [workspaceIdsKey, lineIdsKey]);
   const workspaceIds = React143.useMemo(
-    () => workspaceIdsKey ? workspaceIdsKey.split(",") : [],
-    [workspaceIdsKey]
+    () => lineIdsKey ? [] : workspaceIdsKey ? workspaceIdsKey.split(",") : [],
+    [lineIdsKey, workspaceIdsKey]
   );
   const lineIds = React143.useMemo(
     () => lineIdsKey ? lineIdsKey.split(",") : [],
@@ -18814,6 +18899,7 @@ var useWorkspaceHealthLastSeen = (workspaceIds, options = {}) => {
   const supabase = useSupabase();
   const databaseConfig = useDatabaseConfig();
   const refreshInterval = options.refreshInterval ?? DEFAULT_REFRESH_INTERVAL_MS;
+  const enabled = options.enabled ?? true;
   const workspaceIdsKey = React143.useMemo(() => {
     const ids = Array.from(new Set(workspaceIds.filter(Boolean)));
     return ids.sort().join(",");
@@ -18824,7 +18910,7 @@ var useWorkspaceHealthLastSeen = (workspaceIds, options = {}) => {
   const isFetchingRef = React143.useRef(false);
   const refreshIntervalRef = React143.useRef(null);
   const fetchLastSeen = React143.useCallback(async () => {
-    if (!supabase || !workspaceIdsKey || isFetchingRef.current) return;
+    if (!enabled || !supabase || !workspaceIdsKey || isFetchingRef.current) return;
     const healthTable = databaseConfig?.tables?.workspace_health || "workspace_health_status";
     try {
       isFetchingRef.current = true;
@@ -18856,12 +18942,18 @@ var useWorkspaceHealthLastSeen = (workspaceIds, options = {}) => {
       setIsLoading(false);
       isFetchingRef.current = false;
     }
-  }, [supabase, workspaceIdsKey, databaseConfig?.tables?.workspace_health]);
+  }, [databaseConfig?.tables?.workspace_health, enabled, supabase, workspaceIdsKey]);
   React143.useEffect(() => {
+    if (!enabled) {
+      setIsLoading(false);
+      setError(null);
+      setLastSeenByWorkspaceId({});
+      return;
+    }
     fetchLastSeen();
-  }, [fetchLastSeen]);
+  }, [enabled, fetchLastSeen]);
   React143.useEffect(() => {
-    if (!refreshInterval || !workspaceIdsKey) return;
+    if (!enabled || !refreshInterval || !workspaceIdsKey) return;
     refreshIntervalRef.current = setInterval(() => {
       fetchLastSeen();
     }, refreshInterval);
@@ -18871,7 +18963,7 @@ var useWorkspaceHealthLastSeen = (workspaceIds, options = {}) => {
         refreshIntervalRef.current = null;
       }
     };
-  }, [fetchLastSeen, refreshInterval, workspaceIdsKey]);
+  }, [enabled, fetchLastSeen, refreshInterval, workspaceIdsKey]);
   return {
     lastSeenByWorkspaceId,
     isLoading,
@@ -34704,7 +34796,7 @@ var VideoCard = React143__namespace.default.memo(({
   });
   const showOffline = Boolean(isStreamStale);
   const lastSeenText = lastSeenLabel || "Unknown";
-  const workspaceDisplayName = displayName || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+  const workspaceDisplayName = displayName || workspace.displayName || workspace.workspace_name;
   const videoGridMetricValue = getVideoGridMetricValue(workspace);
   const videoGridDisplayValue = getVideoGridDisplayValue(workspace, effectiveLegend, displayMinuteBucket);
   const videoGridColorState = getVideoGridColorState(workspace, effectiveLegend);
@@ -34917,7 +35009,10 @@ var VideoGridView = React143__namespace.default.memo(({
     }
     return Array.from(ids);
   }, [workspaces]);
-  const { lastSeenByWorkspaceId } = useWorkspaceHealthLastSeen(workspaceHealthIds);
+  const healthFetchEnabled = !videoStreamsLoading && workspaces.length > 0;
+  const { lastSeenByWorkspaceId } = useWorkspaceHealthLastSeen(workspaceHealthIds, {
+    enabled: healthFetchEnabled
+  });
   React143.useEffect(() => {
     const sample = workspaces.slice(0, 3).map((workspace) => ({
       id: workspace.workspace_uuid || workspace.workspace_name,
@@ -35016,6 +35111,9 @@ var VideoGridView = React143__namespace.default.memo(({
   }, [sortedWorkspaces, lineOrder, lineNames]);
   lineGroups.length > 1;
   const streamsReady = !videoStreamsLoading;
+  const resolveWorkspaceDisplayName = React143.useCallback((workspace) => {
+    return workspace.displayName || displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || workspace.workspace_name;
+  }, [displayNames]);
   const calculateOptimalGrid = React143.useCallback(() => {
     if (!containerRef.current) return;
     const containerPadding = 16;
@@ -35146,11 +35244,11 @@ var VideoGridView = React143__namespace.default.memo(({
       efficiency: workspace.efficiency,
       action_count: workspace.action_count
     });
-    const displayName = workspace.displayName || displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+    const displayName = resolveWorkspaceDisplayName(workspace);
     const currentPath = (router$1.asPath || "/").split("#")[0];
     const navParams = getWorkspaceNavigationParams(workspaceId, displayName, workspace.line_id, currentPath);
     router$1.push(`/workspace/${workspaceId}${navParams}`);
-  }, [router$1, prewarmClipsInit]);
+  }, [resolveWorkspaceDisplayName, router$1, prewarmClipsInit]);
   const handleStreamError = React143.useCallback((workspaceId, options) => {
     const isR2Stream = options?.isR2Stream ?? false;
     const hasFallback = Boolean(options?.fallbackUrl);
@@ -35259,7 +35357,7 @@ var VideoGridView = React143__namespace.default.memo(({
           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),
+          displayName: resolveWorkspaceDisplayName(card.workspace),
           lastSeenLabel: card.lastSeenLabel,
           useRAF: effectiveUseRAF,
           displayMinuteBucket,
@@ -35271,16 +35369,15 @@ var VideoGridView = React143__namespace.default.memo(({
     },
     card.workspaceKey
   ), [
-    displayNames,
     displayMinuteBucket,
     effectiveCanvasFps,
     effectiveLegend,
     effectiveUseRAF,
-    getWorkspaceDisplayName,
     handleStreamError,
     handleWorkspaceClick,
     onWorkspaceHover,
     onWorkspaceHoverEnd,
+    resolveWorkspaceDisplayName,
     selectedLine
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -35366,6 +35463,9 @@ var MapGridView = React143__namespace.default.memo(({
       prewarmInFlightRef.current.delete(workspaceId);
     });
   }, [dashboardConfig, timezone, supabase]);
+  const resolveWorkspaceDisplayName = React143.useCallback((workspace) => {
+    return workspace.displayName || displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || workspace.workspace_name;
+  }, [displayNames]);
   const handleWorkspaceClick = React143.useCallback((workspace) => {
     const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
     prewarmClipsInit(workspace);
@@ -35377,12 +35477,11 @@ var MapGridView = React143__namespace.default.memo(({
       efficiency: workspace.efficiency,
       action_count: workspace.action_count
     });
-    const displayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
-    getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+    const displayName = resolveWorkspaceDisplayName(workspace);
     const currentPath = (router$1.asPath || "/").split("#")[0];
     const navParams = getWorkspaceNavigationParams(workspaceId, displayName, workspace.line_id, currentPath);
     router$1.push(`/workspace/${workspaceId}${navParams}`);
-  }, [router$1, displayNames, prewarmClipsInit]);
+  }, [resolveWorkspaceDisplayName, router$1, prewarmClipsInit]);
   const activePositions = React143.useMemo(() => {
     return workspacePositions.filter((pos) => {
       const wsKey = pos.id.toUpperCase();
@@ -35412,7 +35511,18 @@ var MapGridView = React143__namespace.default.memo(({
             workspace_uuid: position.id,
             // Use config ID as temporary UUID
             line_id: "",
+            // Empty line ID
+            company_id: "",
+            shift_id: 0,
+            date: "",
             efficiency: 0,
+            performance_score: 0,
+            action_count: 0,
+            pph: 0,
+            avg_cycle_time: 0,
+            trend: 0,
+            predicted_output: 0,
+            action_threshold: 0,
             show_exclamation: false
           };
           const workspaceId = effectiveWorkspace.workspace_uuid || effectiveWorkspace.workspace_name;
@@ -35421,7 +35531,7 @@ var MapGridView = React143__namespace.default.memo(({
           const performanceColor = isInactivePlaceholder || isConveyorRow ? "bg-slate-200 border-slate-300 text-slate-500" : getPerformanceColor(effectiveWorkspace.efficiency);
           !isInactivePlaceholder && !isConveyorRow && (effectiveWorkspace.show_exclamation ?? (effectiveWorkspace.efficiency < 50 && effectiveWorkspace.efficiency >= 10));
           const configLabel = position.label;
-          const workspaceDisplayName = configLabel || (isInactivePlaceholder ? "INACTIVE" : displayNames[`${effectiveWorkspace.line_id}_${effectiveWorkspace.workspace_name}`] || getWorkspaceDisplayName(effectiveWorkspace.workspace_name, effectiveWorkspace.line_id) || position.id);
+          const workspaceDisplayName = configLabel || (isInactivePlaceholder ? "INACTIVE" : resolveWorkspaceDisplayName(effectiveWorkspace) || position.id);
           return /* @__PURE__ */ jsxRuntime.jsx(
             motion.div,
             {
@@ -39388,9 +39498,12 @@ SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 var LoadingOverlay = ({
   isVisible,
   message = "Loading...",
-  className
+  className,
+  contentClassName,
+  contentVariant = "card"
 }) => {
   if (!isVisible) return null;
+  const contentClasses = contentVariant === "plain" ? "flex flex-col items-center justify-center" : "flex flex-col items-center space-y-3 rounded-lg bg-white p-8 shadow-xl";
   return /* @__PURE__ */ jsxRuntime.jsx(
     motion.div,
     {
@@ -39401,7 +39514,7 @@ var LoadingOverlay = ({
       className: `fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-sm ${className || ""}`,
       "aria-modal": "true",
       role: "dialog",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center space-y-3 rounded-lg bg-white p-8 shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${contentClasses} ${contentClassName || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message }) })
     }
   );
 };
@@ -60731,6 +60844,353 @@ var HelpView = ({
 };
 var AuthenticatedHelpView = withAuth(HelpView);
 var HelpView_default = HelpView;
+var sortWorkspaceMetrics = (left, right) => {
+  if (left.line_id !== right.line_id) {
+    return left.line_id.localeCompare(right.line_id);
+  }
+  return left.workspace_name.localeCompare(right.workspace_name, void 0, { numeric: true });
+};
+var transformWorkspaceMetrics = (rows) => (rows || []).map((item) => {
+  const actionFamily = normalizeActionFamily({
+    actionFamily: item.action_family,
+    actionType: item.action_type,
+    actionName: item.action_name
+  });
+  const actionType = actionFamily === "assembly" || actionFamily === "output" ? actionFamily : null;
+  const metric = {
+    company_id: item.company_id || "",
+    line_id: item.line_id,
+    shift_id: item.shift_id,
+    date: item.date,
+    workspace_uuid: item.workspace_id,
+    workspace_name: item.workspace_name,
+    displayName: item.workspace_display_name || item.display_name || void 0,
+    action_count: item.total_output || 0,
+    pph: item.avg_pph || 0,
+    performance_score: item.performance_score || 0,
+    avg_cycle_time: item.avg_cycle_time || 0,
+    ideal_cycle_time: item.ideal_cycle_time || void 0,
+    trend: item.trend_score === 1 ? 2 : 0,
+    predicted_output: item.ideal_output || 0,
+    efficiency: item.efficiency || 0,
+    action_threshold: item.total_day_output || 0,
+    monitoring_mode: item.monitoring_mode ?? void 0,
+    idle_time: typeof item.idle_time === "number" ? item.idle_time : Number(item.idle_time),
+    idle_time_hourly: item.idle_time_hourly ?? null,
+    shift_start: item.shift_start ?? void 0,
+    shift_end: item.shift_end ?? void 0,
+    assembly_enabled: item.assembly_enabled ?? false,
+    video_grid_metric_mode: normalizeVideoGridMetricMode(
+      item.video_grid_metric_mode,
+      item.assembly_enabled ?? false
+    ),
+    action_type: actionType,
+    action_family: actionFamily,
+    action_display_name: getActionDisplayName({
+      displayName: item.action_display_name,
+      actionFamily: item.action_family,
+      actionType: item.action_type,
+      actionName: item.action_name
+    }),
+    recent_flow_percent: item.recent_flow_percent ?? null,
+    recent_flow_window_minutes: item.recent_flow_window_minutes ?? null,
+    recent_flow_effective_end_at: item.recent_flow_effective_end_at ?? null,
+    recent_flow_computed_at: item.recent_flow_computed_at ?? null,
+    scheduled_break_active: item.scheduled_break_active ?? false,
+    incoming_wip_current: item.incoming_wip_current ?? null,
+    incoming_wip_effective_at: item.incoming_wip_effective_at ?? null,
+    incoming_wip_buffer_name: item.incoming_wip_buffer_name ?? null,
+    show_exclamation: item.show_exclamation ?? void 0
+  };
+  workspaceMetricsStore.setOverview(metric);
+  return metric;
+}).sort(sortWorkspaceMetrics);
+var transformActiveBreaks = (activeBreaksByLine) => {
+  if (!activeBreaksByLine) return [];
+  return Object.values(activeBreaksByLine).flat().map((item) => ({
+    lineId: item.line_id,
+    shiftName: item.shift_name || "",
+    startTime: item.start_time,
+    endTime: item.end_time,
+    duration: item.duration || 0,
+    remarks: item.remarks || "",
+    elapsedMinutes: item.elapsed_minutes || 0,
+    remainingMinutes: item.remaining_minutes || 0
+  })).sort((left, right) => {
+    if (left.lineId !== right.lineId) return left.lineId.localeCompare(right.lineId);
+    if (left.shiftName !== right.shiftName) return left.shiftName.localeCompare(right.shiftName);
+    return left.startTime.localeCompare(right.startTime);
+  });
+};
+var createEmptyState = () => ({
+  requestKey: null,
+  resolvedScope: [],
+  scopeKey: null,
+  lines: [],
+  workspaceMetrics: [],
+  lineMetrics: [],
+  kpiTrend: null,
+  activeBreaks: [],
+  videoStreamsByWorkspaceId: {},
+  efficiencyLegend: null,
+  metadata: {}
+});
+var normalizeMetadata = (metadata) => ({
+  hasFlowBuffers: Boolean(metadata?.has_flow_buffers),
+  idleTimeVlmByLine: metadata?.idle_time_vlm_by_line ?? {},
+  generatedAt: metadata?.generated_at,
+  cacheStatus: metadata?.cache_status,
+  warnings: metadata?.warnings ?? []
+});
+var useLiveMonitorBootstrap = ({
+  lineIds,
+  companyId,
+  enabled = true
+}) => {
+  const supabase = useSupabase();
+  const entityConfig = useEntityConfig();
+  const { hydrateFromBackend } = useIdleTimeVlmConfig();
+  const resolvedCompanyId = companyId || entityConfig?.companyId;
+  const rawLineIdsKey = (lineIds || []).filter(Boolean).join(",");
+  const normalizedLineIds = React143.useMemo(
+    () => Array.from(new Set(rawLineIdsKey ? rawLineIdsKey.split(",") : [])),
+    [rawLineIdsKey]
+  );
+  const requestKey = React143.useMemo(
+    () => normalizedLineIds.slice().sort().join(","),
+    [normalizedLineIds]
+  );
+  const [state, setState] = React143.useState(() => createEmptyState());
+  const [isLoading, setIsLoading] = React143.useState(false);
+  const [error, setError] = React143.useState(null);
+  const activeRequestIdRef = React143.useRef(0);
+  const fetchBootstrap = React143.useCallback(async (force = false) => {
+    if (!enabled || !supabase || !resolvedCompanyId || normalizedLineIds.length === 0) {
+      return;
+    }
+    const requestId = ++activeRequestIdRef.current;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const searchParams = new URLSearchParams();
+      searchParams.set("company_id", resolvedCompanyId);
+      searchParams.set("line_ids", normalizedLineIds.join(","));
+      if (force) {
+        searchParams.set("force_refresh", "true");
+      }
+      const response = await fetchBackendJson(
+        supabase,
+        `/api/dashboard/monitor-bootstrap?${searchParams.toString()}`,
+        {
+          method: "GET",
+          timeoutMs: 2e4,
+          retries: 0,
+          dedupeKey: `monitor-bootstrap::${requestKey}::${force ? "force" : "cached"}`
+        }
+      );
+      if (requestId !== activeRequestIdRef.current) {
+        return;
+      }
+      const workspaceMetrics = transformWorkspaceMetrics(response.workspace_metrics || []);
+      const activeBreaks = transformActiveBreaks(response.active_breaks_by_line);
+      const metadata = normalizeMetadata(response.metadata);
+      if (metadata.idleTimeVlmByLine) {
+        hydrateFromBackend(metadata.idleTimeVlmByLine);
+      }
+      setState({
+        requestKey,
+        resolvedScope: response.resolved_scope || [],
+        scopeKey: response.scope_key || null,
+        lines: response.lines || [],
+        workspaceMetrics,
+        lineMetrics: response.line_metrics || [],
+        kpiTrend: response.kpi_trend || null,
+        activeBreaks,
+        videoStreamsByWorkspaceId: response.video_streams_by_workspace_id || {},
+        efficiencyLegend: response.efficiency_legend || null,
+        metadata
+      });
+    } catch (fetchError) {
+      if (requestId !== activeRequestIdRef.current) {
+        return;
+      }
+      setError(fetchError instanceof Error ? fetchError : new Error("Failed to load live monitor bootstrap"));
+    } finally {
+      if (requestId === activeRequestIdRef.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [enabled, supabase, resolvedCompanyId, normalizedLineIds, requestKey, hydrateFromBackend]);
+  React143.useEffect(() => {
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+    if (!resolvedCompanyId || normalizedLineIds.length === 0 || !supabase) {
+      setState(createEmptyState());
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+    void fetchBootstrap(false);
+  }, [enabled, resolvedCompanyId, normalizedLineIds, supabase, fetchBootstrap]);
+  React143.useEffect(() => {
+    if (!enabled || !resolvedCompanyId || normalizedLineIds.length === 0 || !supabase) {
+      return void 0;
+    }
+    let intervalId = null;
+    let timeoutId = null;
+    const runMinuteTick = () => {
+      void fetchBootstrap(true);
+    };
+    const startInterval = () => {
+      runMinuteTick();
+      intervalId = window.setInterval(runMinuteTick, 6e4);
+    };
+    const msUntilNextMinute = (() => {
+      const remainder = Date.now() % 6e4;
+      return remainder === 0 ? 6e4 : 6e4 - remainder;
+    })();
+    timeoutId = window.setTimeout(startInterval, msUntilNextMinute);
+    return () => {
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+      if (intervalId !== null) {
+        window.clearInterval(intervalId);
+      }
+    };
+  }, [enabled, resolvedCompanyId, normalizedLineIds, supabase, fetchBootstrap]);
+  const isCurrentScopeResolved = state.requestKey === requestKey;
+  return {
+    resolvedScope: state.resolvedScope,
+    scopeKey: state.scopeKey,
+    lines: state.lines,
+    workspaceMetrics: state.workspaceMetrics,
+    lineMetrics: state.lineMetrics,
+    kpiTrend: state.kpiTrend,
+    activeBreaks: state.activeBreaks,
+    videoStreamsByWorkspaceId: state.videoStreamsByWorkspaceId,
+    efficiencyLegend: state.efficiencyLegend,
+    metadata: state.metadata,
+    isLoading: enabled ? isLoading || !isCurrentScopeResolved : false,
+    isCurrentScopeResolved,
+    error,
+    refetch: () => fetchBootstrap(true)
+  };
+};
+
+// src/lib/utils/liveMonitorBootstrap.ts
+var toNumber3 = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+  return 0;
+};
+var normalizeNullableNumber = (value) => {
+  if (value === null || value === void 0 || value === "") return null;
+  return toNumber3(value);
+};
+var getLiveMonitorBootstrapMode = () => {
+  const rawMode = (process.env.NEXT_PUBLIC_MONITOR_BOOTSTRAP_MODE || "").trim().toLowerCase();
+  if (rawMode === "legacy" || rawMode === "shadow" || rawMode === "bootstrap") {
+    return rawMode;
+  }
+  return "bootstrap";
+};
+var normalizeMonitorShadowSnapshot = (input) => {
+  const sortedSelectedLineIds = Array.from(new Set((input.selectedLineIds || []).filter(Boolean))).sort();
+  const resolvedScope = (input.resolvedScope || []).filter((entry) => entry?.line_id && entry?.date && entry?.shift_id !== void 0 && entry?.shift_id !== null).map((entry) => ({
+    line_id: entry.line_id,
+    date: entry.date,
+    shift_id: entry.shift_id
+  })).sort((left, right) => {
+    if (left.line_id !== right.line_id) return left.line_id.localeCompare(right.line_id);
+    if (left.date !== right.date) return left.date.localeCompare(right.date);
+    return left.shift_id - right.shift_id;
+  });
+  const lines = (input.lines || []).filter((entry) => entry?.line_id).map((entry) => ({
+    line_id: entry.line_id,
+    line_name: entry.line_name || "Unknown Line"
+  })).sort((left, right) => left.line_id.localeCompare(right.line_id));
+  const workspaces = (input.workspaces || []).map((workspace) => {
+    const workspaceId = workspace.workspace_uuid || null;
+    const stream = workspaceId ? input.videoStreamsByWorkspaceId?.[workspaceId] || null : null;
+    return {
+      workspace_id: workspaceId,
+      line_id: workspace.line_id,
+      workspace_name: workspace.workspace_name,
+      display_name: workspace.displayName || null,
+      efficiency: toNumber3(workspace.efficiency),
+      trend: toNumber3(workspace.trend),
+      show_exclamation: Boolean(workspace.show_exclamation),
+      scheduled_break_active: Boolean(workspace.scheduled_break_active),
+      action_count: toNumber3(workspace.action_count),
+      action_threshold: toNumber3(workspace.action_threshold),
+      predicted_output: toNumber3(workspace.predicted_output),
+      avg_cycle_time: toNumber3(workspace.avg_cycle_time),
+      pph: toNumber3(workspace.pph),
+      recent_flow_percent: normalizeNullableNumber(workspace.recent_flow_percent),
+      incoming_wip_current: normalizeNullableNumber(workspace.incoming_wip_current),
+      video_stream: stream ? {
+        workspace_id: stream.workspace_id,
+        camera_uuid: stream.camera_uuid,
+        stream_camera_uuid: stream.stream_camera_uuid,
+        hls_url: stream.hls_url,
+        crop: stream.crop
+      } : null
+    };
+  }).sort((left, right) => {
+    if (left.line_id !== right.line_id) return left.line_id.localeCompare(right.line_id);
+    return left.workspace_name.localeCompare(right.workspace_name, void 0, { numeric: true });
+  });
+  const activeBreaks = (input.activeBreaks || []).map((activeBreak) => ({
+    lineId: activeBreak.lineId,
+    shiftName: activeBreak.shiftName,
+    startTime: activeBreak.startTime,
+    endTime: activeBreak.endTime,
+    remainingMinutes: toNumber3(activeBreak.remainingMinutes)
+  })).sort((left, right) => {
+    if (left.lineId !== right.lineId) return left.lineId.localeCompare(right.lineId);
+    if (left.shiftName !== right.shiftName) return left.shiftName.localeCompare(right.shiftName);
+    return left.startTime.localeCompare(right.startTime);
+  });
+  return {
+    selectedLineIds: sortedSelectedLineIds,
+    resolvedScope,
+    lines,
+    workspaces,
+    activeBreaks,
+    kpis: input.kpis || null,
+    kpiTrend: input.kpiTrend || null,
+    efficiencyLegend: input.efficiencyLegend || null
+  };
+};
+var diffMonitorShadowSnapshots = (legacySnapshot, bootstrapSnapshot) => {
+  const mismatches = [];
+  const compareSection = (section) => {
+    const legacyValue = legacySnapshot[section];
+    const bootstrapValue = bootstrapSnapshot[section];
+    if (JSON.stringify(legacyValue) !== JSON.stringify(bootstrapValue)) {
+      mismatches.push({
+        section,
+        legacy: legacyValue,
+        bootstrap: bootstrapValue
+      });
+    }
+  };
+  compareSection("selectedLineIds");
+  compareSection("resolvedScope");
+  compareSection("lines");
+  compareSection("workspaces");
+  compareSection("activeBreaks");
+  compareSection("kpis");
+  compareSection("kpiTrend");
+  compareSection("efficiencyLegend");
+  return mismatches;
+};
 
 // src/lib/services/notificationService.ts
 var API_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_URL;
@@ -60872,7 +61332,10 @@ var logDebug3 = (...args) => {
   if (!DEBUG_DASHBOARD_LOGS3) return;
   console.log(...args);
 };
+var EMPTY_LINE_IDS = [];
+var EMPTY_WORKSPACES = [];
 var LoadingPageCmp = LoadingPage_default;
+var LoadingOverlayCmp = LoadingOverlay_default;
 function HomeView({
   defaultLineId,
   factoryViewId,
@@ -61020,6 +61483,7 @@ function HomeView({
     return createNotificationService(supabaseClient);
   }, [supabaseClient]);
   const [bottleneckNotification, setBottleneckNotification] = React143.useState(null);
+  const showBottleneckNotificationRef = React143.useRef(null);
   const [bottleneckModalOpen, setBottleneckModalOpen] = React143.useState(false);
   const [bottleneckModalData, setBottleneckModalData] = React143.useState(null);
   const [diagnosisModalOpen, setDiagnosisModalOpen] = React143.useState(false);
@@ -61030,6 +61494,11 @@ function HomeView({
     dashboardConfig?.shiftConfig
   );
   const shouldEnableMetricsFetch = authStatus === "ready";
+  const liveMonitorMode = React143.useMemo(() => getLiveMonitorBootstrapMode(), []);
+  const isLegacyMonitorMode = liveMonitorMode === "legacy";
+  const isShadowMonitorMode = liveMonitorMode === "shadow";
+  const isBootstrapMonitorMode = liveMonitorMode === "bootstrap";
+  const lastShadowMismatchSignatureRef = React143.useRef(null);
   const handleLineMetricsUpdate = React143.useCallback(() => {
     if (trendRefreshTimerRef.current) {
       window.clearTimeout(trendRefreshTimerRef.current);
@@ -61045,45 +61514,24 @@ function HomeView({
     }
   }, []);
   const {
-    workspaceMetrics,
-    lineMetrics,
-    efficiencyLegend,
-    metadata: metricsMetadata,
-    isLoading: metricsLoading,
-    error: metricsError,
-    refetch: refetchMetrics
+    workspaceMetrics: legacyWorkspaceMetrics,
+    lineMetrics: legacyLineMetrics,
+    efficiencyLegend: legacyEfficiencyLegend,
+    metadata: legacyMetricsMetadata,
+    isLoading: legacyMetricsLoading,
+    isCurrentScopeResolved: legacyIsCurrentScopeResolved,
+    error: legacyMetricsError,
+    refetch: refetchLegacyMetrics
   } = useDashboardMetrics({
     lineId: metricsScopeLineId,
     lineIds: selectedLineIds,
     onLineMetricsUpdate: handleLineMetricsUpdate,
     userAccessibleLineIds: visibleLineIds,
-    // Pass user's accessible lines for supervisor filtering
-    enabled: shouldEnableMetricsFetch
+    enabled: shouldEnableMetricsFetch && !isBootstrapMonitorMode
   });
-  const metricsDisplayNames = React143.useMemo(() => {
-    const nextDisplayNames = {};
-    workspaceMetrics.forEach((workspace) => {
-      if (!workspace.displayName) {
-        return;
-      }
-      nextDisplayNames[`${workspace.line_id}_${workspace.workspace_name}`] = workspace.displayName;
-    });
-    return nextDisplayNames;
-  }, [workspaceMetrics]);
-  React143.useEffect(() => {
-    workspaceMetrics.forEach((workspace) => {
-      if (!workspace.displayName) {
-        return;
-      }
-      upsertWorkspaceDisplayNameInCache({
-        lineId: workspace.line_id,
-        workspaceId: workspace.workspace_name,
-        displayName: workspace.displayName
-      });
-    });
-  }, [workspaceMetrics]);
-  const trendGroups = React143.useMemo(() => {
-    const lineMetricsRows = lineMetrics || [];
+  const legacyTrendGroups = React143.useMemo(() => {
+    if (isBootstrapMonitorMode) return null;
+    const lineMetricsRows = legacyLineMetrics || [];
     if (!lineMetricsRows.length) return null;
     if (selectedLineIds.length > 1) {
       const rowsForLines = lineMetricsRows.filter((row2) => selectedLineIdSet.has(row2?.line_id));
@@ -61109,7 +61557,7 @@ function HomeView({
         shiftId: group.shiftId
       }));
     }
-    const row = lineMetricsRows.find((r2) => r2?.line_id === primarySelectedLineId);
+    const row = lineMetricsRows.find((candidate) => candidate?.line_id === primarySelectedLineId);
     if (!row?.date || row?.shift_id === void 0 || row?.shift_id === null) {
       return null;
     }
@@ -61118,69 +61566,115 @@ function HomeView({
       date: row.date,
       shiftId: row.shift_id
     }];
-  }, [lineMetrics, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
-  const trendOptions = React143.useMemo(() => {
-    if (!trendGroups || !userCompanyId) return null;
+  }, [isBootstrapMonitorMode, legacyLineMetrics, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
+  const legacyTrendOptions = React143.useMemo(() => {
+    if (isBootstrapMonitorMode || !legacyTrendGroups || !userCompanyId) return null;
     return {
-      groups: trendGroups,
+      groups: legacyTrendGroups,
       companyId: userCompanyId,
       refreshKey: trendRefreshKey,
       forceRefresh: trendRefreshKey > 0
     };
-  }, [trendGroups, userCompanyId, trendRefreshKey]);
-  const { trend: kpiTrend } = useKpiTrends(trendOptions);
-  const hasFlowBuffers = Boolean(metricsMetadata?.hasFlowBuffers);
+  }, [isBootstrapMonitorMode, legacyTrendGroups, userCompanyId, trendRefreshKey]);
+  const { trend: legacyKpiTrend } = useKpiTrends(legacyTrendOptions);
+  const bootstrapMonitor = useLiveMonitorBootstrap({
+    lineIds: selectedLineIds,
+    companyId: userCompanyId,
+    enabled: shouldEnableMetricsFetch && !isLegacyMonitorMode
+  });
+  const currentWorkspaceMetrics = isBootstrapMonitorMode ? bootstrapMonitor.workspaceMetrics : legacyWorkspaceMetrics;
+  const currentLineMetrics = isBootstrapMonitorMode ? bootstrapMonitor.lineMetrics : legacyLineMetrics;
+  const currentEfficiencyLegend = isBootstrapMonitorMode ? bootstrapMonitor.efficiencyLegend : legacyEfficiencyLegend;
+  const currentMetricsMetadata = isBootstrapMonitorMode ? bootstrapMonitor.metadata : legacyMetricsMetadata;
+  const currentMetricsLoading = isBootstrapMonitorMode ? bootstrapMonitor.isLoading : legacyMetricsLoading;
+  const currentIsCurrentScopeResolved = isBootstrapMonitorMode ? bootstrapMonitor.isCurrentScopeResolved : legacyIsCurrentScopeResolved;
+  const currentMetricsError = isBootstrapMonitorMode ? bootstrapMonitor.error : legacyMetricsError;
+  const currentRefetchMetrics = isBootstrapMonitorMode ? bootstrapMonitor.refetch : refetchLegacyMetrics;
+  const metricsDisplayNames = React143.useMemo(() => {
+    const nextDisplayNames = {};
+    currentWorkspaceMetrics.forEach((workspace) => {
+      if (!workspace.displayName) {
+        return;
+      }
+      nextDisplayNames[`${workspace.line_id}_${workspace.workspace_name}`] = workspace.displayName;
+    });
+    return nextDisplayNames;
+  }, [currentWorkspaceMetrics]);
+  React143.useEffect(() => {
+    currentWorkspaceMetrics.forEach((workspace) => {
+      if (!workspace.displayName) {
+        return;
+      }
+      upsertWorkspaceDisplayNameInCache({
+        lineId: workspace.line_id,
+        workspaceId: workspace.workspace_name,
+        displayName: workspace.displayName
+      });
+    });
+  }, [currentWorkspaceMetrics]);
+  const hasFlowBuffers = Boolean(currentMetricsMetadata?.hasFlowBuffers);
   React143.useEffect(() => {
-    const sample = workspaceMetrics.slice(0, 3).map((workspace) => ({
+    const sample = currentWorkspaceMetrics.slice(0, 3).map((workspace) => ({
       id: workspace.workspace_uuid || workspace.workspace_name,
       efficiency: workspace.efficiency,
       trend: workspace.trend,
       lineId: workspace.line_id
     }));
     logDebug3("[HomeView] workspaceMetrics update:", {
-      count: workspaceMetrics.length,
-      isLoading: metricsLoading,
-      error: metricsError?.message,
+      count: currentWorkspaceMetrics.length,
+      isLoading: currentMetricsLoading,
+      error: currentMetricsError?.message,
       sample
     });
-  }, [workspaceMetrics, metricsLoading, metricsError]);
-  const kpis = React143.useMemo(() => {
-    const lineMetricsRows = lineMetrics || [];
+  }, [currentWorkspaceMetrics, currentMetricsLoading, currentMetricsError]);
+  const buildDisplayKpis = React143.useCallback((sourceLineMetrics, sourceIsLoading, sourceKpiTrend) => {
+    const lineMetricsRows = sourceLineMetrics || [];
+    let baseKpis = null;
     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 === primarySelectedLineId);
-    if (!row) {
-      if (metricsLoading) return null;
-      return buildKPIsFromLineMetricsRow(null);
-    }
-    return buildKPIsFromLineMetricsRow(row);
-  }, [lineMetrics, metricsLoading, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
-  const kpisWithTrend = React143.useMemo(() => {
-    if (!kpis) return null;
-    if (!kpiTrend) return kpis;
+      const rowsForSelectedLines = lineMetricsRows.filter((row) => selectedLineIdSet.has(row?.line_id));
+      if (sourceIsLoading && rowsForSelectedLines.length === 0) return null;
+      baseKpis = aggregateKPIsFromLineMetricsRows(rowsForSelectedLines);
+    } else {
+      const row = lineMetricsRows.find((candidate) => candidate?.line_id === primarySelectedLineId);
+      if (!row) {
+        if (sourceIsLoading) return null;
+        baseKpis = buildKPIsFromLineMetricsRow(null);
+      } else {
+        baseKpis = buildKPIsFromLineMetricsRow(row);
+      }
+    }
+    if (!baseKpis || !sourceKpiTrend) {
+      return baseKpis;
+    }
     return {
-      ...kpis,
+      ...baseKpis,
       efficiency: {
-        ...kpis.efficiency,
-        change: kpiTrend.efficiency?.delta_pp ?? kpis.efficiency.change
+        ...baseKpis.efficiency,
+        change: sourceKpiTrend.efficiency?.delta_pp ?? baseKpis.efficiency.change
       },
       outputProgress: {
-        ...kpis.outputProgress,
-        change: kpiTrend.outputProgress?.delta_pp ?? kpis.outputProgress.change
+        ...baseKpis.outputProgress,
+        change: sourceKpiTrend.outputProgress?.delta_pp ?? baseKpis.outputProgress.change
       },
       underperformingWorkers: {
-        ...kpis.underperformingWorkers,
-        change: kpiTrend.underperformingWorkers?.delta_count ?? kpis.underperformingWorkers.change
+        ...baseKpis.underperformingWorkers,
+        change: sourceKpiTrend.underperformingWorkers?.delta_count ?? baseKpis.underperformingWorkers.change
       },
       avgCycleTime: {
-        ...kpis.avgCycleTime,
-        change: kpiTrend.avgCycleTime?.delta_seconds ?? kpis.avgCycleTime.change
+        ...baseKpis.avgCycleTime,
+        change: sourceKpiTrend.avgCycleTime?.delta_seconds ?? baseKpis.avgCycleTime.change
       }
     };
-  }, [kpis, kpiTrend]);
+  }, [primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
+  const legacyKpisWithTrend = React143.useMemo(
+    () => buildDisplayKpis(legacyLineMetrics, legacyMetricsLoading, legacyKpiTrend),
+    [buildDisplayKpis, legacyLineMetrics, legacyMetricsLoading, legacyKpiTrend]
+  );
+  const bootstrapKpisWithTrend = React143.useMemo(
+    () => buildDisplayKpis(bootstrapMonitor.lineMetrics, bootstrapMonitor.isLoading, bootstrapMonitor.kpiTrend),
+    [buildDisplayKpis, bootstrapMonitor.lineMetrics, bootstrapMonitor.isLoading, bootstrapMonitor.kpiTrend]
+  );
+  const currentKpisWithTrend = isBootstrapMonitorMode ? bootstrapKpisWithTrend : legacyKpisWithTrend;
   const selectedLineMeta = React143.useMemo(
     () => selectedLineIds.length === 1 ? dbLines.find((line) => line.id === primarySelectedLineId) : void 0,
     [dbLines, primarySelectedLineId, selectedLineIds.length]
@@ -61189,40 +61683,121 @@ function HomeView({
   const isUptimeMode = selectedMonitoringMode === "uptime";
   const averageIdleTimeSeconds = React143.useMemo(() => {
     if (!isUptimeMode) return null;
-    const targetWorkspaces = workspaceMetrics.filter((ws) => ws.line_id === primarySelectedLineId);
+    const targetWorkspaces = currentWorkspaceMetrics.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, primarySelectedLineId, workspaceMetrics]);
+  }, [isUptimeMode, primarySelectedLineId, currentWorkspaceMetrics]);
   const {
-    activeBreaks: allActiveBreaks,
-    isLoading: breaksLoading,
-    error: breaksError
-  } = useActiveBreaks(visibleLineIds);
-  const activeBreaks = React143.useMemo(() => {
+    activeBreaks: legacyAllActiveBreaks,
+    isLoading: legacyBreaksLoading,
+    error: legacyBreaksError
+  } = useActiveBreaks(isBootstrapMonitorMode ? EMPTY_LINE_IDS : visibleLineIds);
+  const legacyActiveBreaks = React143.useMemo(() => {
     if (isAllLinesSelection(selectedLineIds)) {
-      return allActiveBreaks;
+      return legacyAllActiveBreaks;
     }
-    return allActiveBreaks.filter((breakItem) => selectedLineIdSet.has(breakItem.lineId));
-  }, [allActiveBreaks, selectedLineIdSet, selectedLineIds]);
+    return legacyAllActiveBreaks.filter((breakItem) => selectedLineIdSet.has(breakItem.lineId));
+  }, [legacyAllActiveBreaks, selectedLineIdSet, selectedLineIds]);
+  const currentActiveBreaks = isBootstrapMonitorMode ? bootstrapMonitor.activeBreaks : legacyActiveBreaks;
+  const currentBreaksLoading = isBootstrapMonitorMode ? bootstrapMonitor.isLoading : legacyBreaksLoading;
+  const currentBreaksError = isBootstrapMonitorMode ? bootstrapMonitor.error?.message || null : legacyBreaksError;
   const activeBreakLineIds = React143.useMemo(
-    () => new Set(activeBreaks.map((breakItem) => breakItem.lineId)),
-    [activeBreaks]
+    () => new Set(currentActiveBreaks.map((breakItem) => breakItem.lineId)),
+    [currentActiveBreaks]
   );
   const workspaceMetricsWithBreakState = React143.useMemo(
-    () => workspaceMetrics.map((workspace) => ({
+    () => currentWorkspaceMetrics.map((workspace) => ({
       ...workspace,
       scheduled_break_active: activeBreakLineIds.has(workspace.line_id)
     })),
-    [workspaceMetrics, activeBreakLineIds]
+    [currentWorkspaceMetrics, activeBreakLineIds]
   );
   const [breakNotificationsDismissed, setBreakNotificationsDismissed] = React143.useState(false);
   React143.useEffect(() => {
-    if (activeBreaks.length > 0) {
+    if (currentActiveBreaks.length > 0) {
       setBreakNotificationsDismissed(false);
     }
-  }, [activeBreaks.length]);
+  }, [currentActiveBreaks.length]);
+  const {
+    streamsByWorkspaceId: legacyVideoStreamsByWorkspaceId,
+    isLoading: legacyVideoStreamsLoading
+  } = useWorkspaceVideoStreams(isBootstrapMonitorMode ? EMPTY_WORKSPACES : legacyWorkspaceMetrics, {
+    lineIds: isBootstrapMonitorMode ? EMPTY_LINE_IDS : selectedLineIds
+  });
+  const currentVideoStreamsByWorkspaceId = isBootstrapMonitorMode ? bootstrapMonitor.videoStreamsByWorkspaceId : legacyVideoStreamsByWorkspaceId;
+  const currentVideoStreamsLoading = isBootstrapMonitorMode ? bootstrapMonitor.isLoading : legacyVideoStreamsLoading;
+  React143.useEffect(() => {
+    if (!isShadowMonitorMode) {
+      lastShadowMismatchSignatureRef.current = null;
+      return;
+    }
+    if (!shouldEnableMetricsFetch || legacyMetricsLoading || !legacyIsCurrentScopeResolved || bootstrapMonitor.isLoading || !bootstrapMonitor.isCurrentScopeResolved) {
+      return;
+    }
+    const legacySnapshot = normalizeMonitorShadowSnapshot({
+      selectedLineIds,
+      workspaces: workspaceMetricsWithBreakState,
+      kpis: legacyKpisWithTrend,
+      kpiTrend: legacyKpiTrend,
+      activeBreaks: legacyActiveBreaks,
+      videoStreamsByWorkspaceId: legacyVideoStreamsByWorkspaceId,
+      efficiencyLegend: legacyEfficiencyLegend
+    });
+    const bootstrapSnapshot = normalizeMonitorShadowSnapshot({
+      selectedLineIds,
+      resolvedScope: bootstrapMonitor.resolvedScope,
+      lines: bootstrapMonitor.lines,
+      workspaces: bootstrapMonitor.workspaceMetrics.map((workspace) => ({
+        ...workspace,
+        scheduled_break_active: bootstrapMonitor.activeBreaks.some((activeBreak) => activeBreak.lineId === workspace.line_id)
+      })),
+      kpis: bootstrapKpisWithTrend,
+      kpiTrend: bootstrapMonitor.kpiTrend,
+      activeBreaks: bootstrapMonitor.activeBreaks,
+      videoStreamsByWorkspaceId: bootstrapMonitor.videoStreamsByWorkspaceId,
+      efficiencyLegend: bootstrapMonitor.efficiencyLegend
+    });
+    const mismatches = diffMonitorShadowSnapshots(legacySnapshot, bootstrapSnapshot);
+    const signature = JSON.stringify(mismatches);
+    if (mismatches.length === 0) {
+      lastShadowMismatchSignatureRef.current = null;
+      return;
+    }
+    if (lastShadowMismatchSignatureRef.current === signature) {
+      return;
+    }
+    lastShadowMismatchSignatureRef.current = signature;
+    console.error("[HomeView][monitor-shadow-mismatch]", {
+      selectedLineIds,
+      mismatches,
+      legacySnapshot,
+      bootstrapSnapshot
+    });
+  }, [
+    bootstrapKpisWithTrend,
+    bootstrapMonitor.activeBreaks,
+    bootstrapMonitor.efficiencyLegend,
+    bootstrapMonitor.isCurrentScopeResolved,
+    bootstrapMonitor.isLoading,
+    bootstrapMonitor.kpiTrend,
+    bootstrapMonitor.lines,
+    bootstrapMonitor.resolvedScope,
+    bootstrapMonitor.videoStreamsByWorkspaceId,
+    bootstrapMonitor.workspaceMetrics,
+    isShadowMonitorMode,
+    legacyActiveBreaks,
+    legacyEfficiencyLegend,
+    legacyIsCurrentScopeResolved,
+    legacyKpiTrend,
+    legacyKpisWithTrend,
+    legacyMetricsLoading,
+    legacyVideoStreamsByWorkspaceId,
+    selectedLineIds,
+    shouldEnableMetricsFetch,
+    workspaceMetricsWithBreakState
+  ]);
   const showBottleneckNotification = React143.useCallback(async (bottleneck) => {
     try {
       logDebug3("\u{1F514} [Notification] Raw bottleneck data:", bottleneck);
@@ -61400,6 +61975,9 @@ function HomeView({
       setBottleneckNotification(errorNotification);
     }
   }, [notificationService, timezone, dashboardConfig, lineShiftConfigs]);
+  React143.useEffect(() => {
+    showBottleneckNotificationRef.current = showBottleneckNotification;
+  }, [showBottleneckNotification]);
   React143.useEffect(() => {
     const ticketsEnabled = dashboardConfig?.ticketsConfig?.enabled ?? true;
     if (!ticketsEnabled) {
@@ -61469,7 +62047,7 @@ function HomeView({
           });
           if (latestTicket.event_type === "bottleneck") {
             logDebug3("\u{1F514} [Polling] Showing bottleneck notification for:", latestTicket.log_number);
-            showBottleneckNotification(latestTicket);
+            await showBottleneckNotificationRef.current?.(latestTicket);
           } else {
             logDebug3("\u26A0\uFE0F [Polling] Non-bottleneck ticket found but no handler configured:", latestTicket.event_type);
           }
@@ -61489,29 +62067,30 @@ function HomeView({
       clearInterval(pollInterval);
       clearTimeout(initialPollTimer);
     };
-  }, [notificationService, userCompanyId, user, showBottleneckNotification, dashboardConfig?.ticketsConfig?.enabled]);
+  }, [
+    dashboardConfig?.ticketsConfig?.enabled,
+    notificationService,
+    user?.email,
+    user?.role_level,
+    userCompanyId
+  ]);
   const handleWorkspaceHover = React143.useCallback((workspaceId) => {
   }, []);
   const handleWorkspaceHoverEnd = React143.useCallback((workspaceId) => {
   }, []);
-  const {
-    streamsByWorkspaceId: videoStreamsByWorkspaceId,
-    isLoading: videoStreamsLoading
-  } = useWorkspaceVideoStreams(workspaceMetrics);
-  const memoizedKPIs = React143.useMemo(() => kpisWithTrend, [
+  const memoizedKPIs = React143.useMemo(() => currentKpisWithTrend, [
     // Only update reference when values change by at least 1%
-    kpisWithTrend?.efficiency?.value ? Math.round(kpisWithTrend.efficiency.value) : null,
-    kpisWithTrend?.efficiency?.change,
-    kpisWithTrend?.underperformingWorkers?.current,
-    kpisWithTrend?.underperformingWorkers?.total,
-    kpisWithTrend?.underperformingWorkers?.change,
-    kpisWithTrend?.outputProgress?.current,
-    kpisWithTrend?.outputProgress?.target,
-    kpisWithTrend?.outputProgress?.change,
-    kpisWithTrend?.avgCycleTime?.value ? Math.round(kpisWithTrend.avgCycleTime.value * 10) / 10 : null,
-    // Round to 1 decimal
-    kpisWithTrend?.avgCycleTime?.change,
-    kpisWithTrend?.qualityCompliance?.value ? Math.round(kpisWithTrend.qualityCompliance.value) : null,
+    currentKpisWithTrend?.efficiency?.value ? Math.round(currentKpisWithTrend.efficiency.value) : null,
+    currentKpisWithTrend?.efficiency?.change,
+    currentKpisWithTrend?.underperformingWorkers?.current,
+    currentKpisWithTrend?.underperformingWorkers?.total,
+    currentKpisWithTrend?.underperformingWorkers?.change,
+    currentKpisWithTrend?.outputProgress?.current,
+    currentKpisWithTrend?.outputProgress?.target,
+    currentKpisWithTrend?.outputProgress?.change,
+    currentKpisWithTrend?.avgCycleTime?.value ? Math.round(currentKpisWithTrend.avgCycleTime.value * 10) / 10 : null,
+    currentKpisWithTrend?.avgCycleTime?.change,
+    currentKpisWithTrend?.qualityCompliance?.value ? Math.round(currentKpisWithTrend.qualityCompliance.value) : null,
     selectedLineIdsKey
   ]);
   React143.useEffect(() => {
@@ -61522,13 +62101,13 @@ function HomeView({
       dashboard_surface: "monitor"
     });
   }, []);
-  const metricsErrorMessage = metricsError?.message || null;
+  const metricsErrorMessage = currentMetricsError?.message || null;
   const handleRetryDashboardData = React143.useCallback(async () => {
     if (isRecoveringSession) {
       await retrySessionHydration();
     }
-    refetchMetrics();
-  }, [isRecoveringSession, refetchMetrics, retrySessionHydration]);
+    await currentRefetchMetrics();
+  }, [currentRefetchMetrics, isRecoveringSession, retrySessionHydration]);
   const getTrackedLineScope = React143.useCallback((lineIdsForScope) => {
     if (isAllLinesSelection(lineIdsForScope)) {
       return factoryViewId;
@@ -61581,12 +62160,15 @@ function HomeView({
     updateSelectedLineIds(Array.from(currentSelection));
   }, [selectedLineIds, updateSelectedLineIds]);
   React143.useEffect(() => {
-    if (!metricsLoading && isChangingFilter) {
+    if (!isChangingFilter) {
+      return;
+    }
+    if (!currentMetricsLoading && currentIsCurrentScopeResolved || currentMetricsError) {
       setIsChangingFilter(false);
     }
-  }, [metricsLoading, isChangingFilter]);
+  }, [currentIsCurrentScopeResolved, currentMetricsError, currentMetricsLoading, isChangingFilter]);
   React143.useEffect(() => {
-    if (shouldEnableMetricsFetch && !metricsLoading && !metricsError && !hasInitialDataLoaded) {
+    if (shouldEnableMetricsFetch && !currentMetricsLoading && !currentMetricsError && !hasInitialDataLoaded) {
       setHasInitialDataLoaded(true);
       trackCoreEvent("monitor page loaded", {
         default_line_id: defaultLineId,
@@ -61595,7 +62177,7 @@ function HomeView({
         dashboard_surface: "monitor"
       });
     }
-  }, [shouldEnableMetricsFetch, metricsLoading, metricsError, hasInitialDataLoaded, defaultLineId, factoryViewId, isSupervisor]);
+  }, [shouldEnableMetricsFetch, currentMetricsLoading, currentMetricsError, hasInitialDataLoaded, defaultLineId, factoryViewId, isSupervisor]);
   const lineTitle = React143.useMemo(() => {
     return factoryName;
   }, [factoryName]);
@@ -61746,15 +62328,15 @@ function HomeView({
     return showLoading;
   };
   const isAuthBootstrapping = authStatus === "loading";
-  const isInitialLoading = !isHydrated || !hasInitialDataLoaded && (isAuthBootstrapping || shouldEnableMetricsFetch && metricsLoading);
-  const isDataLoading = metricsLoading;
+  const isInitialLoading = !isHydrated || !hasInitialDataLoaded && (isAuthBootstrapping || shouldEnableMetricsFetch && currentMetricsLoading);
+  const isDataLoading = currentMetricsLoading;
   const hasKpiDataReady = React143.useMemo(() => {
-    const lineMetricsRows = lineMetrics || [];
+    const lineMetricsRows = currentLineMetrics || [];
     if (selectedLineIds.length > 1) {
       return lineMetricsRows.some((row) => selectedLineIdSet.has(row?.line_id));
     }
     return lineMetricsRows.some((row) => row?.line_id === primarySelectedLineId);
-  }, [lineMetrics, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
+  }, [currentLineMetrics, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
   const isKpiLoading = !hasKpiDataReady;
   const shouldShowReconnectScreen = !hasInitialDataLoaded && (isRecoveringSession || !shouldEnableMetricsFetch && authStatus !== "failed" || !!metricsErrorMessage && authStatus !== "failed");
   const shouldShowFatalLoadFailure = !hasInitialDataLoaded && !!metricsErrorMessage && authStatus === "failed";
@@ -61782,6 +62364,7 @@ function HomeView({
     return () => clearTimeout(timer);
   }, [isDataLoading]);
   const shouldShowDataLoading = showDataLoading || isDataLoading;
+  const shouldShowFilterChangeLoader = isChangingFilter && !currentIsCurrentScopeResolved;
   const shouldShowKpiLoading = useSmoothLoading(isKpiLoading, 400);
   const displayKpis = shouldShowKpiLoading ? null : memoizedKPIs;
   const kpiSectionControl = React143.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx(
@@ -61866,7 +62449,7 @@ function HomeView({
               }
             )
           ] }) }) : null,
-          /* @__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(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative 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 },
@@ -61878,10 +62461,10 @@ function HomeView({
                 lineNames: mergedLineNames,
                 lineOrder: selectedLineIds,
                 factoryView: factoryViewId,
-                legend: efficiencyLegend,
+                legend: currentEfficiencyLegend,
                 videoSources,
-                videoStreamsByWorkspaceId,
-                videoStreamsLoading,
+                videoStreamsByWorkspaceId: currentVideoStreamsByWorkspaceId,
+                videoStreamsLoading: currentVideoStreamsLoading,
                 displayNames: metricsDisplayNames,
                 hasFlowBuffers,
                 className: "h-full",
@@ -61889,8 +62472,7 @@ function HomeView({
                 onWorkspaceHover: handleWorkspaceHover,
                 onWorkspaceHoverEnd: handleWorkspaceHoverEnd
               })
-            },
-            selectedLineIdsKey
+            }
           ) : !shouldShowDataLoading && hasInitialDataLoaded ? /* @__PURE__ */ jsxRuntime.jsx(
             motion.div,
             {
@@ -61912,10 +62494,10 @@ function HomeView({
                 lineNames: mergedLineNames,
                 lineOrder: selectedLineIds,
                 factoryView: factoryViewId,
-                legend: efficiencyLegend,
+                legend: currentEfficiencyLegend,
                 videoSources,
-                videoStreamsByWorkspaceId,
-                videoStreamsLoading,
+                videoStreamsByWorkspaceId: currentVideoStreamsByWorkspaceId,
+                videoStreamsLoading: currentVideoStreamsLoading,
                 displayNames: metricsDisplayNames,
                 hasFlowBuffers,
                 className: "h-full",
@@ -61923,16 +62505,15 @@ function HomeView({
                 onWorkspaceHover: handleWorkspaceHover,
                 onWorkspaceHoverEnd: handleWorkspaceHoverEnd
               })
-            },
-            selectedLineIdsKey
+            }
           ) }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           BreakNotificationPopup,
           {
-            activeBreaks,
+            activeBreaks: currentActiveBreaks,
             lineNames: mergedLineNames,
-            isVisible: !breaksLoading && !breaksError && !breakNotificationsDismissed,
+            isVisible: !currentBreaksLoading && !currentBreaksError && !breakNotificationsDismissed,
             onDismiss: () => setBreakNotificationsDismissed(true)
           }
         ),
@@ -61944,6 +62525,15 @@ function HomeView({
             onDismiss: () => setBottleneckNotification(null)
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LoadingOverlayCmp,
+          {
+            isVisible: shouldShowFilterChangeLoader,
+            message: "Loading Dashboard...",
+            className: "bg-slate-50/30 backdrop-blur-[3px]",
+            contentVariant: "plain"
+          }
+        ),
         diagnosisModalOpen && bottleneckModalData?.clipId && /* @__PURE__ */ jsxRuntime.jsx(
           DiagnosisVideoModal,
           {
@@ -62194,7 +62784,7 @@ var buildLineInfoSnapshot = (lineDetails, metrics2) => {
     }
   };
 };
-var transformWorkspaceMetrics = (workspaceData, lineId, companyId, queryDate, queryShiftId) => (workspaceData || []).map((item) => ({
+var transformWorkspaceMetrics2 = (workspaceData, lineId, companyId, queryDate, queryShiftId) => (workspaceData || []).map((item) => ({
   company_id: item.company_id || companyId,
   line_id: item.line_id || lineId,
   shift_id: item.shift_id ?? queryShiftId,
@@ -62342,7 +62932,7 @@ var useLineDetailPageData = ({
       setDetailResponse(nextDetail);
       const metrics3 = transformLineMetrics(lineId, nextDetail, queryDate, queryShiftId);
       const lineDetails2 = transformLineDetails(lineId, nextDetail);
-      const workspaces2 = transformWorkspaceMetrics(
+      const workspaces2 = transformWorkspaceMetrics2(
         nextDetail.workspace_metrics || [],
         lineId,
         companyId,
@@ -62432,7 +63022,7 @@ var useLineDetailPageData = ({
     [detailResponse, lineId]
   );
   const workspaces = React143.useMemo(
-    () => detailResponse && companyId ? transformWorkspaceMetrics(detailResponse.workspace_metrics || [], lineId, companyId, queryDate, queryShiftId) : [],
+    () => detailResponse && companyId ? transformWorkspaceMetrics2(detailResponse.workspace_metrics || [], lineId, companyId, queryDate, queryShiftId) : [],
     [detailResponse, companyId, lineId, queryDate, queryShiftId]
   );
   const lineInfo = React143.useMemo(() => buildLineInfoSnapshot(lineDetails, metrics2), [lineDetails, metrics2]);
@@ -74054,7 +74644,8 @@ var TeamManagementView = ({
       const bootstrapData = await bootstrapResponse.json();
       setAvailableFactories((bootstrapData.factories || []).map((factory) => ({
         id: factory.id,
-        factory_name: factory.factory_name
+        factory_name: factory.factory_name,
+        company_id: factory.company_id
       })));
       setAvailableLines(bootstrapData.lines || []);
       setUsers(bootstrapData.users || []);
@@ -79022,7 +79613,7 @@ var efficiencyLineConfig = [
 var bumpRenderCounter = (key) => {
   if (process.env.NODE_ENV === "test") ;
 };
-var toNumber3 = (value) => {
+var toNumber4 = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) return value;
   if (typeof value === "string" && value.trim().length > 0) {
     const parsed = Number(value);
@@ -79557,7 +80148,7 @@ var OverviewSummaryCards = React143__namespace.default.memo(({ store }) => {
       workspaceId: item.workspace_id || "",
       workspaceName: item.workspace_name?.trim() || item.workspace_id || "Unknown",
       lineName: item.line_name?.trim() || "Unknown Line",
-      avgIdleSeconds: toNumber3(item.avg_idle_seconds)
+      avgIdleSeconds: toNumber4(item.avg_idle_seconds)
     })).slice(0, 5);
   }, [snapshot.data.summary.avg_idle_per_workstation?.top_contributors]);
   const showIdleContributorLineNames = React143__namespace.default.useMemo(() => {
@@ -79772,9 +80363,9 @@ var PoorestPerformersCard = React143__namespace.default.memo(({
       return {
         id: lineId,
         name: line.line_name?.trim() || "Unknown Line",
-        efficiency: roundOne(toNumber3(line.avg_efficiency) || 0),
-        previousEfficiency: toNumber3(line.previous_avg_efficiency),
-        delta: toNumber3(line.delta_pp),
+        efficiency: roundOne(toNumber4(line.avg_efficiency) || 0),
+        previousEfficiency: toNumber4(line.previous_avg_efficiency),
+        delta: toNumber4(line.delta_pp),
         supervisor: supervisor?.displayName || "Unassigned",
         supervisorImage: supervisor?.profilePhotoUrl ?? null
       };
@@ -79883,14 +80474,14 @@ var IdleBreakdownCard = React143__namespace.default.memo(({
       paletteToken: item.palette_token?.trim(),
       iconToken: item.icon_token?.trim(),
       isKnown: item.is_known ?? void 0,
-      value: toNumber3(item.percentage) || 0,
-      totalDurationSeconds: toNumber3(item.total_duration_seconds),
-      efficiencyLossPercentage: toNumber3(item.efficiency_loss_percentage),
+      value: toNumber4(item.percentage) || 0,
+      totalDurationSeconds: toNumber4(item.total_duration_seconds),
+      efficiencyLossPercentage: toNumber4(item.efficiency_loss_percentage),
       contributors: (item.contributors || []).map((contributor) => ({
         workspaceId: contributor.workspace_id || "",
         workspaceName: contributor.workspace_name?.trim() || "Unknown",
-        totalDurationSeconds: toNumber3(contributor.total_duration_seconds),
-        percentageWithinReason: toNumber3(contributor.percentage_within_reason)
+        totalDurationSeconds: toNumber4(contributor.total_duration_seconds),
+        percentageWithinReason: toNumber4(contributor.percentage_within_reason)
       }))
     })).filter((item) => item.value > 0);
   }, [idle.data]);
@@ -79959,7 +80550,7 @@ var EfficiencyTrendCard = React143__namespace.default.memo(({
           return `${hour12}:${minutes.toString().padStart(2, "0")} ${suffix}`;
         })(),
         efficiency: (() => {
-          const value = toNumber3(point.avg_efficiency);
+          const value = toNumber4(point.avg_efficiency);
           return value === null ? void 0 : value;
         })()
       }));
@@ -79972,7 +80563,7 @@ var EfficiencyTrendCard = React143__namespace.default.memo(({
           name: dateFns.format(pointDate, "MMM d"),
           dayOfWeek: dateFns.format(pointDate, "EEEE"),
           efficiency: (() => {
-            const value = toNumber3(point.avg_efficiency);
+            const value = toNumber4(point.avg_efficiency);
             return value === null ? void 0 : value;
           })()
         }]];
@@ -79996,7 +80587,7 @@ var EfficiencyTrendCard = React143__namespace.default.memo(({
         name: pointDate ? dateFns.format(pointDate, "MMM d") : "",
         dayOfWeek: pointDate ? dateFns.format(pointDate, "EEEE") : "",
         efficiency: (() => {
-          const value = toNumber3(point.avg_efficiency);
+          const value = toNumber4(point.avg_efficiency);
           return value === null ? void 0 : value;
         })()
       };
@@ -80120,7 +80711,7 @@ var debugRefreshLog = (message, payload) => {
 var isAbortError2 = (error) => {
   return error instanceof DOMException && error.name === "AbortError";
 };
-var toNumber4 = (value) => {
+var toNumber5 = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) return value;
   if (typeof value === "string" && value.trim().length > 0) {
     const parsed = Number(value);
@@ -80129,11 +80720,11 @@ var toNumber4 = (value) => {
   return null;
 };
 var formatImprovementMetric = (recommendation) => {
-  const estimatedGain = toNumber4(recommendation.estimated_gain_pieces);
+  const estimatedGain = toNumber5(recommendation.estimated_gain_pieces);
   if (estimatedGain !== null && estimatedGain > 0) {
     return `+${Math.round(estimatedGain).toLocaleString()} pcs / day`;
   }
-  const idleMinutes = toNumber4(recommendation.metrics?.idle_minutes);
+  const idleMinutes = toNumber5(recommendation.metrics?.idle_minutes);
   if (idleMinutes !== null) {
     return `-${Math.round(idleMinutes)}m Idle`;
   }