@optifye/dashboard-core 6.12.47 → 6.12.49

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { format, addDays, subMonths, endOfMonth, startOfMonth, endOfDay, eachDayOfInterval, getDay, isSameDay, isWithinInterval, startOfDay, parseISO, subDays, differenceInMinutes, addMinutes, addMonths, isValid, formatDistanceToNow, isToday, isFuture, isBefore } from 'date-fns';
 import { formatInTimeZone, fromZonedTime, toZonedTime } from 'date-fns-tz';
-import * as React148 from 'react';
-import React148__default, { createContext, useRef, useId, useCallback, useState, useMemo, useEffect, forwardRef, useImperativeHandle, useLayoutEffect, memo as memo$1, useContext, useSyncExternalStore, Children, isValidElement, useInsertionEffect, startTransition, Fragment as Fragment$1, createElement, Component } from 'react';
+import * as React125 from 'react';
+import React125__default, { createContext, useRef, useId, useCallback, useState, useMemo, useEffect, forwardRef, useImperativeHandle, useLayoutEffect, memo as memo$1, useContext, useSyncExternalStore, Children, isValidElement, useInsertionEffect, startTransition, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { toast } from 'sonner';
@@ -10,11 +10,11 @@ import { EventEmitter } from 'events';
 import { createClient, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js';
 import Hls, { Events, ErrorTypes } from 'hls.js';
 import useSWR from 'swr';
-import { Camera, AlertTriangle, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, RefreshCw, Filter, X, Coffee, Plus, ArrowUp, ArrowDown, ArrowRight, HelpCircle, ClipboardX, Activity, Wrench, UserX, Clock, Package, Monitor, CheckCircle2, ArrowLeft, Calendar, Save, AlertCircle, Loader2, Minus, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, XCircle, Palette, LockKeyhole, TrendingDown, FolderOpen, Folder, ArrowDownWideNarrow, Tag, Sliders, Layers, Search, Edit2, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Video, Copy, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, Pencil, UserCheck, LogOut, Film, MessageSquare, Menu, Send, Settings, LifeBuoy, EyeOff, Zap, ExternalLink, Flame, Crown, Medal } from 'lucide-react';
+import { Camera, AlertTriangle, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, RefreshCw, ArrowUpDown, X, Coffee, Plus, Filter, ArrowUp, ArrowDown, ArrowRight, HelpCircle, ClipboardX, Activity, Wrench, UserX, Clock, Package, Monitor, CheckCircle2, ArrowLeft, Calendar, Save, AlertCircle, Loader2, Minus, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, XCircle, Palette, LockKeyhole, TrendingDown, FolderOpen, Folder, ArrowDownWideNarrow, Tag, Sliders, Layers, Search, Edit2, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Video, Copy, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, Pencil, UserCheck, LogOut, Film, MessageSquare, Menu, Send, Settings, LifeBuoy, EyeOff, Zap, ExternalLink, Flame, Crown, Medal } from 'lucide-react';
 import { memo, noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, ReferenceLine, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, Customized, Cell, PieChart, Pie, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
-import { AdjustmentsHorizontalIcon, ClipboardDocumentCheckIcon, ClockIcon, UsersIcon, UserCircleIcon, TicketIcon, CurrencyDollarIcon, QuestionMarkCircleIcon, XMarkIcon, ArrowRightIcon, SparklesIcon, PlayCircleIcon, Bars3Icon, HomeIcon, VideoCameraIcon, TrophyIcon, ChartBarIcon, LightBulbIcon, CubeIcon, HeartIcon, Cog6ToothIcon, ChevronRightIcon, ArrowRightStartOnRectangleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, CalendarIcon, ChevronDownIcon, ChevronLeftIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ArrowDownTrayIcon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, FunnelIcon, EyeIcon, InformationCircleIcon, ArrowLeftIcon } from '@heroicons/react/24/outline';
+import { LightBulbIcon, AdjustmentsHorizontalIcon, ClipboardDocumentCheckIcon, ClockIcon, UsersIcon, UserCircleIcon, TicketIcon, CurrencyDollarIcon, QuestionMarkCircleIcon, XMarkIcon, ArrowRightIcon, SparklesIcon, PlayCircleIcon, Bars3Icon, HomeIcon, VideoCameraIcon, TrophyIcon, ChartBarIcon, CubeIcon, HeartIcon, Cog6ToothIcon, ChevronRightIcon, ArrowRightStartOnRectangleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, CalendarIcon, ChevronDownIcon, ChevronLeftIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ArrowDownTrayIcon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, FunnelIcon, EyeIcon, InformationCircleIcon, ArrowLeftIcon } from '@heroicons/react/24/outline';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
 import { CheckIcon } from '@heroicons/react/24/solid';
@@ -2091,14 +2091,14 @@ var useIdleTimeVlmConfig = () => {
   }
   return context;
 };
-var DashboardConfigContext = React148.createContext(void 0);
+var DashboardConfigContext = React125.createContext(void 0);
 var DashboardProvider = ({ config: userProvidedConfig, children }) => {
-  const fullConfig = React148.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
+  const fullConfig = React125.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
   _setDashboardConfigInstance(fullConfig);
-  React148.useEffect(() => {
+  React125.useEffect(() => {
     _setDashboardConfigInstance(fullConfig);
   }, [fullConfig]);
-  React148.useEffect(() => {
+  React125.useEffect(() => {
     if (!fullConfig.theme) return;
     const styleId = "dashboard-core-theme-vars";
     let styleEl = document.getElementById(styleId);
@@ -2124,7 +2124,7 @@ var DashboardProvider = ({ config: userProvidedConfig, children }) => {
   return /* @__PURE__ */ jsx(DashboardConfigContext.Provider, { value: fullConfig, children: /* @__PURE__ */ jsx(IdleTimeVlmConfigProvider, { children }) });
 };
 var useDashboardConfig = () => {
-  const ctx = React148.useContext(DashboardConfigContext);
+  const ctx = React125.useContext(DashboardConfigContext);
   if (!ctx) throw new Error("useDashboardConfig must be used within a DashboardProvider");
   return ctx;
 };
@@ -12830,7 +12830,7 @@ var useMobileMenu = () => {
 };
 var useHideMobileHeader = (shouldHide = true) => {
   const context = useMobileMenu();
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (context && shouldHide) {
       context.setHideMobileHeader(true);
       return () => {
@@ -25914,7 +25914,7 @@ var MotionConfigContext = createContext({
 });
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
-var PopChildMeasure = class extends React148.Component {
+var PopChildMeasure = class extends React125.Component {
   getSnapshotBeforeUpdate(prevProps) {
     const element = this.props.childRef.current;
     if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -25969,7 +25969,7 @@ function PopChild({ children, isPresent }) {
       document.head.removeChild(style);
     };
   }, [isPresent]);
-  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React148.cloneElement(children, { ref }) });
+  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React125.cloneElement(children, { ref }) });
 }
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
@@ -26006,7 +26006,7 @@ var PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, pre
   useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
   }, [isPresent]);
-  React148.useEffect(() => {
+  React125.useEffect(() => {
     !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
   }, [isPresent]);
   if (mode === "popLayout") {
@@ -33791,7 +33791,7 @@ var withAuth = (WrappedComponent2, options) => {
     requireAuth: true,
     ...options
   };
-  const WithAuthComponent = React148.memo(function WithAuthComponent2(props) {
+  const WithAuthComponent = React125.memo(function WithAuthComponent2(props) {
     const {
       session,
       user,
@@ -33802,9 +33802,9 @@ var withAuth = (WrappedComponent2, options) => {
       retrySessionHydration
     } = useAuth();
     const router = useRouter();
-    const [localLoading, setLocalLoading] = React148.useState(loading);
-    const [loadingTimeoutReached, setLoadingTimeoutReached] = React148.useState(false);
-    React148.useEffect(() => {
+    const [localLoading, setLocalLoading] = React125.useState(loading);
+    const [loadingTimeoutReached, setLoadingTimeoutReached] = React125.useState(false);
+    React125.useEffect(() => {
       if (process.env.NODE_ENV === "development" && process.env.DEBUG_AUTH === "true") {
         console.log("withAuth state:", {
           loading,
@@ -33816,7 +33816,7 @@ var withAuth = (WrappedComponent2, options) => {
         });
       }
     }, [authStatus, error, loading, session, user]);
-    const handleLoadingTimeout = React148.useCallback(() => {
+    const handleLoadingTimeout = React125.useCallback(() => {
       console.warn("[withAuth] Loading timeout reached");
       setLoadingTimeoutReached(true);
       if (hasStoredSupabaseSession()) {
@@ -33828,13 +33828,13 @@ var withAuth = (WrappedComponent2, options) => {
         router.replace(defaultOptions.redirectTo);
       }
     }, [retrySessionHydration, router]);
-    React148.useEffect(() => {
+    React125.useEffect(() => {
       if (!loading && authStatus !== "recovering" && defaultOptions.requireAuth && !session && !error) {
         console.log("[withAuth] No session found, redirecting to login");
         router.replace(defaultOptions.redirectTo);
       }
     }, [authStatus, defaultOptions.requireAuth, error, loading, router, session]);
-    React148.useEffect(() => {
+    React125.useEffect(() => {
       setLocalLoading(loading);
     }, [loading]);
     if (loading || localLoading) {
@@ -34833,11 +34833,11 @@ var BarChartComponent = ({
   aspect = 2,
   ...restOfChartProps
 }) => {
-  const containerRef = React148__default.useRef(null);
-  const [containerReady, setContainerReady] = React148__default.useState(false);
+  const containerRef = React125__default.useRef(null);
+  const [containerReady, setContainerReady] = React125__default.useState(false);
   const themeConfig = useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -34951,7 +34951,7 @@ var BarChartComponent = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var BarChart = React148__default.memo(BarChartComponent, (prevProps, nextProps) => {
+var BarChart = React125__default.memo(BarChartComponent, (prevProps, nextProps) => {
   if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || JSON.stringify(prevProps.referenceLines || []) !== JSON.stringify(nextProps.referenceLines || []) || prevProps.layout !== nextProps.layout || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect) {
     return false;
   }
@@ -35002,10 +35002,10 @@ var LineChartComponent = ({
   fillContainer = false,
   ...restOfChartProps
 }) => {
-  const containerRef = React148__default.useRef(null);
-  const [dimensions, setDimensions] = React148__default.useState({ width: 0, height: 0 });
-  const [hasValidData, setHasValidData] = React148__default.useState(false);
-  React148__default.useEffect(() => {
+  const containerRef = React125__default.useRef(null);
+  const [dimensions, setDimensions] = React125__default.useState({ width: 0, height: 0 });
+  const [hasValidData, setHasValidData] = React125__default.useState(false);
+  React125__default.useEffect(() => {
     const currentHasValidData = data && lines && lines.length > 0 && data.some(
       (item) => lines.some((line) => {
         const val = item[line.dataKey];
@@ -35016,7 +35016,7 @@ var LineChartComponent = ({
       setHasValidData(true);
     }
   }, [data, lines, hasValidData]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (!containerRef.current) return;
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -35141,7 +35141,7 @@ var LineChartComponent = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: renderChartContent(restOfChartProps.width, restOfChartProps.height) });
 };
-var LineChart = React148__default.memo(LineChartComponent, (prevProps, nextProps) => {
+var LineChart = React125__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)) {
     return false;
   }
@@ -35308,7 +35308,7 @@ var SkuRow = ({ sku, isSelected, isLive, onSelect }) => {
   );
 };
 var PerSkuView = ({ rows, className = "", selectedSkuId, liveSkuId, onSelectSku }) => {
-  const ordered = React148__default.useMemo(
+  const ordered = React125__default.useMemo(
     () => [...rows].sort((a, b) => {
       const am = (b.active_minutes ?? 0) - (a.active_minutes ?? 0);
       if (am !== 0) return am;
@@ -35316,9 +35316,9 @@ var PerSkuView = ({ rows, className = "", selectedSkuId, liveSkuId, onSelectSku
     }),
     [rows]
   );
-  const scrollContainerRef = React148__default.useRef(null);
-  const [showScrollIndicatorBottom, setShowScrollIndicatorBottom] = React148__default.useState(ordered.length > 4);
-  const [showScrollIndicatorTop, setShowScrollIndicatorTop] = React148__default.useState(false);
+  const scrollContainerRef = React125__default.useRef(null);
+  const [showScrollIndicatorBottom, setShowScrollIndicatorBottom] = React125__default.useState(ordered.length > 4);
+  const [showScrollIndicatorTop, setShowScrollIndicatorTop] = React125__default.useState(false);
   const handleScroll = (e) => {
     const target = e.currentTarget;
     if (target.scrollHeight - target.scrollTop <= target.clientHeight + 10) {
@@ -35342,7 +35342,7 @@ var PerSkuView = ({ rows, className = "", selectedSkuId, liveSkuId, onSelectSku
       scrollContainerRef.current.scrollBy({ top: -80, behavior: "smooth" });
     }
   };
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (scrollContainerRef.current) {
       const target = scrollContainerRef.current;
       setShowScrollIndicatorBottom(target.scrollHeight > target.clientHeight && target.scrollHeight - target.scrollTop > target.clientHeight + 10);
@@ -35415,7 +35415,7 @@ var OutputProgressChartComponent = ({
   liveSkuId,
   onSelectSku
 }) => {
-  const realSkuRows = React148__default.useMemo(
+  const realSkuRows = React125__default.useMemo(
     () => filterRealSkuBreakdown(skuBreakdown),
     [skuBreakdown]
   );
@@ -35440,7 +35440,7 @@ var OutputProgressChartComponent = ({
     }
   );
 };
-var OutputProgressChart = React148__default.memo(OutputProgressChartComponent);
+var OutputProgressChart = React125__default.memo(OutputProgressChartComponent);
 OutputProgressChart.displayName = "OutputProgressChart";
 var LargeOutputProgressChart = ({
   currentOutput,
@@ -35580,7 +35580,7 @@ var CycleTimeChartComponent = ({
     }
   ) }) });
 };
-var CycleTimeChart = React148__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
+var CycleTimeChart = React125__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
   if (prevProps.className !== nextProps.className) {
     return false;
   }
@@ -35820,16 +35820,16 @@ var CycleTimeOverTimeChart = ({
   onHourClick
 }) => {
   const MAX_DATA_POINTS = 40;
-  const containerRef = React148__default.useRef(null);
-  const [dimensions, setDimensions] = React148__default.useState({ width: 0, height: 0 });
-  const [hasValidData, setHasValidData] = React148__default.useState(false);
-  React148__default.useEffect(() => {
+  const containerRef = React125__default.useRef(null);
+  const [dimensions, setDimensions] = React125__default.useState({ width: 0, height: 0 });
+  const [hasValidData, setHasValidData] = React125__default.useState(false);
+  React125__default.useEffect(() => {
     const currentHasValidData = data && data.some((val) => val !== null && val > 0);
     if (currentHasValidData && !hasValidData) {
       setHasValidData(true);
     }
   }, [data, hasValidData]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (!containerRef.current) return;
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -35867,7 +35867,7 @@ var CycleTimeOverTimeChart = ({
     const endLabel = shiftEnd && slotIndex === DURATION - 1 ? formatHourLabel(slotIndex + 1) : formatHourLabel(slotIndex + 1);
     return `${startLabel} - ${endLabel}`;
   };
-  const getDisplayData = React148__default.useCallback((rawData) => {
+  const getDisplayData = React125__default.useCallback((rawData) => {
     if (xAxisMode === "hourly") return rawData;
     return rawData.slice(Math.max(0, rawData.length - MAX_DATA_POINTS));
   }, [xAxisMode]);
@@ -35875,7 +35875,7 @@ var CycleTimeOverTimeChart = ({
   const DURATION = displayData.length;
   const effectiveDatasetKey = datasetKey || `cycle-time:${xAxisMode}`;
   const finalData = displayData;
-  const labelInterval = React148__default.useMemo(() => {
+  const labelInterval = React125__default.useMemo(() => {
     if (xAxisMode === "hourly") {
       return Math.max(1, Math.ceil(DURATION / 8));
     }
@@ -35916,8 +35916,8 @@ var CycleTimeOverTimeChart = ({
       return `${minutes} minutes ${seconds} seconds ago`;
     }
   };
-  const getNumericValue = React148__default.useCallback((value) => typeof value === "number" && Number.isFinite(value) ? value : null, []);
-  const buildHourClickPayload = React148__default.useCallback((dataPoint) => {
+  const getNumericValue = React125__default.useCallback((value) => typeof value === "number" && Number.isFinite(value) ? value : null, []);
+  const buildHourClickPayload = React125__default.useCallback((dataPoint) => {
     if (!onHourClick || xAxisMode !== "hourly") {
       return null;
     }
@@ -35936,7 +35936,7 @@ var CycleTimeOverTimeChart = ({
       status: cycleTime !== null && cycleTime <= idealCycleTime ? "within_standard" : "above_standard"
     };
   }, [DURATION, getNumericValue, idealCycleTime, onHourClick, shiftEnd, shiftStart, xAxisMode]);
-  const renderChartTooltip = React148__default.useCallback((tooltipProps) => {
+  const renderChartTooltip = React125__default.useCallback((tooltipProps) => {
     const { active, payload } = tooltipProps;
     if (!active || !Array.isArray(payload) || payload.length === 0) {
       return null;
@@ -36000,7 +36000,7 @@ var CycleTimeOverTimeChart = ({
       ] })
     ] });
   }, [getNumericValue, onHourClick, shiftStart, showIdleTime, xAxisMode]);
-  const renderCycleDot = React148__default.useCallback((props) => {
+  const renderCycleDot = React125__default.useCallback((props) => {
     const { cx: cx2, cy, payload } = props;
     const cycleTime = getNumericValue(payload?.cycleTime);
     if (cycleTime === null) {
@@ -36040,7 +36040,7 @@ var CycleTimeOverTimeChart = ({
       }
     );
   }, [buildHourClickPayload, getNumericValue, idealCycleTime, onHourClick, selectedHourIndex]);
-  const renderCycleActiveDot = React148__default.useCallback((props) => {
+  const renderCycleActiveDot = React125__default.useCallback((props) => {
     const { cx: cx2, cy, payload } = props;
     const cycleTime = getNumericValue(payload?.cycleTime);
     if (cycleTime === null) {
@@ -36069,7 +36069,7 @@ var CycleTimeOverTimeChart = ({
       }
     );
   }, [buildHourClickPayload, getNumericValue, idealCycleTime, onHourClick, selectedHourIndex]);
-  const renderIdleDot = React148__default.useCallback((props) => {
+  const renderIdleDot = React125__default.useCallback((props) => {
     const { cx: cx2, cy, payload } = props;
     const idleMinutes = getNumericValue(payload?.idleMinutes);
     if (idleMinutes === null) {
@@ -36091,7 +36091,7 @@ var CycleTimeOverTimeChart = ({
       }
     );
   }, [getNumericValue, showIdleTime]);
-  const renderIdleActiveDot = React148__default.useCallback((props) => {
+  const renderIdleActiveDot = React125__default.useCallback((props) => {
     const { cx: cx2, cy, payload } = props;
     const idleMinutes = getNumericValue(payload?.idleMinutes);
     if (idleMinutes === null || !showIdleTime) {
@@ -36109,7 +36109,7 @@ var CycleTimeOverTimeChart = ({
       }
     );
   }, [getNumericValue, showIdleTime]);
-  const chartData = React148__default.useMemo(() => Array.from({ length: DURATION }, (_, i) => {
+  const chartData = React125__default.useMemo(() => Array.from({ length: DURATION }, (_, i) => {
     const cycleTime = getNumericValue(finalData[i]);
     const useIdleSlots = idleTimeSlots.length > 0;
     const idleSlot = useIdleSlots ? idleTimeSlots[i] ?? null : null;
@@ -36306,7 +36306,7 @@ var CycleTimeOverTimeChart = ({
     }
   );
 };
-var Card = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -36318,7 +36318,7 @@ var Card = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -36327,7 +36327,7 @@ var CardHeader = React148.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -36339,7 +36339,7 @@ var CardTitle = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -36348,9 +36348,9 @@ var CardDescription = React148.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -36426,7 +36426,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React148.forwardRef(
+var Button = React125.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -37182,16 +37182,38 @@ var HourlyOutputChartComponent = ({
   onHourClick,
   onWatchClipsClick,
   onAiSummaryClick,
+  onSelectSku,
   className = ""
 }) => {
-  const containerRef = React148__default.useRef(null);
-  const [containerReady, setContainerReady] = React148__default.useState(false);
-  const [containerWidth, setContainerWidth] = React148__default.useState(0);
-  const [hoveredSkuRailLabel, setHoveredSkuRailLabel] = React148__default.useState(null);
-  const [isTooltipHovered, setIsTooltipHovered] = React148__default.useState(false);
-  const lastTooltipDataRef = React148__default.useRef(null);
-  const tooltipHoverTimeoutRef = React148__default.useRef(null);
-  const idleSlots = React148__default.useMemo(
+  const containerRef = React125__default.useRef(null);
+  const [containerReady, setContainerReady] = React125__default.useState(false);
+  const [containerWidth, setContainerWidth] = React125__default.useState(0);
+  const [hoveredSkuRailLabel, setHoveredSkuRailLabel] = React125__default.useState(null);
+  const [isTooltipHovered, setIsTooltipHovered] = React125__default.useState(false);
+  const [forceHideTooltip, setForceHideTooltip] = React125__default.useState(false);
+  const lastTooltipDataRef = React125__default.useRef(null);
+  const tooltipHoverTimeoutRef = React125__default.useRef(null);
+  const clearTooltipHoverTimeout = React125__default.useCallback(() => {
+    if (tooltipHoverTimeoutRef.current) {
+      clearTimeout(tooltipHoverTimeoutRef.current);
+      tooltipHoverTimeoutRef.current = null;
+    }
+  }, []);
+  const hideInteractiveTooltip = React125__default.useCallback(() => {
+    clearTooltipHoverTimeout();
+    setIsTooltipHovered(false);
+    setForceHideTooltip(true);
+    lastTooltipDataRef.current = null;
+  }, [clearTooltipHoverTimeout]);
+  const scheduleInteractiveTooltipHide = React125__default.useCallback((delayMs = 120) => {
+    clearTooltipHoverTimeout();
+    tooltipHoverTimeoutRef.current = setTimeout(() => {
+      setIsTooltipHovered(false);
+      lastTooltipDataRef.current = null;
+      tooltipHoverTimeoutRef.current = null;
+    }, delayMs);
+  }, [clearTooltipHoverTimeout]);
+  const idleSlots = React125__default.useMemo(
     () => buildHourlyIdleSlots({
       idleTimeHourly,
       shiftStart,
@@ -37200,12 +37222,12 @@ var HourlyOutputChartComponent = ({
     [idleTimeHourly, shiftStart, shiftEnd]
   );
   const SHIFT_DURATION = idleSlots.length;
-  const [animatedData, setAnimatedData] = React148__default.useState(
+  const [animatedData, setAnimatedData] = React125__default.useState(
     () => Array(SHIFT_DURATION).fill(0)
   );
-  const prevDataRef = React148__default.useRef(Array(SHIFT_DURATION).fill(0));
-  const animationFrameRef = React148__default.useRef(null);
-  React148__default.useEffect(() => {
+  const prevDataRef = React125__default.useRef(Array(SHIFT_DURATION).fill(0));
+  const animationFrameRef = React125__default.useRef(null);
+  React125__default.useEffect(() => {
     setAnimatedData((prev) => {
       if (prev.length !== SHIFT_DURATION) {
         return Array(SHIFT_DURATION).fill(0);
@@ -37214,14 +37236,14 @@ var HourlyOutputChartComponent = ({
     });
     prevDataRef.current = Array(SHIFT_DURATION).fill(0);
   }, [SHIFT_DURATION]);
-  const [idleBarState, setIdleBarState] = React148__default.useState({
+  const [idleBarState, setIdleBarState] = React125__default.useState({
     visible: showIdleTime,
     key: 0,
     shouldAnimate: false
   });
-  const prevShowIdleTimeRef = React148__default.useRef(showIdleTime);
-  const stateUpdateTimeoutRef = React148__default.useRef(null);
-  React148__default.useEffect(() => {
+  const prevShowIdleTimeRef = React125__default.useRef(showIdleTime);
+  const stateUpdateTimeoutRef = React125__default.useRef(null);
+  React125__default.useEffect(() => {
     if (stateUpdateTimeoutRef.current) {
       clearTimeout(stateUpdateTimeoutRef.current);
     }
@@ -37246,7 +37268,7 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [showIdleTime]);
-  const animateToNewData = React148__default.useCallback((targetData) => {
+  const animateToNewData = React125__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -37276,7 +37298,7 @@ var HourlyOutputChartComponent = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const shiftData = data.slice(0, SHIFT_DURATION);
       animateToNewData(shiftData);
@@ -37287,14 +37309,15 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [data, animateToNewData]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
+    const handleWindowBlur = () => hideInteractiveTooltip();
+    window.addEventListener("blur", handleWindowBlur);
     return () => {
-      if (tooltipHoverTimeoutRef.current) {
-        clearTimeout(tooltipHoverTimeoutRef.current);
-      }
+      window.removeEventListener("blur", handleWindowBlur);
+      clearTooltipHoverTimeout();
     };
-  }, []);
-  React148__default.useEffect(() => {
+  }, [clearTooltipHoverTimeout, hideInteractiveTooltip]);
+  React125__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -37320,7 +37343,7 @@ var HourlyOutputChartComponent = ({
       clearTimeout(fallbackTimeout);
     };
   }, []);
-  const xAxisConfig = React148__default.useMemo(() => {
+  const xAxisConfig = React125__default.useMemo(() => {
     if (containerWidth >= 960) {
       return {
         interval: 0,
@@ -37341,13 +37364,13 @@ var HourlyOutputChartComponent = ({
     }
     return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
   }, [containerWidth]);
-  const shiftWindow = React148__default.useMemo(() => resolveShiftWindow2({
+  const shiftWindow = React125__default.useMemo(() => resolveShiftWindow2({
     shiftStart,
     slotCount: SHIFT_DURATION,
     shiftDate,
     timezone
   }), [shiftStart, shiftEnd, SHIFT_DURATION, shiftDate, timezone]);
-  const fallbackTimelineEndOffset = React148__default.useMemo(
+  const fallbackTimelineEndOffset = React125__default.useMemo(
     () => resolveTimelineEndOffset({
       shiftStart,
       shiftEnd,
@@ -37357,7 +37380,7 @@ var HourlyOutputChartComponent = ({
     }),
     [shiftStart, shiftEnd, SHIFT_DURATION, shiftDate, timezone]
   );
-  const observedTimelineEndOffset = React148__default.useMemo(() => {
+  const observedTimelineEndOffset = React125__default.useMemo(() => {
     let lastObservedMinute = -1;
     idleSlots.forEach((slot) => {
       slot.idleArray.forEach((value, minuteIndex) => {
@@ -37373,7 +37396,7 @@ var HourlyOutputChartComponent = ({
     return Math.min((lastObservedMinute + 1) / 60, SHIFT_DURATION);
   }, [idleSlots, SHIFT_DURATION]);
   const timelineEndOffset = observedTimelineEndOffset ?? fallbackTimelineEndOffset;
-  const targetLineEndOffset = React148__default.useMemo(() => {
+  const targetLineEndOffset = React125__default.useMemo(() => {
     if (timelineEndOffset >= SHIFT_DURATION) {
       return SHIFT_DURATION;
     }
@@ -37382,7 +37405,7 @@ var HourlyOutputChartComponent = ({
     }
     return Math.min(Math.floor(timelineEndOffset) + 1, SHIFT_DURATION);
   }, [timelineEndOffset, SHIFT_DURATION]);
-  const skuTimelineSegments = React148__default.useMemo(() => {
+  const skuTimelineSegments = React125__default.useMemo(() => {
     if (!skuSegments || skuSegments.length === 0 || !shiftWindow || timelineEndOffset <= 0) {
       return [];
     }
@@ -37416,18 +37439,18 @@ var HourlyOutputChartComponent = ({
       };
     }).filter((segment) => segment.end > segment.start);
   }, [skuSegments, shiftWindow, timelineEndOffset, pphThreshold]);
-  const targetTimelineSegments = React148__default.useMemo(() => {
+  const targetTimelineSegments = React125__default.useMemo(() => {
     if (skuTimelineSegments.length === 0) return [];
     return skuTimelineSegments.map((segment, index) => ({
       ...segment,
       end: index === skuTimelineSegments.length - 1 ? Math.max(segment.start, targetLineEndOffset) : segment.end
     })).filter((segment) => segment.end > segment.start);
   }, [skuTimelineSegments, targetLineEndOffset]);
-  const hasExplicitHourlyTargetOutputProp = React148__default.useMemo(
+  const hasExplicitHourlyTargetOutputProp = React125__default.useMemo(
     () => hourlyTargetOutput !== void 0,
     [hourlyTargetOutput]
   );
-  const fallbackHourlyTargetOutput = React148__default.useMemo(() => {
+  const fallbackHourlyTargetOutput = React125__default.useMemo(() => {
     if (hasExplicitHourlyTargetOutputProp) return void 0;
     if (skuTimelineSegments.length > 0) return void 0;
     const plan = buildHourlyTargetPlan({
@@ -37447,19 +37470,19 @@ var HourlyOutputChartComponent = ({
     shiftBreaks,
     pphThreshold
   ]);
-  const effectiveHourlyTargetOutput = React148__default.useMemo(
+  const effectiveHourlyTargetOutput = React125__default.useMemo(
     () => hasExplicitHourlyTargetOutputProp ? hourlyTargetOutput : fallbackHourlyTargetOutput,
     [hasExplicitHourlyTargetOutputProp, hourlyTargetOutput, fallbackHourlyTargetOutput]
   );
-  const hasHourlyTargetOutputProp = React148__default.useMemo(
+  const hasHourlyTargetOutputProp = React125__default.useMemo(
     () => effectiveHourlyTargetOutput !== void 0,
     [effectiveHourlyTargetOutput]
   );
-  const hasExplicitHourlyTargets = React148__default.useMemo(
+  const hasExplicitHourlyTargets = React125__default.useMemo(
     () => Array.isArray(effectiveHourlyTargetOutput) && effectiveHourlyTargetOutput.some((value) => value !== null && value !== void 0),
     [effectiveHourlyTargetOutput]
   );
-  const hourlyTargetSegments = React148__default.useMemo(() => {
+  const hourlyTargetSegments = React125__default.useMemo(() => {
     if (!hasExplicitHourlyTargets) return [];
     const segments = [];
     let runStart = null;
@@ -37491,7 +37514,7 @@ var HourlyOutputChartComponent = ({
     flush(SHIFT_DURATION);
     return segments.filter((segment) => segment.end > segment.start);
   }, [SHIFT_DURATION, hasExplicitHourlyTargets, effectiveHourlyTargetOutput]);
-  const activeSkuHourIndices = React148__default.useMemo(() => {
+  const activeSkuHourIndices = React125__default.useMemo(() => {
     const indices = /* @__PURE__ */ new Set();
     const targets = Array(SHIFT_DURATION).fill(pphThreshold);
     if (!skuSegments || !shiftWindow) return { indices, targets, hasTimeline: false };
@@ -37524,7 +37547,7 @@ var HourlyOutputChartComponent = ({
     }
     return { indices, targets, hasTimeline: true };
   }, [skuSegments, activeSkuId, shiftWindow, SHIFT_DURATION, pphThreshold]);
-  const chartData = React148__default.useMemo(() => {
+  const chartData = React125__default.useMemo(() => {
     const { indices, targets, hasTimeline } = activeSkuHourIndices;
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
       const idleSlot = idleSlots[i];
@@ -37553,7 +37576,7 @@ var HourlyOutputChartComponent = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleSlots, SHIFT_DURATION, activeSkuHourIndices, activeSkuId, effectiveHourlyTargetOutput, hasHourlyTargetOutputProp, selectedHourIndex]);
-  const renderSkuTimelineRail = React148__default.useCallback((props) => {
+  const renderSkuTimelineRail = React125__default.useCallback((props) => {
     if (!skuTimelineSegments.length || SHIFT_DURATION <= 0) return null;
     const offset = props?.offset;
     if (!offset) return null;
@@ -37617,6 +37640,8 @@ var HourlyOutputChartComponent = ({
               width: hoverHitWidth,
               height: hoverHitHeight,
               fill: "transparent",
+              style: { cursor: onSelectSku ? "pointer" : "default" },
+              onClick: () => onSelectSku?.(isActive ? null : segment.skuId),
               onMouseEnter: () => showHoverLabel(segment.label, xStart + segmentWidth / 2, railY),
               onMouseLeave: () => setHoveredSkuRailLabel((current) => current?.label === segment.label ? null : current)
             }
@@ -37701,8 +37726,8 @@ var HourlyOutputChartComponent = ({
         ] }, `sku-rail-${segment.skuId}-${segment.start}-${index}`);
       })
     ] });
-  }, [skuTimelineSegments, SHIFT_DURATION, activeSkuId]);
-  const IdleBar = React148__default.useMemo(() => {
+  }, [skuTimelineSegments, SHIFT_DURATION, activeSkuId, onSelectSku]);
+  const IdleBar = React125__default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsx(
       Bar,
@@ -37796,7 +37821,7 @@ var HourlyOutputChartComponent = ({
     }
     return filteredTicks;
   };
-  const renderTargetLine = React148__default.useCallback((props) => {
+  const renderTargetLine = React125__default.useCallback((props) => {
     const { offset, yAxisMap } = props;
     if (!offset || !yAxisMap || SHIFT_DURATION <= 0 || targetLineEndOffset <= 0) return null;
     const { left, width } = offset;
@@ -37926,378 +37951,386 @@ var HourlyOutputChartComponent = ({
       className: `w-full h-full min-w-0 flex flex-col ${className}`,
       style: { minHeight: "200px", minWidth: 0 },
       children: [
-        containerReady ? /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 relative", children: [
-          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-            BarChart$1,
-            {
-              data: chartData,
-              margin: {
-                // Reserve headroom for the SKU timeline rail + staggered
-                // labels only when SKU segments are rendered. Non-SKU charts
-                // keep the original 10px top so recharts has enough vertical
-                // space to show the target (pph) tick label on the Y-axis.
-                top: skuTimelineSegments.length > 0 ? 40 : 10,
-                right: 10,
-                bottom: 10,
-                left: 6
-              },
-              barCategoryGap: "25%",
-              children: [
-                /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-                /* @__PURE__ */ jsx(
-                  XAxis,
-                  {
-                    xAxisId: "default",
-                    dataKey: "hour",
-                    tick: { fontSize: xAxisConfig.tickFont },
-                    interval: xAxisConfig.interval,
-                    angle: xAxisConfig.angle,
-                    textAnchor: "end",
-                    tickMargin: xAxisConfig.tickMargin,
-                    height: xAxisConfig.height
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  XAxis,
-                  {
-                    xAxisId: "sku",
-                    type: "number",
-                    dataKey: "skuIndex",
-                    domain: [0, Math.max(SHIFT_DURATION, 0)],
-                    hide: true,
-                    allowDataOverflow: true
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  YAxis,
-                  {
-                    yAxisId: "default",
-                    tickMargin: 8,
-                    width: 48,
-                    domain: [0, maxYValue],
-                    ticks: generateYAxisTicks(),
-                    tickFormatter: (value) => value,
-                    tick: (props) => {
-                      const { x, y, payload } = props;
-                      return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx(
-                        "text",
-                        {
-                          x: -2,
-                          y: 0,
-                          dy: 4,
-                          textAnchor: "end",
-                          fill: "#666",
-                          fontSize: 12,
-                          children: payload.value
-                        },
-                        `tick-${payload.value}-${x}-${y}`
-                      ) });
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(YAxis, { yAxisId: "idle", domain: [0, 60], hide: true }),
-                /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    cursor: { fill: "#f1f5f9" },
-                    shared: false,
-                    offset: -5,
-                    wrapperStyle: { pointerEvents: "auto", zIndex: 100 },
-                    active: isTooltipHovered ? true : void 0,
-                    isAnimationActive: false,
-                    contentStyle: { backgroundColor: "transparent", border: "none", padding: 0 },
-                    content: (props) => {
-                      const activeData = props.active && props.payload && props.payload.length > 0 ? props.payload[0].payload : null;
-                      const data2 = activeData || (isTooltipHovered ? lastTooltipDataRef.current : null);
-                      if (!data2)
-                        return null;
-                      if (activeData) {
-                        lastTooltipDataRef.current = activeData;
+        containerReady ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "hourly-output-chart-viewport",
+            className: "flex-1 min-h-0 relative",
+            onMouseEnter: () => {
+              setForceHideTooltip(false);
+              clearTooltipHoverTimeout();
+            },
+            onMouseLeave: () => {
+              setForceHideTooltip(true);
+              scheduleInteractiveTooltipHide(80);
+            },
+            children: [
+              /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                BarChart$1,
+                {
+                  data: chartData,
+                  margin: {
+                    // Reserve headroom for the SKU timeline rail + staggered
+                    // labels only when SKU segments are rendered. Non-SKU charts
+                    // keep the original 10px top so recharts has enough vertical
+                    // space to show the target (pph) tick label on the Y-axis.
+                    top: skuTimelineSegments.length > 0 ? 40 : 10,
+                    right: 10,
+                    bottom: 10,
+                    left: 6
+                  },
+                  barCategoryGap: "25%",
+                  children: [
+                    /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+                    /* @__PURE__ */ jsx(
+                      XAxis,
+                      {
+                        xAxisId: "default",
+                        dataKey: "hour",
+                        tick: { fontSize: xAxisConfig.tickFont },
+                        interval: xAxisConfig.interval,
+                        angle: xAxisConfig.angle,
+                        textAnchor: "end",
+                        tickMargin: xAxisConfig.tickMargin,
+                        height: xAxisConfig.height
                       }
-                      const idlePeriods = showIdleTime ? getHourlyIdlePeriods({
-                        idleArray: data2.idleArray,
-                        shiftStart,
-                        hourIndex: Number.isFinite(data2.hourIndex) ? data2.hourIndex : 0
-                      }) : [];
-                      const tooltipHourIndex = Number.isFinite(data2.hourIndex) ? data2.hourIndex : 0;
-                      const { startTime, endTime } = buildHourClipFilterWindow({
-                        shiftStart,
-                        shiftEnd,
-                        hourIndex: tooltipHourIndex,
-                        slotCount: SHIFT_DURATION
-                      });
-                      const clickPayload = {
-                        hourIndex: tooltipHourIndex,
-                        timeRange: data2.timeRange,
-                        startTime,
-                        endTime,
-                        output: Math.round(data2.originalOutput || 0),
-                        target: data2.target,
-                        status: data2.status
-                      };
-                      return /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "p-3 -m-3 pointer-events-auto",
-                          style: { cursor: "default" },
-                          onMouseEnter: () => {
-                            if (tooltipHoverTimeoutRef.current) {
-                              clearTimeout(tooltipHoverTimeoutRef.current);
-                              tooltipHoverTimeoutRef.current = null;
-                            }
-                            setIsTooltipHovered(true);
-                          },
-                          onMouseLeave: () => {
-                            if (tooltipHoverTimeoutRef.current) {
-                              clearTimeout(tooltipHoverTimeoutRef.current);
-                            }
-                            tooltipHoverTimeoutRef.current = setTimeout(() => {
-                              setIsTooltipHovered(false);
-                              tooltipHoverTimeoutRef.current = null;
-                            }, 120);
-                          },
-                          children: /* @__PURE__ */ jsxs("div", { className: "bg-white/95 backdrop-blur-md border border-slate-200/60 shadow-xl shadow-slate-200/40 rounded-xl p-4 min-w-[240px] text-slate-700 pointer-events-auto", children: [
-                            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4 pb-3 border-b border-slate-100", children: [
-                              /* @__PURE__ */ jsx("p", { className: "font-semibold text-slate-900 text-sm tracking-tight", children: data2.timeRange }),
-                              onAiSummaryClick && /* @__PURE__ */ jsxs(
-                                "button",
-                                {
-                                  onClick: (e) => {
-                                    e.stopPropagation();
-                                    onAiSummaryClick(clickPayload);
-                                  },
-                                  className: "flex items-center gap-1 px-2 py-1 -mr-1 rounded-md border border-slate-200 bg-white hover:bg-slate-50 text-[11px] font-medium text-slate-600 shadow-sm transition-colors",
-                                  children: [
-                                    /* @__PURE__ */ jsx(SparklesIcon, { className: "w-3.5 h-3.5" }),
-                                    "Ask AI"
-                                  ]
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-                              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                                /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Output" }),
-                                /* @__PURE__ */ jsxs("span", { className: "font-bold text-slate-900 text-sm", children: [
-                                  Math.round(data2.output),
-                                  " ",
-                                  /* @__PURE__ */ jsx("span", { className: "text-slate-400 font-normal text-xs ml-0.5", children: "units" })
-                                ] })
-                              ] }),
-                              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                                /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Target" }),
-                                /* @__PURE__ */ jsxs("span", { className: "font-bold text-slate-700 text-sm", children: [
-                                  Math.round(data2.target),
-                                  " ",
-                                  /* @__PURE__ */ jsx("span", { className: "text-slate-400 font-normal text-xs ml-0.5", children: "units" })
-                                ] })
-                              ] }),
-                              showIdleTime && data2.idleMinutes > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                                /* @__PURE__ */ jsx("div", { className: "pt-3 mt-3 border-t border-slate-100", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                                  /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Idle Time" }),
-                                  /* @__PURE__ */ jsxs("span", { className: "font-bold text-orange-600 text-sm flex items-center gap-1.5", children: [
-                                    /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_6px_rgba(249,115,22,0.6)] animate-pulse" }),
-                                    data2.idleMinutes,
-                                    " ",
-                                    /* @__PURE__ */ jsx("span", { className: "text-orange-500/70 font-normal text-xs ml-0.5", children: "min" })
-                                  ] })
-                                ] }) }),
-                                idlePeriods.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 bg-slate-50/80 rounded-lg p-3 border border-slate-100/50", children: [
-                                  /* @__PURE__ */ jsx("p", { className: "font-semibold text-slate-400 text-[10px] mb-2.5 uppercase tracking-wider", children: "Idle Periods" }),
-                                  /* @__PURE__ */ jsx("div", { className: "space-y-2.5 max-h-32 overflow-y-auto pr-1 custom-scrollbar", children: idlePeriods.map((period, index) => {
-                                    return /* @__PURE__ */ jsxs(
-                                      "div",
-                                      {
-                                        className: "flex items-start gap-2.5 text-xs",
-                                        children: [
-                                          /* @__PURE__ */ jsx("div", { className: "mt-[5px] w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0 shadow-[0_0_4px_rgba(251,146,60,0.5)]" }),
-                                          /* @__PURE__ */ jsx("span", { className: "text-slate-700 font-medium tracking-tight", children: period.duration === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                                            period.startTime,
-                                            " ",
-                                            /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal ml-1", children: [
-                                              "(",
-                                              period.duration,
-                                              "m)"
-                                            ] })
-                                          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                                            period.startTime,
-                                            " ",
-                                            /* @__PURE__ */ jsx("span", { className: "text-slate-400 mx-0.5", children: "\u2192" }),
-                                            " ",
-                                            period.endTime,
-                                            " ",
-                                            /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal ml-1", children: [
-                                              "(",
-                                              period.duration,
-                                              "m)"
-                                            ] })
-                                          ] }) })
-                                        ]
-                                      },
-                                      index
-                                    );
-                                  }) })
-                                ] })
-                              ] }),
-                              onWatchClipsClick && /* @__PURE__ */ jsx("div", { className: "pt-3 mt-3 border-t border-slate-100 flex items-center", children: /* @__PURE__ */ jsxs(
-                                "button",
-                                {
-                                  onClick: (e) => {
-                                    e.stopPropagation();
-                                    onWatchClipsClick(clickPayload);
-                                  },
-                                  className: "w-full rounded-md border border-slate-200 bg-white hover:bg-slate-50 px-2 py-1.5 text-xs font-semibold text-slate-700 transition-colors flex items-center justify-center gap-1.5 shadow-sm",
-                                  children: [
-                                    /* @__PURE__ */ jsx(PlayCircleIcon, { className: "w-4 h-4 text-blue-500" }),
-                                    "Watch Clips"
-                                  ]
-                                }
-                              ) }),
-                              onHourClick && !onWatchClipsClick && !onAiSummaryClick && /* @__PURE__ */ jsx("div", { className: "pt-3 mt-3 border-t border-slate-100", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-blue-100 bg-blue-50/70 px-3 py-2 text-xs font-semibold text-blue-700 text-center", children: "Click to inspect hour" }) })
-                            ] })
-                          ] })
+                    ),
+                    /* @__PURE__ */ jsx(
+                      XAxis,
+                      {
+                        xAxisId: "sku",
+                        type: "number",
+                        dataKey: "skuIndex",
+                        domain: [0, Math.max(SHIFT_DURATION, 0)],
+                        hide: true,
+                        allowDataOverflow: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      YAxis,
+                      {
+                        yAxisId: "default",
+                        tickMargin: 8,
+                        width: 48,
+                        domain: [0, maxYValue],
+                        ticks: generateYAxisTicks(),
+                        tickFormatter: (value) => value,
+                        tick: (props) => {
+                          const { x, y, payload } = props;
+                          return /* @__PURE__ */ jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsx(
+                            "text",
+                            {
+                              x: -2,
+                              y: 0,
+                              dy: 4,
+                              textAnchor: "end",
+                              fill: "#666",
+                              fontSize: 12,
+                              children: payload.value
+                            },
+                            `tick-${payload.value}-${x}-${y}`
+                          ) });
                         }
-                      );
-                    },
-                    animationDuration: 200
-                  }
-                ),
-                /* @__PURE__ */ jsx(Customized, { component: renderTargetLine }),
-                /* @__PURE__ */ jsx(Customized, { component: renderSkuTimelineRail }),
-                /* @__PURE__ */ jsxs(
-                  Bar,
-                  {
-                    xAxisId: "default",
-                    dataKey: "output",
-                    yAxisId: "default",
-                    maxBarSize: 35,
-                    radius: [10, 10, 0, 0],
-                    isAnimationActive: false,
-                    children: [
-                      chartData.map((entry, index) => /* @__PURE__ */ jsx(
-                        Cell,
-                        {
-                          fill: entry.color,
-                          stroke: entry.isSelected ? "#0f172a" : "transparent",
-                          strokeWidth: entry.isSelected ? 2 : 0,
-                          style: {
-                            filter: entry.isHighlighted || entry.isSelected ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)" : "brightness(1)",
-                            transform: entry.isHighlighted || entry.isSelected ? "translateY(-4px)" : "translateY(0)",
-                            opacity: entry.isDimmed ? 0.4 : 1,
-                            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                            cursor: onHourClick || onWatchClipsClick || onAiSummaryClick ? "pointer" : "default"
-                          },
-                          onMouseEnter: (e) => {
-                            const target = e.target;
-                            target.style.filter = "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)";
-                            target.style.transform = "translateY(-4px)";
-                            target.style.opacity = "1";
-                          },
-                          onMouseLeave: (e) => {
-                            const target = e.target;
-                            target.style.filter = entry.isHighlighted || entry.isSelected ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)" : "brightness(1)";
-                            target.style.transform = entry.isHighlighted || entry.isSelected ? "translateY(-4px)" : "translateY(0)";
-                            target.style.opacity = entry.isDimmed ? "0.4" : "1";
-                          },
-                          onClick: () => {
-                            if (!onHourClick && !onWatchClipsClick && !onAiSummaryClick) return;
-                            const { startTime, endTime } = buildHourClipFilterWindow({
-                              shiftStart,
-                              shiftEnd,
-                              hourIndex: entry.hourIndex,
-                              slotCount: SHIFT_DURATION
-                            });
-                            const payload = {
-                              hourIndex: entry.hourIndex,
-                              timeRange: entry.timeRange,
-                              startTime,
-                              endTime,
-                              output: Math.round(entry.originalOutput || 0),
-                              target: entry.target,
-                              status: entry.status
-                            };
-                            if (onHourClick) onHourClick(payload);
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(YAxis, { yAxisId: "idle", domain: [0, 60], hide: true }),
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        cursor: { fill: "#f1f5f9" },
+                        shared: false,
+                        offset: -5,
+                        wrapperStyle: { pointerEvents: "auto", zIndex: 100, transition: "opacity 0.2s ease-out, transform 0.15s ease-out" },
+                        active: forceHideTooltip ? false : isTooltipHovered ? true : void 0,
+                        isAnimationActive: false,
+                        contentStyle: { backgroundColor: "transparent", border: "none", padding: 0 },
+                        content: (props) => {
+                          const activeData = props.active && props.payload && props.payload.length > 0 ? props.payload[0].payload : null;
+                          const data2 = activeData || (isTooltipHovered ? lastTooltipDataRef.current : null);
+                          if (!data2)
+                            return null;
+                          if (activeData) {
+                            lastTooltipDataRef.current = activeData;
                           }
+                          const idlePeriods = showIdleTime ? getHourlyIdlePeriods({
+                            idleArray: data2.idleArray,
+                            shiftStart,
+                            hourIndex: Number.isFinite(data2.hourIndex) ? data2.hourIndex : 0
+                          }) : [];
+                          const tooltipHourIndex = Number.isFinite(data2.hourIndex) ? data2.hourIndex : 0;
+                          const { startTime, endTime } = buildHourClipFilterWindow({
+                            shiftStart,
+                            shiftEnd,
+                            hourIndex: tooltipHourIndex,
+                            slotCount: SHIFT_DURATION
+                          });
+                          const clickPayload = {
+                            hourIndex: tooltipHourIndex,
+                            timeRange: data2.timeRange,
+                            startTime,
+                            endTime,
+                            output: Math.round(data2.originalOutput || 0),
+                            target: data2.target,
+                            status: data2.status
+                          };
+                          return /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "data-testid": "hourly-output-tooltip",
+                              className: "p-3 -m-3 pointer-events-auto transition-opacity duration-200",
+                              style: { cursor: "default", opacity: data2 ? 1 : 0 },
+                              onMouseEnter: () => {
+                                clearTooltipHoverTimeout();
+                                setIsTooltipHovered(true);
+                                setForceHideTooltip(false);
+                              },
+                              onMouseLeave: () => {
+                                scheduleInteractiveTooltipHide();
+                              },
+                              children: /* @__PURE__ */ jsxs("div", { className: "bg-white/95 backdrop-blur-md border border-slate-200/60 shadow-xl shadow-slate-200/40 rounded-xl p-4 min-w-[240px] text-slate-700 pointer-events-auto", children: [
+                                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4 pb-3 border-b border-slate-100", children: [
+                                  /* @__PURE__ */ jsx("p", { className: "font-semibold text-slate-900 text-sm tracking-tight", children: data2.timeRange }),
+                                  onAiSummaryClick && /* @__PURE__ */ jsxs(
+                                    "button",
+                                    {
+                                      onClick: (e) => {
+                                        e.stopPropagation();
+                                        onAiSummaryClick(clickPayload);
+                                      },
+                                      className: "flex items-center gap-1 px-2 py-1 -mr-1 rounded-md border border-slate-200 bg-white hover:bg-slate-50 text-[11px] font-medium text-slate-600 shadow-sm transition-colors",
+                                      children: [
+                                        /* @__PURE__ */ jsx(SparklesIcon, { className: "w-3.5 h-3.5" }),
+                                        "Ask AI"
+                                      ]
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                                    /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Output" }),
+                                    /* @__PURE__ */ jsxs("span", { className: "font-bold text-slate-900 text-sm", children: [
+                                      Math.round(data2.output),
+                                      " ",
+                                      /* @__PURE__ */ jsx("span", { className: "text-slate-400 font-normal text-xs ml-0.5", children: "units" })
+                                    ] })
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                                    /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Target" }),
+                                    /* @__PURE__ */ jsxs("span", { className: "font-bold text-slate-700 text-sm", children: [
+                                      Math.round(data2.target),
+                                      " ",
+                                      /* @__PURE__ */ jsx("span", { className: "text-slate-400 font-normal text-xs ml-0.5", children: "units" })
+                                    ] })
+                                  ] }),
+                                  showIdleTime && data2.idleMinutes > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    /* @__PURE__ */ jsx("div", { className: "pt-3 mt-3 border-t border-slate-100", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                                      /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Idle Time" }),
+                                      /* @__PURE__ */ jsxs("span", { className: "font-bold text-orange-600 text-sm flex items-center gap-1.5", children: [
+                                        /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_6px_rgba(249,115,22,0.6)] animate-pulse" }),
+                                        data2.idleMinutes,
+                                        " ",
+                                        /* @__PURE__ */ jsx("span", { className: "text-orange-500/70 font-normal text-xs ml-0.5", children: "min" })
+                                      ] })
+                                    ] }) }),
+                                    idlePeriods.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 bg-slate-50/80 rounded-lg p-3 border border-slate-100/50", children: [
+                                      /* @__PURE__ */ jsx("p", { className: "font-semibold text-slate-400 text-[10px] mb-2.5 uppercase tracking-wider", children: "Idle Periods" }),
+                                      /* @__PURE__ */ jsx("div", { className: "space-y-2.5 max-h-32 overflow-y-auto pr-1 custom-scrollbar", children: idlePeriods.map((period, index) => {
+                                        return /* @__PURE__ */ jsxs(
+                                          "div",
+                                          {
+                                            className: "flex items-start gap-2.5 text-xs",
+                                            children: [
+                                              /* @__PURE__ */ jsx("div", { className: "mt-[5px] w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0 shadow-[0_0_4px_rgba(251,146,60,0.5)]" }),
+                                              /* @__PURE__ */ jsx("span", { className: "text-slate-700 font-medium tracking-tight", children: period.duration === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                                period.startTime,
+                                                " ",
+                                                /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal ml-1", children: [
+                                                  "(",
+                                                  period.duration,
+                                                  "m)"
+                                                ] })
+                                              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                                                period.startTime,
+                                                " ",
+                                                /* @__PURE__ */ jsx("span", { className: "text-slate-400 mx-0.5", children: "\u2192" }),
+                                                " ",
+                                                period.endTime,
+                                                " ",
+                                                /* @__PURE__ */ jsxs("span", { className: "text-slate-400 font-normal ml-1", children: [
+                                                  "(",
+                                                  period.duration,
+                                                  "m)"
+                                                ] })
+                                              ] }) })
+                                            ]
+                                          },
+                                          index
+                                        );
+                                      }) })
+                                    ] })
+                                  ] }),
+                                  onWatchClipsClick && /* @__PURE__ */ jsx("div", { className: "pt-3 mt-3 border-t border-slate-100 flex items-center", children: /* @__PURE__ */ jsxs(
+                                    "button",
+                                    {
+                                      onClick: (e) => {
+                                        e.stopPropagation();
+                                        onWatchClipsClick(clickPayload);
+                                      },
+                                      className: "w-full rounded-md border border-slate-200 bg-white hover:bg-slate-50 px-2 py-1.5 text-xs font-semibold text-slate-700 transition-colors flex items-center justify-center gap-1.5 shadow-sm",
+                                      children: [
+                                        /* @__PURE__ */ jsx(PlayCircleIcon, { className: "w-4 h-4 text-blue-500" }),
+                                        "Watch Clips"
+                                      ]
+                                    }
+                                  ) }),
+                                  onHourClick && !onWatchClipsClick && !onAiSummaryClick && /* @__PURE__ */ jsx("div", { className: "pt-3 mt-3 border-t border-slate-100", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-blue-100 bg-blue-50/70 px-3 py-2 text-xs font-semibold text-blue-700 text-center", children: "Click to inspect hour" }) })
+                                ] })
+                              ] })
+                            }
+                          );
                         },
-                        `cell-${index}`
-                      )),
-                      /* @__PURE__ */ jsx(
-                        LabelList,
-                        {
-                          dataKey: "originalOutput",
-                          position: "top",
-                          content: (props) => {
-                            const { x, y, width, value, payload } = props;
-                            const actualValue = payload?.originalOutput || value;
-                            if (!actualValue || actualValue === 0) return null;
-                            return /* @__PURE__ */ jsx(
-                              "text",
-                              {
-                                x: x + width / 2,
-                                y: y - 8,
-                                textAnchor: "middle",
-                                fontSize: "12",
-                                fontWeight: "600",
-                                fill: "#374151",
-                                style: {
-                                  opacity: 1,
-                                  pointerEvents: "none",
-                                  transition: "none"
-                                },
-                                children: Math.round(actualValue)
+                        animationDuration: 200
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Customized, { component: renderTargetLine }),
+                    /* @__PURE__ */ jsx(Customized, { component: renderSkuTimelineRail }),
+                    /* @__PURE__ */ jsxs(
+                      Bar,
+                      {
+                        xAxisId: "default",
+                        dataKey: "output",
+                        yAxisId: "default",
+                        maxBarSize: 35,
+                        radius: [10, 10, 0, 0],
+                        isAnimationActive: false,
+                        children: [
+                          chartData.map((entry, index) => /* @__PURE__ */ jsx(
+                            Cell,
+                            {
+                              fill: entry.color,
+                              stroke: entry.isSelected ? "#0f172a" : "transparent",
+                              strokeWidth: entry.isSelected ? 2 : 0,
+                              style: {
+                                filter: entry.isHighlighted || entry.isSelected ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)" : "brightness(1)",
+                                transform: entry.isHighlighted || entry.isSelected ? "translateY(-4px)" : "translateY(0)",
+                                opacity: entry.isDimmed ? 0.4 : 1,
+                                transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                cursor: onHourClick || onWatchClipsClick || onAiSummaryClick ? "pointer" : "default"
+                              },
+                              onMouseEnter: (e) => {
+                                const target = e.target;
+                                target.style.filter = "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)";
+                                target.style.transform = "translateY(-4px)";
+                                target.style.opacity = "1";
+                              },
+                              onMouseLeave: (e) => {
+                                const target = e.target;
+                                target.style.filter = entry.isHighlighted || entry.isSelected ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)" : "brightness(1)";
+                                target.style.transform = entry.isHighlighted || entry.isSelected ? "translateY(-4px)" : "translateY(0)";
+                                target.style.opacity = entry.isDimmed ? "0.4" : "1";
+                              },
+                              onClick: () => {
+                                if (!onHourClick && !onWatchClipsClick && !onAiSummaryClick) return;
+                                const { startTime, endTime } = buildHourClipFilterWindow({
+                                  shiftStart,
+                                  shiftEnd,
+                                  hourIndex: entry.hourIndex,
+                                  slotCount: SHIFT_DURATION
+                                });
+                                const payload = {
+                                  hourIndex: entry.hourIndex,
+                                  timeRange: entry.timeRange,
+                                  startTime,
+                                  endTime,
+                                  output: Math.round(entry.originalOutput || 0),
+                                  target: entry.target,
+                                  status: entry.status
+                                };
+                                if (onHourClick) onHourClick(payload);
                               }
-                            );
-                          }
-                        }
-                      )
-                    ]
-                  }
-                ),
-                IdleBar,
-                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-                  "pattern",
-                  {
-                    id: "idlePattern",
-                    patternUnits: "userSpaceOnUse",
-                    width: "4",
-                    height: "4",
-                    children: [
-                      /* @__PURE__ */ jsx("rect", { width: "4", height: "4", fill: "#4b5563", opacity: "0.6" }),
-                      /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M 0,4 l 4,-4 M -1,1 l 2,-2 M 3,5 l 2,-2",
-                          stroke: "#374151",
-                          strokeWidth: "0.8",
-                          opacity: "0.8"
-                        }
-                      )
-                    ]
-                  }
-                ) })
-              ]
-            }
-          ) }),
-          hoveredSkuRailLabel && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute z-50 pointer-events-none transform -translate-x-1/2 -translate-y-full transition-opacity duration-200",
-              style: {
-                left: hoveredSkuRailLabel.centerX,
-                top: hoveredSkuRailLabel.railY - 12
-              },
-              children: /* @__PURE__ */ jsxs("div", { className: "bg-white/95 backdrop-blur-md border border-slate-200/80 shadow-xl shadow-slate-200/50 rounded-lg px-3 py-2 flex flex-col min-w-[100px] max-w-[280px]", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-wider text-blue-500 uppercase leading-none mb-1", children: "SKU" }),
-                /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-800 whitespace-normal break-words leading-snug", children: hoveredSkuRailLabel.label })
-              ] })
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "text-gray-500 text-sm", children: "Loading chart..." }) }),
+                            },
+                            `cell-${index}`
+                          )),
+                          /* @__PURE__ */ jsx(
+                            LabelList,
+                            {
+                              dataKey: "originalOutput",
+                              position: "top",
+                              content: (props) => {
+                                const { x, y, width, value, payload } = props;
+                                const actualValue = payload?.originalOutput || value;
+                                if (!actualValue || actualValue === 0) return null;
+                                return /* @__PURE__ */ jsx(
+                                  "text",
+                                  {
+                                    x: x + width / 2,
+                                    y: y - 8,
+                                    textAnchor: "middle",
+                                    fontSize: "12",
+                                    fontWeight: "600",
+                                    fill: "#374151",
+                                    style: {
+                                      opacity: 1,
+                                      pointerEvents: "none",
+                                      transition: "none"
+                                    },
+                                    children: Math.round(actualValue)
+                                  }
+                                );
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    IdleBar,
+                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                      "pattern",
+                      {
+                        id: "idlePattern",
+                        patternUnits: "userSpaceOnUse",
+                        width: "4",
+                        height: "4",
+                        children: [
+                          /* @__PURE__ */ jsx("rect", { width: "4", height: "4", fill: "#4b5563", opacity: "0.6" }),
+                          /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M 0,4 l 4,-4 M -1,1 l 2,-2 M 3,5 l 2,-2",
+                              stroke: "#374151",
+                              strokeWidth: "0.8",
+                              opacity: "0.8"
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              ) }),
+              hoveredSkuRailLabel && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute z-50 pointer-events-none transform -translate-x-1/2 -translate-y-full transition-opacity duration-200",
+                  style: {
+                    left: hoveredSkuRailLabel.centerX,
+                    top: hoveredSkuRailLabel.railY - 12
+                  },
+                  children: /* @__PURE__ */ jsxs("div", { className: "bg-white/95 backdrop-blur-md border border-slate-200/80 shadow-xl shadow-slate-200/50 rounded-lg px-3 py-2 flex flex-col min-w-[100px] max-w-[280px]", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-wider text-blue-500 uppercase leading-none mb-1", children: "SKU" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-800 whitespace-normal break-words leading-snug", children: hoveredSkuRailLabel.label })
+                  ] })
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "text-gray-500 text-sm", children: "Loading chart..." }) }),
         /* @__PURE__ */ jsx("div", { className: "flex-none pt-2", children: renderLegend() })
       ]
     }
   );
 };
-var HourlyOutputChart = React148__default.memo(
+var HourlyOutputChart = React125__default.memo(
   HourlyOutputChartComponent,
   (prevProps, nextProps) => {
     if (prevProps.pphThreshold !== nextProps.pphThreshold || prevProps.shiftStart !== nextProps.shiftStart || prevProps.shiftEnd !== nextProps.shiftEnd || prevProps.shiftDate !== nextProps.shiftDate || prevProps.timezone !== nextProps.timezone || prevProps.showIdleTime !== nextProps.showIdleTime || prevProps.activeSkuId !== nextProps.activeSkuId || prevProps.selectedHourIndex !== nextProps.selectedHourIndex || prevProps.onHourClick !== nextProps.onHourClick || prevProps.className !== nextProps.className) {
@@ -38859,7 +38892,7 @@ function getTrendArrowAndColor(trend) {
     return { arrow: "\u2192", color: "text-gray-400" };
   }
 }
-var VideoCard = React148__default.memo(({
+var VideoCard = React125__default.memo(({
   workspace,
   hlsUrl,
   shouldPlay,
@@ -38913,8 +38946,8 @@ var VideoCard = React148__default.memo(({
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
-  const worstMarkerClassName = compact ? "left-1.5 top-1.5 gap-1.5 px-2 py-1 text-[11px]" : "left-2 top-2 gap-2 px-3 py-1.5 text-xs";
-  const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-8 left-1.5 gap-1" : "top-10 left-2 gap-1.5" : compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5";
+  const worstMarkerClassName = compact ? "left-1 top-1 sm:left-1.5 sm:top-1.5 gap-1 sm:gap-1.5 p-1 sm:px-2 sm:py-1 text-[10px] sm:text-[11px]" : "left-1.5 top-1.5 sm:left-2 sm:top-2 gap-1 sm:gap-2 px-1.5 sm:px-3 py-0.5 sm:py-1.5 text-[10px] sm:text-xs";
+  const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-6 sm:top-8 left-1 sm:left-1.5 gap-1" : "top-7 sm:top-10 left-1.5 sm:left-2 gap-1 sm:gap-1.5" : compact ? "top-1 sm:top-1.5 left-1 sm:left-1.5 gap-1" : "top-1.5 sm:top-2 left-1.5 sm:left-2 gap-1 sm:gap-1.5";
   const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
   const handleClick = useCallback(() => {
     trackCoreEvent("Workspace Card Clicked", {
@@ -38950,8 +38983,8 @@ var VideoCard = React148__default.memo(({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
-            /* @__PURE__ */ jsx(Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
-            /* @__PURE__ */ jsx("span", { className: `text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
+            /* @__PURE__ */ jsx(Camera, { className: `w-5 h-5 ${compact ? "sm:w-4 sm:h-4" : "sm:w-6 sm:h-6"} text-gray-500` }),
+            /* @__PURE__ */ jsx("span", { className: `text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} text-gray-500 mt-1`, children: "Loading..." })
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10", children: [
             /* @__PURE__ */ jsx(
@@ -39013,7 +39046,7 @@ var VideoCard = React148__default.memo(({
                     "data-testid": `video-card-status-badge-${badge.kind}`,
                     "aria-label": tooltipText,
                     "aria-describedby": tooltipId,
-                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
+                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-7 w-7 sm:h-10 sm:w-10" : "h-8 w-8 sm:h-11 sm:w-11"}`,
                     style: {
                       borderColor: presentation.hex
                     },
@@ -39022,7 +39055,7 @@ var VideoCard = React148__default.memo(({
                         Icon2,
                         {
                           "aria-hidden": "true",
-                          className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
+                          className: `${compact ? "h-4 w-4 sm:h-5 sm:w-5" : "h-4 w-4 sm:h-6 sm:w-6"} text-white`,
                           strokeWidth: 2.4
                         }
                       ),
@@ -39050,10 +39083,10 @@ var VideoCard = React148__default.memo(({
             "div",
             {
               "data-testid": "video-card-worst-performance-marker",
-              className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl ${worstMarkerClassName}`,
+              className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-sm sm:rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl max-w-[calc(100%-8px)] sm:max-w-[calc(100%-16px)] ${worstMarkerClassName}`,
               children: [
-                /* @__PURE__ */ jsx(AlertTriangle, { className: `${compact ? "h-3.5 w-3.5" : "h-4 w-4"} text-[#E34329]`, "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { children: "Overall Underperformer" })
+                /* @__PURE__ */ jsx(AlertTriangle, { className: `${compact ? "h-3 w-3 sm:h-3.5 sm:w-3.5" : "h-3.5 w-3.5 sm:h-4 sm:w-4"} shrink-0 text-[#E34329]`, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: `truncate leading-tight min-w-0 ${compact ? "hidden sm:block" : ""}`, children: "Overall Underperformer" })
               ]
             }
           ),
@@ -39066,10 +39099,10 @@ var VideoCard = React148__default.memo(({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 sm:${compact ? "p-1" : "p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 ${compact ? "sm:p-1" : "sm:p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
             /* @__PURE__ */ jsx(Camera, { size: compact ? 10 : 12, className: "shrink-0 text-white" }),
-            /* @__PURE__ */ jsx("p", { className: `min-w-0 truncate text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
+            /* @__PURE__ */ jsx("p", { className: `min-w-0 truncate text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: `flex shrink-0 items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
             trendInfo && /* @__PURE__ */ jsx(
@@ -39086,7 +39119,7 @@ var VideoCard = React148__default.memo(({
                 className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full ${showOffline ? "bg-red-500" : "bg-green-500"}`
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: showOffline ? "Offline" : "Live" })
+            /* @__PURE__ */ jsx("span", { className: `text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"}`, children: showOffline ? "Offline" : "Live" })
           ] })
         ] })
       ]
@@ -39147,7 +39180,7 @@ var hasRecentHealthSignal = (lastHeartbeat) => {
   if (!Number.isFinite(heartbeatMs)) return false;
   return Date.now() - heartbeatMs <= RECENT_HEALTH_SIGNAL_MS;
 };
-var VideoGridView = React148__default.memo(({
+var VideoGridView = React125__default.memo(({
   workspaces,
   blueComparisonWorkspaces,
   worstPerformanceWorkspaceIds = [],
@@ -39655,7 +39688,7 @@ var VideoGridView = React148__default.memo(({
   ) });
 });
 VideoGridView.displayName = "VideoGridView";
-var MapGridView = React148__default.memo(({
+var MapGridView = React125__default.memo(({
   workspaces,
   className = "",
   displayNames = {},
@@ -39876,13 +39909,13 @@ var WorkspaceMetricCardsImpl = ({
   liveSkuId
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
-  const activeSku = React148__default.useMemo(() => {
+  const activeSku = React125__default.useMemo(() => {
     if (skuAware && activeSkuId && skuBreakdown) {
       return skuBreakdown.find((s) => s.sku_id === activeSkuId);
     }
     return null;
   }, [skuAware, activeSkuId, skuBreakdown]);
-  const displaySku = React148__default.useMemo(() => {
+  const displaySku = React125__default.useMemo(() => {
     if (activeSku) return activeSku;
     if (skuAware && !activeSkuId && liveSkuId && skuBreakdown) {
       return skuBreakdown.find((s) => s.sku_id === liveSkuId) ?? null;
@@ -40536,7 +40569,7 @@ var UptimeLineChartComponent = ({ points, className = "" }) => {
     )
   ] }) }) });
 };
-var UptimeLineChart = React148__default.memo(UptimeLineChartComponent);
+var UptimeLineChart = React125__default.memo(UptimeLineChartComponent);
 var getTimeFromTimeString = (timeStr) => {
   if (!timeStr) {
     return { hour: 0, minute: 0, decimalHour: 0 };
@@ -40560,10 +40593,10 @@ var HourlyUptimeChartComponent = ({
   shiftBreaks,
   className = ""
 }) => {
-  const containerRef = React148__default.useRef(null);
-  const [containerReady, setContainerReady] = React148__default.useState(false);
-  const [containerWidth, setContainerWidth] = React148__default.useState(0);
-  const uptimeSeries = React148__default.useMemo(() => buildUptimeSeries({
+  const containerRef = React125__default.useRef(null);
+  const [containerReady, setContainerReady] = React125__default.useState(false);
+  const [containerWidth, setContainerWidth] = React125__default.useState(0);
+  const uptimeSeries = React125__default.useMemo(() => buildUptimeSeries({
     idleTimeHourly,
     shiftStart,
     shiftEnd,
@@ -40573,11 +40606,11 @@ var HourlyUptimeChartComponent = ({
     shiftBreaks
   }), [idleTimeHourly, shiftStart, shiftEnd, shiftDate, timezone, elapsedMinutes, shiftBreaks]);
   const hasAggregateData = Boolean(hourlyAggregates && hourlyAggregates.length > 0);
-  const shiftStartTime = React148__default.useMemo(
+  const shiftStartTime = React125__default.useMemo(
     () => getTimeFromTimeString(shiftStart),
     [shiftStart]
   );
-  const { shiftDuration, shiftEndTime } = React148__default.useMemo(() => {
+  const { shiftDuration, shiftEndTime } = React125__default.useMemo(() => {
     if (!shiftEnd) {
       const fallbackHours = uptimeSeries.shiftMinutes > 0 ? Math.ceil(uptimeSeries.shiftMinutes / 60) : 0;
       return { shiftDuration: fallbackHours, shiftEndTime: null };
@@ -40591,7 +40624,7 @@ var HourlyUptimeChartComponent = ({
     const hourCount = hasPartial ? Math.ceil(duration) : Math.round(duration);
     return { shiftDuration: hourCount, shiftEndTime: endTime };
   }, [shiftEnd, shiftStartTime.decimalHour, uptimeSeries.shiftMinutes]);
-  const formatHour = React148__default.useCallback((hourIndex) => {
+  const formatHour = React125__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === shiftDuration - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -40616,7 +40649,7 @@ var HourlyUptimeChartComponent = ({
     };
     return `${formatTime5(startHour, startMinute)}-${formatTime5(endHour, endMinute)}`;
   }, [shiftDuration, shiftStartTime.decimalHour, shiftEndTime]);
-  const formatTimeRange2 = React148__default.useCallback((hourIndex) => {
+  const formatTimeRange2 = React125__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === shiftDuration - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -40638,7 +40671,7 @@ var HourlyUptimeChartComponent = ({
     };
     return `${formatTime5(startHour, startMinute)} - ${formatTime5(endHour, endMinute)}`;
   }, [shiftDuration, shiftStartTime.decimalHour, shiftEndTime]);
-  const chartData = React148__default.useMemo(() => {
+  const chartData = React125__default.useMemo(() => {
     if (shiftDuration <= 0) return [];
     if (hasAggregateData) {
       return hourlyAggregates.map((entry, hourIndex) => ({
@@ -40680,7 +40713,7 @@ var HourlyUptimeChartComponent = ({
   }, [hasAggregateData, hourlyAggregates, uptimeSeries.points, uptimeSeries.elapsedMinutes, uptimeSeries.shiftMinutes, shiftDuration, formatHour, formatTimeRange2]);
   const maxYValue = 100;
   const yAxisTicks = [0, 25, 50, 75, 100];
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -40706,7 +40739,7 @@ var HourlyUptimeChartComponent = ({
       clearTimeout(fallbackTimeout);
     };
   }, []);
-  const xAxisConfig = React148__default.useMemo(() => {
+  const xAxisConfig = React125__default.useMemo(() => {
     if (containerWidth >= 960) {
       return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12, labelMode: "full" };
     }
@@ -40715,7 +40748,7 @@ var HourlyUptimeChartComponent = ({
     }
     return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6, labelMode: "start" };
   }, [containerWidth]);
-  const formatXAxisTick = React148__default.useCallback((raw) => {
+  const formatXAxisTick = React125__default.useCallback((raw) => {
     const label = typeof raw === "string" ? raw : String(raw);
     if (xAxisConfig.labelMode === "full") return label;
     const parts = label.split("-");
@@ -40921,7 +40954,7 @@ var HourlyUptimeChartComponent = ({
     }
   );
 };
-var HourlyUptimeChart = React148__default.memo(HourlyUptimeChartComponent);
+var HourlyUptimeChart = React125__default.memo(HourlyUptimeChartComponent);
 var DEFAULT_COLORS2 = ["#00AB45", "#ef4444"];
 var UptimeDonutChartComponent = ({
   data,
@@ -40991,7 +41024,7 @@ var UptimeDonutChartComponent = ({
     ] }) })
   ] }) });
 };
-var UptimeDonutChart = React148__default.memo(UptimeDonutChartComponent);
+var UptimeDonutChart = React125__default.memo(UptimeDonutChartComponent);
 UptimeDonutChart.displayName = "UptimeDonutChart";
 var TrendIcon = ({ trend }) => {
   if (trend === "up") {
@@ -41112,7 +41145,7 @@ var EmptyStateMessage = ({
   iconClassName
 }) => {
   let IconContent = null;
-  if (React148__default.isValidElement(iconType)) {
+  if (React125__default.isValidElement(iconType)) {
     IconContent = iconType;
   } else if (typeof iconType === "string") {
     const MappedIcon = IconMap[iconType];
@@ -41883,7 +41916,31 @@ var formatOutputLabel = (bin) => {
   if (actualOutput === null) {
     return "";
   }
-  return `Output ${formatCompactNumber(actualOutput)}`;
+  const expectedOutput = getExpectedOutputUnits(bin);
+  return expectedOutput !== null ? `Output ${formatCompactNumber(actualOutput)}/${formatCompactNumber(expectedOutput)}` : `Output ${formatCompactNumber(actualOutput)}`;
+};
+var getTooltipOutputParts = (outputLabel, fallbackLabel) => {
+  if (outputLabel.startsWith("Output ")) {
+    const [actual, expected] = outputLabel.slice("Output ".length).split("/");
+    return {
+      label: "Output",
+      actual: actual?.trim() || "",
+      expected: expected?.trim()
+    };
+  }
+  return {
+    label: "Efficiency",
+    actual: fallbackLabel,
+    fallbackValue: fallbackLabel
+  };
+};
+var getExpectedOutputUnits = (bin) => {
+  const targetPpm = bin.target_ppm;
+  const durationSeconds = bin.duration_seconds;
+  if (typeof targetPpm !== "number" || !Number.isFinite(targetPpm) || typeof durationSeconds !== "number" || !Number.isFinite(durationSeconds) || durationSeconds <= 0) {
+    return null;
+  }
+  return targetPpm * durationSeconds / 60;
 };
 var VideoControls = ({
   isPlaying,
@@ -41912,11 +41969,12 @@ var VideoControls = ({
   const [dragTime, setDragTime] = useState(0);
   const [isHoveringProgressBar, setIsHoveringProgressBar] = useState(false);
   const [hoveredTimelineBin, setHoveredTimelineBin] = useState(null);
+  const [tooltipAnchorPercent, setTooltipAnchorPercent] = useState(50);
+  const [tooltipPointerPercent, setTooltipPointerPercent] = useState(50);
   const [showSpeedMenu, setShowSpeedMenu] = useState(false);
   const speedMenuRef = useRef(null);
   const progressTrackRef = useRef(null);
   const activePointerIdRef = useRef(null);
-  const markerPointerJumpHandledRef = useRef(false);
   const progressColor = "#4b5563";
   const controlsVisible = showControls || controlsPinned;
   const isDraggingRef = useRef(false);
@@ -41940,43 +41998,6 @@ var VideoControls = ({
     isDraggingRef.current = false;
     onSeekEnd?.();
   };
-  const handleTimelineJump = useCallback((time2) => {
-    const nextTime = Math.min(Math.max(time2, 0), duration || time2);
-    const wasDragging = isDraggingRef.current;
-    activePointerIdRef.current = null;
-    setIsDragging(false);
-    isDraggingRef.current = false;
-    setDragTime(nextTime);
-    if (!wasDragging) {
-      onSeekStart?.();
-    }
-    onSeek(nextTime);
-    onSeekEnd?.();
-  }, [duration, onSeek, onSeekEnd, onSeekStart]);
-  const handleTimelineMarkerPointerDown = useCallback((e, time2) => {
-    e.preventDefault();
-    e.stopPropagation();
-    markerPointerJumpHandledRef.current = true;
-    handleTimelineJump(time2);
-  }, [handleTimelineJump]);
-  const handleTimelineMarkerMouseDown = useCallback((e, time2) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (markerPointerJumpHandledRef.current) {
-      return;
-    }
-    markerPointerJumpHandledRef.current = true;
-    handleTimelineJump(time2);
-  }, [handleTimelineJump]);
-  const handleTimelineMarkerClick = useCallback((e, time2) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (markerPointerJumpHandledRef.current) {
-      markerPointerJumpHandledRef.current = false;
-      return;
-    }
-    handleTimelineJump(time2);
-  }, [handleTimelineJump]);
   const updateTimeFromClientX = useCallback((clientX) => {
     if (!progressTrackRef.current) return;
     const rect = progressTrackRef.current.getBoundingClientRect();
@@ -42054,6 +42075,13 @@ var VideoControls = ({
       const clockLabel = formatTimelineClockTime(bin.start_time, timelineTimezone);
       const minuteExplanation = timelineExplanation?.minute_explanations?.find((explanation) => explanation.offset_seconds === offset || Boolean(explanation.start_time) && explanation.start_time === bin.start_time);
       const explanationLabel = minuteExplanation && minuteExplanation.confidence !== "low" ? minuteExplanation.primary_driver === "idle" ? "High Idle Detected" : minuteExplanation.primary_driver === "micro_stoppage" ? `Gap: ${Math.round(minuteExplanation.micro_stoppage_lost_seconds)}s lost` : minuteExplanation.primary_driver === "slow_cycle" ? typeof minuteExplanation.actual_cycle_time_seconds === "number" && Number.isFinite(minuteExplanation.actual_cycle_time_seconds) && typeof minuteExplanation.median_cycle_time_seconds === "number" && Number.isFinite(minuteExplanation.median_cycle_time_seconds) ? `Avg Cycle Time: ${formatTooltipSeconds(minuteExplanation.actual_cycle_time_seconds)} vs Shift Avg: ${formatTooltipSeconds(minuteExplanation.median_cycle_time_seconds)}` : `Slow cycle: ${Math.round(minuteExplanation.slow_cycle_lost_seconds)}s lost` : minuteExplanation.primary_driver === "low_output" ? "Low Output" : void 0 : void 0;
+      const binOutputUnits = getBinOutputUnits(bin);
+      const binEfficiency = typeof bin.efficiency_percent === "number" && Number.isFinite(bin.efficiency_percent) ? bin.efficiency_percent : null;
+      const expectedOutputUnits = getExpectedOutputUnits({ ...bin, duration_seconds: clampedDuration });
+      const isBelowExpectedOutput = binOutputUnits !== null && expectedOutputUnits !== null && expectedOutputUnits > 0 && binOutputUnits / expectedOutputUnits < 0.8;
+      const fallbackTooltipReasonLabel = bin.is_idle === true && (binOutputUnits === null || binOutputUnits < 1) ? "Idle" : binOutputUnits === 0 || isBelowExpectedOutput || binOutputUnits !== null && binEfficiency !== null && binEfficiency < 80 ? "Low output" : void 0;
+      const explanationTooltipReasonLabel = minuteExplanation && minuteExplanation.confidence !== "low" ? minuteExplanation.primary_driver === "idle" ? "Idle" : minuteExplanation.primary_driver === "micro_stoppage" ? "Gaps" : minuteExplanation.primary_driver === "slow_cycle" ? "Slow cycles" : minuteExplanation.primary_driver === "low_output" ? "Low output" : void 0 : void 0;
+      const tooltipReasonLabel = explanationTooltipReasonLabel || fallbackTooltipReasonLabel;
       return {
         ...bin,
         offset_seconds: offset,
@@ -42063,97 +42091,155 @@ var VideoControls = ({
         clockLabel,
         efficiencyLabel: formatEfficiencyPercent(bin.efficiency_percent),
         outputLabel: formatOutputLabel({ ...bin, duration_seconds: clampedDuration }),
-        explanationLabel
+        explanationLabel,
+        tooltipReasonLabel
       };
     }).filter((bin) => Boolean(bin));
   }, [duration, timelineAnnotations, timelineExplanation, timelineTimezone]);
   const hasTimelineAnnotations = timelineBins.length > 0;
-  const worstMinuteMarkers = useMemo(() => {
-    const efficiencySource = timelineBins.filter((bin) => typeof bin.efficiency_percent === "number" && Number.isFinite(bin.efficiency_percent)).slice().sort((a, b) => a.efficiency_percent - b.efficiency_percent || a.offset_seconds - b.offset_seconds).slice(0, 3).map((bin, index) => ({
-      start_time: bin.start_time,
-      offset_seconds: bin.offset_seconds,
-      duration_seconds: bin.duration_seconds,
-      avg_flow_percent: bin.avg_flow_percent,
-      rank: index + 1
-    }));
-    const source = efficiencySource.length ? efficiencySource : timelineAnnotations?.worst_minutes?.length ? timelineAnnotations.worst_minutes : timelineBins.filter((bin) => typeof bin.avg_flow_percent === "number" && Number.isFinite(bin.avg_flow_percent)).sort((a, b) => a.avg_flow_percent - b.avg_flow_percent).slice(0, 3);
-    return source.filter((marker) => typeof marker.offset_seconds === "number" && Number.isFinite(marker.offset_seconds)).slice(0, 3).map((marker, index) => {
-      const offset = Math.max(0, Math.min(duration, marker.offset_seconds));
-      const matchingBin = timelineBins.find((bin) => bin.offset_seconds === marker.offset_seconds || Boolean(marker.start_time) && bin.start_time === marker.start_time);
-      const markerDuration = "duration_seconds" in marker ? Number(marker.duration_seconds || 0) : 0;
-      const width = markerDuration > 0 ? markerDuration : Number(matchingBin?.duration_seconds || 0);
-      const centerOffset = Math.min(duration, offset + Math.max(0, width) / 2);
+  const outputBars = useMemo(() => {
+    if (!timelineBins.length || duration <= 0) {
+      return [];
+    }
+    const binsWithOutput = timelineBins.map((bin) => {
+      const outputUnits = getBinOutputUnits(bin);
+      if (outputUnits === null) {
+        return null;
+      }
       return {
-        ...marker,
-        rank: "rank" in marker ? marker.rank : index + 1,
-        leftPercent: getPercentage(centerOffset, duration)
+        bin,
+        outputUnits,
+        expectedOutputUnits: getExpectedOutputUnits(bin)
+      };
+    }).filter((item) => Boolean(item));
+    if (!binsWithOutput.length) {
+      return [];
+    }
+    const maxActualOutput = binsWithOutput.reduce((max, item) => Math.max(max, item.outputUnits), 0);
+    return binsWithOutput.map(({ bin, outputUnits, expectedOutputUnits }) => {
+      const hasExpected = expectedOutputUnits !== null && expectedOutputUnits > 0;
+      const scale2 = hasExpected ? outputUnits / expectedOutputUnits : maxActualOutput > 0 ? outputUnits / maxActualOutput : 0;
+      const isZeroOutput = outputUnits === 0;
+      const isIdle = bin.is_idle === true && outputUnits < 1;
+      const hasProductionDespiteIdle = bin.is_idle === true && outputUnits >= 1;
+      const isLowOutput = hasProductionDespiteIdle || (typeof bin.efficiency_percent !== "number" || !Number.isFinite(bin.efficiency_percent)) && hasExpected && outputUnits < expectedOutputUnits || !isZeroOutput && typeof bin.efficiency_percent === "number" && Number.isFinite(bin.efficiency_percent) && bin.efficiency_percent < 80;
+      return {
+        id: `${bin.offset_seconds}-${bin.duration_seconds}`,
+        leftPercent: bin.leftPercent,
+        widthPercent: bin.widthPercent,
+        heightPercent: isZeroOutput ? 18 : Math.max(8, Math.min(scale2, 1) * 100),
+        tone: isIdle ? "idle" : isZeroOutput ? "zero" : isLowOutput ? "low" : "normal",
+        outputUnits
       };
     });
-  }, [duration, timelineAnnotations, timelineBins]);
-  const transitionMarkers = useMemo(() => {
-    if (timelineBins.length < 2 || duration <= 0) {
+  }, [duration, timelineBins]);
+  const lowOutputRanges = useMemo(() => {
+    if (!timelineBins.length || duration <= 0) {
       return [];
     }
+    const ranges = [];
     const orderedBins = timelineBins.slice().sort((left, right) => left.offset_seconds - right.offset_seconds);
-    return orderedBins.slice(1).map((bin, index) => {
-      const previousBin = orderedBins[index];
-      const fromOutputUnits = getBinOutputUnits(previousBin);
-      const toOutputUnits = getBinOutputUnits(bin);
-      const hasOutputValues = fromOutputUnits !== null && toOutputUnits !== null && fromOutputUnits > 0;
-      const fromEfficiency = previousBin.efficiency_percent;
-      const toEfficiency = bin.efficiency_percent;
-      const hasEfficiencyValues = typeof fromEfficiency === "number" && typeof toEfficiency === "number" && Number.isFinite(fromEfficiency) && Number.isFinite(toEfficiency) && fromEfficiency > 0;
-      if (!hasOutputValues && !hasEfficiencyValues) {
-        return null;
+    orderedBins.forEach((bin) => {
+      const actualOutputUnits = getBinOutputUnits(bin);
+      const isIdle = bin.is_idle === true && (actualOutputUnits === null || actualOutputUnits < 1);
+      const hasProductionDespiteIdle = bin.is_idle === true && actualOutputUnits !== null && actualOutputUnits >= 1;
+      const isZeroOutput = actualOutputUnits === 0;
+      const expectedOutputUnits = getExpectedOutputUnits(bin);
+      const isBelowExpectedOutput = (typeof bin.efficiency_percent !== "number" || !Number.isFinite(bin.efficiency_percent)) && expectedOutputUnits !== null && expectedOutputUnits > 0 && actualOutputUnits !== null && actualOutputUnits < expectedOutputUnits;
+      const isLowEfficiency = hasProductionDespiteIdle || isBelowExpectedOutput || !isZeroOutput && typeof bin.efficiency_percent === "number" && Number.isFinite(bin.efficiency_percent) && bin.efficiency_percent < 80;
+      if (!isIdle && !isZeroOutput && !isLowEfficiency) {
+        return;
       }
-      const fromValue = hasOutputValues ? fromOutputUnits : fromEfficiency;
-      const toValue2 = hasOutputValues ? toOutputUnits : toEfficiency;
-      const relativeDrop = (fromValue - toValue2) / fromValue;
-      if (relativeDrop <= 0.5) {
-        return null;
+      const rangeKind = isIdle ? "idle" : isZeroOutput ? "zero" : "low";
+      const binStart = Math.max(0, bin.offset_seconds);
+      const binEnd = Math.min(duration, binStart + Math.max(0, bin.duration_seconds));
+      if (binEnd <= binStart) {
+        return;
       }
-      const transitionOffset = Math.min(Math.max(bin.offset_seconds, 0), duration);
+      const outputShortfallUnits = expectedOutputUnits !== null && actualOutputUnits !== null ? Math.max(0, expectedOutputUnits - actualOutputUnits) : 0;
+      const currentRange = ranges[ranges.length - 1];
+      if (currentRange && currentRange.kind === rangeKind && binStart <= currentRange.endSeconds + 1) {
+        currentRange.endSeconds = Math.max(currentRange.endSeconds, binEnd);
+        currentRange.binCount += 1;
+        currentRange.idleBinCount += isIdle ? 1 : 0;
+        currentRange.zeroBinCount += isZeroOutput ? 1 : 0;
+        currentRange.durationSeconds += binEnd - binStart;
+        currentRange.outputShortfallUnits += outputShortfallUnits;
+        return;
+      }
+      ranges.push({
+        startSeconds: binStart,
+        endSeconds: binEnd,
+        kind: rangeKind,
+        binCount: 1,
+        idleBinCount: isIdle ? 1 : 0,
+        zeroBinCount: isZeroOutput ? 1 : 0,
+        durationSeconds: binEnd - binStart,
+        outputShortfallUnits
+      });
+    });
+    const labelRangeIndexes = ranges.map((range, index) => ({ range, index })).sort((left, right) => {
+      const issuePriority = (range) => range.idleBinCount === range.binCount ? 2 : range.zeroBinCount === range.binCount ? 1 : 0;
+      const priorityDiff = issuePriority(right.range) - issuePriority(left.range);
+      if (priorityDiff !== 0) {
+        return priorityDiff;
+      }
+      const durationDiff = right.range.durationSeconds - left.range.durationSeconds;
+      if (durationDiff !== 0) {
+        return durationDiff;
+      }
+      const shortfallDiff = right.range.outputShortfallUnits - left.range.outputShortfallUnits;
+      if (shortfallDiff !== 0) {
+        return shortfallDiff;
+      }
+      return left.range.startSeconds - right.range.startSeconds;
+    }).slice(0, 3).reduce((set, item) => {
+      set.add(item.index);
+      return set;
+    }, /* @__PURE__ */ new Set());
+    return ranges.map((range, index) => {
+      const isZeroOutputRange = range.zeroBinCount === range.binCount;
+      const isIdleRange = range.idleBinCount === range.binCount;
+      const leftPercent = getPercentage(range.startSeconds, duration);
+      const widthPercent = Math.max(getPercentage(range.endSeconds - range.startSeconds, duration), 0.5);
       return {
-        offsetSeconds: transitionOffset,
-        leftPercent: getPercentage(transitionOffset, duration),
-        fromValue,
-        toValue: toValue2,
-        relativeDrop,
-        fromOutputUnits,
-        toOutputUnits,
-        source: hasOutputValues ? "output" : "efficiency",
-        absoluteDrop: fromValue - toValue2
+        id: `${range.startSeconds}-${range.endSeconds}`,
+        startSeconds: range.startSeconds,
+        endSeconds: range.endSeconds,
+        leftPercent,
+        widthPercent,
+        label: isIdleRange ? "Idle" : isZeroOutputRange ? "0 units" : "Low output",
+        kind: range.kind,
+        isIdleRange,
+        isZeroOutputRange,
+        durationSeconds: range.durationSeconds,
+        outputShortfallUnits: range.outputShortfallUnits,
+        showLabel: labelRangeIndexes.has(index) && widthPercent >= 4 && range.durationSeconds >= 60
       };
-    }).filter((marker) => Boolean(marker)).sort((left, right) => {
-      const relativeDiff = right.relativeDrop - left.relativeDrop;
-      if (relativeDiff !== 0) {
-        return relativeDiff;
-      }
-      const outputDiff = right.absoluteDrop - left.absoluteDrop;
-      if (outputDiff !== 0) {
-        return outputDiff;
-      }
-      return left.offsetSeconds - right.offsetSeconds;
-    }).slice(0, 3).map((marker, index) => ({
-      ...marker,
-      rank: index + 1
-    }));
+    });
   }, [duration, timelineBins]);
-  worstMinuteMarkers[0] || null;
   const updateHoveredTimelineBin = useCallback((clientX) => {
     if (!hasTimelineAnnotations || !progressTrackRef.current || duration <= 0) {
       setHoveredTimelineBin(null);
+      setTooltipAnchorPercent(50);
+      setTooltipPointerPercent(50);
       return;
     }
     const rect = progressTrackRef.current.getBoundingClientRect();
     if (!rect.width) {
       setHoveredTimelineBin(null);
+      setTooltipAnchorPercent(50);
+      setTooltipPointerPercent(50);
       return;
     }
     const pct = Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1);
     const hoverTime = pct * duration;
     const nextBin = timelineBins.find((bin) => hoverTime >= bin.offset_seconds && hoverTime <= bin.offset_seconds + bin.duration_seconds) || null;
     setHoveredTimelineBin(nextBin);
+    const rawAnchorPercent = nextBin ? nextBin.leftPercent + nextBin.widthPercent / 2 : pct * 100;
+    const clampedAnchorPercent = Math.min(90, Math.max(10, rawAnchorPercent));
+    setTooltipAnchorPercent(clampedAnchorPercent);
+    setTooltipPointerPercent(Math.min(92, Math.max(8, 50 + (rawAnchorPercent - clampedAnchorPercent) * 7.5)));
   }, [duration, hasTimelineAnnotations, timelineBins]);
   const handleProgressMouseMove = useCallback((e) => {
     updateHoveredTimelineBin(e.clientX);
@@ -42169,7 +42255,7 @@ var VideoControls = ({
           "div",
           {
             ref: progressTrackRef,
-            className: "relative z-10 h-1 mb-4 group cursor-pointer",
+            className: "relative z-10 h-7 mb-4 group cursor-pointer",
             onMouseEnter: () => setIsHoveringProgressBar(true),
             onMouseMove: handleProgressMouseMove,
             onMouseLeave: () => {
@@ -42178,8 +42264,60 @@ var VideoControls = ({
             },
             onPointerDown: handlePointerDown,
             children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute -top-4 bottom-0 left-0 right-0 z-20" }),
-              /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 bottom-0 bg-white/20 rounded-full overflow-hidden z-0", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "absolute -top-5 -bottom-1 left-0 right-0 z-20" }),
+              outputBars.length > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": "output-bar-layer",
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute left-0 right-0 top-0 z-[2] h-3.5",
+                  children: outputBars.map((bar) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-testid": "output-minute-bar",
+                      "data-tone": bar.tone,
+                      className: "absolute bottom-0 rounded-sm",
+                      style: {
+                        left: `${bar.leftPercent}%`,
+                        width: `${Math.max(bar.widthPercent, 0.45)}%`,
+                        height: `${bar.heightPercent}%`,
+                        backgroundColor: bar.tone === "zero" ? "rgba(239, 68, 68, 0.78)" : bar.tone === "idle" ? "rgba(168, 85, 247, 0.70)" : bar.tone === "low" ? "rgba(248, 113, 113, 0.56)" : "rgba(255, 255, 255, 0.46)"
+                      }
+                    },
+                    bar.id
+                  ))
+                }
+              ),
+              lowOutputRanges.map((range) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": "low-output-range",
+                  "data-kind": range.kind,
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute top-[19px] z-[1] h-3 -translate-y-1/2 rounded-full border",
+                  style: {
+                    left: `${range.leftPercent}%`,
+                    width: `${range.widthPercent}%`,
+                    backgroundColor: range.isIdleRange ? "rgba(168, 85, 247, 0.24)" : range.isZeroOutputRange ? "rgba(239, 68, 68, 0.38)" : "rgba(248, 113, 113, 0.24)",
+                    borderColor: range.isIdleRange ? "rgba(216, 180, 254, 0.32)" : range.isZeroOutputRange ? "rgba(252, 165, 165, 0.35)" : "rgba(254, 202, 202, 0.28)"
+                  }
+                },
+                range.id
+              )),
+              !hoveredTimelineBin && lowOutputRanges.filter((range) => range.showLabel).map((range) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": "low-output-range-label",
+                  "data-kind": range.kind,
+                  className: `pointer-events-none absolute bottom-full z-[35] mb-1 -translate-x-1/2 rounded-md border px-1.5 py-0.5 text-[10px] font-semibold leading-none shadow-sm ${range.isIdleRange ? "border-violet-200/35 bg-violet-950/75 text-violet-50" : "border-red-200/30 bg-red-950/75 text-red-50"}`,
+                  style: {
+                    left: `${Math.min(98, Math.max(2, range.leftPercent + range.widthPercent / 2))}%`
+                  },
+                  children: range.label
+                },
+                `${range.id}-label`
+              )),
+              /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-[19px] h-1 -translate-y-1/2 bg-white/20 rounded-full overflow-hidden z-10", children: /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "absolute top-0 left-0 bottom-0 bg-white/40 transition-all duration-200",
@@ -42189,7 +42327,7 @@ var VideoControls = ({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute top-0 left-0 bottom-0 bg-[#007bff] transition-all duration-75 z-10",
+                  className: "absolute left-0 top-[19px] h-1 -translate-y-1/2 bg-[#007bff] transition-all duration-75 z-20",
                   style: { width: `${progressPercent}%`, backgroundColor: progressColor },
                   children: /* @__PURE__ */ jsx(
                     "div",
@@ -42216,36 +42354,48 @@ var VideoControls = ({
                   onTouchStart: handleSeekStart,
                   onTouchEnd: handleSeekEnd,
                   onPointerDown: handlePointerDown,
-                  className: "absolute left-0 right-0 top-[-12px] bottom-0 w-full h-auto opacity-0 cursor-pointer z-30 margin-0 padding-0"
+                  className: "absolute left-0 right-0 top-[-12px] bottom-[-4px] w-full h-auto opacity-0 cursor-pointer z-40 margin-0 padding-0"
                 }
               ),
-              hasTimelineAnnotations && transitionMarkers.map((marker) => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": marker.source === "output" ? `Output drop marker ${marker.rank}: output ${formatCompactNumber(marker.fromValue)} to ${formatCompactNumber(marker.toValue)} (${Math.round(marker.relativeDrop * 100)}% drop)` : `Output drop marker ${marker.rank}: efficiency ${Math.round(marker.fromValue)}% to ${Math.round(marker.toValue)}% (${Math.round(marker.relativeDrop * 100)}% drop)`,
-                  title: marker.source === "output" ? `Output drop: ${formatCompactNumber(marker.fromValue)} to ${formatCompactNumber(marker.toValue)}` : `Output drop: ${Math.round(marker.fromValue)}% to ${Math.round(marker.toValue)}%`,
-                  onPointerDownCapture: (e) => handleTimelineMarkerPointerDown(e, marker.offsetSeconds),
-                  onMouseDownCapture: (e) => handleTimelineMarkerMouseDown(e, marker.offsetSeconds),
-                  onClickCapture: (e) => handleTimelineMarkerClick(e, marker.offsetSeconds),
-                  className: "absolute top-1/2 -translate-y-1/2 z-[70] flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-white bg-sky-500 p-0 text-center text-[9px] font-bold leading-none text-white shadow hover:bg-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-200",
-                  style: { left: `calc(${marker.leftPercent}% - 10px)`, zIndex: 70, pointerEvents: "auto" },
-                  children: marker.rank
-                },
-                `${marker.rank}-${marker.offsetSeconds}`
-              )),
-              hasTimelineAnnotations && hoveredTimelineBin && /* @__PURE__ */ jsxs(
+              hasTimelineAnnotations && hoveredTimelineBin && /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute bottom-full z-50 mb-2 -translate-x-1/2 rounded bg-slate-900 px-2 py-1 text-[11px] font-semibold text-white shadow-lg",
-                  style: { left: `${hoveredTimelineBin.leftPercent + hoveredTimelineBin.widthPercent / 2}%` },
-                  children: [
-                    hoveredTimelineBin.clockLabel || formatTime2(hoveredTimelineBin.offset_seconds),
-                    " | ",
-                    hoveredTimelineBin.efficiencyLabel,
-                    hoveredTimelineBin.outputLabel ? ` | ${hoveredTimelineBin.outputLabel}` : "",
-                    hoveredTimelineBin.explanationLabel ? ` | ${hoveredTimelineBin.explanationLabel}` : ""
-                  ]
+                  "data-testid": "tooltip-card",
+                  className: "absolute bottom-full z-50 mb-5 min-w-[146px] -translate-x-1/2 whitespace-nowrap rounded-lg border border-slate-500/70 bg-[#0b101b]/95 px-3 py-2.5 text-left text-white shadow-[0_16px_36px_rgba(0,0,0,0.48)] backdrop-blur",
+                  style: { left: `${tooltipAnchorPercent}%` },
+                  children: (() => {
+                    const outputParts = getTooltipOutputParts(hoveredTimelineBin.outputLabel, hoveredTimelineBin.efficiencyLabel);
+                    const isIdleReason = hoveredTimelineBin.tooltipReasonLabel === "Idle";
+                    const isOutputTooltip = outputParts.label === "Output";
+                    return /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium leading-none text-slate-300", children: hoveredTimelineBin.clockLabel || formatTime2(hoveredTimelineBin.offset_seconds) }),
+                      /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-baseline gap-1 text-[15px] font-bold leading-none tracking-[-0.01em]", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-white", children: outputParts.label }),
+                        isOutputTooltip ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("span", { "data-testid": "tooltip-actual-output", className: "tabular-nums text-red-400", children: outputParts.actual }),
+                          outputParts.expected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx("span", { className: "text-slate-100", children: "/" }),
+                            /* @__PURE__ */ jsx("span", { className: "tabular-nums text-slate-100", children: outputParts.expected })
+                          ] }) : null
+                        ] }) : /* @__PURE__ */ jsx("span", { className: "tabular-nums text-slate-100", children: outputParts.fallbackValue || outputParts.actual })
+                      ] }),
+                      hoveredTimelineBin.tooltipReasonLabel ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center", children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `rounded-md border px-2 py-1 text-[10px] font-semibold leading-none shadow-sm ${isIdleReason ? "border-violet-300/30 bg-violet-500/20 text-violet-100" : "border-red-300/35 bg-red-500/25 text-red-50"}`,
+                          children: hoveredTimelineBin.tooltipReasonLabel
+                        }
+                      ) }) : null,
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          "data-testid": "tooltip-pointer",
+                          className: "absolute top-full h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-slate-500/70 bg-[#0b101b]/95",
+                          style: { left: `${tooltipPointerPercent}%` }
+                        }
+                      )
+                    ] });
+                  })()
                 }
               )
             ]
@@ -43812,6 +43962,19 @@ var buildLostChip = (explanation) => {
   }
   return null;
 };
+var getDriverBadgeClassName = (driverKeys) => {
+  if (driverKeys.length === 1) {
+    switch (driverKeys[0]) {
+      case "idle":
+        return "border border-violet-300/30 bg-violet-500/20 text-violet-100 ring-violet-500/20";
+      case "slow_cycle":
+        return "border border-amber-300/30 bg-amber-500/20 text-amber-100 ring-amber-500/20";
+      case "micro_stoppage":
+        return "border border-red-300/25 bg-red-500/15 text-red-100 ring-red-500/20";
+    }
+  }
+  return "border border-red-300/25 bg-red-500/15 text-red-100 ring-red-500/20";
+};
 var RedFlowDiagnosticOverlay = ({
   timeline,
   explanation,
@@ -43836,6 +43999,7 @@ var RedFlowDiagnosticOverlay = ({
   const shouldShowLostChip = driverKeys.some((driver) => driver !== "low_output");
   const chips = explanation && shouldShowLostChip ? [buildLostChip(explanation)].filter((chip) => Boolean(chip)) : [];
   const shouldShowHeadline = Boolean(summary && driverKeys.length > 0 && summary.primary_driver !== "unknown");
+  const driverBadgeClassName = getDriverBadgeClassName(driverKeys);
   const aiSummaryBullets = Array.isArray(aiSummary?.bullets) ? aiSummary.bullets.map((bullet) => String(bullet || "").trim()).filter(Boolean).slice(0, 3) : [];
   const shouldShowAiSummary = !aiSummaryError && aiSummaryBullets.length === 3;
   return /* @__PURE__ */ jsxs(
@@ -43854,9 +44018,9 @@ var RedFlowDiagnosticOverlay = ({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
             /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-white/50", children: "Reason:" }),
-            /* @__PURE__ */ jsx("span", { className: "rounded bg-red-500/10 px-2 py-1 text-[10px] font-semibold tracking-wide text-red-400 ring-1 ring-inset ring-red-500/20", children: "Low output" })
+            /* @__PURE__ */ jsx("span", { className: `rounded px-2 py-1 text-[10px] font-semibold tracking-wide ring-1 ring-inset ${driverBadgeClassName}`, children: driverLabel })
           ] })
-        ] }) : /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "rounded bg-red-500/10 px-2 py-1 text-[10px] font-semibold tracking-wide text-red-400 ring-1 ring-inset ring-red-500/20", children: driverLabel }) }),
+        ] }) : /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: `rounded px-2 py-1 text-[10px] font-semibold tracking-wide ring-1 ring-inset ${driverBadgeClassName}`, children: driverLabel }) }),
         (shouldShowAiSummary || aiSummaryLoading || chips.length > 0 || shouldShowHeadline) && /* @__PURE__ */ jsx("div", { className: "mb-4 h-px w-full bg-white/10" }),
         !shouldShowAiSummary && !aiSummaryLoading && shouldShowHeadline && summary?.headline ? /* @__PURE__ */ jsx("div", { className: "mb-3 text-[13px] font-medium leading-relaxed text-white/90", children: summary.headline }) : null,
         !shouldShowAiSummary && !aiSummaryLoading && chips.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: chips.slice(0, 3).map((chip) => /* @__PURE__ */ jsx(
@@ -43930,7 +44094,7 @@ function Skeleton({ className, ...props }) {
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React148.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React125.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -43946,7 +44110,7 @@ var SelectTrigger = React148.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -43956,7 +44120,7 @@ var SelectScrollUpButton = React148.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -43966,7 +44130,7 @@ var SelectScrollDownButton = React148.forwardRef(({ className, ...props }, ref)
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React148.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React125.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -43994,7 +44158,7 @@ var SelectContent = React148.forwardRef(({ className, children, position = "popp
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -44003,7 +44167,7 @@ var SelectLabel = React148.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React148.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React125.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -44019,7 +44183,7 @@ var SelectItem = React148.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React148.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React125.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -44645,7 +44809,7 @@ var TimePickerDropdown = ({
     )
   ] });
 };
-var SilentErrorBoundary = class extends React148__default.Component {
+var SilentErrorBoundary = class extends React125__default.Component {
   constructor(props) {
     super(props);
     this.handleClearAndReload = () => {
@@ -47365,6 +47529,7 @@ function useClipsRealtimeUpdates({
   };
 }
 var LOW_EFFICIENCY_CATEGORY_ID = "recent_flow_red_streak";
+var LOW_EFFICIENCY_AI_SUMMARY_ENABLED = process.env.NEXT_PUBLIC_LOW_EFFICIENCY_AI_SUMMARY_ENABLED === "true";
 var parseFiniteNumber2 = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -48903,12 +49068,15 @@ var BottlenecksContent = ({
   const isCurrentLowEfficiencyClip = Boolean(
     currentVideo?.type === "recent_flow_red_streak" || currentVideo?.red_flow_timeline
   );
-  const currentLowEfficiencyAiSummary = currentLowEfficiencyClipId ? lowEfficiencyAiSummaryByClipId[currentLowEfficiencyClipId] || currentVideo?.low_efficiency_ai_summary || null : null;
+  const currentLowEfficiencyAiSummary = currentLowEfficiencyClipId ? LOW_EFFICIENCY_AI_SUMMARY_ENABLED ? lowEfficiencyAiSummaryByClipId[currentLowEfficiencyClipId] || currentVideo?.low_efficiency_ai_summary || null : null : null;
   const isCurrentLowEfficiencyAiSummaryLoading = Boolean(
-    currentLowEfficiencyClipId && lowEfficiencyAiSummaryLoadingByClipId[currentLowEfficiencyClipId]
+    LOW_EFFICIENCY_AI_SUMMARY_ENABLED && currentLowEfficiencyClipId && lowEfficiencyAiSummaryLoadingByClipId[currentLowEfficiencyClipId]
   );
-  const currentLowEfficiencyAiSummaryError = currentLowEfficiencyClipId ? lowEfficiencyAiSummaryErrorByClipId[currentLowEfficiencyClipId] || null : null;
+  const currentLowEfficiencyAiSummaryError = currentLowEfficiencyClipId ? LOW_EFFICIENCY_AI_SUMMARY_ENABLED ? lowEfficiencyAiSummaryErrorByClipId[currentLowEfficiencyClipId] || null : null : null;
   useEffect(() => {
+    if (!LOW_EFFICIENCY_AI_SUMMARY_ENABLED) {
+      return;
+    }
     const clipId = currentLowEfficiencyClipId;
     if (!clipId || !isCurrentLowEfficiencyClip || !workspaceId) {
       return;
@@ -52038,8 +52206,8 @@ var IdleTimeReasonChartComponent = ({
   updateAnimation = "replay",
   variant = "pie"
 }) => {
-  const [activeData, setActiveData] = React148__default.useState([]);
-  React148__default.useEffect(() => {
+  const [activeData, setActiveData] = React125__default.useState([]);
+  React125__default.useEffect(() => {
     if (updateAnimation === "smooth") {
       setActiveData(data && data.length > 0 ? data : []);
       return;
@@ -52058,7 +52226,7 @@ var IdleTimeReasonChartComponent = ({
       setActiveData([]);
     }
   }, [data, updateAnimation]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (!data || data.length === 0) return;
     data.forEach((entry, index) => {
       if (entry.name.toLowerCase().includes("other")) {
@@ -52066,7 +52234,7 @@ var IdleTimeReasonChartComponent = ({
       }
     });
   }, [data]);
-  const pieKey = React148__default.useMemo(() => {
+  const pieKey = React125__default.useMemo(() => {
     if (updateAnimation === "smooth") {
       return "smooth";
     }
@@ -52236,7 +52404,7 @@ var IdleTimeReasonChartComponent = ({
     )
   ] });
 };
-var IdleTimeReasonChart = React148__default.memo(IdleTimeReasonChartComponent);
+var IdleTimeReasonChart = React125__default.memo(IdleTimeReasonChartComponent);
 IdleTimeReasonChart.displayName = "IdleTimeReasonChart";
 var IdleTimeReasonChart_default = IdleTimeReasonChart;
 
@@ -56763,13 +56931,13 @@ var WorkspaceCycleTimeMetricCards = ({
   liveSkuId
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
-  const activeSku = React148__default.useMemo(() => {
+  const activeSku = React125__default.useMemo(() => {
     if (skuAware && activeSkuId && skuBreakdown) {
       return skuBreakdown.find((s) => s.sku_id === activeSkuId);
     }
     return null;
   }, [skuAware, activeSkuId, skuBreakdown]);
-  const displaySku = React148__default.useMemo(() => {
+  const displaySku = React125__default.useMemo(() => {
     if (activeSku) return activeSku;
     if (skuAware && !activeSkuId && liveSkuId && skuBreakdown) {
       return skuBreakdown.find((s) => s.sku_id === liveSkuId) ?? null;
@@ -57014,7 +57182,7 @@ var arePropsEqual = (prevProps, nextProps) => {
   return prevProps.data.efficiency === nextProps.data.efficiency && prevProps.data.trend_score === nextProps.data.trend_score && prevProps.data.workspace_id === nextProps.data.workspace_id && prevProps.data.workspace_name === nextProps.data.workspace_name && prevProps.isBottleneck === nextProps.isBottleneck && prevProps.isLowEfficiency === nextProps.isLowEfficiency && prevProps.isVeryLowEfficiency === nextProps.isVeryLowEfficiency && prevLegend.green_min === nextLegend.green_min && prevLegend.green_max === nextLegend.green_max && prevLegend.yellow_min === nextLegend.yellow_min && prevLegend.yellow_max === nextLegend.yellow_max && prevLegend.red_min === nextLegend.red_min && prevLegend.red_max === nextLegend.red_max && prevLegend.critical_threshold === nextLegend.critical_threshold && // Position doesn't need deep equality check as it's generally static
   prevProps.position.id === nextProps.position.id;
 };
-var WorkspaceGridItem = React148__default.memo(({
+var WorkspaceGridItem = React125__default.memo(({
   data,
   position,
   isBottleneck = false,
@@ -57109,7 +57277,7 @@ var WorkspaceGridItem = React148__default.memo(({
   );
 }, arePropsEqual);
 WorkspaceGridItem.displayName = "WorkspaceGridItem";
-var WorkspaceGrid = React148__default.memo(({
+var WorkspaceGrid = React125__default.memo(({
   workspaces,
   blueComparisonWorkspaces,
   worstPerformanceWorkspaceIds = [],
@@ -57368,7 +57536,7 @@ var KPICard = ({
 }) => {
   useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  const trendInfo = React148__default.useMemo(() => {
+  const trendInfo = React125__default.useMemo(() => {
     let trendValue = trend || "neutral";
     if (change !== void 0 && trend === void 0) {
       trendValue = change > 0 ? "up" : change < 0 ? "down" : "neutral";
@@ -57395,7 +57563,7 @@ var KPICard = ({
     const shouldShowTrend = !(change === 0 && trend === void 0);
     return { trendValue, Icon: Icon2, colorClass, bgClass, shouldShowTrend };
   }, [trend, change]);
-  const formattedValue = React148__default.useMemo(() => {
+  const formattedValue = React125__default.useMemo(() => {
     if (title === "Quality Compliance" && typeof value === "number") {
       return value.toFixed(1);
     }
@@ -57409,7 +57577,7 @@ var KPICard = ({
     }
     return value;
   }, [value, title]);
-  const formattedChange = React148__default.useMemo(() => {
+  const formattedChange = React125__default.useMemo(() => {
     if (change === void 0 || change === 0 && !showZeroChange) return null;
     const absChange = Math.abs(change);
     return formatNumber(absChange, { minimumFractionDigits: 0, maximumFractionDigits: 1 });
@@ -57661,11 +57829,6 @@ var KPISection = memo$1(({
 }) => {
   const showSkeleton = isLoading || !kpis;
   const isUptimeMode = mode === "uptime";
-  const efficiencyOnTrack = !isUptimeMode && isEfficiencyOnTrack(kpis?.efficiency.value);
-  const outputStatus = !showSkeleton && !isUptimeMode ? {
-    tooltipText: efficiencyOnTrack ? "On Track" : "Behind",
-    positive: efficiencyOnTrack
-  } : void 0;
   if (useSrcLayout) {
     const effChange = showSkeleton ? 0 : kpis.efficiency.change ?? 0;
     const effTrend = effChange > 0 ? "up" : effChange < 0 ? "down" : "neutral";
@@ -57701,7 +57864,6 @@ var KPISection = memo$1(({
             {
               title: secondaryTitle,
               value: secondaryValue,
-              status: outputStatus,
               isLoading: showSkeleton
             }
           ) })
@@ -57732,7 +57894,7 @@ var KPISection = memo$1(({
       value: showSkeleton ? "" : `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
       change: showSkeleton ? 0 : kpis.outputProgress.change,
       suffix: void 0,
-      status: outputStatus
+      status: void 0
     }
   ];
   return /* @__PURE__ */ jsx(
@@ -57765,7 +57927,6 @@ var KPISection = memo$1(({
   if (!prevKpis && !nextKpis) return true;
   if (!prevKpis || !nextKpis) return false;
   if (prevKpis === nextKpis) return true;
-  if (isEfficiencyOnTrack(prevKpis.efficiency.value) !== isEfficiencyOnTrack(nextKpis.efficiency.value)) return false;
   if (Math.abs(prevKpis.efficiency.value - nextKpis.efficiency.value) >= 0.5) return false;
   if (prevKpis.efficiency.change !== nextKpis.efficiency.change) return false;
   if (prevKpis.underperformingWorkers.current !== nextKpis.underperformingWorkers.current || prevKpis.underperformingWorkers.total !== nextKpis.underperformingWorkers.total) return false;
@@ -58916,7 +59077,7 @@ var Breadcrumbs = ({ items }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React148__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-gray-400 dark:text-gray-500" }),
     /* @__PURE__ */ jsxs(
       "span",
@@ -59746,6 +59907,16 @@ var SideNavBar = memo$1(({
   }, [refreshAlertsSummary, showAlertsButton]);
   const settingsItems = useMemo(() => {
     const items = [
+      ...canAccessPath("/improvement-center") ? [{
+        key: "improvement-center",
+        label: "Improve",
+        icon: LightBulbIcon,
+        onClick: () => {
+          handleImprovementClick();
+          setIsSettingsOpen(false);
+        },
+        isActive: pathname === "/improvement-center" || pathname.startsWith("/improvement-center/")
+      }] : [],
       ...canAccessPath("/targets") ? [{
         key: "targets",
         label: "Targets",
@@ -59834,7 +60005,7 @@ var SideNavBar = memo$1(({
       });
     }
     return items;
-  }, [handleTargetsClick, handleProductionPlanClick, handleShiftsClick, handleTeamManagementClick, handleProfileClick, handleTicketsClick, handleClipsCostClick, handleHelpClick, pathname, ticketsEnabled, showBillingLink, canAccessPath]);
+  }, [handleImprovementClick, handleTargetsClick, handleProductionPlanClick, handleShiftsClick, handleTeamManagementClick, handleProfileClick, handleTicketsClick, handleClipsCostClick, handleHelpClick, pathname, ticketsEnabled, showBillingLink, canAccessPath]);
   const handleLogout = useCallback(async () => {
     setIsSettingsOpen(false);
     try {
@@ -59853,7 +60024,6 @@ var SideNavBar = memo$1(({
   const liveButtonClasses = useMemo(() => getButtonClasses("/live-monitor"), [getButtonClasses]);
   const leaderboardButtonClasses = useMemo(() => getButtonClasses("/leaderboard"), [getButtonClasses]);
   const kpisButtonClasses = useMemo(() => getButtonClasses("/kpis"), [getButtonClasses]);
-  const improvementButtonClasses = useMemo(() => getButtonClasses("/improvement-center"), [getButtonClasses]);
   useMemo(() => getButtonClasses("/supervisor-management"), [getButtonClasses]);
   const skusButtonClasses = useMemo(() => getButtonClasses("/skus"), [getButtonClasses]);
   const healthButtonClasses = useMemo(() => getButtonClasses("/health"), [getButtonClasses]);
@@ -59941,21 +60111,6 @@ var SideNavBar = memo$1(({
           ]
         }
       ),
-      canAccessPath("/improvement-center") && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: handleImprovementClick,
-          className: improvementButtonClasses,
-          "aria-label": "Improvement Center",
-          tabIndex: 0,
-          role: "tab",
-          "aria-selected": isPathActive("/improvement-center"),
-          children: [
-            /* @__PURE__ */ jsx(LightBulbIcon, { className: "w-5 h-5 mb-1" }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight text-center", children: "Improve" })
-          ]
-        }
-      ),
       showSupervisorManagement,
       skuEnabled && canAccessPath("/skus") && /* @__PURE__ */ jsxs(
         "button",
@@ -60073,18 +60228,6 @@ var SideNavBar = memo$1(({
             ]
           }
         ),
-        canAccessPath("/improvement-center") && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: handleMobileNavClick(handleImprovementClick),
-            className: getMobileButtonClass("/improvement-center"),
-            "aria-label": "Improvement Center",
-            children: [
-              /* @__PURE__ */ jsx(LightBulbIcon, { className: getIconClass("/improvement-center") }),
-              /* @__PURE__ */ jsx("span", { className: "text-base font-medium", children: "Improve" })
-            ]
-          }
-        ),
         showSupervisorManagement,
         skuEnabled && canAccessPath("/skus") && /* @__PURE__ */ jsxs(
           "button",
@@ -60114,6 +60257,18 @@ var SideNavBar = memo$1(({
       /* @__PURE__ */ jsxs("div", { className: "mt-8 pt-6 border-t border-gray-100", children: [
         /* @__PURE__ */ jsx("h3", { className: "px-5 mb-3 text-[10px] font-bold text-gray-400 uppercase tracking-widest", children: "Settings & Support" }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          canAccessPath("/improvement-center") && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: handleMobileNavClick(handleImprovementClick),
+              className: getMobileButtonClass("/improvement-center"),
+              "aria-label": "Improvement Center",
+              children: [
+                /* @__PURE__ */ jsx(LightBulbIcon, { className: getIconClass("/improvement-center") }),
+                /* @__PURE__ */ jsx("span", { className: "text-base font-medium", children: "Improve" })
+              ]
+            }
+          ),
           canAccessPath("/targets") && /* @__PURE__ */ jsxs(
             "button",
             {
@@ -60232,12 +60387,12 @@ var SideNavBar = memo$1(({
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `md:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-40 transition-opacity duration-300 ease-in-out ${isMobileMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
+          className: `md:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-[190] transition-opacity duration-300 ease-in-out ${isMobileMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
           onClick: onMobileMenuClose,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ jsxs("aside", { className: `md:hidden fixed inset-y-0 left-0 w-72 xs:w-80 bg-white shadow-2xl flex flex-col z-50 transform transition-transform duration-300 ease-in-out ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}`, children: [
+      /* @__PURE__ */ jsxs("aside", { className: `md:hidden fixed inset-y-0 left-0 w-72 xs:w-80 bg-white shadow-2xl flex flex-col z-[200] transform transition-transform duration-300 ease-in-out ${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}`, children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-white", children: [
           /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Logo, { className: "w-11 h-11 object-contain" }) }),
           /* @__PURE__ */ jsx(
@@ -60440,7 +60595,7 @@ var AwardBadge = ({
 }) => {
   const styles2 = getBadgeStyles(type);
   const Icon2 = CustomIcon || getDefaultIcon(type);
-  const randomDelay = React148__default.useMemo(() => Math.random() * 2, []);
+  const randomDelay = React125__default.useMemo(() => Math.random() * 2, []);
   const floatingAnimation = {
     animate: {
       y: [0, -10, 0],
@@ -67356,7 +67511,7 @@ var HOME_DISPLAY_MODE_OPTIONS = [
   {
     id: "worst_workstations",
     label: "Overall Underperformers",
-    description: "Lowest performers based on full day efficiency"
+    description: "Highlights the poorest performers of the day"
   }
 ];
 var getHomeDisplayModeLabel = (displayMode) => HOME_DISPLAY_MODE_OPTIONS.find((option) => option.id === displayMode)?.label || "Default";
@@ -68624,10 +68779,6 @@ function HomeView({
       selection_mode: isAllLinesSelection(normalizedLineIds) ? "all" : normalizedLineIds.length === 1 ? "single" : "custom",
       line_name: getLineSelectionLabel(normalizedLineIds)
     });
-    trackCoreEvent("Dashboard Filter Selected", {
-      filter_type: "Line Filter",
-      filter_value: getLineSelectionLabel(normalizedLineIds)
-    });
   }, [factoryViewId, getLineSelectionLabel, getTrackedLineScope, selectedLineIds, selectedLineIdsKey, visibleLineIds]);
   useCallback(() => {
     updateSelectedLineIds(visibleLineIds);
@@ -68676,7 +68827,20 @@ function HomeView({
         "button",
         {
           type: "button",
-          onClick: () => setIsLineSelectorOpen((previous) => !previous),
+          onClick: () => {
+            const willOpen = !isLineSelectorOpen;
+            setIsLineSelectorOpen(willOpen);
+            if (willOpen) {
+              trackCoreEvent("Monitor Line Selector Menu Opened", {
+                selection_source: "home_line_selector",
+                current_display_mode: displayMode,
+                current_display_mode_label: getHomeDisplayModeLabel(displayMode),
+                selected_line_ids: selectedLineIds,
+                selected_line_count: selectedLineIds.length,
+                is_all_lines: isAllLinesSelection(selectedLineIds)
+              });
+            }
+          },
           className: "flex min-w-[180px] items-center justify-between gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-left text-sm font-medium shadow-sm transition-colors hover:bg-slate-50 text-slate-700",
           "aria-haspopup": "menu",
           "aria-expanded": isLineSelectorOpen,
@@ -68791,7 +68955,17 @@ function HomeView({
         type: "button",
         onClick: () => {
           setIsLineSelectorOpen(false);
-          setIsDisplayModeMenuOpen((previous) => !previous);
+          const willOpen = !isDisplayModeMenuOpen;
+          setIsDisplayModeMenuOpen(willOpen);
+          if (willOpen) {
+            trackCoreEvent("Monitor Display Filter Menu Opened", {
+              selection_source: "home_display_filter",
+              current_display_mode: displayMode,
+              current_display_mode_label: getHomeDisplayModeLabel(displayMode),
+              selected_line_ids: selectedLineIds,
+              selected_line_count: selectedLineIds.length
+            });
+          }
         },
         className: `inline-flex h-9 w-9 items-center justify-center rounded-md border shadow-sm transition-colors ${displayMode === "all" ? "border-slate-200 bg-white text-slate-500 hover:bg-slate-50 hover:text-slate-700" : "border-blue-200 bg-blue-50 text-blue-600 hover:bg-blue-100"}`,
         "aria-haspopup": "menu",
@@ -68817,6 +68991,12 @@ function HomeView({
               "aria-checked": isSelected,
               onClick: () => {
                 const nextSelectedLineIds = option.id === "slideshow" ? visibleLineIds : selectedLineIds;
+                const selectedViewProperties = {
+                  view_type: option.id,
+                  view_label: option.label,
+                  is_slideshow: option.id === "slideshow",
+                  selection_source: "home_display_filter"
+                };
                 setDisplayMode(option.id);
                 if (option.id === "slideshow") {
                   updateSelectedLineIds(visibleLineIds);
@@ -68825,14 +69005,22 @@ function HomeView({
                 trackCoreEvent("Monitor Display Filter Selected", {
                   filter_name: option.label,
                   filter_id: option.id,
+                  ...selectedViewProperties,
                   previous_display_mode: displayMode,
+                  previous_display_mode_label: getHomeDisplayModeLabel(displayMode),
                   selected_line_ids: nextSelectedLineIds,
                   selected_line_count: nextSelectedLineIds.length,
                   highlighted_workspace_count: option.id === "worst_workstations" ? worstPerformanceWorkspaceIds.length : 0
                 });
-                trackCoreEvent("Dashboard Filter Selected", {
-                  filter_type: "Display Mode",
-                  filter_value: option.label
+                trackCoreEvent(`Display View Selected: ${option.label}`, {
+                  mode_id: option.id,
+                  mode_label: option.label,
+                  previous_display_mode: displayMode,
+                  previous_display_mode_label: getHomeDisplayModeLabel(displayMode),
+                  ...selectedViewProperties,
+                  selected_line_ids: nextSelectedLineIds,
+                  selected_line_count: nextSelectedLineIds.length,
+                  highlighted_workspace_count: option.id === "worst_workstations" ? worstPerformanceWorkspaceIds.length : 0
                 });
               },
               className: "flex w-full items-start px-4 py-2.5 text-left transition-colors hover:bg-slate-50",
@@ -69044,7 +69232,7 @@ function HomeView({
               animate: { opacity: 1, scale: 1 },
               transition: { duration: 0.3 },
               className: "h-full",
-              children: React148__default.createElement(WorkspaceGrid, {
+              children: React125__default.createElement(WorkspaceGrid, {
                 workspaces: workspaceMetricsWithBreakState,
                 blueComparisonWorkspaces: currentBlueComparisonWorkspaceMetrics || workspaceMetricsWithBreakState,
                 worstPerformanceWorkspaceIds: activeWorstPerformanceWorkspaceIds,
@@ -69080,7 +69268,7 @@ function HomeView({
               animate: { opacity: 1, scale: 1 },
               transition: { duration: 0.3 },
               className: "h-full",
-              children: React148__default.createElement(WorkspaceGrid, {
+              children: React125__default.createElement(WorkspaceGrid, {
                 workspaces: [],
                 // Show empty grid while loading
                 blueComparisonWorkspaces: [],
@@ -69130,7 +69318,7 @@ function HomeView({
             contentVariant: "plain"
           }
         ),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: showAllGreenCelebration ? /* @__PURE__ */ jsxs(React148__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: showAllGreenCelebration ? /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
           /* @__PURE__ */ jsx(
             motion.div,
             {
@@ -69209,7 +69397,7 @@ function HomeView({
             "all-green-center-toast"
           )
         ] }, "all-green-celebration") : null }),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: greenStreakMilestoneBanner ? /* @__PURE__ */ jsxs(React148__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: greenStreakMilestoneBanner ? /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
           /* @__PURE__ */ jsx(
             motion.div,
             {
@@ -69303,7 +69491,7 @@ function HomeView({
     }
   );
 }
-var AuthenticatedHomeView = withAuth(React148__default.memo(HomeView));
+var AuthenticatedHomeView = withAuth(React125__default.memo(HomeView));
 var HomeView_default = HomeView;
 function withWorkspaceDisplayNames(Component3, options = {}) {
   const {
@@ -72567,6 +72755,12 @@ var KPIDetailView_default = KPIDetailViewWithDisplayNames;
 var isNonEmptyString2 = (value) => typeof value === "string" && value.trim().length > 0;
 var KPI_FACTORY_QUERY_PARAM = "factory_id";
 var KPI_FACTORY_AREA_QUERY_PARAM = "factory_area_id";
+var LINE_STATUS_FILTER_OPTIONS = [
+  { id: "attention", label: "Attention" },
+  { id: "warning", label: "Warning" },
+  { id: "stable", label: "Stable" }
+];
+var DEFAULT_LINE_STATUS_FILTERS = LINE_STATUS_FILTER_OPTIONS.map((option) => option.id);
 var getSingleQueryValue = (value) => typeof value === "string" && value.length > 0 ? value : void 0;
 var resolveCompanyId2 = (...candidates) => candidates.find(isNonEmptyString2);
 var parseTimeToMinutes4 = (value) => {
@@ -72724,19 +72918,36 @@ var LinesLeaderboard = ({
   timezone: _timezone,
   isHistoricalDaily
 }) => {
+  const { user } = useAuth();
+  const isSupervisor = user?.role_level === "supervisor";
+  const isCurrentUserHighlightReady = timeRange === "today" ? !isLoadingToday : !isLoadingMonthly;
+  const isCurrentUserRow = React125__default.useCallback((item) => {
+    if (!isCurrentUserHighlightReady) return false;
+    if (!isSupervisor || !user?.id) return false;
+    if (!item.supervisors) return false;
+    return item.supervisors.some((s) => s.userId === user.id);
+  }, [isCurrentUserHighlightReady, isSupervisor, user?.id]);
+  const renderCurrentUserBadge = () => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] text-blue-700 shadow-sm",
+      "aria-label": "Your leaderboard position",
+      children: "You"
+    }
+  );
   const formatEfficiency = (value) => typeof value === "number" && Number.isFinite(value) ? `${value.toFixed(1)}%` : "--";
-  const assignedLineIdSet = React148__default.useMemo(
+  const assignedLineIdSet = React125__default.useMemo(
     () => new Set(assignedLineIds || []),
     [assignedLineIds]
   );
-  const canClickLine = React148__default.useCallback(
+  const canClickLine = React125__default.useCallback(
     (lineId) => {
       if (!assignedLineIds) return true;
       return assignedLineIdSet.has(lineId);
     },
     [assignedLineIds, assignedLineIdSet]
   );
-  const handleTimeRangeChange = React148__default.useCallback((newRange) => {
+  const handleTimeRangeChange = React125__default.useCallback((newRange) => {
     if (newRange === timeRange) return;
     trackCoreEvent("Leaderboard Time Range Changed", {
       from_range: timeRange,
@@ -72747,11 +72958,11 @@ var LinesLeaderboard = ({
     });
     setTimeRange(newRange);
   }, [timeRange, lines.length, monthlyEfficiencyByLineId, setTimeRange]);
-  const canClickLeaderboardRow = React148__default.useCallback(
+  const canClickLeaderboardRow = React125__default.useCallback(
     (item) => item.rowType === "line" && !!item.line && canClickLine(item.line.id),
     [canClickLine]
   );
-  const handleLeaderboardLineClick = React148__default.useCallback((item, clickSource) => {
+  const handleLeaderboardLineClick = React125__default.useCallback((item, clickSource) => {
     if (!canClickLeaderboardRow(item) || !item.line) return;
     trackCoreEvent("Leaderboard Line Clicked", {
       line_id: item.line.id,
@@ -72765,8 +72976,8 @@ var LinesLeaderboard = ({
     });
     onLineClick(item.line);
   }, [canClickLeaderboardRow, onLineClick, timeRange]);
-  const viewLoadedTrackedRef = React148__default.useRef(null);
-  const leaderboardData = React148__default.useMemo(() => {
+  const viewLoadedTrackedRef = React125__default.useRef(null);
+  const leaderboardData = React125__default.useMemo(() => {
     const loading = timeRange === "today" ? isLoadingToday : isLoadingMonthly;
     const efficiencyMap = timeRange === "today" ? todayEfficiencyByLineId : monthlyEfficiencyByLineId;
     const fallbackEfficiencyMap = timeRange === "today" ? dailyFallbackEfficiencyByLineId : void 0;
@@ -72810,7 +73021,7 @@ var LinesLeaderboard = ({
     isLoadingToday,
     isLoadingMonthly
   ]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     const isLoading = timeRange === "today" ? isLoadingToday : isLoadingMonthly;
     const trackingKey = `${timeRange}-${leaderboardData.length}`;
     if (leaderboardData.length > 0 && !isLoading && viewLoadedTrackedRef.current !== trackingKey) {
@@ -72836,7 +73047,7 @@ var LinesLeaderboard = ({
   const countdownFormat = timeRange === "monthly" ? "days" : "clock";
   const countdownFinishedLabel = timeRange === "monthly" ? "Finished" : "Shift ended";
   const showCountdown = timeRange === "monthly" || !isHistoricalDaily;
-  const handleCountdownFinished = React148__default.useCallback(() => {
+  const handleCountdownFinished = React125__default.useCallback(() => {
     trackCoreEvent("Leaderboard Countdown Finished", {
       countdown_type: timeRange === "monthly" ? "month_end" : "shift_end",
       time_range: timeRange,
@@ -72863,7 +73074,7 @@ var LinesLeaderboard = ({
         return "bg-white border-gray-100";
     }
   };
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     const style = document.createElement("style");
     style.innerHTML = `
       @keyframes float {
@@ -72929,6 +73140,7 @@ var LinesLeaderboard = ({
         const isSecond = item.rank === 2;
         item.rank === 3;
         const isClickable = canClickLeaderboardRow(item);
+        const isOwnSupervisorRow = isCurrentUserRow(item);
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -72965,22 +73177,25 @@ var LinesLeaderboard = ({
                   /* @__PURE__ */ jsx("div", { className: `absolute -bottom-2 md:-bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 md:w-8 md:h-8 xl:w-10 xl:h-10 rounded-full flex items-center justify-center text-[10px] md:text-xs lg:text-sm xl:text-base font-extrabold text-white shadow-lg ${isFirst ? "bg-gradient-to-br from-yellow-400 to-yellow-600 ring-2 md:ring-4 ring-yellow-50" : isSecond ? "bg-gradient-to-br from-gray-400 to-gray-600 ring-2 md:ring-4 ring-gray-50" : "bg-gradient-to-br from-orange-400 to-orange-600 ring-2 md:ring-4 ring-orange-50"}`, children: item.rank })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: `flex flex-col items-center w-32 md:w-40 lg:w-48 xl:w-60 px-2 md:px-3 xl:px-4 pb-3 md:pb-4 pt-8 md:pt-10 rounded-2xl border bg-gradient-to-b shadow-2xl backdrop-blur-sm ${getRankColor(item.rank)} ${isFirst ? "h-44 md:h-52 lg:h-60 xl:h-64" : isSecond ? "h-36 md:h-44 lg:h-52 xl:h-56" : "h-28 md:h-36 lg:h-44 xl:h-48"}`,
-                  children: /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center w-full", children: [
-                    /* @__PURE__ */ jsx("h3", { className: `font-bold text-gray-900 text-center line-clamp-1 mb-1 ${isFirst ? "text-xs md:text-sm lg:text-base xl:text-lg" : "text-[10px] md:text-xs lg:text-sm xl:text-base"}`, children: item.supervisorName }),
-                    /* @__PURE__ */ jsx("p", { className: `text-gray-600 text-center line-clamp-1 font-medium opacity-80 bg-white/50 px-2 md:px-3 py-0.5 rounded-full ${isFirst ? "text-[9px] md:text-[10px] lg:text-xs xl:text-sm mb-2 md:mb-3" : "text-[8px] md:text-[9px] lg:text-[10px] xl:text-xs mb-1 md:mb-2"}`, children: item.displayName }),
-                    item.rowType === "area" && /* @__PURE__ */ jsxs("span", { className: "mb-1 text-[8px] md:text-[9px] lg:text-[10px] xl:text-xs font-semibold uppercase text-gray-500", children: [
-                      item.lines.length,
-                      " lines"
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center mt-auto", children: [
-                      /* @__PURE__ */ jsx("span", { className: `font-bold uppercase tracking-widest mb-0.5 ${isFirst ? "text-yellow-700/70 text-[8px] md:text-[9px] lg:text-[10px] xl:text-xs" : isSecond ? "text-gray-600/70 text-[7px] md:text-[8px] lg:text-[9px] xl:text-[10px]" : "text-orange-700/70 text-[7px] md:text-[8px] lg:text-[9px] xl:text-[10px]"}`, children: viewType === "machine" ? "Utilization" : "Efficiency" }),
-                      /* @__PURE__ */ jsx("span", { className: `font-black tracking-tight leading-none ${isFirst ? "text-lg md:text-xl lg:text-2xl xl:text-3xl text-transparent bg-clip-text bg-gradient-to-br from-yellow-600 to-yellow-800 drop-shadow-sm" : isSecond ? "text-base md:text-lg lg:text-xl xl:text-2xl text-transparent bg-clip-text bg-gradient-to-br from-gray-600 to-gray-800 drop-shadow-sm" : "text-sm md:text-base lg:text-lg xl:text-xl text-transparent bg-clip-text bg-gradient-to-br from-orange-600 to-orange-800 drop-shadow-sm"}`, children: formatEfficiency(item.efficiency) })
+                  className: `relative flex flex-col items-center w-32 md:w-40 lg:w-48 xl:w-60 px-2 md:px-3 xl:px-4 pb-3 md:pb-4 pt-8 md:pt-10 rounded-2xl border bg-gradient-to-b shadow-2xl backdrop-blur-sm ${getRankColor(item.rank)} ${isOwnSupervisorRow ? "!border-blue-300 ring-2 ring-blue-500/20 shadow-[0_16px_45px_rgba(37,99,235,0.16)]" : ""} ${isFirst ? "h-44 md:h-52 lg:h-60 xl:h-64" : isSecond ? "h-36 md:h-44 lg:h-52 xl:h-56" : "h-28 md:h-36 lg:h-44 xl:h-48"}`,
+                  children: [
+                    isOwnSupervisorRow && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-3", children: renderCurrentUserBadge() }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center w-full", children: [
+                      /* @__PURE__ */ jsx("h3", { className: `font-bold text-gray-900 text-center line-clamp-1 mb-1 ${isFirst ? "text-xs md:text-sm lg:text-base xl:text-lg" : "text-[10px] md:text-xs lg:text-sm xl:text-base"}`, children: item.supervisorName }),
+                      /* @__PURE__ */ jsx("p", { className: `text-gray-600 text-center line-clamp-1 font-medium opacity-80 bg-white/50 px-2 md:px-3 py-0.5 rounded-full ${isFirst ? "text-[9px] md:text-[10px] lg:text-xs xl:text-sm mb-2 md:mb-3" : "text-[8px] md:text-[9px] lg:text-[10px] xl:text-xs mb-1 md:mb-2"}`, children: item.displayName }),
+                      item.rowType === "area" && /* @__PURE__ */ jsxs("span", { className: "mb-1 text-[8px] md:text-[9px] lg:text-[10px] xl:text-xs font-semibold uppercase text-gray-500", children: [
+                        item.lines.length,
+                        " lines"
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center mt-auto", children: [
+                        /* @__PURE__ */ jsx("span", { className: `font-bold uppercase tracking-widest mb-0.5 ${isFirst ? "text-yellow-700/70 text-[8px] md:text-[9px] lg:text-[10px] xl:text-xs" : isSecond ? "text-gray-600/70 text-[7px] md:text-[8px] lg:text-[9px] xl:text-[10px]" : "text-orange-700/70 text-[7px] md:text-[8px] lg:text-[9px] xl:text-[10px]"}`, children: viewType === "machine" ? "Utilization" : "Efficiency" }),
+                        /* @__PURE__ */ jsx("span", { className: `font-black tracking-tight leading-none ${isFirst ? "text-lg md:text-xl lg:text-2xl xl:text-3xl text-transparent bg-clip-text bg-gradient-to-br from-yellow-600 to-yellow-800 drop-shadow-sm" : isSecond ? "text-base md:text-lg lg:text-xl xl:text-2xl text-transparent bg-clip-text bg-gradient-to-br from-gray-600 to-gray-800 drop-shadow-sm" : "text-sm md:text-base lg:text-lg xl:text-xl text-transparent bg-clip-text bg-gradient-to-br from-orange-600 to-orange-800 drop-shadow-sm"}`, children: formatEfficiency(item.efficiency) })
+                      ] })
                     ] })
-                  ] })
+                  ]
                 }
               )
             ]
@@ -72999,11 +73214,12 @@ var LinesLeaderboard = ({
       /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-100", children: leaderboardData.map((item) => {
         const isTopThree = item.rank <= 3;
         const isClickable = canClickLeaderboardRow(item);
+        const isOwnSupervisorRow = isCurrentUserRow(item);
         return /* @__PURE__ */ jsxs(
           "tr",
           {
             onClick: () => handleLeaderboardLineClick(item, isTopThree ? "podium" : "table"),
-            className: `transition-colors ${isTopThree ? "sm:hidden" : ""} ${isClickable ? "hover:bg-gray-50 cursor-pointer group" : "cursor-not-allowed"}`,
+            className: `transition-colors ${isTopThree ? "sm:hidden" : ""} ${isOwnSupervisorRow ? "bg-blue-50/80 ring-inset ring-1 ring-blue-500/20 shadow-[inset_3px_0_0_rgba(37,99,235,0.75)]" : ""} ${isClickable ? isOwnSupervisorRow ? "hover:bg-blue-100/80 cursor-pointer group" : "hover:bg-gray-50 cursor-pointer group" : "cursor-not-allowed"}`,
             children: [
               /* @__PURE__ */ jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 text-gray-600 font-bold text-sm", children: item.rank }) }),
               /* @__PURE__ */ jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -73028,7 +73244,8 @@ var LinesLeaderboard = ({
                     item.supervisors.length - 3
                   ] })
                 ] }) : /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 overflow-hidden border border-gray-200 flex-shrink-0", children: item.supervisorImage ? /* @__PURE__ */ jsx("img", { src: item.supervisorImage, alt: item.supervisorName, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-xs font-bold", children: getInitials(item.supervisorName) }) }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: item.supervisorName })
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: item.supervisorName }),
+                isOwnSupervisorRow && renderCurrentUserBadge()
               ] }) }),
               /* @__PURE__ */ jsx("td", { className: "px-4 py-3 whitespace-nowrap text-sm text-gray-500", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
                 /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: item.displayName }),
@@ -73325,14 +73542,26 @@ var KPIsOverviewView = ({
   const [activeTab, setActiveTab] = useState("today");
   const [timeRange, setTimeRange] = useState("today");
   const [viewType, setViewType] = useState("operator");
+  const [selectedLineStatusFilters, setSelectedLineStatusFilters] = useState(DEFAULT_LINE_STATUS_FILTERS);
+  const [selectedFactoryFilters, setSelectedFactoryFilters] = useState([]);
+  const [hasUserEditedFactoryFilters, setHasUserEditedFactoryFilters] = useState(false);
+  const [todayViewLevel, setTodayViewLevel] = useState("factory");
+  const [efficiencySortDirection, setEfficiencySortDirection] = useState("desc");
   const [selectedLeaderboardDate, setSelectedLeaderboardDate] = useState("");
   const [selectedLeaderboardShiftId, setSelectedLeaderboardShiftId] = useState(0);
   const [leaderboardDailyScopeMode, setLeaderboardDailyScopeMode] = useState("live");
   const [hasHydratedLeaderboardRouteState, setHasHydratedLeaderboardRouteState] = useState(false);
   const [loading, setLoading] = useState(true);
   const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const [isViewsOpen, setIsViewsOpen] = useState(false);
+  const [isSortOpen, setIsSortOpen] = useState(false);
   const filterRef = useRef(null);
   const filterButtonRef = useRef(null);
+  const viewsRef = useRef(null);
+  const viewsButtonRef = useRef(null);
+  const sortRef = useRef(null);
+  const sortButtonRef = useRef(null);
+  const previousFactoryFilterOptionIdsRef = useRef([]);
   const [error, setError] = useState(null);
   const [todayEfficiencyByLineId, setTodayEfficiencyByLineId] = useState(/* @__PURE__ */ new Map());
   const [dailyLoading, setDailyLoading] = useState(false);
@@ -73362,36 +73591,36 @@ var KPIsOverviewView = ({
   const configuredTimezone = dbTimezone || dateTimeConfig.defaultTimezone || "UTC";
   const { startDate: monthStartDate, endDate: monthEndDateKey, monthEndDate } = getMonthDateInfo(configuredTimezone);
   const isSuperAdmin = user?.scope_mode === "SUPER_ADMIN" || !!user?.access_scope?.is_super_admin;
-  const scopedLineIds = React148__default.useMemo(
+  const scopedLineIds = React125__default.useMemo(
     () => Array.isArray(user?.access_scope?.line_ids) ? user.access_scope.line_ids.filter((lineId) => typeof lineId === "string" && lineId.length > 0) : [],
     [user?.access_scope?.line_ids]
   );
   const hasCanonicalScope = !!user?.scope_mode || !!user?.access_scope;
   const scopeRole = (user?.role_level || user?.role || "").toLowerCase();
   const isStrictLineScopedRole = scopeRole === "supervisor" || isFactoryScopedRole(scopeRole);
-  const resolvedAssignedLineIds = React148__default.useMemo(() => {
+  const resolvedAssignedLineIds = React125__default.useMemo(() => {
     if (isSuperAdmin) return [];
     if (scopedLineIds.length > 0) return scopedLineIds;
     if (lineIds && lineIds.length > 0) return lineIds;
     if (isStrictLineScopedRole && hasCanonicalScope) return [];
     return [];
   }, [isSuperAdmin, scopedLineIds, lineIds, isStrictLineScopedRole, hasCanonicalScope]);
-  const assignedLineIdSet = React148__default.useMemo(
+  const assignedLineIdSet = React125__default.useMemo(
     () => new Set(resolvedAssignedLineIds),
     [resolvedAssignedLineIds]
   );
-  const loadedLineIds = React148__default.useMemo(
+  const loadedLineIds = React125__default.useMemo(
     () => lines.map((line) => line.id).filter(Boolean),
     [lines]
   );
-  const metricsLineIds = React148__default.useMemo(() => {
+  const metricsLineIds = React125__default.useMemo(() => {
     if (isSuperAdmin) {
       return loadedLineIds.length > 0 ? loadedLineIds : lineIds ?? [];
     }
     return resolvedAssignedLineIds;
   }, [isSuperAdmin, loadedLineIds, lineIds, resolvedAssignedLineIds]);
   const assignedLineIdsForLeaderboard = isSuperAdmin ? void 0 : resolvedAssignedLineIds;
-  const leaderboardLinesForView = React148__default.useMemo(() => {
+  const leaderboardLinesForView = React125__default.useMemo(() => {
     const targetMode = viewType === "machine" ? "uptime" : "output";
     const metadataByLineId = new Map(lines.map((line) => [line.id, line]));
     return leaderboardLines.map((line) => {
@@ -73410,17 +73639,57 @@ var KPIsOverviewView = ({
       } : line;
     }).filter((line) => (line.monitoring_mode ?? "output") === targetMode);
   }, [leaderboardLines, lines, viewType]);
-  const linesForView = React148__default.useMemo(() => {
+  const linesForView = React125__default.useMemo(() => {
     const targetMode = viewType === "machine" ? "uptime" : "output";
     return lines.filter((line) => (line.monitoring_mode ?? "output") === targetMode);
   }, [lines, viewType]);
-  const relevantLinesForMode = React148__default.useMemo(() => {
+  const factoryFilterOptions = React125__default.useMemo(() => {
+    const factories = /* @__PURE__ */ new Map();
+    linesForView.forEach((line) => {
+      const factoryId = line.factory_id || "unknown-factory";
+      if (!factories.has(factoryId)) {
+        factories.set(factoryId, line.factory_name || "Factory");
+      }
+    });
+    return Array.from(factories.entries()).map(([id3, label]) => ({ id: id3, label })).sort((left, right) => left.label.localeCompare(right.label, void 0, { sensitivity: "base", numeric: true }));
+  }, [linesForView]);
+  const factoryFilterOptionIds = React125__default.useMemo(
+    () => factoryFilterOptions.map((option) => option.id),
+    [factoryFilterOptions]
+  );
+  const effectiveSelectedFactoryFilters = React125__default.useMemo(
+    () => hasUserEditedFactoryFilters ? selectedFactoryFilters : factoryFilterOptionIds,
+    [factoryFilterOptionIds, hasUserEditedFactoryFilters, selectedFactoryFilters]
+  );
+  useEffect(() => {
+    const previousFactoryFilterOptionIds = previousFactoryFilterOptionIdsRef.current;
+    if (factoryFilterOptionIds.length === 0) {
+      setHasUserEditedFactoryFilters(false);
+    }
+    setSelectedFactoryFilters((previousFilters) => {
+      if (factoryFilterOptionIds.length === 0) {
+        return previousFilters.length === 0 ? previousFilters : [];
+      }
+      if (!hasUserEditedFactoryFilters) {
+        return factoryFilterOptionIds;
+      }
+      const validFactoryIds = new Set(factoryFilterOptionIds);
+      const previousFactoryIds = new Set(previousFactoryFilterOptionIds);
+      const nextFilters = [
+        ...previousFilters.filter((factoryId) => validFactoryIds.has(factoryId)),
+        ...factoryFilterOptionIds.filter((factoryId) => !previousFactoryIds.has(factoryId))
+      ];
+      return nextFilters.length === previousFilters.length ? previousFilters : nextFilters;
+    });
+    previousFactoryFilterOptionIdsRef.current = factoryFilterOptionIds;
+  }, [factoryFilterOptionIds, hasUserEditedFactoryFilters]);
+  const relevantLinesForMode = React125__default.useMemo(() => {
     if (activeTab === "leaderboard") {
       return leaderboardLines.length > 0 ? leaderboardLines : lines;
     }
     return lines;
   }, [activeTab, leaderboardLines, lines]);
-  const { hasUptime, hasOutput } = React148__default.useMemo(() => {
+  const { hasUptime, hasOutput } = React125__default.useMemo(() => {
     let uptime = false;
     let output = false;
     for (const line of relevantLinesForMode) {
@@ -73445,18 +73714,42 @@ var KPIsOverviewView = ({
   const currentShiftDetails = getCurrentShift(configuredTimezone, shiftConfig);
   const currentShiftDate = currentShiftDetails.date;
   const currentShiftId = currentShiftDetails.shiftId;
-  const activeFiltersCount = React148__default.useMemo(() => {
+  const activeFiltersCount = React125__default.useMemo(() => {
     let count = 0;
-    if (leaderboardDailyScopeMode === "historical" && selectedLeaderboardShiftId !== currentShiftId) {
+    if (activeTab === "today" && selectedLineStatusFilters.length !== LINE_STATUS_FILTER_OPTIONS.length) {
+      count++;
+    }
+    if (activeTab === "today" && factoryFilterOptions.length > 0 && effectiveSelectedFactoryFilters.length !== factoryFilterOptions.length) {
+      count++;
+    }
+    if (activeTab === "leaderboard" && leaderboardDailyScopeMode === "historical" && selectedLeaderboardShiftId !== currentShiftId) {
       count++;
     }
     return count;
-  }, [leaderboardDailyScopeMode, selectedLeaderboardShiftId, currentShiftId]);
-  const clearFilters = React148__default.useCallback(() => {
+  }, [activeTab, selectedLineStatusFilters.length, factoryFilterOptions.length, effectiveSelectedFactoryFilters.length, leaderboardDailyScopeMode, selectedLeaderboardShiftId, currentShiftId]);
+  const activeSortCount = React125__default.useMemo(() => activeTab === "today" && efficiencySortDirection !== "desc" ? 1 : 0, [activeTab, efficiencySortDirection]);
+  const clearFilters = React125__default.useCallback(() => {
+    trackCoreEvent("Lines Overview Filters Cleared", {
+      surface: "lines_overview",
+      action: "clear_filters",
+      control_clicked: "filters",
+      option_clicked: "clear_all",
+      option_label: "Clear all",
+      source: "filters_dropdown",
+      active_tab: activeTab,
+      previous_status_filters: selectedLineStatusFilters,
+      previous_factory_filters: effectiveSelectedFactoryFilters,
+      selected_shift_id: selectedLeaderboardShiftId,
+      selected_view_level: todayViewLevel,
+      selected_sort_direction: efficiencySortDirection
+    });
+    setSelectedLineStatusFilters(DEFAULT_LINE_STATUS_FILTERS);
+    setHasUserEditedFactoryFilters(false);
+    setSelectedFactoryFilters(factoryFilterOptionIds);
     setSelectedLeaderboardShiftId(currentShiftId);
     setSelectedLeaderboardDate(currentShiftDate);
     setLeaderboardDailyScopeMode("live");
-  }, [currentShiftDate, currentShiftId]);
+  }, [activeTab, currentShiftDate, currentShiftId, effectiveSelectedFactoryFilters, efficiencySortDirection, factoryFilterOptionIds, selectedLineStatusFilters, selectedLeaderboardShiftId, todayViewLevel]);
   useEffect(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -73464,15 +73757,23 @@ var KPIsOverviewView = ({
       if (filterRef.current && !filterRef.current.contains(target)) {
         setIsFilterOpen(false);
       }
+      if (viewsButtonRef.current?.contains(target)) return;
+      if (viewsRef.current && !viewsRef.current.contains(target)) {
+        setIsViewsOpen(false);
+      }
+      if (sortButtonRef.current?.contains(target)) return;
+      if (sortRef.current && !sortRef.current.contains(target)) {
+        setIsSortOpen(false);
+      }
     };
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const shiftEndDate = React148__default.useMemo(
+  const shiftEndDate = React125__default.useMemo(
     () => getShiftEndDate(currentShiftDetails, configuredTimezone),
     [currentShiftDetails, configuredTimezone]
   );
-  const leaderboardShiftOptions = React148__default.useMemo(() => {
+  const leaderboardShiftOptions = React125__default.useMemo(() => {
     if (shiftConfig?.shifts && shiftConfig.shifts.length > 0) {
       return shiftConfig.shifts.map((shift) => ({
         id: shift.shiftId,
@@ -73489,37 +73790,42 @@ var KPIsOverviewView = ({
   const effectiveLeaderboardDate = selectedLeaderboardDate || currentShiftDate;
   const effectiveLeaderboardShiftId = Number.isFinite(selectedLeaderboardShiftId) ? selectedLeaderboardShiftId : currentShiftId;
   const isHistoricalLeaderboardDaily = activeTab === "leaderboard" && timeRange === "today" && leaderboardDailyScopeMode === "historical" && (effectiveLeaderboardDate !== currentShiftDate || effectiveLeaderboardShiftId !== currentShiftId);
-  const updateLeaderboardDate = React148__default.useCallback((dateKey) => {
+  const updateLeaderboardDate = React125__default.useCallback((dateKey) => {
     setSelectedLeaderboardDate(dateKey);
     setLeaderboardDailyScopeMode(
       dateKey === currentShiftDate && effectiveLeaderboardShiftId === currentShiftId ? "live" : "historical"
     );
   }, [currentShiftDate, currentShiftId, effectiveLeaderboardShiftId]);
-  const updateLeaderboardShiftId = React148__default.useCallback((shiftId) => {
+  const updateLeaderboardShiftId = React125__default.useCallback((shiftId) => {
     setSelectedLeaderboardShiftId(shiftId);
     setLeaderboardDailyScopeMode(
       effectiveLeaderboardDate === currentShiftDate && shiftId === currentShiftId ? "live" : "historical"
     );
   }, [currentShiftDate, currentShiftId, effectiveLeaderboardDate]);
-  const returnLeaderboardToLive = React148__default.useCallback(() => {
+  const returnLeaderboardToLive = React125__default.useCallback(() => {
     setSelectedLeaderboardDate(currentShiftDate);
     setSelectedLeaderboardShiftId(currentShiftId);
     setLeaderboardDailyScopeMode("live");
   }, [currentShiftDate, currentShiftId]);
   const selectedFactoryIdFromUrl = getSingleQueryValue(router.query[KPI_FACTORY_QUERY_PARAM]);
   const selectedFactoryAreaIdFromUrl = getSingleQueryValue(router.query[KPI_FACTORY_AREA_QUERY_PARAM]);
-  const kpiLineHierarchy = React148__default.useMemo(
+  const kpiLineHierarchy = React125__default.useMemo(
     () => buildKpiLineHierarchy(linesForView),
     [linesForView]
   );
-  const selectedFactoryNode = React148__default.useMemo(
+  const selectedFactoryNode = React125__default.useMemo(
     () => kpiLineHierarchy.showFactoryLevel && selectedFactoryIdFromUrl ? kpiLineHierarchy.factories.find((factory) => factory.id === selectedFactoryIdFromUrl) : void 0,
     [kpiLineHierarchy, selectedFactoryIdFromUrl]
   );
-  const selectedFactoryAreaNode = React148__default.useMemo(
+  const selectedFactoryAreaNode = React125__default.useMemo(
     () => selectedFactoryNode && selectedFactoryAreaIdFromUrl ? selectedFactoryNode.areas.find((area) => area.id === selectedFactoryAreaIdFromUrl) : void 0,
     [selectedFactoryNode, selectedFactoryAreaIdFromUrl]
   );
+  useEffect(() => {
+    if (!kpiLineHierarchy.showFactoryLevel && todayViewLevel !== "factory") {
+      setTodayViewLevel("factory");
+    }
+  }, [kpiLineHierarchy.showFactoryLevel, todayViewLevel]);
   useEffect(() => {
     if (!router.isReady) return;
     const tabQuery = router.query.tab;
@@ -73605,15 +73911,15 @@ var KPIsOverviewView = ({
     lineId: factoryViewId,
     userAccessibleLineIds: metricsLineIds
   });
-  const defaultKPIs = React148__default.useMemo(() => createDefaultKPIs(), []);
-  const lineModeById = React148__default.useMemo(() => {
+  const defaultKPIs = React125__default.useMemo(() => createDefaultKPIs(), []);
+  const lineModeById = React125__default.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     linesForView.forEach((line) => {
       map.set(line.id, line.monitoring_mode ?? "output");
     });
     return map;
   }, [linesForView]);
-  const lineMetricRowsByLineId = React148__default.useMemo(() => {
+  const lineMetricRowsByLineId = React125__default.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     lineMetrics.forEach((row) => {
       if (!row?.line_id) return;
@@ -73625,7 +73931,7 @@ var KPIsOverviewView = ({
     });
     return map;
   }, [lineMetrics, lineModeById]);
-  const liveDailyFallbackEfficiencyByLineId = React148__default.useMemo(() => {
+  const liveDailyFallbackEfficiencyByLineId = React125__default.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     lineMetricRowsByLineId.forEach((row, lineId) => {
       const value = Number(row?.avg_efficiency);
@@ -73647,31 +73953,31 @@ var KPIsOverviewView = ({
     isHistoricalLeaderboardDaily,
     lineMetricRowsByLineId
   ]);
-  const dailyFallbackEfficiencyByLineId = React148__default.useMemo(() => {
+  const dailyFallbackEfficiencyByLineId = React125__default.useMemo(() => {
     const map = new Map(liveDailyFallbackEfficiencyByLineId);
     scopedDailyFallbackEfficiencyByLineId.forEach((value, lineId) => {
       map.set(lineId, value);
     });
     return map;
   }, [liveDailyFallbackEfficiencyByLineId, scopedDailyFallbackEfficiencyByLineId]);
-  const kpisByLineId = React148__default.useMemo(() => {
+  const kpisByLineId = React125__default.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     lineMetricRowsByLineId.forEach((row, lineId) => {
       map.set(lineId, buildKPIsFromLineMetricsRow(row));
     });
     return map;
   }, [lineMetricRowsByLineId]);
-  const getLineCardKpis = React148__default.useCallback((line) => {
+  const getLineCardKpis = React125__default.useCallback((line) => {
     if (metricsError) return null;
     return kpisByLineId.get(line.id) ?? (metricsLoading ? null : defaultKPIs);
   }, [defaultKPIs, kpisByLineId, metricsError, metricsLoading]);
-  const getAggregateCardKpis = React148__default.useCallback((cardLines) => {
+  const getAggregateCardKpis = React125__default.useCallback((cardLines) => {
     if (metricsError) return null;
     const rows = cardLines.map((line) => lineMetricRowsByLineId.get(line.id)).filter(Boolean);
     if (metricsLoading && rows.length === 0) return null;
     return aggregateKPIsFromLineMetricsRows(rows);
   }, [lineMetricRowsByLineId, metricsError, metricsLoading]);
-  const supervisorLineIds = React148__default.useMemo(
+  const supervisorLineIds = React125__default.useMemo(
     () => (leaderboardLines.length > 0 ? leaderboardLines : lines).map((l) => l.id),
     [leaderboardLines, lines]
   );
@@ -73923,7 +74229,135 @@ var KPIsOverviewView = ({
       { shallow: true }
     );
   }, [router]);
-  const lineDetailReturnTo = React148__default.useMemo(() => {
+  const handleLineStatusFilterToggle = useCallback((status) => {
+    setSelectedLineStatusFilters((previousStatuses) => {
+      const optionLabel = LINE_STATUS_FILTER_OPTIONS.find((option) => option.id === status)?.label ?? status;
+      const wasSelected = previousStatuses.includes(status);
+      const nextStatuses = previousStatuses.includes(status) ? previousStatuses.filter((item) => item !== status) : [...previousStatuses, status];
+      trackCoreEvent("Lines Overview Filter Changed", {
+        surface: "lines_overview",
+        action: "toggle_status_filter",
+        control_clicked: "filters",
+        source: "filters_dropdown",
+        filter_group: "status",
+        option_clicked: status,
+        option_label: optionLabel,
+        option_selected: !wasSelected,
+        toggled_status: status,
+        previous_status_filters: previousStatuses,
+        selected_status_filters: nextStatuses,
+        selected_factory_filters: effectiveSelectedFactoryFilters,
+        selected_view_level: todayViewLevel,
+        selected_sort_direction: efficiencySortDirection
+      });
+      return nextStatuses;
+    });
+  }, [effectiveSelectedFactoryFilters, efficiencySortDirection, todayViewLevel]);
+  const handleFactoryFilterToggle = useCallback((factoryId) => {
+    setHasUserEditedFactoryFilters(true);
+    setSelectedFactoryFilters((previousFactoryFilters) => {
+      const baseFactoryFilters = hasUserEditedFactoryFilters ? previousFactoryFilters : factoryFilterOptionIds;
+      const optionLabel = factoryFilterOptions.find((option) => option.id === factoryId)?.label ?? factoryId;
+      const wasSelected = baseFactoryFilters.includes(factoryId);
+      const nextFactoryFilters = baseFactoryFilters.includes(factoryId) ? baseFactoryFilters.filter((item) => item !== factoryId) : [...baseFactoryFilters, factoryId];
+      trackCoreEvent("Lines Overview Filter Changed", {
+        surface: "lines_overview",
+        action: "toggle_factory",
+        control_clicked: "filters",
+        source: "filters_dropdown",
+        filter_group: "factory",
+        option_clicked: factoryId,
+        option_label: optionLabel,
+        option_selected: !wasSelected,
+        toggled_factory_id: factoryId,
+        toggled_factory_name: optionLabel,
+        previous_factory_filters: baseFactoryFilters,
+        selected_factory_filters: nextFactoryFilters,
+        selected_status_filters: selectedLineStatusFilters,
+        selected_view_level: todayViewLevel,
+        selected_sort_direction: efficiencySortDirection
+      });
+      return nextFactoryFilters;
+    });
+  }, [efficiencySortDirection, factoryFilterOptionIds, factoryFilterOptions, hasUserEditedFactoryFilters, selectedLineStatusFilters, todayViewLevel]);
+  const handleTodayViewLevelChange = useCallback((nextViewLevel) => {
+    const viewLevelLabels = {
+      factory: "Factory level",
+      units: "Area level"
+    };
+    trackCoreEvent("Lines Overview View Option Clicked", {
+      surface: "lines_overview",
+      action: "click_view_option",
+      control_clicked: "views",
+      source: "views_dropdown",
+      option_clicked: nextViewLevel,
+      option_label: viewLevelLabels[nextViewLevel],
+      previous_view_level: todayViewLevel,
+      selected_view_level: nextViewLevel,
+      option_selected: nextViewLevel !== todayViewLevel,
+      selected_factory_filters: effectiveSelectedFactoryFilters,
+      selected_status_filters: selectedLineStatusFilters,
+      selected_sort_direction: efficiencySortDirection
+    });
+    if (nextViewLevel === todayViewLevel) {
+      return;
+    }
+    trackCoreEvent("Lines Overview View Changed", {
+      surface: "lines_overview",
+      action: "select_view_level",
+      control_clicked: "views",
+      source: "views_dropdown",
+      option_clicked: nextViewLevel,
+      option_label: viewLevelLabels[nextViewLevel],
+      previous_view_level: todayViewLevel,
+      selected_view_level: nextViewLevel,
+      selected_factory_filters: effectiveSelectedFactoryFilters,
+      selected_status_filters: selectedLineStatusFilters,
+      selected_sort_direction: efficiencySortDirection
+    });
+    setTodayViewLevel(nextViewLevel);
+    navigateTodayHierarchy();
+  }, [effectiveSelectedFactoryFilters, efficiencySortDirection, navigateTodayHierarchy, selectedLineStatusFilters, todayViewLevel]);
+  const handleEfficiencySortChange = useCallback((nextSortDirection) => {
+    const sortLabels = {
+      desc: "Highest to lowest",
+      asc: "Lowest to highest"
+    };
+    trackCoreEvent("Lines Overview Sort Option Clicked", {
+      surface: "lines_overview",
+      action: "click_sort_option",
+      control_clicked: "sort",
+      source: "sort_dropdown",
+      sort_metric: "efficiency",
+      option_clicked: nextSortDirection,
+      option_label: sortLabels[nextSortDirection],
+      previous_sort_direction: efficiencySortDirection,
+      selected_sort_direction: nextSortDirection,
+      option_selected: nextSortDirection !== efficiencySortDirection,
+      selected_factory_filters: effectiveSelectedFactoryFilters,
+      selected_status_filters: selectedLineStatusFilters,
+      selected_view_level: todayViewLevel
+    });
+    if (nextSortDirection === efficiencySortDirection) {
+      return;
+    }
+    trackCoreEvent("Lines Overview Sort Changed", {
+      surface: "lines_overview",
+      action: "select_efficiency_sort",
+      control_clicked: "sort",
+      source: "sort_dropdown",
+      sort_metric: "efficiency",
+      option_clicked: nextSortDirection,
+      option_label: sortLabels[nextSortDirection],
+      previous_sort_direction: efficiencySortDirection,
+      selected_sort_direction: nextSortDirection,
+      selected_factory_filters: effectiveSelectedFactoryFilters,
+      selected_status_filters: selectedLineStatusFilters,
+      selected_view_level: todayViewLevel
+    });
+    setEfficiencySortDirection(nextSortDirection);
+  }, [effectiveSelectedFactoryFilters, efficiencySortDirection, selectedLineStatusFilters, todayViewLevel]);
+  const lineDetailReturnTo = React125__default.useMemo(() => {
     if (activeTab !== "today" || !selectedFactoryNode) return void 0;
     return createKpisOverviewUrl({
       factoryId: selectedFactoryNode.id,
@@ -74013,6 +74447,19 @@ var KPIsOverviewView = ({
   const headerShiftId = showHistoricalLeaderboardHeader ? effectiveLeaderboardShiftId : currentShiftDetails.shiftId;
   const headerShiftName = getShiftNameById(headerShiftId, configuredTimezone, shiftConfig).replace(/ Shift$/i, "");
   const headerDateLabel = isMonthlyMode ? getMonthRange() : formatLocalDate2(headerDateKey);
+  const isDefaultStatusFilter = selectedLineStatusFilters.length === LINE_STATUS_FILTER_OPTIONS.length;
+  const selectedLineStatusSet = React125__default.useMemo(
+    () => new Set(selectedLineStatusFilters),
+    [selectedLineStatusFilters]
+  );
+  const selectedFactoryFilterSet = React125__default.useMemo(
+    () => new Set(effectiveSelectedFactoryFilters),
+    [effectiveSelectedFactoryFilters]
+  );
+  const isDefaultFactoryFilter = React125__default.useMemo(
+    () => factoryFilterOptions.length === 0 || effectiveSelectedFactoryFilters.length === factoryFilterOptions.length && factoryFilterOptions.every((option) => selectedFactoryFilterSet.has(option.id)),
+    [effectiveSelectedFactoryFilters.length, factoryFilterOptions, selectedFactoryFilterSet]
+  );
   const getShiftIcon2 = (shiftId) => {
     const shiftNameLower = getShiftNameById(shiftId, configuredTimezone, shiftConfig).toLowerCase();
     if (shiftNameLower.includes("day") || shiftNameLower.includes("morning") || shiftId === 0) {
@@ -74061,16 +74508,77 @@ var KPIsOverviewView = ({
     },
     key
   );
+  const statusMatchesFilters = React125__default.useCallback((status) => {
+    if (isDefaultStatusFilter) return true;
+    if (!status) return false;
+    return selectedLineStatusSet.has(status);
+  }, [isDefaultStatusFilter, selectedLineStatusSet]);
+  const factoryMatchesFilters = React125__default.useCallback((line) => {
+    if (isDefaultFactoryFilter) return true;
+    return selectedFactoryFilterSet.has(line.factory_id || "unknown-factory");
+  }, [isDefaultFactoryFilter, selectedFactoryFilterSet]);
+  const getLineStatus = React125__default.useCallback((line) => {
+    const kpis = getLineCardKpis(line);
+    return getKpiSignalStatus(kpis?.lineSignal, efficiencyLegend);
+  }, [efficiencyLegend, getLineCardKpis]);
+  const getGroupStatus = React125__default.useCallback((cardLines) => {
+    const kpis = getAggregateCardKpis(cardLines);
+    return getKpiSignalStatus(kpis?.lineSignal, efficiencyLegend);
+  }, [efficiencyLegend, getAggregateCardKpis]);
+  const getLineSortEfficiency = React125__default.useCallback((line) => {
+    const value = getLineCardKpis(line)?.efficiency?.value;
+    return typeof value === "number" && Number.isFinite(value) ? value : null;
+  }, [getLineCardKpis]);
+  const getGroupSortEfficiency = React125__default.useCallback((cardLines) => {
+    const value = getAggregateCardKpis(cardLines)?.efficiency?.value;
+    return typeof value === "number" && Number.isFinite(value) ? value : null;
+  }, [getAggregateCardKpis]);
+  const compareEfficiencyValues = React125__default.useCallback((leftValue, rightValue) => {
+    if (leftValue === null && rightValue === null) return 0;
+    if (leftValue === null) return 1;
+    if (rightValue === null) return -1;
+    return efficiencySortDirection === "asc" ? leftValue - rightValue : rightValue - leftValue;
+  }, [efficiencySortDirection]);
+  const sortLineCollection = React125__default.useCallback(
+    (cardLines) => [...cardLines].sort((left, right) => {
+      const efficiencyComparison = compareEfficiencyValues(getLineSortEfficiency(left), getLineSortEfficiency(right));
+      if (efficiencyComparison !== 0) return efficiencyComparison;
+      return (left.line_name || "").localeCompare(right.line_name || "", void 0, { sensitivity: "base", numeric: true });
+    }),
+    [compareEfficiencyValues, getLineSortEfficiency]
+  );
+  const sortGroupCollection = React125__default.useCallback(
+    (groups) => [...groups].sort((left, right) => {
+      const leftLines = left.lines.filter(factoryMatchesFilters);
+      const rightLines = right.lines.filter(factoryMatchesFilters);
+      const efficiencyComparison = compareEfficiencyValues(getGroupSortEfficiency(leftLines), getGroupSortEfficiency(rightLines));
+      if (efficiencyComparison !== 0) return efficiencyComparison;
+      return (left.factoryName || left.areaName || "").localeCompare(right.factoryName || right.areaName || "", void 0, { sensitivity: "base", numeric: true });
+    }),
+    [compareEfficiencyValues, factoryMatchesFilters, getGroupSortEfficiency]
+  );
+  const filterLineCollection = React125__default.useCallback(
+    (cardLines) => sortLineCollection(cardLines.filter((line) => factoryMatchesFilters(line) && statusMatchesFilters(getLineStatus(line)))),
+    [factoryMatchesFilters, getLineStatus, sortLineCollection, statusMatchesFilters]
+  );
+  const filterGroupCollection = React125__default.useCallback(
+    (groups) => sortGroupCollection(groups.filter((group) => {
+      const factoryFilteredLines = group.lines.filter(factoryMatchesFilters);
+      if (factoryFilteredLines.length === 0) return false;
+      return statusMatchesFilters(getGroupStatus(factoryFilteredLines));
+    })),
+    [factoryMatchesFilters, getGroupStatus, sortGroupCollection, statusMatchesFilters]
+  );
   const renderTodayCards = () => {
     if (!kpiLineHierarchy.showFactoryLevel) {
-      return linesForView.map(renderLineCard);
+      return filterLineCollection(linesForView).map(renderLineCard);
     }
     if (selectedFactoryNode && selectedFactoryAreaNode) {
-      return selectedFactoryAreaNode.lines.map(renderLineCard);
+      return filterLineCollection(selectedFactoryAreaNode.lines).map(renderLineCard);
     }
     if (selectedFactoryNode) {
       return [
-        ...selectedFactoryNode.areas.map(
+        ...filterGroupCollection(selectedFactoryNode.areas).map(
           (area) => renderGroupCard({
             key: `area-${area.id}`,
             title: area.areaName,
@@ -74079,10 +74587,10 @@ var KPIsOverviewView = ({
             onClick: () => navigateTodayHierarchy(selectedFactoryNode.id, area.id)
           })
         ),
-        ...selectedFactoryNode.ungroupedLines.map(renderLineCard)
+        ...filterLineCollection(selectedFactoryNode.ungroupedLines).map(renderLineCard)
       ];
     }
-    return kpiLineHierarchy.factories.map(
+    return filterGroupCollection(kpiLineHierarchy.factories).map(
       (factory) => renderGroupCard({
         key: `factory-${factory.id}`,
         title: factory.factoryName,
@@ -74092,6 +74600,18 @@ var KPIsOverviewView = ({
       })
     );
   };
+  const renderTodayUnitsByFactory = () => kpiLineHierarchy.factories.flatMap((factory) => [
+    ...filterGroupCollection(factory.areas).map(
+      (area) => renderGroupCard({
+        key: `unit-area-${factory.id}-${area.id}`,
+        title: area.areaName,
+        subtitle: `${area.lines.length} ${area.lines.length === 1 ? "line" : "lines"}`,
+        lines: area.lines,
+        onClick: () => navigateTodayHierarchy(factory.id, area.id)
+      })
+    ),
+    ...filterLineCollection(factory.ungroupedLines).map(renderLineCard)
+  ]);
   if (loading || isShiftConfigLoading) {
     return /* @__PURE__ */ jsx(LoadingPage, { message: "Loading production lines..." });
   }
@@ -74305,65 +74825,237 @@ var KPIsOverviewView = ({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            activeTab === "leaderboard" && timeRange === "today" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(
-                MonthlyRangeFilter_default,
+            activeTab === "leaderboard" && timeRange === "today" && /* @__PURE__ */ jsx(
+              MonthlyRangeFilter_default,
+              {
+                month: parseDateKeyToDate(effectiveLeaderboardDate).getMonth(),
+                year: parseDateKeyToDate(effectiveLeaderboardDate).getFullYear(),
+                timezone: configuredTimezone,
+                value: {
+                  startKey: effectiveLeaderboardDate,
+                  endKey: effectiveLeaderboardDate
+                },
+                onChange: (range) => {
+                  updateLeaderboardDate(range.startKey);
+                },
+                showLabel: false,
+                singleDateOnly: true
+              }
+            ),
+            (activeTab === "today" || activeTab === "leaderboard" && timeRange === "today") && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  month: parseDateKeyToDate(effectiveLeaderboardDate).getMonth(),
-                  year: parseDateKeyToDate(effectiveLeaderboardDate).getFullYear(),
-                  timezone: configuredTimezone,
-                  value: {
-                    startKey: effectiveLeaderboardDate,
-                    endKey: effectiveLeaderboardDate
+                  ref: filterButtonRef,
+                  type: "button",
+                  onClick: () => {
+                    const nextOpen = !isFilterOpen;
+                    if (nextOpen) {
+                      trackCoreEvent("Lines Overview Filter Menu Opened", {
+                        surface: "lines_overview",
+                        action: "open_filter_menu",
+                        control_clicked: "filters",
+                        source: "top_right_controls",
+                        active_tab: activeTab,
+                        selected_status_filters: selectedLineStatusFilters,
+                        selected_factory_filters: effectiveSelectedFactoryFilters,
+                        selected_view_level: todayViewLevel,
+                        selected_sort_direction: efficiencySortDirection
+                      });
+                    }
+                    setIsFilterOpen(nextOpen);
+                    setIsViewsOpen(false);
+                    setIsSortOpen(false);
+                  },
+                  className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || activeFiltersCount > 0 ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-gray-200 text-gray-700 hover:bg-gray-50"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4" }),
+                    /* @__PURE__ */ jsx("span", { children: "Filters" }),
+                    activeFiltersCount > 0 && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5 bg-blue-100 text-blue-700 text-xs rounded-full font-bold ml-1", children: activeFiltersCount }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: `w-3 h-3 ml-1 transition-transform ${isFilterOpen ? "rotate-180" : ""}` })
+                  ]
+                }
+              ),
+              isFilterOpen && /* @__PURE__ */ jsxs("div", { ref: filterRef, className: "absolute right-0 top-full mt-2 w-72 max-h-[calc(100vh-12rem)] overflow-y-auto bg-white rounded-xl shadow-xl border border-gray-100 p-4 z-50", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Filters" }),
+                  activeFiltersCount > 0 && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: clearFilters,
+                      className: "text-xs text-red-600 hover:text-red-700 font-medium",
+                      children: "Clear all"
+                    }
+                  )
+                ] }),
+                activeTab === "today" ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                  factoryFilterOptions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Filter by factory" }),
+                    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: factoryFilterOptions.map((option) => {
+                      const isSelected = selectedFactoryFilterSet.has(option.id);
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleFactoryFilterToggle(option.id),
+                          className: `flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${isSelected ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: `flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border ${isSelected ? "border-blue-500 bg-blue-500 text-white" : "border-gray-300 bg-white"}`, children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) }),
+                            /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                          ]
+                        },
+                        option.id
+                      );
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Filter by status" }),
+                    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: LINE_STATUS_FILTER_OPTIONS.map((option) => {
+                      const isSelected = selectedLineStatusSet.has(option.id);
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => handleLineStatusFilterToggle(option.id),
+                          className: `flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${isSelected ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: `flex h-4 w-4 items-center justify-center rounded border ${isSelected ? "border-blue-500 bg-blue-500 text-white" : "border-gray-300 bg-white"}`, children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) }),
+                            option.label
+                          ]
+                        },
+                        option.id
+                      );
+                    }) })
+                  ] })
+                ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Shift" }),
+                  /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      "aria-label": "Leaderboard shift",
+                      value: effectiveLeaderboardShiftId,
+                      onChange: (e) => updateLeaderboardShiftId(Number(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: leaderboardShiftOptions.map((shiftOption) => /* @__PURE__ */ jsx("option", { value: shiftOption.id, children: shiftOption.label }, shiftOption.id))
+                    }
+                  ) })
+                ] }) })
+              ] })
+            ] }),
+            activeTab === "today" && kpiLineHierarchy.showFactoryLevel && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: viewsButtonRef,
+                  type: "button",
+                  onClick: () => {
+                    const nextOpen = !isViewsOpen;
+                    if (nextOpen) {
+                      trackCoreEvent("Lines Overview Views Menu Opened", {
+                        surface: "lines_overview",
+                        action: "open_views_menu",
+                        control_clicked: "views",
+                        source: "top_right_controls",
+                        selected_view_level: todayViewLevel,
+                        selected_factory_filters: effectiveSelectedFactoryFilters,
+                        selected_status_filters: selectedLineStatusFilters,
+                        selected_sort_direction: efficiencySortDirection
+                      });
+                    }
+                    setIsViewsOpen(nextOpen);
+                    setIsFilterOpen(false);
+                    setIsSortOpen(false);
                   },
-                  onChange: (range) => {
-                    updateLeaderboardDate(range.startKey);
+                  className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isViewsOpen ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-gray-200 text-gray-700 hover:bg-gray-50"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(Layers, { className: "w-4 h-4" }),
+                    /* @__PURE__ */ jsx("span", { children: "Views" }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: `w-3 h-3 ml-1 transition-transform ${isViewsOpen ? "rotate-180" : ""}` })
+                  ]
+                }
+              ),
+              isViewsOpen && /* @__PURE__ */ jsxs("div", { ref: viewsRef, className: "absolute right-0 top-full mt-2 w-72 bg-white rounded-xl shadow-xl border border-gray-100 p-4 z-50", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Views" }) }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [
+                  { id: "factory", label: "Factory level" },
+                  { id: "units", label: "Area level" }
+                ].map((option) => {
+                  const isSelected = todayViewLevel === option.id;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleTodayViewLevelChange(option.id),
+                      className: `flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${isSelected ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: `flex h-4 w-4 items-center justify-center rounded border ${isSelected ? "border-blue-500 bg-blue-500 text-white" : "border-gray-300 bg-white"}`, children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) }),
+                        option.label
+                      ]
+                    },
+                    option.id
+                  );
+                }) })
+              ] })
+            ] }),
+            activeTab === "today" && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: sortButtonRef,
+                  type: "button",
+                  onClick: () => {
+                    const nextOpen = !isSortOpen;
+                    if (nextOpen) {
+                      trackCoreEvent("Lines Overview Sort Menu Opened", {
+                        surface: "lines_overview",
+                        action: "open_sort_menu",
+                        control_clicked: "sort",
+                        source: "top_right_controls",
+                        sort_metric: "efficiency",
+                        selected_sort_direction: efficiencySortDirection,
+                        selected_factory_filters: effectiveSelectedFactoryFilters,
+                        selected_status_filters: selectedLineStatusFilters,
+                        selected_view_level: todayViewLevel
+                      });
+                    }
+                    setIsSortOpen(nextOpen);
+                    setIsFilterOpen(false);
+                    setIsViewsOpen(false);
                   },
-                  showLabel: false,
-                  singleDateOnly: true
+                  className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isSortOpen || activeSortCount > 0 ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-gray-200 text-gray-700 hover:bg-gray-50"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-4 h-4" }),
+                    /* @__PURE__ */ jsx("span", { children: "Sort" }),
+                    activeSortCount > 0 && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5 bg-blue-100 text-blue-700 text-xs rounded-full font-bold ml-1", children: activeSortCount }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: `w-3 h-3 ml-1 transition-transform ${isSortOpen ? "rotate-180" : ""}` })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    ref: filterButtonRef,
-                    onClick: () => setIsFilterOpen(!isFilterOpen),
-                    className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || activeFiltersCount > 0 ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-gray-200 text-gray-700 hover:bg-gray-50"}`,
-                    children: [
-                      /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4" }),
-                      /* @__PURE__ */ jsx("span", { children: "Filters" }),
-                      activeFiltersCount > 0 && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5 bg-blue-100 text-blue-700 text-xs rounded-full font-bold ml-1", children: activeFiltersCount }),
-                      /* @__PURE__ */ jsx(ChevronDown, { className: `w-3 h-3 ml-1 transition-transform ${isFilterOpen ? "rotate-180" : ""}` })
-                    ]
-                  }
-                ),
-                isFilterOpen && /* @__PURE__ */ jsxs("div", { ref: filterRef, className: "absolute right-0 top-full mt-2 w-72 bg-white rounded-xl shadow-xl border border-gray-100 p-4 z-50", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-                    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Filter View" }),
-                    activeFiltersCount > 0 && /* @__PURE__ */ jsx(
+              isSortOpen && /* @__PURE__ */ jsxs("div", { ref: sortRef, className: "absolute right-0 top-full mt-2 w-72 bg-white rounded-xl shadow-xl border border-gray-100 p-4 z-50", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Sort" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Efficiency" }),
+                  /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [
+                    { id: "desc", label: "Highest to lowest" },
+                    { id: "asc", label: "Lowest to highest" }
+                  ].map((option) => {
+                    const isSelected = efficiencySortDirection === option.id;
+                    return /* @__PURE__ */ jsxs(
                       "button",
                       {
-                        onClick: clearFilters,
-                        className: "text-xs text-red-600 hover:text-red-700 font-medium",
-                        children: "Clear all"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-                    /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Shift" }),
-                    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
-                      "select",
-                      {
-                        "aria-label": "Leaderboard shift",
-                        value: effectiveLeaderboardShiftId,
-                        onChange: (e) => updateLeaderboardShiftId(Number(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: leaderboardShiftOptions.map((shiftOption) => /* @__PURE__ */ jsx("option", { value: shiftOption.id, children: shiftOption.label }, shiftOption.id))
-                      }
-                    ) })
-                  ] }) })
+                        type: "button",
+                        onClick: () => handleEfficiencySortChange(option.id),
+                        className: `flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${isSelected ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: `flex h-4 w-4 items-center justify-center rounded border ${isSelected ? "border-blue-500 bg-blue-500 text-white" : "border-gray-300 bg-white"}`, children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) }),
+                          option.label
+                        ]
+                      },
+                      option.id
+                    );
+                  }) })
                 ] })
               ] })
             ] }),
@@ -74384,7 +75076,7 @@ var KPIsOverviewView = ({
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx("main", { className: `flex-1 p-3 sm:p-4 md:p-6 bg-slate-50 ${activeTab === "leaderboard" ? "overflow-hidden flex flex-col" : "overflow-y-auto"}`, children: activeTab === "today" ? /* @__PURE__ */ jsxs("div", { className: "space-y-3 sm:space-y-4", children: [
+    /* @__PURE__ */ jsx("main", { className: `flex-1 p-3 sm:p-4 md:p-6 bg-slate-50 ${activeTab === "leaderboard" ? "overflow-hidden flex flex-col" : "overflow-y-auto"}`, children: activeTab === "today" ? /* @__PURE__ */ jsx("div", { className: "space-y-3 sm:space-y-4", children: todayViewLevel === "units" && kpiLineHierarchy.showFactoryLevel ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6", children: renderTodayUnitsByFactory() }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       kpiLineHierarchy.showFactoryLevel && selectedFactoryNode && /* @__PURE__ */ jsxs("nav", { className: "flex flex-wrap items-center gap-2 text-sm", "aria-label": "KPI hierarchy", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -74411,7 +75103,7 @@ var KPIsOverviewView = ({
         ] })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6", children: renderTodayCards() })
-    ] }) : showLeaderboardLoader ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center justify-center bg-white rounded-2xl border border-gray-100 shadow-sm m-2 sm:m-4", children: /* @__PURE__ */ jsx(
+    ] }) }) : showLeaderboardLoader ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center justify-center bg-white rounded-2xl border border-gray-100 shadow-sm m-2 sm:m-4", children: /* @__PURE__ */ jsx(
       OptifyeLogoLoader_default,
       {
         size: "lg",
@@ -74723,7 +75415,7 @@ var LeaderboardDetailView = memo$1(({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const [isMobile, setIsMobile] = useState(false);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 640);
     checkMobile();
     window.addEventListener("resize", checkMobile);
@@ -75548,7 +76240,7 @@ var LeaderboardDetailView = memo$1(({
       ] }) }),
       isFilterOpen && /* @__PURE__ */ jsxs("div", { ref: filterRef, className: "absolute right-3 sm:right-4 md:right-5 lg:right-6 top-full mt-2 w-72 bg-white rounded-xl shadow-xl border border-gray-100 p-4 z-50", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Filter View" }),
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Sort" }),
           activeFiltersCount > 0 && /* @__PURE__ */ jsx(
             "button",
             {
@@ -75673,9 +76365,9 @@ var LeaderboardDetailView = memo$1(({
                 ref: mobileFilterButtonRef,
                 onClick: () => setIsFilterOpen(!isFilterOpen),
                 className: `p-2 rounded-full transition-colors relative ${isFilterOpen || activeFiltersCount > 0 ? "bg-blue-50" : "active:bg-gray-100"}`,
-                "aria-label": "Open filters",
+                "aria-label": "Open sort",
                 children: [
-                  /* @__PURE__ */ jsx(Filter, { className: `w-5 h-5 ${activeFiltersCount > 0 ? "text-blue-600" : "text-gray-700"}` }),
+                  /* @__PURE__ */ jsx(ArrowUpDown, { className: `w-5 h-5 ${activeFiltersCount > 0 ? "text-blue-600" : "text-gray-700"}` }),
                   activeFiltersCount > 0 && /* @__PURE__ */ 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: activeFiltersCount })
                 ]
               }
@@ -75748,8 +76440,8 @@ var LeaderboardDetailView = memo$1(({
                 onClick: () => setIsFilterOpen(!isFilterOpen),
                 className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || activeFiltersCount > 0 ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-gray-200 text-gray-700 hover:bg-gray-50"}`,
                 children: [
-                  /* @__PURE__ */ jsx(Filter, { className: "w-4 h-4" }),
-                  /* @__PURE__ */ jsx("span", { children: "Filters" }),
+                  /* @__PURE__ */ jsx(ArrowUpDown, { className: "w-4 h-4" }),
+                  /* @__PURE__ */ jsx("span", { children: "Sort" }),
                   activeFiltersCount > 0 && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5 bg-blue-100 text-blue-700 text-xs rounded-full font-bold ml-1", children: activeFiltersCount }),
                   /* @__PURE__ */ jsx(ChevronDown, { className: `w-3 h-3 ml-1 transition-transform ${isFilterOpen ? "rotate-180" : ""}` })
                 ]
@@ -78773,7 +79465,7 @@ var ShiftsView = ({
     ] })
   ] });
 };
-var AuthenticatedShiftsView = withAuth(React148__default.memo(ShiftsView));
+var AuthenticatedShiftsView = withAuth(React125__default.memo(ShiftsView));
 var ShiftsView_default = ShiftsView;
 
 // src/views/TargetsView.utils.ts
@@ -80640,7 +81332,7 @@ var TargetsView = ({
 };
 var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
 var TargetsView_default = TargetsViewWithDisplayNames;
-var AuthenticatedTargetsView = withAuth(React148__default.memo(TargetsViewWithDisplayNames));
+var AuthenticatedTargetsView = withAuth(React125__default.memo(TargetsViewWithDisplayNames));
 function useTimezone(options = {}) {
   const dashboardConfig = useDashboardConfig();
   const workspaceConfig = useWorkspaceConfig();
@@ -80805,13 +81497,13 @@ var WorkspaceHourSummaryPanel = ({
 }) => {
   const { data, isLoading, error, summarize, reset } = useWorkspaceHourSummary();
   const selectedKey = selectedHour ? `${selectedHour.source}:${selectedHour.hourIndex}:${date}:${shiftId}` : "none";
-  const autoSummaryKeyRef = React148__default.useRef(null);
-  React148__default.useEffect(() => {
+  const autoSummaryKeyRef = React125__default.useRef(null);
+  React125__default.useEffect(() => {
     reset();
     autoSummaryKeyRef.current = null;
   }, [reset, selectedKey]);
   const canSummarize = Boolean(workspaceId && companyId && date && shiftId !== null && shiftId !== void 0);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (!selectedHour || !canSummarize || !companyId || !date || shiftId === null || shiftId === void 0) {
       return;
     }
@@ -82542,7 +83234,8 @@ var WorkspaceDetailView = ({
                               selectedHourIndex: isWorkspaceHourAiSummaryEnabled ? selectedHour?.source === "output" ? selectedHour.hourIndex : aiSummaryHour?.hourIndex ?? null : null,
                               onHourClick: isWorkspaceHourAiSummaryEnabled ? handleOutputHourSelect : void 0,
                               onWatchClipsClick: handleWatchClipsFromChart,
-                              onAiSummaryClick: isWorkspaceHourAiSummaryEnabled ? handleAiSummaryClick : void 0
+                              onAiSummaryClick: isWorkspaceHourAiSummaryEnabled ? handleAiSummaryClick : void 0,
+                              onSelectSku: setSelectedSkuId
                             }
                           )
                         }
@@ -82715,7 +83408,8 @@ var WorkspaceDetailView = ({
                                 selectedHourIndex: isWorkspaceHourAiSummaryEnabled ? selectedHour?.source === "output" ? selectedHour.hourIndex : aiSummaryHour?.hourIndex ?? null : null,
                                 onHourClick: isWorkspaceHourAiSummaryEnabled ? handleOutputHourSelect : void 0,
                                 onWatchClipsClick: handleWatchClipsFromChart,
-                                onAiSummaryClick: isWorkspaceHourAiSummaryEnabled ? handleAiSummaryClick : void 0
+                                onAiSummaryClick: isWorkspaceHourAiSummaryEnabled ? handleAiSummaryClick : void 0,
+                                onSelectSku: setSelectedSkuId
                               }
                             ) })
                           ]
@@ -84502,7 +85196,7 @@ function BottleneckClipsView({
     ) })
   ] }) });
 }
-var AuthenticatedBottleneckClipsView = withAuth(React148__default.memo(BottleneckClipsView));
+var AuthenticatedBottleneckClipsView = withAuth(React125__default.memo(BottleneckClipsView));
 var BottleneckClipsView_default = BottleneckClipsView;
 
 // src/lib/services/ticketService.ts
@@ -85345,7 +86039,7 @@ Please ensure:
     )
   ] });
 }
-var AuthenticatedTicketsView = withAuth(React148__default.memo(TicketsView));
+var AuthenticatedTicketsView = withAuth(React125__default.memo(TicketsView));
 var TicketsView_default = TicketsView;
 
 // src/lib/utils/improvementDisplay.ts
@@ -86316,7 +87010,7 @@ var ImprovementCenterView = () => {
       setSelectedMemberId("all");
     }
   }, [memberOptions, selectedMemberId]);
-  const getRecommendationDisplayMetadata = React148__default.useCallback((rec) => {
+  const getRecommendationDisplayMetadata = React125__default.useCallback((rec) => {
     const supervisors = rec.line_id ? supervisorsByLineId.get(rec.line_id) || [] : [];
     return getImprovementDisplayMetadata({
       location: rec.location,
@@ -86790,7 +87484,7 @@ var ThreadSidebar = ({
     ] }) })
   ] });
 };
-var ProfilePicture = React148__default.memo(({
+var ProfilePicture = React125__default.memo(({
   alt = "Axel",
   className = "",
   size = "md",
@@ -89350,7 +90044,7 @@ var OverviewImprovementsSkeleton = () => /* @__PURE__ */ jsx("div", { className:
   ] }),
   /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end flex-shrink-0 ml-4", children: /* @__PURE__ */ jsx(SectionPulse, { className: "h-6 w-20 rounded-full" }) })
 ] }, index)) });
-var OperationsOverviewHeader = React148__default.memo(({
+var OperationsOverviewHeader = React125__default.memo(({
   dateRange,
   displayDateRange,
   trendMode,
@@ -89371,65 +90065,65 @@ var OperationsOverviewHeader = React148__default.memo(({
   bumpRenderCounter();
   const subtitleRange = displayDateRange || dateRange;
   const showLiveShiftMeta = isLiveScope && trendMode !== "all";
-  const liveShiftLabel = React148__default.useMemo(
+  const liveShiftLabel = React125__default.useMemo(
     () => normalizeShiftLabel(liveShiftName, trendMode),
     [liveShiftName, trendMode]
   );
-  const liveShiftIcon = React148__default.useMemo(
+  const liveShiftIcon = React125__default.useMemo(
     () => getShiftIcon(liveShiftName, trendMode),
     [liveShiftName, trendMode]
   );
-  const [isFilterOpen, setIsFilterOpen] = React148__default.useState(false);
-  const [isLinesDropdownOpen, setIsLinesDropdownOpen] = React148__default.useState(false);
-  const filterRef = React148__default.useRef(null);
-  const filterButtonRef = React148__default.useRef(null);
-  const mobileFilterButtonRef = React148__default.useRef(null);
-  const linesDropdownRef = React148__default.useRef(null);
-  const mobileSubtitle = React148__default.useMemo(() => {
+  const [isFilterOpen, setIsFilterOpen] = React125__default.useState(false);
+  const [isLinesDropdownOpen, setIsLinesDropdownOpen] = React125__default.useState(false);
+  const filterRef = React125__default.useRef(null);
+  const filterButtonRef = React125__default.useRef(null);
+  const mobileFilterButtonRef = React125__default.useRef(null);
+  const linesDropdownRef = React125__default.useRef(null);
+  const mobileSubtitle = React125__default.useMemo(() => {
     if (subtitleRange.startKey === subtitleRange.endKey) {
       return format(parseDateKeyToDate(subtitleRange.startKey), "do MMM, yyyy");
     }
     return `${format(parseDateKeyToDate(subtitleRange.startKey), "do MMM")} - ${format(parseDateKeyToDate(subtitleRange.endKey), "do MMM, yyyy")}`;
   }, [subtitleRange.endKey, subtitleRange.startKey]);
-  const desktopSubtitle = React148__default.useMemo(() => {
+  const desktopSubtitle = React125__default.useMemo(() => {
     if (subtitleRange.startKey === subtitleRange.endKey) {
       return format(parseDateKeyToDate(subtitleRange.startKey), "do MMMM, yyyy");
     }
     return `${format(parseDateKeyToDate(subtitleRange.startKey), "do MMMM, yyyy")} - ${format(parseDateKeyToDate(subtitleRange.endKey), "do MMMM, yyyy")}`;
   }, [subtitleRange.endKey, subtitleRange.startKey]);
-  const availableLineIds = React148__default.useMemo(
+  const availableLineIds = React125__default.useMemo(
     () => lineOptions.map((line) => line.id),
     [lineOptions]
   );
-  const selectedLineIdSet = React148__default.useMemo(
+  const selectedLineIdSet = React125__default.useMemo(
     () => new Set(selectedLineIds),
     [selectedLineIds]
   );
-  const isAllLinesSelected = React148__default.useMemo(() => {
+  const isAllLinesSelected = React125__default.useMemo(() => {
     if (availableLineIds.length === 0) return true;
     return availableLineIds.every((lineId) => selectedLineIdSet.has(lineId));
   }, [availableLineIds, selectedLineIdSet]);
-  const activeFilterCount = React148__default.useMemo(() => {
+  const activeFilterCount = React125__default.useMemo(() => {
     let count = 0;
     if (trendMode !== "all") count += 1;
     if (selectedSupervisorId !== "all") count += 1;
     if (!isAllLinesSelected) count += 1;
     return count;
   }, [isAllLinesSelected, selectedSupervisorId, trendMode]);
-  const handleFilterToggle = React148__default.useCallback(() => {
+  const handleFilterToggle = React125__default.useCallback(() => {
     trackCoreEvent("Operations Overview Filter Toggled", {
       action: !isFilterOpen ? "open" : "close"
     });
     setIsFilterOpen((previous) => !previous);
   }, [isFilterOpen]);
-  const handleTrendModeChange = React148__default.useCallback((event) => {
+  const handleTrendModeChange = React125__default.useCallback((event) => {
     const nextMode = event.target.value;
     trackCoreEvent("Operations Overview Shift Filter Changed", {
       shift_mode: nextMode
     });
     onTrendModeChange(nextMode);
   }, [onTrendModeChange]);
-  const handleAllLinesToggle = React148__default.useCallback(() => {
+  const handleAllLinesToggle = React125__default.useCallback(() => {
     trackCoreEvent("Operations Overview Line Filter Changed", {
       selected_line_ids: availableLineIds,
       selected_line_count: availableLineIds.length,
@@ -89437,7 +90131,7 @@ var OperationsOverviewHeader = React148__default.memo(({
     });
     onSelectedLineIdsChange(availableLineIds);
   }, [availableLineIds, onSelectedLineIdsChange]);
-  const handleSupervisorChange = React148__default.useCallback((event) => {
+  const handleSupervisorChange = React125__default.useCallback((event) => {
     const supervisorId = event.target.value;
     const selectedSupervisor = supervisorOptions.find((option) => option.id === supervisorId);
     trackCoreEvent("Operations Overview Supervisor Filter Changed", {
@@ -89448,7 +90142,7 @@ var OperationsOverviewHeader = React148__default.memo(({
     });
     onSelectedSupervisorIdChange(supervisorId);
   }, [availableLineIds, onSelectedSupervisorIdChange, supervisorOptions]);
-  const handleLineToggle = React148__default.useCallback((lineId) => {
+  const handleLineToggle = React125__default.useCallback((lineId) => {
     const current = new Set(selectedLineIds);
     if (current.has(lineId)) {
       if (current.size <= 1) return;
@@ -89464,13 +90158,13 @@ var OperationsOverviewHeader = React148__default.memo(({
     });
     onSelectedLineIdsChange(next);
   }, [availableLineIds, onSelectedLineIdsChange, selectedLineIds]);
-  const handleClearAllFilters = React148__default.useCallback(() => {
+  const handleClearAllFilters = React125__default.useCallback(() => {
     onTrendModeChange("all");
     onSelectedSupervisorIdChange("all");
     onSelectedLineIdsChange(availableLineIds);
     setIsFilterOpen(false);
   }, [availableLineIds, onSelectedLineIdsChange, onSelectedSupervisorIdChange, onTrendModeChange]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (filterRef.current && !filterRef.current.contains(target) && filterButtonRef.current && !filterButtonRef.current.contains(target) && mobileFilterButtonRef.current && !mobileFilterButtonRef.current.contains(target)) {
@@ -89705,12 +90399,12 @@ var OperationsOverviewHeader = React148__default.memo(({
   ] }) });
 });
 OperationsOverviewHeader.displayName = "OperationsOverviewHeader";
-var OverviewSummaryCards = React148__default.memo(({ store }) => {
+var OverviewSummaryCards = React125__default.memo(({ store }) => {
   bumpRenderCounter();
   const scope = useOperationsOverviewScope(store);
   const snapshot = useOperationsOverviewSnapshot(store);
   const showSnapshotSkeleton = snapshot.loading && !snapshot.hasLoadedOnce;
-  const comparisonLabel = React148__default.useMemo(() => {
+  const comparisonLabel = React125__default.useMemo(() => {
     return formatComparisonWindow({
       currentDayCount: scope.current_range?.day_count ?? null,
       previousDayCount: scope.previous_range?.day_count ?? null,
@@ -89723,27 +90417,27 @@ var OverviewSummaryCards = React148__default.memo(({ store }) => {
     scope.previous_range?.day_count,
     scope.shift_mode
   ]);
-  const [isIdleContributorsOpen, setIsIdleContributorsOpen] = React148__default.useState(false);
-  const [isIdleContributorsPinned, setIsIdleContributorsPinned] = React148__default.useState(false);
-  const idleContributorsRef = React148__default.useRef(null);
-  const plantEfficiencyBadge = React148__default.useMemo(() => {
+  const [isIdleContributorsOpen, setIsIdleContributorsOpen] = React125__default.useState(false);
+  const [isIdleContributorsPinned, setIsIdleContributorsPinned] = React125__default.useState(false);
+  const idleContributorsRef = React125__default.useRef(null);
+  const plantEfficiencyBadge = React125__default.useMemo(() => {
     return buildDeltaBadge(snapshot.data.summary.plant_efficiency?.delta_pp, {
       positiveIsGood: true,
       formatter: (value) => `${value >= 0 ? "+" : ""}${roundOne(value)}%`,
       comparisonLabel
     });
   }, [comparisonLabel, snapshot.data.summary.plant_efficiency?.delta_pp]);
-  const idleBadge = React148__default.useMemo(() => {
+  const idleBadge = React125__default.useMemo(() => {
     return buildDeltaBadge(snapshot.data.summary.avg_idle_per_workstation?.delta_seconds, {
       positiveIsGood: false,
       formatter: (value) => formatSignedIdleDuration(value),
       comparisonLabel
     });
   }, [comparisonLabel, snapshot.data.summary.avg_idle_per_workstation?.delta_seconds]);
-  const canInspectIdleContributors = React148__default.useMemo(() => {
+  const canInspectIdleContributors = React125__default.useMemo(() => {
     return !showSnapshotSkeleton && snapshot.data.summary.avg_idle_per_workstation?.current_seconds !== null && snapshot.data.summary.avg_idle_per_workstation?.current_seconds !== void 0;
   }, [showSnapshotSkeleton, snapshot.data.summary.avg_idle_per_workstation?.current_seconds]);
-  const idleTopContributors = React148__default.useMemo(() => {
+  const idleTopContributors = React125__default.useMemo(() => {
     return (snapshot.data.summary.avg_idle_per_workstation?.top_contributors || []).map((item) => ({
       workspaceId: item.workspace_id || "",
       workspaceName: item.workspace_name?.trim() || item.workspace_id || "Unknown",
@@ -89751,14 +90445,14 @@ var OverviewSummaryCards = React148__default.memo(({ store }) => {
       avgIdleSeconds: toNumber4(item.avg_idle_seconds)
     })).slice(0, 5);
   }, [snapshot.data.summary.avg_idle_per_workstation?.top_contributors]);
-  const showIdleContributorLineNames = React148__default.useMemo(() => {
+  const showIdleContributorLineNames = React125__default.useMemo(() => {
     return (scope.line_count ?? 0) > 1;
   }, [scope.line_count]);
-  const closeIdleContributors = React148__default.useCallback(() => {
+  const closeIdleContributors = React125__default.useCallback(() => {
     setIsIdleContributorsOpen(false);
     setIsIdleContributorsPinned(false);
   }, []);
-  const handleIdleContributorsToggle = React148__default.useCallback(() => {
+  const handleIdleContributorsToggle = React125__default.useCallback(() => {
     if (!canInspectIdleContributors) return;
     setIsIdleContributorsPinned((previous) => {
       const next = !previous;
@@ -89766,7 +90460,7 @@ var OverviewSummaryCards = React148__default.memo(({ store }) => {
       return next;
     });
   }, [canInspectIdleContributors]);
-  const handleIdleContributorsKeyDown = React148__default.useCallback((event) => {
+  const handleIdleContributorsKeyDown = React125__default.useCallback((event) => {
     if (!canInspectIdleContributors) return;
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -89778,11 +90472,11 @@ var OverviewSummaryCards = React148__default.memo(({ store }) => {
       closeIdleContributors();
     }
   }, [canInspectIdleContributors, closeIdleContributors, handleIdleContributorsToggle]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     setIsIdleContributorsOpen(false);
     setIsIdleContributorsPinned(false);
   }, [scope.comparison_strategy, scope.current_range?.start_date, scope.current_range?.end_date, scope.line_count, scope.shift_mode]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (!isIdleContributorsOpen) return void 0;
     const handleClickOutside = (event) => {
       if (!isIdleContributorsPinned) return;
@@ -89920,7 +90614,7 @@ var OverviewSummaryCards = React148__default.memo(({ store }) => {
   ] });
 });
 OverviewSummaryCards.displayName = "OverviewSummaryCards";
-var PoorestPerformersCard = React148__default.memo(({
+var PoorestPerformersCard = React125__default.memo(({
   store,
   supervisorsByLineId,
   onViewAll,
@@ -89929,9 +90623,9 @@ var PoorestPerformersCard = React148__default.memo(({
   bumpRenderCounter();
   const scope = useOperationsOverviewScope(store);
   const snapshot = useOperationsOverviewSnapshot(store);
-  const [poorestLineMode, setPoorestLineMode] = React148__default.useState("output");
+  const [poorestLineMode, setPoorestLineMode] = React125__default.useState("output");
   const availableLineModes = scope.available_line_modes;
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     const hasOutput = !!availableLineModes?.has_output;
     const hasUptime = !!availableLineModes?.has_uptime;
     if (hasOutput && !hasUptime && poorestLineMode !== "output") {
@@ -89940,7 +90634,7 @@ var PoorestPerformersCard = React148__default.memo(({
       setPoorestLineMode("uptime");
     }
   }, [availableLineModes?.has_output, availableLineModes?.has_uptime, poorestLineMode]);
-  const comparisonLabel = React148__default.useMemo(() => {
+  const comparisonLabel = React125__default.useMemo(() => {
     return formatComparisonWindow({
       currentDayCount: scope.current_range?.day_count ?? null,
       previousDayCount: scope.previous_range?.day_count ?? null,
@@ -89954,7 +90648,7 @@ var PoorestPerformersCard = React148__default.memo(({
     scope.shift_mode
   ]);
   const showSnapshotSkeleton = snapshot.loading && !snapshot.hasLoadedOnce;
-  const mergedPoorestLines = React148__default.useMemo(() => {
+  const mergedPoorestLines = React125__default.useMemo(() => {
     const rows = snapshot.data.poorest_lines?.[poorestLineMode] || [];
     const lineRows = [];
     const areaGroups = /* @__PURE__ */ new Map();
@@ -90034,7 +90728,7 @@ var PoorestPerformersCard = React148__default.memo(({
   }, [poorestLineMode, snapshot.data.poorest_lines, supervisorsByLineId]);
   const showPoorestModeToggle = !!availableLineModes?.has_output && !!availableLineModes?.has_uptime;
   const poorestMetricLabel = poorestLineMode === "uptime" ? "Uptime" : "Efficiency";
-  const handlePoorestLineModeChange = React148__default.useCallback((mode) => {
+  const handlePoorestLineModeChange = React125__default.useCallback((mode) => {
     trackCoreEvent("Operations Overview Poorest Line Mode Changed", { mode });
     setPoorestLineMode(mode);
   }, []);
@@ -90120,14 +90814,14 @@ var PoorestPerformersCard = React148__default.memo(({
   ] });
 });
 PoorestPerformersCard.displayName = "PoorestPerformersCard";
-var IdleBreakdownCard = React148__default.memo(({
+var IdleBreakdownCard = React125__default.memo(({
   store,
   scopedLineCount
 }) => {
   bumpRenderCounter();
   const idle = useOperationsOverviewIdle(store);
   const showInitialSkeleton = idle.loading && idle.lastUpdated === null;
-  const idleBreakdown = React148__default.useMemo(() => {
+  const idleBreakdown = React125__default.useMemo(() => {
     return idle.data.map((item) => ({
       name: item.display_name?.trim() || item.reason?.trim() || "Unknown",
       reasonKey: item.reason_key?.trim() || item.reason?.trim() || "unknown",
@@ -90146,7 +90840,7 @@ var IdleBreakdownCard = React148__default.memo(({
       }))
     })).filter((item) => item.value > 0);
   }, [idle.data]);
-  const showIdleModuleNotEnabledState = React148__default.useMemo(() => {
+  const showIdleModuleNotEnabledState = React125__default.useMemo(() => {
     const enabledLineCount = idle.scope.idle_time_vlm_enabled_line_count;
     return !showInitialSkeleton && scopedLineCount > 0 && typeof enabledLineCount === "number" && enabledLineCount === 0;
   }, [idle.scope.idle_time_vlm_enabled_line_count, scopedLineCount, showInitialSkeleton]);
@@ -90167,7 +90861,7 @@ var IdleBreakdownCard = React148__default.memo(({
   ] });
 });
 IdleBreakdownCard.displayName = "IdleBreakdownCard";
-var EfficiencyTrendCard = React148__default.memo(({
+var EfficiencyTrendCard = React125__default.memo(({
   store,
   dateRange,
   appTimezone,
@@ -90175,14 +90869,14 @@ var EfficiencyTrendCard = React148__default.memo(({
 }) => {
   bumpRenderCounter();
   const trend = useOperationsOverviewTrend(store);
-  const currentWeekRange = React148__default.useMemo(
+  const currentWeekRange = React125__default.useMemo(
     () => getCurrentWeekToDateRange(appTimezone),
     [appTimezone]
   );
   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 = React148__default.useMemo(() => {
+  const trendData = React125__default.useMemo(() => {
     if (isHourlyTrend) {
       return (trend.data.points || []).map((point, index) => ({
         name: (() => {
@@ -90254,13 +90948,13 @@ var EfficiencyTrendCard = React148__default.memo(({
       };
     });
   }, [currentWeekRange.startKey, hourlyLabelStartTime, isCurrentWeekToDateRange, isHourlyTrend, trend.data.points]);
-  const trendTooltipLabelFormatter = React148__default.useCallback((label, payload) => {
+  const trendTooltipLabelFormatter = React125__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]);
-  const trendXAxisTickFormatter = React148__default.useCallback((value, index) => {
+  const trendXAxisTickFormatter = React125__default.useCallback((value, index) => {
     if (!isHourlyTrend) {
       return typeof value === "string" ? value : String(value ?? "");
     }
@@ -90287,7 +90981,7 @@ var EfficiencyTrendCard = React148__default.memo(({
   ] });
 });
 EfficiencyTrendCard.displayName = "EfficiencyTrendCard";
-var TopImprovementsCard = React148__default.memo(({
+var TopImprovementsCard = React125__default.memo(({
   store,
   supervisorsByLineId,
   onViewAll,
@@ -90296,7 +90990,7 @@ var TopImprovementsCard = React148__default.memo(({
   bumpRenderCounter();
   const improvements = useOperationsOverviewImprovements(store);
   const showInitialSkeleton = improvements.loading && improvements.lastUpdated === null;
-  const displayImprovements = React148__default.useMemo(() => {
+  const displayImprovements = React125__default.useMemo(() => {
     return improvements.data.map((item) => {
       const supervisors = item.lineId ? supervisorsByLineId.get(item.lineId) || [] : [];
       return {
@@ -90424,33 +91118,33 @@ var useOperationsOverviewRefresh = ({
   isLiveScope,
   enabled = true
 }) => {
-  const lineIdsKey = React148__default.useMemo(() => lineIds.join(","), [lineIds]);
-  const scopeSignature = React148__default.useMemo(
+  const lineIdsKey = React125__default.useMemo(() => lineIds.join(","), [lineIds]);
+  const scopeSignature = React125__default.useMemo(
     () => [companyId || "", startKey, endKey, trendMode, comparisonStrategy || "", lineIdsKey].join("::"),
     [companyId, comparisonStrategy, endKey, lineIdsKey, startKey, trendMode]
   );
-  const controllersRef = React148__default.useRef({});
-  const requestIdsRef = React148__default.useRef({
+  const controllersRef = React125__default.useRef({});
+  const requestIdsRef = React125__default.useRef({
     snapshot: 0,
     trend: 0,
     idle: 0,
     improvements: 0
   });
-  const intervalRef = React148__default.useRef(null);
-  const isPageActiveRef = React148__default.useRef(true);
-  const lastResumeRefreshAtRef = React148__default.useRef(0);
-  const abortAll = React148__default.useCallback(() => {
+  const intervalRef = React125__default.useRef(null);
+  const isPageActiveRef = React125__default.useRef(true);
+  const lastResumeRefreshAtRef = React125__default.useRef(0);
+  const abortAll = React125__default.useCallback(() => {
     Object.values(controllersRef.current).forEach((controller) => {
       controller?.abort();
     });
     controllersRef.current = {};
   }, []);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     return () => {
       abortAll();
     };
   }, [abortAll]);
-  const getIsPageActive = React148__default.useCallback(() => {
+  const getIsPageActive = React125__default.useCallback(() => {
     if (typeof document === "undefined") {
       return true;
     }
@@ -90458,7 +91152,7 @@ var useOperationsOverviewRefresh = ({
     const hasFocus = typeof document.hasFocus === "function" ? document.hasFocus() : true;
     return isVisible && hasFocus;
   }, []);
-  const stopPolling = React148__default.useCallback((reason) => {
+  const stopPolling = React125__default.useCallback((reason) => {
     if (intervalRef.current === null) {
       return;
     }
@@ -90466,7 +91160,7 @@ var useOperationsOverviewRefresh = ({
     intervalRef.current = null;
     debugRefreshLog("poll stopped", { reason });
   }, []);
-  const runRefresh = React148__default.useCallback(
+  const runRefresh = React125__default.useCallback(
     async (section, begin, onSuccess, onError, request, reason) => {
       if (!enabled || !supabase || !companyId || lineIds.length === 0) return;
       const requestId = requestIdsRef.current[section] + 1;
@@ -90513,7 +91207,7 @@ var useOperationsOverviewRefresh = ({
     },
     [companyId, comparisonStrategy, enabled, endKey, lineIds, startKey, supabase, trendMode]
   );
-  const refreshSnapshot = React148__default.useCallback(
+  const refreshSnapshot = React125__default.useCallback(
     async (reason) => {
       await runRefresh(
         "snapshot",
@@ -90545,7 +91239,7 @@ var useOperationsOverviewRefresh = ({
     },
     [companyId, comparisonStrategy, endKey, lineIdsKey, runRefresh, scopeSignature, startKey, store, supabase, trendMode]
   );
-  const refreshTrend = React148__default.useCallback(
+  const refreshTrend = React125__default.useCallback(
     async (reason) => {
       await runRefresh(
         "trend",
@@ -90574,7 +91268,7 @@ var useOperationsOverviewRefresh = ({
     },
     [companyId, endKey, lineIdsKey, runRefresh, scopeSignature, startKey, store, supabase, trendMode]
   );
-  const refreshIdle = React148__default.useCallback(
+  const refreshIdle = React125__default.useCallback(
     async (reason) => {
       await runRefresh(
         "idle",
@@ -90603,7 +91297,7 @@ var useOperationsOverviewRefresh = ({
     },
     [companyId, endKey, lineIdsKey, runRefresh, scopeSignature, startKey, store, supabase, trendMode]
   );
-  const refreshImprovements = React148__default.useCallback(
+  const refreshImprovements = React125__default.useCallback(
     async (reason) => {
       await runRefresh(
         "improvements",
@@ -90633,7 +91327,7 @@ var useOperationsOverviewRefresh = ({
     },
     [companyId, lineIds, lineIdsKey, runRefresh, scopeSignature, store, supabase]
   );
-  const refreshAll = React148__default.useCallback(
+  const refreshAll = React125__default.useCallback(
     async (reason) => {
       await Promise.allSettled([
         refreshSnapshot(reason),
@@ -90644,7 +91338,7 @@ var useOperationsOverviewRefresh = ({
     },
     [refreshIdle, refreshImprovements, refreshSnapshot, refreshTrend]
   );
-  const startPolling = React148__default.useCallback((reason) => {
+  const startPolling = React125__default.useCallback((reason) => {
     if (!isLiveScope || !supabase || !companyId || lineIds.length === 0) {
       return;
     }
@@ -90665,7 +91359,7 @@ var useOperationsOverviewRefresh = ({
     }, LIVE_REFRESH_INTERVAL_MS);
     debugRefreshLog("poll started", { reason, intervalMs: LIVE_REFRESH_INTERVAL_MS });
   }, [companyId, isLiveScope, lineIds.length, refreshAll, stopPolling, supabase]);
-  const refreshFromResume = React148__default.useCallback((reason) => {
+  const refreshFromResume = React125__default.useCallback((reason) => {
     const now4 = Date.now();
     if (now4 - lastResumeRefreshAtRef.current < 1e3) {
       debugRefreshLog("resume refresh suppressed", { reason });
@@ -90680,7 +91374,7 @@ var useOperationsOverviewRefresh = ({
       }
     });
   }, [refreshAll, startPolling, stopPolling]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (!enabled) {
       stopPolling("disabled");
       abortAll();
@@ -90695,7 +91389,7 @@ var useOperationsOverviewRefresh = ({
     }
     void refreshAll("scope_change");
   }, [abortAll, companyId, enabled, lineIds.length, refreshAll, scopeSignature, stopPolling, store, supabase]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (!enabled || !isLiveScope || !supabase || !companyId || lineIds.length === 0) {
       isPageActiveRef.current = false;
       stopPolling("live_scope_disabled");
@@ -90908,55 +91602,55 @@ var PlantHeadView = () => {
   const { accessibleLineIds } = useUserLineAccess();
   const mobileMenuContext = useMobileMenu();
   useHideMobileHeader(!!mobileMenuContext);
-  const storeRef = React148__default.useRef(createOperationsOverviewStore());
+  const storeRef = React125__default.useRef(createOperationsOverviewStore());
   const store = storeRef.current;
-  const fallbackOperationalDate = React148__default.useMemo(
+  const fallbackOperationalDate = React125__default.useMemo(
     () => getOperationalDate(appTimezone),
     [appTimezone]
   );
-  const [dateRange, setDateRange] = React148__default.useState(() => ({
+  const [dateRange, setDateRange] = React125__default.useState(() => ({
     startKey: fallbackOperationalDate,
     endKey: fallbackOperationalDate
   }));
-  const [usesThisWeekComparison, setUsesThisWeekComparison] = React148__default.useState(false);
-  const [trendMode, setTrendMode] = React148__default.useState("all");
-  const [selectedSupervisorId, setSelectedSupervisorId] = React148__default.useState("all");
-  const [selectedLineIds, setSelectedLineIds] = React148__default.useState([]);
-  const [isInitialScopeReady, setIsInitialScopeReady] = React148__default.useState(false);
-  const [shiftResolutionTick, setShiftResolutionTick] = React148__default.useState(0);
-  const hasAutoInitializedScopeRef = React148__default.useRef(false);
-  const hasUserAdjustedScopeRef = React148__default.useRef(false);
-  React148__default.useEffect(() => {
+  const [usesThisWeekComparison, setUsesThisWeekComparison] = React125__default.useState(false);
+  const [trendMode, setTrendMode] = React125__default.useState("all");
+  const [selectedSupervisorId, setSelectedSupervisorId] = React125__default.useState("all");
+  const [selectedLineIds, setSelectedLineIds] = React125__default.useState([]);
+  const [isInitialScopeReady, setIsInitialScopeReady] = React125__default.useState(false);
+  const [shiftResolutionTick, setShiftResolutionTick] = React125__default.useState(0);
+  const hasAutoInitializedScopeRef = React125__default.useRef(false);
+  const hasUserAdjustedScopeRef = React125__default.useRef(false);
+  React125__default.useEffect(() => {
     trackCorePageView("Operations Overview", {
       dashboard_surface: "operations_overview"
     });
   }, []);
-  const currentWeekRange = React148__default.useMemo(
+  const currentWeekRange = React125__default.useMemo(
     () => getCurrentWeekToDateRange(appTimezone),
     [appTimezone]
   );
-  const currentWeekDisplayRange = React148__default.useMemo(
+  const currentWeekDisplayRange = React125__default.useMemo(
     () => getCurrentWeekFullRange(appTimezone),
     [appTimezone]
   );
   const isCurrentWeekToDateRange = dateRange.startKey === currentWeekRange.startKey && dateRange.endKey === currentWeekRange.endKey;
-  const headerDateRange = React148__default.useMemo(() => {
+  const headerDateRange = React125__default.useMemo(() => {
     if (usesThisWeekComparison && isCurrentWeekToDateRange) {
       return currentWeekDisplayRange;
     }
     return dateRange;
   }, [currentWeekDisplayRange, dateRange, isCurrentWeekToDateRange, usesThisWeekComparison]);
-  const normalizedLineIds = React148__default.useMemo(
+  const normalizedLineIds = React125__default.useMemo(
     () => Array.from(new Set(
       (accessibleLineIds || []).filter(Boolean).filter((lineId) => lineId !== factoryViewId)
     )).sort(),
     [accessibleLineIds, factoryViewId]
   );
-  const lineIdsKey = React148__default.useMemo(
+  const lineIdsKey = React125__default.useMemo(
     () => normalizedLineIds.join(","),
     [normalizedLineIds]
   );
-  const lineOptions = React148__default.useMemo(
+  const lineOptions = React125__default.useMemo(
     () => normalizedLineIds.map((lineId) => ({
       id: lineId,
       name: getLineDisplayName(entityConfig, lineId)
@@ -90968,7 +91662,7 @@ var PlantHeadView = () => {
     companyId: entityConfig.companyId,
     useBackend: true
   });
-  const supervisorOptions = React148__default.useMemo(
+  const supervisorOptions = React125__default.useMemo(
     () => {
       const optionsById = /* @__PURE__ */ new Map();
       normalizedLineIds.forEach((lineId) => {
@@ -90994,7 +91688,7 @@ var PlantHeadView = () => {
     },
     [normalizedLineIds, supervisorsByLineId]
   );
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (selectedSupervisorId === "all") {
       setSelectedLineIds((previous) => {
         if (normalizedLineIds.length === 0) {
@@ -91020,7 +91714,7 @@ var PlantHeadView = () => {
     const scopedSupervisorLineIds = normalizedLineIds.filter((lineId) => supervisorLineIdSet.has(lineId));
     setSelectedLineIds((previous) => previous.length === scopedSupervisorLineIds.length && previous.every((lineId, index) => lineId === scopedSupervisorLineIds[index]) ? previous : scopedSupervisorLineIds);
   }, [lineIdsKey, normalizedLineIds, selectedSupervisorId, supervisorOptions]);
-  const scopedLineIds = React148__default.useMemo(
+  const scopedLineIds = React125__default.useMemo(
     () => selectedLineIds.length > 0 ? selectedLineIds : normalizedLineIds,
     [normalizedLineIds, selectedLineIds]
   );
@@ -91028,7 +91722,7 @@ var PlantHeadView = () => {
     shiftConfigMap,
     isLoading: isShiftConfigLoading
   } = useMultiLineShiftConfigs(scopedLineIds, staticShiftConfig);
-  const shiftFilterOptions = React148__default.useMemo(() => {
+  const shiftFilterOptions = React125__default.useMemo(() => {
     const optionsById = /* @__PURE__ */ new Map();
     scopedLineIds.forEach((lineId) => {
       const shiftConfig = shiftConfigMap.get(lineId) || staticShiftConfig;
@@ -91067,7 +91761,7 @@ var PlantHeadView = () => {
       ...dynamicOptions
     ];
   }, [appTimezone, scopedLineIds, shiftConfigMap, staticShiftConfig]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (scopedLineIds.length === 0 || isShiftConfigLoading) {
       return;
     }
@@ -91078,11 +91772,11 @@ var PlantHeadView = () => {
       clearInterval(intervalId);
     };
   }, [isShiftConfigLoading, scopedLineIds.length]);
-  const shiftResolutionNow = React148__default.useMemo(
+  const shiftResolutionNow = React125__default.useMemo(
     () => /* @__PURE__ */ new Date(),
     [shiftResolutionTick]
   );
-  const earliestDayShiftStartTime = React148__default.useMemo(() => {
+  const earliestDayShiftStartTime = React125__default.useMemo(() => {
     const candidateStarts = [];
     scopedLineIds.forEach((lineId) => {
       const shiftConfig = shiftConfigMap.get(lineId) || staticShiftConfig;
@@ -91118,11 +91812,11 @@ var PlantHeadView = () => {
     const minutes = earliestMinutes % 60;
     return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
   }, [appTimezone, scopedLineIds, shiftConfigMap, staticShiftConfig]);
-  const resolvedOperationalToday = React148__default.useMemo(
+  const resolvedOperationalToday = React125__default.useMemo(
     () => getOperationalDate(appTimezone, shiftResolutionNow, earliestDayShiftStartTime),
     [appTimezone, earliestDayShiftStartTime, shiftResolutionNow]
   );
-  const activeLineShiftStates = React148__default.useMemo(() => {
+  const activeLineShiftStates = React125__default.useMemo(() => {
     return scopedLineIds.flatMap((lineId) => {
       const shiftConfig = shiftConfigMap.get(lineId) || staticShiftConfig;
       const activeShift = getActiveShift(appTimezone, shiftConfig, shiftResolutionNow);
@@ -91152,7 +91846,7 @@ var PlantHeadView = () => {
     });
   }, [appTimezone, scopedLineIds, shiftConfigMap, shiftResolutionNow, staticShiftConfig]);
   const resolvedTrendMode = isInitialScopeReady ? trendMode : "all";
-  const hourlyWindowStartTime = React148__default.useMemo(() => {
+  const hourlyWindowStartTime = React125__default.useMemo(() => {
     if (scopedLineIds.length === 0) {
       return null;
     }
@@ -91209,12 +91903,12 @@ var PlantHeadView = () => {
     const minutes = earliestMinutes % 60;
     return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
   }, [appTimezone, resolvedTrendMode, scopedLineIds, shiftConfigMap, staticShiftConfig]);
-  const isShiftScopeResolved = React148__default.useMemo(
+  const isShiftScopeResolved = React125__default.useMemo(
     () => !isShiftConfigLoading,
     [isShiftConfigLoading]
   );
-  const initializedTimezoneRef = React148__default.useRef(appTimezone);
-  React148__default.useEffect(() => {
+  const initializedTimezoneRef = React125__default.useRef(appTimezone);
+  React125__default.useEffect(() => {
     if (initializedTimezoneRef.current === appTimezone) return;
     hasAutoInitializedScopeRef.current = false;
     hasUserAdjustedScopeRef.current = false;
@@ -91227,7 +91921,7 @@ var PlantHeadView = () => {
     setIsInitialScopeReady(false);
     initializedTimezoneRef.current = appTimezone;
   }, [appTimezone, fallbackOperationalDate]);
-  React148__default.useEffect(() => {
+  React125__default.useEffect(() => {
     if (hasAutoInitializedScopeRef.current || hasUserAdjustedScopeRef.current) {
       return;
     }
@@ -91252,7 +91946,7 @@ var PlantHeadView = () => {
     hasAutoInitializedScopeRef.current = true;
     setIsInitialScopeReady(true);
   }, [fallbackOperationalDate, isShiftScopeResolved, resolvedOperationalToday, scopedLineIds.length]);
-  const handleDateRangeChange = React148__default.useCallback((range, meta) => {
+  const handleDateRangeChange = React125__default.useCallback((range, meta) => {
     hasUserAdjustedScopeRef.current = true;
     setIsInitialScopeReady(true);
     trackCoreEvent("Operations Overview Date Range Changed", {
@@ -91270,12 +91964,12 @@ var PlantHeadView = () => {
       return previous;
     });
   }, []);
-  const handleTrendModeChange = React148__default.useCallback((mode) => {
+  const handleTrendModeChange = React125__default.useCallback((mode) => {
     hasUserAdjustedScopeRef.current = true;
     setIsInitialScopeReady(true);
     setTrendMode(mode);
   }, []);
-  const handleSelectedLineIdsChange = React148__default.useCallback((lineIds) => {
+  const handleSelectedLineIdsChange = React125__default.useCallback((lineIds) => {
     setSelectedSupervisorId("all");
     if (normalizedLineIds.length === 0) {
       setSelectedLineIds([]);
@@ -91286,10 +91980,10 @@ var PlantHeadView = () => {
     const next = normalizedLineIds.filter((lineId) => selectedSet.has(lineId));
     setSelectedLineIds(next.length > 0 ? next : normalizedLineIds);
   }, [normalizedLineIds]);
-  const handleSelectedSupervisorIdChange = React148__default.useCallback((supervisorId) => {
+  const handleSelectedSupervisorIdChange = React125__default.useCallback((supervisorId) => {
     setSelectedSupervisorId(supervisorId);
   }, []);
-  const buildLineMonthlyHistoryUrl = React148__default.useCallback((lineId) => {
+  const buildLineMonthlyHistoryUrl = React125__default.useCallback((lineId) => {
     const rangeStartDate = parseDateKeyToDate(dateRange.startKey);
     const params = new URLSearchParams();
     params.set("tab", "monthly_history");
@@ -91299,15 +91993,15 @@ var PlantHeadView = () => {
     params.set("rangeEnd", dateRange.endKey);
     return `/kpis/${lineId}?${params.toString()}`;
   }, [dateRange.endKey, dateRange.startKey]);
-  const handleViewAllPoorestPerformers = React148__default.useCallback(() => {
+  const handleViewAllPoorestPerformers = React125__default.useCallback(() => {
     trackCoreEvent("Operations Overview View All Clicked", { section: "poorest_performers" });
     navigate("/kpis?tab=leaderboard");
   }, [navigate]);
-  const handleViewAllImprovements = React148__default.useCallback(() => {
+  const handleViewAllImprovements = React125__default.useCallback(() => {
     trackCoreEvent("Operations Overview View All Clicked", { section: "improvements" });
     navigate("/improvement-center");
   }, [navigate]);
-  const handleOpenImprovement = React148__default.useCallback((item) => {
+  const handleOpenImprovement = React125__default.useCallback((item) => {
     trackCoreEvent("Operations Overview Improvement Clicked", {
       issue_id: item.issueId,
       issue_number: item.issueNumber,
@@ -91318,13 +92012,13 @@ var PlantHeadView = () => {
     });
     navigate(`/improvement-center?${params.toString()}`);
   }, [navigate]);
-  const comparisonStrategy = React148__default.useMemo(() => {
+  const comparisonStrategy = React125__default.useMemo(() => {
     if (usesThisWeekComparison && isCurrentWeekToDateRange) {
       return "previous_full_week";
     }
     return void 0;
   }, [isCurrentWeekToDateRange, usesThisWeekComparison]);
-  const effectiveDateRange = React148__default.useMemo(() => {
+  const effectiveDateRange = React125__default.useMemo(() => {
     if (isInitialScopeReady) {
       return dateRange;
     }
@@ -91334,11 +92028,11 @@ var PlantHeadView = () => {
       endKey: nextStartKey
     };
   }, [dateRange, fallbackOperationalDate, isInitialScopeReady, resolvedOperationalToday]);
-  const effectiveTrendMode = React148__default.useMemo(
+  const effectiveTrendMode = React125__default.useMemo(
     () => resolvedTrendMode,
     [resolvedTrendMode]
   );
-  const hasActiveSelectedShiftLine = React148__default.useMemo(
+  const hasActiveSelectedShiftLine = React125__default.useMemo(
     () => activeLineShiftStates.some((shift) => {
       if (shift.date !== resolvedOperationalToday) return false;
       if (effectiveTrendMode === "all") return true;
@@ -91350,7 +92044,7 @@ var PlantHeadView = () => {
     }),
     [activeLineShiftStates, effectiveTrendMode, resolvedOperationalToday]
   );
-  const activeLiveShiftName = React148__default.useMemo(
+  const activeLiveShiftName = React125__default.useMemo(
     () => {
       if (effectiveTrendMode === "all") return null;
       const matchingShift = activeLineShiftStates.find((shift) => {
@@ -91365,17 +92059,17 @@ var PlantHeadView = () => {
     },
     [activeLineShiftStates, effectiveTrendMode, resolvedOperationalToday]
   );
-  const hourlyLabelStartTime = React148__default.useMemo(() => {
+  const hourlyLabelStartTime = React125__default.useMemo(() => {
     if (scopedLineIds.length === 0) {
       return null;
     }
     return hourlyWindowStartTime;
   }, [hourlyWindowStartTime, scopedLineIds.length]);
-  const isSingleDayScope = React148__default.useMemo(
+  const isSingleDayScope = React125__default.useMemo(
     () => effectiveDateRange.startKey === effectiveDateRange.endKey,
     [effectiveDateRange.endKey, effectiveDateRange.startKey]
   );
-  const isLiveScope = React148__default.useMemo(
+  const isLiveScope = React125__default.useMemo(
     () => isSingleDayScope && effectiveDateRange.startKey === resolvedOperationalToday && hasActiveSelectedShiftLine,
     [
       effectiveDateRange.startKey,
@@ -91385,7 +92079,7 @@ var PlantHeadView = () => {
       resolvedOperationalToday
     ]
   );
-  const handleOpenLineDetails = React148__default.useCallback((line) => {
+  const handleOpenLineDetails = React125__default.useCallback((line) => {
     trackCoreEvent("Operations Overview Line Clicked", {
       line_id: line.rowType === "line" ? line.id : null,
       line_name: line.name,