@optifye/dashboard-core 6.11.12 → 6.11.13

package/dist/index.js

@@ -11,8 +11,8 @@ var events = require('events');
 var supabaseJs = require('@supabase/supabase-js');
 var Hls = require('hls.js');
 var useSWR = require('swr');
-var motionUtils = require('motion-utils');
 var lucideReact = require('lucide-react');
+var motionUtils = require('motion-utils');
 var recharts = require('recharts');
 var reactSlot = require('@radix-ui/react-slot');
 var SelectPrimitive = require('@radix-ui/react-select');
@@ -3446,6 +3446,25 @@ function isValidFactoryViewConfiguration(entityConfig) {
   return lineIds.length > 0;
 }
 
+// src/lib/constants/videoGridMetricMode.ts
+var VALID_VIDEO_GRID_METRIC_MODES = /* @__PURE__ */ new Set([
+  "efficiency",
+  "recent_flow",
+  "recent_flow_wip_gated"
+]);
+var normalizeVideoGridMetricMode = (value, assemblyEnabled = false) => {
+  const normalized = typeof value === "string" ? value.trim().toLowerCase() : "";
+  if (VALID_VIDEO_GRID_METRIC_MODES.has(normalized)) {
+    return normalized;
+  }
+  return assemblyEnabled ? "recent_flow_wip_gated" : "efficiency";
+};
+var isRecentFlowVideoGridMetricMode = (value, assemblyEnabled = false) => {
+  const normalized = normalizeVideoGridMetricMode(value, assemblyEnabled);
+  return normalized === "recent_flow" || normalized === "recent_flow_wip_gated";
+};
+var isWipGatedVideoGridMetricMode = (value, assemblyEnabled = false) => normalizeVideoGridMetricMode(value, assemblyEnabled) === "recent_flow_wip_gated";
+
 // src/lib/services/lineMetricsSelection.ts
 var toTimestamp = (value) => {
   if (typeof value !== "string") return 0;
@@ -3907,7 +3926,7 @@ var dashboardService = {
         company_name: data.company_name || "Company X",
         date: data.date,
         shift_id: data.shift_id,
-        action_name: data.action_name || "",
+        action_name: data.action_display_name || data.action_name || "",
         shift_start: data.shift_start || (data.shift_id === (shiftConfig.dayShift?.id ?? 0) ? shiftConfig.dayShift?.startTime : shiftConfig.nightShift?.startTime) || "00:00",
         shift_end: data.shift_end || (data.shift_id === (shiftConfig.dayShift?.id ?? 0) ? shiftConfig.dayShift?.endTime : shiftConfig.nightShift?.endTime) || "00:00",
         shift_type: data.shift_type || (data.shift_id === (shiftConfig.dayShift?.id ?? 0) ? "Day" : "Night"),
@@ -3976,7 +3995,9 @@ var dashboardService = {
           company_id,
           companies!lines_company_id_fkey(company_name:name),
           enable,
-          monitoring_mode
+          monitoring_mode,
+          assembly,
+          video_grid_metric_mode
         `).eq("enable", true);
       if (companyId) {
         query = query.eq("company_id", companyId);
@@ -3996,7 +4017,12 @@ var dashboardService = {
         company_name: line.companies?.company_name ?? "N/A",
         enable: line.enable ?? true,
         // Default to true if not specified
-        monitoring_mode: line.monitoring_mode ?? "output"
+        monitoring_mode: line.monitoring_mode ?? "output",
+        assembly: line.assembly ?? false,
+        video_grid_metric_mode: normalizeVideoGridMetricMode(
+          line.video_grid_metric_mode,
+          line.assembly ?? false
+        )
       }));
       return transformedLines;
     } catch (err) {
@@ -4033,7 +4059,7 @@ var dashboardService = {
         }
         const lineIdsToQuery = configuredLineIds;
         const [line1Result, metricsResult2] = await Promise.all([
-          supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", defaultLineId).single(),
+          supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", defaultLineId).single(),
           supabase.from(lineMetricsTable).select("*").in("line_id", lineIdsToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
         ]);
         if (line1Result.error) throw line1Result.error;
@@ -4112,7 +4138,7 @@ var dashboardService = {
         throw new Error("Company ID must be configured for detailed line requests.");
       }
       const [lineResult, metricsResult] = await Promise.all([
-        supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single(),
+        supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single(),
         supabase.from(lineMetricsTable).select("*").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
       ]);
       if (lineResult.error) throw lineResult.error;
@@ -4928,25 +4954,25 @@ var workspaceService = {
     if (!configuredFactoryId) {
       throw new Error("Factory ID (entityConfig.factoryId) must be configured to update line thresholds.");
     }
-    let outputWorkspaces = workspaces.filter((ws) => ws.action_type === "packaging");
+    let outputWorkspaces = workspaces.filter((ws) => ws.action_type === "output");
     if (outputWorkspaces.length === 0) {
-      const packagingKeywords = ["packaging", "package", "packing", "pack"];
-      const possiblePackagingWorkspaces = workspaces.filter((ws) => {
+      const outputKeywords = ["output", "packaging", "package", "packing", "pack"];
+      const possibleOutputWorkspaces = workspaces.filter((ws) => {
         if (ws.workspace_id && typeof ws.workspace_id === "string") {
           const wsIdLower = ws.workspace_id.toLowerCase();
-          return packagingKeywords.some((keyword) => wsIdLower.includes(keyword));
+          return outputKeywords.some((keyword) => wsIdLower.includes(keyword));
         }
         return false;
       });
-      if (possiblePackagingWorkspaces.length > 0) {
-        outputWorkspaces = possiblePackagingWorkspaces;
+      if (possibleOutputWorkspaces.length > 0) {
+        outputWorkspaces = possibleOutputWorkspaces;
       } else {
-        console.warn("[WorkspaceService] Unable to determine packaging workspaces for threshold calculation. Using all workspaces.");
+        console.warn("[WorkspaceService] Unable to determine output-family workspaces for threshold calculation. Using all workspaces.");
         outputWorkspaces = workspaces;
       }
     }
     if (outputWorkspaces.length === 0 && workspaces.length > 0) {
-      console.warn('[WorkspaceService] No workspaces with action_type "packaging" found for line threshold calculation. Thresholds might be zero.');
+      console.warn('[WorkspaceService] No workspaces with action_type "output" found for line threshold calculation. Thresholds might be zero.');
     }
     const totalDayOutput = outputWorkspaces.reduce((sum, ws) => sum + (ws.action_total_day_output || 0), 0);
     const totalPPH = outputWorkspaces.reduce((sum, ws) => sum + (ws.action_pph_threshold || 0), 0);
@@ -8466,7 +8492,11 @@ var LinesService = class {
         createdAt: line.created_at,
         factoryId: line.factory_id,
         monitoringMode: line.monitoring_mode ?? "output",
-        assembly: line.assembly ?? false
+        assembly: line.assembly ?? false,
+        videoGridMetricMode: normalizeVideoGridMetricMode(
+          line.video_grid_metric_mode,
+          line.assembly ?? false
+        )
       }));
     } catch (error) {
       console.error("Error fetching lines:", error);
@@ -8510,7 +8540,11 @@ var LinesService = class {
         createdAt: line.created_at,
         factoryId: line.factory_id,
         monitoringMode: line.monitoring_mode ?? "output",
-        assembly: line.assembly ?? false
+        assembly: line.assembly ?? false,
+        videoGridMetricMode: normalizeVideoGridMetricMode(
+          line.video_grid_metric_mode,
+          line.assembly ?? false
+        )
       }));
     } catch (error) {
       console.error("Error fetching all lines:", error);
@@ -8562,7 +8596,12 @@ var LinesService = class {
         isActive: data.enable,
         createdAt: data.created_at,
         factoryId: data.factory_id,
-        monitoringMode: data.monitoring_mode ?? "output"
+        monitoringMode: data.monitoring_mode ?? "output",
+        assembly: data.assembly ?? false,
+        videoGridMetricMode: normalizeVideoGridMetricMode(
+          data.video_grid_metric_mode,
+          data.assembly ?? false
+        )
       };
     } catch (error) {
       console.error("Error fetching line:", error);
@@ -9703,78 +9742,6 @@ var createStorageService = (supabase) => ({
   }
 });
 
-// src/lib/constants/idleTimeColors.ts
-var IDLE_TIME_REASON_COLORS = {
-  "Operator Absent": {
-    hex: "#dc2626",
-    // red-600 - Critical/Urgent
-    text: "text-red-600",
-    bg: "bg-red-50",
-    border: "border-red-200"
-  },
-  "No Material": {
-    hex: "#f59e0b",
-    // amber-500 - Warning/Supply Chain
-    text: "text-amber-600",
-    bg: "bg-amber-50",
-    border: "border-amber-200"
-  },
-  "Machine Downtime": {
-    hex: "#3b82f6",
-    // blue-500 - Scheduled/Technical
-    text: "text-blue-600",
-    bg: "bg-blue-50",
-    border: "border-blue-200"
-  },
-  "Operator Idle": {
-    hex: "#8b5cf6",
-    // violet-500 - Low Priority/Behavioral
-    text: "text-violet-600",
-    bg: "bg-violet-50",
-    border: "border-violet-200"
-  }
-};
-var FALLBACK_HEX_COLORS = [
-  "#dc2626",
-  // red-600
-  "#ea580c",
-  // orange-600
-  "#ca8a04",
-  // yellow-600
-  "#16a34a",
-  // green-600
-  "#0891b2",
-  // cyan-600
-  "#2563eb",
-  // blue-600
-  "#7c3aed",
-  // violet-600
-  "#c026d3"
-  // fuchsia-600
-];
-var DEFAULT_CONFIG3 = {
-  hex: "#9ca3af",
-  text: "text-gray-500",
-  bg: "bg-gray-50",
-  border: "border-gray-200"
-};
-function getIdleTimeReasonColor(reason, index = 0) {
-  const normalizedReason = reason.includes("_") ? reason.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ") : reason;
-  if (IDLE_TIME_REASON_COLORS[normalizedReason]) {
-    return IDLE_TIME_REASON_COLORS[normalizedReason];
-  }
-  const lowerReason = normalizedReason.toLowerCase();
-  const foundKey = Object.keys(IDLE_TIME_REASON_COLORS).find((k) => k.toLowerCase() === lowerReason);
-  if (foundKey) {
-    return IDLE_TIME_REASON_COLORS[foundKey];
-  }
-  const fallbackHex = FALLBACK_HEX_COLORS[index % FALLBACK_HEX_COLORS.length];
-  return {
-    ...DEFAULT_CONFIG3,
-    hex: fallbackHex
-  };
-}
-
 // src/lib/services/idleTimeReasonService.ts
 async function fetchIdleTimeReasons(params) {
   const { workspaceId, lineId, date, shiftId, startDate, endDate, token } = params;
@@ -9832,7 +9799,12 @@ async function fetchIdleTimeReasons(params) {
 }
 function transformToChartData(data) {
   return data.reasons.map((reason) => ({
-    name: formatReasonLabel(reason.reason),
+    name: reason.display_name || formatReasonLabel(reason.reason_key || reason.reason),
+    reasonKey: reason.reason_key || reason.reason,
+    displayName: reason.display_name || formatReasonLabel(reason.reason_key || reason.reason),
+    paletteToken: reason.palette_token,
+    iconToken: reason.icon_token,
+    isKnown: reason.is_known,
     value: reason.percentage,
     totalDurationSeconds: reason.total_duration_seconds,
     efficiencyLossPercentage: reason.efficiency_loss_percentage ?? null
@@ -9841,9 +9813,6 @@ function transformToChartData(data) {
 function formatReasonLabel(reason) {
   return reason.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
-function getReasonColor(reason, index = 0) {
-  return getIdleTimeReasonColor(reason, index).hex;
-}
 
 // src/lib/services/sessionTracker.ts
 function generateSessionId() {
@@ -11566,6 +11535,52 @@ var workspaceMetricsStore = {
   }
 };
 
+// src/lib/constants/actions.ts
+var ACTION_NAMES = {
+  /** Assembly operations */
+  ASSEMBLY: "Assembly",
+  /** Packaging operations */
+  PACKAGING: "Packaging",
+  /** Output operations (user-facing label for the legacy packaging family) */
+  OUTPUT: "Output",
+  /** Inspection operations */
+  INSPECTION: "Inspection",
+  /** Testing operations */
+  TESTING: "Testing",
+  /** Quality control operations */
+  QUALITY_CONTROL: "Quality Control"
+};
+var ACTION_FAMILIES = {
+  ASSEMBLY: "assembly",
+  OUTPUT: "output",
+  OTHER: "other"
+};
+var normalizeActionFamily = (params) => {
+  const explicitValue = (params.actionFamily ?? params.actionType ?? "").trim().toLowerCase();
+  if (explicitValue === ACTION_FAMILIES.ASSEMBLY) return ACTION_FAMILIES.ASSEMBLY;
+  if (explicitValue === ACTION_FAMILIES.OUTPUT || explicitValue === "packaging") {
+    return ACTION_FAMILIES.OUTPUT;
+  }
+  if (explicitValue === ACTION_FAMILIES.OTHER) return ACTION_FAMILIES.OTHER;
+  const normalizedName = (params.actionName ?? "").trim().toLowerCase();
+  if (!normalizedName) return null;
+  if (normalizedName === "output" || normalizedName.includes("packag")) {
+    return ACTION_FAMILIES.OUTPUT;
+  }
+  if (normalizedName.includes("assembly")) {
+    return ACTION_FAMILIES.ASSEMBLY;
+  }
+  return ACTION_FAMILIES.OTHER;
+};
+var getActionDisplayName = (params) => {
+  const explicitDisplayName = (params.displayName ?? "").trim();
+  if (explicitDisplayName) return explicitDisplayName;
+  const family = normalizeActionFamily(params);
+  if (family === ACTION_FAMILIES.OUTPUT) return ACTION_NAMES.OUTPUT;
+  if (family === ACTION_FAMILIES.ASSEMBLY) return ACTION_NAMES.ASSEMBLY;
+  return (params.actionName ?? "").trim();
+};
+
 // src/lib/utils/workspaceMetricsTransform.ts
 var coerceNumber = (value, fallback = 0) => {
   const num = typeof value === "number" ? value : Number(value);
@@ -11755,10 +11770,17 @@ var toWorkspaceDetailedMetrics = ({
   const targetOutput = coerceNumber(data.target_output ?? data.total_day_output, 0);
   const idealOutput = coerceNumber(data.ideal_output ?? data.ideal_output_until_now, 0);
   const outputDifference = totalActions - idealOutput;
+  const hourlyCycleTimes = Array.isArray(data.hourly_cycle_times) ? data.hourly_cycle_times.map((value) => coerceNumber(value, 0)) : [];
   const totalWorkspacesValue = coerceNumber(
     data.total_workspaces ?? lineMetricsById?.[data.line_id || ""]?.total_workspaces ?? workspaceConfig.totalWorkspaces,
     0
   );
+  const actionFamily = normalizeActionFamily({
+    actionFamily: data.action_family,
+    actionType: data.action_type,
+    actionName: data.action_name
+  });
+  const actionType = actionFamily === "assembly" || actionFamily === "output" ? actionFamily : null;
   return {
     workspace_id: data.workspace_id,
     workspace_name: data.workspace_name,
@@ -11769,8 +11791,20 @@ var toWorkspaceDetailedMetrics = ({
     company_name: data.company_name || "",
     date: data.date,
     shift_id: shiftId,
-    action_name: data.action_name || "",
-    action_type: data.action_type === "assembly" || data.action_type === "packaging" ? data.action_type : null,
+    action_name: getActionDisplayName({
+      displayName: data.action_display_name,
+      actionFamily: data.action_family,
+      actionType: data.action_type,
+      actionName: data.action_name
+    }),
+    action_type: actionType,
+    action_family: actionFamily,
+    action_display_name: getActionDisplayName({
+      displayName: data.action_display_name,
+      actionFamily: data.action_family,
+      actionType: data.action_type,
+      actionName: data.action_name
+    }),
     shift_start: shiftStart,
     shift_end: shiftEnd,
     shift_type: shiftType,
@@ -11783,6 +11817,7 @@ var toWorkspaceDetailedMetrics = ({
     avg_efficiency: coerceNumber(data.efficiency ?? data.avg_efficiency, 0),
     total_actions: totalActions,
     hourly_action_counts: hourlyActionCounts,
+    hourly_cycle_times: hourlyCycleTimes,
     workspace_rank: coerceNumber(data.workspace_rank, 0),
     total_workspaces: totalWorkspacesValue,
     ideal_output_until_now: idealOutput,
@@ -13321,6 +13356,12 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
       const transformedWorkspaceData = allWorkspaceMetrics.map((item) => {
         const idleTimeValue = typeof item.idle_time === "number" ? item.idle_time : Number(item.idle_time);
         const idleTimeSeconds = Number.isFinite(idleTimeValue) ? idleTimeValue : void 0;
+        const actionFamily = normalizeActionFamily({
+          actionFamily: item.action_family,
+          actionType: item.action_type,
+          actionName: item.action_name
+        });
+        const actionType = actionFamily === "assembly" || actionFamily === "output" ? actionFamily : null;
         return {
           company_id: item.company_id || companyId,
           line_id: item.line_id,
@@ -13340,7 +13381,18 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
           monitoring_mode: item.monitoring_mode ?? void 0,
           idle_time: idleTimeSeconds,
           assembly_enabled: item.assembly_enabled ?? false,
-          action_type: item.action_type === "assembly" || item.action_type === "packaging" ? item.action_type : null,
+          video_grid_metric_mode: normalizeVideoGridMetricMode(
+            item.video_grid_metric_mode,
+            item.assembly_enabled ?? false
+          ),
+          action_type: actionType,
+          action_family: actionFamily,
+          action_display_name: getActionDisplayName({
+            displayName: item.action_display_name,
+            actionFamily: item.action_family,
+            actionType: item.action_type,
+            actionName: item.action_name
+          }),
           recent_flow_mode: item.recent_flow_mode ?? void 0,
           recent_flow_percent: item.recent_flow_percent ?? null,
           recent_flow_actual_rate_pph: item.recent_flow_actual_rate_pph ?? null,
@@ -19260,8 +19312,115 @@ function useIdleTimeReasons({
     refetch: fetchData
   };
 }
+var DEFAULT_PALETTE_TOKEN = "slate";
+var DEFAULT_ICON_TOKEN = "help-circle";
+var PALETTE_CONFIG = {
+  red: {
+    hex: "#dc2626",
+    textClass: "text-red-600",
+    bgClass: "bg-red-50",
+    borderClass: "border-red-200"
+  },
+  amber: {
+    hex: "#f59e0b",
+    textClass: "text-amber-600",
+    bgClass: "bg-amber-50",
+    borderClass: "border-amber-200"
+  },
+  blue: {
+    hex: "#3b82f6",
+    textClass: "text-blue-600",
+    bgClass: "bg-blue-50",
+    borderClass: "border-blue-200"
+  },
+  violet: {
+    hex: "#8b5cf6",
+    textClass: "text-violet-600",
+    bgClass: "bg-violet-50",
+    borderClass: "border-violet-200"
+  },
+  emerald: {
+    hex: "#10b981",
+    textClass: "text-emerald-600",
+    bgClass: "bg-emerald-50",
+    borderClass: "border-emerald-200"
+  },
+  cyan: {
+    hex: "#0891b2",
+    textClass: "text-cyan-600",
+    bgClass: "bg-cyan-50",
+    borderClass: "border-cyan-200"
+  },
+  slate: {
+    hex: "#64748b",
+    textClass: "text-slate-600",
+    bgClass: "bg-slate-50",
+    borderClass: "border-slate-200"
+  }
+};
+var ICON_CONFIG = {
+  "alert-triangle": lucideReact.AlertTriangle,
+  "refresh-cw": lucideReact.RefreshCw,
+  package: lucideReact.Package,
+  clock: lucideReact.Clock,
+  "user-x": lucideReact.UserX,
+  wrench: lucideReact.Wrench,
+  activity: lucideReact.Activity,
+  "help-circle": lucideReact.HelpCircle
+};
+var humanizeIdleReasonLabel = (value) => {
+  const text = String(value || "").trim();
+  if (!text) {
+    return "Unknown";
+  }
+  return text.replace(/_/g, " ").split(/\s+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+};
+var normalizePaletteToken = (value) => {
+  const token = String(value || "").trim().toLowerCase();
+  if (token in PALETTE_CONFIG) {
+    return token;
+  }
+  return DEFAULT_PALETTE_TOKEN;
+};
+var normalizeIconToken = (value) => {
+  const token = String(value || "").trim().toLowerCase();
+  if (token in ICON_CONFIG) {
+    return token;
+  }
+  return DEFAULT_ICON_TOKEN;
+};
+var getIdleReasonPresentation = (metadata) => {
+  const label = typeof metadata?.label === "string" && metadata.label.trim() ? metadata.label.trim() : null;
+  const displayName = typeof metadata?.displayName === "string" && metadata.displayName.trim() ? metadata.displayName.trim() : humanizeIdleReasonLabel(label);
+  const paletteToken = normalizePaletteToken(metadata?.paletteToken);
+  const iconToken = normalizeIconToken(metadata?.iconToken);
+  return {
+    label,
+    displayName,
+    paletteToken,
+    iconToken,
+    isKnown: Boolean(metadata?.isKnown),
+    Icon: ICON_CONFIG[iconToken],
+    ...PALETTE_CONFIG[paletteToken]
+  };
+};
+var getIdleReasonHexColor = (metadata) => getIdleReasonPresentation(metadata).hex;
 
 // src/lib/services/clipClassificationService.ts
+var normalizeClassification = (value) => {
+  const rawLabel = typeof value?.label === "string" ? value.label.trim() : "";
+  const label = rawLabel || void 0;
+  const parsedConfidence = typeof value?.confidence === "number" ? value.confidence : typeof value?.confidence === "string" ? Number(value.confidence) : void 0;
+  return {
+    status: value?.status === "classified" ? "classified" : "processing",
+    label,
+    displayName: typeof value?.display_name === "string" ? value.display_name : label ? humanizeIdleReasonLabel(label) : void 0,
+    paletteToken: typeof value?.palette_token === "string" ? value.palette_token : void 0,
+    iconToken: typeof value?.icon_token === "string" ? value.icon_token : void 0,
+    isKnown: typeof value?.is_known === "boolean" ? value.is_known : void 0,
+    confidence: parsedConfidence !== void 0 && Number.isFinite(parsedConfidence) ? parsedConfidence : void 0
+  };
+};
 function parseCleanLabel(rawLabel) {
   if (!rawLabel) return null;
   const patterns = [
@@ -19315,7 +19474,13 @@ async function fetchClassifications(clipIds, token) {
             );
           }
           const data = await response.json();
-          return data.classifications || {};
+          const rawClassifications = data.classifications || {};
+          return Object.fromEntries(
+            Object.entries(rawClassifications).map(([clipId, classification]) => [
+              clipId,
+              normalizeClassification(classification)
+            ])
+          );
         } catch (error) {
           console.error("Error fetching chunk:", error);
           return Object.fromEntries(
@@ -19356,21 +19521,30 @@ function useClassificationRealtimeUpdates({
       },
       (payload) => {
         console.log("[useClassificationRealtimeUpdates] New classification:", payload);
-        try {
-          const { clip_id, clip_label, confidence_score } = payload.new;
-          const parsedLabel = parseCleanLabel(clip_label);
-          if (parsedLabel) {
-            onClassificationUpdate(clip_id, {
-              status: "classified",
-              label: parsedLabel,
-              confidence: confidence_score || 0
-            });
-          } else {
-            console.warn("[useClassificationRealtimeUpdates] Failed to parse label:", clip_label);
+        void (async () => {
+          try {
+            const { clip_id, clip_label, confidence_score } = payload.new;
+            const token = await getAccessTokenOrRedirect(supabase, { redirectReason: "session_expired" });
+            const fetched = await fetchClassifications([clip_id], token);
+            const classification = fetched[clip_id];
+            if (classification) {
+              onClassificationUpdate(clip_id, classification);
+              return;
+            }
+            const parsedLabel = parseCleanLabel(clip_label);
+            if (parsedLabel) {
+              onClassificationUpdate(clip_id, {
+                status: "classified",
+                label: parsedLabel,
+                confidence: confidence_score || 0
+              });
+            } else {
+              console.warn("[useClassificationRealtimeUpdates] Failed to parse label:", clip_label);
+            }
+          } catch (error) {
+            console.error("[useClassificationRealtimeUpdates] Error processing update:", error);
           }
-        } catch (error) {
-          console.error("[useClassificationRealtimeUpdates] Error processing update:", error);
-        }
+        })();
       }
     ).subscribe((status) => {
       console.log(`[useClassificationRealtimeUpdates] Subscription status:`, status);
@@ -32402,90 +32576,99 @@ var CycleTimeOverTimeChart = ({
   data,
   idealCycleTime,
   shiftStart,
-  className = ""
+  shiftEnd,
+  xAxisMode = "recent",
+  datasetKey,
+  className = "",
+  showIdleTime = false,
+  idleTimeData = []
 }) => {
   const MAX_DATA_POINTS = 40;
   const containerRef = React141__namespace.default.useRef(null);
   const [containerReady, setContainerReady] = React141__namespace.default.useState(false);
-  const getHourFromTimeString = (timeStr) => {
-    const [hours, minutes] = timeStr.split(":");
-    return parseInt(hours);
+  const parseTimeToMinutes3 = (value) => {
+    const [hours, minutes] = value.split(":").map(Number);
+    if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return 0;
+    return hours * 60 + minutes;
   };
-  getHourFromTimeString(shiftStart);
-  const getDisplayData = (rawData) => {
-    return rawData.slice(Math.max(0, rawData.length - MAX_DATA_POINTS));
+  const formatHourLabel = (slotIndex) => {
+    const baseMinutes = parseTimeToMinutes3(shiftStart);
+    const absoluteMinutes = baseMinutes + slotIndex * 60;
+    const hour24 = Math.floor(absoluteMinutes % (24 * 60) / 60);
+    const ampm = hour24 >= 12 ? "PM" : "AM";
+    const hour12 = hour24 % 12 || 12;
+    return `${hour12}${ampm}`;
+  };
+  const formatHourRangeLabel = (slotIndex) => {
+    const startLabel = formatHourLabel(slotIndex);
+    const endLabel = shiftEnd && slotIndex === DURATION - 1 ? formatHourLabel(slotIndex + 1) : formatHourLabel(slotIndex + 1);
+    return `${startLabel} - ${endLabel}`;
   };
+  const getDisplayData = React141__namespace.default.useCallback((rawData) => {
+    if (xAxisMode === "hourly") return rawData;
+    return rawData.slice(Math.max(0, rawData.length - MAX_DATA_POINTS));
+  }, [xAxisMode]);
   const displayData = getDisplayData(data);
   const DURATION = displayData.length;
-  const [animatedData, setAnimatedData] = React141__namespace.default.useState(Array(DURATION).fill(0));
-  const prevDataRef = React141__namespace.default.useRef(Array(DURATION).fill(0));
-  const animationFrameRef = React141__namespace.default.useRef(null);
-  const animateToNewData = React141__namespace.default.useCallback((targetData) => {
-    const startData = [...prevDataRef.current];
-    const startTime = performance.now();
-    const duration = 1200;
-    const animate = (currentTime) => {
-      const elapsed = currentTime - startTime;
-      const progress7 = Math.min(elapsed / duration, 1);
-      const easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
-      const easedProgress = easeOutQuint(progress7);
-      const newData = startData.map((start, index) => {
-        const target = targetData[index] || 0;
-        const change = target - start;
-        const scaleFactor = Math.min(1, 50 / Math.abs(change || 1));
-        const adjustedEasing = progress7 * (scaleFactor + (1 - scaleFactor) * easedProgress);
-        return start + change * adjustedEasing;
-      });
-      setAnimatedData(newData);
-      prevDataRef.current = newData;
-      if (progress7 < 1) {
-        animationFrameRef.current = requestAnimationFrame(animate);
-      } else {
-        setAnimatedData(targetData);
-        prevDataRef.current = targetData;
-      }
-    };
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-    animationFrameRef.current = requestAnimationFrame(animate);
-  }, []);
+  const effectiveDatasetKey = datasetKey || `cycle-time:${xAxisMode}`;
+  const [animatedDatasetKey, setAnimatedDatasetKey] = React141__namespace.default.useState(null);
+  const shouldAnimate = animatedDatasetKey !== effectiveDatasetKey;
+  const handleAnimationEnd = React141__namespace.default.useCallback(() => {
+    setAnimatedDatasetKey((currentValue) => currentValue === effectiveDatasetKey ? currentValue : effectiveDatasetKey);
+  }, [effectiveDatasetKey]);
+  const finalData = displayData;
   React141__namespace.default.useEffect(() => {
-    if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
-      const processedData = getDisplayData(data);
-      animateToNewData(processedData);
+    const containerNode = containerRef.current;
+    if (!containerNode) {
+      setContainerReady(true);
+      return void 0;
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, [data, animateToNewData]);
-  React141__namespace.default.useEffect(() => {
+    let frameId = null;
+    let resizeObserver = null;
     const checkContainerDimensions = () => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        if (rect.width > 0 && rect.height > 0) {
-          setContainerReady(true);
-        }
+      const rect = containerNode.getBoundingClientRect();
+      const isReady = rect.width > 0 && rect.height > 0;
+      if (isReady) {
+        setContainerReady(true);
       }
+      return isReady;
     };
-    checkContainerDimensions();
-    const resizeObserver = new ResizeObserver(checkContainerDimensions);
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
+    if (checkContainerDimensions()) {
+      return void 0;
     }
-    const fallbackTimeout = setTimeout(() => {
+    frameId = window.requestAnimationFrame(() => {
+      checkContainerDimensions();
+    });
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        if (checkContainerDimensions() && resizeObserver) {
+          resizeObserver.disconnect();
+          resizeObserver = null;
+        }
+      });
+      resizeObserver.observe(containerNode);
+    } else {
       setContainerReady(true);
-    }, 100);
+    }
     return () => {
-      resizeObserver.disconnect();
-      clearTimeout(fallbackTimeout);
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+      resizeObserver?.disconnect();
     };
   }, []);
+  const labelInterval = React141__namespace.default.useMemo(() => {
+    if (xAxisMode === "hourly") {
+      return Math.max(1, Math.ceil(DURATION / 8));
+    }
+    return 5;
+  }, [xAxisMode, DURATION]);
   const formatTimeLabel = (dataIndex) => {
     if (DURATION === 0) return "";
-    if (dataIndex % 5 !== 0 && dataIndex !== DURATION - 1) return "";
+    if (dataIndex % labelInterval !== 0 && dataIndex !== DURATION - 1) return "";
+    if (xAxisMode === "hourly") {
+      return formatHourLabel(dataIndex);
+    }
     const timeAgo = (DURATION - 1 - dataIndex) * 90;
     const minutes = Math.floor(timeAgo / 60);
     const seconds = timeAgo % 60;
@@ -32499,6 +32682,9 @@ var CycleTimeOverTimeChart = ({
   };
   const formatTooltipTime = (dataIndex) => {
     if (DURATION === 0) return "";
+    if (xAxisMode === "hourly") {
+      return formatHourRangeLabel(dataIndex);
+    }
     const timeAgo = (DURATION - 1 - dataIndex) * 90;
     const minutes = Math.floor(timeAgo / 60);
     const seconds = timeAgo % 60;
@@ -32512,39 +32698,40 @@ var CycleTimeOverTimeChart = ({
       return `${minutes} minutes ${seconds} seconds ago`;
     }
   };
-  const chartData = Array.from({ length: DURATION }, (_, i) => {
+  const chartData = React141__namespace.default.useMemo(() => Array.from({ length: DURATION }, (_, i) => {
     return {
       timeIndex: i,
       label: formatTimeLabel(i),
       tooltip: formatTooltipTime(i),
-      cycleTime: animatedData[i] || 0,
-      color: (animatedData[i] || 0) <= idealCycleTime ? "#00AB45" : "#E34329"
+      cycleTime: finalData[i] || 0,
+      idleMinutes: showIdleTime && idleTimeData && idleTimeData[i] || 0,
+      color: (finalData[i] || 0) <= idealCycleTime ? "#00AB45" : "#E34329"
     };
-  });
-  const renderLegend = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 absolute -bottom-1 left-0 right-0 bg-white py-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-t-2 border-[#E34329] border-dashed" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      "Standard: ",
-      idealCycleTime.toFixed(1),
-      " seconds"
-    ] })
-  ] }) });
+  }), [DURATION, finalData, showIdleTime, idleTimeData, idealCycleTime]);
+  const renderLegend = () => {
+    if (!showIdleTime) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start text-[10px] font-bold text-gray-500 mb-6 tracking-[0.05em] gap-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-[#f59e0b]" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Idle Time (min)" })
+    ] }) });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: containerRef,
-      className: `w-full h-full min-w-0 relative pb-8 ${className}`,
+      className: `w-full h-full min-w-0 flex flex-col relative pb-2 ${className}`,
       style: { minHeight: "200px", minWidth: 0 },
       children: [
-        containerReady ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        renderLegend(),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 w-full", children: containerReady ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
           recharts.LineChart,
           {
             data: chartData,
             margin: {
-              top: 25,
+              top: 5,
               right: 30,
               bottom: 25,
-              left: 35
+              left: 10
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
@@ -32554,17 +32741,18 @@ var CycleTimeOverTimeChart = ({
                   dataKey: "label",
                   tick: { fontSize: 11 },
                   interval: 0,
-                  angle: -30,
-                  textAnchor: "end",
-                  tickMargin: 15,
-                  height: 60
+                  angle: xAxisMode === "hourly" ? 0 : -30,
+                  textAnchor: xAxisMode === "hourly" ? "middle" : "end",
+                  tickMargin: xAxisMode === "hourly" ? 8 : 15,
+                  height: xAxisMode === "hourly" ? 40 : 60
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 recharts.YAxis,
                 {
                   tickMargin: 8,
-                  width: 35,
+                  width: 45,
+                  yAxisId: "cycle",
                   domain: ["auto", "auto"],
                   ticks: [0, idealCycleTime, ...Array.from({ length: 4 }, (_, i) => (i + 1) * Math.ceil(idealCycleTime / 2))].sort((a, b) => a - b),
                   tickFormatter: (value) => String(value),
@@ -32588,6 +32776,20 @@ var CycleTimeOverTimeChart = ({
                   }
                 }
               ),
+              showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.YAxis,
+                {
+                  yAxisId: "idle",
+                  orientation: "right",
+                  tickMargin: 8,
+                  width: 35,
+                  domain: [0, 60],
+                  tickFormatter: (value) => `${value}m`,
+                  tick: { fontSize: 11, fill: "#f59e0b" },
+                  axisLine: false,
+                  tickLine: false
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 recharts.Tooltip,
                 {
@@ -32615,8 +32817,11 @@ var CycleTimeOverTimeChart = ({
                     }
                     return label;
                   },
-                  formatter: (value) => {
+                  formatter: (value, name) => {
                     const numValue = typeof value === "number" ? value : Number(value);
+                    if (name === "idleMinutes") {
+                      return [`${numValue.toFixed(0)} minutes`, "Idle Time"];
+                    }
                     return [`${numValue.toFixed(1)} seconds`, "Cycle Time"];
                   },
                   animationDuration: 200
@@ -32626,6 +32831,7 @@ var CycleTimeOverTimeChart = ({
                 recharts.ReferenceLine,
                 {
                   y: idealCycleTime,
+                  yAxisId: "cycle",
                   stroke: "#E34329",
                   strokeDasharray: "3 3",
                   strokeWidth: 2,
@@ -32642,6 +32848,7 @@ var CycleTimeOverTimeChart = ({
                 recharts.Line,
                 {
                   type: "monotone",
+                  yAxisId: "cycle",
                   dataKey: "cycleTime",
                   stroke: "#3B82F6",
                   strokeWidth: 2,
@@ -32691,15 +32898,35 @@ var CycleTimeOverTimeChart = ({
                       }
                     );
                   },
+                  isAnimationActive: shouldAnimate,
                   animationBegin: 0,
-                  animationDuration: 1500,
+                  animationDuration: 1200,
+                  animationEasing: "ease-out",
+                  onAnimationEnd: handleAnimationEnd
+                },
+                `${effectiveDatasetKey}:cycle`
+              ),
+              showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Line,
+                {
+                  type: "monotone",
+                  yAxisId: "idle",
+                  dataKey: "idleMinutes",
+                  stroke: "#f59e0b",
+                  strokeWidth: 2,
+                  strokeDasharray: "4 4",
+                  dot: { r: 4, fill: "#f59e0b", stroke: "#fff", strokeWidth: 1 },
+                  activeDot: { r: 6, fill: "#f59e0b", stroke: "#fff", strokeWidth: 2 },
+                  isAnimationActive: shouldAnimate,
+                  animationBegin: 0,
+                  animationDuration: 1200,
                   animationEasing: "ease-out"
-                }
+                },
+                `${effectiveDatasetKey}:idle`
               )
             ]
           }
-        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 text-sm", children: "Loading chart..." }) }),
-        renderLegend()
+        ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 text-sm", children: "Loading chart..." }) }) })
       ]
     }
   );
@@ -32891,7 +33118,7 @@ var HourlyOutputChartComponent = ({
     if (!classification.label) {
       return "Reason unavailable";
     }
-    return classification.label.replace(/_/g, " ");
+    return classification.displayName || classification.label.replace(/_/g, " ");
   }, [idleClipRanges, idleTimeClipClassifications]);
   const { shiftDuration, shiftEndTime, hasPartialLastHour } = React141__namespace.default.useMemo(() => {
     console.log("[HourlyOutputChart] Calculating shift duration with:", {
@@ -33549,23 +33776,40 @@ var HourlyOutputChart = React141__namespace.default.memo(HourlyOutputChartCompon
 HourlyOutputChart.displayName = "HourlyOutputChart";
 
 // src/components/dashboard/grid/videoGridMetricUtils.ts
-var VIDEO_GRID_LEGEND_LABEL = "7-min Flow";
+var VIDEO_GRID_LEGEND_LABEL = "Flow";
 var MAP_GRID_LEGEND_LABEL = "Efficiency";
 var MIXED_VIDEO_GRID_LEGEND_LABEL = "Flow / Efficiency";
 var isFiniteNumber2 = (value) => typeof value === "number" && Number.isFinite(value);
-var isAssemblyFlowEnabled = (workspace) => workspace.assembly_enabled === true;
-var hasAssemblyRecentFlow = (workspace) => isAssemblyFlowEnabled(workspace) && isFiniteNumber2(workspace.recent_flow_percent);
+var isVideoGridRecentFlowEnabled = (workspace) => isRecentFlowVideoGridMetricMode(
+  workspace.video_grid_metric_mode,
+  workspace.assembly_enabled === true
+);
+var isVideoGridWipGated = (workspace) => isWipGatedVideoGridMetricMode(
+  workspace.video_grid_metric_mode,
+  workspace.assembly_enabled === true
+);
+var hasVideoGridRecentFlow = (workspace) => isVideoGridRecentFlowEnabled(workspace) && isFiniteNumber2(workspace.recent_flow_percent);
+var isVideoGridRecentFlowUnavailable = (workspace) => isVideoGridRecentFlowEnabled(workspace) && !hasVideoGridRecentFlow(workspace);
 var getVideoGridMetricValue = (workspace) => {
   const recentFlowPercent = workspace.recent_flow_percent;
-  if (hasAssemblyRecentFlow(workspace) && isFiniteNumber2(recentFlowPercent)) {
+  if (hasVideoGridRecentFlow(workspace) && isFiniteNumber2(recentFlowPercent)) {
     return recentFlowPercent;
   }
+  if (isVideoGridRecentFlowUnavailable(workspace)) {
+    return null;
+  }
   return workspace.efficiency;
 };
 var hasIncomingWipMapping = (workspace) => Boolean(workspace.incoming_wip_buffer_name);
-var getVideoGridBaseColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => getEfficiencyColor(getVideoGridMetricValue(workspace), legend);
+var getVideoGridBaseColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
+  const metricValue = getVideoGridMetricValue(workspace);
+  if (!isFiniteNumber2(metricValue)) {
+    return "neutral";
+  }
+  return getEfficiencyColor(metricValue, legend);
+};
 var isLowWipGreenOverride = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
-  if (!hasAssemblyRecentFlow(workspace)) {
+  if (!hasVideoGridRecentFlow(workspace) || !isVideoGridWipGated(workspace)) {
     return false;
   }
   if (getVideoGridBaseColorState(workspace, legend) !== "red") {
@@ -33604,7 +33848,10 @@ var getSyntheticLowWipDisplayValue = (workspace, minuteBucket) => {
 var getVideoGridDisplayValue = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND, minuteBucket) => isLowWipGreenOverride(workspace, legend) ? getSyntheticLowWipDisplayValue(workspace, minuteBucket) : getVideoGridMetricValue(workspace);
 var getVideoGridColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND) => {
   const baseColor = getVideoGridBaseColorState(workspace, legend);
-  if (!hasAssemblyRecentFlow(workspace)) {
+  if (!hasVideoGridRecentFlow(workspace)) {
+    return baseColor;
+  }
+  if (!isVideoGridWipGated(workspace)) {
     return baseColor;
   }
   if (baseColor !== "red") {
@@ -33626,11 +33873,11 @@ var getVideoGridLegendLabel = (workspaces) => {
   if (visibleWorkspaces.length === 0) {
     return MAP_GRID_LEGEND_LABEL;
   }
-  const assemblyEnabledCount = visibleWorkspaces.filter(isAssemblyFlowEnabled).length;
-  if (assemblyEnabledCount === 0) {
+  const recentFlowEnabledCount = visibleWorkspaces.filter(isVideoGridRecentFlowEnabled).length;
+  if (recentFlowEnabledCount === 0) {
     return MAP_GRID_LEGEND_LABEL;
   }
-  if (assemblyEnabledCount === visibleWorkspaces.length) {
+  if (recentFlowEnabledCount === visibleWorkspaces.length) {
     return VIDEO_GRID_LEGEND_LABEL;
   }
   return MIXED_VIDEO_GRID_LEGEND_LABEL;
@@ -33680,7 +33927,11 @@ var VideoCard = React141__namespace.default.memo(({
   const videoGridMetricValue = getVideoGridMetricValue(workspace);
   const videoGridDisplayValue = getVideoGridDisplayValue(workspace, effectiveLegend, displayMinuteBucket);
   const videoGridColorState = getVideoGridColorState(workspace, effectiveLegend);
-  const badgeTitle = hasAssemblyRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue)}%` : `Efficiency ${Math.round(videoGridDisplayValue)}%`;
+  const isRecentFlowCard = isVideoGridRecentFlowEnabled(workspace);
+  const hasDisplayMetric = typeof videoGridDisplayValue === "number" && Number.isFinite(videoGridDisplayValue);
+  const hasBarMetric = typeof videoGridMetricValue === "number" && Number.isFinite(videoGridMetricValue);
+  const badgeTitle = hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
+  const badgeLabel = hasDisplayMetric ? `${Math.round(videoGridDisplayValue)}%` : "X";
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
@@ -33762,10 +34013,7 @@ var VideoCard = React141__namespace.default.memo(({
               "data-testid": "video-card-metric-badge",
               className: `bg-black/70 backdrop-blur-sm rounded ${compact ? "px-1.5 py-1" : "px-2 py-1"} text-white border border-white/10`,
               title: badgeTitle,
-              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: [
-                Math.round(videoGridDisplayValue),
-                "%"
-              ] })
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute bottom-0 left-0 right-0 ${compact ? "h-0.5" : "h-1"} bg-black/50 z-30`, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -33773,7 +34021,7 @@ var VideoCard = React141__namespace.default.memo(({
             {
               "data-testid": "video-card-metric-bar",
               className: `h-full ${efficiencyBarClass} transition-all duration-500`,
-              style: { width: `${Math.min(100, videoGridMetricValue)}%` }
+              style: { width: `${hasBarMetric ? Math.min(100, Math.max(0, videoGridMetricValue)) : videoGridColorState === "neutral" ? 100 : 0}%` }
             }
           ) })
         ] }),
@@ -33804,7 +34052,7 @@ var VideoCard = React141__namespace.default.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
+  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_mode !== nextProps.workspace.recent_flow_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
     return false;
   }
   if (prevProps.workspace.workspace_uuid !== nextProps.workspace.workspace_uuid || prevProps.workspace.workspace_name !== nextProps.workspace.workspace_name || prevProps.workspace.line_id !== nextProps.workspace.line_id) {
@@ -39328,45 +39576,56 @@ var FileManagerFilters = ({
   });
   const [loadingPercentile, setLoadingPercentile] = React141.useState(false);
   const resolvedTargetCycleTime = targetCycleTime && targetCycleTime > 0 ? targetCycleTime : null;
-  const getRootCauseConfig = (reason) => {
-    const colorConfig = getIdleTimeReasonColor(reason);
-    let Icon2 = lucideReact.HelpCircle;
-    if (reason.includes("Machine Breakdown")) Icon2 = lucideReact.AlertTriangle;
-    else if (reason.includes("Material")) Icon2 = lucideReact.Package;
-    else if (reason.includes("Worker") || reason.includes("Absent")) Icon2 = lucideReact.UserX;
-    else if (reason.includes("Quality")) Icon2 = lucideReact.XCircle;
-    else if (reason.includes("Power")) Icon2 = lucideReact.Zap;
-    else if (reason.includes("Maintenance") || reason.includes("Tool")) Icon2 = lucideReact.Wrench;
-    else if (reason.includes("Present") || reason.includes("Idle")) Icon2 = lucideReact.Clock;
+  const getIdleTimeClassification = React141.useCallback((clipId) => {
+    const classification = mergedClipClassifications[clipId];
+    return classification || null;
+  }, [mergedClipClassifications]);
+  const getRootCauseConfig = React141.useCallback((classification) => {
+    if (!classification || classification.status === "processing") {
+      return null;
+    }
+    const presentation = getIdleReasonPresentation({
+      label: classification.label,
+      displayName: classification.displayName,
+      paletteToken: classification.paletteToken,
+      iconToken: classification.iconToken,
+      isKnown: classification.isKnown
+    });
     return {
-      color: colorConfig.text,
-      bgColor: colorConfig.bg,
-      borderColor: colorConfig.border,
-      Icon: Icon2,
-      iconColor: colorConfig.text
+      color: presentation.textClass,
+      bgColor: presentation.bgClass,
+      borderColor: presentation.borderClass,
+      Icon: presentation.Icon,
+      iconColor: presentation.textClass,
+      displayName: presentation.displayName
     };
-  };
-  const normalizeIdleReasonLabel = React141.useCallback((label) => {
-    return label.replace(/_/g, " ").trim();
   }, []);
-  const getIdleTimeRootCause = React141.useCallback((clipId) => {
-    const classification = mergedClipClassifications[clipId];
-    if (!classification) return "processing";
-    if (classification.status === "processing") return "processing";
-    return classification.label || "processing";
-  }, [mergedClipClassifications]);
   const idleReasonOptions = React141.useMemo(() => {
     const idleClips = clipMetadata["idle_time"] || [];
-    const uniqueReasons = /* @__PURE__ */ new Set();
+    const uniqueReasons = /* @__PURE__ */ new Map();
     idleClips.forEach((clip) => {
       const clipId = clip.clipId || clip.id;
       if (!clipId) return;
-      const reason = getIdleTimeRootCause(clipId);
-      if (!reason || reason === "processing") return;
-      uniqueReasons.add(normalizeIdleReasonLabel(reason));
+      const classification = getIdleTimeClassification(clipId);
+      if (!classification || classification.status === "processing" || !classification.label) {
+        return;
+      }
+      if (!uniqueReasons.has(classification.label)) {
+        uniqueReasons.set(classification.label, {
+          label: classification.label,
+          displayName: classification.displayName || classification.label.replace(/_/g, " "),
+          paletteToken: classification.paletteToken,
+          iconToken: classification.iconToken,
+          isKnown: classification.isKnown
+        });
+      }
     });
-    return Array.from(uniqueReasons).sort((a, b) => a.localeCompare(b));
-  }, [clipMetadata, getIdleTimeRootCause, normalizeIdleReasonLabel]);
+    return Array.from(uniqueReasons.values()).sort((a, b) => a.displayName.localeCompare(b.displayName));
+  }, [clipMetadata, getIdleTimeClassification]);
+  const selectedIdleReasonOption = React141.useMemo(
+    () => idleReasonOptions.find((reason) => reason.label === idleLabelFilter) || null,
+    [idleReasonOptions, idleLabelFilter]
+  );
   const getClipBadge = React141.useCallback((node) => {
     if (node.categoryId === "idle_time" || node.categoryId === "low_value") {
       return { text: "Idle", className: "bg-red-100 text-red-700" };
@@ -39438,6 +39697,10 @@ var FileManagerFilters = ({
         seededClassifications[clip.clipId] = {
           status: clip.classification_status,
           label: clip.classification_label || void 0,
+          displayName: clip.classification_display_name || void 0,
+          paletteToken: clip.classification_palette_token || void 0,
+          iconToken: clip.classification_icon_token || void 0,
+          isKnown: clip.classification_is_known ?? void 0,
           confidence: clip.classification_confidence ?? void 0
         };
       }
@@ -39821,7 +40084,7 @@ var FileManagerFilters = ({
     return slot ? slot.label : value;
   }, [timeSlots]);
   const isClipInTimeRange = React141.useCallback((clipTimestamp) => {
-    if (!isTimeFilterActive || !startTime || !endTime) {
+    if (!startTime || !endTime) {
       return true;
     }
     try {
@@ -39847,9 +40110,8 @@ var FileManagerFilters = ({
       let filteredClips = categoryClips.filter((clip) => isClipInTimeRange(clip.clip_timestamp));
       if (category.id === "idle_time" && idleLabelFilter) {
         filteredClips = filteredClips.filter((clip) => {
-          const rootCause = getIdleTimeRootCause(clip.clipId || clip.id);
-          const normalizedRootCause = rootCause.replace(/_/g, " ");
-          return normalizedRootCause === idleLabelFilter;
+          const classification = getIdleTimeClassification(clip.clipId || clip.id);
+          return classification?.label === idleLabelFilter;
         });
       }
       const displayCount = isTimeFilterActive || category.id === "idle_time" && idleLabelFilter ? filteredClips.length : categoryCount;
@@ -39879,8 +40141,9 @@ var FileManagerFilters = ({
             clipPosition: index + 1,
             // Store 1-based position
             cycleTimeSeconds: cycleTime,
-            duration: clip.duration
+            duration: clip.duration,
             // Store duration for custom badge rendering
+            cycleItemCount: clip.cycle_item_count ?? null
           };
         });
         regularCategoryNodes.push({
@@ -40136,14 +40399,14 @@ var FileManagerFilters = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 mr-3 ${node.type === "category" || node.type === "percentile-category" ? "p-2 rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-200" : "p-0.5"} ${colorClasses && (node.type === "category" || node.type === "percentile-category") ? `${colorClasses.bg} border border-white/60` : ""}`, children: node.type === "video" && (node.categoryId === "idle_time" || node.categoryId === "low_value") ? (
               // Show root cause icon for idle time clips
               (() => {
-                const rootCause = getIdleTimeRootCause(node.clipId || node.id);
-                if (rootCause === "processing") {
+                const classification = getIdleTimeClassification(node.clipId || node.id);
+                if (!classification || classification.status === "processing") {
                   return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-purple-500", strokeWidth: 2.5 });
                 }
                 if (!idleTimeVlmEnabled && node.categoryId === "idle_time") {
                   return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-purple-500", strokeWidth: 2.5 });
                 }
-                const config = getRootCauseConfig(rootCause.replace(/_/g, " "));
+                const config = getRootCauseConfig(classification);
                 if (config) {
                   const IconComponent = config.Icon;
                   return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 ${config.iconColor}`, strokeWidth: 2.5 });
@@ -40165,10 +40428,10 @@ var FileManagerFilters = ({
                       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `inline-flex items-center px-2 py-0.5 rounded-md border text-[10px] font-bold ${isLong ? "bg-purple-50 text-purple-700 border-purple-200" : "bg-gray-50 text-gray-600 border-gray-200"}`, children: isLong ? "Long" : "Short" });
                     }
                     const clipId = node.clipId || node.id;
-                    const rootCause = getIdleTimeRootCause(clipId);
-                    const isProcessing = rootCause === "processing";
-                    const displayLabel = isProcessing ? "Analyzing..." : rootCause.replace(/_/g, " ");
-                    const config = isProcessing ? null : getRootCauseConfig(displayLabel);
+                    const classification = getIdleTimeClassification(clipId);
+                    const isProcessing = !classification || classification.status === "processing";
+                    const config = isProcessing ? null : getRootCauseConfig(classification);
+                    const displayLabel = config?.displayName || "Analyzing...";
                     const bgClass = config ? config.bgColor : "bg-slate-50";
                     const textClass = config ? config.color : "text-slate-700";
                     const borderClass = config ? config.borderColor : "border-slate-200";
@@ -40178,7 +40441,13 @@ var FileManagerFilters = ({
                   // Show badge for other clips
                   (() => {
                     const badge = getClipBadge(node);
-                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${badge.className}`, children: badge.text });
+                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${badge.className}`, children: badge.text }),
+                      node.categoryId === "cycle_completion" && node.cycleItemCount && node.cycleItemCount > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200", children: [
+                        "x",
+                        node.cycleItemCount
+                      ] }) : null
+                    ] });
                   })()
                 ) })
               ] }),
@@ -40266,7 +40535,7 @@ var FileManagerFilters = ({
         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: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
             "Reason: ",
-            idleLabelFilter.replace(/_/g, " ")
+            selectedIdleReasonOption?.displayName || idleLabelFilter.replace(/_/g, " ")
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -40315,21 +40584,31 @@ var FileManagerFilters = ({
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
               "Loading idle reasons..."
             ] }) : idleReasonOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-4 text-sm text-slate-500", children: "No classified idle reasons found yet." }) : idleReasonOptions.map((reason) => {
-              const config = getRootCauseConfig(reason);
+              const config = getRootCauseConfig({
+                status: "classified",
+                label: reason.label,
+                displayName: reason.displayName,
+                paletteToken: reason.paletteToken,
+                iconToken: reason.iconToken,
+                isKnown: reason.isKnown
+              });
+              if (!config) {
+                return null;
+              }
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   onClick: () => {
-                    setIdleLabelFilter(reason);
+                    setIdleLabelFilter(reason.label);
                     setShowIdleLabelFilterModal(false);
                   },
-                  className: `w-full px-3 py-2 text-left text-sm rounded-lg transition-colors flex items-center gap-2 mb-1 ${idleLabelFilter === reason ? "bg-purple-50 text-purple-700 font-medium" : "text-slate-700 hover:bg-slate-50"}`,
+                  className: `w-full px-3 py-2 text-left text-sm rounded-lg transition-colors flex items-center gap-2 mb-1 ${idleLabelFilter === reason.label ? "bg-purple-50 text-purple-700 font-medium" : "text-slate-700 hover:bg-slate-50"}`,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(config.Icon, { className: `h-3.5 w-3.5 ${config.iconColor}` }),
-                    reason
+                    reason.displayName
                   ]
                 },
-                reason
+                reason.label
               );
             }) })
           ]
@@ -40444,33 +40723,14 @@ var FileManagerFilters = ({
                   slot.value
                 )) })
               ] })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-t border-slate-200 bg-white rounded-b-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => {
-                  if (startTime && endTime) {
-                    setIsTimeFilterActive(true);
-                  }
-                  setShowTimeFilterModal(false);
-                  setStartSearchTerm("");
-                  setEndSearchTerm("");
-                },
-                disabled: !startTime || !endTime,
-                className: `
-                  w-full px-4 py-2 text-sm font-semibold rounded-lg transition-all
-                  ${startTime && endTime ? "bg-blue-600 text-white hover:bg-blue-700 active:scale-[0.98]" : "bg-slate-200 text-slate-400 cursor-not-allowed"}
-                `,
-                children: "Apply"
-              }
-            ) })
+            ] }) })
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 flex-1 min-h-0 overflow-y-auto scrollbar-thin", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filterTree.map((node) => renderNode(node)) }),
-      filterTree.length === 0 && isTimeFilterActive && (startTime || endTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+      filterTree.length === 0 && (startTime || endTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clips found" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500 mb-4", children: "No clips match the selected time range" }),
@@ -40480,18 +40740,19 @@ var FileManagerFilters = ({
             onClick: () => {
               setStartTime("");
               setEndTime("");
+              setIsTimeFilterActive(false);
             },
             className: "inline-flex items-center px-4 py-2 bg-blue-50 text-blue-600 text-sm font-medium rounded-lg hover:bg-blue-100 transition-colors duration-200",
             children: "Clear time filter"
           }
         )
       ] }),
-      filterTree.length === 0 && !isTimeFilterActive && categories.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+      filterTree.length === 0 && !startTime && !endTime && categories.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clip types available" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500", children: "Loading clip categories..." })
       ] }),
-      filterTree.length === 0 && !isTimeFilterActive && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+      filterTree.length === 0 && !startTime && !endTime && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clips available" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500", children: "No clips found for the selected time period" })
@@ -40895,6 +41156,34 @@ function useClipsRealtimeUpdates({
     hasNewClips: newClipsNotification !== null && newClipsNotification.count > 0
   };
 }
+var parseFiniteNumber2 = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return null;
+};
+var getMultiCycleItemCount = (clip) => {
+  if (!clip || clip.categoryId !== "cycle_completion") {
+    return null;
+  }
+  const cycleItemCount = parseFiniteNumber2(clip.cycle_item_count);
+  return cycleItemCount !== null && cycleItemCount > 1 ? cycleItemCount : null;
+};
+var OVERLAY_ICON_COLOR_BY_PALETTE = {
+  red: "text-red-300",
+  amber: "text-amber-300",
+  blue: "text-blue-300",
+  violet: "text-violet-300",
+  emerald: "text-emerald-300",
+  cyan: "text-cyan-300",
+  slate: "text-slate-200"
+};
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -41635,6 +41924,10 @@ var BottlenecksContent = ({
             classificationUpdates[clipId] = {
               status,
               label: clip.classification_label || void 0,
+              displayName: clip.classification_display_name || void 0,
+              paletteToken: clip.classification_palette_token || void 0,
+              iconToken: clip.classification_icon_token || void 0,
+              isKnown: clip.classification_is_known ?? void 0,
               confidence: clip.classification_confidence ?? void 0
             };
           });
@@ -42419,79 +42712,13 @@ var BottlenecksContent = ({
       return () => window.removeEventListener("keydown", handleEscape);
     }
   }, [isFullscreen, exitFullscreen]);
-  const ROOT_CAUSE_CONFIG = {
-    "Machine Breakdown": {
-      color: "text-white",
-      bgColor: "bg-black/60 backdrop-blur-sm",
-      borderColor: "border-transparent",
-      Icon: lucideReact.AlertTriangle,
-      iconColor: "text-red-500",
-      // Standard red for high visibility on dark
-      dotColor: "bg-red-600"
-    },
-    "Other": {
-      color: "text-white",
-      bgColor: "bg-black/60 backdrop-blur-sm",
-      borderColor: "border-transparent",
-      Icon: lucideReact.HelpCircle,
-      iconColor: "text-gray-400",
-      dotColor: "bg-gray-500"
-    },
-    "Power Outage": {
-      color: "text-white",
-      bgColor: "bg-black/60 backdrop-blur-sm",
-      borderColor: "border-transparent",
-      Icon: lucideReact.Zap,
-      iconColor: "text-red-400",
-      // Lighter red
-      dotColor: "bg-red-500"
-    },
-    "Worker Absent": {
-      color: "text-white",
-      bgColor: "bg-black/60 backdrop-blur-sm",
-      borderColor: "border-transparent",
-      Icon: lucideReact.UserX,
-      iconColor: "text-red-400",
-      // Lighter red
-      dotColor: "bg-red-500"
-    },
-    "Material Shortage": {
-      color: "text-white",
-      bgColor: "bg-black/60 backdrop-blur-sm",
-      borderColor: "border-transparent",
-      Icon: lucideReact.Package,
-      iconColor: "text-red-300",
-      // Even lighter red
-      dotColor: "bg-red-400"
-    },
-    "Quality Issue": {
-      color: "text-white",
-      bgColor: "bg-black/60 backdrop-blur-sm",
-      borderColor: "border-transparent",
-      Icon: lucideReact.XCircle,
-      iconColor: "text-red-300",
-      // Even lighter red
-      dotColor: "bg-red-400"
-    },
-    "Scheduled Maintenance": {
-      color: "text-white",
-      bgColor: "bg-black/60 backdrop-blur-sm",
-      borderColor: "border-transparent",
-      Icon: lucideReact.Wrench,
-      iconColor: "text-red-200",
-      // Very light red
-      dotColor: "bg-red-300"
-    }
-  };
-  const getIdleTimeRootCause = React141.useCallback((video) => {
+  const getIdleTimeClassification = React141.useCallback((video) => {
     if (video.type !== "idle_time") return null;
     const videoId = video.id || video.clipId;
-    if (!videoId) return "processing";
+    if (!videoId) return null;
     const classification = clipClassifications[videoId];
-    console.log(`[getIdleTimeRootCause] Looking up ${videoId}: `, classification);
-    if (!classification) return "processing";
-    if (classification.status === "processing") return "processing";
-    return classification.label || "processing";
+    console.log(`[getIdleTimeClassification] Looking up ${videoId}: `, classification);
+    return classification || null;
   }, [clipClassifications]);
   const getIdleTimeConfidence = React141.useCallback((video) => {
     if (video.type !== "idle_time") return null;
@@ -42502,36 +42729,35 @@ var BottlenecksContent = ({
     if (classification.status === "processing") return null;
     return classification.confidence ?? null;
   }, [clipClassifications]);
-  const formatDisplayLabel = React141.useCallback((label) => {
-    return label.replace(/_/g, " ");
-  }, []);
-  const getRootCauseConfig = React141.useCallback((rootCause) => {
-    if (!rootCause) return null;
-    if (rootCause === "processing") {
+  const getRootCauseConfig = React141.useCallback((classification) => {
+    if (!classification || classification.status === "processing") {
       return {
         color: "text-white",
         bgColor: "bg-black/60 backdrop-blur-sm",
-        borderColor: "border-gray-500/30",
+        borderColor: "border-white/10",
         Icon: lucideReact.Clock,
-        iconColor: "text-purple-500",
-        dotColor: "bg-gray-400",
+        iconColor: "text-purple-300",
+        dotColor: "bg-purple-400",
         displayName: "Analyzing..."
       };
     }
-    const hardcodedConfig = ROOT_CAUSE_CONFIG[rootCause];
-    if (hardcodedConfig) {
-      return hardcodedConfig;
-    }
+    const presentation = getIdleReasonPresentation({
+      label: classification.label,
+      displayName: classification.displayName,
+      paletteToken: classification.paletteToken,
+      iconToken: classification.iconToken,
+      isKnown: classification.isKnown
+    });
     return {
       color: "text-white",
       bgColor: "bg-black/60 backdrop-blur-sm",
-      borderColor: "border-purple-500/30",
-      Icon: lucideReact.Tag,
-      iconColor: "text-purple-400",
-      dotColor: "bg-purple-400",
-      displayName: formatDisplayLabel(rootCause)
+      borderColor: "border-white/10",
+      Icon: presentation.Icon,
+      iconColor: OVERLAY_ICON_COLOR_BY_PALETTE[presentation.paletteToken] || OVERLAY_ICON_COLOR_BY_PALETTE.slate,
+      dotColor: presentation.bgClass,
+      displayName: presentation.displayName
     };
-  }, [formatDisplayLabel]);
+  }, []);
   const getClipTypeLabel = React141.useCallback((video) => {
     if (!video) return "";
     const currentFilter = activeFilterRef.current;
@@ -42696,15 +42922,15 @@ var BottlenecksContent = ({
         (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? currentVideo.type === "idle_time" ? (
           // Show full colored badge for idle time
           (() => {
-            const rootCause = getIdleTimeRootCause(currentVideo);
+            const classification = getIdleTimeClassification(currentVideo);
             const confidence = getIdleTimeConfidence(currentVideo);
-            const config = getRootCauseConfig(rootCause);
+            const config = getRootCauseConfig(classification);
             if (!config) return null;
             const IconComponent = config.Icon;
             return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border ${config.bgColor} ${config.borderColor} shadow-lg`, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 ${config.iconColor}`, strokeWidth: 2.5 }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium text-xs ${config.color}`, children: config.displayName || (rootCause ? formatDisplayLabel(rootCause) : "Analyzing...") })
+              idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex max-w-[18rem] items-center gap-1.5 rounded-md border px-2.5 py-1.5 shadow-lg ${config.bgColor} ${config.borderColor}`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate font-medium text-xs ${config.color}`, children: config.displayName || "Analyzing..." })
               ] }) }),
               idleTimeVlmEnabled && confidence !== null && (() => {
                 const confidencePercent = confidence * 100;
@@ -42739,9 +42965,9 @@ var BottlenecksContent = ({
           currentVideo.type === "idle_time" ? (
             // Show full colored badge for idle time
             (() => {
-              const rootCause = getIdleTimeRootCause(currentVideo);
+              const classification = getIdleTimeClassification(currentVideo);
               const confidence = getIdleTimeConfidence(currentVideo);
-              const config = getRootCauseConfig(rootCause);
+              const config = getRootCauseConfig(classification);
               if (!config) return null;
               const IconComponent = config.Icon;
               return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -42750,9 +42976,9 @@ var BottlenecksContent = ({
                   (confidence * 100).toFixed(0),
                   "%"
                 ] }) }) }),
-                idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md border ${config.bgColor} ${config.borderColor} shadow-lg`, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 ${config.iconColor}`, strokeWidth: 2.5 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium text-xs ${config.color}`, children: rootCause })
+                idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex max-w-[18rem] items-center gap-1.5 rounded-md border px-2.5 py-1.5 shadow-lg ${config.bgColor} ${config.borderColor}`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate font-medium text-xs ${config.color}`, children: config.displayName || "Analyzing..." })
                 ] }) })
               ] });
             })()
@@ -42792,6 +43018,7 @@ var BottlenecksContent = ({
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No clips found" })
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: triageClips.map((clip, index) => {
             const isIdleTime = clip.categoryId === "idle_time";
+            const cycleItemCount = getMultiCycleItemCount(clip);
             const timeString = isIdleTime && clip.idle_start_time && clip.idle_end_time ? formatIdleTimeRange(clip.idle_start_time, clip.idle_end_time, timezone) : new Date(clip.clip_timestamp).toLocaleTimeString("en-US", {
               hour12: true,
               hour: "numeric",
@@ -42844,15 +43071,15 @@ var BottlenecksContent = ({
                   // Idle time clips - show root cause label below time
                   (() => {
                     const clipId = clip.id || clip.clipId;
-                    const rootCause = getIdleTimeRootCause({
+                    const classification = getIdleTimeClassification({
                       id: clipId,
                       type: "idle_time",
                       creation_timestamp: clip.clip_timestamp
                     });
-                    console.log(`[BottlenecksContent] Sidebar clip ${clipId}: rootCause=${rootCause}, classification=`, clipClassifications[clipId]);
-                    const config = getRootCauseConfig(rootCause);
+                    console.log(`[BottlenecksContent] Sidebar clip ${clipId}: classification=`, clipClassifications[clipId]);
+                    const config = getRootCauseConfig(classification);
                     if (!config) {
-                      console.log(`[BottlenecksContent] No config found for rootCause: ${rootCause}`);
+                      console.log(`[BottlenecksContent] No config found for classification on clip: ${clipId}`);
                       return null;
                     }
                     const IconComponent = config.Icon;
@@ -42867,7 +43094,7 @@ var BottlenecksContent = ({
                         ] }) })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-6", children: idleTimeVlmEnabled ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-2 py-0.5 rounded-md border text-xs font-medium bg-gray-50 text-gray-700 border-gray-200", children: (() => {
-                        const displayText = config.displayName || (rootCause ? formatDisplayLabel(rootCause) : "Analyzing...");
+                        const displayText = config.displayName || "Analyzing...";
                         console.log(`[BottlenecksContent] Displaying label: "${displayText}" for clip ${clipId}`);
                         return displayText;
                       })() }) : (() => {
@@ -42887,7 +43114,13 @@ var BottlenecksContent = ({
                       clip.duration ? `${clip.duration.toFixed(1)}s` : "N/A",
                       ")"
                     ] }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2 py-1 text-xs font-semibold rounded ${badgeColor}`, children: badgeText })
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                      cycleItemCount ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 py-1 text-xs font-semibold rounded border border-blue-200 bg-blue-100 text-blue-700", children: [
+                        "x",
+                        cycleItemCount
+                      ] }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2 py-1 text-xs font-semibold rounded ${badgeColor}`, children: badgeText })
+                    ] })
                   ] })
                 )
               },
@@ -42980,15 +43213,15 @@ var BottlenecksContent = ({
           (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? currentVideo.type === "idle_time" ? (
             // Show full colored badge for idle time
             (() => {
-              const rootCause = getIdleTimeRootCause(currentVideo);
+              const classification = getIdleTimeClassification(currentVideo);
               const confidence = getIdleTimeConfidence(currentVideo);
-              const config = getRootCauseConfig(rootCause);
+              const config = getRootCauseConfig(classification);
               if (!config) return null;
               const IconComponent = config.Icon;
               return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-2 px-3 py-2 rounded-md border ${config.bgColor} ${config.borderColor} shadow-lg`, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-4 w-4 ${config.iconColor}`, strokeWidth: 2.5 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium text-sm ${config.color}`, children: rootCause })
