@optifye/dashboard-core 6.11.16 → 6.11.18

package/dist/index.js

@@ -3295,11 +3295,9 @@ var normalizeShiftDefinitions = (timezone, shiftConfig) => {
   }
   return { shifts: legacyShifts, timezone: fallbackTimezone };
 };
-var determineShiftFromDefinitions = (timezone, shifts, now4 = /* @__PURE__ */ new Date()) => {
+var determineActiveShiftFromDefinitions = (timezone, shifts, now4 = /* @__PURE__ */ new Date()) => {
   const zonedNow = dateFnsTz.toZonedTime(now4, timezone);
   const currentMinutes = zonedNow.getHours() * 60 + zonedNow.getMinutes();
-  let chosen;
-  let operationalDate = getOperationalDate(timezone, now4, shifts[0].startTime);
   for (const shift of shifts) {
     const start = parseTimeToMinutes(shift.startTime);
     const endRaw = parseTimeToMinutes(shift.endTime);
@@ -3307,32 +3305,47 @@ var determineShiftFromDefinitions = (timezone, shifts, now4 = /* @__PURE__ */ ne
     const wraps = end <= start;
     if (wraps) end += 1440;
     if (start <= currentMinutes && currentMinutes < end) {
-      chosen = shift;
-      operationalDate = getOperationalDate(timezone, now4, shift.startTime);
-      break;
+      return {
+        shiftId: shift.shiftId,
+        shiftName: shift.shiftName,
+        startTime: shift.startTime,
+        endTime: shift.endTime,
+        timezone,
+        date: getOperationalDate(timezone, now4, shift.startTime)
+      };
     }
     if (start <= currentMinutes + 1440 && currentMinutes + 1440 < end) {
-      chosen = shift;
-      operationalDate = getOperationalDate(timezone, now4, shift.startTime);
-      break;
+      return {
+        shiftId: shift.shiftId,
+        shiftName: shift.shiftName,
+        startTime: shift.startTime,
+        endTime: shift.endTime,
+        timezone,
+        date: getOperationalDate(timezone, now4, shift.startTime)
+      };
     }
   }
-  if (!chosen) {
-    chosen = shifts[0];
-    operationalDate = getOperationalDate(timezone, now4, chosen.startTime);
+  return null;
+};
+var getCurrentShift = (timezone, shiftConfig, now4 = /* @__PURE__ */ new Date()) => {
+  const { shifts, timezone: effectiveTz } = normalizeShiftDefinitions(timezone, shiftConfig);
+  const activeShift = determineActiveShiftFromDefinitions(effectiveTz, shifts, now4);
+  if (activeShift) {
+    return activeShift;
   }
+  const fallbackShift = shifts[0];
   return {
-    shiftId: chosen.shiftId,
-    shiftName: chosen.shiftName,
-    startTime: chosen.startTime,
-    endTime: chosen.endTime,
-    timezone,
-    date: operationalDate
+    shiftId: fallbackShift.shiftId,
+    shiftName: fallbackShift.shiftName,
+    startTime: fallbackShift.startTime,
+    endTime: fallbackShift.endTime,
+    timezone: effectiveTz,
+    date: getOperationalDate(effectiveTz, now4, fallbackShift.startTime)
   };
 };
-var getCurrentShift = (timezone, shiftConfig, now4 = /* @__PURE__ */ new Date()) => {
+var getActiveShift = (timezone, shiftConfig, now4 = /* @__PURE__ */ new Date()) => {
   const { shifts, timezone: effectiveTz } = normalizeShiftDefinitions(timezone, shiftConfig);
-  return determineShiftFromDefinitions(effectiveTz, shifts, now4);
+  return determineActiveShiftFromDefinitions(effectiveTz, shifts, now4);
 };
 var isTransitionPeriod = (timezone, shiftConfig, now4 = /* @__PURE__ */ new Date()) => {
   const transitionMinutes = shiftConfig?.transitionPeriodMinutes ?? DEFAULT_TRANSITION_MINUTES;
@@ -3997,7 +4010,8 @@ var dashboardService = {
           enable,
           monitoring_mode,
           assembly,
-          video_grid_metric_mode
+          video_grid_metric_mode,
+          recent_flow_window_minutes
         `).eq("enable", true);
       if (companyId) {
         query = query.eq("company_id", companyId);
@@ -4022,7 +4036,8 @@ var dashboardService = {
         video_grid_metric_mode: normalizeVideoGridMetricMode(
           line.video_grid_metric_mode,
           line.assembly ?? false
-        )
+        ),
+        recent_flow_window_minutes: line.recent_flow_window_minutes ?? 7
       }));
       return transformedLines;
     } catch (err) {
@@ -4059,7 +4074,7 @@ var dashboardService = {
         }
         const lineIdsToQuery = configuredLineIds;
         const [line1Result, metricsResult2] = await Promise.all([
-          supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", defaultLineId).single(),
+          supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, recent_flow_window_minutes, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", defaultLineId).single(),
           supabase.from(lineMetricsTable).select("*").in("line_id", lineIdsToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
         ]);
         if (line1Result.error) throw line1Result.error;
@@ -4115,6 +4130,7 @@ var dashboardService = {
           date: queryDate,
           shift_id: queryShiftId,
           monitoring_mode: line1Data.monitoring_mode ?? void 0,
+          recent_flow_window_minutes: line1Data.recent_flow_window_minutes ?? 7,
           metrics: {
             avg_efficiency: avgEfficiency,
             avg_cycle_time: combinedMetricsData.avg_cycle_time / numLines,
@@ -4138,7 +4154,7 @@ var dashboardService = {
         throw new Error("Company ID must be configured for detailed line requests.");
       }
       const [lineResult, metricsResult] = await Promise.all([
-        supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single(),
+        supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, recent_flow_window_minutes, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single(),
         supabase.from(lineMetricsTable).select("*").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
       ]);
       if (lineResult.error) throw lineResult.error;
@@ -4163,6 +4179,7 @@ var dashboardService = {
         date: queryDate,
         shift_id: queryShiftId,
         monitoring_mode: lineData.monitoring_mode ?? void 0,
+        recent_flow_window_minutes: lineData.recent_flow_window_minutes ?? 7,
         metrics: {
           avg_efficiency: metrics2?.avg_efficiency ?? 0,
           avg_cycle_time: metrics2?.avg_cycle_time || 0,
@@ -8496,7 +8513,8 @@ var LinesService = class {
         videoGridMetricMode: normalizeVideoGridMetricMode(
           line.video_grid_metric_mode,
           line.assembly ?? false
-        )
+        ),
+        recentFlowWindowMinutes: line.recent_flow_window_minutes ?? 7
       }));
     } catch (error) {
       console.error("Error fetching lines:", error);
@@ -8544,7 +8562,8 @@ var LinesService = class {
         videoGridMetricMode: normalizeVideoGridMetricMode(
           line.video_grid_metric_mode,
           line.assembly ?? false
-        )
+        ),
+        recentFlowWindowMinutes: line.recent_flow_window_minutes ?? 7
       }));
     } catch (error) {
       console.error("Error fetching all lines:", error);
@@ -8601,7 +8620,8 @@ var LinesService = class {
         videoGridMetricMode: normalizeVideoGridMetricMode(
           data.video_grid_metric_mode,
           data.assembly ?? false
-        )
+        ),
+        recentFlowWindowMinutes: data.recent_flow_window_minutes ?? 7
       };
     } catch (error) {
       console.error("Error fetching line:", error);
@@ -13355,6 +13375,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
             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,
           incoming_wip_current: item.incoming_wip_current ?? null,
@@ -32203,6 +32224,7 @@ var LineChartComponent = ({
   xAxisLabel,
   xAxisTickFormatter,
   // Pass through for X-axis tick formatting
+  xAxisInterval,
   yAxisLabel,
   yAxisUnit,
   yAxisDomain,
@@ -32285,6 +32307,7 @@ var LineChartComponent = ({
             dataKey: xAxisDataKey,
             label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -10 } : void 0,
             tickFormatter: xAxisTickFormatter,
+            interval: xAxisInterval,
             tick: { fontSize: 12, fill: axisTickFillColor },
             stroke: axisStrokeColor
           }
@@ -32609,6 +32632,212 @@ var CycleTimeChart = React141__namespace.default.memo(CycleTimeChartComponent, (
   });
 });
 CycleTimeChart.displayName = "CycleTimeChart";
+
+// src/lib/utils/hourlyIdle.ts
+var DEFAULT_SHIFT_DURATION = 11;
+var normalizeMinuteSeries = (idleTimeHourly) => {
+  if (!idleTimeHourly || typeof idleTimeHourly !== "object") {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(idleTimeHourly).map(([key, value]) => {
+      if (Array.isArray(value)) {
+        return [key, value];
+      }
+      if (value && Array.isArray(value.values)) {
+        return [key, value.values];
+      }
+      return [key, []];
+    })
+  );
+};
+var parseTimeString = (timeValue) => {
+  const [hoursPart, minutesPart] = timeValue.split(":");
+  const hour = Number.parseInt(hoursPart, 10);
+  const minute = Number.parseInt(minutesPart ?? "0", 10);
+  const safeHour = Number.isFinite(hour) ? hour : 0;
+  const safeMinute = Number.isFinite(minute) ? minute : 0;
+  return {
+    hour: safeHour,
+    minute: safeMinute,
+    decimalHour: safeHour + safeMinute / 60
+  };
+};
+var buildShiftLayout = ({
+  shiftStart,
+  shiftEnd
+}) => {
+  const shiftStartTime = parseTimeString(shiftStart);
+  if (!shiftEnd) {
+    return {
+      shiftDuration: DEFAULT_SHIFT_DURATION,
+      shiftStartTime,
+      shiftEndTime: null,
+      hasPartialLastHour: false
+    };
+  }
+  const shiftEndTime = parseTimeString(shiftEnd);
+  let duration = shiftEndTime.decimalHour - shiftStartTime.decimalHour;
+  if (duration <= 0) {
+    duration += 24;
+  }
+  const hasPartialLastHour = shiftEndTime.minute > 0 && shiftEndTime.minute < 60;
+  const shiftDuration = hasPartialLastHour ? Math.ceil(duration) : Math.round(duration);
+  return {
+    shiftDuration,
+    shiftStartTime,
+    shiftEndTime,
+    hasPartialLastHour
+  };
+};
+var formatCompactTime = (hour, minute) => {
+  const period = hour >= 12 ? "PM" : "AM";
+  const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+  if (minute === 0) {
+    return `${hour12}${period}`;
+  }
+  return `${hour12}:${minute.toString().padStart(2, "0")}${period}`;
+};
+var formatFullTime = (hour, minute) => {
+  const period = hour >= 12 ? "PM" : "AM";
+  const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+  return `${hour12}:${minute.toString().padStart(2, "0")} ${period}`;
+};
+var getSlotTimeBounds = (hourIndex, layout2) => {
+  const isLastHour = hourIndex === layout2.shiftDuration - 1;
+  const startDecimalHour = layout2.shiftStartTime.decimalHour + hourIndex;
+  const startHour = Math.floor(startDecimalHour) % 24;
+  const startMinute = Math.round(startDecimalHour % 1 * 60);
+  let endHour;
+  let endMinute;
+  if (isLastHour && layout2.shiftEndTime) {
+    endHour = layout2.shiftEndTime.hour;
+    endMinute = layout2.shiftEndTime.minute;
+  } else {
+    const endDecimalHour = startDecimalHour + 1;
+    endHour = Math.floor(endDecimalHour) % 24;
+    endMinute = Math.round(endDecimalHour % 1 * 60);
+  }
+  return {
+    startHour,
+    startMinute,
+    endHour,
+    endMinute
+  };
+};
+var getIdleArrayForHour = (hourIndex, idleTimeHourly, layout2) => {
+  const actualHour = (layout2.shiftStartTime.hour + hourIndex) % 24;
+  const startMinute = layout2.shiftStartTime.minute;
+  if (startMinute > 0) {
+    if (hourIndex === 0) {
+      const firstHourData = idleTimeHourly[actualHour.toString()] || [];
+      const nextHourData2 = idleTimeHourly[((actualHour + 1) % 24).toString()] || [];
+      return [
+        ...firstHourData.slice(startMinute),
+        ...nextHourData2.slice(0, startMinute)
+      ];
+    }
+    if (hourIndex < layout2.shiftDuration - 1) {
+      const currentHourData3 = idleTimeHourly[actualHour.toString()] || [];
+      const nextHourData2 = idleTimeHourly[((actualHour + 1) % 24).toString()] || [];
+      return [
+        ...currentHourData3.slice(startMinute),
+        ...nextHourData2.slice(0, startMinute)
+      ];
+    }
+    if (layout2.hasPartialLastHour && layout2.shiftEndTime) {
+      const currentHourData3 = idleTimeHourly[actualHour.toString()] || [];
+      const nextHourData2 = idleTimeHourly[((actualHour + 1) % 24).toString()] || [];
+      return [
+        ...currentHourData3.slice(startMinute),
+        ...nextHourData2.slice(0, layout2.shiftEndTime.minute)
+      ];
+    }
+    const currentHourData2 = idleTimeHourly[actualHour.toString()] || [];
+    const nextHourData = idleTimeHourly[((actualHour + 1) % 24).toString()] || [];
+    return [
+      ...currentHourData2.slice(startMinute),
+      ...nextHourData.slice(0, startMinute)
+    ];
+  }
+  const currentHourData = idleTimeHourly[actualHour.toString()] || [];
+  if (hourIndex === layout2.shiftDuration - 1 && layout2.hasPartialLastHour && layout2.shiftEndTime) {
+    return currentHourData.slice(0, layout2.shiftEndTime.minute);
+  }
+  return currentHourData;
+};
+var buildHourlyIdleSlots = ({
+  idleTimeHourly,
+  shiftStart,
+  shiftEnd
+}) => {
+  const normalizedIdleTimeHourly = normalizeMinuteSeries(idleTimeHourly);
+  const layout2 = buildShiftLayout({ shiftStart, shiftEnd });
+  return Array.from({ length: layout2.shiftDuration }, (_, hourIndex) => {
+    const { startHour, startMinute, endHour, endMinute } = getSlotTimeBounds(hourIndex, layout2);
+    const idleArray = getIdleArrayForHour(hourIndex, normalizedIdleTimeHourly, layout2);
+    const idleMinutes = idleArray.filter((value) => value === 1 || value === "1").length;
+    return {
+      hourIndex,
+      hour: `${formatCompactTime(startHour, startMinute)}-${formatCompactTime(endHour, endMinute)}`,
+      timeRange: `${formatFullTime(startHour, startMinute)} - ${formatFullTime(endHour, endMinute)}`,
+      idleMinutes,
+      idleArray
+    };
+  });
+};
+var formatIdleTimestamp = ({
+  shiftStart,
+  hourIndex,
+  minuteIndex
+}) => {
+  const shiftStartTime = parseTimeString(shiftStart);
+  const totalMinutes = (shiftStartTime.hour + hourIndex) * 60 + shiftStartTime.minute + minuteIndex;
+  const hour = Math.floor(totalMinutes / 60) % 24;
+  const minute = totalMinutes % 60;
+  return formatFullTime(hour, minute);
+};
+var getHourlyIdlePeriods = ({
+  idleArray,
+  shiftStart,
+  hourIndex
+}) => {
+  if (!Array.isArray(idleArray) || idleArray.length === 0) {
+    return [];
+  }
+  const periods = [];
+  let currentRange = null;
+  idleArray.forEach((value, minuteIndex) => {
+    if (value === 1 || value === "1") {
+      if (!currentRange) {
+        currentRange = { start: minuteIndex, end: minuteIndex };
+      } else {
+        currentRange.end = minuteIndex;
+      }
+    } else if (value !== "x" && currentRange) {
+      periods.push(currentRange);
+      currentRange = null;
+    }
+  });
+  if (currentRange) {
+    periods.push(currentRange);
+  }
+  return periods.map((period) => ({
+    start: period.start,
+    end: period.end,
+    duration: period.end - period.start + 1,
+    startTime: formatIdleTimestamp({
+      shiftStart,
+      hourIndex,
+      minuteIndex: period.start
+    }),
+    endTime: formatIdleTimestamp({
+      shiftStart,
+      hourIndex,
+      minuteIndex: period.end + 1
+    })
+  }));
+};
 var CycleTimeOverTimeChart = ({
   data,
   idealCycleTime,
@@ -32618,7 +32847,8 @@ var CycleTimeOverTimeChart = ({
   datasetKey,
   className = "",
   showIdleTime = false,
-  idleTimeData = []
+  idleTimeData = [],
+  idleTimeSlots = []
 }) => {
   const MAX_DATA_POINTS = 40;
   const containerRef = React141__namespace.default.useRef(null);
@@ -32721,50 +32951,60 @@ var CycleTimeOverTimeChart = ({
     if (!visibleEntries.length) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          backgroundColor: "white",
-          border: "none",
-          borderRadius: "8px",
-          boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-          padding: "8px 12px",
-          fontSize: "13px"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                color: "#374151",
-                fontWeight: 600,
-                marginBottom: "4px"
-              },
-              children: payload[0]?.payload?.tooltip || ""
-            }
-          ),
-          visibleEntries.map((entry) => {
-            const numericValue = getNumericValue(entry.value);
-            if (numericValue === null) {
-              return null;
-            }
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  color: "#4B5563",
-                  padding: "2px 0"
-                },
-                children: entry.name === "idleMinutes" ? `Idle Time: ${numericValue.toFixed(0)} minutes` : `Cycle Time: ${numericValue.toFixed(1)} seconds`
-              },
-              `${entry.name}-${numericValue}`
-            );
-          })
-        ]
-      }
-    );
-  }, [getNumericValue]);
+    const dataPoint = payload[0]?.payload || {};
+    const idlePeriods = showIdleTime && typeof dataPoint.idleMinutes === "number" && dataPoint.idleMinutes > 0 ? getHourlyIdlePeriods({
+      idleArray: dataPoint.idleArray,
+      shiftStart,
+      hourIndex: Number.isFinite(dataPoint.hourIndex) ? dataPoint.hourIndex : 0
+    }) : [];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-xl border border-gray-100 p-4 min-w-[220px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-gray-900 text-sm", children: dataPoint.timeRange || dataPoint.tooltip || "" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        visibleEntries.map((entry) => {
+          const numericValue = getNumericValue(entry.value);
+          if (numericValue === null) {
+            return null;
+          }
+          if (entry.name === "idleMinutes") {
+            if (!showIdleTime) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-100 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Idle Time" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-orange-600 text-sm", children: [
+                numericValue.toFixed(0),
+                " minutes"
+              ] })
+            ] }) }, `${entry.name}-${numericValue}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Cycle Time" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900 text-sm", children: [
+              numericValue.toFixed(1),
+              " seconds"
+            ] })
+          ] }, `${entry.name}-${numericValue}`);
+        }),
+        idlePeriods.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-gray-50 rounded-lg p-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-700 text-xs mb-2", children: "Idle periods:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idlePeriods.map((period, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: period.duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              period.startTime,
+              " (",
+              period.duration,
+              " min)"
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              period.startTime,
+              " - ",
+              period.endTime,
+              " (",
+              period.duration,
+              " mins)"
+            ] }) })
+          ] }, index)) })
+        ] })
+      ] })
+    ] });
+  }, [getNumericValue, shiftStart, showIdleTime]);
   const renderCycleDot = React141__namespace.default.useCallback((props) => {
     const { cx: cx2, cy, payload } = props;
     const cycleTime = getNumericValue(payload?.cycleTime);
@@ -32833,14 +33073,18 @@ var CycleTimeOverTimeChart = ({
         r: 4,
         fill: "#f59e0b",
         stroke: "#fff",
-        strokeWidth: 1
+        strokeWidth: 1,
+        style: {
+          opacity: showIdleTime ? 1 : 0,
+          transition: "opacity 0.3s ease-in-out"
+        }
       }
     );
-  }, [getNumericValue]);
+  }, [getNumericValue, showIdleTime]);
   const renderIdleActiveDot = React141__namespace.default.useCallback((props) => {
     const { cx: cx2, cy, payload } = props;
     const idleMinutes = getNumericValue(payload?.idleMinutes);
-    if (idleMinutes === null) {
+    if (idleMinutes === null || !showIdleTime) {
       return /* @__PURE__ */ jsxRuntime.jsx("g", {});
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -32854,25 +33098,40 @@ var CycleTimeOverTimeChart = ({
         strokeWidth: 2
       }
     );
-  }, [getNumericValue]);
+  }, [getNumericValue, showIdleTime]);
   const chartData = React141__namespace.default.useMemo(() => Array.from({ length: DURATION }, (_, i) => {
     const cycleTime = getNumericValue(finalData[i]);
-    const idleMinutes = showIdleTime ? getNumericValue(idleTimeData[i]) : null;
+    const useIdleSlots = idleTimeSlots.length > 0;
+    const idleSlot = useIdleSlots ? idleTimeSlots[i] ?? null : null;
+    const idleMinutes = useIdleSlots ? idleSlot?.idleMinutes ?? null : getNumericValue(idleTimeData[i]);
     return {
       timeIndex: i,
       label: formatTimeLabel(i),
-      tooltip: formatTooltipTime(i),
+      tooltip: idleSlot?.timeRange || formatTooltipTime(i),
+      timeRange: idleSlot?.timeRange || formatTooltipTime(i),
+      hourIndex: idleSlot?.hourIndex ?? i,
       cycleTime,
       idleMinutes,
+      idleArray: idleSlot?.idleArray || [],
       color: cycleTime !== null && cycleTime <= idealCycleTime ? "#00AB45" : "#E34329"
     };
-  }), [DURATION, finalData, showIdleTime, idleTimeData, idealCycleTime, getNumericValue]);
+  }), [DURATION, finalData, idleTimeData, idleTimeSlots, idealCycleTime, getNumericValue]);
   const renderLegend = () => {
-    if (!showIdleTime) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start text-[10px] font-bold text-gray-500 mb-6 tracking-[0.05em] gap-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-[#f59e0b]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Idle Time (min)" })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex items-center justify-start text-[10px] font-bold text-gray-500 mb-6 tracking-[0.05em] gap-5",
+        style: {
+          opacity: showIdleTime ? 1 : 0,
+          pointerEvents: showIdleTime ? "auto" : "none",
+          transition: "opacity 0.3s ease-in-out"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-[#f59e0b]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Idle Time (min)" })
+        ] })
+      }
+    );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -32943,7 +33202,7 @@ var CycleTimeOverTimeChart = ({
                       }
                     }
                   ),
