@optifye/dashboard-core 6.11.15 → 6.11.16

package/dist/index.js

@@ -12864,6 +12864,7 @@ var useShiftGroups = ({
 }) => {
   const [shiftGroups, setShiftGroups] = React141.useState([]);
   const [shiftGroupsKey, setShiftGroupsKey] = React141.useState("");
+  const [hasComputed, setHasComputed] = React141.useState(false);
   const lastKeyRef = React141.useRef("");
   const mapRef = React141.useRef(shiftConfigMap);
   React141.useEffect(() => {
@@ -12874,6 +12875,7 @@ var useShiftGroups = ({
       lastKeyRef.current = "";
       setShiftGroups([]);
       setShiftGroupsKey("");
+      setHasComputed(false);
       return;
     }
     let isMounted = true;
@@ -12886,6 +12888,7 @@ var useShiftGroups = ({
         setShiftGroups(groups);
         setShiftGroupsKey(key);
       }
+      setHasComputed(true);
     };
     compute();
     const intervalId = setInterval(compute, pollIntervalMs);
@@ -12894,7 +12897,7 @@ var useShiftGroups = ({
       clearInterval(intervalId);
     };
   }, [enabled, shiftConfigMap.size, timezone, pollIntervalMs]);
-  return { shiftGroups, shiftGroupsKey };
+  return { shiftGroups, shiftGroupsKey, hasComputed };
 };
 
 // src/lib/types/efficiencyLegend.ts
@@ -12956,52 +12959,6 @@ function getEfficiencyTextColorClasses(efficiency, legend = DEFAULT_EFFICIENCY_L
   }
 }
 
-// src/lib/hooks/useDashboardMetrics.recentFlow.ts
-var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
-var getWorkspaceRecentFlowCacheKey = (workspace) => {
-  const workspaceKey = workspace.workspace_uuid || workspace.workspace_name || "unknown";
-  return `${workspaceKey}|${workspace.date}|${workspace.shift_id}`;
-};
-var toRecentFlowSnapshot = (workspace) => {
-  if (!isFiniteNumber(workspace.recent_flow_percent)) {
-    return null;
-  }
-  return {
-    recent_flow_percent: workspace.recent_flow_percent,
-    recent_flow_actual_rate_pph: workspace.recent_flow_actual_rate_pph ?? null,
-    recent_flow_healthy_rate_pph: workspace.recent_flow_healthy_rate_pph ?? null,
-    recent_flow_window_minutes: workspace.recent_flow_window_minutes ?? null,
-    recent_flow_effective_end_at: workspace.recent_flow_effective_end_at ?? null
-  };
-};
-var mergeWorkspaceRecentFlowMetrics = (workspaces, previousCache) => {
-  const nextCache = /* @__PURE__ */ new Map();
-  const mergedWorkspaces = workspaces.map((workspace) => {
-    const cacheKey = getWorkspaceRecentFlowCacheKey(workspace);
-    const currentSnapshot = toRecentFlowSnapshot(workspace);
-    if (workspace.recent_flow_mode === "computed" && currentSnapshot) {
-      nextCache.set(cacheKey, currentSnapshot);
-      return workspace;
-    }
-    if (workspace.recent_flow_mode === "hold") {
-      const cachedSnapshot = previousCache.get(cacheKey);
-      if (cachedSnapshot) {
-        nextCache.set(cacheKey, cachedSnapshot);
-        return {
-          ...workspace,
-          ...cachedSnapshot,
-          recent_flow_mode: "hold"
-        };
-      }
-    }
-    return workspace;
-  });
-  return {
-    workspaces: mergedWorkspaces,
-    cache: nextCache
-  };
-};
-
 // src/lib/hooks/useDashboardMetrics.ts
 var DEBUG_DASHBOARD_LOGS = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
 var logDebug = (...args) => {
@@ -13090,7 +13047,6 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
   const abortControllerRef = React141.useRef(null);
   const lastFetchKeyRef = React141.useRef(null);
   const inFlightFetchKeyRef = React141.useRef(null);
-  const recentFlowCacheRef = React141.useRef(/* @__PURE__ */ new Map());
   const updateQueueRef = React141.useRef(false);
   const onLineMetricsUpdateRef = React141.useRef(onLineMetricsUpdate);
   const shiftGroupsRef = React141.useRef(shiftGroups);
@@ -13124,7 +13080,6 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
     setError(null);
     lastFetchKeyRef.current = null;
     inFlightFetchKeyRef.current = null;
-    recentFlowCacheRef.current = /* @__PURE__ */ new Map();
   }, [lineId]);
   const fetchAllMetrics = React141.useCallback(async (options = {}) => {
     const { force = false } = options;
@@ -13399,12 +13354,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
             actionType: item.action_type,
             actionName: item.action_name
           }),
-          recent_flow_mode: item.recent_flow_mode ?? void 0,
           recent_flow_percent: item.recent_flow_percent ?? null,
-          recent_flow_actual_rate_pph: item.recent_flow_actual_rate_pph ?? null,
-          recent_flow_healthy_rate_pph: item.recent_flow_healthy_rate_pph ?? 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,
           incoming_wip_effective_at: item.incoming_wip_effective_at ?? null,
           incoming_wip_buffer_name: item.incoming_wip_buffer_name ?? null
@@ -13415,16 +13367,11 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
         const wsNumB = parseInt(b.workspace_name?.replace(/[^0-9]/g, "") || "0");
         return wsNumA - wsNumB;
       });