+                idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex max-w-[20rem] items-center gap-2 rounded-md border px-3 py-2 shadow-lg ${config.bgColor} ${config.borderColor}`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-4 w-4 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate font-medium text-sm ${config.color}`, children: config.displayName || "Analyzing..." })
                 ] }) }),
                 idleTimeVlmEnabled && confidence !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-black/70 backdrop-blur-sm shadow-lg border border-white/10", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-sm text-white", children: [
                   "AI Confidence: ",
@@ -43010,9 +43243,9 @@ var BottlenecksContent = ({
           ] }) }) : currentVideo.type === "idle_time" ? (
             // Show full colored badge for idle time
             (() => {
-              const rootCause = getIdleTimeRootCause(currentVideo);
+              const classification = getIdleTimeClassification(currentVideo);
               const confidence = getIdleTimeConfidence(currentVideo);
-              const config = getRootCauseConfig(rootCause);
+              const config = getRootCauseConfig(classification);
               if (!config) return null;
               const IconComponent = config.Icon;
               return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -43021,9 +43254,9 @@ var BottlenecksContent = ({
                   (confidence * 100).toFixed(0),
                   "%"
                 ] }) }) }),
-                idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-20 z-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-2 px-3 py-2 rounded-md border ${config.bgColor} ${config.borderColor} shadow-lg`, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-4 w-4 ${config.iconColor}`, strokeWidth: 2.5 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium text-sm ${config.color}`, children: rootCause })
+                idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-20 z-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex max-w-[20rem] items-center gap-2 rounded-md border px-3 py-2 shadow-lg ${config.bgColor} ${config.borderColor}`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: `h-4 w-4 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate font-medium text-sm ${config.color}`, children: config.displayName || "Analyzing..." })
                 ] }) })
               ] });
             })()