-                  showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     recharts.YAxis,
                     {
                       yAxisId: "idle",
@@ -32952,7 +33211,11 @@ var CycleTimeOverTimeChart = ({
                       width: 35,
                       domain: [0, 60],
                       tickFormatter: (value) => `${value}m`,
-                      tick: { fontSize: 11, fill: "#f59e0b" },
+                      tick: {
+                        fontSize: 11,
+                        fill: showIdleTime ? "#f59e0b" : "transparent",
+                        style: { transition: "fill 0.3s ease-in-out" }
+                      },
                       axisLine: false,
                       tickLine: false
                     }
@@ -33000,7 +33263,7 @@ var CycleTimeOverTimeChart = ({
                     },
                     `${effectiveDatasetKey}:cycle`
                   ),
-                  showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     recharts.Line,
                     {
                       type: "monotone",
@@ -33015,7 +33278,11 @@ var CycleTimeOverTimeChart = ({
                       isAnimationActive: true,
                       animationBegin: 300,
                       animationDuration: 1500,
-                      animationEasing: "ease-out"
+                      animationEasing: "ease-out",
+                      style: {
+                        strokeOpacity: showIdleTime ? 1 : 0,
+                        transition: "stroke-opacity 0.3s ease-in-out"
+                      }
                     },
                     `${effectiveDatasetKey}:idle`
                   )
@@ -33170,89 +33437,20 @@ var HourlyOutputChartComponent = ({
   shiftEnd,
   showIdleTime = false,
   idleTimeHourly,
-  idleTimeClips,
-  idleTimeClipClassifications,
-  shiftDate,
-  timezone,
   className = ""
 }) => {
   const containerRef = React141__namespace.default.useRef(null);
   const [containerReady, setContainerReady] = React141__namespace.default.useState(false);
   const [containerWidth, setContainerWidth] = React141__namespace.default.useState(0);
-  const getTimeFromTimeString2 = (timeStr) => {
-    const [hours, minutes] = timeStr.split(":");
-    const hour = parseInt(hours);
-    const minute = parseInt(minutes || "0");
-    const decimalHour = hour + minute / 60;
-    return { hour, minute, decimalHour };
-  };
-  const shiftStartTime = getTimeFromTimeString2(shiftStart);
-  React141__namespace.default.useMemo(() => {
-    if (!shiftDate || !timezone) return null;
-    const hour = shiftStartTime.hour.toString().padStart(2, "0");
-    const minute = shiftStartTime.minute.toString().padStart(2, "0");
-    return dateFnsTz.fromZonedTime(`${shiftDate}T${hour}:${minute}:00`, timezone);
-  }, [shiftDate, timezone, shiftStartTime.hour, shiftStartTime.minute]);
-  const idleClipRanges = React141__namespace.default.useMemo(() => {
-    if (!idleTimeClips || idleTimeClips.length === 0) return [];
-    return idleTimeClips.map((clip) => ({
-      id: clip.id,
-      start: clip.idle_start_time ? new Date(clip.idle_start_time) : null,
-      end: clip.idle_end_time ? new Date(clip.idle_end_time) : null
-    })).filter((clip) => clip.start && clip.end);
-  }, [idleTimeClips]);
-  React141__namespace.default.useCallback((rangeStart, rangeEnd) => {
-    if (!rangeStart || !rangeEnd || idleClipRanges.length === 0) {
-      return "Reason unavailable";
-    }
-    const matchingClip = idleClipRanges.find((clip) => rangeStart >= clip.start && rangeEnd <= clip.end) || idleClipRanges.find((clip) => rangeStart < clip.end && rangeEnd > clip.start);
-    if (!matchingClip) {
-      return "Reason unavailable";
-    }
-    const classification = idleTimeClipClassifications?.[matchingClip.id];
-    if (!classification || classification.status === "processing") {
-      return "Analyzing...";
-    }
-    if (!classification.label) {
-      return "Reason unavailable";
-    }
-    return classification.displayName || classification.label.replace(/_/g, " ");
-  }, [idleClipRanges, idleTimeClipClassifications]);
-  const { shiftDuration, shiftEndTime, hasPartialLastHour } = React141__namespace.default.useMemo(() => {
-    console.log("[HourlyOutputChart] Calculating shift duration with:", {
+  const idleSlots = React141__namespace.default.useMemo(
+    () => buildHourlyIdleSlots({
+      idleTimeHourly,
       shiftStart,
-      shiftEnd,
-      shiftStartTime
-    });
-    if (!shiftEnd) {
-      console.log("[HourlyOutputChart] No shiftEnd provided, using default 11 hours");
-      return {
-        shiftDuration: 11,
-        shiftEndTime: null,
-        hasPartialLastHour: false
-      };
-    }
-    const endTime = getTimeFromTimeString2(shiftEnd);
-    let duration = endTime.decimalHour - shiftStartTime.decimalHour;
-    if (duration <= 0) {
-      duration += 24;
-    }
-    const hasPartial = endTime.minute > 0 && endTime.minute < 60;
-    const hourCount = hasPartial ? Math.ceil(duration) : Math.round(duration);
-    console.log("[HourlyOutputChart] Shift calculation results:", {
-      endTime,
-      duration,
-      hasPartial,
-      hourCount
-    });
-    return {
-      shiftDuration: hourCount,
-      shiftEndTime: endTime,
-      hasPartialLastHour: hasPartial
-    };
-  }, [shiftEnd, shiftStartTime.decimalHour]);
-  const SHIFT_DURATION = shiftDuration;
-  shiftEndTime ? shiftEndTime.hour : (shiftStartTime.hour + SHIFT_DURATION) % 24;
+      shiftEnd
+    }),
+    [idleTimeHourly, shiftStart, shiftEnd]
+  );
+  const SHIFT_DURATION = idleSlots.length;
   const [animatedData, setAnimatedData] = React141__namespace.default.useState(
     () => Array(SHIFT_DURATION).fill(0)
   );
@@ -33375,121 +33573,22 @@ var HourlyOutputChartComponent = ({
     }
     return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
   }, [containerWidth]);
-  const formatHour = React141__namespace.default.useCallback((hourIndex) => {
-    const isLastHour = hourIndex === SHIFT_DURATION - 1;
-    const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
-    const startHour = Math.floor(startDecimalHour) % 24;
-    const startMinute = Math.round(startDecimalHour % 1 * 60);
-    let endHour, endMinute;
-    if (isLastHour && shiftEndTime) {
-      endHour = shiftEndTime.hour;
-      endMinute = shiftEndTime.minute;
-    } else {
-      const endDecimalHour = startDecimalHour + 1;
-      endHour = Math.floor(endDecimalHour) % 24;
-      endMinute = Math.round(endDecimalHour % 1 * 60);
-    }
-    const formatTime5 = (h, m) => {
-      const period = h >= 12 ? "PM" : "AM";
-      const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-      if (m === 0) {
-        return `${hour12}${period}`;
-      }
-      return `${hour12}:${m.toString().padStart(2, "0")}${period}`;
-    };
-    return `${formatTime5(startHour, startMinute)}-${formatTime5(endHour, endMinute)}`;
-  }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const formatTimeRange2 = React141__namespace.default.useCallback((hourIndex) => {
-    const isLastHour = hourIndex === SHIFT_DURATION - 1;
-    const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
-    const startHour = Math.floor(startDecimalHour) % 24;
-    const startMinute = Math.round(startDecimalHour % 1 * 60);
-    let endHour, endMinute;
-    if (isLastHour && shiftEndTime) {
-      endHour = shiftEndTime.hour;
-      endMinute = shiftEndTime.minute;
-    } else {
-      const endDecimalHour = startDecimalHour + 1;
-      endHour = Math.floor(endDecimalHour) % 24;
-      endMinute = Math.round(endDecimalHour % 1 * 60);
-    }
-    const formatTime5 = (h, m) => {
-      const period = h >= 12 ? "PM" : "AM";
-      const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-      return `${hour12}:${m.toString().padStart(2, "0")} ${period}`;
-    };
-    return `${formatTime5(startHour, startMinute)} - ${formatTime5(endHour, endMinute)}`;
-  }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
   const chartData = React141__namespace.default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
-      const actualHour = (shiftStartTime.hour + i) % 24;
-      const startMinute = shiftStartTime.minute;
-      let idleArray = [];
-      let idleMinutes = 0;
-      if (idleTimeHourly) {
-        if (startMinute > 0) {
-          if (i === 0) {
-            const firstHourData = idleTimeHourly[actualHour.toString()] || [];
-            const nextHour = (actualHour + 1) % 24;
-            const nextHourData = idleTimeHourly[nextHour.toString()] || [];
-            idleArray = [
-              ...firstHourData.slice(startMinute) || [],
-              ...nextHourData.slice(0, startMinute) || []
-            ];
-          } else if (i < SHIFT_DURATION - 1) {
-            const currentHourData = idleTimeHourly[actualHour.toString()] || [];
-            const nextHour = (actualHour + 1) % 24;
-            const nextHourData = idleTimeHourly[nextHour.toString()] || [];
-            idleArray = [
-              ...currentHourData.slice(startMinute) || [],
-              ...nextHourData.slice(0, startMinute) || []
-            ];
-          } else {
-            const hasPartialLastHour2 = shiftEndTime && shiftEndTime.minute > 0 && shiftEndTime.minute < 60;
-            if (hasPartialLastHour2) {
-              const currentHourData = idleTimeHourly[actualHour.toString()] || [];
-              const nextHour = (actualHour + 1) % 24;
-              const nextHourData = idleTimeHourly[nextHour.toString()] || [];
-              if (startMinute > 0) {
-                const firstPart = currentHourData.slice(startMinute) || [];
-                const secondPart = nextHourData.slice(0, shiftEndTime.minute) || [];
-                idleArray = [...firstPart, ...secondPart];
-              } else {
-                idleArray = currentHourData.slice(0, shiftEndTime.minute) || [];
-              }
-            } else {
-              const currentHourData = idleTimeHourly[actualHour.toString()] || [];
-              const nextHour = (actualHour + 1) % 24;
-              const nextHourData = idleTimeHourly[nextHour.toString()] || [];
-              idleArray = [
-                ...currentHourData.slice(startMinute) || [],
-                ...nextHourData.slice(0, startMinute) || []
-              ];
-            }
-          }
-        } else {
-          const currentHourData = idleTimeHourly[actualHour.toString()] || [];
-          if (i === SHIFT_DURATION - 1 && shiftEndTime && shiftEndTime.minute > 0 && shiftEndTime.minute < 60) {
-            idleArray = currentHourData.slice(0, shiftEndTime.minute) || [];
-          } else {
-            idleArray = currentHourData || [];
-          }
-        }
-      }
-      idleMinutes = idleArray.filter((val) => val === "1" || val === 1).length;
+      const idleSlot = idleSlots[i];
       return {
-        hourIndex: i,
-        hour: formatHour(i),
-        timeRange: formatTimeRange2(i),
+        hourIndex: idleSlot?.hourIndex ?? i,
+        hour: idleSlot?.hour || "",
+        timeRange: idleSlot?.timeRange || "",
         output: animatedData[i] || 0,
         originalOutput: data[i] || 0,
         // Keep original data for labels
         color: (animatedData[i] || 0) >= Math.round(pphThreshold) ? "#00AB45" : "#E34329",
-        idleMinutes,
-        idleArray
+        idleMinutes: idleSlot?.idleMinutes || 0,
+        idleArray: idleSlot?.idleArray || []
       };
     });
-  }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange2, SHIFT_DURATION]);
+  }, [animatedData, data, pphThreshold, idleSlots, SHIFT_DURATION]);
   const IdleBar = React141__namespace.default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -33651,36 +33750,11 @@ var HourlyOutputChartComponent = ({
                   content: (props) => {
                     if (!props.active || !props.payload || props.payload.length === 0) return null;
                     const data2 = props.payload[0].payload;
-                    const idleRanges = [];
-                    if (showIdleTime && data2.idleArray) {
-                      let currentRange = null;
-                      data2.idleArray.forEach((val, idx) => {
-                        if (val === "1" || val === 1) {
-                          if (!currentRange) {
-                            currentRange = { start: idx, end: idx };
-                          } else {
-                            currentRange.end = idx;
-                          }
-                        } else if (val !== "x" && currentRange) {
-                          idleRanges.push(currentRange);
-                          currentRange = null;
-                        }
-                      });
-                      if (currentRange) {
-                        idleRanges.push(currentRange);
-                      }
-                    }
-                    const formatIdleTimestamp = (minuteIdx) => {
-                      const fallbackIndex = chartData.findIndex((item) => item.timeRange === data2.timeRange);
-                      const hourOffset = Number.isFinite(data2.hourIndex) ? data2.hourIndex : fallbackIndex;
-                      const safeHourOffset = hourOffset >= 0 ? hourOffset : 0;
-                      const totalMinutes = (shiftStartTime.hour + safeHourOffset) * 60 + shiftStartTime.minute + minuteIdx;
-                      const hour = Math.floor(totalMinutes / 60) % 24;
-                      const minute = totalMinutes % 60;
-                      const period = hour >= 12 ? "PM" : "AM";
-                      const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-                      return `${hour12}:${minute.toString().padStart(2, "0")} ${period}`;
-                    };
+                    const idlePeriods = showIdleTime ? getHourlyIdlePeriods({
+                      idleArray: data2.idleArray,
+                      shiftStart,
+                      hourIndex: Number.isFinite(data2.hourIndex) ? data2.hourIndex : 0
+                    }) : [];
                     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-xl border border-gray-100 p-4 min-w-[220px]", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-gray-900 text-sm", children: data2.timeRange }) }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
