@optifye/dashboard-core 6.12.5 → 6.12.7

package/dist/index.js

@@ -5257,46 +5257,83 @@ var dashboardService = {
     const dbConfig = config.databaseConfig ?? DEFAULT_DATABASE_CONFIG;
     const linesTable = getTable(dbConfig, "lines");
     const companyId = config.entityConfig?.companyId;
+    const baseLineSelect = `
+      id,
+      line_name,
+      factory_id,
+      factories!lines_factory_id_fkey(factory_name),
+      company_id,
+      companies!lines_company_id_fkey(company_name:name),
+      enable,
+      monitoring_mode,
+      assembly,
+      video_grid_metric_mode,
+      recent_flow_window_minutes
+    `;
+    const lineSelectWithArea = `
+      ${baseLineSelect},
+      factory_area_id,
+      factory_line_areas!lines_factory_area_id_factory_id_fkey(
+        area_key,
+        area_name,
+        sort_order,
+        enabled
+      )
+    `;
+    const shouldRetryWithoutFactoryArea = (error) => {
+      const errorText = [
+        error?.message,
+        error?.details,
+        error?.hint,
+        error?.code
+      ].filter(Boolean).join(" ").toLowerCase();
+      return errorText.includes("factory_area_id") || errorText.includes("factory_line_areas") || errorText.includes("lines_factory_area_id_factory_id_fkey");
+    };
     try {
-      let query = supabase.from(linesTable).select(`
-          id,
-          line_name,
-          factory_id,
-          factories!lines_factory_id_fkey(factory_name),
-          company_id,
-          companies!lines_company_id_fkey(company_name:name),
-          enable,
-          monitoring_mode,
-          assembly,
-          video_grid_metric_mode,
-          recent_flow_window_minutes
-        `).eq("enable", true);
-      if (companyId) {
-        query = query.eq("company_id", companyId);
-      }
-      const { data, error } = await query;
+      const fetchLines = async (selectClause) => {
+        let query = supabase.from(linesTable).select(selectClause).eq("enable", true);
+        if (companyId) {
+          query = query.eq("company_id", companyId);
+        }
+        return await query;
+      };
+      let { data, error } = await fetchLines(lineSelectWithArea);
+      if (error && shouldRetryWithoutFactoryArea(error)) {
+        console.warn("[dashboardService.getAllLines] Factory area metadata unavailable, falling back to line-only metadata:", error);
+        const fallbackResult = await fetchLines(baseLineSelect);
+        data = fallbackResult.data;
+        error = fallbackResult.error;
+      }
       if (error) {
         console.error("Error fetching all lines:", error);
         throw error;
       }
       if (!data) return [];
-      const transformedLines = data.map((line) => ({
-        id: line.id,
-        line_name: line.line_name,
-        factory_id: line.factory_id,
-        factory_name: line.factories?.factory_name ?? "N/A",
-        company_id: line.company_id,
-        company_name: line.companies?.company_name ?? "N/A",
-        enable: line.enable ?? true,
-        // Default to true if not specified
-        monitoring_mode: line.monitoring_mode ?? "output",
-        assembly: line.assembly ?? false,
-        video_grid_metric_mode: normalizeVideoGridMetricMode(
-          line.video_grid_metric_mode,
-          line.assembly ?? false
-        ),
-        recent_flow_window_minutes: line.recent_flow_window_minutes ?? 7
-      }));
+      const transformedLines = data.map((line) => {
+        const factoryArea = Array.isArray(line.factory_line_areas) ? line.factory_line_areas[0] : line.factory_line_areas;
+        return {
+          id: line.id,
+          line_name: line.line_name,
+          factory_id: line.factory_id,
+          factory_name: line.factories?.factory_name ?? "N/A",
+          company_id: line.company_id,
+          company_name: line.companies?.company_name ?? "N/A",
+          enable: line.enable ?? true,
+          // Default to true if not specified
+          monitoring_mode: line.monitoring_mode ?? "output",
+          assembly: line.assembly ?? false,
+          video_grid_metric_mode: normalizeVideoGridMetricMode(
+            line.video_grid_metric_mode,
+            line.assembly ?? false
+          ),
+          recent_flow_window_minutes: line.recent_flow_window_minutes ?? 7,
+          factory_area_id: line.factory_area_id ?? null,
+          factory_area_key: factoryArea?.area_key ?? null,
+          factory_area_name: factoryArea?.area_name ?? null,
+          factory_area_sort_order: factoryArea?.sort_order ?? null,
+          factory_area_enabled: factoryArea?.enabled ?? null
+        };
+      });
       return transformedLines;
     } catch (err) {
       console.error("Exception in getAllLines:", err);
@@ -14265,7 +14302,9 @@ var useLeaderboardMetrics = (date, shiftId, limit = 10, filter2 = "all") => {
         `/api/dashboard/leaderboard?${params.toString()}`
       );
       let entries = (data.entries || []).slice();
-      entries.sort((a, b) => (b.efficiency || 0) - (a.efficiency || 0));
+      entries.sort(
+        (a, b) => (b.leaderboard_value ?? b.efficiency ?? 0) - (a.leaderboard_value ?? a.efficiency ?? 0)
+      );
       if (filter2 === "top") {
         entries = entries.slice(0, limit);
       } else if (filter2 === "bottom") {
@@ -21902,6 +21941,24 @@ var getConfigurableShortWorkspaceDisplayName = (workspaceId, workspaceConfig, li
   return fullName;
 };
 
+// src/lib/utils/efficiencyValidity.ts
+var MIN_VALID_OUTPUT_EFFICIENCY = 5;
+var MIN_VALID_UPTIME_EFFICIENCY = 1;
+var normalizeMonitoringMode = (mode) => String(mode ?? "").trim().toLowerCase() === "uptime" ? "uptime" : "output";
+var toFiniteNumberOrNull = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+var isValidAggregateEfficiency = (monitoringMode, efficiency) => {
+  const value = toFiniteNumberOrNull(efficiency);
+  if (value === null) return false;
+  return normalizeMonitoringMode(monitoringMode) === "uptime" ? value >= MIN_VALID_UPTIME_EFFICIENCY : value >= MIN_VALID_OUTPUT_EFFICIENCY;
+};
+
 // src/lib/utils/kpis.ts
 var toNumber = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) return value;
@@ -21957,7 +22014,9 @@ var buildKPIsFromLineMetricsRow = (row) => {
 };
 var aggregateKPIsFromLineMetricsRows = (rows) => {
   if (!rows || rows.length === 0) return createDefaultKPIs();
-  const eligibleRows = rows.filter((row) => toNumber(row?.avg_efficiency) >= 5);
+  const eligibleRows = rows.filter(
+    (row) => isValidAggregateEfficiency(row?.monitoring_mode ?? row?.monitoringMode, row?.avg_efficiency)
+  );
   if (eligibleRows.length === 0) return createDefaultKPIs();
   const currentOutputSum = eligibleRows.reduce((sum, row) => sum + toNumber(row.current_output), 0);
   const lineThresholdSum = eligibleRows.reduce(
@@ -22009,6 +22068,84 @@ var aggregateKPIsFromLineMetricsRows = (rows) => {
   };
 };
 
+// src/lib/utils/kpiHierarchy.ts
+var FACTORY_LEVEL_MIN_FACTORY_COUNT = 3;
+var compareText = (left, right) => left.localeCompare(right, void 0, { sensitivity: "base", numeric: true });
+var compareLinesByName = (left, right) => compareText(left.line_name || "", right.line_name || "");
+var normalizeAreaSortOrder = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+var getEnabledAreaInfo = (line) => {
+  if (!line.factory_area_id) return null;
+  if (line.factory_area_enabled !== true) return null;
+  if (!line.factory_area_name || line.factory_area_name.trim().length === 0) return null;
+  return {
+    id: line.factory_area_id,
+    areaName: line.factory_area_name,
+    areaKey: line.factory_area_key ?? null,
+    sortOrder: normalizeAreaSortOrder(line.factory_area_sort_order)
+  };
+};
+var buildKpiLineHierarchy = (lines) => {
+  const factoryMap = /* @__PURE__ */ new Map();
+  lines.forEach((line) => {
+    const factoryId = line.factory_id || "unknown-factory";
+    let factory = factoryMap.get(factoryId);
+    if (!factory) {
+      factory = {
+        id: factoryId,
+        factoryName: line.factory_name || "Factory",
+        lines: [],
+        areas: [],
+        ungroupedLines: [],
+        areaMap: /* @__PURE__ */ new Map()
+      };
+      factoryMap.set(factoryId, factory);
+    }
+    factory.lines.push(line);
+    const areaInfo = getEnabledAreaInfo(line);
+    if (!areaInfo) {
+      factory.ungroupedLines.push(line);
+      return;
+    }
+    let area = factory.areaMap.get(areaInfo.id);
+    if (!area) {
+      area = {
+        id: areaInfo.id,
+        areaName: areaInfo.areaName,
+        areaKey: areaInfo.areaKey,
+        sortOrder: areaInfo.sortOrder,
+        lines: []
+      };
+      factory.areaMap.set(areaInfo.id, area);
+      factory.areas.push(area);
+    }
+    area.lines.push(line);
+  });
+  const factories = Array.from(factoryMap.values()).map(({ areaMap: _areaMap, ...factory }) => {
+    factory.lines.sort(compareLinesByName);
+    factory.ungroupedLines.sort(compareLinesByName);
+    factory.areas.forEach((area) => area.lines.sort(compareLinesByName));
+    factory.areas.sort((left, right) => {
+      const leftOrder = left.sortOrder ?? Number.POSITIVE_INFINITY;
+      const rightOrder = right.sortOrder ?? Number.POSITIVE_INFINITY;
+      if (leftOrder !== rightOrder) return leftOrder - rightOrder;
+      return compareText(left.areaName, right.areaName);
+    });
+    return factory;
+  });
+  factories.sort((left, right) => compareText(left.factoryName, right.factoryName));
+  return {
+    factories,
+    showFactoryLevel: factories.length >= FACTORY_LEVEL_MIN_FACTORY_COUNT
+  };
+};
+
 // src/lib/utils/awards.ts
 var toNumber2 = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) return value;
@@ -37285,8 +37422,8 @@ var HourlyOutputChart = React144__namespace.default.memo(
 HourlyOutputChart.displayName = "HourlyOutputChart";
 
 // src/components/dashboard/grid/videoGridMetricUtils.ts
+var VIDEO_GRID_LEGEND_LABEL = "Real-Time efficiency";
 var MAP_GRID_LEGEND_LABEL = "Efficiency";
-var MIXED_VIDEO_GRID_LEGEND_LABEL = "Live Efficiency";
 var isFiniteNumber2 = (value) => typeof value === "number" && Number.isFinite(value);
 var isVideoGridRecentFlowEnabled = (workspace) => isRecentFlowVideoGridMetricMode(
   workspace.video_grid_metric_mode,
@@ -37298,7 +37435,7 @@ var isVideoGridWipGated = (workspace) => isWipGatedVideoGridMetricMode(
 );
 var hasVideoGridRecentFlow = (workspace) => isVideoGridRecentFlowEnabled(workspace) && isFiniteNumber2(workspace.recent_flow_percent);
 var isVideoGridRecentFlowUnavailable = (workspace) => isVideoGridRecentFlowEnabled(workspace) && !hasVideoGridRecentFlow(workspace);
-var getVideoGridMetricValue = (workspace) => {
+var getRawVideoGridMetricValue = (workspace) => {
   const recentFlowPercent = workspace.recent_flow_percent;
   if (hasVideoGridRecentFlow(workspace) && isFiniteNumber2(recentFlowPercent)) {
     return recentFlowPercent;
@@ -37310,7 +37447,7 @@ var getVideoGridMetricValue = (workspace) => {
 };
 var hasIncomingWipMapping = (workspace) => Boolean(workspace.incoming_wip_buffer_name);
 var getVideoGridBaseColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
-  const metricValue = getVideoGridMetricValue(workspace);
+  const metricValue = getRawVideoGridMetricValue(workspace);
   if (!isFiniteNumber2(metricValue)) {
     return "neutral";
   }
@@ -37334,6 +37471,25 @@ var isLowWipGreenOverride = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
   }
   return isFiniteNumber2(workspace.incoming_wip_current) && workspace.incoming_wip_current <= 1;
 };
+var isHighEfficiencyRedFlowOverride = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
+  if (workspace.scheduled_break_active === true) {
+    return false;
+  }
+  if (workspace.recent_flow_forced_zero_after_shift === true) {
+    return false;
+  }
+  if (!hasVideoGridRecentFlow(workspace) || !isVideoGridWipGated(workspace)) {
+    return false;
+  }
+  if (isLowWipGreenOverride(workspace, legend)) {
+    return false;
+  }
+  if (getVideoGridBaseColorState(workspace, legend) !== "red") {
+    return false;
+  }
+  return isFiniteNumber2(workspace.efficiency) && workspace.efficiency > 100;
+};
+var getVideoGridMetricValue = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => isHighEfficiencyRedFlowOverride(workspace, legend) ? workspace.efficiency : getRawVideoGridMetricValue(workspace);
 var toMinuteBucket = (minuteBucket) => Number.isFinite(minuteBucket) ? Math.floor(minuteBucket) : Math.floor(Date.now() / 6e4);
 var getEffectiveFlowMinuteBucket = (workspace) => {
   const effectiveAt = workspace.recent_flow_effective_end_at;
@@ -37359,7 +37515,7 @@ var getSyntheticLowWipDisplayValue = (workspace, minuteBucket) => {
   const offset = (hashWorkspaceKey(workspace) % 11 + bucket % 11 + 11) % 11;
   return 100 + offset;
 };
-var getVideoGridDisplayValue = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND, minuteBucket) => isLowWipGreenOverride(workspace, legend) ? getSyntheticLowWipDisplayValue(workspace, minuteBucket) : getVideoGridMetricValue(workspace);
+var getVideoGridDisplayValue = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND, minuteBucket) => isLowWipGreenOverride(workspace, legend) ? getSyntheticLowWipDisplayValue(workspace, minuteBucket) : getVideoGridMetricValue(workspace, legend);
 var getVideoGridColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
   const baseColor = getVideoGridBaseColorState(workspace, legend);
   if (!hasVideoGridRecentFlow(workspace)) {
@@ -37371,15 +37527,18 @@ var getVideoGridColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) =>
   if (baseColor !== "red") {
     return baseColor;
   }
+  if (isLowWipGreenOverride(workspace, legend)) {
+    return "green";
+  }
+  if (isHighEfficiencyRedFlowOverride(workspace, legend)) {
+    return getEfficiencyColor(workspace.efficiency, legend);
+  }
   if (!hasIncomingWipMapping(workspace)) {
     return baseColor;
   }
   if (!isFiniteNumber2(workspace.incoming_wip_current)) {
     return "neutral";
   }
-  if (isLowWipGreenOverride(workspace, legend)) {
-    return "green";
-  }
   return baseColor;
 };
 var getVideoGridLegendLabel = (workspaces) => {
@@ -37387,21 +37546,7 @@ var getVideoGridLegendLabel = (workspaces) => {
   if (visibleWorkspaces.length === 0) {
     return MAP_GRID_LEGEND_LABEL;
   }
-  const recentFlowEnabledCount = visibleWorkspaces.filter(isVideoGridRecentFlowEnabled).length;
-  if (recentFlowEnabledCount === 0) {
-    return MAP_GRID_LEGEND_LABEL;
-  }
-  const recentFlowWindows = new Set(
-    visibleWorkspaces.filter(isVideoGridRecentFlowEnabled).map((workspace) => workspace.recent_flow_window_minutes ?? 7).filter((value) => typeof value === "number" && Number.isFinite(value))
-  );
-  if (recentFlowEnabledCount === visibleWorkspaces.length) {
-    if (recentFlowWindows.size === 1) {
-      const [windowMinutes] = Array.from(recentFlowWindows);
-      return `${windowMinutes} Minute Efficiency`;
-    }
-    return MIXED_VIDEO_GRID_LEGEND_LABEL;
-  }
-  return MIXED_VIDEO_GRID_LEGEND_LABEL;
+  return visibleWorkspaces.some(isVideoGridRecentFlowEnabled) ? VIDEO_GRID_LEGEND_LABEL : MAP_GRID_LEGEND_LABEL;
 };
 function getTrendArrowAndColor(trend) {
   if (trend > 0) {
@@ -37444,14 +37589,15 @@ var VideoCard = React144__namespace.default.memo(({
   const showOffline = Boolean(isStreamStale);
   const lastSeenText = lastSeenLabel || "Unknown";
   const workspaceDisplayName = displayName || workspace.displayName || workspace.workspace_name;
-  const videoGridMetricValue = getVideoGridMetricValue(workspace);
+  const videoGridMetricValue = getVideoGridMetricValue(workspace, effectiveLegend);
   const videoGridDisplayValue = getVideoGridDisplayValue(workspace, effectiveLegend, displayMinuteBucket);
   const videoGridColorState = getVideoGridColorState(workspace, effectiveLegend);
   const isRecentFlowCard = isVideoGridRecentFlowEnabled(workspace);
+  const isHighEfficiencyOverride = isHighEfficiencyRedFlowOverride(workspace, effectiveLegend);
   const hasDisplayMetric = typeof videoGridDisplayValue === "number" && Number.isFinite(videoGridDisplayValue);
   const hasBarMetric = typeof videoGridMetricValue === "number" && Number.isFinite(videoGridMetricValue);
   const shouldRenderMetricBadge = hasDisplayMetric;
-  const badgeTitle = hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
+  const badgeTitle = isHighEfficiencyOverride ? `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%` : hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
   const badgeLabel = `${Math.round(videoGridDisplayValue ?? 0)}%`;
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
@@ -38234,7 +38380,8 @@ var WorkspaceMetricCardsImpl = ({
   legend,
   skuAware,
   skuBreakdown,
-  activeSkuId
+  activeSkuId,
+  liveSkuId
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const activeSku = React144__namespace.default.useMemo(() => {
@@ -38243,6 +38390,13 @@ var WorkspaceMetricCardsImpl = ({
     }
     return null;
   }, [skuAware, activeSkuId, skuBreakdown]);
+  const displaySku = React144__namespace.default.useMemo(() => {
+    if (activeSku) return activeSku;
+    if (skuAware && !activeSkuId && liveSkuId && skuBreakdown) {
+      return skuBreakdown.find((s) => s.sku_id === liveSkuId) ?? null;
+    }
+    return null;
+  }, [activeSku, skuAware, activeSkuId, liveSkuId, skuBreakdown]);
   const pphValue = activeSku ? activeSku.avg_pph : workspace.avg_pph;
   const pphThreshold = activeSku ? activeSku.pph_threshold : workspace.pph_threshold;
   const cycleValue = activeSku ? activeSku.avg_cycle_time : workspace.avg_cycle_time;
@@ -38277,7 +38431,7 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CardHeader2, { className: "pb-2 flex-none text-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg", children: "PPH" }),
-        activeSku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: activeSku.sku_code, children: activeSku.sku_code })
+        displaySku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySku.sku_code, children: displaySku.sku_code })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6 sm:py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold ${pphValue >= pphThreshold ? "text-green-500" : "text-red-500"}`, children: pphValue.toFixed(1) }),
@@ -38290,7 +38444,7 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CardHeader2, { className: "pb-2 flex-none text-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg", children: "Avg. Cycle Time" }),
-        activeSku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: activeSku.sku_code, children: activeSku.sku_code })
+        displaySku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySku.sku_code, children: displaySku.sku_code })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6 sm:py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold ${cycleValue > (cycleStandard || 0) ? "text-red-500" : "text-green-500"}`, children: cycleValue.toFixed(1) }),
@@ -43288,6 +43442,21 @@ var parseCycleTime = (value) => {
 var extractCycleTimeSeconds = (clip) => {
   return parseCycleTime(clip?.cycleTimeSeconds) ?? parseCycleTime(clip?.cycle_time_seconds) ?? parseCycleTime(clip?.duration) ?? parseCycleTime(clip?.original_task_metadata?.cycle_time) ?? null;
 };
+var formatDurationLabel = (seconds) => {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds <= 0) {
+    return null;
+  }
+  const roundedSeconds = Math.round(seconds);
+  if (roundedSeconds < 60) {
+    return `${roundedSeconds}s`;
+  }
+  const minutes = Math.floor(roundedSeconds / 60);
+  const remainingSeconds = roundedSeconds % 60;
+  if (minutes < 10) {
+    return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+  }
+  return `${Math.round(roundedSeconds / 60)} min`;
+};
 var getSeverityIcon = (severity, categoryId, cycleTimeSeconds, targetCycleTime, clipId) => {
   if (categoryId === "idle_time" || categoryId === "low_value" || categoryId === "longest-idles") {
     return null;
@@ -43363,7 +43532,9 @@ var FileManagerFilters = ({
   idleTimeVlmEnabled = false,
   showPercentileCycleFilters = true,
   prefetchedClipMetadata,
-  activeCategoryLoading
+  activeCategoryLoading,
+  idleClipSort = "latest",
+  onIdleClipSortChange
 }) => {
   const [expandedNodes, setExpandedNodes] = React144.useState(/* @__PURE__ */ new Set());
   const [startTime, setStartTime] = React144.useState("");
@@ -43386,6 +43557,7 @@ var FileManagerFilters = ({
   const [localClipClassifications, setLocalClipClassifications] = React144.useState({});
   const clipMetadataRef = React144.useRef({});
   const inFlightMetadataRequestsRef = React144.useRef(/* @__PURE__ */ new Set());
+  const previousIdleClipSortRef = React144.useRef(idleClipSort);
   const mergedClipClassifications = React144.useMemo(() => ({
     ...clipClassifications || {},
     ...localClipClassifications
@@ -43393,6 +43565,36 @@ var FileManagerFilters = ({
   React144.useEffect(() => {
     clipMetadataRef.current = clipMetadata;
   }, [clipMetadata]);
+  React144.useEffect(() => {
+    if (previousIdleClipSortRef.current === idleClipSort) {
+      return;
+    }
+    previousIdleClipSortRef.current = idleClipSort;
+    setClipMetadata((prev) => {
+      if (!prev.idle_time) {
+        return prev;
+      }
+      const next = { ...prev };
+      delete next.idle_time;
+      return next;
+    });
+    setCategoryPages((prev) => {
+      if (prev.idle_time === void 0) {
+        return prev;
+      }
+      const next = { ...prev };
+      delete next.idle_time;
+      return next;
+    });
+    setCategoryHasMore((prev) => {
+      if (prev.idle_time === void 0) {
+        return prev;
+      }
+      const next = { ...prev };
+      delete next.idle_time;
+      return next;
+    });
+  }, [idleClipSort]);
   const isCategoryExternallyManaged = React144.useCallback((categoryId) => {
     if (!categoryId) {
       return false;
@@ -43551,6 +43753,7 @@ var FileManagerFilters = ({
       return null;
     }
   }, [supabase]);
+  const getMetadataLoadingKey = React144.useCallback((categoryId, page) => `${categoryId}-${page}-${categoryId === "idle_time" ? idleClipSort : "latest"}`, [idleClipSort]);
   const fetchClipMetadataPage = React144.useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       throw new Error("Missing required params for clip metadata fetch");
@@ -43570,7 +43773,8 @@ var FileManagerFilters = ({
         limit: CLIP_METADATA_PAGE_SIZE,
         knownTotal: typeof counts?.[categoryId] === "number" ? counts[categoryId] : null,
         snapshotDateTime,
-        snapshotClipId
+        snapshotClipId,
+        sort: categoryId === "idle_time" ? idleClipSort : "latest"
       }),
       redirectReason: "session_expired"
     });
@@ -43578,7 +43782,7 @@ var FileManagerFilters = ({
       throw new Error(`API error: ${response.status}`);
     }
     return response.json();
-  }, [workspaceId, date, shift, counts, snapshotDateTime, snapshotClipId, supabase]);
+  }, [workspaceId, date, shift, counts, snapshotDateTime, snapshotClipId, idleClipSort, supabase]);
   const seedIdleClassifications = React144.useCallback(async (clips) => {
     if (!idleTimeVlmEnabled || clips.length === 0) {
       return;
@@ -43634,7 +43838,7 @@ var FileManagerFilters = ({
       console.warn("[FileManager] Missing required params for clip metadata fetch");
       return;
     }
-    const loadingKey = `${categoryId}-${page}`;
+    const loadingKey = getMetadataLoadingKey(categoryId, page);
     if (inFlightMetadataRequestsRef.current.has(loadingKey)) {
       return;
     }
@@ -43662,7 +43866,7 @@ var FileManagerFilters = ({
         return newSet;
       });
     }
-  }, [workspaceId, date, shift, fetchClipMetadataPage, idleTimeVlmEnabled, seedIdleClassifications]);
+  }, [workspaceId, date, shift, fetchClipMetadataPage, idleTimeVlmEnabled, seedIdleClassifications, getMetadataLoadingKey]);
   const ensureAllIdleTimeClipMetadataLoaded = React144.useCallback(async () => {
     if (!workspaceId || !date || shift === void 0) {
       return;
@@ -44036,15 +44240,17 @@ var FileManagerFilters = ({
         const colorClasses = getColorClasses(category.color);
         const clipNodes = filteredClips.map((clip, index) => {
           const cycleTime = extractCycleTimeSeconds(clip);
+          const idleDuration = category.id === "idle_time" ? clip.idle_duration_seconds ?? clip.duration : null;
+          const idleDurationLabel = formatDurationLabel(idleDuration);
           const baseTimeLabel = formatClipExplorerTimeLabel({
             categoryId: category.id,
             clipTimestamp: clip.clip_timestamp,
             timezone,
-            durationSeconds: clip.duration,
+            durationSeconds: idleDuration ?? clip.duration,
             idleStartTime: clip.idle_start_time,
             idleEndTime: clip.idle_end_time
           });
-          const displayLabel = `${baseTimeLabel}${clip.duration && category.id !== "idle_time" && category.id !== "low_value" ? ` - (${clip.duration.toFixed(1)}s)` : ""}`;
+          const displayLabel = `${baseTimeLabel}${idleDurationLabel && category.id === "idle_time" ? ` - (${idleDurationLabel})` : ""}${clip.duration && category.id !== "idle_time" && category.id !== "low_value" ? ` - (${clip.duration.toFixed(1)}s)` : ""}`;
           return {
             id: clip.id,
             label: displayLabel,
@@ -44058,7 +44264,7 @@ var FileManagerFilters = ({
             clipPosition: index + 1,
             // Store 1-based position
             cycleTimeSeconds: cycleTime,
-            duration: clip.duration,
+            duration: idleDuration ?? clip.duration,
             // Store duration for custom badge rendering
             cycleItemCount: clip.cycle_item_count ?? null
           };
@@ -44380,11 +44586,11 @@ var FileManagerFilters = ({
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
           "Loading clips..."
         ] }) }),
-        loadingCategories.has(`${node.id}-${(categoryPages[node.id] || 0) + 1}`) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center text-sm text-slate-500", children: [
+        loadingCategories.has(getMetadataLoadingKey(node.id, (categoryPages[node.id] || 0) + 1)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center text-sm text-slate-500", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin mr-2 h-4 w-4 border-2 border-slate-300 border-t-blue-500 rounded-full" }),
           "Loading more clips..."
         ] }) }),
-        categoryHasMore[node.id] && !loadingCategories.has(`${node.id}-${(categoryPages[node.id] || 0) + 1}`) && /* @__PURE__ */ jsxRuntime.jsxs(
+        categoryHasMore[node.id] && !loadingCategories.has(getMetadataLoadingKey(node.id, (categoryPages[node.id] || 0) + 1)) && /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: (e) => {
@@ -44411,6 +44617,18 @@ var FileManagerFilters = ({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-slate-900 tracking-tight", children: "Clips Explorer" }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+          activeFilter === "idle_time" && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => {
+                onIdleClipSortChange?.(idleClipSort === "latest" ? "idle_duration_desc" : "latest");
+              },
+              className: `p-2 rounded-xl transition-all duration-200 ${idleClipSort === "idle_duration_desc" ? "bg-orange-100 text-orange-600 hover:bg-orange-200 shadow-sm" : "bg-slate-100 text-slate-600 hover:bg-slate-200"}`,
+              title: idleClipSort === "idle_duration_desc" ? "Sort by newest first" : "Sort by longest idle first",
+              "aria-label": idleClipSort === "idle_duration_desc" ? "Sort idle clips by newest first" : "Sort idle clips by longest idle first",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownWideNarrow, { className: "h-5 w-5" })
+            }
+          ),
           activeFilter === "idle_time" && idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -44431,8 +44649,8 @@ var FileManagerFilters = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 mt-3", children: [
-        isTimeFilterActive && startTime && endTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-blue-600 bg-blue-50/60 px-3 py-1.5 rounded-lg border border-blue-100", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+        isTimeFilterActive && startTime && endTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex w-fit items-center gap-2 rounded-full border border-blue-100 bg-blue-50/70 px-2.5 py-1 text-xs text-blue-700 shadow-sm", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
             "Time: ",
             getDisplayValue(startTime),
@@ -44448,13 +44666,13 @@ var FileManagerFilters = ({
                 setEndTime("");
                 setIsTimeFilterActive(false);
               },
-              className: "ml-2 hover:bg-blue-100 rounded p-0.5 transition-colors",
+              className: "rounded-full p-0.5 transition-colors hover:bg-blue-100",
               title: "Clear time filter",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5" })
             }
           )
         ] }),
-        idleLabelFilter && activeFilter === "idle_time" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 text-xs text-purple-600 bg-purple-50/60 px-3 py-1.5 rounded-lg border border-purple-100", children: [
+        idleLabelFilter && activeFilter === "idle_time" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex w-fit items-center gap-2 rounded-full border border-purple-100 bg-purple-50/70 px-2.5 py-1 text-xs text-purple-700 shadow-sm", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
             "Reason: ",
             selectedIdleReasonOption?.displayName || idleLabelFilter.replace(/_/g, " ")
@@ -44466,11 +44684,27 @@ var FileManagerFilters = ({
                 e.stopPropagation();
                 setIdleLabelFilter(null);
               },
-              className: "ml-2 hover:bg-purple-100 rounded p-0.5 transition-colors",
+              className: "rounded-full p-0.5 transition-colors hover:bg-purple-100",
               title: "Clear label filter",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5" })
             }
           )
+        ] }),
+        activeFilter === "idle_time" && idleClipSort === "idle_duration_desc" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex w-fit items-center gap-2 rounded-full border border-orange-100 bg-orange-50/70 px-2.5 py-1 text-xs text-orange-700 shadow-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDownWideNarrow, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Longest idle first" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onIdleClipSortChange?.("latest");
+              },
+              className: "rounded-full p-0.5 transition-colors hover:bg-orange-100",
+              title: "Clear idle sort",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5" })
+            }
+          )
         ] })
       ] })
     ] }),