@@ -44972,16 +45205,6 @@ var LineHistoryCalendar = ({
   ] });
 };
 var LineHistoryCalendar_default = LineHistoryCalendar;
-var STATIC_COLORS = {
-  "Operator Absent": "#dc2626",
-  // red-600 - Critical/Urgent
-  "No Material": "#f59e0b",
-  // amber-500 - Warning/Supply Chain
-  "Machine Downtime": "#3b82f6",
-  // blue-500 - Scheduled/Technical
-  "Operator Idle": "#8b5cf6"
-  // violet-500 - Low Priority/Behavioral
-};
 var PRODUCTIVE_COLOR = "#00AB45";
 var IDLE_COLOR = "#e5e7eb";
 var formatDuration = (seconds) => {
@@ -45004,19 +45227,21 @@ var formatDuration = (seconds) => {
   }
   return parts.join(" ");
 };
-var getColorForEntry = (name, index) => {
-  const normalized = name.trim().toLowerCase();
+var getColorForEntry = (entry) => {
+  const normalized = entry.name.trim().toLowerCase();
   if (normalized === "productive" || normalized === "productive time") {
     return PRODUCTIVE_COLOR;
   }
   if (normalized === "idle" || normalized === "idle time") {
     return IDLE_COLOR;
   }
-  if (STATIC_COLORS[name]) {
-    return STATIC_COLORS[name];
-  }
-  const snakeCaseName = name.replace(/ /g, "_");
-  return getReasonColor(snakeCaseName, index);
+  return getIdleReasonHexColor({
+    label: entry.reasonKey || entry.name,
+    displayName: entry.displayName || entry.name,
+    paletteToken: entry.paletteToken,
+    iconToken: entry.iconToken,
+    isKnown: entry.isKnown
+  });
 };
 var CustomTooltip = ({ active, payload, hideTotalDuration }) => {
   if (active && payload && payload.length) {
@@ -45030,8 +45255,8 @@ var CustomTooltip = ({ active, payload, hideTotalDuration }) => {
     const hasContributors = contributors.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white p-3 border border-gray-100 shadow-lg rounded-lg text-xs z-50 min-w-[280px]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pb-2 mb-2 border-b border-slate-100", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full flex-shrink-0", style: { backgroundColor: payload[0].payload.fill || getColorForEntry(payload[0].name, 0) } }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-slate-800 text-[13px]", children: payload[0].name.replace(/_/g, " ") })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full flex-shrink-0", style: { backgroundColor: payload[0].payload.fill || getColorForEntry(payload[0].payload) } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-slate-800 text-[13px]", children: datum?.displayName || payload[0].name.replace(/_/g, " ") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 pb-1", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center gap-4", children: [
@@ -45092,7 +45317,8 @@ var IdleTimeReasonChartComponent = ({
   isLoading = false,
   error = null,
   hideTotalDuration = false,
-  updateAnimation = "replay"
+  updateAnimation = "replay",
+  variant = "pie"
 }) => {
   const [activeData, setActiveData] = React141__namespace.default.useState([]);
   React141__namespace.default.useEffect(() => {
@@ -45137,6 +45363,73 @@ var IdleTimeReasonChartComponent = ({
   if (!data || data.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { message: "No Idle Time reasons available" });
   }
+  if (variant === "bar") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "w-full h-full flex items-center overflow-visible focus:outline-none",
+        tabIndex: -1,
+        onFocus: (e) => e.currentTarget.blur(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          recharts.BarChart,
+          {
+            data: activeData,
+            layout: "vertical",
+            margin: { top: 5, right: 30, left: 10, bottom: 5 },
+            barCategoryGap: 8,
+            barGap: 2,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", horizontal: false, vertical: true }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.XAxis,
+                {
+                  type: "number",
+                  hide: false,
+                  domain: [0, 100],
+                  ticks: [0, 20, 40, 60, 80, 100],
+                  tickFormatter: (val) => `${val}%`,
+                  tick: { fontSize: 10, fill: "#6b7280" },
+                  axisLine: { stroke: "#e5e7eb" },
+                  tickLine: false
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.YAxis,
+                {
+                  type: "category",
+                  dataKey: "name",
+                  tick: { fontSize: 11, fill: "#4b5563" },
+                  tickFormatter: (val) => typeof val === "string" ? val.replace(/_/g, " ") : val,
+                  width: 90,
+                  axisLine: false,
+                  tickLine: false
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Tooltip,
+                {
+                  cursor: { fill: "rgba(0,0,0,0.04)" },
+                  content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, { hideTotalDuration })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Bar,
+                {
+                  dataKey: "value",
+                  radius: [0, 4, 4, 0],
+                  animationDuration: 1500,
+                  animationEasing: "ease-out",
+                  isAnimationActive: true,
+                  barSize: 20,
+                  children: activeData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: getColorForEntry(entry) }, `cell-${index}`))
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         .recharts-wrapper:focus,
@@ -45198,7 +45491,7 @@ var IdleTimeReasonChartComponent = ({
                     children: activeData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
                       recharts.Cell,
                       {
-                        fill: getColorForEntry(entry.name, index),
+                        fill: getColorForEntry(entry),
                         strokeWidth: 0
                       },
                       `cell-${index}`
@@ -45215,10 +45508,10 @@ var IdleTimeReasonChartComponent = ({
               "span",
               {
                 className: "inline-block w-2.5 h-2.5 rounded-full mr-1.5 mt-0.5 flex-shrink-0",
-                style: { backgroundColor: getColorForEntry(entry.name, index) }
+                style: { backgroundColor: getColorForEntry(entry) }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 leading-tight text-[11px] sm:text-xs break-words", children: entry.name.replace(/_/g, " ") })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 leading-tight text-[11px] sm:text-xs break-words", children: entry.displayName || entry.name.replace(/_/g, " ") })
           ] }, `item-${index}`)) }) })
         ]
       }
@@ -45343,7 +45636,6 @@ var LineMonthlyHistory = ({
   const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
   const idleTimeVlmEnabled = isIdleTimeVlmEnabled(lineId);
   const isUptimeMode = monitoringMode === "uptime";
-  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const chartKey = React141.useMemo(() => `${lineId}-${month}-${year}-${selectedShiftId}-${rangeStart}-${rangeEnd}`, [lineId, month, year, selectedShiftId, rangeStart, rangeEnd]);
   const monthBounds = React141.useMemo(() => getMonthKeyBounds(year, month), [year, month]);
   const normalizedRange = React141.useMemo(() => {
@@ -45391,20 +45683,20 @@ var LineMonthlyHistory = ({
     { efficiency: 0, underperforming: 0, totalWorkspaces: 0, count: 0 }
   );
   const avgEfficiency = averages.count > 0 ? averages.efficiency / averages.count : 0;
-  const { underperformingDays, totalDays } = (analysisMonthlyData || []).reduce(
+  const outputAverages = (analysisMonthlyData || []).reduce(
     (acc, day) => {
       const shiftData = getShiftData2(day, selectedShiftId);
       if (!shiftData || !hasRealData(shiftData)) {
         return acc;
       }
-      const status = getEfficiencyColor(shiftData.avg_efficiency || 0, effectiveLegend);
       return {
-        totalDays: acc.totalDays + 1,
-        underperformingDays: acc.underperformingDays + (status === "red" ? 1 : 0)
+        output: acc.output + (shiftData.output || 0),
+        count: acc.count + 1
       };
     },
-    { underperformingDays: 0, totalDays: 0 }
+    { output: 0, count: 0 }
   );
+  const avgOutput = outputAverages.count > 0 ? outputAverages.output / outputAverages.count : 0;
   const uptimeSummary = React141.useMemo(() => {
     if (!isUptimeMode) return null;
     const validDays = (analysisMonthlyData || []).map((day) => getShiftData2(day, selectedShiftId)).filter((shiftData) => shiftData && hasRealData(shiftData)).map((shiftData) => ({ shiftData, totals: getUptimeTotals(shiftData) }));
@@ -45437,6 +45729,10 @@ var LineMonthlyHistory = ({
   const efficiencyImproved = efficiencyDelta >= 0;
   const EfficiencyTrendIcon = efficiencyImproved ? lucideReact.ArrowUp : lucideReact.ArrowDown;
   const efficiencyTrendText = `${Math.abs(efficiencyDelta).toFixed(1)}%`;
+  const outputDelta = trendSummary?.avg_daily_output?.delta_pp ?? 0;
+  const outputImproved = outputDelta >= 0;
+  const OutputTrendIcon = outputImproved ? lucideReact.ArrowUp : lucideReact.ArrowDown;
+  const outputTrendText = `${Math.abs(outputDelta).toFixed(1)}%`;
   const utilizationDelta = efficiencyDelta;
   const utilizationImproved = utilizationDelta >= 0;
   const UtilizationTrendIcon = utilizationImproved ? lucideReact.ArrowUp : lucideReact.ArrowDown;
@@ -45721,12 +46017,17 @@ var LineMonthlyHistory = ({
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-bold text-gray-700 mb-2", children: "No. of underperforming days" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xl font-bold text-gray-900", children: [
-              underperformingDays,
-              "/",
-              totalDays
-            ] }) })
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-bold text-gray-700 mb-2", children: "Avg. Output" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-nowrap", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl font-bold text-gray-900", children: Math.round(avgOutput).toLocaleString() }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 ${outputImproved ? "bg-emerald-50 text-emerald-600" : "bg-red-50 text-red-600"} px-1.5 py-0.5 rounded-full text-[10px] font-medium whitespace-nowrap flex-shrink-0`, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(OutputTrendIcon, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  outputTrendText,
+                  " vs last month"
+                ] })
+              ] })
+            ] })
           ] })
         ] }),
         isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-1 ${idleTimeVlmEnabled ? "sm:grid-cols-2" : "sm:grid-cols-1"} gap-2 sm:gap-3 lg:gap-4`, children: [
@@ -46245,11 +46546,6 @@ var LineMonthlyPdfGenerator = ({
           doc.text("Working Days:", 25, kpiStartY + kpiSpacing * 2);
           doc.setFont("helvetica", "bold");
           doc.text(`${outputMetrics.totalDays} days`, 120, kpiStartY + kpiSpacing * 2);
-          createKPIBox(kpiStartY + kpiSpacing * 3);
-          doc.setFont("helvetica", "normal");
-          doc.text("Underperforming Days:", 25, kpiStartY + kpiSpacing * 3);
-          doc.setFont("helvetica", "bold");
-          doc.text(`${outputMetrics.underperformingDays} of ${outputMetrics.totalDays}`, 120, kpiStartY + kpiSpacing * 3);
         }
       } else {
         doc.setFontSize(12);
@@ -47827,7 +48123,8 @@ var WorkspaceMonthlyHistory = ({
   availableShifts,
   monthlyDataLoading = false,
   className = "",
-  trendSummary
+  trendSummary,
+  isAssemblyWorkspace = false
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const isUptimeMode = monitoringMode === "uptime";
@@ -48066,12 +48363,8 @@ var WorkspaceMonthlyHistory = ({
   }, [analysisMonthlyData, selectedShiftId, isUptimeMode, shiftWorkSeconds]);
   const efficiencyDelta = trendSummary?.avg_efficiency?.delta_pp ?? 0;
   const efficiencyImproved = efficiencyDelta >= 0;
-  const outputDeltaRaw = trendSummary?.avg_daily_output?.delta_pp ?? 0;
   const cycleDeltaRaw = trendSummary?.avg_cycle_time?.delta_seconds ?? 0;
-  const outputPrev = trendSummary?.avg_daily_output?.previous ?? 0;
   const cyclePrev = trendSummary?.avg_cycle_time?.previous ?? 0;
-  const outputDelta = outputPrev ? outputDeltaRaw / outputPrev * 100 : 0;
-  const outputImproved = outputDelta >= 0;
   const cycleDelta = cyclePrev ? cycleDeltaRaw / cyclePrev * 100 : 0;
   const cycleWorsened = cycleDelta > 0;
   const utilizationDelta = efficiencyDelta;
@@ -48151,7 +48444,7 @@ var WorkspaceMonthlyHistory = ({
       shift.id
     )) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 sm:p-6 flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS3.map((day, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400 text-center", children: day }, day)) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2 mt-6", children: calendarData.calendar.map((day, index) => {
           const dayNumber = index >= calendarData.startOffset ? index - calendarData.startOffset + 1 : null;
@@ -48239,8 +48532,32 @@ var WorkspaceMonthlyHistory = ({
           ) }, index);
         }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 h-full", children: [
+        isAssemblyWorkspace && !isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-600 mb-1", children: "Avg Idle Time" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-nowrap", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-gray-900", children: formatIdleTime(metrics2?.avgIdleTime ?? 0) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 ${idleImproved ? "bg-emerald-50 text-emerald-600" : "bg-red-50 text-red-600"} px-2 py-0.5 rounded-full text-[10px] font-medium whitespace-nowrap flex-shrink-0`, children: [
+                idleImproved ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: idleTrendText })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-600 mb-1", children: "Avg Cycle Time" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-nowrap", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-bold text-gray-900", children: [
+                metrics2?.avgCycleTime ?? 0,
+                "s"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 ${cycleWorsened ? "bg-red-50 text-red-600" : "bg-emerald-50 text-emerald-600"} px-2 py-0.5 rounded-full text-[10px] font-medium whitespace-nowrap flex-shrink-0`, children: [
+                cycleWorsened ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-3 h-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${Math.abs(cycleDelta).toFixed(1)}% vs last month` })
+              ] })
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-1 gap-4 ${isUptimeMode ? "md:grid-cols-3" : "md:grid-cols-2"}`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-600 mb-1", children: isUptimeMode ? "Avg Utilization" : "Avg Efficiency" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-nowrap", children: [
@@ -48254,16 +48571,13 @@ var WorkspaceMonthlyHistory = ({
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-600 mb-1", children: isUptimeMode ? "Avg Idle Time" : "Avg Daily Output" }),
+          isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-600 mb-1", children: "Avg Idle Time" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-nowrap", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-gray-900", children: isUptimeMode ? formatIdleTime(metrics2?.avgIdleTime ?? 0) : metrics2?.avgDailyOutput?.toLocaleString?.() ?? 0 }),
-              isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 ${idleImproved ? "bg-emerald-50 text-emerald-600" : "bg-red-50 text-red-600"} px-2 py-0.5 rounded-full text-[10px] font-medium whitespace-nowrap flex-shrink-0`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-gray-900", children: formatIdleTime(metrics2?.avgIdleTime ?? 0) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 ${idleImproved ? "bg-emerald-50 text-emerald-600" : "bg-red-50 text-red-600"} px-2 py-0.5 rounded-full text-[10px] font-medium whitespace-nowrap flex-shrink-0`, children: [
                 idleImproved ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-3 h-3" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: idleTrendText })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1 ${outputImproved ? "bg-emerald-50 text-emerald-600" : "bg-red-50 text-red-600"} px-2 py-0.5 rounded-full text-[10px] font-medium whitespace-nowrap flex-shrink-0`, children: [