-      const {
-        workspaces: mergedWorkspaceData,
-        cache: nextRecentFlowCache
-      } = mergeWorkspaceRecentFlowMetrics(transformedWorkspaceData, recentFlowCacheRef.current);
-      recentFlowCacheRef.current = nextRecentFlowCache;
-      mergedWorkspaceData.forEach((metric) => {
+      transformedWorkspaceData.forEach((metric) => {
         workspaceMetricsStore.setOverview(metric);
       });
       const newMetricsState = {
-        workspaceMetrics: mergedWorkspaceData,
+        workspaceMetrics: transformedWorkspaceData,
         lineMetrics: allLineMetrics || [],
         metadata: { hasFlowBuffers, idleTimeVlmByLine },
         efficiencyLegend: efficiencyLegend ?? DEFAULT_EFFICIENCY_LEGEND
@@ -16849,7 +16796,7 @@ var useActiveBreaks = (lineIds) => {
   const [isLoading, setIsLoading] = React141.useState(true);
   const [error, setError] = React141.useState(null);
   const supabase = useSupabase();
-  const parseTimeToMinutes3 = (timeStr) => {
+  const parseTimeToMinutes4 = (timeStr) => {
     const [hours, minutes] = timeStr.split(":").map(Number);
     return hours * 60 + minutes;
   };
@@ -16858,8 +16805,8 @@ var useActiveBreaks = (lineIds) => {
     return now4.getHours() * 60 + now4.getMinutes();
   };
   const isTimeInBreak = (breakStart, breakEnd, currentMinutes) => {
-    const startMinutes = parseTimeToMinutes3(breakStart);
-    const endMinutes = parseTimeToMinutes3(breakEnd);
+    const startMinutes = parseTimeToMinutes4(breakStart);
+    const endMinutes = parseTimeToMinutes4(breakEnd);
     if (endMinutes < startMinutes) {
       return currentMinutes >= startMinutes || currentMinutes < endMinutes;
     } else {
@@ -16867,8 +16814,8 @@ var useActiveBreaks = (lineIds) => {
     }
   };
   const calculateBreakProgress = (breakStart, breakEnd, currentMinutes) => {
-    const startMinutes = parseTimeToMinutes3(breakStart);
-    const endMinutes = parseTimeToMinutes3(breakEnd);
+    const startMinutes = parseTimeToMinutes4(breakStart);
+    const endMinutes = parseTimeToMinutes4(breakEnd);
     let elapsedMinutes = 0;
     let remainingMinutes = 0;
     if (endMinutes < startMinutes) {
@@ -16886,8 +16833,8 @@ var useActiveBreaks = (lineIds) => {
     return { elapsedMinutes, remainingMinutes };
   };
   const isTimeInShift = (startTime, endTime, currentMinutes) => {
-    const startMinutes = parseTimeToMinutes3(startTime);
-    const endMinutes = parseTimeToMinutes3(endTime);
+    const startMinutes = parseTimeToMinutes4(startTime);
+    const endMinutes = parseTimeToMinutes4(endTime);
     if (endMinutes < startMinutes) {
       return currentMinutes >= startMinutes || currentMinutes < endMinutes;
     } else {
@@ -16947,8 +16894,8 @@ var useActiveBreaks = (lineIds) => {
               const endTime = breakItem.end || breakItem.endTime || "00:00";
               let duration = breakItem.duration || 0;
               if (!duration || duration === 0) {
-                const startMinutes = parseTimeToMinutes3(startTime);
-                const endMinutes = parseTimeToMinutes3(endTime);
+                const startMinutes = parseTimeToMinutes4(startTime);
+                const endMinutes = parseTimeToMinutes4(endTime);
                 duration = endMinutes < startMinutes ? endMinutes + 24 * 60 - startMinutes : endMinutes - startMinutes;
               }
               return {
@@ -16964,8 +16911,8 @@ var useActiveBreaks = (lineIds) => {
               const endTime = breakItem.end || breakItem.endTime || "00:00";
               let duration = breakItem.duration || 0;
               if (!duration || duration === 0) {
-                const startMinutes = parseTimeToMinutes3(startTime);
-                const endMinutes = parseTimeToMinutes3(endTime);
+                const startMinutes = parseTimeToMinutes4(startTime);
+                const endMinutes = parseTimeToMinutes4(endTime);
                 duration = endMinutes < startMinutes ? endMinutes + 24 * 60 - startMinutes : endMinutes - startMinutes;
               }
               return {
@@ -23046,6 +22993,16 @@ var createThrottledReload = (interval = 5e3, maxReloads = 3) => {
 };
 var throttledReloadDashboard = createThrottledReload(5e3, 3);
 
+// src/lib/utils/dev/localDevTestLogin.ts
+var isLoopbackHostname = (hostname) => {
+  const normalized = String(hostname || "").trim().toLowerCase();
+  return normalized === "localhost" || normalized === "127.0.0.1" || normalized === "::1";
+};
+var shouldEnableLocalDevTestLogin = ({
+  enabledFlag,
+  hostname
+}) => enabledFlag && isLoopbackHostname(hostname);
+
 // src/lib/utils/index.ts
 var formatIdleTime = (idleTimeInSeconds) => {
   if (!idleTimeInSeconds || idleTimeInSeconds <= 0) {
@@ -31230,12 +31187,16 @@ var LoginPage = ({
   onRateLimitCheck,
   logoSrc = optifye_logo_default,
   logoAlt = "Optifye",
-  brandName = "Optifye"
+  brandName = "Optifye",
+  showDevTestLogin = false,
+  devTestLoginLabel = "Sign in as Test User",
+  onDevTestLogin
 }) => {
   const [email, setEmail] = React141.useState("");
   const [otp, setOtp] = React141.useState("");
   const [step, setStep] = React141.useState("email");
   const [loading, setLoading] = React141.useState(false);
+  const [devLoginLoading, setDevLoginLoading] = React141.useState(false);
   const [error, setError] = React141.useState(null);
   const [countdown, setCountdown] = React141.useState(0);
   const supabase = useSupabase();
@@ -31299,6 +31260,25 @@ var LoginPage = ({
       startCountdown();
     }
   };
+  const handleDevTestLogin = async () => {
+    if (!onDevTestLogin) {
+      return;
+    }
+    setDevLoginLoading(true);
+    setError(null);
+    try {
+      const result = await onDevTestLogin();
+      const nextError = typeof result === "object" && result !== null && "error" in result ? result.error : null;
+      if (typeof nextError === "string" && nextError.trim()) {
+        setError(nextError);
+      }
+    } catch (err) {
+      console.error("Dev test login failed:", err);
+      setError("Dev test login unavailable.");
+    } finally {
+      setDevLoginLoading(false);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md w-full mx-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-2xl shadow-xl border border-slate-200 p-8", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
@@ -31339,7 +31319,7 @@ var LoginPage = ({
           "button",
           {
             type: "submit",
-            disabled: loading,
+            disabled: loading || devLoginLoading,
             className: "w-full py-3 px-4 bg-slate-900 hover:bg-slate-800 focus:ring-2 focus:ring-slate-600 focus:ring-offset-2 text-white font-medium rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center",
             children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-3 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
@@ -31349,7 +31329,31 @@ var LoginPage = ({
               "Sending..."
             ] }) : "Continue with Email"
           }
-        )
+        ),
+        showDevTestLogin && onDevTestLogin ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-slate-200" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium uppercase tracking-[0.2em] text-slate-400", children: "Local Dev" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-slate-200" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: loading || devLoginLoading,
+              onClick: () => void handleDevTestLogin(),
+              className: "w-full py-3 px-4 bg-white hover:bg-slate-50 focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 text-slate-700 font-medium rounded-xl border border-slate-200 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center",
+              children: devLoginLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-3 h-4 w-4 text-slate-700", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+                ] }),
+                "Signing In..."
+              ] }) : devTestLoginLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xs text-slate-500", children: "Localhost-only convenience login for the shared test account." })
+        ] }) : null
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "space-y-6", onSubmit: handleVerifyOTP, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "otp", className: "block text-sm font-medium text-slate-700 mb-2 text-center", children: "Enter the 6-digit code sent to" }),
@@ -31374,7 +31378,7 @@ var LoginPage = ({
           "button",
           {
             type: "submit",
-            disabled: loading || otp.length !== 6,
+            disabled: loading || devLoginLoading || otp.length !== 6,
             className: "w-full py-3 px-4 bg-slate-900 hover:bg-slate-800 focus:ring-2 focus:ring-slate-600 focus:ring-offset-2 text-white font-medium rounded-xl transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center",
             children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-3 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
@@ -32215,31 +32219,35 @@ var LineChartComponent = ({
   ...restOfChartProps
 }) => {
   const containerRef = React141__namespace.default.useRef(null);
-  const [containerReady, setContainerReady] = React141__namespace.default.useState(false);
-  const themeConfig = useThemeConfig();
-  const { formatNumber } = useFormatNumber();
+  const [dimensions, setDimensions] = React141__namespace.default.useState({ width: 0, height: 0 });
+  const [hasValidData, setHasValidData] = React141__namespace.default.useState(false);
   React141__namespace.default.useEffect(() => {
-    const checkContainerDimensions = () => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        if (rect.width > 0 && rect.height > 0) {
-          setContainerReady(true);
-        }
-      }
-    };
-    checkContainerDimensions();
-    const resizeObserver = new ResizeObserver(checkContainerDimensions);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
+    const currentHasValidData = data && lines && lines.length > 0 && data.some(
+      (item) => lines.some((line) => {
+        const val = item[line.dataKey];
+        return typeof val === "number" && val > 0;
+      })
+    );
+    if (currentHasValidData && !hasValidData) {
+      setHasValidData(true);
     }
-    const fallbackTimeout = setTimeout(() => {
-      setContainerReady(true);
-    }, 100);
-    return () => {
-      resizeObserver.disconnect();
-      clearTimeout(fallbackTimeout);
-    };
+  }, [data, lines, hasValidData]);
+  React141__namespace.default.useEffect(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        setDimensions({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
   }, []);
+  const themeConfig = useThemeConfig();
+  const { formatNumber } = useFormatNumber();
   const yAxisTickFormatter = (value) => {
     return `${formatNumber(value)}${yAxisUnit || ""}`;
   };
@@ -32261,57 +32269,71 @@ var LineChartComponent = ({
   const gridStrokeColor = themeConfig?.gray?.["300"] || "#ccc";
   const axisTickFillColor = themeConfig?.gray?.["600"] || "#666";
   const axisStrokeColor = themeConfig?.gray?.["400"] || "#999";
-  const chartContent = /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin: { top: 5, right: 30, left: 20, bottom: 20 }, ...restOfChartProps, children: [
-    showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStrokeColor }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.XAxis,
-      {
-        dataKey: xAxisDataKey,
-        label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -10 } : void 0,
-        tickFormatter: xAxisTickFormatter,
-        tick: { fontSize: 12, fill: axisTickFillColor },
-        stroke: axisStrokeColor
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.YAxis,
-      {
-        label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft" } : void 0,
-        tickFormatter: yAxisTickFormatter,
-        domain: yAxisDomain,
-        tick: { fontSize: 12, fill: axisTickFillColor },
-        stroke: axisStrokeColor
-      }
-    ),
-    showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Tooltip,
-      {
-        formatter: tooltipFormatter || defaultTooltipFormatter,
-        labelFormatter: tooltipLabelFormatter,
-        itemStyle: { color: "#111827" },
-        cursor: { strokeDasharray: "3 3" }
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { payload: legendPayload }),
-    lines.map((lineConfig, index) => {
-      const lineProps = {
-        ...lineConfig,
-        key: lineConfig.dataKey,
-        type: lineConfig.type || "monotone",
-        stroke: lineConfig.stroke || defaultColors[index % defaultColors.length],
-        activeDot: lineConfig.activeDot !== void 0 ? lineConfig.activeDot : { r: 6 }
-      };
-      return /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { ...lineProps, children: lineConfig.labelList && /* @__PURE__ */ jsxRuntime.jsx(
-        recharts.LabelList,
-        {
-          dataKey: lineConfig.dataKey,
-          position: "top",
-          formatter: (value) => formatNumber(value),
-          ...typeof lineConfig.labelList === "object" ? lineConfig.labelList : {}
-        }
-      ) });
-    })
-  ] });
+  const renderChartContent = (chartWidth, chartHeight) => /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.LineChart,
+    {
+      width: chartWidth,
+      height: chartHeight,
+      data,
+      margin: { top: 5, right: 30, left: 20, bottom: 20 },
+      ...restOfChartProps,
+      children: [
+        showGrid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: gridStrokeColor }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.XAxis,
+          {
+            dataKey: xAxisDataKey,
+            label: xAxisLabel ? { value: xAxisLabel, position: "insideBottom", offset: -10 } : void 0,
+            tickFormatter: xAxisTickFormatter,
+            tick: { fontSize: 12, fill: axisTickFillColor },
+            stroke: axisStrokeColor
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            label: yAxisLabel ? { value: yAxisLabel, angle: -90, position: "insideLeft" } : void 0,
+            tickFormatter: yAxisTickFormatter,
+            domain: yAxisDomain,
+            tick: { fontSize: 12, fill: axisTickFillColor },
+            stroke: axisStrokeColor
+          }
+        ),
+        showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            formatter: tooltipFormatter || defaultTooltipFormatter,
+            labelFormatter: tooltipLabelFormatter,
+            itemStyle: { color: "#111827" },
+            cursor: { strokeDasharray: "3 3" }
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { payload: legendPayload }),
+        lines.map((lineConfig, index) => {
+          const lineProps = {
+            ...lineConfig,
+            key: lineConfig.dataKey,
+            type: lineConfig.type || "monotone",
+            stroke: lineConfig.stroke || defaultColors[index % defaultColors.length],
+            activeDot: lineConfig.activeDot !== void 0 ? lineConfig.activeDot : { r: 6 },
+            isAnimationActive: true,
+            animationDuration: 1500,
+            animationBegin: 300
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { ...lineProps, children: lineConfig.labelList && /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.LabelList,
+            {
+              dataKey: lineConfig.dataKey,
+              position: "top",
+              formatter: (value) => formatNumber(value),
+              ...typeof lineConfig.labelList === "object" ? lineConfig.labelList : {}
+            }
+          ) });
+        })
+      ]
+    },
+    hasValidData ? "valid" : "empty"
+  );
   if (responsive) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -32319,11 +32341,20 @@ var LineChartComponent = ({
         ref: containerRef,
         className: clsx(fillContainer ? "w-full h-full" : "w-full h-auto", className),
         style: fillContainer ? { height: "100%", minHeight: "50px", minWidth: "100px" } : { aspectRatio: `${aspect}/1`, minHeight: "50px", minWidth: "100px" },
-        children: containerReady ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: chartContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 text-sm", children: "Loading chart..." }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.5 },
+            className: "w-full h-full",
+            children: dimensions.width > 0 && dimensions.height > 0 && renderChartContent(dimensions.width, dimensions.height)
+          }
+        )
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("w-full", className), children: chartContent });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("w-full", className), children: renderChartContent(restOfChartProps.width, restOfChartProps.height) });
 };
 var LineChart = React141__namespace.default.memo(LineChartComponent, (prevProps, nextProps) => {
   if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect || JSON.stringify(prevProps.yAxisDomain) !== JSON.stringify(nextProps.yAxisDomain)) {
@@ -32591,14 +32622,35 @@ var CycleTimeOverTimeChart = ({
 }) => {
   const MAX_DATA_POINTS = 40;
   const containerRef = React141__namespace.default.useRef(null);
-  const [containerReady, setContainerReady] = React141__namespace.default.useState(false);
-  const parseTimeToMinutes3 = (value) => {
+  const [dimensions, setDimensions] = React141__namespace.default.useState({ width: 0, height: 0 });
+  const [hasValidData, setHasValidData] = React141__namespace.default.useState(false);
+  React141__namespace.default.useEffect(() => {
+    const currentHasValidData = data && data.some((val) => val !== null && val > 0);
+    if (currentHasValidData && !hasValidData) {
+      setHasValidData(true);
+    }
+  }, [data, hasValidData]);
+  React141__namespace.default.useEffect(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        setDimensions({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  const parseTimeToMinutes4 = (value) => {
     const [hours, minutes] = value.split(":").map(Number);
     if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return 0;
     return hours * 60 + minutes;
   };
   const formatHourLabel = (slotIndex) => {
-    const baseMinutes = parseTimeToMinutes3(shiftStart);
+    const baseMinutes = parseTimeToMinutes4(shiftStart);
     const absoluteMinutes = baseMinutes + slotIndex * 60;
     const hour24 = Math.floor(absoluteMinutes % (24 * 60) / 60);
     const ampm = hour24 >= 12 ? "PM" : "AM";
@@ -32617,52 +32669,7 @@ var CycleTimeOverTimeChart = ({
   const displayData = getDisplayData(data);
   const DURATION = displayData.length;
   const effectiveDatasetKey = datasetKey || `cycle-time:${xAxisMode}`;
-  const [animatedDatasetKey, setAnimatedDatasetKey] = React141__namespace.default.useState(null);
-  const shouldAnimate = animatedDatasetKey !== effectiveDatasetKey;
-  const handleAnimationEnd = React141__namespace.default.useCallback(() => {
-    setAnimatedDatasetKey((currentValue) => currentValue === effectiveDatasetKey ? currentValue : effectiveDatasetKey);
-  }, [effectiveDatasetKey]);
   const finalData = displayData;
-  React141__namespace.default.useEffect(() => {
-    const containerNode = containerRef.current;
-    if (!containerNode) {
-      setContainerReady(true);
-      return void 0;
-    }
-    let frameId = null;
-    let resizeObserver = null;
-    const checkContainerDimensions = () => {
-      const rect = containerNode.getBoundingClientRect();
-      const isReady = rect.width > 0 && rect.height > 0;
-      if (isReady) {
-        setContainerReady(true);
-      }
-      return isReady;
-    };
-    if (checkContainerDimensions()) {
-      return void 0;
-    }
-    frameId = window.requestAnimationFrame(() => {
-      checkContainerDimensions();
-    });
-    if (typeof ResizeObserver !== "undefined") {
-      resizeObserver = new ResizeObserver(() => {
-        if (checkContainerDimensions() && resizeObserver) {
-          resizeObserver.disconnect();
-          resizeObserver = null;
-        }
-      });
-      resizeObserver.observe(containerNode);
-    } else {
-      setContainerReady(true);
-    }
-    return () => {
-      if (frameId !== null) {
-        window.cancelAnimationFrame(frameId);
-      }
-      resizeObserver?.disconnect();
-    };
-  }, []);
   const labelInterval = React141__namespace.default.useMemo(() => {
     if (xAxisMode === "hourly") {
       return Math.max(1, Math.ceil(DURATION / 8));
@@ -32870,144 +32877,154 @@ var CycleTimeOverTimeChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: containerRef,
       className: `w-full h-full min-w-0 flex flex-col relative pb-2 ${className}`,
       style: { minHeight: "200px", minWidth: 0 },
       children: [
         renderLegend(),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 w-full", children: containerReady ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          recharts.LineChart,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 w-full", ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+          motion.div,
           {
-            data: chartData,
-            margin: {
-              top: 5,
-              right: 30,
-              bottom: 25,
-              left: 10
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.XAxis,
-                {
-                  dataKey: "label",
-                  tick: { fontSize: 11 },
-                  interval: 0,
-                  angle: xAxisMode === "hourly" ? 0 : -30,
-                  textAnchor: xAxisMode === "hourly" ? "middle" : "end",
-                  tickMargin: xAxisMode === "hourly" ? 8 : 15,
-                  height: xAxisMode === "hourly" ? 40 : 60
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.YAxis,
-                {
-                  tickMargin: 8,
-                  width: 45,
-                  yAxisId: "cycle",
-                  domain: ["auto", "auto"],
-                  ticks: [0, idealCycleTime, ...Array.from({ length: 4 }, (_, i) => (i + 1) * Math.ceil(idealCycleTime / 2))].sort((a, b) => a - b),
-                  tickFormatter: (value) => String(value),
-                  tick: (props) => {
-                    const { x, y, payload } = props;
-                    const displayValue = typeof payload.value === "number" ? payload.value.toFixed(1) : String(payload.value);
-                    return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "text",
-                      {
-                        x: 0,
-                        y: 0,
-                        dy: 4,
-                        textAnchor: "end",
-                        fill: payload.value === idealCycleTime ? "#E34329" : "#666",
-                        fontSize: 12,
-                        fontWeight: payload.value === idealCycleTime ? "bold" : "normal",
-                        children: displayValue
-                      },
-                      `tick-${payload.value}-${x}-${y}`
-                    ) });
-                  }
-                }
-              ),
-              showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.YAxis,
-                {
-                  yAxisId: "idle",
-                  orientation: "right",
-                  tickMargin: 8,
-                  width: 35,
-                  domain: [0, 60],
-                  tickFormatter: (value) => `${value}m`,
-                  tick: { fontSize: 11, fill: "#f59e0b" },
-                  axisLine: false,
-                  tickLine: false
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Tooltip,
-                {
-                  cursor: { stroke: "#E5E7EB", strokeWidth: 1 },
-                  content: renderChartTooltip,
-                  animationDuration: 200
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.ReferenceLine,
-                {
-                  y: idealCycleTime,
-                  yAxisId: "cycle",
-                  stroke: "#E34329",
-                  strokeDasharray: "3 3",
-                  strokeWidth: 2,
-                  label: {
-                    position: "right",
-                    value: `${idealCycleTime.toFixed(1)}s`,
-                    fill: "#E34329",
-                    fontSize: 12,
-                    fontWeight: 500
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Line,
-                {
-                  type: "monotone",
-                  yAxisId: "cycle",
-                  dataKey: "cycleTime",
-                  stroke: "#3B82F6",
-                  strokeWidth: 2,
-                  connectNulls: false,
-                  dot: renderCycleDot,
-                  activeDot: renderCycleActiveDot,
-                  isAnimationActive: shouldAnimate,
-                  animationBegin: 0,
-                  animationDuration: 1200,
-                  animationEasing: "ease-out",
-                  onAnimationEnd: handleAnimationEnd
-                },
-                `${effectiveDatasetKey}:cycle`
-              ),
-              showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Line,
-                {
-                  type: "monotone",
-                  yAxisId: "idle",
-                  dataKey: "idleMinutes",
-                  stroke: "#f59e0b",
-                  strokeWidth: 2,
-                  strokeDasharray: "4 4",
-                  connectNulls: false,
-                  dot: renderIdleDot,
-                  activeDot: renderIdleActiveDot,
-                  isAnimationActive: shouldAnimate,
-                  animationBegin: 0,
-                  animationDuration: 1200,
-                  animationEasing: "ease-out"
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.5 },
+            className: "w-full h-full",
+            children: dimensions.width > 0 && dimensions.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+              recharts.LineChart,
+              {
+                width: dimensions.width,
+                height: dimensions.height,
+                data: chartData,
+                margin: {
+                  top: 5,
+                  right: 30,
+                  bottom: 25,
+                  left: 10
                 },
-                `${effectiveDatasetKey}:idle`
-              )
-            ]
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.XAxis,
+                    {
+                      dataKey: "label",
+                      tick: { fontSize: 11 },
+                      interval: 0,
+                      angle: xAxisMode === "hourly" ? 0 : -30,
+                      textAnchor: xAxisMode === "hourly" ? "middle" : "end",
+                      tickMargin: xAxisMode === "hourly" ? 8 : 15,
+                      height: xAxisMode === "hourly" ? 40 : 60
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.YAxis,
+                    {
+                      tickMargin: 8,
+                      width: 45,
+                      yAxisId: "cycle",
+                      domain: ["auto", "auto"],
+                      ticks: [0, idealCycleTime, ...Array.from({ length: 4 }, (_, i) => (i + 1) * Math.ceil(idealCycleTime / 2))].sort((a, b) => a - b),
+                      tickFormatter: (value) => String(value),
+                      tick: (props) => {
+                        const { x, y, payload } = props;
+                        const displayValue = typeof payload.value === "number" ? payload.value.toFixed(1) : String(payload.value);
+                        return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "text",
+                          {
+                            x: 0,
+                            y: 0,
+                            dy: 4,
+                            textAnchor: "end",
+                            fill: payload.value === idealCycleTime ? "#E34329" : "#666",
+                            fontSize: 12,
+                            fontWeight: payload.value === idealCycleTime ? "bold" : "normal",
+                            children: displayValue
+                          },
+                          `tick-${payload.value}-${x}-${y}`
+                        ) });
+                      }
+                    }
+                  ),
+                  showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.YAxis,
+                    {
+                      yAxisId: "idle",
+                      orientation: "right",
+                      tickMargin: 8,
+                      width: 35,
+                      domain: [0, 60],
+                      tickFormatter: (value) => `${value}m`,
+                      tick: { fontSize: 11, fill: "#f59e0b" },
+                      axisLine: false,
+                      tickLine: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.Tooltip,
+                    {
+                      cursor: { stroke: "#E5E7EB", strokeWidth: 1 },
+                      content: renderChartTooltip,
+                      animationDuration: 200
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.ReferenceLine,
+                    {
+                      y: idealCycleTime,
+                      yAxisId: "cycle",
+                      stroke: "#E34329",
+                      strokeDasharray: "3 3",
+                      strokeWidth: 2,
+                      label: {
+                        position: "right",
+                        value: `${idealCycleTime.toFixed(1)}s`,
+                        fill: "#E34329",
+                        fontSize: 12,
+                        fontWeight: 500
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.Line,
+                    {
+                      type: "monotone",
+                      yAxisId: "cycle",
+                      dataKey: "cycleTime",
+                      stroke: "#3B82F6",
+                      strokeWidth: 2,
+                      connectNulls: false,
+                      dot: renderCycleDot,
+                      activeDot: renderCycleActiveDot,
+                      isAnimationActive: true,
+                      animationBegin: 300,
+                      animationDuration: 1500,
+                      animationEasing: "ease-out"
+                    },
+                    `${effectiveDatasetKey}:cycle`
+                  ),
+                  showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.Line,
+                    {
+                      type: "monotone",
+                      yAxisId: "idle",
+                      dataKey: "idleMinutes",
+                      stroke: "#f59e0b",
+                      strokeWidth: 2,
+                      strokeDasharray: "4 4",
+                      connectNulls: false,
+                      dot: renderIdleDot,
+                      activeDot: renderIdleActiveDot,
+                      isAnimationActive: true,
+                      animationBegin: 300,
+                      animationDuration: 1500,
+                      animationEasing: "ease-out"
+                    },
+                    `${effectiveDatasetKey}:idle`
+                  )
+                ]
+              },
+              hasValidData ? "valid" : "empty"
+            )
           }
-        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 text-sm", children: "Loading chart..." }) }) })
+        ) })
       ]
     }
   );
@@ -33857,10 +33874,10 @@ var HourlyOutputChart = React141__namespace.default.memo(HourlyOutputChartCompon
 HourlyOutputChart.displayName = "HourlyOutputChart";
 
 // src/components/dashboard/grid/videoGridMetricUtils.ts
-var VIDEO_GRID_LEGEND_LABEL = "Flow";
+var VIDEO_GRID_LEGEND_LABEL = "7 Minute Efficiency";
 var MAP_GRID_LEGEND_LABEL = "Efficiency";
-var MIXED_VIDEO_GRID_LEGEND_LABEL = "Flow / Efficiency";
-var isFiniteNumber2 = (value) => typeof value === "number" && Number.isFinite(value);
+var MIXED_VIDEO_GRID_LEGEND_LABEL = "Efficiency";
+var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
 var isVideoGridRecentFlowEnabled = (workspace) => isRecentFlowVideoGridMetricMode(
   workspace.video_grid_metric_mode,
   workspace.assembly_enabled === true
@@ -33869,11 +33886,11 @@ var isVideoGridWipGated = (workspace) => isWipGatedVideoGridMetricMode(
   workspace.video_grid_metric_mode,
   workspace.assembly_enabled === true
 );
-var hasVideoGridRecentFlow = (workspace) => isVideoGridRecentFlowEnabled(workspace) && isFiniteNumber2(workspace.recent_flow_percent);
+var hasVideoGridRecentFlow = (workspace) => isVideoGridRecentFlowEnabled(workspace) && isFiniteNumber(workspace.recent_flow_percent);
 var isVideoGridRecentFlowUnavailable = (workspace) => isVideoGridRecentFlowEnabled(workspace) && !hasVideoGridRecentFlow(workspace);
 var getVideoGridMetricValue = (workspace) => {
   const recentFlowPercent = workspace.recent_flow_percent;
-  if (hasVideoGridRecentFlow(workspace) && isFiniteNumber2(recentFlowPercent)) {
+  if (hasVideoGridRecentFlow(workspace) && isFiniteNumber(recentFlowPercent)) {
     return recentFlowPercent;
   }
   if (isVideoGridRecentFlowUnavailable(workspace)) {
@@ -33884,7 +33901,7 @@ var getVideoGridMetricValue = (workspace) => {
 var hasIncomingWipMapping = (workspace) => Boolean(workspace.incoming_wip_buffer_name);
 var getVideoGridBaseColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
   const metricValue = getVideoGridMetricValue(workspace);
-  if (!isFiniteNumber2(metricValue)) {
+  if (!isFiniteNumber(metricValue)) {
     return "neutral";
   }
   return getEfficiencyColor(metricValue, legend);
@@ -33899,7 +33916,7 @@ var isLowWipGreenOverride = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
   if (!hasIncomingWipMapping(workspace)) {
     return false;
   }
-  return isFiniteNumber2(workspace.incoming_wip_current) && workspace.incoming_wip_current <= 1;
+  return isFiniteNumber(workspace.incoming_wip_current) && workspace.incoming_wip_current <= 1;
 };
 var toMinuteBucket = (minuteBucket) => Number.isFinite(minuteBucket) ? Math.floor(minuteBucket) : Math.floor(Date.now() / 6e4);
 var getEffectiveFlowMinuteBucket = (workspace) => {
@@ -33941,7 +33958,7 @@ var getVideoGridColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) =>
   if (!hasIncomingWipMapping(workspace)) {
     return baseColor;
   }
-  if (!isFiniteNumber2(workspace.incoming_wip_current)) {
+  if (!isFiniteNumber(workspace.incoming_wip_current)) {
     return "neutral";
   }
   if (isLowWipGreenOverride(workspace, legend)) {
@@ -34133,7 +34150,7 @@ var VideoCard = React141__namespace.default.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_mode !== nextProps.workspace.recent_flow_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
+  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
     return false;
   }
   if (prevProps.workspace.workspace_uuid !== nextProps.workspace.workspace_uuid || prevProps.workspace.workspace_name !== nextProps.workspace.workspace_name || prevProps.workspace.line_id !== nextProps.workspace.line_id) {
@@ -44601,7 +44618,7 @@ var ShiftDisplay = React141.memo(({ className, variant = "default", lineId }) =>
       return null;
     }
   };
-  const getShiftIcon = (shift) => {
+  const getShiftIcon2 = (shift) => {
     if (shift === "Day") {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z", clipRule: "evenodd" }) });
     } else {
@@ -44627,7 +44644,7 @@ var ShiftDisplay = React141.memo(({ className, variant = "default", lineId }) =>
   }
   if (variant === "enhanced") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-2 bg-blue-50 rounded-lg px-3 py-1.5 ${className ?? ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-800", children: getShiftIcon(currentShiftText) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-800", children: getShiftIcon2(currentShiftText) }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-800", children: [
         currentShiftText,
         " Shift"
@@ -44635,7 +44652,7 @@ var ShiftDisplay = React141.memo(({ className, variant = "default", lineId }) =>
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-2 bg-blue-50 rounded-lg px-3 py-1.5 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-800", children: getShiftIcon(currentShiftText) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-800", children: getShiftIcon2(currentShiftText) }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-800", children: [
       currentShiftText,
       " Shift"
@@ -47272,7 +47289,7 @@ var LinePdfGenerator = ({
       doc.setLineWidth(0.8);
       doc.line(20, 123, 190, 123);
       const hourlyOverviewStartY = 128;
-      const parseTimeToMinutes3 = (timeStr) => {
+      const parseTimeToMinutes4 = (timeStr) => {
         const [hours, minutes] = timeStr.split(":");
         const hour = parseInt(hours, 10);
         const minute = parseInt(minutes || "0", 10);
@@ -47305,7 +47322,7 @@ var LinePdfGenerator = ({
         };
       };
       const getHourlyTimeRanges = (startTimeStr, endTimeStr) => {
-        const startMinutes = parseTimeToMinutes3(startTimeStr);
+        const startMinutes = parseTimeToMinutes4(startTimeStr);
         if (Number.isNaN(startMinutes)) {
           return [];
         }
@@ -47313,7 +47330,7 @@ var LinePdfGenerator = ({
           const defaultHours = 11;
           return Array.from({ length: defaultHours }, (_, i) => buildRange(startMinutes + i * 60, 60));
         }
-        const endMinutes = parseTimeToMinutes3(endTimeStr);
+        const endMinutes = parseTimeToMinutes4(endTimeStr);
         if (Number.isNaN(endMinutes)) {
           const fallbackHours = 11;
           return Array.from({ length: fallbackHours }, (_, i) => buildRange(startMinutes + i * 60, 60));
@@ -49082,7 +49099,7 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
         minute: "2-digit",
         hour12: true
       });
-      const parseTimeToMinutes3 = (timeValue) => {
+      const parseTimeToMinutes4 = (timeValue) => {
         const [hourPart, minutePart] = timeValue.split(":").map(Number);
         const hour = Number.isFinite(hourPart) ? hourPart : 0;
         const minute = Number.isFinite(minutePart) ? minutePart : 0;
@@ -49099,8 +49116,8 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
         const IST_OFFSET_MINUTES = 330;
         return Date.UTC(year, month - 1, day, hour, minute) - IST_OFFSET_MINUTES * 60 * 1e3;
       };
-      const shiftStartMinutes = parseTimeToMinutes3(workspace.shift_start);
-      const shiftEndMinutes = parseTimeToMinutes3(workspace.shift_end);
+      const shiftStartMinutes = parseTimeToMinutes4(workspace.shift_start);
+      const shiftEndMinutes = parseTimeToMinutes4(workspace.shift_end);
       const wrapsMidnight = shiftEndMinutes <= shiftStartMinutes;
       const shiftStartUtcMs = toShiftUtcMs(workspace.date, workspace.shift_start);
       const shiftEndUtcMs = toShiftUtcMs(workspace.date, workspace.shift_end) + (wrapsMidnight ? 24 * 60 * 60 * 1e3 : 0);
@@ -51407,7 +51424,7 @@ var DashboardHeader = React141.memo(({ lineTitle, className = "", headerControls
     const rawName = currentShift.shiftName || "Day";
     return rawName.toLowerCase().includes("shift") ? rawName : `${rawName} Shift`;
   };
-  const getShiftIcon = () => {
+  const getShiftIcon2 = () => {
     const currentShift = getCurrentShift(timezone, shiftConfig);
     const shiftName = (currentShift.shiftName || "").toLowerCase();
     if (shiftName.includes("day") || shiftName.includes("morning") || currentShift.shiftId === 0) {
@@ -51441,7 +51458,7 @@ var DashboardHeader = React141.memo(({ lineTitle, className = "", headerControls
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(Timer2, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300", children: "|" }),
             isShiftConfigLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-16 bg-gray-200 rounded animate-pulse" }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 font-medium", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-75", children: getShiftIcon() }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-75", children: getShiftIcon2() }),
               getShiftName()
             ] })
           ] })
@@ -51458,7 +51475,7 @@ var DashboardHeader = React141.memo(({ lineTitle, className = "", headerControls
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 inline-flex flex-wrap items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx(Timer2, {}) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center gap-1", children: isShiftConfigLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-20 bg-gray-200 rounded animate-pulse" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon2() }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: getShiftName() })
           ] }) })
         ] })
@@ -58429,7 +58446,7 @@ var FactoryView = ({
     const currentShift = getCurrentShiftInfo();
     return (currentShift.shiftName || "Day").replace(/ Shift$/i, "");
   };
-  const getShiftIcon = () => {
+  const getShiftIcon2 = () => {
     const currentShift = getCurrentShiftInfo();
     const shiftNameLower = (currentShift.shiftName || "").toLowerCase();
     if (shiftNameLower.includes("day") || shiftNameLower.includes("morning") || currentShift.shiftId === 0) {
@@ -58475,7 +58492,7 @@ var FactoryView = ({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-gray-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon() }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon2() }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-gray-700", children: [
               getShiftName(),
               " Shift"
@@ -58494,7 +58511,7 @@ var FactoryView = ({
             " IST"
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon2() }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600", children: [
               getShiftName(),
               " Shift"
@@ -61206,7 +61223,7 @@ var KPIDetailView = ({
   const getShiftName = React141.useCallback((shiftId) => {
     return getShiftNameById(shiftId, configuredTimezone, shiftConfig);
   }, [configuredTimezone, shiftConfig]);
-  const getShiftIcon = React141.useCallback((shiftId) => {
+  const getShiftIcon2 = React141.useCallback((shiftId) => {
     if (shiftId === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" }) });
     }
@@ -62086,7 +62103,7 @@ var KPIDetailView = ({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden mt-3 flex items-center justify-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-gray-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: chartMetrics && formatLocalDate(new Date(chartMetrics.date)) }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(chartMetrics.shift_id ?? 0) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon2(chartMetrics.shift_id ?? 0) }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-gray-700", children: [
               getShiftName(chartMetrics.shift_id ?? 0).replace(/ Shift$/i, ""),
               " Shift"
@@ -62112,7 +62129,7 @@ var KPIDetailView = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(chartMetrics.shift_id ?? 0) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon2(chartMetrics.shift_id ?? 0) }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-semibold uppercase tracking-wider", children: [
               getShiftName(chartMetrics.shift_id ?? 0).replace(/ Shift$/i, ""),
               " Shift"
@@ -62130,7 +62147,7 @@ var KPIDetailView = ({
             return `${startDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })} - ${endDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
           })() }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(selectedShiftId) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon2(selectedShiftId) }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: getShiftName(selectedShiftId) })
           ] })
         ] }),
@@ -62147,7 +62164,7 @@ var KPIDetailView = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(selectedShiftId) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon2(selectedShiftId) }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-semibold uppercase tracking-wider", children: [
               getShiftName(selectedShiftId).replace(/ Shift$/i, ""),
               " Shift"
@@ -63523,7 +63540,7 @@ var KPIsOverviewView = ({
   const headerShiftId = showHistoricalLeaderboardHeader ? effectiveLeaderboardShiftId : currentShiftDetails.shiftId;
   const headerShiftName = getShiftNameById(headerShiftId, configuredTimezone, shiftConfig).replace(/ Shift$/i, "");
   const headerDateLabel = isMonthlyMode ? getMonthRange() : formatLocalDate2(headerDateKey);
-  const getShiftIcon = (shiftId) => {
+  const getShiftIcon2 = (shiftId) => {
     const shiftNameLower = getShiftNameById(shiftId, configuredTimezone, shiftConfig).toLowerCase();
     if (shiftNameLower.includes("day") || shiftNameLower.includes("morning") || shiftId === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" }) });
@@ -63640,7 +63657,7 @@ var KPIsOverviewView = ({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `inline-flex items-center bg-gray-100 rounded-full ${isMonthlyMode ? "px-4 py-1.5 ring-1 ring-gray-200 shadow-sm" : "px-2.5 py-1"}`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium text-gray-700 ${isMonthlyMode ? "text-sm" : "text-xs"}`, children: headerDateLabel }) }),
           !isMonthlyMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(headerShiftId) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon2(headerShiftId) }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: headerShiftName })
             ] }),
             showHistoricalLeaderboardHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-amber-50 text-amber-700 rounded-full", children: [
@@ -63836,7 +63853,7 @@ var KPIsOverviewView = ({
           !isMonthlyMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(headerShiftId) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon2(headerShiftId) }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold uppercase tracking-wider", children: [
                 headerShiftName,
                 " Shift"
@@ -63980,6 +63997,52 @@ var KPIsOverviewView = ({
   ] });
 };
 var KPIsOverviewView_default = KPIsOverviewView;
+var toFiniteNumber = (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 : null;
+  }
+  return null;
+};
+var getCycleRatio = (workspace) => {
+  const idealCycleTime = toFiniteNumber(workspace.ideal_cycle_time);
+  const avgCycleTime = toFiniteNumber(workspace.avg_cycle_time);
+  if (idealCycleTime === null || avgCycleTime === null || idealCycleTime <= 0 || avgCycleTime <= 0) {
+    return null;
+  }
+  return idealCycleTime / avgCycleTime;
+};
+var formatCycleTimeValue = (value) => {
+  const numericValue = toFiniteNumber(value);
+  if (numericValue === null || numericValue <= 0) return "--";
+  return `${numericValue.toFixed(1)}s`;
+};
+var CycleTimeComparison = React141.memo(({
+  workspace,
+  variant = "table"
+}) => {
+  const averageValue = formatCycleTimeValue(workspace.avg_cycle_time);
+  const standardValue = formatCycleTimeValue(workspace.ideal_cycle_time);
+  if (variant === "mobile") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between py-2 border-t border-gray-100", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Standard Cycle Time" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium tabular-nums text-gray-500", children: standardValue })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-gray-500", children: "Average" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold tabular-nums text-gray-900", children: averageValue })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-px bg-gray-200" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-gray-500", children: "Standard" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium tabular-nums text-gray-500", children: standardValue })
+    ] })
+  ] });
+}, (prevProps, nextProps) => prevProps.variant === nextProps.variant && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.ideal_cycle_time === nextProps.workspace.ideal_cycle_time);
+CycleTimeComparison.displayName = "CycleTimeComparison";
 var IsolatedTimer = React141.memo(() => {
   return /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {});
 });
@@ -63997,11 +64060,11 @@ var HeaderRibbon = React141.memo(({
   currentDate,
   currentMobileDate,
   shiftId,
-  getShiftIcon,
+  getShiftIcon: getShiftIcon2,
   getShiftName,
   showTimer = true
 }) => {
-  const shiftIcon = React141.useMemo(() => getShiftIcon(shiftId), [getShiftIcon, shiftId]);
+  const shiftIcon = React141.useMemo(() => getShiftIcon2(shiftId), [getShiftIcon2, shiftId]);
   const shiftName = React141.useMemo(() => getShiftName(shiftId), [getShiftName, shiftId]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden mt-3 flex items-center justify-center gap-2", children: [
@@ -64043,8 +64106,9 @@ var MobileWorkspaceCard = React141.memo(({
   isClickable,
   onWorkspaceClick,
   getMedalIcon,
-  efficiencyLabel
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+  metricLabel,
+  isAssemblyMode
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
   motion.div,
   {
     layout: true,
@@ -64055,28 +64119,31 @@ var MobileWorkspaceCard = React141.memo(({
     },
     onClick: isClickable ? () => onWorkspaceClick(workspace, rank) : void 0,
     className: `${cardClass} p-3 rounded-lg border shadow-sm active:scale-[0.98] ${isClickable ? "cursor-pointer" : "cursor-not-allowed opacity-75"}`,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-bold text-gray-700", children: [
-            "#",
-            rank
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2 gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-bold text-gray-700", children: [
+              "#",
+              rank
+            ] }),
+            getMedalIcon(rank)
           ] }),
-          getMedalIcon(rank)
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-gray-900", children: workspace.displayName }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: workspace.lineName })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-gray-900", children: workspace.displayName }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: workspace.lineName })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-gray-900 text-lg", children: isAssemblyMode ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: formatCycleTimeValue(workspace.avg_cycle_time) }) : /* @__PURE__ */ jsxRuntime.jsx(AnimatedEfficiency, { value: workspace.efficiency || 0 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: metricLabel })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold text-gray-900", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedEfficiency, { value: workspace.efficiency || 0 }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: efficiencyLabel })
-      ] })
-    ] })
+      isAssemblyMode && /* @__PURE__ */ jsxRuntime.jsx(CycleTimeComparison, { workspace, variant: "mobile" })
+    ]
   }
 ), (prevProps, nextProps) => {
-  return prevProps.efficiencyLabel === nextProps.efficiencyLabel && prevProps.rank === nextProps.rank && prevProps.cardClass === nextProps.cardClass && prevProps.isClickable === nextProps.isClickable && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.action_count === nextProps.workspace.action_count && prevProps.workspace.action_threshold === nextProps.workspace.action_threshold && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName;
+  return prevProps.metricLabel === nextProps.metricLabel && prevProps.isAssemblyMode === nextProps.isAssemblyMode && prevProps.rank === nextProps.rank && prevProps.cardClass === nextProps.cardClass && prevProps.isClickable === nextProps.isClickable && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.ideal_cycle_time === nextProps.workspace.ideal_cycle_time && prevProps.workspace.action_count === nextProps.workspace.action_count && prevProps.workspace.action_threshold === nextProps.workspace.action_threshold && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName;
 });
 MobileWorkspaceCard.displayName = "MobileWorkspaceCard";
 var DesktopWorkspaceRow = React141.memo(({
@@ -64085,7 +64152,8 @@ var DesktopWorkspaceRow = React141.memo(({
   rowClass,
   isClickable,
   onWorkspaceClick,
-  getMedalIcon
+  getMedalIcon,
+  isAssemblyMode
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   motion.tr,
   {
@@ -64102,11 +64170,11 @@ var DesktopWorkspaceRow = React141.memo(({
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspace.displayName }) }),
       /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspace.lineName }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base font-medium whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedEfficiency, { value: workspace.efficiency || 0 }) })
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-3 py-2.5 sm:p-4 text-sm sm:text-base font-medium ${isAssemblyMode ? "" : "whitespace-nowrap"}`, children: isAssemblyMode ? /* @__PURE__ */ jsxRuntime.jsx(CycleTimeComparison, { workspace, variant: "table" }) : /* @__PURE__ */ jsxRuntime.jsx(AnimatedEfficiency, { value: workspace.efficiency || 0 }) })
     ]
   }
 ), (prevProps, nextProps) => {
-  return prevProps.index === nextProps.index && prevProps.rowClass === nextProps.rowClass && prevProps.isClickable === nextProps.isClickable && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName;
+  return prevProps.index === nextProps.index && prevProps.rowClass === nextProps.rowClass && prevProps.isClickable === nextProps.isClickable && prevProps.isAssemblyMode === nextProps.isAssemblyMode && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.ideal_cycle_time === nextProps.workspace.ideal_cycle_time && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName;
 });
 DesktopWorkspaceRow.displayName = "DesktopWorkspaceRow";
 var LeaderboardDetailView = React141.memo(({
@@ -64128,6 +64196,7 @@ var LeaderboardDetailView = React141.memo(({
   const supabase = useSupabase();
   const [sortAscending, setSortAscending] = React141.useState(false);
   const [viewType, setViewType] = React141.useState("operator");
+  const [outputCategory, setOutputCategory] = React141.useState("standard");
   const [activeTab, setActiveTab] = React141.useState("today");
   const timezone = useAppTimezone();
   const staticShiftConfig = useShiftConfig();
@@ -64206,6 +64275,7 @@ var LeaderboardDetailView = React141.memo(({
   const monthlyRequestKeyRef = React141.useRef(null);
   const leaderboardUpdateQueuedRef = React141.useRef(false);
   const leaderboardUpdateTimerRef = React141.useRef(null);
+  const leaderboardViewTrackedRef = React141.useRef(null);
   const filterRef = React141.useRef(null);
   const filterButtonRef = React141.useRef(null);
   const mobileFilterButtonRef = React141.useRef(null);
@@ -64338,6 +64408,17 @@ var LeaderboardDetailView = React141.memo(({
     }
     return Array.from(uniqueLines.entries()).map(([id3, name]) => ({ id: id3, label: name }));
   }, [configuredLineIds, lines, getLineName]);
+  const scopedLines = React141.useMemo(() => {
+    const configuredLineIdSet = new Set(configuredLineIds);
+    return lines.filter((line) => configuredLineIds.length === 0 || configuredLineIdSet.has(line.id));
+  }, [configuredLineIds, lines]);
+  const scopedLineAssemblyMap = React141.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    scopedLines.forEach((line) => {
+      map.set(line.id, line.assembly === true);
+    });
+    return map;
+  }, [scopedLines]);
   const shiftOptions = React141.useMemo(() => {
     if (activeShiftConfig?.shifts && activeShiftConfig.shifts.length > 0) {
       return activeShiftConfig.shifts.map((shift2) => ({
@@ -64361,6 +64442,33 @@ var LeaderboardDetailView = React141.memo(({
     const parsed = Number(selectedShiftFilter);
     return Number.isFinite(parsed) ? parsed : void 0;
   }, [selectedShiftFilter]);
+  const outputScopeLines = React141.useMemo(() => {
+    const outputLines = scopedLines.filter((line) => (line.monitoring_mode ?? "output") !== "uptime");
+    if (selectedLineFilter === "all") {
+      return outputLines;
+    }
+    return outputLines.filter((line) => line.id === selectedLineFilter);
+  }, [scopedLines, selectedLineFilter]);
+  const hasAssemblyOutputScope = React141.useMemo(
+    () => outputScopeLines.some((line) => line.assembly === true),
+    [outputScopeLines]
+  );
+  const hasStandardOutputScope = React141.useMemo(
+    () => outputScopeLines.some((line) => line.assembly !== true),
+    [outputScopeLines]
+  );
+  const showOutputCategoryDropdown = viewType === "operator" && hasAssemblyOutputScope && hasStandardOutputScope;
+  const isAssemblyMode = viewType === "operator" && outputCategory === "assembly";
+  React141.useEffect(() => {
+    if (viewType !== "operator") return;
+    if (hasAssemblyOutputScope && !hasStandardOutputScope && outputCategory !== "assembly") {
+      setOutputCategory("assembly");
+      return;
+    }
+    if (hasStandardOutputScope && !hasAssemblyOutputScope && outputCategory !== "standard") {
+      setOutputCategory("standard");
+    }
+  }, [viewType, hasAssemblyOutputScope, hasStandardOutputScope, outputCategory]);
   const handleLineFilterChange = React141.useCallback((value) => {
     setSelectedLineFilter(value);
   }, []);
@@ -64370,17 +64478,19 @@ var LeaderboardDetailView = React141.memo(({
   const clearFilters = React141.useCallback(() => {
     setSortAscending(false);
     setSelectedLineFilter("all");
+    setOutputCategory("standard");
     setSelectedShiftFilter(currentShiftInfo.shiftId.toString());
   }, [currentShiftInfo.shiftId]);
   const activeFiltersCount = React141.useMemo(() => {
     let count = 0;
     if (sortAscending) count++;
     if (selectedLineFilter !== "all") count++;
+    if (showOutputCategoryDropdown && outputCategory !== "standard") count++;
     if (selectedShiftFilter !== currentShiftInfo.shiftId.toString()) {
       count++;
     }
     return count;
-  }, [sortAscending, selectedLineFilter, selectedShiftFilter, currentShiftInfo.shiftId]);
+  }, [sortAscending, selectedLineFilter, outputCategory, showOutputCategoryDropdown, selectedShiftFilter, currentShiftInfo.shiftId]);
   const shouldFetchShiftConfigs = !date && shiftId === void 0;
   const {
     shiftConfigMap: multiLineShiftConfigMap,
@@ -64432,7 +64542,8 @@ var LeaderboardDetailView = React141.memo(({
       action_count: entry.total_output || 0,
       pph: entry.avg_pph || 0,
       performance_score: entry.performance_score ?? 0,
-      avg_cycle_time: entry.avg_cycle_time || 0,
+      avg_cycle_time: toFiniteNumber(entry.avg_cycle_time) ?? 0,
+      ideal_cycle_time: toFiniteNumber(entry.ideal_cycle_time) ?? void 0,
       trend: 0,
       predicted_output: 0,
       efficiency: entry.efficiency || 0,
@@ -64610,7 +64721,7 @@ var LeaderboardDetailView = React141.memo(({
     const currentShift = getCurrentShift(timezone || "Asia/Kolkata", activeShiftConfig);
     return currentShift.shiftName || getShiftNameById(currentShift.shiftId, timezone || "Asia/Kolkata", activeShiftConfig);
   }, [timezone, activeShiftConfig, shiftGroups]);
-  const getShiftIcon = React141.useCallback((shiftId2) => {
+  const getShiftIcon2 = React141.useCallback((shiftId2) => {
     if (shiftId2 === void 0 && shiftGroups.length > 1) {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" }) });
     }
@@ -64676,15 +64787,20 @@ var LeaderboardDetailView = React141.memo(({
     if (!canOpenWorkspace(workspace.line_id)) {
       return;
     }
+    const cycleRatio = getCycleRatio(workspace);
     trackCoreEvent("Workspace from Leaderboard Clicked", {
       workspace_name: workspace.workspace_name,
       workspace_id: workspace.workspace_uuid,
       rank,
       total_workspaces: workspacesLengthRef.current,
       // Use ref instead of state to avoid dependency
+      metric_context: viewType === "machine" ? "machine" : outputCategory,
       efficiency: workspace.efficiency,
       action_count: workspace.action_count,
-      action_threshold: workspace.action_threshold
+      action_threshold: workspace.action_threshold,
+      avg_cycle_time: workspace.avg_cycle_time,
+      ideal_cycle_time: workspace.ideal_cycle_time ?? null,
+      cycle_ratio: cycleRatio
     });
     const displayName = workspace.displayName || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
     const navParams = workspace.workspace_uuid ? getWorkspaceNavigationParams(workspace.workspace_uuid, displayName, workspace.line_id) : "";
@@ -64708,7 +64824,7 @@ var LeaderboardDetailView = React141.memo(({
       const combinedParams = navParams ? `${navParams}&${contextParamString}` : `?${contextParamString}`;
       navigation.navigate(`/workspace/${workspace.workspace_uuid}${combinedParams}`);
     }
-  }, [canOpenWorkspace, onWorkspaceClick, navigation, date, shiftId]);
+  }, [canOpenWorkspace, onWorkspaceClick, navigation, date, shiftId, outputCategory, viewType]);
   React141.useEffect(() => {
     workspacesLengthRef.current = activeEntries.length || 0;
   }, [activeEntries.length]);
@@ -64729,16 +64845,20 @@ var LeaderboardDetailView = React141.memo(({
     return activeEntries.map((ws) => ({
       ...ws,
       displayName: ws.displayName || getWorkspaceDisplayName(ws.workspace_name, ws.line_id),
-      lineName: getLineName(ws.line_id)
+      lineName: getLineName(ws.line_id),
+      isAssemblyLine: scopedLineAssemblyMap.get(ws.line_id) === true
     }));
-  }, [activeEntries, getLineName]);
+  }, [activeEntries, getLineName, scopedLineAssemblyMap]);
   const sortedWorkspaces = React141.useMemo(() => {
     let filtered = [...workspaceDisplayData];
     filtered = filtered.filter((ws) => {
       if (viewType === "machine") {
         return ws.monitoring_mode === "uptime";
       }
-      return ws.monitoring_mode !== "uptime";
+      if (ws.monitoring_mode === "uptime") {
+        return false;
+      }
+      return isAssemblyMode ? ws.isAssemblyLine : !ws.isAssemblyLine;
     });
     if (selectedLineFilter !== "all") {
       filtered = filtered.filter((ws) => ws.line_id === selectedLineFilter);
@@ -64747,13 +64867,61 @@ var LeaderboardDetailView = React141.memo(({
       filtered = filtered.filter((ws) => ws.shift_id?.toString() === selectedShiftFilter);
     }
     return filtered.sort((a, b) => {
+      if (isAssemblyMode) {
+        const ratioA = getCycleRatio(a);
+        const ratioB = getCycleRatio(b);
+        if (ratioA === null && ratioB === null) return 0;
+        if (ratioA === null) return 1;
+        if (ratioB === null) return -1;
+        return sortAscending ? ratioA - ratioB : ratioB - ratioA;
+      }
       const effA = a.efficiency || 0;
       const effB = b.efficiency || 0;
       return sortAscending ? effA - effB : effB - effA;
     });
-  }, [workspaceDisplayData, sortAscending, selectedLineFilter, selectedShiftFilter, activeTab, viewType]);
+  }, [workspaceDisplayData, sortAscending, selectedLineFilter, selectedShiftFilter, activeTab, viewType, isAssemblyMode]);
   const loading = activeTab === "today" ? todayLoading : monthlyLoading;
   const error = activeTab === "today" ? todayError : monthlyError;
+  React141.useEffect(() => {
+    if (loading || error || sortedWorkspaces.length === 0) return;
+    const trackingKey = [
+      activeTab,
+      viewType,
+      outputCategory,
+      selectedLineFilter,
+      selectedShiftFilter,
+      sortAscending ? "asc" : "desc",
+      sortedWorkspaces.length
+    ].join("|");
+    if (leaderboardViewTrackedRef.current === trackingKey) return;
+    leaderboardViewTrackedRef.current = trackingKey;
+    const topWorkspace = sortedWorkspaces[0];
+    trackCoreEvent("Workspace Leaderboard View Loaded", {
+      time_range: activeTab,
+      view_type: viewType,
+      metric_context: viewType === "machine" ? "machine" : outputCategory,
+      line_filter: selectedLineFilter,
+      shift_filter: selectedShiftFilter,
+      sort_direction: sortAscending ? "asc" : "desc",
+      workspace_count: sortedWorkspaces.length,
+      top_workspace_id: topWorkspace?.workspace_uuid ?? null,
+      top_workspace_name: topWorkspace?.workspace_name ?? null,
+      top_efficiency: topWorkspace?.efficiency ?? null,
+      top_avg_cycle_time: topWorkspace?.avg_cycle_time ?? null,
+      top_ideal_cycle_time: topWorkspace?.ideal_cycle_time ?? null,
+      top_cycle_ratio: topWorkspace ? getCycleRatio(topWorkspace) : null
+    });
+  }, [
+    loading,
+    error,
+    sortedWorkspaces,
+    activeTab,
+    viewType,
+    outputCategory,
+    selectedLineFilter,
+    selectedShiftFilter,
+    sortAscending
+  ]);
   const currentDateFormatted = React141.useMemo(() => {
     const dateStr = (/* @__PURE__ */ new Date()).toDateString();
     return formatDate2(new Date(dateStr));
@@ -64771,7 +64939,9 @@ var LeaderboardDetailView = React141.memo(({
       error.message
     ] }) });
   }
-  const efficiencyLabel = viewType === "machine" ? "Utilization" : "Efficiency";
+  const metricLabel = viewType === "machine" ? "Utilization" : isAssemblyMode ? "Cycle Time" : "Efficiency";
+  const descendingSortLabel = "Highest to Lowest";
+  const ascendingSortLabel = "Lowest to Highest";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, style: { willChange: "contents" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-6 md:px-8 py-2 sm:py-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
@@ -64821,7 +64991,7 @@ var LeaderboardDetailView = React141.memo(({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: efficiencyLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: metricLabel }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
               "select",
               {
@@ -64830,8 +65000,25 @@ var LeaderboardDetailView = React141.memo(({
                 className: "w-full appearance-none pl-3 pr-8 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer",
                 style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.75rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.2em 1.2em` },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "desc", children: "Highest to Lowest" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "asc", children: "Lowest to Highest" })
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "desc", children: descendingSortLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "asc", children: ascendingSortLabel })
+                ]
+              }
+            ) })
+          ] }),
+          showOutputCategoryDropdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 sm:hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Output Type" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                "aria-label": "Output leaderboard category",
+                value: outputCategory,
+                onChange: (e) => setOutputCategory(e.target.value),
+                className: "w-full appearance-none pl-3 pr-8 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer",
+                style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.75rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.2em 1.2em` },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "standard", children: "Standard" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", children: "Assembly" })
                 ]
               }
             ) })
@@ -64873,7 +65060,7 @@ var LeaderboardDetailView = React141.memo(({
           currentDate: activeTab === "monthly" ? monthlyRangeText : currentDateFormatted,
           currentMobileDate: activeTab === "monthly" ? monthlyRangeText : currentMobileDateFormatted,
           shiftId: activeTab === "monthly" ? monthlyShiftId : todayShiftId,
-          getShiftIcon,
+          getShiftIcon: getShiftIcon2,
           getShiftName,
           showTimer: activeTab === "today"
         }
@@ -64971,6 +65158,20 @@ var LeaderboardDetailView = React141.memo(({
                 ]
               }
             ) }),
+            showOutputCategoryDropdown && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                "aria-label": "Output leaderboard category",
+                value: outputCategory,
+                onChange: (e) => setOutputCategory(e.target.value),
+                className: "appearance-none pl-3 pr-8 py-1.5 text-sm font-medium bg-white border border-gray-200 hover:border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all cursor-pointer shadow-sm",
+                style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.5rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.2em 1.2em` },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "standard", children: "Standard" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", children: "Assembly" })
+                ]
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
@@ -65002,7 +65203,8 @@ var LeaderboardDetailView = React141.memo(({
           isClickable: canOpenWorkspace(ws.line_id),
           onWorkspaceClick: stableHandleWorkspaceClick,
           getMedalIcon: stableGetMedalIcon,
-          efficiencyLabel
+          metricLabel,
+          isAssemblyMode
         },
         ws.workspace_uuid
       );
@@ -65013,7 +65215,7 @@ var LeaderboardDetailView = React141.memo(({
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2.5 sm:p-4 text-left text-xs sm:text-sm font-semibold text-gray-600 whitespace-nowrap", children: "Rank" }),
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2.5 sm:p-4 text-left text-xs sm:text-sm font-semibold text-gray-600 whitespace-nowrap", children: "Workspace" }),
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2.5 sm:p-4 text-left text-xs sm:text-sm font-semibold text-gray-600 whitespace-nowrap", children: "Line" }),
-          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2.5 sm:p-4 text-left text-xs sm:text-sm font-semibold text-gray-600 whitespace-nowrap", children: efficiencyLabel })
+          /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2.5 sm:p-4 text-left text-xs sm:text-sm font-semibold text-gray-600 whitespace-nowrap", children: metricLabel })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-gray-100", children: sortedWorkspaces.map((ws, index) => {
           const isTopThree = index < 3;
@@ -65026,7 +65228,8 @@ var LeaderboardDetailView = React141.memo(({
               rowClass,
               isClickable: canOpenWorkspace(ws.line_id),
               onWorkspaceClick: stableHandleWorkspaceClick,
-              getMedalIcon: stableGetMedalIcon
+              getMedalIcon: stableGetMedalIcon,
+              isAssemblyMode
             },
             ws.workspace_uuid
           );
@@ -65044,7 +65247,10 @@ function LoginView({
   logoSrc = optifye_logo_default,
   logoAlt = "Optifye",
   brandName = "Optifye",
-  onRateLimitCheck
+  onRateLimitCheck,
+  showDevTestLogin = false,
+  devTestLoginLabel,
+  onDevTestLogin
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     LoginPage,
@@ -65052,7 +65258,10 @@ function LoginView({
       logoSrc,
       logoAlt,
       brandName,
-      onRateLimitCheck
+      onRateLimitCheck,
+      showDevTestLogin,
+      devTestLoginLabel,
+      onDevTestLogin
     }
   );
 }
@@ -68240,20 +68449,30 @@ function useTimezone(options = {}) {
 }
 
 // src/views/workspace-detail-view.utils.ts
-var getWorkspaceCycleTimePresentation = ({
+var getWorkspaceDetailLayoutMode = ({
   workspace,
   showCycleTimeChart
 }) => {
   if (workspace?.monitoring_mode === "uptime") {
-    return "output";
+    return "uptime";
   }
   if (showCycleTimeChart === false) {
     return "output";
   }
-  if (!shouldUseAssemblyCycleTimeLayout(workspace)) {
+  return shouldUseAssemblyCycleTimeLayout(workspace) ? "assembly_cycle" : "output";
+};
+var getCycleTimeRenderState = ({
+  workspace,
+  authoritativeMetrics,
+  showCycleTimeChart
+}) => {
+  if (getWorkspaceDetailLayoutMode({ workspace, showCycleTimeChart }) !== "assembly_cycle") {
     return "output";
   }
-  return workspace?.cycle_time_data_status === "missing_clips" ? "cycle_unavailable" : "cycle_chart";
+  if (!authoritativeMetrics) {
+    return "chart_loading";
+  }
+  return authoritativeMetrics.cycle_time_data_status === "missing_clips" ? "cycle_unavailable" : "cycle_chart";
 };
 var formatDateInTimezone = (date = /* @__PURE__ */ new Date(), timezone, options) => {
   const defaultOptions = {
@@ -68661,33 +68880,34 @@ var WorkspaceDetailView = ({
       idle_time_hourly: void 0
     };
   }, [cachedOverviewMetrics, shiftConfig?.shifts]);
-  const workspace = (isHistoricView ? historicMetrics : liveMetrics) || cachedDetailedMetrics || overviewFallback;
+  const authoritativeCycleMetrics = isHistoricView ? historicMetrics : liveMetrics;
+  const workspace = authoritativeCycleMetrics || cachedDetailedMetrics || overviewFallback;
   const { timezone: cycleTimeTimezone } = useTimezone({
     lineId: effectiveLineId || workspace?.line_id || void 0,
     workspaceId: workspaceId || void 0
   });
   const effectiveCycleTimeTimezone = cycleTimeTimezone || timezone;
-  const detailedWorkspaceMetrics = (isHistoricView ? historicMetrics : liveMetrics) || cachedDetailedMetrics;
+  const detailedWorkspaceMetrics = authoritativeCycleMetrics || cachedDetailedMetrics;
   const cycleTimeChartData = React141.useMemo(
-    () => Array.isArray(workspace?.hourly_cycle_times) ? workspace.hourly_cycle_times.map((value) => {
+    () => Array.isArray(authoritativeCycleMetrics?.hourly_cycle_times) ? authoritativeCycleMetrics.hourly_cycle_times.map((value) => {
       const numericValue = Number(value);
       return Number.isFinite(numericValue) ? numericValue : 0;
     }) : [],
-    [workspace?.hourly_cycle_times]
+    [authoritativeCycleMetrics?.hourly_cycle_times]
   );
   const maskedCycleTimeChartData = React141.useMemo(
     () => maskFutureHourlySeries({
       data: cycleTimeChartData,
-      shiftStart: workspace?.shift_start,
-      shiftEnd: workspace?.shift_end,
-      shiftDate: workspace?.date || date || calculatedOperationalDate || null,
+      shiftStart: authoritativeCycleMetrics?.shift_start,
+      shiftEnd: authoritativeCycleMetrics?.shift_end,
+      shiftDate: authoritativeCycleMetrics?.date || date || calculatedOperationalDate || null,
       timezone: effectiveCycleTimeTimezone
     }),
     [
       cycleTimeChartData,
-      workspace?.shift_start,
-      workspace?.shift_end,
-      workspace?.date,
+      authoritativeCycleMetrics?.shift_start,
+      authoritativeCycleMetrics?.shift_end,
+      authoritativeCycleMetrics?.date,
       date,
       calculatedOperationalDate,
       effectiveCycleTimeTimezone
@@ -68695,13 +68915,13 @@ var WorkspaceDetailView = ({
   );
   const cycleTimeDatasetKey = React141.useMemo(
     () => [
-      workspace?.workspace_id || workspaceId || "workspace",
-      date || workspace?.date || "live",
-      parsedShiftId ?? workspace?.shift_id ?? "current",
+      authoritativeCycleMetrics?.workspace_id || workspaceId || "workspace",
+      date || authoritativeCycleMetrics?.date || "live",
+      parsedShiftId ?? authoritativeCycleMetrics?.shift_id ?? "current",
       "hourly",
       "backend"
     ].join(":"),
-    [workspace?.workspace_id, workspaceId, date, workspace?.date, parsedShiftId, workspace?.shift_id]
+    [authoritativeCycleMetrics?.workspace_id, workspaceId, date, authoritativeCycleMetrics?.date, parsedShiftId, authoritativeCycleMetrics?.shift_id]
   );
   const hasWorkspaceSnapshot = Boolean(workspace);
   const loading = ((isHistoricView ? historicLoading : liveLoading) || isShiftConfigLoading) && !hasWorkspaceSnapshot;
@@ -68950,30 +69170,46 @@ var WorkspaceDetailView = ({
     action_type: workspace.action_type
   } : null;
   const isAssemblyWorkspace = shouldUseAssemblyCycleTimeLayout(workspaceCycleTimeEligibility);
-  const cycleTimePresentation = getWorkspaceCycleTimePresentation({
+  const layoutMode = getWorkspaceDetailLayoutMode({
+    workspace: workspace ? {
+      monitoring_mode: workspace.monitoring_mode,
+      line_assembly_enabled: workspace.line_assembly_enabled,
+      action_family: workspace.action_family,
+      action_type: workspace.action_type
+    } : null,
+    showCycleTimeChart
+  });
+  const isAssemblyCycleLayout = layoutMode === "assembly_cycle";
+  const isOutputLayout = layoutMode === "output";
+  const cycleTimePresentation = getCycleTimeRenderState({
     workspace: workspace ? {
       monitoring_mode: workspace.monitoring_mode,
       line_assembly_enabled: workspace.line_assembly_enabled,
       action_family: workspace.action_family,
-      action_type: workspace.action_type,
-      cycle_time_data_status: workspace.cycle_time_data_status
+      action_type: workspace.action_type
+    } : null,
+    authoritativeMetrics: authoritativeCycleMetrics ? {
+      cycle_time_data_status: authoritativeCycleMetrics.cycle_time_data_status
     } : null,
     showCycleTimeChart
   });
-  const shouldShowCycleTimeChart = cycleTimePresentation !== "output";
+  const shouldShowCycleTimeChart = cycleTimePresentation === "cycle_chart";
   const shouldShowCycleTimeUnavailableState = cycleTimePresentation === "cycle_unavailable";
-  const showIdleBreakdownChart = !shouldShowCycleTimeChart && idleTimeVlmEnabled;
+  const shouldShowCycleTimeLoadingState = cycleTimePresentation === "chart_loading";
+  const shouldShowAssemblyOverviewLoadingState = isAssemblyCycleLayout && shouldShowCycleTimeLoadingState && hasWorkspaceSnapshot;
+  const showIdleBreakdownChart = !isAssemblyCycleLayout && idleTimeVlmEnabled;
+  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 parseTimeToMinutes3 = (time2) => {
+    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 = parseTimeToMinutes3(workspace.shift_start);
-    const endTotalRaw = workspace.shift_end ? parseTimeToMinutes3(workspace.shift_end) : startTotal + 11 * 60;
+    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));
@@ -69023,6 +69259,18 @@ var WorkspaceDetailView = ({
       workspace.cycle_completion_clip_count
     ] })
   ] }), [workspace?.cycle_completion_clip_count]);
+  const assemblyOverviewLoadingView = React141.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 pb-4", "data-testid": "assembly-overview-loading-state", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-sm p-6 lg:p-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[280px] lg:min-h-[340px] flex flex-col justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-xl mx-auto animate-pulse space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-gray-200 rounded-full w-3/4 mx-auto" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-gray-100 rounded-full w-full" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 bg-gray-100 rounded-full w-5/6 mx-auto" })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-sm p-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-24 bg-gray-200 rounded" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-20 bg-gray-100 rounded" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-28 bg-gray-100 rounded" })
+    ] }) }, index)) })
+  ] }), []);
   const shiftDurationMinutes = React141.useMemo(
     () => getShiftDurationMinutes(workspace?.shift_start, workspace?.shift_end),
     [workspace?.shift_start, workspace?.shift_end]
@@ -69077,7 +69325,7 @@ var WorkspaceDetailView = ({
   }, [isUptimeMode, uptimeSeries, shiftDurationMinutes, elapsedShiftMinutes, workspace?.idle_time]);
   const overviewTabLabel = isUptimeMode ? "Utilization" : "Efficiency";
   const idleClipFetchEnabled = Boolean(
-    workspaceId && idleClipDate && idleClipShiftId !== void 0 && activeTab === "overview" && idleTimeVlmEnabled && !shouldShowCycleTimeChart && !isUptimeMode
+    workspaceId && idleClipDate && idleClipShiftId !== void 0 && activeTab === "overview" && idleTimeVlmEnabled && isOutputLayout
   );
   const {
     idleClips: idleTimeClips,
@@ -69148,7 +69396,7 @@ var WorkspaceDetailView = ({
       }
     }
   };
-  const getShiftIcon = (shiftType) => {
+  const getShiftIcon2 = (shiftType) => {
     const shiftTypeLower = shiftType?.toLowerCase() || "";
     if (shiftTypeLower.includes("day") || shiftTypeLower.includes("morning")) {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" }) });
@@ -69297,7 +69545,7 @@ var WorkspaceDetailView = ({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: (() => {
                   const shift2 = shiftConfig?.shifts?.find((s) => s.shiftId === selectedShift);
                   const shiftName = shift2?.shiftName || (selectedShift === 0 ? "Day Shift" : "Night Shift");
-                  return getShiftIcon(shiftName);
+                  return getShiftIcon2(shiftName);
                 })() }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: (() => {
                   const shift2 = shiftConfig?.shifts?.find((s) => s.shiftId === selectedShift);
@@ -69325,7 +69573,7 @@ var WorkspaceDetailView = ({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: (() => {
                   const shift2 = shiftConfig?.shifts?.find((s) => s.shiftId === selectedShift);
                   const shiftName = shift2?.shiftName || (selectedShift === 0 ? "Day Shift" : "Night Shift");
-                  return getShiftIcon(shiftName);
+                  return getShiftIcon2(shiftName);
                 })() }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-semibold uppercase tracking-wider", children: (() => {
                   const shift2 = shiftConfig?.shifts?.find((s) => s.shiftId === selectedShift);
@@ -69338,7 +69586,7 @@ var WorkspaceDetailView = ({
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden mt-3 flex items-center justify-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-gray-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: formatISTDate2(new Date(workspace.date)) }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(workspace.shift_type) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon2(workspace.shift_type) }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: workspace.shift_type })
               ] }),
               !date && !shift && !usingFallbackData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }) }) : date ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-blue-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-blue-700", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }) }) : usingFallbackData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-amber-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-amber-700", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }) }) : null