@@ -45234,8 +45468,10 @@ var BottlenecksContent = ({
   const [clipClassifications, setClipClassifications] = React144.useState({});
   const [categoryMetadata, setCategoryMetadata] = React144.useState([]);
   const [categoryMetadataCategoryId, setCategoryMetadataCategoryId] = React144.useState(null);
+  const [categoryMetadataSort, setCategoryMetadataSort] = React144.useState(null);
   const [currentMetadataIndex, setCurrentMetadataIndex] = React144.useState(0);
   const [metadataCache, setMetadataCache] = React144.useState({});
+  const [idleClipSort, setIdleClipSort] = React144.useState("latest");
   const invalidateMetadataCache = React144.useCallback((categories) => {
     setMetadataCache((prevCache) => {
       if (!prevCache || Object.keys(prevCache).length === 0) {
@@ -45266,6 +45502,7 @@ var BottlenecksContent = ({
   const [isFullscreen, setIsFullscreen] = React144.useState(false);
   const categoryMetadataRef = React144.useRef([]);
   const currentMetadataIndexRef = React144.useRef(0);
+  const previousIdleClipSortRef = React144.useRef(idleClipSort);
   const clearRetryTimeout = React144.useCallback(() => {
     if (retryTimeoutRef.current) {
       clearTimeout(retryTimeoutRef.current);
@@ -45712,9 +45949,13 @@ var BottlenecksContent = ({
     }
     return ["fast-cycles", "slow-cycles", "longest-idles"].includes(categoryId);
   }, [isFastSlowClipFiltersEnabled]);
+  const shouldUseMetadataNavigation = React144.useCallback((categoryId) => {
+    return isPercentileCategory(categoryId) || categoryId === "idle_time" && idleClipSort === "idle_duration_desc";
+  }, [idleClipSort, isPercentileCategory]);
   const getMetadataCacheKey = React144.useCallback((categoryId) => {
-    return `${categoryId}-${effectiveDateString}-${effectiveShiftId}-${snapshotDateTime ?? "nosnap"}-${snapshotClipId ?? "nosnap"}`;
-  }, [effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId]);
+    const sortKey = categoryId === "idle_time" ? idleClipSort : "latest";
+    return `${categoryId}-${effectiveDateString}-${effectiveShiftId}-${snapshotDateTime ?? "nosnap"}-${snapshotClipId ?? "nosnap"}-${sortKey}`;
+  }, [effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, idleClipSort]);
   const setVisibleCategoryMetadata = React144.useCallback((categoryId, clips) => {
     if (activeFilterRef.current !== categoryId) {
       return false;
@@ -45722,8 +45963,9 @@ var BottlenecksContent = ({
     categoryMetadataRef.current = clips;
     setCategoryMetadata(clips);
     setCategoryMetadataCategoryId(clips.length > 0 ? categoryId : null);
+    setCategoryMetadataSort(clips.length > 0 ? categoryId === "idle_time" ? idleClipSort : "latest" : null);
     return true;
-  }, []);
+  }, [idleClipSort]);
   const applyMetadataSnapshot = React144.useCallback((categoryId, clips, total) => {
     if (!clips || clips.length === 0) {
       return;
@@ -45734,11 +45976,11 @@ var BottlenecksContent = ({
       [cacheKey]: clips
     }));
     setVisibleCategoryMetadata(categoryId, clips);
-    if (!isPercentileCategory(categoryId) && typeof total === "number") {
+    if (!shouldUseMetadataNavigation(categoryId) && typeof total === "number") {
       currentTotalRef.current = total;
       setCurrentTotal(total);
     }
-  }, [getMetadataCacheKey, isPercentileCategory, setVisibleCategoryMetadata]);
+  }, [getMetadataCacheKey, shouldUseMetadataNavigation, setVisibleCategoryMetadata]);
   const getClipTypesForPercentileCategory = React144.useCallback((categoryId) => {
     switch (categoryId) {
       case "fast-cycles":
@@ -45764,6 +46006,7 @@ var BottlenecksContent = ({
     }
     setCategoryMetadata([]);
     setCategoryMetadataCategoryId(null);
+    setCategoryMetadataSort(null);
     categoryMetadataRef.current = [];
     updateActiveFilter(fallbackFilter);
   }, [isFastSlowClipFiltersEnabled, activeFilter, dynamicCounts, clipTypes, updateActiveFilter]);
@@ -45811,6 +46054,7 @@ var BottlenecksContent = ({
     if (!isFastSlowClipFiltersEnabled && (categoryId === "fast-cycles" || categoryId === "slow-cycles")) {
       setCategoryMetadata([]);
       setCategoryMetadataCategoryId(null);
+      setCategoryMetadataSort(null);
       categoryMetadataRef.current = [];
       return;
     }
@@ -45881,7 +46125,8 @@ var BottlenecksContent = ({
             limit: 100,
             knownTotal: mergedCounts[categoryId] ?? null,
             snapshotDateTime,
-            snapshotClipId
+            snapshotClipId,
+            sort: categoryId === "idle_time" ? idleClipSort : "latest"
           }),
           redirectReason: "session_expired"
         });
@@ -45960,6 +46205,7 @@ var BottlenecksContent = ({
         if (activeFilterRef.current === categoryId) {
           setCategoryMetadata([]);
           setCategoryMetadataCategoryId(null);
+          setCategoryMetadataSort(null);
           categoryMetadataRef.current = [];
         }
       }
@@ -45968,7 +46214,26 @@ var BottlenecksContent = ({
     } finally {
       setIsCategoryLoading(false);
     }
-  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, isFastSlowClipFiltersEnabled, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, supabase, setVisibleCategoryMetadata]);
+  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, isFastSlowClipFiltersEnabled, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, idleClipSort, supabase, setVisibleCategoryMetadata]);
+  React144.useEffect(() => {
+    if (previousIdleClipSortRef.current === idleClipSort) {
+      return;
+    }
+    previousIdleClipSortRef.current = idleClipSort;
+    if (activeFilterRef.current !== "idle_time") {
+      return;
+    }
+    setCategoryMetadata([]);
+    setCategoryMetadataCategoryId(null);
+    setCategoryMetadataSort(null);
+    categoryMetadataRef.current = [];
+    setCurrentMetadataIndex(0);
+    currentMetadataIndexRef.current = 0;
+    setCurrentPosition(0);
+    currentPositionRef.current = 0;
+    setIsCategoryLoading(true);
+    void loadCategoryMetadata("idle_time", true, true);
+  }, [idleClipSort, loadCategoryMetadata]);
   React144.useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -45979,6 +46244,7 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       setCategoryMetadata([]);
       setCategoryMetadataCategoryId(null);
+      setCategoryMetadataSort(null);
       setCurrentMetadataIndex(0);
       categoryMetadataRef.current = [];
       currentMetadataIndexRef.current = 0;
@@ -46077,7 +46343,7 @@ var BottlenecksContent = ({
       }
       if (metadataArray.length === 0) {
         console.warn(`[BottlenecksContent] No metadata available for category ${categoryId} after refresh`);
-        if (!isPercentileCategory(categoryId)) {
+        if (!shouldUseMetadataNavigation(categoryId)) {
           const resolvedPosition = typeof position === "number" ? position : 1;
           currentPositionRef.current = resolvedPosition;
           setCurrentPosition(resolvedPosition);
@@ -46090,7 +46356,7 @@ var BottlenecksContent = ({
       const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
       if (clickedClipIndex === -1) {
         console.warn(`[BottlenecksContent] Clip ${clipId} not found after metadata refresh`);
-        if (!isPercentileCategory(categoryId)) {
+        if (!shouldUseMetadataNavigation(categoryId)) {
           const resolvedPosition = typeof position === "number" ? position : 1;
           currentPositionRef.current = resolvedPosition;
           setCurrentPosition(resolvedPosition);
@@ -46102,7 +46368,7 @@ var BottlenecksContent = ({
       }
       setCurrentMetadataIndex(clickedClipIndex);
       currentMetadataIndexRef.current = clickedClipIndex;
-      if (!isPercentileCategory(categoryId)) {
+      if (!shouldUseMetadataNavigation(categoryId)) {
         const position2 = clickedClipIndex + 1;
         currentPositionRef.current = position2;
         setCurrentPosition(position2);
@@ -46132,7 +46398,7 @@ var BottlenecksContent = ({
         clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, clearRetryTimeout, loadCategoryMetadata, applyMetadataSnapshot, mergedCounts, isPercentileCategory]);
+  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, clearRetryTimeout, loadCategoryMetadata, applyMetadataSnapshot, mergedCounts, shouldUseMetadataNavigation]);
   const restartCurrentClipPlayback = React144.useCallback(() => {
     if (!currentClipId) {
       return;
@@ -46153,7 +46419,7 @@ var BottlenecksContent = ({
       return;
     }
     const activeCategory = activeFilterRef.current;
-    if (!activeCategory || activeCategory === "all" || isPercentileCategory(activeCategory)) {
+    if (!activeCategory || activeCategory === "all" || shouldUseMetadataNavigation(activeCategory)) {
       return;
     }
     let cancelled = false;
@@ -46186,7 +46452,7 @@ var BottlenecksContent = ({
   }, [
     newClipsNotification,
     s3ClipsService,
-    isPercentileCategory,
+    shouldUseMetadataNavigation,
     currentClipId,
     invalidateMetadataCache,
     loadAndPlayClipById,
@@ -46238,7 +46504,7 @@ var BottlenecksContent = ({
       }
     }
     try {
-      if (!isPercentileCategory(currentFilter)) {
+      if (!shouldUseMetadataNavigation(currentFilter)) {
         if (!s3ClipsService || !workspaceId || !currentClipId) {
           throw new Error("S3 clips service not available");
         }
@@ -46338,7 +46604,7 @@ var BottlenecksContent = ({
       } else {
         const firstClipMeta = metadataArray[0];
         if (firstClipMeta?.clipId && firstClipMeta.clipId !== currentClipId) {
-          console.log(`[handleNext] Reached end of ${currentFilter}, looping back to newest percentile clip ${firstClipMeta.clipId}`);
+          console.log(`[handleNext] Reached end of ${currentFilter}, looping back to first metadata clip ${firstClipMeta.clipId}`);
           await loadAndPlayClipById(firstClipMeta.clipId, currentFilter, 1, {
             clips: metadataArray,
             total: metadataArray.length
@@ -46364,7 +46630,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, clearRetryTimeout, s3ClipsService, loadCategoryMetadata, loadAndPlayClipById, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
+  }, [clearLoadingState, clearRetryTimeout, s3ClipsService, loadCategoryMetadata, loadAndPlayClipById, shouldUseMetadataNavigation, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
   const handlePrevious = React144.useCallback(async () => {
     if (!isMountedRef.current || navigationLockRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -46383,7 +46649,7 @@ var BottlenecksContent = ({
       }
     }
     try {
-      if (!isPercentileCategory(currentFilter)) {
+      if (!shouldUseMetadataNavigation(currentFilter)) {
         if (!s3ClipsService || !workspaceId || !currentClipId) {
           throw new Error("S3 clips service not available");
         }
@@ -46468,7 +46734,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, clearRetryTimeout, s3ClipsService, loadCategoryMetadata, isPercentileCategory, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
+  }, [clearLoadingState, clearRetryTimeout, s3ClipsService, loadCategoryMetadata, shouldUseMetadataNavigation, workspaceId, currentClipId, effectiveDateString, effectiveShiftId, snapshotDateTime, snapshotClipId, mergedCounts]);
   const currentVideo = React144.useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -46535,22 +46801,22 @@ var BottlenecksContent = ({
     }
   }, [currentVideo?.id, isShareLoading, supabase, workspaceId, workspaceName]);
   React144.useMemo(() => {
-    if (isPercentileCategory(activeFilter)) {
+    if (shouldUseMetadataNavigation(activeFilter)) {
       return categoryMetadata.length;
     }
     return currentTotal || mergedCounts[activeFilter] || 0;
-  }, [activeFilter, categoryMetadata.length, currentTotal, mergedCounts, isPercentileCategory]);
+  }, [activeFilter, categoryMetadata.length, currentTotal, mergedCounts, shouldUseMetadataNavigation]);
   React144.useMemo(() => {
-    if (isPercentileCategory(activeFilter)) {
+    if (shouldUseMetadataNavigation(activeFilter)) {
       return categoryMetadata.length > 0 ? currentMetadataIndex + 1 : 0;
     }
     return currentPosition;
-  }, [activeFilter, categoryMetadata.length, currentMetadataIndex, currentPosition, isPercentileCategory]);
-  const prefetchedExplorerMetadata = React144.useMemo(() => buildPrefetchedExplorerMetadata(
+  }, [activeFilter, categoryMetadata.length, currentMetadataIndex, currentPosition, shouldUseMetadataNavigation]);
+  const prefetchedExplorerMetadata = React144.useMemo(() => activeFilter === "idle_time" && categoryMetadataSort !== idleClipSort ? void 0 : buildPrefetchedExplorerMetadata(
     activeFilter,
     categoryMetadataCategoryId,
     categoryMetadata
-  ), [activeFilter, categoryMetadata, categoryMetadataCategoryId]);
+  ), [activeFilter, categoryMetadata, categoryMetadataCategoryId, categoryMetadataSort, idleClipSort]);
   const classificationClipIds = React144.useMemo(() => {
     if (!idleTimeVlmEnabled) {
       return [];
@@ -47299,7 +47565,12 @@ var BottlenecksContent = ({
             showPercentileCycleFilters: isFastSlowClipFiltersEnabled,
             prefetchedClipMetadata: prefetchedExplorerMetadata,
             activeCategoryLoading: isCategoryLoading,
+            idleClipSort,
+            onIdleClipSortChange: setIdleClipSort,
             onFilterChange: (filterId) => {
+              if (filterId !== "idle_time") {
+                setIdleClipSort("latest");
+              }
               updateActiveFilter(filterId);
               const category = categoriesToShow.find((cat) => cat.type === filterId);
               if (category) {
@@ -49222,6 +49493,11 @@ var LineHistoryCalendar = ({
     return calendar;
   }, [data, month, year, configuredTimezone]);
   const hasRealData = (shift) => {
+    if (isUptimeMode) {
+      if (shift.hasData === true) return true;
+      const efficiency = Number(shift.avg_efficiency);
+      return shift.total_workspaces > 0 || shift.underperforming_workspaces > 0 || (shift.output || 0) > 0 || (shift.available_time_seconds || 0) > 0 || (shift.active_time_seconds || 0) > 0 || (shift.idle_time_seconds || 0) > 0 || Number.isFinite(efficiency) && efficiency > 0;
+    }
     if (shift.hasData !== void 0) return shift.hasData;
     return shift.total_workspaces > 0 || shift.avg_efficiency > 0 || shift.underperforming_workspaces > 0;
   };
@@ -49854,13 +50130,18 @@ var LineMonthlyHistory = ({
     enabled: !!lineId && idleTimeVlmEnabled
   });
   const hasRealData = (shift) => {
+    if (isUptimeMode) {
+      if (shift.hasData === true) return true;
+      const efficiency = Number(shift.avg_efficiency);
+      return shift.total_workspaces > 0 || shift.underperforming_workspaces > 0 || (shift.output || 0) > 0 || (shift.idealOutput || 0) > 0 || (shift.idle_time_seconds || 0) > 0 || (shift.active_time_seconds || 0) > 0 || (shift.available_time_seconds || 0) > 0 || Number.isFinite(efficiency) && efficiency > 0;
+    }
     if (shift.hasData !== void 0) return shift.hasData;
     return shift.avg_efficiency > 0 || shift.underperforming_workspaces > 0 || shift.total_workspaces > 0 || (shift.output || 0) > 0 || (shift.idealOutput || 0) > 0 || (shift.idle_time_seconds || 0) > 0 || (shift.active_time_seconds || 0) > 0 || (shift.available_time_seconds || 0) > 0;
   };
   const averages = (analysisMonthlyData || []).reduce(
     (acc, day) => {
       const shiftData = getShiftData2(day, selectedShiftId);
-      if (!shiftData || shiftData?.avg_efficiency < 5) {
+      if (!shiftData || !isValidAggregateEfficiency(isUptimeMode ? "uptime" : "output", shiftData.avg_efficiency)) {
         return acc;
       }
       return {
@@ -49889,7 +50170,9 @@ var LineMonthlyHistory = ({
   const avgOutput = outputAverages.count > 0 ? outputAverages.output / outputAverages.count : 0;
   const uptimeSummary = React144.useMemo(() => {
     if (!isUptimeMode) return null;
-    const validDays = (analysisMonthlyData || []).map((day) => getShiftData2(day, selectedShiftId)).filter((shiftData) => shiftData && hasRealData(shiftData)).map((shiftData) => ({ shiftData, totals: getUptimeTotals(shiftData) }));
+    const validDays = (analysisMonthlyData || []).map((day) => getShiftData2(day, selectedShiftId)).filter(
+      (shiftData) => shiftData && hasRealData(shiftData) && isValidAggregateEfficiency("uptime", shiftData.avg_efficiency)
+    ).map((shiftData) => ({ shiftData, totals: getUptimeTotals(shiftData) }));
     if (!validDays.length) {
       return { avgUtilization: 0, avgIdleTime: 0, avgDailyStoppages: 0 };
     }
@@ -50037,7 +50320,9 @@ var LineMonthlyHistory = ({
   }, [chartData.yAxisMax, chartData.lastSetTarget]);
   const pieChartData = React144.useMemo(() => {
     if (!isUptimeMode) return [];
-    const validShifts = (analysisMonthlyData || []).map((day) => getShiftData2(day, selectedShiftId)).filter(hasRealData);
+    const validShifts = (analysisMonthlyData || []).map((day) => getShiftData2(day, selectedShiftId)).filter(
+      (shift) => shift && hasRealData(shift) && isValidAggregateEfficiency("uptime", shift.avg_efficiency)
+    );
     if (!validShifts.length) return [];
     const efficiencyValues = validShifts.map((shift) => Number.isFinite(shift.avg_efficiency) ? Number(shift.avg_efficiency) : null).filter((value) => value !== null);
     if (!efficiencyValues.length) return [];
@@ -50647,7 +50932,9 @@ var LineMonthlyPdfGenerator = ({
         const productiveSeconds = activeSecondsRaw > 0 ? Math.min(activeSecondsRaw, availableSeconds) : Math.max(availableSeconds - idleSeconds, 0);
         return { availableSeconds, productiveSeconds, idleSeconds };
       };
-      const validShifts = validDays.map((day) => getLineShiftData2(day, selectedShiftId)).filter((shift) => isUptimeMode ? hasShiftData(shift) : shift.avg_efficiency >= 5);
+      const validShifts = validDays.map((day) => getLineShiftData2(day, selectedShiftId)).filter(
+        (shift) => hasShiftData(shift) && isValidAggregateEfficiency(isUptimeMode ? "uptime" : "output", shift.avg_efficiency)
+      );
       const monthlyMetrics = validShifts.length > 0 ? isUptimeMode ? (() => {
         let utilizationSum = 0;
         let idleTimeSum = 0;
@@ -52632,7 +52919,10 @@ var WorkspaceMonthlyHistory = ({
     return ticks.filter((v) => v >= 0 && v <= max * 1.05).sort((a, b) => a - b);
   }, [chartData.yAxisMax, chartData.lastSetTarget, isUptimeMode]);
   const pieChartData = React144.useMemo(() => {
-    const validShifts = analysisMonthlyData.map((d) => getShiftData(d, selectedShiftId)).filter(hasRealData);
+    const aggregateMode = isUptimeMode ? "uptime" : "output";
+    const validShifts = analysisMonthlyData.map((d) => getShiftData(d, selectedShiftId)).filter(
+      (shift) => shift && hasRealData(shift) && isValidAggregateEfficiency(aggregateMode, shift.efficiency)
+    );
     if (validShifts.length === 0) return [];
     const efficiencyValues = validShifts.map((shift) => Number.isFinite(shift.efficiency) ? Number(shift.efficiency) : null).filter((value) => value !== null);
     if (!efficiencyValues.length) return [];
@@ -52643,10 +52933,10 @@ var WorkspaceMonthlyHistory = ({
       { name: "Productive", value: productivePercent },
       { name: "Idle", value: idlePercent }
     ];
-  }, [analysisMonthlyData, selectedShiftId, shiftWorkSeconds]);
+  }, [analysisMonthlyData, selectedShiftId, isUptimeMode]);
   const metrics2 = React144.useMemo(() => {
     const validShifts = analysisMonthlyData.map((d) => getShiftData(d, selectedShiftId)).filter(hasRealData);
-    const filteredShifts = isUptimeMode ? validShifts : validShifts.filter((shift) => (shift.efficiency ?? 0) >= 5);
+    const filteredShifts = isUptimeMode ? validShifts.filter((shift) => isValidAggregateEfficiency("uptime", shift.efficiency)) : validShifts.filter((shift) => isValidAggregateEfficiency("output", shift.efficiency));
     if (filteredShifts.length === 0) return null;
     const totalEfficiency = filteredShifts.reduce((sum, shift) => sum + (shift.efficiency || 0), 0);
     const totalUtilization = filteredShifts.reduce(
@@ -53866,7 +54156,7 @@ var WorkspaceMonthlyPdfGenerator = ({
         const shift = getShiftData(dayData, selectedShiftId);
         return { dayData, shift };
       }).filter(({ shift }) => hasShiftData(shift)).sort((left, right) => getDayDateKey(right.dayData).localeCompare(getDayDateKey(left.dayData)));
-      const filteredShifts = isUptimeMode ? validShifts : validShifts.filter((shift) => (shift.efficiency ?? 0) >= 5);
+      const filteredShifts = isUptimeMode ? validShifts.filter((shift) => isValidAggregateEfficiency("uptime", shift.efficiency)) : validShifts.filter((shift) => isValidAggregateEfficiency("output", shift.efficiency));
       const monthlyMetrics = filteredShifts.length > 0 ? isUptimeMode ? (() => {
         const totalIdleTime = filteredShifts.reduce((sum, shift) => sum + shift.idleTime, 0);
         const totalCycleTime = filteredShifts.reduce((sum, shift) => sum + shift.cycleTime, 0);
@@ -54136,7 +54426,8 @@ var WorkspaceCycleTimeMetricCards = ({
   idleTimeData,
   skuAware,
   skuBreakdown,
-  activeSkuId
+  activeSkuId,
+  liveSkuId
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const activeSku = React144__namespace.default.useMemo(() => {
@@ -54145,6 +54436,13 @@ var WorkspaceCycleTimeMetricCards = ({
     }
     return null;
   }, [skuAware, activeSkuId, skuBreakdown]);
+  const displaySku = React144__namespace.default.useMemo(() => {
+    if (activeSku) return activeSku;
+    if (skuAware && !activeSkuId && liveSkuId && skuBreakdown) {
+      return skuBreakdown.find((s) => s.sku_id === liveSkuId) ?? null;
+    }
+    return null;
+  }, [activeSku, skuAware, activeSkuId, liveSkuId, skuBreakdown]);
   const cycleValue = activeSku ? activeSku.avg_cycle_time : workspace.avg_cycle_time;
   const cycleStandard = activeSku ? activeSku.ideal_cycle_time : workspace.ideal_cycle_time;
   const efficiencyValue = workspace.avg_efficiency || 0;
@@ -54174,7 +54472,7 @@ var WorkspaceCycleTimeMetricCards = ({
     /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "flex flex-col bg-white shadow-sm border border-gray-200 h-full min-h-[150px] sm:min-h-0 rounded-xl", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CardHeader2, { className: "pb-1 pt-5 flex-none text-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-[15px] font-bold text-gray-900 tracking-wide", children: "Cycle Time (s)" }),
-        activeSku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: activeSku.sku_code, children: activeSku.sku_code })
+        displaySku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-blue-600 mt-1 truncate px-2", title: displaySku.sku_code, children: displaySku.sku_code })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { className: "flex-1 flex flex-col items-center justify-center pb-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold tracking-tight ${cycleValue > (cycleStandard || 0) ? "text-red-500" : "text-[#34C759]"}`, children: cycleValue.toFixed(1) }),
@@ -67038,7 +67336,15 @@ var KPIDetailView = ({
           const fallbackTimes = resolveMonthlyShiftTimes(metric.shift_id);
           const resolvedShiftStart = metric.shift_start || fallbackTimes.start;
           const resolvedShiftEnd = metric.shift_end || fallbackTimes.end;
-          const hasBackendUptimeSeconds = isUptimeMode && (Number.isFinite(metric.active_time_seconds) || Number.isFinite(metric.idle_time_seconds) || Number.isFinite(metric.available_time_seconds));
+          const coerceOptionalNumber2 = (value) => {
+            if (value === void 0 || value === null || value === "") return null;
+            const parsed = Number(value);
+            return Number.isFinite(parsed) ? parsed : null;
+          };
+          const metricActiveTimeSeconds = coerceOptionalNumber2(metric.active_time_seconds);
+          const metricIdleTimeSeconds = coerceOptionalNumber2(metric.idle_time_seconds);
+          const metricAvailableTimeSeconds = coerceOptionalNumber2(metric.available_time_seconds);
+          const hasBackendUptimeSeconds = isUptimeMode && (metricActiveTimeSeconds !== null || metricIdleTimeSeconds !== null || metricAvailableTimeSeconds !== null);
           const uptimeSeries2 = isUptimeMode && !hasBackendUptimeSeconds ? buildUptimeSeries({
             idleTimeHourly: metric.idle_time_hourly || {},
             shiftStart: resolvedShiftStart || void 0,
@@ -67046,9 +67352,13 @@ var KPIDetailView = ({
             shiftDate: metric.date,
             timezone: configuredTimezone
           }) : null;
-          const idleTimeSeconds = isUptimeMode ? hasBackendUptimeSeconds ? metric.idle_time_seconds || 0 : (uptimeSeries2?.idleMinutes || 0) * 60 : 0;
-          const activeTimeSeconds = isUptimeMode ? hasBackendUptimeSeconds ? metric.active_time_seconds || 0 : (uptimeSeries2?.activeMinutes || 0) * 60 : 0;
-          const availableTimeSeconds = isUptimeMode ? hasBackendUptimeSeconds ? metric.available_time_seconds || activeTimeSeconds + idleTimeSeconds : (uptimeSeries2?.availableMinutes || 0) * 60 : 0;
+          const idleTimeSeconds = isUptimeMode ? hasBackendUptimeSeconds ? metricIdleTimeSeconds ?? 0 : (uptimeSeries2?.idleMinutes || 0) * 60 : 0;
+          const activeTimeSeconds = isUptimeMode ? hasBackendUptimeSeconds ? metricActiveTimeSeconds ?? 0 : (uptimeSeries2?.activeMinutes || 0) * 60 : 0;
+          const availableTimeSeconds = isUptimeMode ? hasBackendUptimeSeconds ? metricAvailableTimeSeconds ?? activeTimeSeconds + idleTimeSeconds : (uptimeSeries2?.availableMinutes || 0) * 60 : 0;
+          const metricAvgEfficiency = Number(metric.avg_efficiency);
+          const metricTotalWorkspaces = Number(metric.total_workspaces || 0);
+          const metricCurrentOutput = Number(metric.current_output || 0);
+          const hasUptimeMetricData = isUptimeMode && (availableTimeSeconds > 0 || metricTotalWorkspaces > 0 || metricCurrentOutput > 0 || Number.isFinite(metricAvgEfficiency) && metricAvgEfficiency > 0);
           const computedUptimeEfficiency = (() => {
             const availableMinutes = availableTimeSeconds / 60;
             if (!availableMinutes || availableMinutes <= 0) return 0;
@@ -67068,7 +67378,7 @@ var KPIDetailView = ({
             targetOutput: Number(metric.line_threshold ?? metric.ideal_output ?? 0),
             compliance_percentage: 95 + Math.random() * 5,
             // Mock data: random value between 95-100%
-            hasData: isUptimeMode ? availableTimeSeconds > 0 : true,
+            hasData: isUptimeMode ? hasUptimeMetricData : true,
             idle_time_seconds: idleTimeSeconds,
             active_time_seconds: activeTimeSeconds,
             available_time_seconds: availableTimeSeconds,
@@ -68252,6 +68562,9 @@ var KPIDetailView = ({
 var KPIDetailViewWithDisplayNames = withSelectedLineDisplayNames(KPIDetailView);
 var KPIDetailView_default = KPIDetailViewWithDisplayNames;
 var isNonEmptyString = (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 getSingleQueryValue = (value) => typeof value === "string" && value.length > 0 ? value : void 0;
 var resolveCompanyId = (...candidates) => candidates.find(isNonEmptyString);
 var parseTimeToMinutes3 = (value) => {
   if (!value) return null;
@@ -68288,7 +68601,9 @@ var getMonthDateInfo = (timezone) => {
 var createKpisOverviewUrl = ({
   tab,
   date,
-  shift
+  shift,
+  factoryId,
+  factoryAreaId
 }) => {
   const params = new URLSearchParams();
   if (tab) {
@@ -68300,6 +68615,12 @@ var createKpisOverviewUrl = ({
   if (typeof shift === "number" && Number.isFinite(shift)) {
     params.set("shift", shift.toString());
   }
+  if (!tab && factoryId) {
+    params.set(KPI_FACTORY_QUERY_PARAM, factoryId);
+  }
+  if (!tab && factoryId && factoryAreaId) {
+    params.set(KPI_FACTORY_AREA_QUERY_PARAM, factoryAreaId);
+  }
   const queryString = params.toString();
   return queryString ? `/kpis?${queryString}` : "/kpis";
 };
@@ -68821,6 +69142,101 @@ var LineCard = ({
     }
   );
 };
+var KpiGroupCard = ({
+  title,
+  subtitle,
+  kpis,
+  isLoading,
+  error,
+  isUptimeMode,
+  onClick
+}) => {
+  const isOnTrack = React144__namespace.default.useMemo(() => {
+    if (!kpis) return null;
+    return isEfficiencyOnTrack(kpis.efficiency.value);
+  }, [kpis]);
+  const outputTarget = Number(kpis?.outputProgress?.target ?? 0);
+  const outputCurrent = Number(kpis?.outputProgress?.current ?? 0);
+  const progressPercent = outputTarget > 0 ? Math.min(outputCurrent / outputTarget * 100, 100) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      onClick,
+      className: "relative bg-white border border-gray-200/80 shadow-sm hover:shadow-lg \n                 rounded-xl p-4 sm:p-5 md:p-6 transition-all duration-200 cursor-pointer \n                 hover:scale-[1.01] active:scale-[0.99] group",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 sm:mb-5 md:mb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-start gap-2 sm:gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FittingTitle,
+              {
+                title,
+                className: "text-[10px] sm:text-xs md:text-sm"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs font-medium text-gray-500", children: subtitle })
+          ] }),
+          !isUptimeMode && kpis && isOnTrack !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs font-medium flex-shrink-0 ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, style: { minWidth: "fit-content" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: isOnTrack ? "On Track" : "Behind" })
+          ] })
+        ] }) }),
+        isLoading && !kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-gray-200 rounded w-1/3 mb-2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded w-1/2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-gray-200 rounded w-1/3 mb-2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded w-3/4" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-gray-200 rounded w-1/3 mb-2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded w-1/2" })
+          ] })
+        ] }),
+        error && !kpis && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Unable to load metrics" }) }),
+        kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-5 pb-8 sm:pb-10", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: isUptimeMode ? "Utilization" : "Efficiency" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-2xl sm:text-3xl font-semibold text-gray-900", children: [
+                kpis.efficiency.value.toFixed(1),
+                "%"
+              ] }),
+              kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-xs sm:text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
+                kpis.efficiency.change > 0 ? "+" : "",
+                kpis.efficiency.change.toFixed(1),
+                "%"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: isUptimeMode ? "Stoppages" : "Output Progress" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between mb-2 sm:mb-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${isUptimeMode ? "text-2xl sm:text-3xl font-bold text-red-600" : "text-xl sm:text-2xl font-semibold text-gray-900"}`, children: kpis.outputProgress.current }),
+              !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
+                "/ ",
+                kpis.outputProgress.target,
+                " units"
+              ] })
+            ] }),
+            !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2 sm:h-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "bg-blue-600 h-2 sm:h-2.5 rounded-full transition-all duration-500 ease-out",
+                style: { width: `${progressPercent}%` }
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 right-3 sm:bottom-4 sm:right-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 sm:p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
+      ]
+    }
+  );
+};
 var KPIsOverviewView = ({
   companyId,
   navigate,
@@ -68986,6 +69402,20 @@ var KPIsOverviewView = ({
   const effectiveLeaderboardDate = selectedLeaderboardDate || currentShiftDate;
   const effectiveLeaderboardShiftId = Number.isFinite(selectedLeaderboardShiftId) ? selectedLeaderboardShiftId : currentShiftId;
   const isHistoricalLeaderboardDaily = activeTab === "leaderboard" && timeRange === "today" && (effectiveLeaderboardDate !== currentShiftDate || effectiveLeaderboardShiftId !== currentShiftId);
+  const selectedFactoryIdFromUrl = getSingleQueryValue(router$1.query[KPI_FACTORY_QUERY_PARAM]);
+  const selectedFactoryAreaIdFromUrl = getSingleQueryValue(router$1.query[KPI_FACTORY_AREA_QUERY_PARAM]);
+  const kpiLineHierarchy = React144__namespace.default.useMemo(
+    () => buildKpiLineHierarchy(linesForView),
+    [linesForView]
+  );
+  const selectedFactoryNode = React144__namespace.default.useMemo(
+    () => kpiLineHierarchy.showFactoryLevel && selectedFactoryIdFromUrl ? kpiLineHierarchy.factories.find((factory) => factory.id === selectedFactoryIdFromUrl) : void 0,
+    [kpiLineHierarchy, selectedFactoryIdFromUrl]
+  );
+  const selectedFactoryAreaNode = React144__namespace.default.useMemo(
+    () => selectedFactoryNode && selectedFactoryAreaIdFromUrl ? selectedFactoryNode.areas.find((area) => area.id === selectedFactoryAreaIdFromUrl) : void 0,
+    [selectedFactoryNode, selectedFactoryAreaIdFromUrl]
+  );
   React144.useEffect(() => {
     if (!router$1.isReady) return;
     const tabQuery = router$1.query.tab;
@@ -69013,20 +69443,27 @@ var KPIsOverviewView = ({
   ]);
   React144.useEffect(() => {
     if (!router$1.isReady || !hasHydratedLeaderboardRouteState) return;
+    if (activeTab === "today" && loading) return;
     const expectedTab = activeTab === "leaderboard" ? "leaderboard" : void 0;
     const expectedDate = activeTab === "leaderboard" && timeRange === "today" && isHistoricalLeaderboardDaily ? effectiveLeaderboardDate : void 0;
     const expectedShift = expectedDate !== void 0 ? effectiveLeaderboardShiftId.toString() : void 0;
+    const expectedFactory = activeTab === "today" && selectedFactoryNode ? selectedFactoryNode.id : void 0;
+    const expectedFactoryArea = activeTab === "today" && selectedFactoryNode && selectedFactoryAreaNode ? selectedFactoryAreaNode.id : void 0;
     const currentTab = typeof router$1.query.tab === "string" ? router$1.query.tab : void 0;
     const currentDateQuery = typeof router$1.query.date === "string" ? router$1.query.date : void 0;
     const currentShiftQuery = typeof router$1.query.shift === "string" ? router$1.query.shift : void 0;
-    if (currentTab === expectedTab && currentDateQuery === expectedDate && currentShiftQuery === expectedShift) {
+    const currentFactoryQuery = getSingleQueryValue(router$1.query[KPI_FACTORY_QUERY_PARAM]);
+    const currentFactoryAreaQuery = getSingleQueryValue(router$1.query[KPI_FACTORY_AREA_QUERY_PARAM]);
+    if (currentTab === expectedTab && currentDateQuery === expectedDate && currentShiftQuery === expectedShift && currentFactoryQuery === expectedFactory && currentFactoryAreaQuery === expectedFactoryArea) {
       return;
     }
     void router$1.replace(
       createKpisOverviewUrl({
         tab: expectedTab === "leaderboard" ? "leaderboard" : void 0,
         date: expectedDate,
-        shift: expectedShift !== void 0 ? Number.parseInt(expectedShift, 10) : void 0
+        shift: expectedShift !== void 0 ? Number.parseInt(expectedShift, 10) : void 0,
+        factoryId: expectedFactory,
+        factoryAreaId: expectedFactoryArea
       }),
       void 0,
       { shallow: true }
@@ -69038,7 +69475,10 @@ var KPIsOverviewView = ({
     effectiveLeaderboardDate,
     effectiveLeaderboardShiftId,
     hasHydratedLeaderboardRouteState,
-    isHistoricalLeaderboardDaily
+    isHistoricalLeaderboardDaily,
+    loading,
+    selectedFactoryNode,
+    selectedFactoryAreaNode
   ]);
   const factoryViewId = entityConfig.factoryViewId || "factory";
   const {
@@ -69050,13 +69490,42 @@ var KPIsOverviewView = ({
     userAccessibleLineIds: metricsLineIds
   });
   const defaultKPIs = React144__namespace.default.useMemo(() => createDefaultKPIs(), []);
-  const kpisByLineId = React144__namespace.default.useMemo(() => {
+  const lineModeById = React144__namespace.default.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    linesForView.forEach((line) => {
+      map.set(line.id, line.monitoring_mode ?? "output");
+    });
+    return map;
+  }, [linesForView]);
+  const lineMetricRowsByLineId = React144__namespace.default.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     lineMetrics.forEach((row) => {
-      if (row?.line_id) map.set(row.line_id, buildKPIsFromLineMetricsRow(row));
+      if (!row?.line_id) return;
+      const monitoringMode = lineModeById.get(row.line_id);
+      map.set(
+        row.line_id,
+        monitoringMode ? { ...row, monitoring_mode: monitoringMode } : row
+      );
     });
     return map;
-  }, [lineMetrics]);
+  }, [lineMetrics, lineModeById]);
+  const kpisByLineId = React144__namespace.default.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    lineMetricRowsByLineId.forEach((row, lineId) => {
+      map.set(lineId, buildKPIsFromLineMetricsRow(row));
+    });
+    return map;
+  }, [lineMetricRowsByLineId]);
+  const getLineCardKpis = React144__namespace.default.useCallback((line) => {
+    if (metricsError) return null;
+    return kpisByLineId.get(line.id) ?? (metricsLoading ? null : defaultKPIs);
+  }, [defaultKPIs, kpisByLineId, metricsError, metricsLoading]);
+  const getAggregateCardKpis = React144__namespace.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 = React144__namespace.default.useMemo(
     () => (leaderboardLines.length > 0 ? leaderboardLines : lines).map((l) => l.id),
     [leaderboardLines, lines]
@@ -69260,6 +69729,20 @@ var KPIsOverviewView = ({
     if (activeTab !== "leaderboard" || timeRange !== "today") return;
     fetchDailyLeaderboard();
   }, [activeTab, timeRange, fetchDailyLeaderboard]);
+  const navigateTodayHierarchy = React144.useCallback((factoryId, factoryAreaId) => {
+    void router$1.push(
+      createKpisOverviewUrl({ factoryId, factoryAreaId }),
+      void 0,
+      { shallow: true }
+    );
+  }, [router$1]);
+  const lineDetailReturnTo = React144__namespace.default.useMemo(() => {
+    if (activeTab !== "today" || !selectedFactoryNode) return void 0;
+    return createKpisOverviewUrl({
+      factoryId: selectedFactoryNode.id,
+      factoryAreaId: selectedFactoryAreaNode?.id
+    });
+  }, [activeTab, selectedFactoryNode, selectedFactoryAreaNode]);
   const formatTopPerformerWeek = (periodStart, periodEnd) => {
     const dateToUse = periodStart ? /* @__PURE__ */ new Date(`${periodStart}T00:00:00`) : /* @__PURE__ */ new Date();
     if (Number.isNaN(dateToUse.getTime())) {
@@ -69346,7 +69829,8 @@ var KPIsOverviewView = ({
       );
       return;
     }
-    navigation.navigate(`/kpis/${line.id}`);
+    const returnToQuery = lineDetailReturnTo ? `?returnTo=${encodeURIComponent(lineDetailReturnTo)}` : "";
+    navigation.navigate(`/kpis/${line.id}${returnToQuery}`);
   };
   const handleBackClick = React144.useCallback(() => {
     trackCoreEvent("Back Button Clicked", {
@@ -69415,6 +69899,70 @@ var KPIsOverviewView = ({
     }
     return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) });
   };
+  const renderLineCard = (line) => /* @__PURE__ */ jsxRuntime.jsx(
+    LineCard,
+    {
+      line,
+      kpis: getLineCardKpis(line),
+      isLoading: metricsLoading,
+      error: metricsError,
+      onClick: (kpis) => handleLineClick(line, kpis),
+      supervisorEnabled,
+      supervisorName: supervisorNamesByLineId.get(line.id) || null,
+      supervisors: supervisorsByLineId?.get(line.id)
+    },
+    line.id
+  );
+  const renderGroupCard = ({
+    key,
+    title,
+    subtitle,
+    lines: cardLines,
+    onClick
+  }) => /* @__PURE__ */ jsxRuntime.jsx(
+    KpiGroupCard,
+    {
+      title,
+      subtitle,
+      kpis: getAggregateCardKpis(cardLines),
+      isLoading: metricsLoading,
+      error: metricsError,
+      isUptimeMode: viewType === "machine",
+      onClick
+    },
+    key
+  );
+  const renderTodayCards = () => {
+    if (!kpiLineHierarchy.showFactoryLevel) {
+      return linesForView.map(renderLineCard);
+    }
+    if (selectedFactoryNode && selectedFactoryAreaNode) {
+      return selectedFactoryAreaNode.lines.map(renderLineCard);
+    }
+    if (selectedFactoryNode) {
+      return [
+        ...selectedFactoryNode.areas.map(
+          (area) => renderGroupCard({
+            key: `area-${area.id}`,
+            title: area.areaName,
+            subtitle: `${area.lines.length} ${area.lines.length === 1 ? "line" : "lines"}`,
+            lines: area.lines,
+            onClick: () => navigateTodayHierarchy(selectedFactoryNode.id, area.id)
+          })
+        ),
+        ...selectedFactoryNode.ungroupedLines.map(renderLineCard)
+      ];
+    }
+    return kpiLineHierarchy.factories.map(
+      (factory) => renderGroupCard({
+        key: `factory-${factory.id}`,
+        title: factory.factoryName,
+        subtitle: `${factory.lines.length} ${factory.lines.length === 1 ? "line" : "lines"}`,
+        lines: factory.lines,
+        onClick: () => navigateTodayHierarchy(factory.id)
+      })
+    );
+  };
   if (loading || isShiftConfigLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(LoadingPage, { message: "Loading production lines..." });
   }
@@ -69847,23 +70395,34 @@ var KPIsOverviewView = ({
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.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" ? (
-      /* Line Cards Grid */
-      /* @__PURE__ */ jsxRuntime.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: linesForView.map((line) => /* @__PURE__ */ jsxRuntime.jsx(
-        LineCard,
-        {
-          line,
-          kpis: metricsError ? null : kpisByLineId.get(line.id) ?? (metricsLoading ? null : defaultKPIs),
-          isLoading: metricsLoading,
-          error: metricsError,
-          onClick: (kpis) => handleLineClick(line, kpis),
-          supervisorEnabled,
-          supervisorName: supervisorNamesByLineId.get(line.id) || null,
-          supervisors: supervisorsByLineId?.get(line.id)
-        },
-        line.id
-      )) })
-    ) : showLeaderboardLoader ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-3 sm:space-y-4", children: [
+      kpiLineHierarchy.showFactoryLevel && selectedFactoryNode && /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-wrap items-center gap-2 text-sm", "aria-label": "KPI hierarchy", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => navigateTodayHierarchy(),
+            className: "font-medium text-gray-500 hover:text-blue-600 transition-colors",
+            children: "Factories"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300", children: "/" }),
+        selectedFactoryAreaNode ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => navigateTodayHierarchy(selectedFactoryNode.id),
+            className: "font-medium text-gray-500 hover:text-blue-600 transition-colors",
+            children: selectedFactoryNode.factoryName
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-gray-900", children: selectedFactoryNode.factoryName }),
+        selectedFactoryAreaNode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300", children: "/" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-gray-900", children: selectedFactoryAreaNode.areaName })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       OptifyeLogoLoader_default,
       {
         size: "lg",
@@ -69910,6 +70469,27 @@ var AnimatedEfficiency = React144.memo(({ value }) => {
   return prevProps.value === nextProps.value;
 });
 AnimatedEfficiency.displayName = "AnimatedEfficiency";
+var getWorkspaceLeaderboardMetricValue = (workspace) => {
+  if (workspace.monitoring_mode === "output") {
+    return toFiniteNumber(workspace.efficiency);
+  }
+  if (workspace.leaderboard_metric_kind === "recent_flow_shift_average") {
+    return toFiniteNumber(workspace.leaderboard_value);
+  }
+  return toFiniteNumber(workspace.leaderboard_value) ?? toFiniteNumber(workspace.efficiency);
+};
+var getWorkspaceDisplayedMetricValue = (workspace) => getWorkspaceLeaderboardMetricValue(workspace);
+var getWorkspaceLeaderboardMetricLabel = (workspace, defaultLabel) => workspace.monitoring_mode !== "output" && workspace.leaderboard_metric_kind === "recent_flow_shift_average" ? "Avg Flow" : defaultLabel;
+var renderWorkspaceLeaderboardMetric = (workspace, isAssemblyMode) => {
+  if (isAssemblyMode) {
+    return /* @__PURE__ */ jsxRuntime.jsx(CycleTimeComparison, { workspace });
+  }
+  const displayedMetricValue = getWorkspaceDisplayedMetricValue(workspace);
+  if (displayedMetricValue === null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: "--" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedEfficiency, { value: displayedMetricValue });
+};
 var HeaderRibbon = React144.memo(({
   currentDate,
   currentMobileDate,
@@ -69988,13 +70568,13 @@ var MobileWorkspaceCard = React144.memo(({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-gray-900 text-lg flex justify-end", children: isAssemblyMode ? /* @__PURE__ */ jsxRuntime.jsx(CycleTimeComparison, { workspace }) : /* @__PURE__ */ jsxRuntime.jsx(AnimatedEfficiency, { value: workspace.efficiency || 0 }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: metricLabel })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-bold text-gray-900 text-lg flex justify-end", children: renderWorkspaceLeaderboardMetric(workspace, isAssemblyMode) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: getWorkspaceLeaderboardMetricLabel(workspace, metricLabel) })
       ] })
     ] })
   }
 ), (prevProps, nextProps) => {
-  return prevProps.metricLabel === nextProps.metricLabel && prevProps.isAssemblyMode === nextProps.isAssemblyMode && prevProps.rank === nextProps.rank && prevProps.cardClass === nextProps.cardClass && prevProps.isClickable === nextProps.isClickable && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.ideal_cycle_time === nextProps.workspace.ideal_cycle_time && prevProps.workspace.action_count === nextProps.workspace.action_count && prevProps.workspace.action_threshold === nextProps.workspace.action_threshold && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName;
+  return prevProps.metricLabel === nextProps.metricLabel && prevProps.isAssemblyMode === nextProps.isAssemblyMode && prevProps.rank === nextProps.rank && prevProps.cardClass === nextProps.cardClass && prevProps.isClickable === nextProps.isClickable && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.leaderboard_value === nextProps.workspace.leaderboard_value && prevProps.workspace.leaderboard_metric_kind === nextProps.workspace.leaderboard_metric_kind && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.ideal_cycle_time === nextProps.workspace.ideal_cycle_time && prevProps.workspace.action_count === nextProps.workspace.action_count && prevProps.workspace.action_threshold === nextProps.workspace.action_threshold && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName;
 });
 MobileWorkspaceCard.displayName = "MobileWorkspaceCard";
 var DesktopWorkspaceRow = React144.memo(({
@@ -70021,11 +70601,11 @@ var DesktopWorkspaceRow = React144.memo(({
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspace.displayName }) }),
       /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspace.lineName }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-3 py-2.5 sm:p-4 text-sm sm:text-base font-medium ${isAssemblyMode ? "" : "whitespace-nowrap"}`, children: isAssemblyMode ? /* @__PURE__ */ jsxRuntime.jsx(CycleTimeComparison, { workspace }) : /* @__PURE__ */ jsxRuntime.jsx(AnimatedEfficiency, { value: workspace.efficiency || 0 }) })
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: `px-3 py-2.5 sm:p-4 text-sm sm:text-base font-medium ${isAssemblyMode ? "" : "whitespace-nowrap"}`, children: isAssemblyMode ? renderWorkspaceLeaderboardMetric(workspace, true) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: renderWorkspaceLeaderboardMetric(workspace, false) }) })
     ]
   }
 ), (prevProps, nextProps) => {
-  return prevProps.index === nextProps.index && prevProps.rowClass === nextProps.rowClass && prevProps.isClickable === nextProps.isClickable && prevProps.isAssemblyMode === nextProps.isAssemblyMode && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.ideal_cycle_time === nextProps.workspace.ideal_cycle_time && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName;
+  return prevProps.index === nextProps.index && prevProps.rowClass === nextProps.rowClass && prevProps.isClickable === nextProps.isClickable && prevProps.isAssemblyMode === nextProps.isAssemblyMode && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.leaderboard_value === nextProps.workspace.leaderboard_value && prevProps.workspace.leaderboard_metric_kind === nextProps.workspace.leaderboard_metric_kind && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.ideal_cycle_time === nextProps.workspace.ideal_cycle_time && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName;
 });
 DesktopWorkspaceRow.displayName = "DesktopWorkspaceRow";
 var LeaderboardDetailView = React144.memo(({
@@ -70124,6 +70704,8 @@ var LeaderboardDetailView = React144.memo(({
   const [monthlyError, setMonthlyError] = React144.useState(null);
   const todayRequestKeyRef = React144.useRef(null);
   const monthlyRequestKeyRef = React144.useRef(null);
+  const monthlyLoadKeyRef = React144.useRef(null);
+  const monthlyLoadPromiseRef = React144.useRef(null);
   const leaderboardUpdateQueuedRef = React144.useRef(false);
   const leaderboardUpdateTimerRef = React144.useRef(null);
   const leaderboardViewTrackedRef = React144.useRef(null);
@@ -70398,6 +70980,9 @@ var LeaderboardDetailView = React144.memo(({
       trend: 0,
       predicted_output: 0,
       efficiency: entry.efficiency || 0,
+      avg_recent_flow: toFiniteNumber(entry.avg_recent_flow),
+      leaderboard_value: toFiniteNumber(entry.leaderboard_value),
+      leaderboard_metric_kind: entry.leaderboard_metric_kind ?? "efficiency",
       action_threshold: entry.total_day_output || 0,
       displayName: entry.workspace_display_name,
       monitoring_mode: entry.monitoring_mode ?? "output"
@@ -70428,7 +71013,10 @@ var LeaderboardDetailView = React144.memo(({
     searchParams.set("monitoring_mode", viewType === "machine" ? "uptime" : "output");
     const data = await fetchBackendJson(
       supabase,
-      `/api/dashboard/leaderboard?${searchParams.toString()}`
+      `/api/dashboard/leaderboard?${searchParams.toString()}`,
+      {
+        timeoutMs: params.startDate && params.endDate ? 3e4 : void 0
+      }
     );
     return data.entries || [];
   }, [supabase, entityConfig.companyId, configuredLineIds, viewType]);
@@ -70506,15 +71094,21 @@ var LeaderboardDetailView = React144.memo(({
     setMonthlyLoading(true);
     setMonthlyError(null);
     try {
-      const entries = await fetchLeaderboardEntries({
-        startDate: normalizedRange.startKey,
-        endDate: normalizedRange.endKey,
-        shiftId: monthlyShiftId
-      });
+      const loadPromise = monthlyLoadPromiseRef.current && monthlyLoadKeyRef.current === requestKey ? monthlyLoadPromiseRef.current : (async () => {
+        const entries = await fetchLeaderboardEntries({
+          startDate: normalizedRange.startKey,
+          endDate: normalizedRange.endKey,
+          shiftId: monthlyShiftId
+        });
+        return mapEntriesToWorkspaces(entries, normalizedRange.endKey, monthlyShiftId);
+      })();
+      monthlyLoadKeyRef.current = requestKey;
+      monthlyLoadPromiseRef.current = loadPromise;
+      const workspaces = await loadPromise;
       if (monthlyRequestKeyRef.current !== requestKey) {
         return;
       }
-      setMonthlyEntries(mapEntriesToWorkspaces(entries, normalizedRange.endKey, monthlyShiftId));
+      setMonthlyEntries(workspaces);
     } catch (err) {
       console.error("[LeaderboardDetailView] Error fetching monthly leaderboard:", err);
       if (monthlyRequestKeyRef.current !== requestKey) {
@@ -70523,6 +71117,9 @@ var LeaderboardDetailView = React144.memo(({
       setMonthlyError({ message: err.message, code: err.code || "FETCH_ERROR" });
       setMonthlyEntries([]);
     } finally {
+      if (monthlyLoadKeyRef.current === requestKey && monthlyLoadPromiseRef.current) {
+        monthlyLoadPromiseRef.current = null;
+      }
       if (monthlyRequestKeyRef.current === requestKey) {
         setMonthlyLoading(false);
       }
@@ -70535,6 +71132,46 @@ var LeaderboardDetailView = React144.memo(({
     monthlyShiftId,
     lineKey
   ]);
+  React144.useEffect(() => {
+    if (activeTab !== "today") {
+      return;
+    }
+    const requestKey = `${normalizedRange.startKey}|${normalizedRange.endKey}|${monthlyShiftId}|${lineKey}|${viewType}`;
+    let cancelled = false;
+    const loadPromise = monthlyLoadPromiseRef.current && monthlyLoadKeyRef.current === requestKey ? monthlyLoadPromiseRef.current : (async () => {
+      const entries = await fetchLeaderboardEntries({
+        startDate: normalizedRange.startKey,
+        endDate: normalizedRange.endKey,
+        shiftId: monthlyShiftId
+      });
+      return mapEntriesToWorkspaces(entries, normalizedRange.endKey, monthlyShiftId);
+    })();
+    monthlyLoadKeyRef.current = requestKey;
+    monthlyLoadPromiseRef.current = loadPromise;
+    loadPromise.then((workspaces) => {
+      if (cancelled) {
+        return;
+      }
+      setMonthlyEntries(workspaces);
+    }).catch(() => {
+    }).finally(() => {
+      if (!cancelled && monthlyLoadKeyRef.current === requestKey && monthlyLoadPromiseRef.current === loadPromise) {
+        monthlyLoadPromiseRef.current = null;
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    activeTab,
+    fetchLeaderboardEntries,
+    mapEntriesToWorkspaces,
+    normalizedRange.endKey,
+    normalizedRange.startKey,
+    monthlyShiftId,
+    lineKey,
+    viewType
+  ]);
   React144.useEffect(() => {
     if (activeTab === "today") {
       fetchTodayLeaderboard();
@@ -70669,6 +71306,9 @@ var LeaderboardDetailView = React144.memo(({
       total_workspaces: workspacesLengthRef.current,
       // Use ref instead of state to avoid dependency
       metric_context: viewType === "machine" ? "machine" : outputCategory,
+      leaderboard_value: getWorkspaceLeaderboardMetricValue(workspace),
+      leaderboard_metric_kind: workspace.leaderboard_metric_kind ?? "efficiency",
+      avg_recent_flow: workspace.avg_recent_flow ?? null,
       efficiency: workspace.efficiency,
       action_count: workspace.action_count,
       action_threshold: workspace.action_threshold,
@@ -70749,9 +71389,12 @@ var LeaderboardDetailView = React144.memo(({
         if (ratioB === null) return -1;
         return sortAscending ? ratioA - ratioB : ratioB - ratioA;
       }
-      const effA = a.efficiency || 0;
-      const effB = b.efficiency || 0;
-      return sortAscending ? effA - effB : effB - effA;
+      const metricA = getWorkspaceLeaderboardMetricValue(a);
+      const metricB = getWorkspaceLeaderboardMetricValue(b);
+      if (metricA === null && metricB === null) return 0;
+      if (metricA === null) return 1;
+      if (metricB === null) return -1;
+      return sortAscending ? metricA - metricB : metricB - metricA;
     });
   }, [workspaceDisplayData, sortAscending, selectedLineFilter, selectedShiftFilter, activeTab, viewType, isAssemblyMode]);
   const loading = activeTab === "today" ? todayLoading : monthlyLoading;
@@ -70780,6 +71423,8 @@ var LeaderboardDetailView = React144.memo(({
       workspace_count: sortedWorkspaces.length,
       top_workspace_id: topWorkspace?.workspace_uuid ?? null,
       top_workspace_name: topWorkspace?.workspace_name ?? null,
+      top_leaderboard_value: topWorkspace ? getWorkspaceLeaderboardMetricValue(topWorkspace) : null,
+      top_leaderboard_metric_kind: topWorkspace?.leaderboard_metric_kind ?? null,
       top_efficiency: topWorkspace?.efficiency ?? null,
       top_avg_cycle_time: topWorkspace?.avg_cycle_time ?? null,
       top_ideal_cycle_time: topWorkspace?.ideal_cycle_time ?? null,
@@ -75925,7 +76570,11 @@ var WorkspaceDetailView = ({
                   workspace,
                   legend: efficiencyLegend,
                   layout: "stack",
-                  idleTimeData: idleTimeVlmEnabled ? idleTimeData : void 0
+                  idleTimeData: idleTimeVlmEnabled ? idleTimeData : void 0,
+                  skuAware: isSkuAware,
+                  skuBreakdown: isSkuAware ? realSkuBreakdown : void 0,
+                  activeSkuId,
+                  liveSkuId: isHistoricView ? null : liveSkuId
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
                 WorkspaceMetricCards,
@@ -75935,7 +76584,8 @@ var WorkspaceDetailView = ({
                   className: "flex-1",
                   skuAware: isSkuAware,
                   skuBreakdown: isSkuAware ? realSkuBreakdown : void 0,
-                  activeSkuId
+                  activeSkuId,
+                  liveSkuId: isHistoricView ? null : liveSkuId
                 }
               ) })
             ] }),
@@ -76078,7 +76728,11 @@ var WorkspaceDetailView = ({
                   legend: efficiencyLegend,
                   layout: "grid",
                   className: desktopBottomSectionClass,
-                  idleTimeData: idleTimeVlmEnabled ? idleTimeData : void 0
+                  idleTimeData: idleTimeVlmEnabled ? idleTimeData : void 0,
+                  skuAware: isSkuAware,
+                  skuBreakdown: isSkuAware ? realSkuBreakdown : void 0,
+                  activeSkuId,
+                  liveSkuId: isHistoricView ? null : liveSkuId
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(
                 WorkspaceMetricCards,
@@ -76088,7 +76742,8 @@ var WorkspaceDetailView = ({
                   className: "flex-1",
                   skuAware: isSkuAware,
                   skuBreakdown: isSkuAware ? realSkuBreakdown : void 0,
-                  activeSkuId
+                  activeSkuId,
+                  liveSkuId: isHistoricView ? null : liveSkuId
                 }
               ) })
             ] })
@@ -85376,6 +86031,7 @@ exports.authRateLimitService = authRateLimitService;
 exports.awardsService = awardsService;
 exports.buildDateKey = buildDateKey;
 exports.buildKPIsFromLineMetricsRow = buildKPIsFromLineMetricsRow;
+exports.buildKpiLineHierarchy = buildKpiLineHierarchy;
 exports.buildLineSkuBreakdown = buildLineSkuBreakdown;
 exports.buildShiftGroupsKey = buildShiftGroupsKey;
 exports.canRoleAccessDashboardPath = canRoleAccessDashboardPath;