-                outputImproved ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "w-3 h-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "w-3 h-3" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${Math.abs(outputDelta).toFixed(1)}% vs last month` })
               ] })
             ] })
           ] }),
@@ -48285,9 +48599,9 @@ var WorkspaceMonthlyHistory = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-1 ${idleTimeVlmEnabled ? "sm:grid-cols-2" : "sm:grid-cols-1"} gap-4`, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex flex-col", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700 mb-3 text-left", children: isUptimeMode ? "Utilization" : "Time Utilization" }),
-            pieChartData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-[160px] flex items-center overflow-hidden", children: [
+            pieChartData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center overflow-hidden h-[160px]", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-full min-w-0 relative flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full aspect-square max-h-full", style: { maxWidth: "min(100%, 280px)", containerType: "inline-size" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsx(
                   recharts.Pie,
@@ -48360,7 +48674,7 @@ var WorkspaceMonthlyHistory = ({
               ] }) })
             ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: "No data available" }) })
           ] }),
-          idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 h-full", children: [
+          idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 h-full flex flex-col", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700 mb-3 text-left", children: "Idle Time Breakdown" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[160px]", children: /* @__PURE__ */ jsxRuntime.jsx(
               IdleTimeReasonChart,
@@ -48372,7 +48686,7 @@ var WorkspaceMonthlyHistory = ({
             ) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex-1", children: [
+        (!isAssemblyWorkspace || isUptimeMode) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700 mb-3 text-left", children: isUptimeMode ? "Daily Utilization" : "Daily Output" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "220px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
             recharts.BarChart,
@@ -48570,7 +48884,7 @@ var WorkspaceWhatsAppShareButton = ({
     }
   );
 };
-var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiencyLegend }) => {
+var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiencyLegend, hourlyCycleTimes }) => {
   const [isGenerating, setIsGenerating] = React141.useState(false);
   const entityConfig = useEntityConfig();
   const effectiveLegend = efficiencyLegend || DEFAULT_EFFICIENCY_LEGEND;
@@ -48578,6 +48892,7 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
     setIsGenerating(true);
     try {
       const isUptimeMode = workspace.monitoring_mode === "uptime";
+      const isAssemblyCycleMode = !isUptimeMode && workspace.line_assembly_enabled === true && workspace.action_type === "assembly";
       const shiftMinutes = getShiftDurationMinutes(workspace.shift_start, workspace.shift_end);
       const shiftSeconds = shiftMinutes ? shiftMinutes * 60 : 0;
       const idleSeconds = Math.max(workspace.idle_time || 0, 0);
@@ -48638,9 +48953,38 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
         minute: "2-digit",
         hour12: true
       });
+      const shiftEndTime = (/* @__PURE__ */ new Date(`2000-01-01 ${workspace.shift_end}`)).toLocaleTimeString("en-IN", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: true
+      });
+      const parseTimeToMinutes3 = (timeValue) => {
+        const [hourPart, minutePart] = timeValue.split(":").map(Number);
+        const hour = Number.isFinite(hourPart) ? hourPart : 0;
+        const minute = Number.isFinite(minutePart) ? minutePart : 0;
+        return hour * 60 + minute;
+      };
+      const toShiftUtcMs = (dateKey, timeValue) => {
+        const [yearPart, monthPart, dayPart] = dateKey.split("-").map(Number);
+        const year = Number.isFinite(yearPart) ? yearPart : 1970;
+        const month = Number.isFinite(monthPart) ? monthPart : 1;
+        const day = Number.isFinite(dayPart) ? dayPart : 1;
+        const [hourPart, minutePart] = timeValue.split(":").map(Number);
+        const hour = Number.isFinite(hourPart) ? hourPart : 0;
+        const minute = Number.isFinite(minutePart) ? minutePart : 0;
+        const IST_OFFSET_MINUTES = 330;
+        return Date.UTC(year, month - 1, day, hour, minute) - IST_OFFSET_MINUTES * 60 * 1e3;
+      };
+      const shiftStartMinutes = parseTimeToMinutes3(workspace.shift_start);
+      const shiftEndMinutes = parseTimeToMinutes3(workspace.shift_end);
+      const wrapsMidnight = shiftEndMinutes <= shiftStartMinutes;
+      const shiftStartUtcMs = toShiftUtcMs(workspace.date, workspace.shift_start);
+      const shiftEndUtcMs = toShiftUtcMs(workspace.date, workspace.shift_end) + (wrapsMidnight ? 24 * 60 * 60 * 1e3 : 0);
+      const isShiftInProgress = Date.now() >= shiftStartUtcMs && Date.now() < shiftEndUtcMs;
+      const reportPeriodEndTime = isShiftInProgress ? currentTime : shiftEndTime;
       doc.setFontSize(12);
       doc.setTextColor(80, 80, 80);
-      doc.text(`Report Period: ${shiftStartTime} - ${currentTime}`, 20, 79);
+      doc.text(`Report Period: ${shiftStartTime} - ${reportPeriodEndTime}`, 20, 79);
       doc.setTextColor(0, 0, 0);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
@@ -48654,10 +48998,8 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
       };
       const perfOverviewStartY = 93;
       const hasIdleTimeReason = idleTimeReasons && idleTimeReasons.length > 0;
-      let perfOverviewHeight = hasIdleTimeReason ? 80 : 70;
-      if (isUptimeMode) {
-        perfOverviewHeight = hasIdleTimeReason ? 70 : 60;
-      }
+      const perfOverviewRows = isUptimeMode ? 3 : isAssemblyCycleMode ? 2 : 4;
+      const perfOverviewHeight = 30 + perfOverviewRows * 10 + (hasIdleTimeReason ? 10 : 0);
       doc.setFillColor(245, 245, 245);
       doc.roundedRect(15, perfOverviewStartY, 180, perfOverviewHeight, 3, 3, "F");
       doc.setFontSize(18);
@@ -48685,6 +49027,19 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
         doc.text("Stoppages:", 25, kpiStartY + kpiSpacing * 2);
         doc.setFont("helvetica", "bold");
         doc.text(`${workspace.total_actions}`, 120, kpiStartY + kpiSpacing * 2);
+      } else if (isAssemblyCycleMode) {
+        createKPIBox(kpiStartY);
+        doc.setFontSize(11);
+        doc.setFont("helvetica", "normal");
+        doc.text("Average Cycle Time:", 25, kpiStartY);
+        doc.setFont("helvetica", "bold");
+        doc.text(`${(workspace.avg_cycle_time || 0).toFixed(1)}s`, 120, kpiStartY);
+        createKPIBox(kpiStartY + kpiSpacing);
+        doc.setFont("helvetica", "normal");
+        doc.text("Total Idle Time:", 25, kpiStartY + kpiSpacing);
+        doc.setFont("helvetica", "bold");
+        const idleTimeFormatted = formatIdleTime(workspace.idle_time);
+        doc.text(idleTimeFormatted, 120, kpiStartY + kpiSpacing);
       } else {
         createKPIBox(kpiStartY);
         doc.setFontSize(11);
@@ -48721,17 +49076,11 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
         const reasonText = `${reasonName} (${topReason.value.toFixed(1)}%)`;
         doc.text(reasonText, 120, reasonY);
       }
-      let separatorBeforeHourlyY = hasIdleTimeReason ? 183 : 173;
-      if (isUptimeMode) {
-        separatorBeforeHourlyY -= 10;
-      }
+      const separatorBeforeHourlyY = perfOverviewStartY + perfOverviewHeight + 10;
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
       doc.line(20, separatorBeforeHourlyY, 190, separatorBeforeHourlyY);
-      let hourlyPerfStartY = hasIdleTimeReason ? 188 : 178;
-      if (isUptimeMode) {
-        hourlyPerfStartY -= 10;
-      }
+      const hourlyPerfStartY = separatorBeforeHourlyY + 5;
       const uptimeSeries = isUptimeMode ? buildUptimeSeries({
         idleTimeHourly: workspace.idle_time_hourly,
         shiftStart: workspace.shift_start,
@@ -48749,8 +49098,9 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
         const uptimePercent = total > 0 ? Math.round(activeMinutes / total * 100) : 0;
         return { activeMinutes, idleMinutes, uptimePercent };
       }) : [];
-      const hourlyData = isUptimeMode ? hourlyUptime : workspace.hourly_action_counts || [];
+      const hourlyData = isUptimeMode ? hourlyUptime : isAssemblyCycleMode ? hourlyCycleTimes && hourlyCycleTimes.length > 0 ? hourlyCycleTimes : workspace.hourly_action_counts || [] : workspace.hourly_action_counts || [];
       const hourlyTarget = workspace.pph_threshold;
+      const cycleTarget = workspace.ideal_cycle_time || 0;
       const pageHeight = doc.internal.pageSize.height;
       const maxContentY = pageHeight - 15;
       const baseTableStartY = hourlyPerfStartY + 31;
@@ -48775,12 +49125,16 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
       const hourlyTitleY = hourlyPerfStartY + 10;
-      doc.text(isUptimeMode ? "Hourly Utilization" : "Hourly Performance", 20, hourlyTitleY);
+      doc.text(
+        isUptimeMode ? "Hourly Utilization" : isAssemblyCycleMode ? "Hourly Cycle Time" : "Hourly Performance",
+        20,
+        hourlyTitleY
+      );
       doc.setTextColor(0, 0, 0);
       const headerY = titleFontSize === 16 ? hourlyPerfStartY + 18 : hourlyPerfStartY + 20;
       const gridTopY = headerY - 5;
       const headerBottomY = gridTopY + 8;
-      const colBoundaries = isUptimeMode ? [20, 105, 190] : [20, 70, 100, 130, 155, 190];
+      const colBoundaries = isUptimeMode ? [20, 105, 190] : isAssemblyCycleMode ? [20, 85, 125, 165, 190] : [20, 70, 100, 130, 155, 190];
       const totalRows = hourlyData.length;
       const gridBottomY = headerBottomY + totalRows * rowHeight;
       const tableHeight = gridBottomY - gridTopY;
@@ -48801,6 +49155,10 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
       doc.text("Time Range", 25, headerTextY);
       if (isUptimeMode) {
         doc.text("Utilization", 147, headerTextY);
+      } else if (isAssemblyCycleMode) {
+        doc.text("Standard", 90, headerTextY);
+        doc.text("Average", 130, headerTextY);
+        doc.text("Status", 170, headerTextY);
       } else {
         doc.text("Output", 75, headerTextY);
         doc.text("Target", 105, headerTextY);
@@ -48849,6 +49207,25 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
         if (isUptimeMode) {
           const utilizationStr = dataCollected ? `${uptimePercent}%` : "TBD";
           doc.text(utilizationStr, 147, yPos);
+        } else if (isAssemblyCycleMode) {
+          const actualCycleTime = Number(outputValue) || 0;
+          const standardCycleStr = `${cycleTarget.toFixed(1)}s`;
+          const actualCycleStr = dataCollected ? `${actualCycleTime.toFixed(1)}s` : "TBD";
+          doc.text(standardCycleStr, 90, yPos);
+          doc.text(actualCycleStr, 130, yPos);
+          if (!dataCollected) {
+            doc.setTextColor(100, 100, 100);
+            doc.text("-", 170, yPos);
+          } else if (actualCycleTime > 0 && actualCycleTime <= cycleTarget) {
+            doc.setTextColor(0, 171, 69);
+            doc.setFont("ZapfDingbats", "normal");
+            doc.text("4", 170, yPos);
+            doc.setFont("helvetica", "normal");
+          } else {
+            doc.setTextColor(227, 67, 41);
+            doc.text("\xD7", 170, yPos);
+          }
+          doc.setTextColor(0, 0, 0);
         } else {
           doc.text(outputStr, 75, yPos);
           doc.text(targetStr, 105, yPos);
@@ -48920,7 +49297,8 @@ var WorkspaceMonthlyPdfGenerator = ({
   shiftConfig,
   efficiencyLegend,
   className,
-  compact = false
+  compact = false,
+  isAssemblyWorkspace = false
 }) => {
   const [isGenerating, setIsGenerating] = React141.useState(false);
   const effectiveLegend = efficiencyLegend || DEFAULT_EFFICIENCY_LEGEND;
@@ -49043,6 +49421,7 @@ var WorkspaceMonthlyPdfGenerator = ({
         avgOutput: filteredShifts.reduce((sum, shift) => sum + shift.output, 0) / filteredShifts.length,
         avgCycleTime: filteredShifts.reduce((sum, shift) => sum + shift.cycleTime, 0) / filteredShifts.length,
         avgPph: filteredShifts.reduce((sum, shift) => sum + shift.pph, 0) / filteredShifts.length,
+        avgIdleTime: filteredShifts.reduce((sum, shift) => sum + shift.idleTime, 0) / filteredShifts.length,
         totalDays: filteredShifts.length,
         underperformingDays: filteredShifts.filter((shift) => shift.efficiency < effectiveLegend.green_min).length
       } : null;
@@ -49054,7 +49433,8 @@ var WorkspaceMonthlyPdfGenerator = ({
         doc.roundedRect(22, y - 7, 165, 12, 2, 2, "S");
       };
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, 95, 180, 70, 3, 3, "F");
+      const isAssemblyWorkspaceAndNotUptime = !isUptimeMode && isAssemblyWorkspace;
+      doc.roundedRect(15, 95, 180, isAssemblyWorkspaceAndNotUptime ? 40 : 70, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
@@ -49093,32 +49473,41 @@ var WorkspaceMonthlyPdfGenerator = ({
           doc.text(`${uptimeMetrics.underperformingDays} of ${uptimeMetrics.totalDays}`, 120, kpiStartY + kpiSpacing * 4);
         } else {
           const outputMetrics = monthlyMetrics;
-          createKPIBox(kpiStartY);
-          doc.setFontSize(11);
-          doc.setFont("helvetica", "normal");
-          doc.text("Average Efficiency:", 25, kpiStartY);
-          doc.setFont("helvetica", "bold");
-          doc.text(`${outputMetrics.avgEfficiency.toFixed(1)}% (Target: ${Math.round(effectiveLegend.green_min)}%)`, 120, kpiStartY);
-          createKPIBox(kpiStartY + kpiSpacing);
-          doc.setFont("helvetica", "normal");
-          doc.text("Average Output:", 25, kpiStartY + kpiSpacing);
-          doc.setFont("helvetica", "bold");
-          doc.text(`${Math.round(outputMetrics.avgOutput)} pieces`, 120, kpiStartY + kpiSpacing);
-          createKPIBox(kpiStartY + kpiSpacing * 2);
-          doc.setFont("helvetica", "normal");
-          doc.text("Average PPH:", 25, kpiStartY + kpiSpacing * 2);
-          doc.setFont("helvetica", "bold");
-          doc.text(`${outputMetrics.avgPph.toFixed(1)} per hour`, 120, kpiStartY + kpiSpacing * 2);
-          createKPIBox(kpiStartY + kpiSpacing * 3);
-          doc.setFont("helvetica", "normal");
-          doc.text("Working Days:", 25, kpiStartY + kpiSpacing * 3);
-          doc.setFont("helvetica", "bold");
-          doc.text(`${outputMetrics.totalDays} days`, 120, kpiStartY + kpiSpacing * 3);
-          createKPIBox(kpiStartY + kpiSpacing * 4);
-          doc.setFont("helvetica", "normal");
-          doc.text("Underperforming Days:", 25, kpiStartY + kpiSpacing * 4);
-          doc.setFont("helvetica", "bold");
-          doc.text(`${outputMetrics.underperformingDays} of ${outputMetrics.totalDays}`, 120, kpiStartY + kpiSpacing * 4);
+          if (!isAssemblyWorkspace) {
+            createKPIBox(kpiStartY);
+            doc.setFontSize(11);
+            doc.setFont("helvetica", "normal");
+            doc.text("Average Efficiency:", 25, kpiStartY);
+            doc.setFont("helvetica", "bold");
+            doc.text(`${outputMetrics.avgEfficiency.toFixed(1)}% (Target: ${Math.round(effectiveLegend.green_min)}%)`, 120, kpiStartY);
+            createKPIBox(kpiStartY + kpiSpacing);
+            doc.setFont("helvetica", "normal");
+            doc.text("Average PPH:", 25, kpiStartY + kpiSpacing);
+            doc.setFont("helvetica", "bold");
+            doc.text(`${outputMetrics.avgPph.toFixed(1)} per hour`, 120, kpiStartY + kpiSpacing);
+            createKPIBox(kpiStartY + kpiSpacing * 2);
+            doc.setFont("helvetica", "normal");
+            doc.text("Working Days:", 25, kpiStartY + kpiSpacing * 2);
+            doc.setFont("helvetica", "bold");
+            doc.text(`${outputMetrics.totalDays} days`, 120, kpiStartY + kpiSpacing * 2);
+            createKPIBox(kpiStartY + kpiSpacing * 3);
+            doc.setFont("helvetica", "normal");
+            doc.text("Underperforming Days:", 25, kpiStartY + kpiSpacing * 3);
+            doc.setFont("helvetica", "bold");
+            doc.text(`${outputMetrics.underperformingDays} of ${outputMetrics.totalDays}`, 120, kpiStartY + kpiSpacing * 3);
+          } else {
+            createKPIBox(kpiStartY);
+            doc.setFontSize(11);
+            doc.setFont("helvetica", "normal");
+            doc.text("Average Cycle Time:", 25, kpiStartY);
+            doc.setFont("helvetica", "bold");
+            doc.text(`${Math.round(outputMetrics.avgCycleTime)}s`, 120, kpiStartY);
+            createKPIBox(kpiStartY + kpiSpacing);
+            doc.setFont("helvetica", "normal");
+            doc.text("Average Idle Time:", 25, kpiStartY + kpiSpacing);
+            doc.setFont("helvetica", "bold");
+            doc.text(formatIdleTime(outputMetrics.avgIdleTime ?? 0), 120, kpiStartY + kpiSpacing);
+          }
         }
       } else {
         doc.setFontSize(12);
@@ -49129,29 +49518,33 @@ var WorkspaceMonthlyPdfGenerator = ({
       }
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 180, 190, 180);
+      const separatorY = isAssemblyWorkspaceAndNotUptime ? 150 : 180;
+      doc.line(20, separatorY, 190, separatorY);
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, 185, 180, 85, 3, 3, "F");
+      const dailySectionY = isAssemblyWorkspaceAndNotUptime ? 155 : 185;
+      doc.roundedRect(15, dailySectionY, 180, 85, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text(isUptimeMode ? "Daily Utilization Summary" : "Daily Performance Summary", 20, 195);
+      doc.text(isUptimeMode ? "Daily Utilization Summary" : "Daily Performance Summary", 20, dailySectionY + 10);
       doc.setTextColor(0, 0, 0);
       if (validDays.length > 0) {
         doc.setFontSize(10);
         doc.setFont("helvetica", "bold");
         doc.setFillColor(240, 240, 240);
-        doc.roundedRect(20, 200, 170, 7, 1, 1, "F");
-        doc.text("Date", 25, 205);
-        doc.text(isUptimeMode ? "Productive" : "Actual", 60, 205);
-        doc.text(isUptimeMode ? "Idle" : "Standard", 95, 205);
-        doc.text(isUptimeMode ? "Utilization" : "Efficiency", 135, 205);
-        doc.text("Status", 170, 205);
+        const tableHeaderY = dailySectionY + 15;
+        doc.roundedRect(20, tableHeaderY, 170, 7, 1, 1, "F");
+        const textY = tableHeaderY + 5;
+        doc.text("Date", 25, textY);
+        doc.text(isUptimeMode ? "Productive" : isAssemblyWorkspace ? "Cycle Time" : "Actual", 60, textY);
+        doc.text(isUptimeMode ? "Idle" : isAssemblyWorkspace ? "Target CT" : "Standard", 95, textY);
+        doc.text(isUptimeMode ? "Utilization" : "Efficiency", 135, textY);
+        doc.text("Status", 170, textY);
         doc.setLineWidth(0.2);
         doc.setDrawColor(220, 220, 220);
-        doc.line(20, 208, 190, 208);
+        doc.line(20, textY + 3, 190, textY + 3);
         doc.setFont("helvetica", "normal");
-        let yPos = 215;
+        let yPos = textY + 10;
         const recentDays = validDays.slice(-10).reverse();
         recentDays.forEach((dayData, index) => {
           if (yPos > 260) return;
@@ -49185,8 +49578,13 @@ var WorkspaceMonthlyPdfGenerator = ({
             }
             doc.setTextColor(0, 0, 0);
           } else {
-            doc.text(`${shift.output}`, 60, yPos);
-            doc.text(`${shift.targetOutput}`, 95, yPos);
+            if (isAssemblyWorkspace) {
+              doc.text(`${shift.cycleTime.toFixed(1)}`, 60, yPos);
+              doc.text(`${shift.pphThreshold > 0 ? (3600 / shift.pphThreshold).toFixed(1) : "-"}`, 95, yPos);
+            } else {
+              doc.text(`${shift.output}`, 60, yPos);
+              doc.text(`${shift.targetOutput}`, 95, yPos);
+            }
             doc.text(`${shift.efficiency.toFixed(1)}%`, 135, yPos);
             if (shift.efficiency >= effectiveLegend.green_min) {
               doc.setTextColor(0, 171, 69);
@@ -49201,12 +49599,12 @@ var WorkspaceMonthlyPdfGenerator = ({
         });
         doc.setLineWidth(0.2);
         doc.setDrawColor(220, 220, 220);
-        doc.roundedRect(20, 200, 170, yPos - 200 - 3, 1, 1, "S");
+        doc.roundedRect(20, tableHeaderY, 170, yPos - tableHeaderY - 3, 1, 1, "S");
       } else {
         doc.setFontSize(12);
         doc.setFont("helvetica", "normal");
         doc.setTextColor(100, 100, 100);
-        doc.text("No daily data available for this month", 25, 215);
+        doc.text("No daily data available for this month", 25, dailySectionY + 30);
         doc.setTextColor(0, 0, 0);
       }
       doc.setFontSize(9);
@@ -49239,46 +49637,64 @@ var WorkspaceCycleTimeMetricCards = ({
   workspace,
   className,
   legend,
-  layout: layout2 = "grid"
+  layout: layout2 = "grid",
+  isAssemblyWorkspace = false,
+  idleTimeData
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const efficiencyValue = workspace.avg_efficiency || 0;
   const efficiencyTarget = effectiveLegend.green_min;
   const efficiencyColor = getEfficiencyHexColor(efficiencyValue, effectiveLegend);
-  const hideEfficiencyCard = shouldHideWorkspaceEfficiencyCard(workspace);
-  const containerClassName = layout2 === "stack" ? `space-y-4 ${className || ""}` : `grid grid-cols-1 sm:grid-cols-2 ${hideEfficiencyCard ? "lg:grid-cols-2" : "lg:grid-cols-3"} gap-3 min-h-0 ${className || ""}`;
+  const hideEfficiencyCard = isAssemblyWorkspace || shouldHideWorkspaceEfficiencyCard(workspace);
+  const totalCards = 2 + (hideEfficiencyCard ? 0 : 1) + (idleTimeData ? 1 : 0);
+  let gridColsClass = "lg:grid-cols-3";
+  if (totalCards === 4) gridColsClass = "lg:grid-cols-4";
+  else if (totalCards === 2) gridColsClass = "lg:grid-cols-2";
+  const containerClassName = layout2 === "stack" ? `space-y-4 ${className || ""}` : `grid grid-cols-1 gap-4 sm:gap-3 sm:grid-cols-2 ${gridColsClass} w-full h-full min-h-0 ${className || ""}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-    !hideEfficiencyCard && /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-5xl font-bold", style: { color: efficiencyColor }, children: [
+    !hideEfficiencyCard && /* @__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.jsx(CardHeader2, { className: "pb-1 pt-5 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-[15px] font-bold text-center text-gray-900 tracking-wide", children: "Efficiency" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { className: "flex-1 flex flex-col items-center justify-center pb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-5xl font-bold tracking-tight", style: { color: efficiencyColor }, children: [
           efficiencyValue.toFixed(1),
           "%"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mt-1 font-medium tracking-wide", children: [
           "Target: ",
           Math.round(efficiencyTarget),
           "%"
         ] })
-      ] }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
+    /* @__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.jsx(CardHeader2, { className: "pb-1 pt-5 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-[15px] font-bold text-center text-gray-900 tracking-wide", children: "Cycle Time (s)" }) }),
+      /* @__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 ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-[#34C759]"}`, children: workspace.avg_cycle_time.toFixed(1) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mt-1 font-medium tracking-wide", children: [
           "Standard: ",
           workspace.ideal_cycle_time?.toFixed(1) || 0,
           "s"
         ] })
-      ] }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Idle Time" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-4xl font-bold ${!workspace.idle_time || workspace.idle_time <= 0 ? "text-green-500" : workspace.idle_time <= 300 ? "text-yellow-500" : "text-red-500"}`, children: formatIdleTime(workspace.idle_time) }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
-      ] }) })
+    /* @__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.jsx(CardHeader2, { className: "pb-1 pt-5 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-[15px] font-bold text-center text-gray-900 tracking-wide", children: "Idle Time" }) }),
+      /* @__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 ${!workspace.idle_time || workspace.idle_time <= 0 ? "text-[#34C759]" : workspace.idle_time <= 300 ? "text-yellow-500" : "text-red-500"}`, children: formatIdleTime(workspace.idle_time) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1 font-medium tracking-wide", children: "Total idle time" })
+      ] })
+    ] }),
+    idleTimeData && /* @__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.jsx(CardHeader2, { className: "pb-1 pt-5 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-[15px] font-bold text-center text-gray-900 tracking-wide", children: "Idle Time Breakdown" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 p-2 flex items-center justify-center h-full sm:h-auto min-h-[120px] sm:min-h-[100px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+        IdleTimeReasonChart,
+        {
+          data: idleTimeData.chartData,
+          isLoading: idleTimeData.isLoading,
+          error: idleTimeData.error,
+          variant: "bar"
+        }
+      ) })
     ] })
   ] });
 };
@@ -49416,13 +49832,13 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
           ${isPlaceholder ? "cursor-default" : ""}`;
 };
 var formatPercentRange = (min, max) => {
-  const format8 = (value) => Number.isInteger(value) ? `${value}` : value.toFixed(1);
+  const format9 = (value) => Number.isInteger(value) ? `${value}` : value.toFixed(1);
   if (min >= 100 || max >= 100) {
-    return `${format8(min)}+%`;
+    return `${format9(min)}+%`;
   }
-  return `${format8(min)}-${format8(max)}%`;
+  return `${format9(min)}-${format9(max)}%`;
 };
-var Legend6 = ({
+var Legend5 = ({
   useBottleneckLabel = false,
   legend,
   metricLabel = "Efficiency"
@@ -49608,7 +50024,7 @@ var WorkspaceGrid = React141__namespace.default.memo(({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }),
         mapViewEnabled && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -49625,7 +50041,7 @@ var WorkspaceGrid = React141__namespace.default.memo(({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1 mr-32", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1 mr-32", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-14 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
       motion.div,
@@ -50136,7 +50552,7 @@ var KPISection = React141.memo(({
               value: showSkeleton ? "" : kpis.efficiency.value,
               change: effChange,
               trend: effTrend,
-              trendLabel: "today",
+              trendLabel: "vs yesterday",
               trendMode: "pill",
               suffix: "%",
               showZeroChange: true,
@@ -52372,7 +52788,7 @@ var SideNavBar = React141.memo(({
             setIsAlertsOpen(willOpen);
             setIsSettingsOpen(false);
             if (willOpen) {
-              trackCoreEvent("Alerts Page Clicked", { source: "side_nav" });
+              trackCoreEvent("Alerts page clicked", { source: "side_nav" });
               void refreshAlertsSummary();
             }
           },
@@ -52527,7 +52943,7 @@ var SideNavBar = React141.memo(({
             {
               onClick: () => {
                 setIsAlertsOpen(true);
-                trackCoreEvent("Alerts Page Clicked", { source: "side_nav_mobile" });
+                trackCoreEvent("Alerts page clicked", { source: "side_nav_mobile" });
                 void refreshAlertsSummary();
                 onMobileMenuClose?.();
               },
@@ -59737,7 +60153,8 @@ var MonthlyRangeFilter = ({
   onMonthNavigate,
   className,
   variant = "default",
-  showLabel = true
+  showLabel = true,
+  singleDateOnly = false
 }) => {
   const todayKey = React141.useMemo(
     () => dateFnsTz.formatInTimeZone(/* @__PURE__ */ new Date(), timezone || "UTC", "yyyy-MM-dd"),