@@ -69369,7 +69617,7 @@ var WorkspaceDetailView = ({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(workspace.shift_type) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon2(workspace.shift_type) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-semibold uppercase tracking-wider", children: [
                   workspace.shift_type.replace(/ Shift$/i, ""),
                   " Shift"
@@ -69488,9 +69736,9 @@ var WorkspaceDetailView = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4", children: [
-          activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full lg:h-[calc(100vh-12rem)] overflow-y-auto lg:min-h-0 pb-4", children: [
+          activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col h-full lg:h-[calc(100vh-12rem)] overflow-y-auto lg:min-h-0 pb-4", children: shouldShowAssemblyOverviewLoadingState ? assemblyOverviewLoadingView : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "block lg:hidden space-y-6 pb-6", children: [
-              !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
+              isOutputLayout && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
                 motion.div,
                 {
                   className: "bg-white rounded-lg shadow-sm p-6 h-[300px]",
@@ -69518,8 +69766,8 @@ var WorkspaceDetailView = ({
                   animate: "animate",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-4", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle time trend" : "Hourly Output" }),
-                      !isUptimeMode && !shouldShowCycleTimeUnavailableState && /* @__PURE__ */ jsxRuntime.jsx(
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : isAssemblyCycleLayout ? "Cycle time trend" : "Hourly Output" }),
+                      canToggleChartIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
                         "button",
                         {
                           onClick: () => setShowChartIdleTime(!showChartIdleTime),
@@ -69548,19 +69796,19 @@ var WorkspaceDetailView = ({
                             timezone,
                             elapsedMinutes: elapsedShiftMinutes
                           }
-                        ) : shouldShowCycleTimeUnavailableState ? cycleTimeUnavailableView : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
+                        ) : isAssemblyCycleLayout ? shouldShowCycleTimeUnavailableState ? cycleTimeUnavailableView : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
                           CycleTimeOverTimeChart,
                           {
                             data: maskedCycleTimeChartData,
-                            idealCycleTime: workspace.ideal_cycle_time || 0,
-                            shiftStart: workspace.shift_start || "",
-                            shiftEnd: workspace.shift_end || "",
+                            idealCycleTime: authoritativeCycleMetrics?.ideal_cycle_time || 0,
+                            shiftStart: authoritativeCycleMetrics?.shift_start || "",
+                            shiftEnd: authoritativeCycleMetrics?.shift_end || "",
                             xAxisMode: "hourly",
                             datasetKey: cycleTimeDatasetKey,
                             showIdleTime: showChartIdleTime,
                             idleTimeData: hourlyIdleMinutes
                           }
-                        ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        ) : null : /* @__PURE__ */ jsxRuntime.jsx(
                           HourlyOutputChart2,
                           {
                             data: workspace.hourly_action_counts || [],
@@ -69580,7 +69828,7 @@ var WorkspaceDetailView = ({
                   ]
                 }
               ),
-              !shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
+              showIdleBreakdownChart && /* @__PURE__ */ jsxRuntime.jsxs(
                 motion.div,
                 {
                   className: "bg-white rounded-lg shadow-sm p-4 h-[300px]",
@@ -69600,7 +69848,7 @@ var WorkspaceDetailView = ({
                   ]
                 }
               ),
-              isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(UptimeMetricCards, { workspace, uptimePieData }) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
+              isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(UptimeMetricCards, { workspace, uptimePieData }) : isAssemblyCycleLayout ? /* @__PURE__ */ jsxRuntime.jsx(
                 WorkspaceCycleTimeMetricCards,
                 {
                   workspace,
@@ -69620,7 +69868,7 @@ var WorkspaceDetailView = ({
                     desktopTopSectionClass
                   ),
                   children: [
-                    !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
+                    isOutputLayout && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
                       motion.div,
                       {
                         className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
@@ -69644,15 +69892,15 @@ var WorkspaceDetailView = ({
                       {
                         className: clsx(
                           "bg-white rounded-lg shadow-sm p-4 flex flex-col min-h-0",
-                          isUptimeMode && showIdleBreakdownChart ? "lg:col-span-2" : shouldShowCycleTimeChart || isUptimeMode ? "lg:col-span-10" : idleTimeVlmEnabled ? "lg:col-span-6" : "lg:col-span-8"
+                          isUptimeMode && showIdleBreakdownChart ? "lg:col-span-2" : isAssemblyCycleLayout || isUptimeMode ? "lg:col-span-10" : idleTimeVlmEnabled ? "lg:col-span-6" : "lg:col-span-8"
                         ),
                         variants: chartCardVariants,
                         initial: "initial",
                         animate: "animate",
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle time trend" : "Hourly Output" }),
-                            !isUptimeMode && !shouldShowCycleTimeUnavailableState && /* @__PURE__ */ jsxRuntime.jsx(
+                            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : isAssemblyCycleLayout ? "Cycle time trend" : "Hourly Output" }),
+                            canToggleChartIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
                               "button",
                               {
                                 onClick: () => setShowChartIdleTime(!showChartIdleTime),
@@ -69677,19 +69925,19 @@ var WorkspaceDetailView = ({
                               timezone,
                               elapsedMinutes: elapsedShiftMinutes
                             }
-                          ) : shouldShowCycleTimeUnavailableState ? cycleTimeUnavailableView : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
+                          ) : isAssemblyCycleLayout ? shouldShowCycleTimeUnavailableState ? cycleTimeUnavailableView : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
                             CycleTimeOverTimeChart,
                             {
                               data: maskedCycleTimeChartData,
-                              idealCycleTime: workspace.ideal_cycle_time || 0,
-                              shiftStart: workspace.shift_start || "",
-                              shiftEnd: workspace.shift_end || "",
+                              idealCycleTime: authoritativeCycleMetrics?.ideal_cycle_time || 0,
+                              shiftStart: authoritativeCycleMetrics?.shift_start || "",
+                              shiftEnd: authoritativeCycleMetrics?.shift_end || "",
                               xAxisMode: "hourly",
                               datasetKey: cycleTimeDatasetKey,
                               showIdleTime: showChartIdleTime,
                               idleTimeData: hourlyIdleMinutes
                             }
-                          ) : /* @__PURE__ */ jsxRuntime.jsx(
+                          ) : null : /* @__PURE__ */ jsxRuntime.jsx(
                             HourlyOutputChart2,
                             {
                               data: workspace.hourly_action_counts || [],
@@ -69707,7 +69955,7 @@ var WorkspaceDetailView = ({
                         ]
                       }
                     ),
-                    !shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
+                    showIdleBreakdownChart && /* @__PURE__ */ jsxRuntime.jsxs(
                       motion.div,
                       {
                         className: clsx(
@@ -69733,7 +69981,7 @@ var WorkspaceDetailView = ({
                   ]
                 }
               ),
-              isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(UptimeMetricCards, { workspace, uptimePieData, className: "flex-1" }) }) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
+              isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(UptimeMetricCards, { workspace, uptimePieData, className: "flex-1" }) }) : isAssemblyCycleLayout ? /* @__PURE__ */ jsxRuntime.jsx(
                 WorkspaceCycleTimeMetricCards,
                 {
                   workspace,
@@ -69744,7 +69992,7 @@ var WorkspaceDetailView = ({
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] })
-          ] }),
+          ] }) }),
           activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100vh-10rem)] overflow-y-auto px-2 sm:px-4 lg:px-0", children: [
             usingFallbackData && !date && !shift && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 sm:mb-4 bg-amber-50 border border-amber-200 rounded-lg px-3 sm:px-4 py-2 sm:py-3 text-amber-800", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs sm:text-sm font-medium flex items-center", children: [
               /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 sm:h-5 sm:w-5 mr-2", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
@@ -72376,7 +72624,7 @@ var normalizeLabel = (value) => {
   const trimmed = value.trim();
   return trimmed.length > 0 ? trimmed : void 0;
 };
-var toFiniteNumber = (value) => {
+var toFiniteNumber2 = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) return value;
   if (typeof value === "string" && value.trim().length > 0) {
     const parsed = Number(value);
@@ -72410,7 +72658,7 @@ var formatImprovementPieceGain = (pcsGain) => {
 var getPositiveImprovementGain = ({
   estimated_gain_pieces
 }) => {
-  const issueGain = toFiniteNumber(estimated_gain_pieces);
+  const issueGain = toFiniteNumber2(estimated_gain_pieces);
   return {
     pcsGain: issueGain !== null && issueGain > 0 ? issueGain : null
   };
@@ -72418,7 +72666,7 @@ var getPositiveImprovementGain = ({
 var getImprovementPcsGainSortValue = (input) => {
   const { pcsGain } = getPositiveImprovementGain(input);
   if (pcsGain !== null) return pcsGain;
-  const raw = toFiniteNumber(input.estimated_gain_pieces);
+  const raw = toFiniteNumber2(input.estimated_gain_pieces);
   return raw ?? null;
 };
 var getImprovementDisplayMetadata = ({
@@ -72438,7 +72686,7 @@ var getImprovementDisplayMetadata = ({
     metadataLabel: [workstationLabel, lineLabel, supervisorLabel].join(" \xB7 ")
   };
 };
-var toFiniteNumber2 = (value) => {
+var toFiniteNumber3 = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) return value;
   if (typeof value === "string" && value.trim().length > 0) {
     const parsed = Number(value);
@@ -72466,15 +72714,15 @@ var compareImprovementRecommendationPriority = (left, right) => {
   if (leftIndustrial !== rightIndustrial) {
     return rightIndustrial - leftIndustrial;
   }
-  const leftGain = toFiniteNumber2(left.estimated_gain_pieces);
-  const rightGain = toFiniteNumber2(right.estimated_gain_pieces);
+  const leftGain = toFiniteNumber3(left.estimated_gain_pieces);
+  const rightGain = toFiniteNumber3(right.estimated_gain_pieces);
   if (leftGain !== rightGain) {
     if (leftGain === null) return 1;
     if (rightGain === null) return -1;
     return rightGain - leftGain;
   }
-  const leftRatio = toFiniteNumber2(left.gain_to_target_ratio);
-  const rightRatio = toFiniteNumber2(right.gain_to_target_ratio);
+  const leftRatio = toFiniteNumber3(left.gain_to_target_ratio);
+  const rightRatio = toFiniteNumber3(right.gain_to_target_ratio);
   if (leftRatio !== rightRatio) {
     if (leftRatio === null) return 1;
     if (rightRatio === null) return -1;
@@ -75779,6 +76027,7 @@ var EMPTY_OVERVIEW_POOREST_LINES = {
 };
 var EMPTY_OVERVIEW_TREND = {
   shift_mode: "all",
+  granularity: "day",
   points: []
 };
 var EMPTY_IDLE_BREAKDOWN = [];
@@ -75851,8 +76100,11 @@ var normalizePoorestLines = (value) => ({
 });
 var normalizeTrend = (value) => ({
   shift_mode: value?.shift_mode || "all",
+  granularity: value?.granularity === "hour" ? "hour" : "day",
   points: (value?.points || []).map((point) => ({
     date: point?.date,
+    label: point?.label,
+    hour_index: normalizeNumber(point?.hour_index),
     avg_efficiency: normalizeNumber(point?.avg_efficiency)
   }))
 });
@@ -76194,17 +76446,25 @@ var formatSignedIdleDuration = (seconds) => {
   const sign = seconds > 0 ? "+" : "-";
   return `${sign}${formatIdleDuration(Math.abs(seconds))}`;
 };
-var formatComparisonWindow = (dayCount, comparisonStrategy) => {
+var formatComparisonWindow = ({
+  currentDayCount,
+  previousDayCount,
+  comparisonStrategy,
+  shiftMode
+}) => {
   if (comparisonStrategy === "previous_full_week") return "last week";
-  if (!dayCount || !Number.isFinite(dayCount)) return "previous range";
-  return `previous ${dayCount} ${dayCount === 1 ? "day" : "days"}`;
+  if (comparisonStrategy === "matched_range" && shiftMode !== "all" && currentDayCount === 1 && previousDayCount === 1) {
+    return "previous day";
+  }
+  if (!previousDayCount || !Number.isFinite(previousDayCount)) return "previous range";
+  return `previous ${previousDayCount} ${previousDayCount === 1 ? "day" : "days"}`;
 };
 var buildDeltaBadge = (delta, options) => {
   if (delta === null || delta === void 0 || !Number.isFinite(delta)) {
     return {
       icon: null,
-      className: "bg-slate-100 text-slate-500",
-      text: `No ${options.comparisonLabel} baseline`
+      className: "bg-slate-100 text-slate-400",
+      text: "\u2014"
     };
   }
   const direction = delta >= 0 ? "up" : "down";
@@ -76215,6 +76475,25 @@ var buildDeltaBadge = (delta, options) => {
     text: `${options.formatter(delta)} vs ${options.comparisonLabel}`
   };
 };
+var normalizeShiftLabel = (shiftName, shiftMode) => {
+  const trimmedName = shiftName?.trim();
+  if (trimmedName) {
+    return /shift/i.test(trimmedName) ? trimmedName : `${trimmedName} Shift`;
+  }
+  if (shiftMode === "night") return "Night Shift";
+  return "Day Shift";
+};
+var getShiftIcon = (shiftName, shiftMode) => {
+  const normalizedName = (shiftName || "").toLowerCase();
+  const normalizedMode = shiftMode || "day";
+  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" }) });
+  }
+  if (normalizedName.includes("night") || normalizedName.includes("evening") || normalizedMode === "night") {
+    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: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
+  }
+  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" }) });
+};
 var buildLineDeltaTone = (delta, comparisonLabel) => {
   if (delta === null || delta === void 0 || !Number.isFinite(delta)) {
     return {
@@ -76270,6 +76549,8 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
   dateRange,
   displayDateRange,
   trendMode,
+  isLiveScope,
+  liveShiftName,
   lineOptions,
   supervisorOptions,
   selectedSupervisorId,
@@ -76283,6 +76564,14 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
 }) => {
   bumpRenderCounter();
   const subtitleRange = displayDateRange || dateRange;
+  const liveShiftLabel = React141__namespace.default.useMemo(
+    () => normalizeShiftLabel(liveShiftName, trendMode),
+    [liveShiftName, trendMode]
+  );
+  const liveShiftIcon = React141__namespace.default.useMemo(
+    () => getShiftIcon(liveShiftName, trendMode),
+    [liveShiftName, trendMode]
+  );
   const [isFilterOpen, setIsFilterOpen] = React141__namespace.default.useState(false);
   const [isLinesDropdownOpen, setIsLinesDropdownOpen] = React141__namespace.default.useState(false);
   const filterRef = React141__namespace.default.useRef(null);
@@ -76399,9 +76688,25 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
           className: "flex-shrink-0 -ml-1"
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 flex-shrink-0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900 text-center px-1 truncate max-w-[200px]", children: "Operations Overview" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-slate-500 text-center mt-0.5", children: mobileSubtitle })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1.5 min-w-0 max-w-[240px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900 leading-tight text-center truncate", children: "Operations Overview" }),
+          isLiveScope ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-testid": "operations-overview-live-indicator",
+              className: "h-2 w-2 rounded-full bg-emerald-500 animate-pulse ring-2 ring-emerald-500/20 flex-shrink-0"
+            }
+          ) : null
+        ] }),
+        /* @__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: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-75 shrink-0", children: liveShiftIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: liveShiftLabel })
+          ] }) }) : null
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -76420,22 +76725,40 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
           {
             ref: mobileFilterButtonRef,
             onClick: handleFilterToggle,
-            className: `p-2 rounded-full transition-colors relative ${isFilterOpen || activeFilterCount > 0 ? "bg-blue-50" : "active:bg-gray-100"}`,
+            className: `p-2 rounded-full transition-colors relative ${isFilterOpen || activeFilterCount > 0 ? "bg-slate-100 text-slate-700" : "active:bg-gray-100 text-slate-600"}`,
             "aria-label": "Open filters",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: `w-5 h-5 ${activeFilterCount > 0 ? "text-blue-600" : "text-gray-700"}` }),
-              activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex items-center justify-center w-4 h-4 bg-blue-600 text-white text-[10px] rounded-full font-bold", children: activeFilterCount }) : null
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-5 h-5" }),
+              activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex items-center justify-center w-4 h-4 bg-slate-700 text-white text-[10px] rounded-full font-bold", children: activeFilterCount }) : null
             ]
           }
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center relative min-h-[56px]", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-1/2 -translate-x-1/2 flex flex-col items-center pointer-events-none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl md:text-3xl lg:text-4xl font-semibold text-gray-900 tracking-tight text-center pointer-events-auto leading-tight mb-0.5", children: "Operations Overview" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-slate-500 text-center pointer-events-auto", children: desktopSubtitle })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center relative min-h-[64px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-1/2 -translate-x-1/2 flex flex-col items-center min-w-0 max-w-[min(70vw,720px)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 min-w-0 max-w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl md:text-3xl lg:text-4xl font-semibold text-gray-900 tracking-tight leading-tight text-center truncate max-w-full", children: "Operations Overview" }),
+          isLiveScope ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-testid": "operations-overview-live-indicator",
+              className: "h-1.5 w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0"
+            }
+          ) : null
+        ] }),
+        /* @__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: [
+            /* @__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 }),
+              liveShiftLabel
+            ] }) })
+          ] }) : null
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex items-center gap-3 shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
           MonthlyRangeFilter_default,
           {
@@ -76452,12 +76775,12 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
           {
             ref: filterButtonRef,
             onClick: handleFilterToggle,
-            className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || activeFilterCount > 0 ? "border-blue-500 bg-blue-50 text-blue-700 ring-1 ring-blue-500" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"}`,
+            className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || activeFilterCount > 0 ? "border-slate-300 bg-slate-50 text-slate-700" : "border-slate-200 bg-white text-slate-600 hover:bg-slate-50 hover:text-slate-700"}`,
             "aria-label": "Open filters",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: `w-[18px] h-[18px] ${activeFilterCount > 0 ? "text-blue-600" : "text-slate-500"}` }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: `w-[18px] h-[18px] ${isFilterOpen || activeFilterCount > 0 ? "text-slate-500" : "text-slate-400"}` }),
               "Filters",
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-4 h-4 ml-0.5 transition-transform duration-200 ${isFilterOpen ? "rotate-180" : ""}` })
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-4 h-4 ml-0.5 text-slate-400 transition-transform duration-200 ${isFilterOpen ? "rotate-180" : ""}` })
             ]
           }
         )
@@ -76585,11 +76908,18 @@ var OverviewSummaryCards = React141__namespace.default.memo(({ store }) => {
   const snapshot = useOperationsOverviewSnapshot(store);
   const showSnapshotSkeleton = snapshot.loading && !snapshot.hasLoadedOnce;
   const comparisonLabel = React141__namespace.default.useMemo(() => {
-    return formatComparisonWindow(
-      scope.previous_range?.day_count ?? null,
-      scope.comparison_strategy
-    );
-  }, [scope.comparison_strategy, scope.previous_range?.day_count]);
+    return formatComparisonWindow({
+      currentDayCount: scope.current_range?.day_count ?? null,
+      previousDayCount: scope.previous_range?.day_count ?? null,
+      comparisonStrategy: scope.comparison_strategy,
+      shiftMode: scope.shift_mode
+    });
+  }, [
+    scope.comparison_strategy,
+    scope.current_range?.day_count,
+    scope.previous_range?.day_count,
+    scope.shift_mode
+  ]);
   const [isIdleContributorsOpen, setIsIdleContributorsOpen] = React141__namespace.default.useState(false);
   const [isIdleContributorsPinned, setIsIdleContributorsPinned] = React141__namespace.default.useState(false);
   const idleContributorsRef = React141__namespace.default.useRef(null);
@@ -76679,10 +77009,17 @@ var OverviewSummaryCards = React141__namespace.default.memo(({ store }) => {
           roundOne(snapshot.data.summary.plant_efficiency.current),
           "%"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 px-2.5 py-1 rounded-full ${plantEfficiencyBadge.className}`, children: [
-          plantEfficiencyBadge.icon === "up" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }) : plantEfficiencyBadge.icon === "down" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium", children: plantEfficiencyBadge.text })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-testid": "operations-overview-efficiency-delta",
+            className: `flex items-center gap-1 px-2.5 py-1 rounded-full ${plantEfficiencyBadge.className}`,
+            children: [
+              plantEfficiencyBadge.icon === "up" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }) : plantEfficiencyBadge.icon === "down" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium", children: plantEfficiencyBadge.text })
+            ]
+          }
+        )
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-sm text-slate-400", children: "No efficiency data available" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -76728,10 +77065,17 @@ var OverviewSummaryCards = React141__namespace.default.memo(({ store }) => {
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700", children: "Idle Time per Workstation" }) }),
                 showSnapshotSkeleton ? /* @__PURE__ */ jsxRuntime.jsx(OverviewMetricCardSkeleton, {}) : snapshot.data.summary.avg_idle_per_workstation?.current_seconds !== null && snapshot.data.summary.avg_idle_per_workstation?.current_seconds !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3 mt-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl sm:text-3xl font-bold text-slate-800 tracking-tight", children: formatIdleDuration(snapshot.data.summary.avg_idle_per_workstation.current_seconds) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 px-2.5 py-1 rounded-full ${idleBadge.className}`, children: [
-                    idleBadge.icon === "up" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }) : idleBadge.icon === "down" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }) : null,
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium", children: idleBadge.text })
-                  ] })
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      "data-testid": "operations-overview-idle-delta",
+                      className: `flex items-center gap-1 px-2.5 py-1 rounded-full ${idleBadge.className}`,
+                      children: [
+                        idleBadge.icon === "up" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }) : idleBadge.icon === "down" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-3.5 h-3.5", strokeWidth: 2.5 }) : null,
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium", children: idleBadge.text })
+                      ]
+                    }
+                  )
                 ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-sm text-slate-400", children: "No idle time data available" })
               ]
             }