@@ -33699,27 +33773,22 @@ var HourlyOutputChartComponent = ({
                               " minutes"
                             ] })
                           ] }) }),
-                          idleRanges.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-gray-50 rounded-lg p-2.5", children: [
+                          idlePeriods.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-gray-50 rounded-lg p-2.5", children: [
                             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-700 text-xs mb-2", children: "Idle periods:" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idleRanges.map((range, index) => {
-                              const duration = range.end - range.start + 1;
-                              const startTime = formatIdleTimestamp(range.start);
-                              const endTime = formatIdleTimestamp(range.end + 1);
-                              const fallbackIndex = chartData.findIndex((item) => item.timeRange === data2.timeRange);
-                              Number.isFinite(data2.hourIndex) ? data2.hourIndex : fallbackIndex;
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idlePeriods.map((period, index) => {
                               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                  startTime,
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: period.duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                  period.startTime,
                                   " (",
-                                  duration,
+                                  period.duration,
                                   " min)"
                                 ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                  startTime,
+                                  period.startTime,
                                   " - ",
-                                  endTime,
+                                  period.endTime,
                                   " (",
-                                  duration,
+                                  period.duration,
                                   " mins)"
                                 ] }) })
                               ] }, index);
@@ -33874,9 +33943,8 @@ var HourlyOutputChart = React141__namespace.default.memo(HourlyOutputChartCompon
 HourlyOutputChart.displayName = "HourlyOutputChart";
 
 // src/components/dashboard/grid/videoGridMetricUtils.ts
-var VIDEO_GRID_LEGEND_LABEL = "7 Minute Efficiency";
 var MAP_GRID_LEGEND_LABEL = "Efficiency";
-var MIXED_VIDEO_GRID_LEGEND_LABEL = "Efficiency";
+var MIXED_VIDEO_GRID_LEGEND_LABEL = "Flow Efficiency";
 var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
 var isVideoGridRecentFlowEnabled = (workspace) => isRecentFlowVideoGridMetricMode(
   workspace.video_grid_metric_mode,
@@ -33975,8 +34043,15 @@ var getVideoGridLegendLabel = (workspaces) => {
   if (recentFlowEnabledCount === 0) {
     return MAP_GRID_LEGEND_LABEL;
   }
+  const recentFlowWindows = new Set(
+    visibleWorkspaces.filter(isVideoGridRecentFlowEnabled).map((workspace) => workspace.recent_flow_window_minutes ?? 7).filter((value) => typeof value === "number" && Number.isFinite(value))
+  );
   if (recentFlowEnabledCount === visibleWorkspaces.length) {
-    return VIDEO_GRID_LEGEND_LABEL;
+    if (recentFlowWindows.size === 1) {
+      const [windowMinutes] = Array.from(recentFlowWindows);
+      return `${windowMinutes} Minute Efficiency`;
+    }
+    return MIXED_VIDEO_GRID_LEGEND_LABEL;
   }
   return MIXED_VIDEO_GRID_LEGEND_LABEL;
 };
@@ -34028,8 +34103,9 @@ var VideoCard = React141__namespace.default.memo(({
   const isRecentFlowCard = isVideoGridRecentFlowEnabled(workspace);
   const hasDisplayMetric = typeof videoGridDisplayValue === "number" && Number.isFinite(videoGridDisplayValue);
   const hasBarMetric = typeof videoGridMetricValue === "number" && Number.isFinite(videoGridMetricValue);
+  const shouldRenderMetricBadge = hasDisplayMetric;
   const badgeTitle = hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
-  const badgeLabel = hasDisplayMetric ? `${Math.round(videoGridDisplayValue)}%` : "X";
+  const badgeLabel = `${Math.round(videoGridDisplayValue ?? 0)}%`;
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
@@ -34105,7 +34181,7 @@ var VideoCard = React141__namespace.default.memo(({
               lastSeenText
             ] })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute ${compact ? "top-1 right-1" : "top-2 right-2"} z-30`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          shouldRenderMetricBadge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute ${compact ? "top-1 right-1" : "top-2 right-2"} z-30`, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               "data-testid": "video-card-metric-badge",
@@ -35922,7 +35998,7 @@ var HourlyUptimeChartComponent = ({
                         idleRanges.push(currentRange);
                       }
                     }
-                    const formatIdleTimestamp = (minuteIdx) => {
+                    const formatIdleTimestamp2 = (minuteIdx) => {
                       const totalMinutes = (shiftStartTime.hour + data.hourIndex) * 60 + shiftStartTime.minute + minuteIdx;
                       const hour = Math.floor(totalMinutes / 60) % 24;
                       const minute = totalMinutes % 60;
@@ -35952,8 +36028,8 @@ var HourlyUptimeChartComponent = ({
                             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-700 text-xs mb-2", children: "Idle periods:" }),
                             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idleRanges.map((range, index) => {
                               const duration = range.end - range.start + 1;
-                              const startTime = formatIdleTimestamp(range.start);
-                              const endTime = formatIdleTimestamp(range.end + 1);
+                              const startTime = formatIdleTimestamp2(range.start);
+                              const endTime = formatIdleTimestamp2(range.end + 1);
                               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: duration === 1 ? `${startTime} (${duration} min)` : `${startTime} - ${endTime} (${duration} mins)` })
@@ -49832,8 +49908,7 @@ var WorkspaceCycleTimeMetricCards = ({
         {
           data: idleTimeData.chartData,
           isLoading: idleTimeData.isLoading,
-          error: idleTimeData.error,
-          variant: "bar"
+          error: idleTimeData.error
         }
       ) })
     ] })
@@ -69201,56 +69276,43 @@ var WorkspaceDetailView = ({
   const canToggleChartIdleTime = !isUptimeMode && !shouldShowCycleTimeLoadingState && !shouldShowCycleTimeUnavailableState;
   const idleClipDate = date || workspace?.date || calculatedOperationalDate || getOperationalDate(timezone);
   const idleClipShiftId = parsedShiftId ?? workspace?.shift_id;
-  const rawHourlyIdleMinutes = React141.useMemo(() => {
-    if (!shouldShowCycleTimeChart || !workspace?.idle_time_hourly || !workspace?.shift_start) return [];
-    const parseTimeToMinutes4 = (time2) => {
-      const [h, m] = time2.split(":").map(Number);
-      if (!Number.isFinite(h) || !Number.isFinite(m)) return 0;
-      return h * 60 + m;
-    };
-    const startTotal = parseTimeToMinutes4(workspace.shift_start);
-    const endTotalRaw = workspace.shift_end ? parseTimeToMinutes4(workspace.shift_end) : startTotal + 11 * 60;
-    const endTotal = endTotalRaw <= startTotal ? endTotalRaw + 24 * 60 : endTotalRaw;
-    const shiftDuration = Math.max(60, endTotal - startTotal);
-    const totalHourSlots = Math.max(1, Math.ceil(shiftDuration / 60));
-    const idleTimeHourlyObj = workspace.idle_time_hourly || {};
-    const result = Array(totalHourSlots).fill(0);
-    for (let i = 0; i < totalHourSlots; i++) {
-      const startSlotMins = startTotal + i * 60;
-      let endSlotMins = startSlotMins + 60;
-      if (endSlotMins > endTotal) endSlotMins = endTotal;
-      let idleCount = 0;
-      for (let m = startSlotMins; m < endSlotMins; m++) {
-        const hourKey = Math.floor(m / 60) % 24;
-        const minuteKey = m % 60;
-        const hourData = idleTimeHourlyObj[hourKey.toString()] || [];
-        if (Array.isArray(hourData)) {
-          const val = hourData[minuteKey];
-          if (val === 1 || val === "1") {
-            idleCount++;
-          }
-        }
-      }
-      result[i] = idleCount;
-    }
-    return result;
-  }, [shouldShowCycleTimeChart, workspace?.idle_time_hourly, workspace?.shift_start, workspace?.shift_end]);
+  const rawHourlyIdleSlots = React141.useMemo(
+    () => !shouldShowCycleTimeChart || !authoritativeCycleMetrics?.shift_start ? [] : buildHourlyIdleSlots({
+      idleTimeHourly: authoritativeCycleMetrics.idle_time_hourly,
+      shiftStart: authoritativeCycleMetrics.shift_start,
+      shiftEnd: authoritativeCycleMetrics.shift_end
+    }),
+    [
+      shouldShowCycleTimeChart,
+      authoritativeCycleMetrics?.idle_time_hourly,
+      authoritativeCycleMetrics?.shift_start,
+      authoritativeCycleMetrics?.shift_end
+    ]
+  );
+  const rawHourlyIdleMinutes = React141.useMemo(
+    () => rawHourlyIdleSlots.map((slot) => slot.idleMinutes),
+    [rawHourlyIdleSlots]
+  );
   const hourlyIdleMinutes = React141.useMemo(
     () => maskFutureHourlySeries({
       data: rawHourlyIdleMinutes,
-      shiftStart: workspace?.shift_start,
-      shiftEnd: workspace?.shift_end,
+      shiftStart: authoritativeCycleMetrics?.shift_start,
+      shiftEnd: authoritativeCycleMetrics?.shift_end,
       shiftDate: idleClipDate,
       timezone: effectiveCycleTimeTimezone
     }),
     [
       rawHourlyIdleMinutes,
-      workspace?.shift_start,
-      workspace?.shift_end,
+      authoritativeCycleMetrics?.shift_start,
+      authoritativeCycleMetrics?.shift_end,
       idleClipDate,
       effectiveCycleTimeTimezone
     ]
   );
+  const hourlyIdleSlots = React141.useMemo(
+    () => rawHourlyIdleSlots.map((slot, index) => hourlyIdleMinutes[index] === null ? null : slot),
+    [rawHourlyIdleSlots, hourlyIdleMinutes]
+  );
   const cycleTimeUnavailableView = React141.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full rounded-lg border border-amber-200 bg-amber-50/70 px-6 py-5 text-center flex flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-semibold text-amber-900", children: "Cycle data unavailable" }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 max-w-md text-sm text-amber-800", children: "This workstation has cycle-time metrics for the selected shift, but no matching `cycle_completion` clips were found for the chart." }),
@@ -69806,7 +69868,8 @@ var WorkspaceDetailView = ({
                             xAxisMode: "hourly",
                             datasetKey: cycleTimeDatasetKey,
                             showIdleTime: showChartIdleTime,
-                            idleTimeData: hourlyIdleMinutes
+                            idleTimeData: hourlyIdleMinutes,
+                            idleTimeSlots: hourlyIdleSlots
                           }
                         ) : null : /* @__PURE__ */ jsxRuntime.jsx(
                           HourlyOutputChart2,
@@ -69935,7 +69998,8 @@ var WorkspaceDetailView = ({
                               xAxisMode: "hourly",
                               datasetKey: cycleTimeDatasetKey,
                               showIdleTime: showChartIdleTime,
-                              idleTimeData: hourlyIdleMinutes
+                              idleTimeData: hourlyIdleMinutes,
+                              idleTimeSlots: hourlyIdleSlots
                             }
                           ) : null : /* @__PURE__ */ jsxRuntime.jsx(
                             HourlyOutputChart2,
@@ -76453,7 +76517,7 @@ var formatComparisonWindow = ({
   shiftMode
 }) => {
   if (comparisonStrategy === "previous_full_week") return "last week";
-  if (comparisonStrategy === "matched_range" && shiftMode !== "all" && currentDayCount === 1 && previousDayCount === 1) {
+  if (comparisonStrategy === "matched_range" && currentDayCount === 1 && previousDayCount === 1) {
     return "previous day";
   }
   if (!previousDayCount || !Number.isFinite(previousDayCount)) return "previous range";
@@ -76476,8 +76540,14 @@ var buildDeltaBadge = (delta, options) => {
   };
 };
 var normalizeShiftLabel = (shiftName, shiftMode) => {
+  if (shiftMode === "all") {
+    return "All Shifts";
+  }
   const trimmedName = shiftName?.trim();
   if (trimmedName) {
+    const normalizedName = trimmedName.toLowerCase();
+    if (normalizedName === "day") return "Day Shift";
+    if (normalizedName === "night") return "Night Shift";
     return /shift/i.test(trimmedName) ? trimmedName : `${trimmedName} Shift`;
   }
   if (shiftMode === "night") return "Night Shift";
@@ -76486,6 +76556,9 @@ var normalizeShiftLabel = (shiftName, shiftMode) => {
 var getShiftIcon = (shiftName, shiftMode) => {
   const normalizedName = (shiftName || "").toLowerCase();
   const normalizedMode = shiftMode || "day";
+  if (normalizedMode === "all") {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+  }
   if (normalizedName.includes("day") || normalizedName.includes("morning") || normalizedMode === "day") {
     return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) });
   }
@@ -76564,6 +76637,7 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
 }) => {
   bumpRenderCounter();
   const subtitleRange = displayDateRange || dateRange;
+  const showLiveShiftMeta = isLiveScope && trendMode !== "all";
   const liveShiftLabel = React141__namespace.default.useMemo(
     () => normalizeShiftLabel(liveShiftName, trendMode),
     [liveShiftName, trendMode]
@@ -76701,8 +76775,8 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-wrap items-center justify-center gap-x-2 gap-y-1 text-[11px] font-medium text-slate-500 min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-center", children: mobileSubtitle }),
-          isLiveScope ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-300", children: "|" }) : null,
-          isLiveScope ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "operations-overview-live-meta", className: "inline-flex items-center gap-1.5 text-gray-600 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 justify-center truncate", children: [
+          showLiveShiftMeta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-300", children: "|" }) : null,
+          showLiveShiftMeta ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "operations-overview-live-meta", className: "inline-flex items-center gap-1.5 text-gray-600 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 justify-center truncate", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-75 shrink-0", children: liveShiftIcon }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: liveShiftLabel })
           ] }) }) : null
@@ -76749,7 +76823,7 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs sm:text-sm font-medium text-slate-500 text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: desktopSubtitle }),
-          isLiveScope ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          showLiveShiftMeta ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-300", children: "|" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "operations-overview-live-meta", className: "inline-flex items-center gap-1.5 text-gray-600", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 justify-center", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-75", children: liveShiftIcon }),
@@ -77323,18 +77397,18 @@ var EfficiencyTrendCard = React141__namespace.default.memo(({
       return (trend.data.points || []).map((point, index) => ({
         name: (() => {
           const rawLabel = point.label?.trim() || "";
-          if (!hourlyLabelStartTime) {
-            return rawLabel || `Hour ${index + 1}`;
-          }
-          if (rawLabel && !/^Hour\s+\d+$/i.test(rawLabel)) {
+          if (rawLabel) {
             return rawLabel;
           }
+          if (!hourlyLabelStartTime) {
+            return "";
+          }
           const hourIndex = typeof point.hour_index === "number" ? point.hour_index : index;
           const [hoursPart, minutesPart] = hourlyLabelStartTime.split(":");
           const startHours = Number(hoursPart);
           const startMinutes = Number(minutesPart);
           if (!Number.isFinite(startHours) || !Number.isFinite(startMinutes)) {
-            return rawLabel || `Hour ${index + 1}`;
+            return "";
           }
           const totalMinutes = startHours * 60 + startMinutes + hourIndex * 60;
           const hour24 = Math.floor(totalMinutes / 60) % 24;
@@ -77396,6 +77470,12 @@ var EfficiencyTrendCard = React141__namespace.default.memo(({
     if (!dayOfWeek || typeof label !== "string") return label;
     return `${label} (${dayOfWeek})`;
   }, [isHourlyTrend]);
+  const trendXAxisTickFormatter = React141__namespace.default.useCallback((value, index) => {
+    if (!isHourlyTrend) {
+      return typeof value === "string" ? value : String(value ?? "");
+    }
+    return index % 2 === 0 ? typeof value === "string" ? value : String(value ?? "") : "";
+  }, [isHourlyTrend]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 flex flex-col overflow-hidden text-left", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-5 flex-none flex justify-between items-center border-b border-slate-50/50", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700", children: "Efficiency Trend" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[250px] w-full p-4 pt-4 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsxRuntime.jsx(OverviewChartSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pb-2 pr-4 pl-1", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -77404,6 +77484,8 @@ var EfficiencyTrendCard = React141__namespace.default.memo(({
         data: trendData,
         lines: efficiencyLineConfig,
         xAxisDataKey: "name",
+        xAxisInterval: isHourlyTrend ? 0 : void 0,
+        xAxisTickFormatter: trendXAxisTickFormatter,
         yAxisUnit: "%",
         yAxisDomain: [0, 100],
         showLegend: false,
@@ -77909,6 +77991,62 @@ var classifyShiftBucket = ({
   if (normalizedShiftId === 1) return "night";
   return null;
 };
+var getShiftWindowsForConfig = (shiftConfig, timezone) => {
+  if (shiftConfig?.shifts && shiftConfig.shifts.length > 0) {
+    return shiftConfig.shifts.map((shift) => ({
+      shiftId: shift.shiftId,
+      shiftName: shift.shiftName,
+      startTime: shift.startTime,
+      endTime: shift.endTime
+    }));
+  }
+  const windows = [];
+  if (shiftConfig?.dayShift) {
+    windows.push({
+      shiftId: shiftConfig.dayShift.id ?? 0,
+      shiftName: shiftConfig.dayShift.name || "Day Shift",
+      startTime: shiftConfig.dayShift.startTime || "06:00",
+      endTime: shiftConfig.dayShift.endTime || "18:00"
+    });
+  }
+  if (shiftConfig?.nightShift) {
+    windows.push({
+      shiftId: shiftConfig.nightShift.id ?? 1,
+      shiftName: shiftConfig.nightShift.name || "Night Shift",
+      startTime: shiftConfig.nightShift.startTime || "18:00",
+      endTime: shiftConfig.nightShift.endTime || "06:00"
+    });
+  }
+  if (windows.length > 0) {
+    return windows;
+  }
+  return [
+    {
+      shiftId: 0,
+      shiftName: "Day Shift",
+      startTime: "06:00",
+      endTime: "18:00"
+    },
+    {
+      shiftId: 1,
+      shiftName: "Night Shift",
+      startTime: "18:00",
+      endTime: "06:00"
+    }
+  ];
+};
+var normalizeShiftWindowMinutes = (startTime, endTime) => {
+  const startMinutes = parseTimeToMinutes3(startTime);
+  const endMinutesRaw = parseTimeToMinutes3(endTime);
+  if (startMinutes === null || endMinutesRaw === null) {
+    return null;
+  }
+  let endMinutes = endMinutesRaw;
+  if (endMinutes <= startMinutes) {
+    endMinutes += 24 * 60;
+  }
+  return { startMinutes, endMinutes };
+};
 var PlantHeadView = () => {
   const supabase = useSupabase();
   const entityConfig = useEntityConfig();
@@ -77934,6 +78072,7 @@ var PlantHeadView = () => {
   const [selectedSupervisorId, setSelectedSupervisorId] = React141__namespace.default.useState("all");
   const [selectedLineIds, setSelectedLineIds] = React141__namespace.default.useState([]);
   const [isInitialScopeReady, setIsInitialScopeReady] = React141__namespace.default.useState(false);
+  const [shiftResolutionTick, setShiftResolutionTick] = React141__namespace.default.useState(0);
   const hasAutoInitializedScopeRef = React141__namespace.default.useRef(false);
   const hasUserAdjustedScopeRef = React141__namespace.default.useRef(false);
   React141__namespace.default.useEffect(() => {
@@ -78038,34 +78177,151 @@ var PlantHeadView = () => {
     shiftConfigMap,
     isLoading: isShiftConfigLoading
   } = useMultiLineShiftConfigs(scopedLineIds, staticShiftConfig);
-  const { shiftGroups, hasComputed: hasComputedShiftGroups } = useShiftGroups({
-    enabled: scopedLineIds.length > 0 && !isShiftConfigLoading,
-    shiftConfigMap,
-    timezone: appTimezone
-  });
-  const currentShiftScope = React141__namespace.default.useMemo(() => {
-    if (shiftGroups.length !== 1) return null;
-    const group = shiftGroups[0];
-    const referenceLineId = group.lineIds[0];
-    const referenceShiftConfig = referenceLineId ? shiftConfigMap.get(referenceLineId) : null;
-    const normalizedGroupShiftId = normalizeShiftId(group.shiftId);
-    const shiftDefinition = referenceShiftConfig?.shifts?.find((shift) => normalizeShiftId(shift.shiftId) === normalizedGroupShiftId);
-    const resolvedMode = classifyShiftBucket({
-      shiftName: group.shiftName,
-      shiftId: normalizedGroupShiftId,
-      startTime: shiftDefinition?.startTime,
-      endTime: shiftDefinition?.endTime
-    });
-    if (!resolvedMode || resolvedMode === "all") return null;
-    return {
-      date: group.date,
-      trendMode: resolvedMode,
-      shiftName: shiftDefinition?.shiftName || group.shiftName || null
+  React141__namespace.default.useEffect(() => {
+    if (scopedLineIds.length === 0 || isShiftConfigLoading) {
+      return;
+    }
+    const intervalId = window.setInterval(() => {
+      setShiftResolutionTick((previous) => previous + 1);
+    }, 6e4);
+    return () => {
+      clearInterval(intervalId);
     };
-  }, [shiftConfigMap, shiftGroups]);
+  }, [isShiftConfigLoading, scopedLineIds.length]);
+  const shiftResolutionNow = React141__namespace.default.useMemo(
+    () => /* @__PURE__ */ new Date(),
+    [shiftResolutionTick]
+  );
+  const earliestDayShiftStartTime = React141__namespace.default.useMemo(() => {
+    const candidateStarts = [];
+    scopedLineIds.forEach((lineId) => {
+      const shiftConfig = shiftConfigMap.get(lineId) || staticShiftConfig;
+      getShiftWindowsForConfig(shiftConfig).forEach((shift) => {
+        const bucket = classifyShiftBucket({
+          shiftName: shift.shiftName,
+          shiftId: shift.shiftId,
+          startTime: shift.startTime,
+          endTime: shift.endTime
+        });
+        const startMinutes = parseTimeToMinutes3(shift.startTime);
+        if (bucket === "day" && startMinutes !== null) {
+          candidateStarts.push(startMinutes);
+        }
+      });
+    });
+    if (candidateStarts.length === 0) {
+      scopedLineIds.forEach((lineId) => {
+        const shiftConfig = shiftConfigMap.get(lineId) || staticShiftConfig;
+        getShiftWindowsForConfig(shiftConfig).forEach((shift) => {
+          const startMinutes = parseTimeToMinutes3(shift.startTime);
+          if (startMinutes !== null) {
+            candidateStarts.push(startMinutes);
+          }
+        });
+      });
+    }
+    if (candidateStarts.length === 0) {
+      return "06:00";
+    }
+    const earliestMinutes = Math.min(...candidateStarts);
+    const hours = Math.floor(earliestMinutes / 60);
+    const minutes = earliestMinutes % 60;
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+  }, [appTimezone, scopedLineIds, shiftConfigMap, staticShiftConfig]);
+  const resolvedOperationalToday = React141__namespace.default.useMemo(
+    () => getOperationalDate(appTimezone, shiftResolutionNow, earliestDayShiftStartTime),
+    [appTimezone, earliestDayShiftStartTime, shiftResolutionNow]
+  );
+  const activeLineShiftStates = React141__namespace.default.useMemo(() => {
+    return scopedLineIds.flatMap((lineId) => {
+      const shiftConfig = shiftConfigMap.get(lineId) || staticShiftConfig;
+      const activeShift = getActiveShift(appTimezone, shiftConfig, shiftResolutionNow);
+      if (!activeShift) {
+        return [];
+      }
+      const trendBucket = classifyShiftBucket({
+        shiftName: activeShift.shiftName,
+        shiftId: activeShift.shiftId,
+        startTime: activeShift.startTime,
+        endTime: activeShift.endTime
+      });
+      if (!trendBucket || trendBucket === "all") {
+        return [];
+      }
+      return [{
+        lineId,
+        trendMode: trendBucket,
+        shiftId: activeShift.shiftId,
+        shiftName: activeShift.shiftName || null,
+        startTime: activeShift.startTime || null,
+        endTime: activeShift.endTime || null,
+        date: activeShift.date
+      }];
+    });
+  }, [appTimezone, scopedLineIds, shiftConfigMap, shiftResolutionNow, staticShiftConfig]);
+  const hasActiveDayShiftLine = React141__namespace.default.useMemo(
+    () => activeLineShiftStates.some((shift) => shift.trendMode === "day" && shift.date === resolvedOperationalToday),
+    [activeLineShiftStates, resolvedOperationalToday]
+  );
+  const hasActiveNightShiftLine = React141__namespace.default.useMemo(
+    () => activeLineShiftStates.some((shift) => shift.trendMode === "night" && shift.date === resolvedOperationalToday),
+    [activeLineShiftStates, resolvedOperationalToday]
+  );
+  const resolvedTrendMode = isInitialScopeReady ? trendMode : "all";
+  const hourlyWindowStartTime = React141__namespace.default.useMemo(() => {
+    if (scopedLineIds.length === 0) {
+      return null;
+    }
+    const startCandidates = [];
+    const endCandidates = [];
+    scopedLineIds.forEach((lineId) => {
+      const shiftConfig = shiftConfigMap.get(lineId) || staticShiftConfig;
+      getShiftWindowsForConfig(shiftConfig).forEach((shift) => {
+        const bucket = classifyShiftBucket({
+          shiftName: shift.shiftName,
+          shiftId: shift.shiftId,
+          startTime: shift.startTime,
+          endTime: shift.endTime
+        });
+        if (resolvedTrendMode !== "all" && bucket !== resolvedTrendMode) {
+          return;
+        }
+        const normalizedWindow = normalizeShiftWindowMinutes(shift.startTime, shift.endTime);
+        if (!normalizedWindow) {
+          return;
+        }
+        startCandidates.push(normalizedWindow.startMinutes);
+        endCandidates.push(normalizedWindow.endMinutes);
+      });
+    });
+    if (resolvedTrendMode === "all") {
+      const dayStartCandidates = startCandidates.length > 0 ? scopedLineIds.flatMap((lineId) => {
+        const shiftConfig = shiftConfigMap.get(lineId) || staticShiftConfig;
+        return getShiftWindowsForConfig(shiftConfig).map((shift) => {
+          const bucket = classifyShiftBucket({
+            shiftName: shift.shiftName,
+            shiftId: shift.shiftId,
+            startTime: shift.startTime,
+            endTime: shift.endTime
+          });
+          return bucket === "day" ? parseTimeToMinutes3(shift.startTime) : null;
+        }).filter((value) => value !== null);
+      }) : [];
+      if (dayStartCandidates.length > 0) {
+        startCandidates.splice(0, startCandidates.length, ...dayStartCandidates);
+      }
+    }
+    if (startCandidates.length === 0 || endCandidates.length === 0) {
+      return null;
+    }
+    const earliestMinutes = Math.min(...startCandidates);
+    const hours = Math.floor(earliestMinutes / 60);
+    const minutes = earliestMinutes % 60;
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+  }, [appTimezone, resolvedTrendMode, scopedLineIds, shiftConfigMap, staticShiftConfig]);
   const isShiftScopeResolved = React141__namespace.default.useMemo(
-    () => !isShiftConfigLoading && hasComputedShiftGroups,
-    [hasComputedShiftGroups, isShiftConfigLoading]
+    () => !isShiftConfigLoading,
+    [isShiftConfigLoading]
   );
   const initializedTimezoneRef = React141__namespace.default.useRef(appTimezone);
   React141__namespace.default.useEffect(() => {
@@ -78092,7 +78348,7 @@ var PlantHeadView = () => {
       return;
     }
     setDateRange((previous) => {
-      const nextStartKey = currentShiftScope?.date || fallbackOperationalDate;
+      const nextStartKey = resolvedOperationalToday || fallbackOperationalDate;
       if (previous.startKey === nextStartKey && previous.endKey === nextStartKey) {
         return previous;
       }
@@ -78101,11 +78357,11 @@ var PlantHeadView = () => {
         endKey: nextStartKey
       };
     });
-    setTrendMode(currentShiftScope?.trendMode || "all");
+    setTrendMode("all");
     setUsesThisWeekComparison(false);
     hasAutoInitializedScopeRef.current = true;
     setIsInitialScopeReady(true);
-  }, [currentShiftScope, fallbackOperationalDate, isShiftScopeResolved, scopedLineIds.length]);
+  }, [fallbackOperationalDate, isShiftScopeResolved, resolvedOperationalToday, scopedLineIds.length]);
   const handleDateRangeChange = React141__namespace.default.useCallback((range, meta) => {
     hasUserAdjustedScopeRef.current = true;
     setIsInitialScopeReady(true);
@@ -78182,45 +78438,36 @@ var PlantHeadView = () => {
     if (isInitialScopeReady) {
       return dateRange;
     }
-    const nextStartKey = currentShiftScope?.date || fallbackOperationalDate;
+    const nextStartKey = resolvedOperationalToday || fallbackOperationalDate;
     return {
       startKey: nextStartKey,
       endKey: nextStartKey
     };
-  }, [currentShiftScope, dateRange, fallbackOperationalDate, isInitialScopeReady]);
+  }, [dateRange, fallbackOperationalDate, isInitialScopeReady, resolvedOperationalToday]);
   const effectiveTrendMode = React141__namespace.default.useMemo(
-    () => isInitialScopeReady ? trendMode : currentShiftScope?.trendMode || "all",
-    [currentShiftScope, isInitialScopeReady, trendMode]
+    () => resolvedTrendMode,
+    [resolvedTrendMode]
   );
   const hourlyLabelStartTime = React141__namespace.default.useMemo(() => {
-    if (effectiveTrendMode === "all" || scopedLineIds.length === 0) {
-      return null;
-    }
-    const shiftStartTimes = /* @__PURE__ */ new Set();
-    scopedLineIds.forEach((lineId) => {
-      const shiftConfig = shiftConfigMap.get(lineId);
-      const matchingShift = shiftConfig?.shifts?.find((shift) => classifyShiftBucket({
-        shiftName: shift.shiftName,
-        shiftId: shift.shiftId,
-        startTime: shift.startTime,
-        endTime: shift.endTime
-      }) === effectiveTrendMode);
-      if (matchingShift?.startTime) {
-        shiftStartTimes.add(matchingShift.startTime);
-      }
-    });
-    if (shiftStartTimes.size !== 1) {
+    if (scopedLineIds.length === 0) {
       return null;
     }
-    return Array.from(shiftStartTimes)[0] || null;
-  }, [effectiveTrendMode, scopedLineIds, shiftConfigMap]);
-  const isSingleDayShiftScope = React141__namespace.default.useMemo(
-    () => effectiveDateRange.startKey === effectiveDateRange.endKey && effectiveTrendMode !== "all",
-    [effectiveDateRange.endKey, effectiveDateRange.startKey, effectiveTrendMode]
+    return hourlyWindowStartTime;
+  }, [hourlyWindowStartTime, scopedLineIds.length]);
+  const isSingleDayScope = React141__namespace.default.useMemo(
+    () => effectiveDateRange.startKey === effectiveDateRange.endKey,
+    [effectiveDateRange.endKey, effectiveDateRange.startKey]
   );
   const isLiveScope = React141__namespace.default.useMemo(
-    () => isSingleDayShiftScope && currentShiftScope !== null && effectiveDateRange.startKey === currentShiftScope.date && effectiveTrendMode === currentShiftScope.trendMode,
-    [currentShiftScope, effectiveDateRange.startKey, effectiveTrendMode, isSingleDayShiftScope]
+    () => isSingleDayScope && effectiveDateRange.startKey === resolvedOperationalToday && (effectiveTrendMode === "all" || effectiveTrendMode === "day" && hasActiveDayShiftLine || effectiveTrendMode === "night" && hasActiveNightShiftLine),
+    [
+      effectiveDateRange.startKey,
+      effectiveTrendMode,
+      hasActiveDayShiftLine,
+      hasActiveNightShiftLine,
+      isSingleDayScope,
+      resolvedOperationalToday
+    ]
   );
   const handleOpenLineDetails = React141__namespace.default.useCallback((lineId, lineName) => {
     trackCoreEvent("Operations Overview Line Clicked", {
@@ -78255,7 +78502,7 @@ var PlantHeadView = () => {
         displayDateRange: headerDateRange,
         trendMode,
         isLiveScope,
-        liveShiftName: currentShiftScope?.shiftName || null,
+        liveShiftName: isLiveScope && trendMode !== "all" ? trendMode : null,
         lineOptions,
         supervisorOptions,
         selectedSupervisorId,
@@ -79086,6 +79333,7 @@ exports.formatRelativeTime = formatRelativeTime;
 exports.formatTimeInZone = formatTimeInZone;
 exports.fromUrlFriendlyName = fromUrlFriendlyName;
 exports.getActionDisplayName = getActionDisplayName;
+exports.getActiveShift = getActiveShift;
 exports.getAllLineDisplayNames = getAllLineDisplayNames;
 exports.getAllThreadMessages = getAllThreadMessages;
 exports.getAllWorkspaceDisplayNamesAsync = getAllWorkspaceDisplayNamesAsync;