@@ -59825,6 +60242,12 @@ var MonthlyRangeFilter = ({
     }
     setActivePreset("Custom");
     setPendingChangeMeta({ source: "custom" });
+    if (singleDateOnly) {
+      setRangeStart(day);
+      setRangeEnd(day);
+      setSelecting(false);
+      return;
+    }
     if (!selecting || !rangeStart) {
       setRangeStart(day);
       setRangeEnd(null);
@@ -59859,6 +60282,13 @@ var MonthlyRangeFilter = ({
   };
   const handleApply = () => {
     if (rangeStart) {
+      if (singleDateOnly) {
+        const selected = dateFns.startOfDay(rangeStart) > dateFns.startOfDay(today) ? dateFns.startOfDay(today) : dateFns.startOfDay(rangeStart);
+        const dateKey = dateFns.format(selected, "yyyy-MM-dd");
+        onChange({ startKey: dateKey, endKey: dateKey }, pendingChangeMeta || { source: "custom" });
+        setIsOpen(false);
+        return;
+      }
       const boundedStart = dateFns.startOfDay(rangeStart) > dateFns.startOfDay(today) ? dateFns.startOfDay(today) : dateFns.startOfDay(rangeStart);
       const candidateEnd = rangeEnd || rangeStart;
       const boundedEnd = dateFns.startOfDay(candidateEnd) > dateFns.startOfDay(today) ? dateFns.startOfDay(today) : dateFns.startOfDay(candidateEnd);
@@ -59953,7 +60383,7 @@ var MonthlyRangeFilter = ({
       "overflow-hidden bg-white animate-in fade-in zoom-in-95 duration-200 flex",
       isInline ? "relative mt-2 w-full rounded-xl border border-gray-200" : "absolute right-0 z-50 mt-2 w-[520px] rounded-xl border border-gray-100 shadow-2xl"
     ), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-40 bg-[#F8FAFF] border-r border-gray-100 p-4 flex flex-col justify-between", children: [
+      !singleDateOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-40 bg-gray-50 border-r border-gray-100 p-4 flex flex-col justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
           presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -59962,7 +60392,7 @@ var MonthlyRangeFilter = ({
               onClick: () => handlePresetClick(preset),
               className: clsx(
                 "w-full text-left px-3 py-2 text-sm rounded-lg transition-all duration-200",
-                activePreset === preset.label ? "bg-[#EEF2FF] text-[#4F46E5] font-semibold" : "text-gray-600 hover:bg-gray-100/80"
+                activePreset === preset.label ? "bg-blue-50 text-blue-600 font-semibold" : "text-gray-600 hover:bg-gray-100/80"
               ),
               children: preset.label
             },
@@ -59975,7 +60405,7 @@ var MonthlyRangeFilter = ({
               onClick: () => setActivePreset("Custom"),
               className: clsx(
                 "w-full text-left px-3 py-2 text-sm rounded-lg transition-all duration-200",
-                activePreset === "Custom" ? "bg-[#EEF2FF] text-[#4F46E5] font-semibold" : "text-gray-600 hover:bg-gray-100/80"
+                activePreset === "Custom" ? "bg-blue-50 text-blue-600 font-semibold" : "text-gray-600 hover:bg-gray-100/80"
               ),
               children: "Custom"
             }
@@ -59997,7 +60427,7 @@ var MonthlyRangeFilter = ({
               type: "button",
               onClick: handleApply,
               disabled: !rangeStart,
-              className: "w-full py-2.5 bg-[#4F46E5] text-white text-sm font-semibold rounded-lg hover:bg-[#4338CA] transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+              className: "w-full py-2.5 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed",
               children: "Apply"
             }
           )
@@ -60047,9 +60477,9 @@ var MonthlyRangeFilter = ({
           const dayNum = day.getDate();
           const isFutureDay = dateFns.startOfDay(day) > dateFns.startOfDay(today);
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-            inRange && !isStart && !isEnd && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 -inset-x-0.5 bg-[#EEF2FF] z-0" }),
-            inRange && isStart && !isSingleDaySelection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 left-1/2 bg-[#EEF2FF] z-0" }),
-            inRange && isEnd && !isSingleDaySelection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 right-1/2 bg-[#EEF2FF] z-0" }),
+            inRange && !isStart && !isEnd && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 -inset-x-0.5 bg-blue-50 z-0" }),
+            inRange && isStart && !isSingleDaySelection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 left-1/2 bg-blue-50 z-0" }),
+            inRange && isEnd && !isSingleDaySelection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 right-1/2 bg-blue-50 z-0" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -60058,19 +60488,47 @@ var MonthlyRangeFilter = ({
                 disabled: isFutureDay,
                 className: clsx(
                   "h-10 w-full flex items-center justify-center text-sm font-semibold transition-all duration-150 relative z-10",
-                  isFutureDay && "text-gray-200 cursor-not-allowed",
+                  // Future day NOT in range
+                  isFutureDay && !inRange && "text-gray-300 cursor-not-allowed",
                   // Not in range
-                  !isFutureDay && !inRange && "text-gray-700 hover:bg-gray-50 rounded-lg",
+                  !isFutureDay && !inRange && "text-gray-700 hover:bg-gray-100 rounded-lg",
                   // Middle of range
-                  inRange && !isStart && !isEnd && "text-[#4F46E5]",
+                  inRange && !isStart && !isEnd && clsx(
+                    "text-blue-600",
+                    isFutureDay && "cursor-not-allowed opacity-60"
+                  ),
                   // Start/End of range or Single selection
-                  (isStart || isEnd) && "bg-[#4F46E5] text-white rounded-lg shadow-sm"
+                  (isStart || isEnd) && clsx(
+                    "bg-blue-600 text-white rounded-lg shadow-sm",
+                    isFutureDay && "cursor-not-allowed opacity-80"
+                  )
                 ),
                 children: dayNum
               }
             )
           ] }, day.toISOString());
-        }) })
+        }) }),
+        singleDateOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-end gap-2 border-t border-gray-100 pt-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleReset,
+              className: "px-3 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors",
+              children: "Reset"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleApply,
+              disabled: !rangeStart,
+              className: "px-4 py-1.5 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+              children: "Apply"
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -61847,7 +62305,36 @@ var getMonthDateInfo = (timezone) => {
   const monthEndDate = dateFnsTz.fromZonedTime(`${monthEndKey}T23:59:59`, timezone);
   return { startDate, endDate, monthEndDate };
 };
-var LeaderboardCountdown = ({ targetDate, format: format8, finishedLabel = "Finished", placeholder = "--", onFinished }) => {
+var createKpisOverviewUrl = ({
+  tab,
+  date,
+  shift
+}) => {
+  const params = new URLSearchParams();
+  if (tab) {
+    params.set("tab", tab);
+  }
+  if (date) {
+    params.set("date", date);
+  }
+  if (typeof shift === "number" && Number.isFinite(shift)) {
+    params.set("shift", shift.toString());
+  }
+  const queryString = params.toString();
+  return queryString ? `/kpis?${queryString}` : "/kpis";
+};
+var getZonedDateAtMidday = (dateKey, timezone) => dateFnsTz.fromZonedTime(`${dateKey}T12:00:00`, timezone);
+var formatDateKey = (dateKey, timezone, options) => {
+  try {
+    return new Intl.DateTimeFormat("en-US", {
+      ...options,
+      timeZone: timezone
+    }).format(getZonedDateAtMidday(dateKey, timezone));
+  } catch {
+    return dateKey;
+  }
+};
+var LeaderboardCountdown = ({ targetDate, format: format9, finishedLabel = "Finished", placeholder = "--", onFinished }) => {
   const [time2, setTime] = React141.useState("");
   const hasFinishedRef = React141.useRef(false);
   React141.useEffect(() => {
@@ -61869,7 +62356,7 @@ var LeaderboardCountdown = ({ targetDate, format: format8, finishedLabel = "Fini
         }
         return;
       }
-      if (format8 === "days") {
+      if (format9 === "days") {
         const days = Math.floor(diff / (1e3 * 60 * 60 * 24));
         const hours = Math.floor(diff % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60));
         setTime(`${days} days ${hours} hours`);
@@ -61884,7 +62371,7 @@ var LeaderboardCountdown = ({ targetDate, format: format8, finishedLabel = "Fini
     tick();
     const interval = setInterval(tick, 1e3);
     return () => clearInterval(interval);
-  }, [targetDate, format8, finishedLabel, placeholder, onFinished]);
+  }, [targetDate, format9, finishedLabel, placeholder, onFinished]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: time2 });
 };
 var LinesLeaderboard = ({
@@ -61902,7 +62389,9 @@ var LinesLeaderboard = ({
   shiftEndDate,
   monthEndDate,
   viewType,
-  setViewType
+  setViewType,
+  timezone: _timezone,
+  isHistoricalDaily
 }) => {
   const formatEfficiency = (value) => typeof value === "number" && Number.isFinite(value) ? `${value.toFixed(1)}%` : "--";
   const assignedLineIdSet = React141__namespace.default.useMemo(
@@ -61995,10 +62484,10 @@ var LinesLeaderboard = ({
     }
   }, [timeRange, leaderboardData, isLoadingToday, isLoadingMonthly]);
   const topThree = leaderboardData.slice(0, 3);
-  leaderboardData.slice(3);
   const countdownTarget = timeRange === "monthly" ? monthEndDate : shiftEndDate;
   const countdownFormat = timeRange === "monthly" ? "days" : "clock";
   const countdownFinishedLabel = timeRange === "monthly" ? "Finished" : "Shift Ended";
+  const showCountdown = timeRange === "monthly" || !isHistoricalDaily;
   const handleCountdownFinished = React141__namespace.default.useCallback(() => {
     trackCoreEvent("Leaderboard Countdown Finished", {
       countdown_type: timeRange === "monthly" ? "month_end" : "shift_end",
@@ -62072,7 +62561,7 @@ var LinesLeaderboard = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:absolute md:right-0 md:top-1/2 md:-translate-y-1/2 flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 px-4 py-2 bg-white rounded-full shadow-sm border border-gray-100", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:absolute md:right-0 md:top-1/2 md:-translate-y-1/2 flex flex-wrap items-center justify-center md:justify-end gap-2", children: showCountdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 px-4 py-2 bg-white rounded-full shadow-sm border border-gray-100", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4 text-orange-500" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-gray-400 uppercase tracking-wider", children: "Ends in" }),
@@ -62193,7 +62682,7 @@ var LinesLeaderboard = ({
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: item.supervisorName })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 whitespace-nowrap text-sm text-gray-500", children: item.line.line_name }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 whitespace-nowrap text-right", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-gray-900", children: formatEfficiency(item.efficiency) }) }) })
+              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-3 whitespace-nowrap text-right", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-end", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900", children: formatEfficiency(item.efficiency) }) }) })
             ]
           },
           item.id
@@ -62367,6 +62856,9 @@ var KPIsOverviewView = ({
   const [activeTab, setActiveTab] = React141.useState("today");
   const [timeRange, setTimeRange] = React141.useState("today");
   const [viewType, setViewType] = React141.useState("operator");
+  const [selectedLeaderboardDate, setSelectedLeaderboardDate] = React141.useState("");
+  const [selectedLeaderboardShiftId, setSelectedLeaderboardShiftId] = React141.useState(0);
+  const [hasHydratedLeaderboardRouteState, setHasHydratedLeaderboardRouteState] = React141.useState(false);
   const [loading, setLoading] = React141.useState(true);
   const [error, setError] = React141.useState(null);
   const [topPerformer, setTopPerformer] = React141.useState({
@@ -62388,13 +62880,6 @@ var KPIsOverviewView = ({
   const [monthlyError, setMonthlyError] = React141.useState(null);
   const dailyRequestKeyRef = React141.useRef(null);
   const monthlyRequestKeyRef = React141.useRef(null);
-  React141.useEffect(() => {
-    if (!router$1.isReady) return;
-    const tab = router$1.query.tab;
-    if (tab === "leaderboard") {
-      setActiveTab("leaderboard");
-    }
-  }, [router$1.isReady, router$1.query.tab]);
   const supabase = useSupabase();
   const { user } = useAuth();
   const dashboardConfig = useDashboardConfig();
@@ -62480,7 +62965,77 @@ var KPIsOverviewView = ({
     () => getShiftEndDate(currentShiftDetails, configuredTimezone),
     [currentShiftDetails, configuredTimezone]
   );
-  const shiftName = (currentShiftDetails.shiftName || "Day").replace(/ Shift$/i, "");
+  React141__namespace.default.useMemo(() => {
+    if (shiftConfig?.shifts && shiftConfig.shifts.length > 0) {
+      return shiftConfig.shifts.map((shift) => ({
+        id: shift.shiftId,
+        label: shift.shiftName || `Shift ${shift.shiftId}`,
+        startTime: shift.startTime,
+        endTime: shift.endTime
+      }));
+    }
+    return [
+      { id: 0, label: "Day Shift", startTime: "06:00", endTime: "18:00" },
+      { id: 1, label: "Night Shift", startTime: "18:00", endTime: "06:00" }
+    ];
+  }, [shiftConfig]);
+  const effectiveLeaderboardDate = selectedLeaderboardDate || currentShiftDate;
+  const effectiveLeaderboardShiftId = Number.isFinite(selectedLeaderboardShiftId) ? selectedLeaderboardShiftId : currentShiftId;
+  const isHistoricalLeaderboardDaily = activeTab === "leaderboard" && timeRange === "today" && (effectiveLeaderboardDate !== currentShiftDate || effectiveLeaderboardShiftId !== currentShiftId);
+  React141.useEffect(() => {
+    if (!router$1.isReady) return;
+    const tabQuery = router$1.query.tab;
+    const dateQuery = router$1.query.date;
+    const shiftQuery = router$1.query.shift;
+    const parsedShiftQuery = typeof shiftQuery === "string" ? Number.parseInt(shiftQuery, 10) : Number.NaN;
+    const hasHistoricalQuery = tabQuery === "leaderboard" && typeof dateQuery === "string" && Number.isFinite(parsedShiftQuery);
+    setActiveTab(tabQuery === "leaderboard" ? "leaderboard" : "today");
+    if (hasHistoricalQuery) {
+      setSelectedLeaderboardDate(dateQuery);
+      setSelectedLeaderboardShiftId(parsedShiftQuery);
+      setTimeRange("today");
+    } else {
+      setSelectedLeaderboardDate(currentShiftDate);
+      setSelectedLeaderboardShiftId(currentShiftId);
+    }
+    setHasHydratedLeaderboardRouteState(true);
+  }, [
+    router$1.isReady,
+    router$1.query.tab,
+    router$1.query.date,
+    router$1.query.shift,
+    currentShiftDate,
+    currentShiftId
+  ]);
+  React141.useEffect(() => {
+    if (!router$1.isReady || !hasHydratedLeaderboardRouteState) 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 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) {
+      return;
+    }
+    void router$1.replace(
+      createKpisOverviewUrl({
+        tab: expectedTab === "leaderboard" ? "leaderboard" : void 0,
+        date: expectedDate,
+        shift: expectedShift !== void 0 ? Number.parseInt(expectedShift, 10) : void 0
+      }),
+      void 0,
+      { shallow: true }
+    );
+  }, [
+    router$1,
+    activeTab,
+    timeRange,
+    effectiveLeaderboardDate,
+    effectiveLeaderboardShiftId,
+    hasHydratedLeaderboardRouteState,
+    isHistoricalLeaderboardDaily
+  ]);
   const factoryViewId = entityConfig.factoryViewId || "factory";
   const {
     lineMetrics,
@@ -62655,10 +63210,10 @@ var KPIsOverviewView = ({
   }, [supabase, resolvedCompanyId, leaderboardLinesForView, monthStartDate, monthEndDateKey, viewType]);
   const fetchDailyLeaderboard = React141.useCallback(async () => {
     if (!supabase || !resolvedCompanyId || leaderboardLinesForView.length === 0) return;
-    if (!currentShiftDate) return;
+    if (!effectiveLeaderboardDate) return;
     const targetLineIds = leaderboardLinesForView.map((line) => line.id);
     const lineIdsKey = targetLineIds.slice().sort().join(",");
-    const requestKey = `${resolvedCompanyId}|${currentShiftDate}|${currentShiftId}|${lineIdsKey}`;
+    const requestKey = `${resolvedCompanyId}|${effectiveLeaderboardDate}|${effectiveLeaderboardShiftId}|${lineIdsKey}`;
     if (dailyRequestKeyRef.current === requestKey) return;
     dailyRequestKeyRef.current = requestKey;
     setDailyLoading(true);
@@ -62666,8 +63221,8 @@ var KPIsOverviewView = ({
     try {
       const entries = await lineLeaderboardService.getDailyLineLeaderboard(supabase, {
         companyId: resolvedCompanyId,
-        date: currentShiftDate,
-        shiftId: currentShiftId,
+        date: effectiveLeaderboardDate,
+        shiftId: effectiveLeaderboardShiftId,
         lineIds: targetLineIds,
         lineMode: viewType === "machine" ? "uptime" : "output"
       });
@@ -62685,7 +63240,14 @@ var KPIsOverviewView = ({
     } finally {
       setDailyLoading(false);
     }
-  }, [supabase, resolvedCompanyId, leaderboardLinesForView, currentShiftDate, currentShiftId, viewType]);
+  }, [
+    supabase,
+    resolvedCompanyId,
+    leaderboardLinesForView,
+    effectiveLeaderboardDate,
+    effectiveLeaderboardShiftId,
+    viewType
+  ]);
   React141.useEffect(() => {
     if (activeTab !== "leaderboard") return;
     fetchMonthlyLeaderboard();
@@ -62774,6 +63336,12 @@ var KPIsOverviewView = ({
       trackProps.status = isEfficiencyOnTrack(kpis.efficiency?.value) ? "On Track" : "Behind";
     }
     trackCoreEvent("Line Card Clicked", trackProps);
+    if (activeTab === "leaderboard" && timeRange === "today" && isHistoricalLeaderboardDaily) {
+      navigation.navigate(
+        `/kpis/${line.id}?date=${encodeURIComponent(effectiveLeaderboardDate)}&shift=${effectiveLeaderboardShiftId}`
+      );
+      return;
+    }
     navigation.navigate(`/kpis/${line.id}`);
   };
   const handleBackClick = React141.useCallback(() => {
@@ -62799,21 +63367,24 @@ var KPIsOverviewView = ({
     });
     setActiveTab(newTab);
   }, [activeTab, leaderboardLines.length, lines.length]);
-  const formatLocalDate2 = (date) => {
-    const options = {
+  const formatLocalDate2 = React141.useCallback((dateKey) => {
+    return formatDateKey(dateKey, configuredTimezone, {
       year: "numeric",
       month: "long",
       day: "numeric"
-    };
-    return date.toLocaleDateString("en-US", options);
-  };
+    });
+  }, [configuredTimezone]);
   const getMonthRange = () => {
-    const now4 = /* @__PURE__ */ new Date();
-    const startOfMonth2 = new Date(now4.getFullYear(), now4.getMonth(), 1);
-    const endOfMonth2 = new Date(now4.getFullYear(), now4.getMonth() + 1, 0);
-    const startLabel = startOfMonth2.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-    const endLabel = endOfMonth2.toLocaleDateString("en-US", { month: "short", day: "numeric" });
-    return `${startLabel} - ${endLabel}, ${now4.getFullYear()}`;
+    const zonedNow = dateFnsTz.toZonedTime(/* @__PURE__ */ new Date(), configuredTimezone);
+    const startOfMonthKey = buildDateKey(zonedNow.getFullYear(), zonedNow.getMonth(), 1);
+    const endOfMonthKey = buildDateKey(
+      zonedNow.getFullYear(),
+      zonedNow.getMonth(),
+      new Date(zonedNow.getFullYear(), zonedNow.getMonth() + 1, 0).getDate()
+    );
+    const startLabel = formatDateKey(startOfMonthKey, configuredTimezone, { month: "short", day: "numeric" });
+    const endLabel = formatDateKey(endOfMonthKey, configuredTimezone, { month: "short", day: "numeric" });
+    return `${startLabel} - ${endLabel}, ${zonedNow.getFullYear()}`;
   };
   const isMonthlyMode = activeTab === "leaderboard" && timeRange === "monthly";
   const isLeaderboardLoading = timeRange === "today" ? dailyLoading : monthlyLoading;
@@ -62822,8 +63393,13 @@ var KPIsOverviewView = ({
   const showTopPerformerImage = Boolean(topPerformer.imageUrl) && !topPerformerImageError;
   typeof topPerformer.efficiency === "number" && Number.isFinite(topPerformer.efficiency);
   topPerformerLoading ? "--" : typeof topPerformer.efficiency === "number" && Number.isFinite(topPerformer.efficiency) ? `${topPerformer.efficiency.toFixed(1)}%` : "--";
+  const showHistoricalLeaderboardHeader = activeTab === "leaderboard" && timeRange === "today" && isHistoricalLeaderboardDaily;
+  const headerDateKey = activeTab === "leaderboard" && timeRange === "today" ? effectiveLeaderboardDate : monthEndDateKey;
+  const headerShiftId = showHistoricalLeaderboardHeader ? effectiveLeaderboardShiftId : currentShiftDetails.shiftId;
+  const headerShiftName = getShiftNameById(headerShiftId, configuredTimezone, shiftConfig).replace(/ Shift$/i, "");
+  const headerDateLabel = isMonthlyMode ? getMonthRange() : formatLocalDate2(headerDateKey);
   const getShiftIcon = (shiftId) => {
-    const shiftNameLower = shiftName.toLowerCase();
+    const shiftNameLower = getShiftNameById(shiftId, configuredTimezone, shiftConfig).toLowerCase();
     if (shiftNameLower.includes("day") || shiftNameLower.includes("morning") || shiftId === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) });
     }
@@ -62926,18 +63502,26 @@ var KPIsOverviewView = ({
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900", children: activeTab === "leaderboard" ? "Leaderboard" : "Overview" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-emerald-500 animate-pulse ring-2 ring-emerald-500/20" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `h-2 w-2 rounded-full ring-2 ${showHistoricalLeaderboardHeader ? "bg-amber-500 ring-amber-500/20" : "bg-emerald-500 animate-pulse ring-emerald-500/20"}`
+              }
+            )
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `inline-flex items-center bg-gray-100 rounded-full ${isMonthlyMode ? "px-4 py-1.5 ring-1 ring-gray-200 shadow-sm" : "px-2.5 py-1"}`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium text-gray-700 ${isMonthlyMode ? "text-sm" : "text-xs"}`, children: isMonthlyMode ? getMonthRange() : formatLocalDate2(/* @__PURE__ */ new Date()) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `inline-flex items-center bg-gray-100 rounded-full ${isMonthlyMode ? "px-4 py-1.5 ring-1 ring-gray-200 shadow-sm" : "px-2.5 py-1"}`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-medium text-gray-700 ${isMonthlyMode ? "text-sm" : "text-xs"}`, children: headerDateLabel }) }),
           !isMonthlyMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(currentShiftDetails.shiftId) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: shiftName })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(headerShiftId) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: headerShiftName })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
+            showHistoricalLeaderboardHeader ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-amber-50 text-amber-700 rounded-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: "Historical" })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
           ] })
         ] }),
         activeTab !== "leaderboard" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 bg-white shadow-md hover:shadow-lg transition-all duration-300 ease-out hover:scale-[1.01] relative rounded-2xl border border-amber-100 pl-2 pr-4 py-1.5 flex items-center justify-between group", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 min-w-0", children: [
@@ -63038,7 +63622,12 @@ var KPIsOverviewView = ({
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl md:text-3xl lg:text-4xl font-semibold text-gray-900 tracking-tight", children: activeTab === "leaderboard" ? "Leaderboard" : "Overview" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-emerald-500 animate-pulse ring-4 ring-emerald-500/10 flex-shrink-0" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `h-2.5 w-2.5 rounded-full ring-4 flex-shrink-0 ${showHistoricalLeaderboardHeader ? "bg-amber-500 ring-amber-500/10" : "bg-emerald-500 animate-pulse ring-emerald-500/10"}`
+              }
+            )
           ] }),
           !topPerformerLoading && activeTab !== "leaderboard" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-2xl border border-amber-200 shadow-md pl-1.5 pr-4 py-1.5 flex items-center gap-4 transition-all hover:shadow-lg hover:border-amber-300 group", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -63108,7 +63697,7 @@ var KPIsOverviewView = ({
           ] }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-50/50 px-4 py-2 rounded-xl border border-blue-100/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-6", children: [