@@ -76794,11 +77138,18 @@ var PoorestPerformersCard = React141__namespace.default.memo(({
     }
   }, [availableLineModes?.has_output, availableLineModes?.has_uptime, poorestLineMode]);
   const comparisonLabel = React141__namespace.default.useMemo(() => {
-    return formatComparisonWindow(
-      scope.previous_range?.day_count ?? null,
-      scope.comparison_strategy
-    );
-  }, [scope.comparison_strategy, scope.previous_range?.day_count]);
+    return formatComparisonWindow({
+      currentDayCount: scope.current_range?.day_count ?? null,
+      previousDayCount: scope.previous_range?.day_count ?? null,
+      comparisonStrategy: scope.comparison_strategy,
+      shiftMode: scope.shift_mode
+    });
+  }, [
+    scope.comparison_strategy,
+    scope.current_range?.day_count,
+    scope.previous_range?.day_count,
+    scope.shift_mode
+  ]);
   const showSnapshotSkeleton = snapshot.loading && !snapshot.hasLoadedOnce;
   const mergedPoorestLines = React141__namespace.default.useMemo(() => {
     const rows = snapshot.data.poorest_lines?.[poorestLineMode] || [];
@@ -76955,7 +77306,8 @@ IdleBreakdownCard.displayName = "IdleBreakdownCard";
 var EfficiencyTrendCard = React141__namespace.default.memo(({
   store,
   dateRange,
-  appTimezone
+  appTimezone,
+  hourlyLabelStartTime
 }) => {
   bumpRenderCounter();
   const trend = useOperationsOverviewTrend(store);
@@ -76965,7 +77317,41 @@ var EfficiencyTrendCard = React141__namespace.default.memo(({
   );
   const isCurrentWeekToDateRange = dateRange.startKey === currentWeekRange.startKey && dateRange.endKey === currentWeekRange.endKey;
   const showInitialSkeleton = trend.loading && trend.lastUpdated === null;
+  const isHourlyTrend = trend.data.granularity === "hour";
   const trendData = React141__namespace.default.useMemo(() => {
+    if (isHourlyTrend) {
+      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)) {
+            return rawLabel;
+          }
+          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}`;
+          }
+          const totalMinutes = startHours * 60 + startMinutes + hourIndex * 60;
+          const hour24 = Math.floor(totalMinutes / 60) % 24;
+          const minutes = totalMinutes % 60;
+          const suffix = hour24 < 12 ? "AM" : "PM";
+          const hour12 = hour24 % 12 || 12;
+          if (minutes === 0) {
+            return `${hour12} ${suffix}`;
+          }
+          return `${hour12}:${minutes.toString().padStart(2, "0")} ${suffix}`;
+        })(),
+        efficiency: (() => {
+          const value = toNumber3(point.avg_efficiency);
+          return value === null ? void 0 : value;
+        })()
+      }));
+    }
     const pointsByDate = new Map(
       (trend.data.points || []).flatMap((point) => {
         if (!point.date) return [];
@@ -77003,12 +77389,13 @@ var EfficiencyTrendCard = React141__namespace.default.memo(({
         })()
       };
     });
-  }, [currentWeekRange.startKey, isCurrentWeekToDateRange, trend.data.points]);
+  }, [currentWeekRange.startKey, hourlyLabelStartTime, isCurrentWeekToDateRange, isHourlyTrend, trend.data.points]);
   const trendTooltipLabelFormatter = React141__namespace.default.useCallback((label, payload) => {
+    if (isHourlyTrend) return label;
     const dayOfWeek = payload?.[0]?.payload?.dayOfWeek;
     if (!dayOfWeek || typeof label !== "string") return label;
     return `${label} (${dayOfWeek})`;
-  }, []);
+  }, [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(
@@ -77162,7 +77549,8 @@ var useOperationsOverviewRefresh = ({
   endKey,
   trendMode,
   comparisonStrategy,
-  isLiveScope
+  isLiveScope,
+  enabled = true
 }) => {
   const lineIdsKey = React141__namespace.default.useMemo(() => lineIds.join(","), [lineIds]);
   const scopeSignature = React141__namespace.default.useMemo(
@@ -77208,7 +77596,7 @@ var useOperationsOverviewRefresh = ({
   }, []);
   const runRefresh = React141__namespace.default.useCallback(
     async (section, begin, onSuccess, onError, request, reason) => {
-      if (!supabase || !companyId || lineIds.length === 0) return;
+      if (!enabled || !supabase || !companyId || lineIds.length === 0) return;
       const requestId = requestIdsRef.current[section] + 1;
       requestIdsRef.current[section] = requestId;
       controllersRef.current[section]?.abort();
@@ -77228,7 +77616,7 @@ var useOperationsOverviewRefresh = ({
         onError(error instanceof Error ? error.message : `Failed to refresh ${section}`);
       }
     },
-    [companyId, lineIds.length, supabase]
+    [companyId, enabled, lineIds.length, supabase]
   );
   const refreshSnapshot = React141__namespace.default.useCallback(
     async (reason) => {
@@ -77398,6 +77786,12 @@ var useOperationsOverviewRefresh = ({
     });
   }, [refreshAll, startPolling, stopPolling]);
   React141__namespace.default.useEffect(() => {
+    if (!enabled) {
+      stopPolling("disabled");
+      abortAll();
+      store.reset();
+      return;
+    }
     if (!supabase || !companyId || lineIds.length === 0) {
       stopPolling("scope_invalid");
       abortAll();
@@ -77405,9 +77799,9 @@ var useOperationsOverviewRefresh = ({
       return;
     }
     void refreshAll("scope_change");
-  }, [abortAll, companyId, lineIds.length, refreshAll, scopeSignature, stopPolling, store, supabase]);
+  }, [abortAll, companyId, enabled, lineIds.length, refreshAll, scopeSignature, stopPolling, store, supabase]);
   React141__namespace.default.useEffect(() => {
-    if (!isLiveScope || !supabase || !companyId || lineIds.length === 0) {
+    if (!enabled || !isLiveScope || !supabase || !companyId || lineIds.length === 0) {
       isPageActiveRef.current = false;
       stopPolling("live_scope_disabled");
       return;
@@ -77463,11 +77857,63 @@ var useOperationsOverviewRefresh = ({
       window.removeEventListener("pageshow", handlePageShow);
       window.removeEventListener("pagehide", handlePageHide);
     };
-  }, [companyId, getIsPageActive, isLiveScope, lineIds.length, refreshFromResume, startPolling, stopPolling, supabase]);
+  }, [companyId, enabled, getIsPageActive, isLiveScope, lineIds.length, refreshFromResume, startPolling, stopPolling, supabase]);
+};
+var parseTimeToMinutes3 = (value) => {
+  if (!value) return null;
+  const parts = value.split(":");
+  if (parts.length < 2) return null;
+  const hours = Number(parts[0]);
+  const minutes = Number(parts[1]);
+  if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return null;
+  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null;
+  return hours * 60 + minutes;
+};
+var normalizeShiftId = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string" && value.trim().length > 0) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+var classifyShiftBucket = ({
+  shiftName,
+  shiftId,
+  startTime,
+  endTime
+}) => {
+  const normalizedName = (shiftName || "").trim().toLowerCase();
+  if (normalizedName) {
+    if (["night", "graveyard", "evening"].some((keyword) => normalizedName.includes(keyword))) {
+      return "night";
+    }
+    if (["day", "morning"].some((keyword) => normalizedName.includes(keyword))) {
+      return "day";
+    }
+  }
+  const startMinutes = parseTimeToMinutes3(startTime);
+  const endMinutes = parseTimeToMinutes3(endTime);
+  if (startMinutes !== null) {
+    if (startMinutes >= 4 * 60 && startMinutes < 18 * 60) return "day";
+    return "night";
+  }
+  if (endMinutes !== null) {
+    if (endMinutes >= 6 * 60 && endMinutes <= 21 * 60) return "day";
+    return "night";
+  }
+  const normalizedShiftId = normalizeShiftId(shiftId);
+  if (normalizedShiftId === 0) return "day";
+  if (normalizedShiftId === 1) return "night";
+  return null;
 };
 var PlantHeadView = () => {
   const supabase = useSupabase();
   const entityConfig = useEntityConfig();
+  const factoryViewId = entityConfig.factoryViewId || "factory";
+  const staticShiftConfig = useShiftConfig();
   const appTimezone = useAppTimezone() || "UTC";
   const { navigate } = useNavigation();
   const { accessibleLineIds } = useUserLineAccess();
@@ -77475,11 +77921,21 @@ var PlantHeadView = () => {
   useHideMobileHeader(!!mobileMenuContext);
   const storeRef = React141__namespace.default.useRef(createOperationsOverviewStore());
   const store = storeRef.current;
-  const [dateRange, setDateRange] = React141__namespace.default.useState(() => getCurrentWeekToDateRange(appTimezone));
-  const [usesThisWeekComparison, setUsesThisWeekComparison] = React141__namespace.default.useState(true);
+  const fallbackOperationalDate = React141__namespace.default.useMemo(
+    () => getOperationalDate(appTimezone),
+    [appTimezone]
+  );
+  const [dateRange, setDateRange] = React141__namespace.default.useState(() => ({
+    startKey: fallbackOperationalDate,
+    endKey: fallbackOperationalDate
+  }));
+  const [usesThisWeekComparison, setUsesThisWeekComparison] = React141__namespace.default.useState(false);
   const [trendMode, setTrendMode] = React141__namespace.default.useState("all");
   const [selectedSupervisorId, setSelectedSupervisorId] = React141__namespace.default.useState("all");
   const [selectedLineIds, setSelectedLineIds] = React141__namespace.default.useState([]);
+  const [isInitialScopeReady, setIsInitialScopeReady] = React141__namespace.default.useState(false);
+  const hasAutoInitializedScopeRef = React141__namespace.default.useRef(false);
+  const hasUserAdjustedScopeRef = React141__namespace.default.useRef(false);
   React141__namespace.default.useEffect(() => {
     trackCorePageView("Operations Overview", {
       dashboard_surface: "operations_overview"
@@ -77501,8 +77957,10 @@ var PlantHeadView = () => {
     return dateRange;
   }, [currentWeekDisplayRange, dateRange, isCurrentWeekToDateRange, usesThisWeekComparison]);
   const normalizedLineIds = React141__namespace.default.useMemo(
-    () => Array.from(new Set((accessibleLineIds || []).filter(Boolean))).sort(),
-    [accessibleLineIds]
+    () => Array.from(new Set(
+      (accessibleLineIds || []).filter(Boolean).filter((lineId) => lineId !== factoryViewId)
+    )).sort(),
+    [accessibleLineIds, factoryViewId]
   );
   const lineIdsKey = React141__namespace.default.useMemo(
     () => normalizedLineIds.join(","),
@@ -77576,14 +78034,81 @@ var PlantHeadView = () => {
     () => selectedLineIds.length > 0 ? selectedLineIds : normalizedLineIds,
     [normalizedLineIds, selectedLineIds]
   );
+  const {
+    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
+    };
+  }, [shiftConfigMap, shiftGroups]);
+  const isShiftScopeResolved = React141__namespace.default.useMemo(
+    () => !isShiftConfigLoading && hasComputedShiftGroups,
+    [hasComputedShiftGroups, isShiftConfigLoading]
+  );
   const initializedTimezoneRef = React141__namespace.default.useRef(appTimezone);
   React141__namespace.default.useEffect(() => {
     if (initializedTimezoneRef.current === appTimezone) return;
-    setDateRange(getCurrentWeekToDateRange(appTimezone));
-    setUsesThisWeekComparison(true);
+    hasAutoInitializedScopeRef.current = false;
+    hasUserAdjustedScopeRef.current = false;
+    setDateRange({
+      startKey: fallbackOperationalDate,
+      endKey: fallbackOperationalDate
+    });
+    setTrendMode("all");
+    setUsesThisWeekComparison(false);
+    setIsInitialScopeReady(false);
     initializedTimezoneRef.current = appTimezone;
-  }, [appTimezone]);
+  }, [appTimezone, fallbackOperationalDate]);
+  React141__namespace.default.useEffect(() => {
+    if (hasAutoInitializedScopeRef.current || hasUserAdjustedScopeRef.current) {
+      return;
+    }
+    if (scopedLineIds.length === 0) {
+      return;
+    }
+    if (!isShiftScopeResolved) {
+      return;
+    }
+    setDateRange((previous) => {
+      const nextStartKey = currentShiftScope?.date || fallbackOperationalDate;
+      if (previous.startKey === nextStartKey && previous.endKey === nextStartKey) {
+        return previous;
+      }
+      return {
+        startKey: nextStartKey,
+        endKey: nextStartKey
+      };
+    });
+    setTrendMode(currentShiftScope?.trendMode || "all");
+    setUsesThisWeekComparison(false);
+    hasAutoInitializedScopeRef.current = true;
+    setIsInitialScopeReady(true);
+  }, [currentShiftScope, fallbackOperationalDate, isShiftScopeResolved, scopedLineIds.length]);
   const handleDateRangeChange = React141__namespace.default.useCallback((range, meta) => {
+    hasUserAdjustedScopeRef.current = true;
+    setIsInitialScopeReady(true);
     trackCoreEvent("Operations Overview Date Range Changed", {
       start_date: range.startKey,
       end_date: range.endKey
@@ -77600,6 +78125,8 @@ var PlantHeadView = () => {
     });
   }, []);
   const handleTrendModeChange = React141__namespace.default.useCallback((mode) => {
+    hasUserAdjustedScopeRef.current = true;
+    setIsInitialScopeReady(true);
     setTrendMode(mode);
   }, []);
   const handleSelectedLineIdsChange = React141__namespace.default.useCallback((lineIds) => {
@@ -77626,15 +78153,6 @@ var PlantHeadView = () => {
     params.set("rangeEnd", dateRange.endKey);
     return `/kpis/${lineId}?${params.toString()}`;
   }, [dateRange.endKey, dateRange.startKey]);
-  const handleOpenLineMonthlyHistory = React141__namespace.default.useCallback((lineId, lineName) => {
-    trackCoreEvent("Operations Overview Line Clicked", {
-      line_id: lineId,
-      line_name: lineName,
-      range_start: dateRange.startKey,
-      range_end: dateRange.endKey
-    });
-    navigate(buildLineMonthlyHistoryUrl(lineId));
-  }, [buildLineMonthlyHistoryUrl, dateRange.endKey, dateRange.startKey, navigate]);
   const handleViewAllPoorestPerformers = React141__namespace.default.useCallback(() => {
     trackCoreEvent("Operations Overview View All Clicked", { section: "poorest_performers" });
     navigate("/kpis?tab=leaderboard");
@@ -77660,16 +78178,74 @@ var PlantHeadView = () => {
     }
     return void 0;
   }, [isCurrentWeekToDateRange, usesThisWeekComparison]);
+  const effectiveDateRange = React141__namespace.default.useMemo(() => {
+    if (isInitialScopeReady) {
+      return dateRange;
+    }
+    const nextStartKey = currentShiftScope?.date || fallbackOperationalDate;
+    return {
+      startKey: nextStartKey,
+      endKey: nextStartKey
+    };
+  }, [currentShiftScope, dateRange, fallbackOperationalDate, isInitialScopeReady]);
+  const effectiveTrendMode = React141__namespace.default.useMemo(
+    () => isInitialScopeReady ? trendMode : currentShiftScope?.trendMode || "all",
+    [currentShiftScope, isInitialScopeReady, trendMode]
+  );
+  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) {
+      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]
+  );
+  const isLiveScope = React141__namespace.default.useMemo(
+    () => isSingleDayShiftScope && currentShiftScope !== null && effectiveDateRange.startKey === currentShiftScope.date && effectiveTrendMode === currentShiftScope.trendMode,
+    [currentShiftScope, effectiveDateRange.startKey, effectiveTrendMode, isSingleDayShiftScope]
+  );
+  const handleOpenLineDetails = React141__namespace.default.useCallback((lineId, lineName) => {
+    trackCoreEvent("Operations Overview Line Clicked", {
+      line_id: lineId,
+      line_name: lineName,
+      range_start: dateRange.startKey,
+      range_end: dateRange.endKey
+    });
+    if (isLiveScope) {
+      navigate(`/kpis/${lineId}?returnTo=${encodeURIComponent("/")}`);
+      return;
+    }
+    navigate(buildLineMonthlyHistoryUrl(lineId));
+  }, [buildLineMonthlyHistoryUrl, dateRange.endKey, dateRange.startKey, isLiveScope, navigate]);
   useOperationsOverviewRefresh({
     store,
     supabase,
     companyId: entityConfig.companyId,
     lineIds: scopedLineIds,
-    startKey: dateRange.startKey,
-    endKey: dateRange.endKey,
-    trendMode,
+    startKey: effectiveDateRange.startKey,
+    endKey: effectiveDateRange.endKey,
+    trendMode: effectiveTrendMode,
     comparisonStrategy,
-    isLiveScope: isCurrentWeekToDateRange
+    isLiveScope,
+    enabled: scopedLineIds.length > 0 && isShiftScopeResolved
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-h-screen bg-slate-50 w-full font-sans", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -77678,6 +78254,8 @@ var PlantHeadView = () => {
         dateRange,
         displayDateRange: headerDateRange,
         trendMode,
+        isLiveScope,
+        liveShiftName: currentShiftScope?.shiftName || null,
         lineOptions,
         supervisorOptions,
         selectedSupervisorId,
@@ -77700,7 +78278,7 @@ var PlantHeadView = () => {
               store,
               supervisorsByLineId,
               onViewAll: handleViewAllPoorestPerformers,
-              onLineClick: handleOpenLineMonthlyHistory
+              onLineClick: handleOpenLineDetails
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -77717,7 +78295,8 @@ var PlantHeadView = () => {
             {
               store,
               dateRange,
-              appTimezone
+              appTimezone,
+              hourlyLabelStartTime
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -78578,6 +79157,7 @@ exports.isEfficiencyOnTrack = isEfficiencyOnTrack;
 exports.isFactoryScopedRole = isFactoryScopedRole;
 exports.isFullMonthRange = isFullMonthRange;
 exports.isLegacyConfiguration = isLegacyConfiguration;
+exports.isLoopbackHostname = isLoopbackHostname;
 exports.isPrefetchError = isPrefetchError;
 exports.isRecentFlowVideoGridMetricMode = isRecentFlowVideoGridMetricMode;
 exports.isSafari = isSafari;
@@ -78619,6 +79199,7 @@ exports.resetSubscriptionManager = resetSubscriptionManager;
 exports.s3VideoPreloader = s3VideoPreloader;
 exports.setSentryUserContext = setSentryUserContext;
 exports.setSentryWorkspaceContext = setSentryWorkspaceContext;
+exports.shouldEnableLocalDevTestLogin = shouldEnableLocalDevTestLogin;
 exports.shuffleArray = shuffleArray;
 exports.simulateApiDelay = simulateApiDelay;
 exports.skuService = skuService;