-          !isMonthlyMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          !isMonthlyMode && !showHistoricalLeaderboardHeader && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-700", children: [
               /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", 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" }) }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) })
@@ -63117,16 +63706,23 @@ var KPIsOverviewView = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: `w-4 h-4 opacity-70 ${isMonthlyMode ? "scale-110" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${isMonthlyMode ? "text-base font-medium" : "text-sm font-medium"}`, children: isMonthlyMode ? getMonthRange() : formatLocalDate2(/* @__PURE__ */ new Date()) })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${isMonthlyMode ? "text-base font-medium" : "text-sm font-medium"}`, children: headerDateLabel })
           ] }),
           !isMonthlyMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(currentShiftDetails.shiftId) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(headerShiftId) }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold uppercase tracking-wider", children: [
-                shiftName,
+                headerShiftName,
                 " Shift"
               ] })
+            ] }),
+            showHistoricalLeaderboardHeader && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1 bg-amber-50 text-amber-700 rounded-full border border-amber-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-3.5 h-3.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider", children: "Historical" })
+              ] })
             ] })
           ] })
         ] }) }),
@@ -63149,19 +63745,52 @@ var KPIsOverviewView = ({
               }
             )
           ] }),
-          (activeTab === "leaderboard" || activeTab === "today") && showViewTypeDropdown && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "select",
-            {
-              value: viewType,
-              onChange: (e) => setViewType(e.target.value),
-              className: "appearance-none pl-3 pr-8 py-1.5 text-sm font-medium bg-white border border-gray-200 hover:border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all cursor-pointer shadow-sm",
-              style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.5rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.2em 1.2em` },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "operator", children: "Workforce" }),
-                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "machine", children: "Machine" })
-              ]
-            }
-          ) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            activeTab === "leaderboard" && timeRange === "today" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MonthlyRangeFilter_default,
+                {
+                  month: parseDateKeyToDate(effectiveLeaderboardDate).getMonth(),
+                  year: parseDateKeyToDate(effectiveLeaderboardDate).getFullYear(),
+                  timezone: configuredTimezone,
+                  value: {
+                    startKey: effectiveLeaderboardDate,
+                    endKey: effectiveLeaderboardDate
+                  },
+                  onChange: (range) => {
+                    setSelectedLeaderboardDate(range.startKey);
+                  },
+                  showLabel: false,
+                  singleDateOnly: true
+                }
+              ),
+              isHistoricalLeaderboardDaily && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setSelectedLeaderboardDate(currentShiftDate);
+                    setSelectedLeaderboardShiftId(currentShiftId);
+                  },
+                  className: "text-xs font-medium text-blue-600 hover:text-blue-700 whitespace-nowrap",
+                  children: "Return to Live"
+                }
+              )
+            ] }),
+            (activeTab === "leaderboard" || activeTab === "today") && showViewTypeDropdown && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                value: viewType,
+                onChange: (e) => setViewType(e.target.value),
+                className: "appearance-none pl-3 pr-8 py-1.5 text-sm font-medium bg-white border border-gray-200 hover:border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all cursor-pointer shadow-sm",
+                style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.5rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.2em 1.2em` },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "operator", children: "Workforce" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "machine", children: "Machine" })
+                ]
+              }
+            ) })
+          ] })
         ] })
       ] })
     ] }) }),
@@ -63206,7 +63835,9 @@ var KPIsOverviewView = ({
           shiftEndDate,
           monthEndDate,
           viewType,
-          setViewType
+          setViewType,
+          timezone: configuredTimezone,
+          isHistoricalDaily: isHistoricalLeaderboardDaily
         }
       ) })
     ) })
@@ -64748,51 +65379,41 @@ var ClipsCostView = () => {
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[120px]" })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto w-full", children: error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3 text-red-700 animate-in fade-in slide-in-from-top-2 max-w-2xl mx-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-4 sm:p-6 lg:p-8 max-w-5xl mx-auto w-full", children: error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3 text-red-700 animate-in fade-in slide-in-from-top-2 max-w-2xl mx-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-5 w-5 flex-shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium", children: "Error loading usage data" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1 text-red-600", children: error })
       ] })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl mt-8 animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: "overflow-hidden shadow-sm border-gray-200 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 bg-blue-50 rounded-full mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Film, { className: "h-8 w-8 text-blue-600" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Clips Analyzed" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mb-3", children: formatMonthLabel(data?.monthStart) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-5xl font-bold text-gray-900 mb-2 tabular-nums tracking-tight", children: formatNumber(data?.monthlyClassifications || 0) })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: "mt-4 overflow-hidden shadow-sm border-gray-200 bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { className: "p-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3 uppercase tracking-wider", children: "Previous Months" }),
-        (data?.historicalMonthlyClassifications?.length || 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No historical month usage yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: data?.historicalMonthlyClassifications.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6 animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: "overflow-hidden shadow-sm border-gray-200 bg-white h-full flex flex-col justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "p-10 lg:p-14", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-blue-50/50 rounded-2xl mb-6 ring-1 ring-blue-100/50", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Film, { className: "h-10 w-10 text-blue-600", strokeWidth: 1.5 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-600 uppercase tracking-widest mb-3", children: "Current Month Usage" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-400 mb-6", children: formatMonthLabel(data?.monthStart) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-baseline gap-2 mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-7xl font-bold text-gray-900 tabular-nums tracking-tighter", children: formatNumber(data?.monthlyClassifications || 0) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-4", children: "Clips analyzed and processed by our AI pipeline" })
+      ] }) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-1", children: /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: "overflow-hidden shadow-sm border-gray-200 bg-white h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { className: "p-6 lg:p-8 flex flex-col h-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-6 uppercase tracking-widest", children: "Previous Months" }),
+        (data?.historicalMonthlyClassifications?.length || 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center text-center py-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 bg-gray-50 rounded-full mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Film, { className: "h-6 w-6 text-gray-400", strokeWidth: 1.5 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No historical month usage yet." })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3 flex-1 overflow-y-auto pr-2", children: data?.historicalMonthlyClassifications.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex items-center justify-between rounded-md border border-gray-100 bg-gray-50 px-3 py-2",
+            className: "group flex items-center justify-between rounded-xl border border-gray-100 bg-gray-50/50 hover:bg-white hover:border-gray-200 hover:shadow-sm px-4 py-3.5 transition-all duration-200",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: formatMonthLabel(item.monthStart) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 tabular-nums", children: formatNumber(item.classifications) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-600 group-hover:text-gray-900 transition-colors", children: formatMonthLabel(item.monthStart) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-gray-900 tabular-nums", children: formatNumber(item.classifications) })
             ]
           },
           item.monthStart
         )) })
-      ] }) })
+      ] }) }) })
     ] }) })
   ] });
 };
 var ClipsCostView_default = ClipsCostView;
-
-// src/lib/constants/actions.ts
-var ACTION_NAMES = {
-  /** Assembly operations */
-  ASSEMBLY: "Assembly",
-  /** Packaging operations */
-  PACKAGING: "Packaging",
-  /** Inspection operations */
-  INSPECTION: "Inspection",
-  /** Testing operations */
-  TESTING: "Testing",
-  /** Quality control operations */
-  QUALITY_CONTROL: "Quality Control"
-};
 var calculateShiftHours = (startTime, endTime, breaks = []) => {
   if (!startTime || !endTime) return 8;
   const [startHour, startMinute] = startTime.split(":").map(Number);
@@ -65374,9 +65995,9 @@ var ShiftsView = ({
         const actionIds = Array.from(
           new Set(currentThresholds.map((threshold) => threshold.action_id).filter(Boolean))
         );
-        const actionNameById = /* @__PURE__ */ new Map();
+        const actionMetadataById = /* @__PURE__ */ new Map();
         if (actionIds.length > 0) {
-          const { data: actionRows, error: actionsError } = await supabase.from("actions").select("id, action_name").in("id", actionIds);
+          const { data: actionRows, error: actionsError } = await supabase.from("actions").select("id, action_name, action_family").in("id", actionIds);
           if (actionsError) {
             console.warn(
               `[ShiftsView] Failed to resolve action names for line ${lineId}, shift ${shift.shiftId}: ${actionsError.message}`
@@ -65384,7 +66005,13 @@ var ShiftsView = ({
           } else {
             (actionRows || []).forEach((actionRow) => {
               if (actionRow.id && actionRow.action_name) {
-                actionNameById.set(actionRow.id, actionRow.action_name);
+                actionMetadataById.set(actionRow.id, {
+                  action_name: actionRow.action_name,
+                  action_family: normalizeActionFamily({
+                    actionFamily: actionRow.action_family,
+                    actionName: actionRow.action_name
+                  })
+                });
               }
             });
           }
@@ -65405,7 +66032,7 @@ var ShiftsView = ({
             nextDayOutput = dayOutputToKeep;
             nextPPH = newShiftHours > 0 ? Math.round(dayOutputToKeep / newShiftHours) : 0;
           }
-          const resolvedActionName = (typeof threshold.action_name === "string" && threshold.action_name.trim().length > 0 ? threshold.action_name : actionNameById.get(threshold.action_id)) || ACTION_NAMES.ASSEMBLY;
+          const resolvedActionName = (typeof threshold.action_name === "string" && threshold.action_name.trim().length > 0 ? threshold.action_name : actionMetadataById.get(threshold.action_id)?.action_name) || ACTION_NAMES.ASSEMBLY;
           return {
             line_id: threshold.line_id || lineId,
             shift_id: shift.shiftId,
@@ -65426,18 +66053,20 @@ var ShiftsView = ({
             `Failed to update action thresholds for line ${lineId}, shift ${shift.shiftId}: ${thresholdsUpsertError.message}`
           );
         }
-        const packagingActionIds = new Set(
-          Array.from(actionNameById.entries()).filter(([, actionName]) => actionName.toLowerCase() === ACTION_NAMES.PACKAGING.toLowerCase()).map(([actionId]) => actionId)
+        const outputActionIds = new Set(
+          Array.from(actionMetadataById.entries()).filter(([, action]) => action.action_family === ACTION_FAMILIES.OUTPUT).map(([actionId]) => actionId)
         );
-        const packagingThresholds = recalculatedThresholds.filter((threshold) => {
-          if (packagingActionIds.has(threshold.action_id)) return true;
-          return typeof threshold.action_name === "string" && threshold.action_name.toLowerCase() === ACTION_NAMES.PACKAGING.toLowerCase();
+        const outputThresholds = recalculatedThresholds.filter((threshold) => {
+          if (outputActionIds.has(threshold.action_id)) return true;
+          return normalizeActionFamily({
+            actionName: threshold.action_name
+          }) === ACTION_FAMILIES.OUTPUT;
         });
-        const thresholdDayOutput = packagingThresholds.reduce(
+        const thresholdDayOutput = outputThresholds.reduce(
           (sum, threshold) => sum + (Number(threshold.total_day_output) || 0),
           0
         );
-        const thresholdPPH = packagingThresholds.reduce(
+        const thresholdPPH = outputThresholds.reduce(
           (sum, threshold) => sum + (Number(threshold.pph_threshold) || 0),
           0
         );
@@ -66648,7 +67277,7 @@ var TargetsViewUI = ({
                             "aria-label": `Action type for ${formattedName}`,
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
+                              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "output", className: "py-2", children: ACTION_NAMES.OUTPUT })
                             ]
                           }
                         ) }),
@@ -66719,7 +67348,7 @@ var TargetsViewUI = ({
                               "aria-label": `Action type for ${formattedName}`,
                               children: [
                                 /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", children: "Assembly" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", children: "Packaging" })
+                                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "output", children: ACTION_NAMES.OUTPUT })
                               ]
                             }
                           )
@@ -66924,14 +67553,20 @@ var TargetsView = ({
           throw new Error("Failed to fetch bulk targets data");
         }
         const { data } = bulkResponse;
-        const assemblyAction = Object.values(data.actions).find((a) => a.action_name === ACTION_NAMES.ASSEMBLY);
-        const packagingAction = Object.values(data.actions).find((a) => a.action_name === ACTION_NAMES.PACKAGING);
-        if (!assemblyAction || !packagingAction) {
+        const assemblyAction = data.actions[ACTION_FAMILIES.ASSEMBLY] || Object.values(data.actions).find((a) => normalizeActionFamily({
+          actionFamily: a.action_family,
+          actionName: a.action_name
+        }) === ACTION_FAMILIES.ASSEMBLY);
+        const outputAction = data.actions[ACTION_FAMILIES.OUTPUT] || Object.values(data.actions).find((a) => normalizeActionFamily({
+          actionFamily: a.action_family,
+          actionName: a.action_name
+        }) === ACTION_FAMILIES.OUTPUT);
+        if (!assemblyAction || !outputAction) {
           throw new Error("Could not find required actions in bulk response");
         }
         const actionIdsData = {
           assembly: assemblyAction.id,
-          packaging: packagingAction.id
+          output: outputAction.id
         };
         setActionIds(actionIdsData);
         const newAllShiftsData = {};
@@ -66976,12 +67611,16 @@ var TargetsView = ({
               let actionType = "assembly";
               let actionId = actionIdsData.assembly;
               const effectiveActionId = threshold?.action_id ?? ws.action_id;
-              if (effectiveActionId === packagingAction.id || !effectiveActionId && ws.action_type === "packaging") {
-                actionType = "packaging";
-                actionId = packagingAction.id;
-              } else if (effectiveActionId === assemblyAction.id || !effectiveActionId && ws.action_type === "assembly") {
+              const effectiveActionFamily = normalizeActionFamily({
+                actionFamily: threshold?.action_family,
+                actionType: ws.action_type
+              });
+              if (effectiveActionFamily === ACTION_FAMILIES.OUTPUT || effectiveActionId === outputAction.id || !effectiveActionId && ws.action_type === "output") {
+                actionType = "output";
+                actionId = effectiveActionId || outputAction.id;
+              } else if (effectiveActionFamily === ACTION_FAMILIES.ASSEMBLY || effectiveActionId === assemblyAction.id || !effectiveActionId && ws.action_type === "assembly") {
                 actionType = "assembly";
-                actionId = assemblyAction.id;
+                actionId = effectiveActionId || assemblyAction.id;
               }
               return {
                 id: ws.id,
@@ -67253,7 +67892,9 @@ var TargetsView = ({
         // Round to whole number
         ideal_cycle_time: Number(ws.targetCycleTime) || 0,
         total_day_output: Number(ws.targetDayOutput) || 0,
-        action_name: ws.actionType === "assembly" ? ACTION_NAMES.ASSEMBLY : ACTION_NAMES.PACKAGING,
+        action_name: ws.actionType === "assembly" ? ACTION_NAMES.ASSEMBLY : ACTION_NAMES.OUTPUT,
+        action_family: ws.actionType,
+        display_name: ws.actionType === "assembly" ? ACTION_NAMES.ASSEMBLY : ACTION_NAMES.OUTPUT,
         updated_by: currentEffectiveUserId,
         // Use the potentially hardcoded ID
         ...skuEnabled && lineDataToSave.selectedSKU ? { sku_id: lineDataToSave.selectedSKU.id } : {}
@@ -67261,7 +67902,7 @@ var TargetsView = ({
       console.log(`[handleSaveLine] workspaceThresholdUpdates for ${lineId}:`, workspaceThresholdUpdates);
       await workspaceService.updateActionThresholds(workspaceThresholdUpdates);
       console.log(`[handleSaveLine] Successfully updated action thresholds for ${lineId}`);
-      const packagingWorkspaces = lineDataToSave.workspaces.filter((ws) => ws.actionType === "packaging");
+      const outputWorkspaces = lineDataToSave.workspaces.filter((ws) => ws.actionType === "output");
       let resolvedLineThresholdSkuId = lineDataToSave.selectedSKU?.id || null;
       if (!resolvedLineThresholdSkuId) {
         const { data: dummySkuRows, error: dummySkuError } = await supabase.from("skus").select("id").eq("line_id", lineId).eq("sku_definition", "dummy_definition").eq("is_active", true).limit(1);
@@ -67279,8 +67920,8 @@ var TargetsView = ({
         date: currentDate,
         shift_id: selectedShift,
         product_code: lineDataToSave.productId,
-        threshold_day_output: packagingWorkspaces.reduce((acc, ws) => acc + (Number(ws.targetDayOutput) || 0), 0),
-        threshold_pph: packagingWorkspaces.reduce((acc, ws) => acc + (ws.targetPPH ? Math.round(Number(ws.targetPPH)) : 0), 0),
+        threshold_day_output: outputWorkspaces.reduce((acc, ws) => acc + (Number(ws.targetDayOutput) || 0), 0),
+        threshold_pph: outputWorkspaces.reduce((acc, ws) => acc + (ws.targetPPH ? Math.round(Number(ws.targetPPH)) : 0), 0),
         // Round each PPH value
         sku_id: resolvedLineThresholdSkuId
       };
@@ -67808,6 +68449,7 @@ var WorkspaceDetailView = ({
       avg_efficiency: Number(cachedOverviewMetrics.efficiency || 0),
       total_actions: totalActions,
       hourly_action_counts: [],
+      hourly_cycle_times: [],
       workspace_rank: 0,
       total_workspaces: 0,
       ideal_output_until_now: idealOutput,
@@ -67818,6 +68460,22 @@ var WorkspaceDetailView = ({
   }, [cachedOverviewMetrics, shiftConfig?.shifts]);
   const workspace = (isHistoricView ? historicMetrics : liveMetrics) || cachedDetailedMetrics || overviewFallback;
   const detailedWorkspaceMetrics = (isHistoricView ? historicMetrics : liveMetrics) || cachedDetailedMetrics;
+  const cycleTimeChartData = React141.useMemo(
+    () => Array.isArray(workspace?.hourly_cycle_times) ? workspace.hourly_cycle_times.map((value) => {
+      const numericValue = Number(value);
+      return Number.isFinite(numericValue) ? numericValue : 0;
+    }) : [],
+    [workspace?.hourly_cycle_times]
+  );
+  const cycleTimeDatasetKey = React141.useMemo(
+    () => [
+      workspace?.workspace_id || workspaceId || "workspace",
+      date || workspace?.date || "live",
+      parsedShiftId ?? workspace?.shift_id ?? "current",
+      "hourly"
+    ].join(":"),
+    [workspace?.workspace_id, workspaceId, date, workspace?.date, parsedShiftId, workspace?.shift_id]
+  );
   const hasWorkspaceSnapshot = Boolean(workspace);
   const loading = ((isHistoricView ? historicLoading : liveLoading) || isShiftConfigLoading) && !hasWorkspaceSnapshot;
   const error = isHistoricView ? historicError : liveError;
@@ -68059,10 +68717,47 @@ var WorkspaceDetailView = ({
     return filterDataByDateKeyRange(monthlyData, range);
   }, [monthlyData, range]);
   const formattedWorkspaceName = displayName || formatWorkspaceName3(workspace?.workspace_name || "", effectiveLineId);
-  const shouldShowCycleTimeChart = !isUptimeMode && (showCycleTimeChart ?? formattedWorkspaceName.startsWith("FINAL ASSY"));
+  const workspaceActionType = workspace && "action_type" in workspace ? workspace.action_type : void 0;
+  const workspaceAssemblyEnabled = workspace && "line_assembly_enabled" in workspace ? workspace.line_assembly_enabled === true : false;
+  const isAssemblyWorkspace = workspaceActionType === "assembly" || workspaceAssemblyEnabled;
+  const shouldShowCycleTimeChart = !isUptimeMode && (showCycleTimeChart ?? isAssemblyWorkspace);
   const showIdleBreakdownChart = !shouldShowCycleTimeChart && idleTimeVlmEnabled;
   const idleClipDate = date || workspace?.date || calculatedOperationalDate || getOperationalDate(timezone);
   const idleClipShiftId = parsedShiftId ?? workspace?.shift_id;
+  const hourlyIdleMinutes = React141.useMemo(() => {
+    if (!shouldShowCycleTimeChart || !workspace?.idle_time_hourly || !workspace?.shift_start) return [];
+    const parseTimeToMinutes3 = (time2) => {
+      const [h, m] = time2.split(":").map(Number);
+      if (!Number.isFinite(h) || !Number.isFinite(m)) return 0;
+      return h * 60 + m;
+    };
+    const startTotal = parseTimeToMinutes3(workspace.shift_start);
+    const endTotalRaw = workspace.shift_end ? parseTimeToMinutes3(workspace.shift_end) : startTotal + 11 * 60;
+    const endTotal = endTotalRaw <= startTotal ? endTotalRaw + 24 * 60 : endTotalRaw;
+    const shiftDuration = Math.max(60, endTotal - startTotal);
+    const totalHourSlots = Math.max(1, Math.ceil(shiftDuration / 60));
+    const idleTimeHourlyObj = workspace.idle_time_hourly || {};
+    const result = Array(totalHourSlots).fill(0);
+    for (let i = 0; i < totalHourSlots; i++) {
+      const startSlotMins = startTotal + i * 60;
+      let endSlotMins = startSlotMins + 60;
+      if (endSlotMins > endTotal) endSlotMins = endTotal;
+      let idleCount = 0;
+      for (let m = startSlotMins; m < endSlotMins; m++) {
+        const hourKey = Math.floor(m / 60) % 24;
+        const minuteKey = m % 60;
+        const hourData = idleTimeHourlyObj[hourKey.toString()] || [];
+        if (Array.isArray(hourData)) {
+          const val = hourData[minuteKey];
+          if (val === 1 || val === "1") {
+            idleCount++;
+          }
+        }
+      }
+      result[i] = idleCount;
+    }
+    return result;
+  }, [shouldShowCycleTimeChart, workspace?.idle_time_hourly, workspace?.shift_start, workspace?.shift_end]);
   const shiftDurationMinutes = React141.useMemo(
     () => getShiftDurationMinutes(workspace?.shift_start, workspace?.shift_end),
     [workspace?.shift_start, workspace?.shift_end]
@@ -68135,7 +68830,7 @@ var WorkspaceDetailView = ({
     }
   }, [returnUrl]);
   const handleBackNavigation = () => {
-    if (date || shift) {
+    if (isHistoricView) {
       setActiveTab("monthly_history");
       if (onNavigate) {
         const params = new URLSearchParams();
@@ -68299,7 +68994,7 @@ var WorkspaceDetailView = ({
               BackButtonMinimal,
               {
                 onClick: handleBackNavigation,
-                text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : (date || shift) && activeTab !== "monthly_history" ? "Back to Monthly History" : "Back",
+                text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : isHistoricView && activeTab !== "monthly_history" ? "Back to Monthly History" : "Back",
                 size: "default",
                 "aria-label": "Navigate back to previous page"
               }
@@ -68476,7 +69171,8 @@ var WorkspaceDetailView = ({
                 {
                   workspace,
                   idleTimeReasons: idleTimeChartData,
-                  efficiencyLegend
+                  efficiencyLegend,
+                  hourlyCycleTimes: cycleTimeChartData
                 }
               ) }),
               activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -68557,7 +69253,7 @@ var WorkspaceDetailView = ({
                   animate: "animate",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-4", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle time trend" : "Hourly Output" }),
                       !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsx(
                         "button",
                         {
@@ -68590,9 +69286,14 @@ var WorkspaceDetailView = ({
                         ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
                           CycleTimeOverTimeChart,
                           {
-                            data: workspace.hourly_action_counts || [],
+                            data: cycleTimeChartData,
                             idealCycleTime: workspace.ideal_cycle_time || 0,
-                            shiftStart: workspace.shift_start || ""
+                            shiftStart: workspace.shift_start || "",
+                            shiftEnd: workspace.shift_end || "",
+                            xAxisMode: "hourly",
+                            datasetKey: cycleTimeDatasetKey,
+                            showIdleTime: showChartIdleTime,
+                            idleTimeData: hourlyIdleMinutes
                           }
                         ) : /* @__PURE__ */ jsxRuntime.jsx(
                           HourlyOutputChart2,
@@ -68639,7 +69340,8 @@ var WorkspaceDetailView = ({
                 {
                   workspace,
                   legend: efficiencyLegend,
-                  layout: "stack"
+                  layout: "stack",
+                  idleTimeData: idleTimeVlmEnabled ? idleTimeData : void 0
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] }),
@@ -68684,7 +69386,7 @@ var WorkspaceDetailView = ({
                         animate: "animate",
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle time trend" : "Hourly Output" }),
                             !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsx(
                               "button",
                               {
@@ -68713,9 +69415,14 @@ var WorkspaceDetailView = ({
                           ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
                             CycleTimeOverTimeChart,
                             {
-                              data: workspace.hourly_action_counts || [],
+                              data: cycleTimeChartData,
                               idealCycleTime: workspace.ideal_cycle_time || 0,
-                              shiftStart: workspace.shift_start || ""
+                              shiftStart: workspace.shift_start || "",
+                              shiftEnd: workspace.shift_end || "",
+                              xAxisMode: "hourly",
+                              datasetKey: cycleTimeDatasetKey,
+                              showIdleTime: showChartIdleTime,
+                              idleTimeData: hourlyIdleMinutes
                             }
                           ) : /* @__PURE__ */ jsxRuntime.jsx(
                             HourlyOutputChart2,
@@ -68767,7 +69474,8 @@ var WorkspaceDetailView = ({
                   workspace,
                   legend: efficiencyLegend,
                   layout: "grid",
-                  className: desktopBottomSectionClass
+                  className: desktopBottomSectionClass,
+                  idleTimeData: idleTimeVlmEnabled ? idleTimeData : void 0
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] })
@@ -68797,6 +69505,7 @@ var WorkspaceDetailView = ({
                 availableShifts: shiftConfig?.shifts?.map((s) => ({ id: s.shiftId, name: s.shiftName })),
                 legend: efficiencyLegend,
                 trendSummary: workspaceMonthlyTrend,
+                isAssemblyWorkspace,
                 onDateSelect: (selectedDate, shiftId) => {
                   if (onDateSelect) {
                     onDateSelect(selectedDate, shiftId);
@@ -74884,6 +75593,11 @@ var normalizeTrend = (value) => ({
 });
 var normalizeIdleBreakdown = (value) => (value || []).map((item) => ({
   reason: item?.reason?.trim() || "Unknown",
+  reason_key: item?.reason_key?.trim() || item?.reason?.trim() || "unknown",
+  display_name: item?.display_name?.trim() || void 0,
+  palette_token: item?.palette_token?.trim() || void 0,
+  icon_token: item?.icon_token?.trim() || void 0,
+  is_known: typeof item?.is_known === "boolean" ? item.is_known : null,
   percentage: normalizeNumber(item?.percentage),
   total_duration_seconds: normalizeNumber(item?.total_duration_seconds),
   efficiency_loss_percentage: normalizeNumber(item?.efficiency_loss_percentage),
@@ -75935,7 +76649,12 @@ var IdleBreakdownCard = React141__namespace.default.memo(({
   const showInitialSkeleton = idle.loading && idle.lastUpdated === null;
   const idleBreakdown = React141__namespace.default.useMemo(() => {
     return idle.data.map((item) => ({
-      name: item.reason?.trim() || "Unknown",
+      name: item.display_name?.trim() || item.reason?.trim() || "Unknown",
+      reasonKey: item.reason_key?.trim() || item.reason?.trim() || "unknown",
+      displayName: item.display_name?.trim() || item.reason?.trim() || "Unknown",
+      paletteToken: item.palette_token?.trim(),
+      iconToken: item.icon_token?.trim(),
+      isKnown: item.is_known ?? void 0,
       value: toNumber3(item.percentage) || 0,
       totalDurationSeconds: toNumber3(item.total_duration_seconds),
       efficiencyLossPercentage: toNumber3(item.efficiency_loss_percentage),
@@ -77227,6 +77946,7 @@ var streamProxyConfig = {
   }
 };
 
+exports.ACTION_FAMILIES = ACTION_FAMILIES;
 exports.ACTION_NAMES = ACTION_NAMES;
 exports.AIAgentView = AIAgentView_default;
 exports.AcceptInvite = AcceptInvite;
@@ -77339,7 +78059,7 @@ exports.LINE_1_UUID = LINE_1_UUID;
 exports.LINE_2_UUID = LINE_2_UUID;
 exports.LargeOutputProgressChart = LargeOutputProgressChart;
 exports.LeaderboardDetailView = LeaderboardDetailView_default;
-exports.Legend = Legend6;
+exports.Legend = Legend5;
 exports.LineAssignmentDropdown = LineAssignmentDropdown;
 exports.LineChart = LineChart;
 exports.LineHistoryCalendar = LineHistoryCalendar;
@@ -77521,6 +78241,7 @@ exports.formatReasonLabel = formatReasonLabel;
 exports.formatRelativeTime = formatRelativeTime;
 exports.formatTimeInZone = formatTimeInZone;
 exports.fromUrlFriendlyName = fromUrlFriendlyName;
+exports.getActionDisplayName = getActionDisplayName;
 exports.getAllLineDisplayNames = getAllLineDisplayNames;
 exports.getAllThreadMessages = getAllThreadMessages;
 exports.getAllWorkspaceDisplayNamesAsync = getAllWorkspaceDisplayNamesAsync;
@@ -77559,7 +78280,6 @@ exports.getMonthKeyBounds = getMonthKeyBounds;
 exports.getMonthWeekRanges = getMonthWeekRanges;
 exports.getNextUpdateInterval = getNextUpdateInterval;
 exports.getOperationalDate = getOperationalDate;
-exports.getReasonColor = getReasonColor;
 exports.getRoleAssignmentKind = getRoleAssignmentKind;
 exports.getRoleDescription = getRoleDescription;
 exports.getRoleLabel = getRoleLabel;
@@ -77594,6 +78314,7 @@ exports.isFactoryScopedRole = isFactoryScopedRole;
 exports.isFullMonthRange = isFullMonthRange;
 exports.isLegacyConfiguration = isLegacyConfiguration;
 exports.isPrefetchError = isPrefetchError;
+exports.isRecentFlowVideoGridMetricMode = isRecentFlowVideoGridMetricMode;
 exports.isSafari = isSafari;
 exports.isSupervisorRole = isSupervisorRole;
 exports.isTransitionPeriod = isTransitionPeriod;
@@ -77604,14 +78325,17 @@ exports.isValidPrefetchParams = isValidPrefetchParams;
 exports.isValidPrefetchStatus = isValidPrefetchStatus;
 exports.isValidWorkspaceDetailedMetricsPayload = isValidWorkspaceDetailedMetricsPayload;
 exports.isValidWorkspaceMetricsPayload = isValidWorkspaceMetricsPayload;
+exports.isWipGatedVideoGridMetricMode = isWipGatedVideoGridMetricMode;
 exports.isWorkspaceDisplayNamesLoaded = isWorkspaceDisplayNamesLoaded;
 exports.isWorkspaceDisplayNamesLoading = isWorkspaceDisplayNamesLoading;
 exports.lineLeaderboardService = lineLeaderboardService;
 exports.linesService = linesService;
 exports.mergeWithDefaultConfig = mergeWithDefaultConfig;
 exports.migrateLegacyConfiguration = migrateLegacyConfiguration;
+exports.normalizeActionFamily = normalizeActionFamily;
 exports.normalizeDateKeyRange = normalizeDateKeyRange;
 exports.normalizeRoleLevel = normalizeRoleLevel;
+exports.normalizeVideoGridMetricMode = normalizeVideoGridMetricMode;
 exports.optifyeAgentClient = optifyeAgentClient;
 exports.parseDateKeyToDate = parseDateKeyToDate;
 exports.parseS3Uri = parseS3Uri;