@optifye/dashboard-core 6.12.0 → 6.12.1

package/dist/index.js

@@ -4234,6 +4234,22 @@ var isDummyRow = (row, dummySet) => {
   if (typeof skuId !== "string" || skuId.length === 0) return false;
   return dummySet.has(skuId);
 };
+var isActiveOutputRow = (row) => {
+  const currentOutput = coerceOptionalNumber(row.current_output) ?? 0;
+  const idealOutput = coerceOptionalNumber(row.ideal_output) ?? 0;
+  return currentOutput > 0 || idealOutput > 0;
+};
+var roundHalfUpInt = (value) => Math.floor(value + 0.5);
+var dedupeStringsPreserveOrder = (values) => {
+  const seen = /* @__PURE__ */ new Set();
+  const ordered = [];
+  for (const value of values) {
+    if (!value || seen.has(value)) continue;
+    seen.add(value);
+    ordered.push(value);
+  }
+  return ordered;
+};
 var emptyAggregate = () => ({
   current_output: 0,
   ideal_output: 0,
@@ -4352,10 +4368,7 @@ var combineLineMetricsRows = (rows, dummySkuId) => {
   );
   const dummyLineMetricsRow = rows.find((row) => isDummyRow(row, dummySet));
   const lineThresholdValue = dummyLineMetricsRow ? safeFloat(dummyLineMetricsRow.line_threshold) : safeFloat(rowsForAggregation[0]?.line_threshold ?? 0);
-  const underperformingWorkspacesSum = rowsForAggregation.reduce(
-    (acc, row) => acc + safeInt(row.underperforming_workspaces),
-    0
-  );
+  const activeRealRows = rowsForAggregation.filter(isActiveOutputRow);
   const weighted = (field) => {
     const pairs = [];
     rowsForAggregation.forEach((row, idx) => {
@@ -4377,6 +4390,12 @@ var combineLineMetricsRows = (rows, dummySkuId) => {
   const avgEfficiency = weighted("avg_efficiency");
   const avgCycleTime = weighted("avg_cycle_time");
   const thresholdPph = weighted("threshold_pph");
+  const underperformingWorkspaces = activeRealRows.length > 0 ? roundHalfUpInt(
+    activeRealRows.reduce(
+      (acc, row) => acc + safeInt(row.underperforming_workspaces),
+      0
+    ) / activeRealRows.length
+  ) : 0;
   const merged = mergeHourlyFields(rows);
   const outputArrays = [];
   for (const row of rowsForAggregation) {
@@ -4399,7 +4418,7 @@ var combineLineMetricsRows = (rows, dummySkuId) => {
   }
   const underperformingNames = [];
   const underperformingUuids = [];
-  for (const row of rowsForAggregation) {
+  for (const row of activeRealRows) {
     const names = row.underperforming_workspace_names;
     if (Array.isArray(names)) {
       for (const n of names) {
@@ -4413,6 +4432,8 @@ var combineLineMetricsRows = (rows, dummySkuId) => {
       }
     }
   }
+  const dedupedUnderperformingNames = dedupeStringsPreserveOrder(underperformingNames);
+  const dedupedUnderperformingUuids = dedupeStringsPreserveOrder(underperformingUuids);
   let totalWorkspacesValue = null;
   const primaryTotal = coerceOptionalNumber(primary.total_workspaces);
   if (primaryTotal !== null) {
@@ -4434,9 +4455,9 @@ var combineLineMetricsRows = (rows, dummySkuId) => {
     line_threshold: lineThresholdValue,
     threshold_pph: thresholdPph,
     total_workspaces: safeInt(totalWorkspacesValue ?? 0),
-    underperforming_workspaces: underperformingWorkspacesSum,
-    underperforming_workspace_names: underperformingNames,
-    underperforming_workspace_uuids: underperformingUuids,
+    underperforming_workspaces: underperformingWorkspaces,
+    underperforming_workspace_names: dedupedUnderperformingNames,
+    underperforming_workspace_uuids: dedupedUnderperformingUuids,
     output_array: outputArray,
     output_hourly: merged.output_hourly,
     idle_time_hourly: merged.idle_time_hourly,
@@ -5561,11 +5582,11 @@ var getDaysDifferenceInZone = (compareDate, timezone) => {
   todayInZone.setHours(0, 0, 0, 0);
   compareDateInZone.setHours(0, 0, 0, 0);
   const diffTime = todayInZone.getTime() - compareDateInZone.getTime();
-  const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
-  if (diffDays < 0) return "In the future";
-  if (diffDays === 0) return "Today";
-  if (diffDays === 1) return "Yesterday";
-  return `${diffDays} days ago`;
+  const diffDays2 = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
+  if (diffDays2 < 0) return "In the future";
+  if (diffDays2 === 0) return "Today";
+  if (diffDays2 === 1) return "Yesterday";
+  return `${diffDays2} days ago`;
 };
 var getDashboardHeaderTimeInZone = (date = /* @__PURE__ */ new Date(), timezone, timeOptions, locale = DEFAULT_LOCALE) => {
   const defaultOptions = {
@@ -13012,6 +13033,7 @@ 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 hourlyTargetOutput = Array.isArray(data.hourly_target_output) ? data.hourly_target_output.map((value) => value === null || value === void 0 ? null : coerceNumber(value, 0)) : null;
   const hourlyCycleTimes = Array.isArray(data.hourly_cycle_times) ? data.hourly_cycle_times.map((value) => coerceNumber(value, 0)) : [];
   const cycleCompletionClipCount = data.cycle_completion_clip_count === null || data.cycle_completion_clip_count === void 0 ? null : coerceNumber(data.cycle_completion_clip_count, 0);
   const cycleTimeDataStatus = data.cycle_time_data_status === "missing_clips" ? "missing_clips" : data.cycle_time_data_status === "available" ? "available" : null;
@@ -13063,6 +13085,7 @@ var toWorkspaceDetailedMetrics = ({
     avg_efficiency: coerceNumber(data.efficiency ?? data.avg_efficiency, 0),
     total_actions: totalActions,
     hourly_action_counts: hourlyActionCounts,
+    hourly_target_output: hourlyTargetOutput,
     hourly_cycle_times: hourlyCycleTimes,
     cycle_completion_clip_count: cycleCompletionClipCount,
     cycle_time_data_status: cycleTimeDataStatus,
@@ -19679,7 +19702,7 @@ function formatRelativeTime(timestamp) {
     const diffSeconds = Math.floor(diffMs / 1e3);
     const diffMinutes = Math.floor(diffSeconds / 60);
     const diffHours = Math.floor(diffMinutes / 60);
-    const diffDays = Math.floor(diffHours / 24);
+    const diffDays2 = Math.floor(diffHours / 24);
     if (diffSeconds < 60) {
       return "Less than a minute ago";
     }
@@ -19691,8 +19714,8 @@ function formatRelativeTime(timestamp) {
       const hourLabel = diffHours === 1 ? "hour" : "hours";
       return `${diffHours} ${hourLabel} ago`;
     }
-    const dayLabel = diffDays === 1 ? "day" : "days";
-    return `${diffDays} ${dayLabel} ago`;
+    const dayLabel = diffDays2 === 1 ? "day" : "days";
+    return `${diffDays2} ${dayLabel} ago`;
   } catch (error) {
     console.error("[formatRelativeTime] Error formatting timestamp:", error);
     return "Unknown";
@@ -35191,6 +35214,223 @@ var Button = React144__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
+var padTime = (value) => value.toString().padStart(2, "0");
+var parseTime = (timeValue) => {
+  if (!timeValue) return null;
+  const [hourPart, minutePart] = timeValue.split(":");
+  const hour = Number.parseInt(hourPart, 10);
+  const minute = Number.parseInt(minutePart ?? "0", 10);
+  if (!Number.isFinite(hour) || !Number.isFinite(minute)) return null;
+  return { hour, minute };
+};
+var normalizeIdleTimeHourly = (idleTimeHourly) => {
+  if (!idleTimeHourly || typeof idleTimeHourly !== "object") {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(idleTimeHourly).map(([key, value]) => {
+      if (Array.isArray(value)) return [key, value];
+      if (value && Array.isArray(value.values)) {
+        return [key, value.values];
+      }
+      return [key, []];
+    })
+  );
+};
+var interpretIdleValue = (value) => {
+  if (value === 1 || value === "1") return "idle";
+  if (value === 0 || value === "0") return "active";
+  if (value === "x" || value === null || value === void 0) return "unknown";
+  return "unknown";
+};
+var getShiftDurationMinutes = (shiftStart, shiftEnd) => {
+  const start = parseTime(shiftStart);
+  const end = parseTime(shiftEnd);
+  if (!start || !end) return null;
+  let duration = end.hour * 60 + end.minute - (start.hour * 60 + start.minute);
+  if (duration <= 0) {
+    duration += 24 * 60;
+  }
+  return duration > 0 ? duration : null;
+};
+var getShiftElapsedMinutes = ({
+  shiftStart,
+  shiftEnd,
+  shiftDate,
+  timezone,
+  now: now4 = /* @__PURE__ */ new Date()
+}) => {
+  if (!shiftDate || !timezone) return null;
+  const startTime = parseTime(shiftStart);
+  const endTime = parseTime(shiftEnd);
+  if (!startTime || !endTime) return null;
+  const shiftStartDate = dateFnsTz.fromZonedTime(
+    `${shiftDate}T${padTime(startTime.hour)}:${padTime(startTime.minute)}:00`,
+    timezone
+  );
+  let shiftEndDate = dateFnsTz.fromZonedTime(
+    `${shiftDate}T${padTime(endTime.hour)}:${padTime(endTime.minute)}:00`,
+    timezone
+  );
+  if (shiftEndDate <= shiftStartDate) {
+    shiftEndDate = dateFns.addDays(shiftEndDate, 1);
+  }
+  const shiftMinutes = Math.max(dateFns.differenceInMinutes(shiftEndDate, shiftStartDate), 0);
+  if (shiftMinutes <= 0) return null;
+  const elapsed = dateFns.differenceInMinutes(now4, shiftStartDate);
+  return Math.min(Math.max(elapsed, 0), shiftMinutes);
+};
+var maskFutureHourlySeries = ({
+  data,
+  shiftStart,
+  shiftEnd,
+  shiftDate,
+  timezone,
+  now: now4 = /* @__PURE__ */ new Date()
+}) => {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  const normalizedData = data.map((value) => typeof value === "number" && Number.isFinite(value) ? value : null);
+  if (!normalizedData.length) {
+    return normalizedData;
+  }
+  const shiftMinutes = getShiftDurationMinutes(shiftStart, shiftEnd);
+  const elapsedMinutes = getShiftElapsedMinutes({
+    shiftStart,
+    shiftEnd,
+    shiftDate,
+    timezone,
+    now: now4
+  });
+  if (shiftMinutes === null || elapsedMinutes === null || elapsedMinutes >= shiftMinutes) {
+    return normalizedData;
+  }
+  return normalizedData.map((value, index) => {
+    const slotStartMinutes = index * 60;
+    return slotStartMinutes > elapsedMinutes ? null : value;
+  });
+};
+var buildUptimeSeries = ({
+  idleTimeHourly,
+  shiftStart,
+  shiftEnd,
+  shiftDate,
+  timezone,
+  elapsedMinutes
+}) => {
+  const normalizedIdle = normalizeIdleTimeHourly(idleTimeHourly || {});
+  const hasIdleData = Object.keys(normalizedIdle).length > 0;
+  if (!hasIdleData || !shiftDate || !timezone) {
+    return {
+      points: [],
+      activeMinutes: 0,
+      idleMinutes: 0,
+      availableMinutes: 0,
+      shiftMinutes: 0,
+      elapsedMinutes: 0,
+      hasData: false
+    };
+  }
+  const startTime = parseTime(shiftStart);
+  const endTime = parseTime(shiftEnd);
+  if (!startTime || !endTime) {
+    return {
+      points: [],
+      activeMinutes: 0,
+      idleMinutes: 0,
+      availableMinutes: 0,
+      shiftMinutes: 0,
+      elapsedMinutes: 0,
+      hasData: false
+    };
+  }
+  const shiftStartDate = dateFnsTz.fromZonedTime(
+    `${shiftDate}T${padTime(startTime.hour)}:${padTime(startTime.minute)}:00`,
+    timezone
+  );
+  let shiftEndDate = dateFnsTz.fromZonedTime(
+    `${shiftDate}T${padTime(endTime.hour)}:${padTime(endTime.minute)}:00`,
+    timezone
+  );
+  if (shiftEndDate <= shiftStartDate) {
+    shiftEndDate = dateFns.addDays(shiftEndDate, 1);
+  }
+  const shiftMinutes = Math.max(dateFns.differenceInMinutes(shiftEndDate, shiftStartDate), 0);
+  if (shiftMinutes <= 0) {
+    return {
+      points: [],
+      activeMinutes: 0,
+      idleMinutes: 0,
+      availableMinutes: 0,
+      shiftMinutes: 0,
+      elapsedMinutes: 0,
+      hasData: false
+    };
+  }
+  const elapsedMinutesClamped = Number.isFinite(elapsedMinutes) ? Math.min(Math.max(Math.floor(elapsedMinutes ?? 0), 0), shiftMinutes) : shiftMinutes;
+  const points = [];
+  let activeMinutes = 0;
+  let idleMinutes = 0;
+  for (let minuteIndex = 0; minuteIndex < shiftMinutes; minuteIndex += 1) {
+    const minuteDate = dateFns.addMinutes(shiftStartDate, minuteIndex);
+    const timeLabel = dateFnsTz.formatInTimeZone(minuteDate, timezone, "h:mm a");
+    if (minuteIndex >= elapsedMinutesClamped) {
+      points.push({
+        minuteIndex,
+        timeLabel,
+        uptime: null,
+        status: "unknown"
+      });
+      continue;
+    }
+    const hourKey = dateFnsTz.formatInTimeZone(minuteDate, timezone, "H");
+    const minuteKey = Number.parseInt(dateFnsTz.formatInTimeZone(minuteDate, timezone, "m"), 10);
+    const hourBucket = normalizedIdle[hourKey] || [];
+    const value = Array.isArray(hourBucket) ? hourBucket[minuteKey] : void 0;
+    const status = interpretIdleValue(value);
+    if (status === "active") activeMinutes += 1;
+    if (status === "idle") idleMinutes += 1;
+    points.push({
+      minuteIndex,
+      timeLabel,
+      uptime: status === "active" ? 1 : status === "idle" ? 0 : null,
+      status
+    });
+  }
+  return {
+    points,
+    activeMinutes,
+    idleMinutes,
+    availableMinutes: activeMinutes + idleMinutes,
+    shiftMinutes,
+    elapsedMinutes: elapsedMinutesClamped,
+    hasData: activeMinutes + idleMinutes > 0
+  };
+};
+var getUptimeUtilizationPercent = (shift) => {
+  const efficiency = shift.efficiency;
+  if (Number.isFinite(efficiency)) {
+    return Math.round(Math.max(0, Math.min(100, Number(efficiency))));
+  }
+  const idleSeconds = Number.isFinite(shift.idleTime) ? Number(shift.idleTime) : 0;
+  const activeSeconds = Number.isFinite(shift.activeTimeSeconds) ? Number(shift.activeTimeSeconds) : null;
+  let availableSeconds = Number.isFinite(shift.availableTimeSeconds) ? Number(shift.availableTimeSeconds) : null;
+  if (availableSeconds === null) {
+    if ((activeSeconds ?? 0) > 0 || idleSeconds > 0) {
+      availableSeconds = (activeSeconds ?? 0) + idleSeconds;
+    } else {
+      return 0;
+    }
+  }
+  if (availableSeconds <= 0) return 0;
+  const clampedIdleSeconds = Math.min(Math.max(idleSeconds, 0), availableSeconds);
+  const productiveSeconds = Math.max(
+    activeSeconds ?? availableSeconds - clampedIdleSeconds,
+    0
+  );
+  return Math.round(productiveSeconds / availableSeconds * 100);
+};
 
 // src/components/charts/skuDividerUtils.ts
 var HOURLY_TIME_RE = /^(\d{1,2}):(\d{2})/;
@@ -35203,37 +35443,162 @@ var parseTimeOfDay = (timeValue) => {
   if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return null;
   return { hour, minute };
 };
-var computeSegmentOffset = (segment, shift) => {
-  if (!segment?.start_time) return null;
+var parseDateKey = (value) => {
+  const [yearPart, monthPart, dayPart] = value.split("-").map(Number);
+  if (!Number.isFinite(yearPart) || !Number.isFinite(monthPart) || !Number.isFinite(dayPart)) {
+    return null;
+  }
+  return Date.UTC(yearPart, monthPart - 1, dayPart);
+};
+var diffDays = (left, right) => {
+  const leftUtc = parseDateKey(left);
+  const rightUtc = parseDateKey(right);
+  if (leftUtc === null || rightUtc === null) return null;
+  return Math.round((leftUtc - rightUtc) / (24 * 60 * 60 * 1e3));
+};
+var getSegmentMinutes = (isoString, timeZone, reportDate) => {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) return Number.NaN;
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23"
+  });
+  const parts = formatter.formatToParts(date).reduce((acc, part) => {
+    if (part.type !== "literal") {
+      acc[part.type] = part.value;
+    }
+    return acc;
+  }, {});
+  const dateKey = `${parts.year}-${parts.month}-${parts.day}`;
+  let minutes = Number(parts.hour) * 60 + Number(parts.minute);
+  const dayDelta = diffDays(dateKey, reportDate);
+  if (dayDelta === null) return Number.NaN;
+  minutes += dayDelta * 24 * 60;
+  return minutes;
+};
+var computeSegmentOffsetUtc = (segment, shift) => {
   const parsedMs = Date.parse(segment.start_time);
   if (Number.isNaN(parsedMs)) return null;
   const date = new Date(parsedMs);
   const segHour = date.getUTCHours();
   const segMinute = date.getUTCMinutes();
   const segMinutes = segHour * 60 + segMinute;
-  let shiftStartMinutes = shift.startHour * 60 + shift.startMinute;
+  const shiftStartMinutes = shift.startHour * 60 + shift.startMinute;
   let deltaMinutes = segMinutes - shiftStartMinutes;
   if (deltaMinutes < 0) deltaMinutes += 24 * 60;
   const offsetHours = deltaMinutes / 60;
   if (offsetHours < 0 || offsetHours > shift.slotCount) return null;
   return offsetHours;
 };
+var computeSegmentOffset = (segment, shift) => {
+  if (!segment?.start_time) return null;
+  if (shift.shiftDate && shift.timezone) {
+    const segmentMinutes = getSegmentMinutes(
+      segment.start_time,
+      shift.timezone,
+      shift.shiftDate
+    );
+    if (!Number.isFinite(segmentMinutes)) return null;
+    const shiftStartMinutes = shift.startHour * 60 + shift.startMinute;
+    const deltaMinutes = segmentMinutes - shiftStartMinutes;
+    const offsetHours = deltaMinutes / 60;
+    if (offsetHours < 0 || offsetHours > shift.slotCount) return null;
+    return offsetHours;
+  }
+  return computeSegmentOffsetUtc(segment, shift);
+};
 var resolveShiftWindow2 = (params) => {
   const startTime = parseTimeOfDay(params.shiftStart);
   if (!startTime) return null;
   return {
     startHour: startTime.hour,
     startMinute: startTime.minute,
-    slotCount: params.slotCount
+    slotCount: params.slotCount,
+    ...params.shiftDate ? { shiftDate: params.shiftDate } : {},
+    ...params.timezone ? { timezone: params.timezone } : {}
   };
 };
+var resolveTimelineEndOffset = ({
+  shiftStart,
+  shiftEnd,
+  slotCount,
+  shiftDate,
+  timezone,
+  now: now4
+}) => {
+  const normalizedSlotCount = Number.isFinite(slotCount) && slotCount > 0 ? slotCount : 0;
+  if (!shiftDate || !timezone) {
+    return normalizedSlotCount;
+  }
+  const shiftMinutes = getShiftDurationMinutes(shiftStart, shiftEnd);
+  const elapsedMinutes = getShiftElapsedMinutes({
+    shiftStart,
+    shiftEnd,
+    shiftDate,
+    timezone,
+    now: now4
+  });
+  if (shiftMinutes === null || elapsedMinutes === null) {
+    return normalizedSlotCount;
+  }
+  if (elapsedMinutes >= shiftMinutes) {
+    return normalizedSlotCount;
+  }
+  return Math.max(0, Math.min(elapsedMinutes / 60, normalizedSlotCount));
+};
+var formatSkuRailLabel = (label, segmentWidth, options = {}) => {
+  const horizontalPadding = options.horizontalPadding ?? 8;
+  const minVisibleChars = options.minVisibleChars ?? 4;
+  const averageCharacterWidth = options.averageCharacterWidth ?? 6.6;
+  const compactAverageCharacterWidth = options.compactAverageCharacterWidth ?? 5;
+  const cssTruncation = options.cssTruncation ?? false;
+  const fullLabelThreshold = 6;
+  if (!label) return null;
+  if (!Number.isFinite(segmentWidth) || segmentWidth <= horizontalPadding * 2) return null;
+  const usableWidth = Math.max(segmentWidth - horizontalPadding * 2, 0);
+  const maxChars = Math.floor(usableWidth / averageCharacterWidth);
+  if (maxChars >= Math.max(minVisibleChars, fullLabelThreshold)) {
+    if (label.length <= maxChars || cssTruncation) return label;
+    if (maxChars <= 1) return null;
+    return `${label.slice(0, Math.max(maxChars - 1, 1)).trimEnd()}\u2026`;
+  }
+  const compactLabel = buildCompactSkuRailLabel(label, Math.max(maxChars, 1));
+  const compactMaxChars = Math.floor(usableWidth / compactAverageCharacterWidth);
+  if (compactMaxChars < 1) return null;
+  if (compactLabel.length <= compactMaxChars || cssTruncation) return compactLabel;
+  if (compactMaxChars <= 2) {
+    return compactLabel.slice(0, compactMaxChars);
+  }
+  return `${compactLabel.slice(0, Math.max(compactMaxChars - 1, 1)).trimEnd()}\u2026`;
+};
+var buildCompactSkuRailLabel = (label, maxChars) => {
+  const words = label.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return label;
+  const [firstWord] = words;
+  const acronym = words.map((word) => word[0]).join("").toUpperCase();
+  if (maxChars <= 3 && acronym) {
+    return acronym;
+  }
+  if (firstWord.length >= 4) {
+    return firstWord;
+  }
+  return acronym || firstWord;
+};
 var HourlyOutputChartComponent = ({
   data,
   pphThreshold,
+  hourlyTargetOutput,
   shiftStart,
   shiftEnd,
   showIdleTime = false,
   idleTimeHourly,
+  shiftDate,
+  timezone,
   skuSegments,
   activeSkuId,
   className = ""
@@ -35241,6 +35606,7 @@ var HourlyOutputChartComponent = ({
   const containerRef = React144__namespace.default.useRef(null);
   const [containerReady, setContainerReady] = React144__namespace.default.useState(false);
   const [containerWidth, setContainerWidth] = React144__namespace.default.useState(0);
+  const [hoveredSkuRailLabel, setHoveredSkuRailLabel] = React144__namespace.default.useState(null);
   const idleSlots = React144__namespace.default.useMemo(
     () => buildHourlyIdleSlots({
       idleTimeHourly,
@@ -35386,14 +35752,54 @@ var HourlyOutputChartComponent = ({
   }, [containerWidth]);
   const shiftWindow = React144__namespace.default.useMemo(() => resolveShiftWindow2({
     shiftStart,
-    slotCount: SHIFT_DURATION
-  }), [shiftStart, shiftEnd, SHIFT_DURATION]);
+    slotCount: SHIFT_DURATION,
+    shiftDate,
+    timezone
+  }), [shiftStart, shiftEnd, SHIFT_DURATION, shiftDate, timezone]);
+  const fallbackTimelineEndOffset = React144__namespace.default.useMemo(
+    () => resolveTimelineEndOffset({
+      shiftStart,
+      shiftEnd,
+      slotCount: SHIFT_DURATION,
+      shiftDate,
+      timezone
+    }),
+    [shiftStart, shiftEnd, SHIFT_DURATION, shiftDate, timezone]
+  );
+  const observedTimelineEndOffset = React144__namespace.default.useMemo(() => {
+    let lastObservedMinute = -1;
+    idleSlots.forEach((slot) => {
+      slot.idleArray.forEach((value, minuteIndex) => {
+        if (value !== "x" && value !== null && value !== void 0) {
+          lastObservedMinute = Math.max(
+            lastObservedMinute,
+            slot.hourIndex * 60 + minuteIndex
+          );
+        }
+      });
+    });
+    if (lastObservedMinute < 0) return null;
+    return Math.min((lastObservedMinute + 1) / 60, SHIFT_DURATION);
+  }, [idleSlots, SHIFT_DURATION]);
+  const timelineEndOffset = observedTimelineEndOffset ?? fallbackTimelineEndOffset;
+  const targetLineEndOffset = React144__namespace.default.useMemo(() => {
+    if (timelineEndOffset >= SHIFT_DURATION) {
+      return SHIFT_DURATION;
+    }
+    if (Number.isInteger(timelineEndOffset)) {
+      return timelineEndOffset;
+    }
+    return Math.min(Math.floor(timelineEndOffset) + 1, SHIFT_DURATION);
+  }, [timelineEndOffset, SHIFT_DURATION]);
   const skuTimelineSegments = React144__namespace.default.useMemo(() => {
-    if (!skuSegments || skuSegments.length === 0 || !shiftWindow) return [];
-    const withOffsets = skuSegments.map((segment) => ({
-      segment,
-      offset: computeSegmentOffset(segment, shiftWindow) ?? 0
-    })).sort((a, b) => a.offset - b.offset);
+    if (!skuSegments || skuSegments.length === 0 || !shiftWindow || timelineEndOffset <= 0) {
+      return [];
+    }
+    const withOffsets = skuSegments.flatMap((segment) => {
+      const offset = computeSegmentOffset(segment, shiftWindow);
+      if (offset === null) return [];
+      return [{ segment, offset }];
+    }).sort((a, b) => a.offset - b.offset);
     if (withOffsets.length === 0) return [];
     const deduped = [];
     const DUPLICATE_OFFSET_THRESHOLD = 1 / 60;
@@ -35407,9 +35813,9 @@ var HourlyOutputChartComponent = ({
       deduped[0] = { ...deduped[0], offset: 0 };
     }
     return deduped.map((entry, index) => {
-      const nextOffset = index < deduped.length - 1 ? deduped[index + 1].offset : SHIFT_DURATION;
-      const start = Math.max(0, Math.min(entry.offset, SHIFT_DURATION));
-      const end = Math.max(start, Math.min(nextOffset, SHIFT_DURATION));
+      const nextOffset = index < deduped.length - 1 ? deduped[index + 1].offset : timelineEndOffset;
+      const start = Math.max(0, Math.min(entry.offset, timelineEndOffset));
+      const end = Math.max(start, Math.min(nextOffset, timelineEndOffset));
       return {
         skuId: entry.segment.sku_id,
         label: entry.segment.sku_code,
@@ -35418,15 +35824,66 @@ var HourlyOutputChartComponent = ({
         pphThreshold: entry.segment.pph_threshold ?? pphThreshold
       };
     }).filter((segment) => segment.end > segment.start);
-  }, [skuSegments, shiftWindow, SHIFT_DURATION, pphThreshold]);
+  }, [skuSegments, shiftWindow, timelineEndOffset, pphThreshold]);
+  const targetTimelineSegments = React144__namespace.default.useMemo(() => {
+    if (skuTimelineSegments.length === 0) return [];
+    return skuTimelineSegments.map((segment, index) => ({
+      ...segment,
+      end: index === skuTimelineSegments.length - 1 ? Math.max(segment.start, targetLineEndOffset) : segment.end
+    })).filter((segment) => segment.end > segment.start);
+  }, [skuTimelineSegments, targetLineEndOffset]);
+  const hasHourlyTargetOutputProp = React144__namespace.default.useMemo(
+    () => hourlyTargetOutput !== void 0,
+    [hourlyTargetOutput]
+  );
+  const hasExplicitHourlyTargets = React144__namespace.default.useMemo(
+    () => Array.isArray(hourlyTargetOutput) && hourlyTargetOutput.some((value) => value !== null && value !== void 0),
+    [hourlyTargetOutput]
+  );
+  const hourlyTargetSegments = React144__namespace.default.useMemo(() => {
+    if (!hasExplicitHourlyTargets) return [];
+    const segments = [];
+    let runStart = null;
+    let runValue = null;
+    const flush = (endIndex) => {
+      if (runStart === null || runValue === null) return;
+      segments.push({ start: runStart, end: endIndex, value: runValue });
+      runStart = null;
+      runValue = null;
+    };
+    for (let i = 0; i < SHIFT_DURATION; i += 1) {
+      const rawValue = Array.isArray(hourlyTargetOutput) ? hourlyTargetOutput[i] : null;
+      const value = rawValue === null || rawValue === void 0 ? null : Number(rawValue);
+      if (value === null || !Number.isFinite(value)) {
+        flush(i);
+        continue;
+      }
+      if (runStart === null || runValue === null) {
+        runStart = i;
+        runValue = value;
+        continue;
+      }
+      if (Math.abs(runValue - value) > 1e-6) {
+        flush(i);
+        runStart = i;
+        runValue = value;
+      }
+    }
+    flush(SHIFT_DURATION);
+    return segments.filter((segment) => segment.end > segment.start);
+  }, [SHIFT_DURATION, hasExplicitHourlyTargets, hourlyTargetOutput]);
   const activeSkuHourIndices = React144__namespace.default.useMemo(() => {
     const indices = /* @__PURE__ */ new Set();
     const targets = Array(SHIFT_DURATION).fill(pphThreshold);
-    if (!skuSegments || !shiftWindow) return { indices, targets };
-    const segmentsWithOffsets = skuSegments.map((seg) => ({
-      ...seg,
-      offset: computeSegmentOffset(seg, shiftWindow) || 0
-    })).sort((a, b) => a.offset - b.offset);
+    if (!skuSegments || !shiftWindow) return { indices, targets, hasTimeline: false };
+    const segmentsWithOffsets = skuSegments.flatMap((segment) => {
+      const offset = computeSegmentOffset(segment, shiftWindow);
+      if (offset === null) return [];
+      return [{ ...segment, offset }];
+    }).sort((a, b) => a.offset - b.offset);
+    if (segmentsWithOffsets.length === 0) {
+      return { indices, targets, hasTimeline: false };
+    }
     for (let i = 0; i < SHIFT_DURATION; i++) {
       const midpoint = i + 0.5;
       let activeSeg = segmentsWithOffsets[0];
@@ -35446,13 +35903,15 @@ var HourlyOutputChartComponent = ({
         }
       }
     }
-    return { indices, targets };
+    return { indices, targets, hasTimeline: true };
   }, [skuSegments, activeSkuId, shiftWindow, SHIFT_DURATION, pphThreshold]);
   const chartData = React144__namespace.default.useMemo(() => {
-    const { indices, targets } = activeSkuHourIndices;
+    const { indices, targets, hasTimeline } = activeSkuHourIndices;
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
       const idleSlot = idleSlots[i];
-      const currentTarget = targets[i] || pphThreshold;
+      const explicitTarget = hasHourlyTargetOutputProp ? hourlyTargetOutput?.[i] ?? null : void 0;
+      const currentTarget = hasHourlyTargetOutputProp ? explicitTarget : targets[i] || pphThreshold;
+      const comparisonTarget = currentTarget === null || currentTarget === void 0 ? targets[i] || pphThreshold : currentTarget;
       return {
         hourIndex: idleSlot?.hourIndex ?? i,
         hour: idleSlot?.hour || "",
@@ -35460,16 +35919,16 @@ var HourlyOutputChartComponent = ({
         output: animatedData[i] || 0,
         originalOutput: data[i] || 0,
         // Keep original data for labels
-        target: currentTarget,
-        color: (animatedData[i] || 0) >= Math.round(currentTarget) ? "#00AB45" : "#E34329",
+        target: currentTarget ?? null,
+        color: (animatedData[i] || 0) >= comparisonTarget ? "#00AB45" : "#E34329",
         idleMinutes: idleSlot?.idleMinutes || 0,
         idleArray: idleSlot?.idleArray || [],
         skuIndex: i,
         isHighlighted: indices.has(i),
-        isDimmed: !!activeSkuId && !indices.has(i)
+        isDimmed: hasTimeline && !!activeSkuId && !indices.has(i)
       };
     });
-  }, [animatedData, data, pphThreshold, idleSlots, SHIFT_DURATION, activeSkuHourIndices, activeSkuId]);
+  }, [animatedData, data, pphThreshold, idleSlots, SHIFT_DURATION, activeSkuHourIndices, activeSkuId, hourlyTargetOutput, hasHourlyTargetOutputProp]);
   const renderSkuTimelineRail = React144__namespace.default.useCallback((props) => {
     if (!skuTimelineSegments.length || SHIFT_DURATION <= 0) return null;
     const offset = props?.offset;
@@ -35481,8 +35940,9 @@ var HourlyOutputChartComponent = ({
     const railHeight = 3;
     const railY = top - 10;
     const baselineY = railY + railHeight / 2;
-    const labelYHigh = railY - 20;
-    const labelYLow = railY - 6;
+    const showHoverLabel = (label, centerX, rY) => {
+      setHoveredSkuRailLabel({ label, centerX, railY: rY });
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "line",
@@ -35500,9 +35960,43 @@ var HourlyOutputChartComponent = ({
         const xStart = left + segment.start / SHIFT_DURATION * width;
         const xEnd = left + segment.end / SHIFT_DURATION * width;
         const segmentWidth = Math.max(1, xEnd - xStart);
+        const labelPadding = segmentWidth < 48 ? 4 : 8;
+        const inlineLabelText = formatSkuRailLabel(segment.label, segmentWidth, {
+          horizontalPadding: labelPadding,
+          cssTruncation: true
+        });
+        const badgeLabelText = formatSkuRailLabel(segment.label, 28, {
+          horizontalPadding: 4,
+          cssTruncation: true
+        });
+        const isMicroSegment = segmentWidth < 18;
+        const labelText = isMicroSegment ? badgeLabelText : inlineLabelText;
+        const labelClipWidth = Math.max(segmentWidth - labelPadding * 2, 0);
         const isActive = !!activeSkuId && segment.skuId === activeSkuId;
         const isDimmed = !!activeSkuId && segment.skuId !== activeSkuId;
+        const hoverHitWidth = Math.max(segmentWidth + 12, isMicroSegment ? 20 : segmentWidth);
+        const hoverHitX = Math.max(
+          left,
+          Math.min(xStart - (hoverHitWidth - segmentWidth) / 2, left + width - hoverHitWidth)
+        );
+        const hoverHitHeight = isMicroSegment ? 34 : 28;
+        const hoverHitY = railY - (isMicroSegment ? 30 : 24);
+        const microBadgeWidth = labelText ? Math.max(labelText.length * 6.2 + 10, 18) : 0;
+        const microBadgeX = xStart + segmentWidth / 2 - microBadgeWidth / 2;
+        const microBadgeY = railY - 24;
         return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: hoverHitX,
+              y: hoverHitY,
+              width: hoverHitWidth,
+              height: hoverHitHeight,
+              fill: "transparent",
+              onMouseEnter: () => showHoverLabel(segment.label, xStart + segmentWidth / 2, railY),
+              onMouseLeave: () => setHoveredSkuRailLabel((current) => current?.label === segment.label ? null : current)
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
@@ -35513,7 +36007,7 @@ var HourlyOutputChartComponent = ({
               rx: 1.5,
               fill: isActive ? "#3b82f6" : "#cbd5e1",
               opacity: isDimmed ? 0.3 : 1,
-              style: { transition: "all 0.3s ease" }
+              style: { transition: "all 0.3s ease", pointerEvents: "none" }
             }
           ),
           index > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -35525,22 +36019,59 @@ var HourlyOutputChartComponent = ({
               y2: railY + railHeight + 3,
               stroke: "#94a3b8",
               strokeWidth: 1,
-              opacity: 0.6
+              opacity: 0.6,
+              style: { pointerEvents: "none" }
             }
           ),
-          segmentWidth >= 36 && /* @__PURE__ */ jsxRuntime.jsx(
-            "text",
+          isMicroSegment && labelText && /* @__PURE__ */ jsxRuntime.jsxs("g", { style: { pointerEvents: "none" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: microBadgeX,
+                y: microBadgeY,
+                width: microBadgeWidth,
+                height: 14,
+                rx: 7,
+                fill: "white",
+                stroke: isActive ? "#3b82f6" : "#cbd5e1",
+                strokeWidth: 1,
+                opacity: isDimmed ? 0.55 : 0.98
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: xStart + segmentWidth / 2,
+                y: microBadgeY + 10,
+                textAnchor: "middle",
+                fontSize: 8,
+                fontWeight: 700,
+                fill: isActive ? "#2563eb" : "#64748b",
+                opacity: isDimmed ? 0.55 : 1,
+                style: { transition: "all 0.3s ease" },
+                children: labelText
+              }
+            )
+          ] }),
+          !isMicroSegment && labelText && labelClipWidth > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "foreignObject",
             {
-              x: xStart + segmentWidth / 2,
-              y: index % 2 === 0 ? labelYHigh : labelYLow,
-              textAnchor: "middle",
-              fontSize: 10,
-              fontWeight: 700,
-              letterSpacing: "0.02em",
-              fill: isActive ? "#2563eb" : "#64748b",
-              opacity: isDimmed ? 0.4 : 1,
-              style: { transition: "all 0.3s ease", pointerEvents: "none" },
-              children: segment.label
+              x: xStart + labelPadding,
+              y: railY - 24,
+              width: labelClipWidth,
+              height: 18,
+              style: { pointerEvents: "none", overflow: "visible" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `w-full h-full flex items-center justify-center text-[10px] font-bold tracking-[0.02em] truncate pt-0.5 ${isActive ? "text-blue-600" : "text-slate-500"}`,
+                  style: {
+                    opacity: isDimmed ? 0.4 : 1,
+                    transition: "all 0.3s ease"
+                  },
+                  children: labelText
+                }
+              )
             }
           )
         ] }, `sku-rail-${segment.skuId}-${segment.start}-${index}`);
@@ -35598,14 +36129,17 @@ var HourlyOutputChartComponent = ({
     );
   }, [idleBarState.visible, idleBarState.key, idleBarState.shouldAnimate]);
   const maxDataValue = Math.max(...data, 0);
-  const maxTargetValue = Math.max(...chartData.map((d) => d.target), pphThreshold, 0);
+  const numericChartTargets = chartData.map((d) => d.target).filter((target) => target !== null && Number.isFinite(target));
+  const maxTargetValue = Math.max(...numericChartTargets, pphThreshold, 0);
   const maxYValue = Math.max(
     Math.ceil(maxTargetValue * 1.5),
     Math.ceil(maxDataValue * 1.15)
     // Add 15% headroom above max value
   );
   const generateYAxisTicks = () => {
-    const uniqueTargets = [...new Set(chartData.map((d) => Math.round(d.target)))].sort((a, b) => a - b);
+    const uniqueTargets = [...new Set(
+      chartData.map((d) => d.target).filter((target) => target !== null && Number.isFinite(target)).map((target) => Math.round(target))
+    )].sort((a, b) => a - b);
     const rawTicks = [0];
     uniqueTargets.forEach((target) => {
       if (target > 0) {
@@ -35640,14 +36174,54 @@ var HourlyOutputChartComponent = ({
   };
   const renderTargetLine = React144__namespace.default.useCallback((props) => {
     const { offset, yAxisMap } = props;
-    if (!offset || !yAxisMap || SHIFT_DURATION <= 0) return null;
+    if (!offset || !yAxisMap || SHIFT_DURATION <= 0 || targetLineEndOffset <= 0) return null;
     const { left, width } = offset;
     const yAxis = yAxisMap["default"] || yAxisMap[0];
     if (!yAxis || !yAxis.scale) return null;
     const lines = [];
     const offsetToX = (o) => left + o / SHIFT_DURATION * width;
-    if (skuTimelineSegments.length > 0) {
-      skuTimelineSegments.forEach((segment, index) => {
+    if (hasHourlyTargetOutputProp && hourlyTargetSegments.length > 0) {
+      hourlyTargetSegments.forEach((segment, index) => {
+        const y = yAxis.scale(segment.value);
+        const xStart = offsetToX(segment.start);
+        const xEnd = offsetToX(segment.end);
+        lines.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: xStart,
+              y1: y,
+              x2: xEnd,
+              y2: y,
+              stroke: "#E34329",
+              strokeDasharray: "3 3",
+              strokeWidth: 2
+            },
+            `target-hourly-h-${index}`
+          )
+        );
+        const next = hourlyTargetSegments[index + 1];
+        if (next && Math.abs(next.value - segment.value) > 1e-6) {
+          const nextY = yAxis.scale(next.value);
+          lines.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: xEnd,
+                y1: y,
+                x2: xEnd,
+                y2: nextY,
+                stroke: "#E34329",
+                strokeDasharray: "3 3",
+                strokeWidth: 2
+              },
+              `target-hourly-v-${index}`
+            )
+          );
+        }
+      });
+    } else if (!hasHourlyTargetOutputProp && targetTimelineSegments.length > 0) {
+      targetTimelineSegments.forEach((segment, index) => {
         const target = segment.pphThreshold || pphThreshold;
         const y = yAxis.scale(target);
         const xStart = offsetToX(segment.start);
@@ -35667,7 +36241,7 @@ var HourlyOutputChartComponent = ({
             `target-h-${index}`
           )
         );
-        const next = skuTimelineSegments[index + 1];
+        const next = targetTimelineSegments[index + 1];
         if (next) {
           const nextTarget = next.pphThreshold || pphThreshold;
           if (nextTarget !== target) {
@@ -35690,7 +36264,7 @@ var HourlyOutputChartComponent = ({
           }
         }
       });
-    } else {
+    } else if (!hasHourlyTargetOutputProp) {
       const y = yAxis.scale(pphThreshold);
       lines.push(
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -35709,10 +36283,13 @@ var HourlyOutputChartComponent = ({
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsx("g", { children: lines });
-  }, [skuTimelineSegments, SHIFT_DURATION, pphThreshold]);
+  }, [hourlyTargetSegments, targetTimelineSegments, SHIFT_DURATION, pphThreshold, targetLineEndOffset, hasHourlyTargetOutputProp]);
   const renderLegend = () => {
-    const uniqueTargets = [...new Set(chartData.map((d) => Math.round(d.target)))].sort((a, b) => a - b);
-    const targetText = uniqueTargets.length === 1 ? `Target: ${uniqueTargets[0]} units/hr` : `Target: ${uniqueTargets[0]} - ${uniqueTargets[uniqueTargets.length - 1]} units/hr`;
+    const uniqueTargets = [...new Set(
+      chartData.map((d) => d.target).filter((target) => target !== null && Number.isFinite(target)).map((target) => Math.round(target))
+    )].sort((a, b) => a - b);
+    const unitLabel = hasHourlyTargetOutputProp ? "units" : "units/hr";
+    const targetText = uniqueTargets.length === 0 ? `Target` : uniqueTargets.length === 1 ? `Target: ${uniqueTargets[0]} ${unitLabel}` : `Target: ${uniqueTargets[0]} - ${uniqueTargets[uniqueTargets.length - 1]} ${unitLabel}`;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 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.jsx("span", { children: targetText })
@@ -35725,254 +36302,274 @@ var HourlyOutputChartComponent = ({
       className: `w-full h-full min-w-0 flex flex-col ${className}`,
       style: { minHeight: "200px", minWidth: 0 },
       children: [
-        containerReady ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          recharts.BarChart,
-          {
-            data: chartData,
-            margin: {
-              // Reserve headroom for the SKU timeline rail + staggered
-              // labels only when SKU segments are rendered. Non-SKU charts
-              // keep the original 10px top so recharts has enough vertical
-              // space to show the target (pph) tick label on the Y-axis.
-              top: skuTimelineSegments.length > 0 ? 40 : 10,
-              right: 10,
-              bottom: 10,
-              left: 6
-            },
-            barCategoryGap: "25%",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.XAxis,
-                {
-                  xAxisId: "default",
-                  dataKey: "hour",
-                  tick: { fontSize: xAxisConfig.tickFont },
-                  interval: xAxisConfig.interval,
-                  angle: xAxisConfig.angle,
-                  textAnchor: "end",
-                  tickMargin: xAxisConfig.tickMargin,
-                  height: xAxisConfig.height
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.XAxis,
-                {
-                  xAxisId: "sku",
-                  type: "number",
-                  dataKey: "skuIndex",
-                  domain: [0, Math.max(SHIFT_DURATION, 0)],
-                  hide: true,
-                  allowDataOverflow: true
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.YAxis,
-                {
-                  yAxisId: "default",
-                  tickMargin: 8,
-                  width: 48,
-                  domain: [0, maxYValue],
-                  ticks: generateYAxisTicks(),
-                  tickFormatter: (value) => value,
-                  tick: (props) => {
-                    const { x, y, payload } = props;
-                    return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "text",
-                      {
-                        x: -2,
-                        y: 0,
-                        dy: 4,
-                        textAnchor: "end",
-                        fill: "#666",
-                        fontSize: 12,
-                        children: payload.value
-                      },
-                      `tick-${payload.value}-${x}-${y}`
-                    ) });
+        containerReady ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-h-0 relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            recharts.BarChart,
+            {
+              data: chartData,
+              margin: {
+                // Reserve headroom for the SKU timeline rail + staggered
+                // labels only when SKU segments are rendered. Non-SKU charts
+                // keep the original 10px top so recharts has enough vertical
+                // space to show the target (pph) tick label on the Y-axis.
+                top: skuTimelineSegments.length > 0 ? 40 : 10,
+                right: 10,
+                bottom: 10,
+                left: 6
+              },
+              barCategoryGap: "25%",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.XAxis,
+                  {
+                    xAxisId: "default",
+                    dataKey: "hour",
+                    tick: { fontSize: xAxisConfig.tickFont },
+                    interval: xAxisConfig.interval,
+                    angle: xAxisConfig.angle,
+                    textAnchor: "end",
+                    tickMargin: xAxisConfig.tickMargin,
+                    height: xAxisConfig.height
                   }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "idle", domain: [0, 60], hide: true }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Tooltip,
-                {
-                  cursor: false,
-                  contentStyle: {
-                    backgroundColor: "white",
-                    border: "none",
-                    borderRadius: "12px",
-                    boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-                    padding: "0",
-                    fontSize: "14px"
-                  },
-                  content: (props) => {
-                    if (!props.active || !props.payload || props.payload.length === 0)
-                      return null;
-                    const data2 = props.payload[0].payload;
-                    const idlePeriods = showIdleTime ? getHourlyIdlePeriods({
-                      idleArray: data2.idleArray,
-                      shiftStart,
-                      hourIndex: Number.isFinite(data2.hourIndex) ? data2.hourIndex : 0
-                    }) : [];
-                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-xl border border-gray-100 p-4 min-w-[220px]", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-gray-900 text-sm", children: data2.timeRange }) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Output" }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900 text-sm", children: [
-                            Math.round(data2.output),
-                            " units"
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Target" }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-600 text-sm", children: [
-                            Math.round(data2.target),
-                            " units"
-                          ] })
-                        ] }),
-                        showIdleTime && data2.idleMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-100 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Idle Time" }),
-                            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-orange-600 text-sm", children: [
-                              data2.idleMinutes,
-                              " minutes"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.XAxis,
+                  {
+                    xAxisId: "sku",
+                    type: "number",
+                    dataKey: "skuIndex",
+                    domain: [0, Math.max(SHIFT_DURATION, 0)],
+                    hide: true,
+                    allowDataOverflow: true
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.YAxis,
+                  {
+                    yAxisId: "default",
+                    tickMargin: 8,
+                    width: 48,
+                    domain: [0, maxYValue],
+                    ticks: generateYAxisTicks(),
+                    tickFormatter: (value) => value,
+                    tick: (props) => {
+                      const { x, y, payload } = props;
+                      return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "text",
+                        {
+                          x: -2,
+                          y: 0,
+                          dy: 4,
+                          textAnchor: "end",
+                          fill: "#666",
+                          fontSize: 12,
+                          children: payload.value
+                        },
+                        `tick-${payload.value}-${x}-${y}`
+                      ) });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "idle", domain: [0, 60], hide: true }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Tooltip,
+                  {
+                    cursor: { fill: "#f1f5f9" },
+                    contentStyle: { backgroundColor: "transparent", border: "none", padding: 0 },
+                    content: (props) => {
+                      if (!props.active || !props.payload || props.payload.length === 0)
+                        return null;
+                      const data2 = props.payload[0].payload;
+                      const idlePeriods = showIdleTime ? getHourlyIdlePeriods({
+                        idleArray: data2.idleArray,
+                        shiftStart,
+                        hourIndex: Number.isFinite(data2.hourIndex) ? data2.hourIndex : 0
+                      }) : [];
+                      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/95 backdrop-blur-md border border-slate-200/60 shadow-xl shadow-slate-200/40 rounded-xl p-4 min-w-[240px] text-slate-700", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-4 pb-3 border-b border-slate-100", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-slate-900 text-sm tracking-tight", children: data2.timeRange }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Output" }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-slate-900 text-sm", children: [
+                              Math.round(data2.output),
+                              " ",
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400 font-normal text-xs ml-0.5", children: "units" })
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Target" }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-slate-700 text-sm", children: [
+                              Math.round(data2.target),
+                              " ",
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400 font-normal text-xs ml-0.5", children: "units" })
+                            ] })
+                          ] }),
+                          showIdleTime && data2.idleMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-3 mt-3 border-t border-slate-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-slate-500 font-medium tracking-wide", children: "Idle Time" }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-orange-600 text-sm flex items-center gap-1.5", children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-orange-500 shadow-[0_0_6px_rgba(249,115,22,0.6)] animate-pulse" }),
+                                data2.idleMinutes,
+                                " ",
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-orange-500/70 font-normal text-xs ml-0.5", children: "min" })
+                              ] })
+                            ] }) }),
+                            idlePeriods.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-slate-50/80 rounded-lg p-3 border border-slate-100/50", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-slate-400 text-[10px] mb-2.5 uppercase tracking-wider", children: "Idle Periods" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2.5 max-h-32 overflow-y-auto pr-1 custom-scrollbar", children: idlePeriods.map((period, index) => {
+                                return /* @__PURE__ */ jsxRuntime.jsxs(
+                                  "div",
+                                  {
+                                    className: "flex items-start gap-2.5 text-xs",
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[5px] w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0 shadow-[0_0_4px_rgba(251,146,60,0.5)]" }),
+                                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-700 font-medium tracking-tight", children: period.duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                        period.startTime,
+                                        " ",
+                                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-slate-400 font-normal ml-1", children: [
+                                          "(",
+                                          period.duration,
+                                          "m)"
+                                        ] })
+                                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                        period.startTime,
+                                        " ",
+                                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400 mx-0.5", children: "\u2192" }),
+                                        " ",
+                                        period.endTime,
+                                        " ",
+                                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-slate-400 font-normal ml-1", children: [
+                                          "(",
+                                          period.duration,
+                                          "m)"
+                                        ] })
+                                      ] }) })
+                                    ]
+                                  },
+                                  index
+                                );
+                              }) })
                             ] })
-                          ] }) }),
-                          idlePeriods.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-gray-50 rounded-lg p-2.5", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-700 text-xs mb-2", children: "Idle periods:" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idlePeriods.map((period, index) => {
-                              return /* @__PURE__ */ jsxRuntime.jsxs(
-                                "div",
-                                {
-                                  className: "text-gray-600 flex items-center gap-2 text-xs",
-                                  children: [
-                                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
-                                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: period.duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                      period.startTime,
-                                      " (",
-                                      period.duration,
-                                      " min)"
-                                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                      period.startTime,
-                                      " -",
-                                      " ",
-                                      period.endTime,
-                                      " (",
-                                      period.duration,
-                                      " mins)"
-                                    ] }) })
-                                  ]
-                                },
-                                index
-                              );
-                            }) })
                           ] })
                         ] })
-                      ] })
-                    ] });
-                  },
-                  animationDuration: 200
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Customized, { component: renderTargetLine }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Customized, { component: renderSkuTimelineRail }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                recharts.Bar,
-                {
-                  xAxisId: "default",
-                  dataKey: "output",
-                  yAxisId: "default",
-                  maxBarSize: 35,
-                  radius: [10, 10, 0, 0],
-                  isAnimationActive: false,
-                  children: [
-                    chartData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Cell,
-                      {
-                        fill: entry.color,
-                        stroke: "transparent",
-                        strokeWidth: 0,
-                        style: {
-                          filter: entry.isHighlighted ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)" : "brightness(1)",
-                          transform: entry.isHighlighted ? "translateY(-4px)" : "translateY(0)",
-                          opacity: entry.isDimmed ? 0.4 : 1,
-                          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-                          cursor: "pointer"
-                        },
-                        onMouseEnter: (e) => {
-                          const target = e.target;
-                          target.style.filter = "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)";
-                          target.style.transform = "translateY(-4px)";
-                          target.style.opacity = "1";
+                      ] });
+                    },
+                    animationDuration: 200
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(recharts.Customized, { component: renderTargetLine }),
+                /* @__PURE__ */ jsxRuntime.jsx(recharts.Customized, { component: renderSkuTimelineRail }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  recharts.Bar,
+                  {
+                    xAxisId: "default",
+                    dataKey: "output",
+                    yAxisId: "default",
+                    maxBarSize: 35,
+                    radius: [10, 10, 0, 0],
+                    isAnimationActive: false,
+                    children: [
+                      chartData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                        recharts.Cell,
+                        {
+                          fill: entry.color,
+                          stroke: "transparent",
+                          strokeWidth: 0,
+                          style: {
+                            filter: entry.isHighlighted ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)" : "brightness(1)",
+                            transform: entry.isHighlighted ? "translateY(-4px)" : "translateY(0)",
+                            opacity: entry.isDimmed ? 0.4 : 1,
+                            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                            cursor: "pointer"
+                          },
+                          onMouseEnter: (e) => {
+                            const target = e.target;
+                            target.style.filter = "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)";
+                            target.style.transform = "translateY(-4px)";
+                            target.style.opacity = "1";
+                          },
+                          onMouseLeave: (e) => {
+                            const target = e.target;
+                            target.style.filter = entry.isHighlighted ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)" : "brightness(1)";
+                            target.style.transform = entry.isHighlighted ? "translateY(-4px)" : "translateY(0)";
+                            target.style.opacity = entry.isDimmed ? "0.4" : "1";
+                          }
                         },
-                        onMouseLeave: (e) => {
-                          const target = e.target;
-                          target.style.filter = entry.isHighlighted ? "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) brightness(1.05)" : "brightness(1)";
-                          target.style.transform = entry.isHighlighted ? "translateY(-4px)" : "translateY(0)";
-                          target.style.opacity = entry.isDimmed ? "0.4" : "1";
+                        `cell-${index}`
+                      )),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        recharts.LabelList,
+                        {
+                          dataKey: "originalOutput",
+                          position: "top",
+                          content: (props) => {
+                            const { x, y, width, value, payload } = props;
+                            const actualValue = payload?.originalOutput || value;
+                            if (!actualValue || actualValue === 0) return null;
+                            return /* @__PURE__ */ jsxRuntime.jsx(
+                              "text",
+                              {
+                                x: x + width / 2,
+                                y: y - 8,
+                                textAnchor: "middle",
+                                fontSize: "12",
+                                fontWeight: "600",
+                                fill: "#374151",
+                                style: {
+                                  opacity: 1,
+                                  pointerEvents: "none",
+                                  transition: "none"
+                                },
+                                children: Math.round(actualValue)
+                              }
+                            );
+                          }
                         }
-                      },
-                      `cell-${index}`
-                    )),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.LabelList,
-                      {
-                        dataKey: "originalOutput",
-                        position: "top",
-                        content: (props) => {
-                          const { x, y, width, value, payload } = props;
-                          const actualValue = payload?.originalOutput || value;
-                          if (!actualValue || actualValue === 0) return null;
-                          return /* @__PURE__ */ jsxRuntime.jsx(
-                            "text",
-                            {
-                              x: x + width / 2,
-                              y: y - 8,
-                              textAnchor: "middle",
-                              fontSize: "12",
-                              fontWeight: "600",
-                              fill: "#374151",
-                              style: {
-                                opacity: 1,
-                                pointerEvents: "none",
-                                transition: "none"
-                              },
-                              children: Math.round(actualValue)
-                            }
-                          );
+                      )
+                    ]
+                  }
+                ),
+                IdleBar,
+                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "pattern",
+                  {
+                    id: "idlePattern",
+                    patternUnits: "userSpaceOnUse",
+                    width: "4",
+                    height: "4",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "4", height: "4", fill: "#4b5563", opacity: "0.6" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          d: "M 0,4 l 4,-4 M -1,1 l 2,-2 M 3,5 l 2,-2",
+                          stroke: "#374151",
+                          strokeWidth: "0.8",
+                          opacity: "0.8"
                         }
-                      }
-                    )
-                  ]
-                }
-              ),
-              IdleBar,
-              /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                "pattern",
-                {
-                  id: "idlePattern",
-                  patternUnits: "userSpaceOnUse",
-                  width: "4",
-                  height: "4",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "4", height: "4", fill: "#4b5563", opacity: "0.6" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        d: "M 0,4 l 4,-4 M -1,1 l 2,-2 M 3,5 l 2,-2",
-                        stroke: "#374151",
-                        strokeWidth: "0.8",
-                        opacity: "0.8"
-                      }
-                    )
-                  ]
-                }
-              ) })
-            ]
-          }
-        ) }) }) : /* @__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..." }) }),
+                      )
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ) }),
+          hoveredSkuRailLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute z-50 pointer-events-none transform -translate-x-1/2 -translate-y-full transition-opacity duration-200",
+              style: {
+                left: hoveredSkuRailLabel.centerX,
+                top: hoveredSkuRailLabel.railY - 12
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/95 backdrop-blur-md border border-slate-200/80 shadow-xl shadow-slate-200/50 rounded-lg px-3 py-2 flex flex-col min-w-[100px] max-w-[280px]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tracking-wider text-blue-500 uppercase leading-none mb-1", children: "SKU" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-semibold text-slate-800 whitespace-normal break-words leading-snug", children: hoveredSkuRailLabel.label })
+              ] })
+            }
+          )
+        ] }) : /* @__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..." }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none pt-2", children: renderLegend() })
       ]
     }
@@ -35990,6 +36587,16 @@ var HourlyOutputChart = React144__namespace.default.memo(
     if (!prevProps.data.every((val, idx) => val === nextProps.data[idx])) {
       return false;
     }
+    const prevHourlyTargets = prevProps.hourlyTargetOutput || [];
+    const nextHourlyTargets = nextProps.hourlyTargetOutput || [];
+    if (prevHourlyTargets.length !== nextHourlyTargets.length) {
+      return false;
+    }
+    for (let i = 0; i < prevHourlyTargets.length; i += 1) {
+      if (prevHourlyTargets[i] !== nextHourlyTargets[i]) {
+        return false;
+      }
+    }
     const prevIdle = prevProps.idleTimeHourly || {};
     const nextIdle = nextProps.idleTimeHourly || {};
     const prevKeys = Object.keys(prevIdle);
@@ -36177,7 +36784,6 @@ var VideoCard = React144__namespace.default.memo(({
   shouldPlay,
   onClick,
   onFatalError,
-  isVeryLowEfficiency = false,
   legend,
   cropping,
   canvasFps = 30,
@@ -36249,11 +36855,6 @@ var VideoCard = React144__namespace.default.memo(({
         }
       },
       children: [
-        isVeryLowEfficiency && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute ${compact ? "top-0.5 left-1" : "top-1 left-2"} z-30`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-1 bg-red-400/50 rounded-full blur-sm animate-pulse" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-0.5 bg-red-500/30 rounded-full blur-md animate-ping [animation-duration:1.5s]" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `bg-[#E34329] ${compact ? "w-4 h-4" : "w-5 h-5"} rounded-full flex items-center justify-center text-white font-bold ${compact ? "text-[10px]" : "text-xs"} shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse`, children: "!" })
-        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
@@ -36663,7 +37264,6 @@ var VideoGridView = React144__namespace.default.memo(({
       const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
       const workspaceKey = `${workspace.line_id || "unknown"}-${workspaceId}`;
       const isVisible = visibleWorkspaces.has(workspaceId);
-      const isVeryLowEfficiency = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
       const workspaceCropping = getWorkspaceCropping(workspaceId, workspace.workspace_name);
       const workspaceStream = videoStreamsByWorkspaceId?.[workspaceId];
       const lastSeenLabel = workspace.workspace_uuid ? lastSeenByWorkspaceId[workspace.workspace_uuid]?.timeSinceLastUpdate : void 0;
@@ -36680,7 +37280,6 @@ var VideoGridView = React144__namespace.default.memo(({
         workspaceId,
         workspaceKey,
         isVisible,
-        isVeryLowEfficiency,
         workspaceCropping,
         fallbackUrl,
         hlsUrl,
@@ -36728,7 +37327,6 @@ var VideoGridView = React144__namespace.default.memo(({
             isR2Stream: card.isR2Stream,
             fallbackUrl: card.fallbackUrl
           }),
-          isVeryLowEfficiency: card.isVeryLowEfficiency,
           legend: effectiveLegend,
           cropping: card.workspaceCropping,
           canvasFps: effectiveCanvasFps,
@@ -37648,223 +38246,6 @@ var UptimeLineChartComponent = ({ points, className = "" }) => {
   ] }) }) });
 };
 var UptimeLineChart = React144__namespace.default.memo(UptimeLineChartComponent);
-var padTime = (value) => value.toString().padStart(2, "0");
-var parseTime = (timeValue) => {
-  if (!timeValue) return null;
-  const [hourPart, minutePart] = timeValue.split(":");
-  const hour = Number.parseInt(hourPart, 10);
-  const minute = Number.parseInt(minutePart ?? "0", 10);
-  if (!Number.isFinite(hour) || !Number.isFinite(minute)) return null;
-  return { hour, minute };
-};
-var normalizeIdleTimeHourly = (idleTimeHourly) => {
-  if (!idleTimeHourly || typeof idleTimeHourly !== "object") {
-    return {};
-  }
-  return Object.fromEntries(
-    Object.entries(idleTimeHourly).map(([key, value]) => {
-      if (Array.isArray(value)) return [key, value];
-      if (value && Array.isArray(value.values)) {
-        return [key, value.values];
-      }
-      return [key, []];
-    })
-  );
-};
-var interpretIdleValue = (value) => {
-  if (value === 1 || value === "1") return "idle";
-  if (value === 0 || value === "0") return "active";
-  if (value === "x" || value === null || value === void 0) return "unknown";
-  return "unknown";
-};
-var getShiftDurationMinutes = (shiftStart, shiftEnd) => {
-  const start = parseTime(shiftStart);
-  const end = parseTime(shiftEnd);
-  if (!start || !end) return null;
-  let duration = end.hour * 60 + end.minute - (start.hour * 60 + start.minute);
-  if (duration <= 0) {
-    duration += 24 * 60;
-  }
-  return duration > 0 ? duration : null;
-};
-var getShiftElapsedMinutes = ({
-  shiftStart,
-  shiftEnd,
-  shiftDate,
-  timezone,
-  now: now4 = /* @__PURE__ */ new Date()
-}) => {
-  if (!shiftDate || !timezone) return null;
-  const startTime = parseTime(shiftStart);
-  const endTime = parseTime(shiftEnd);
-  if (!startTime || !endTime) return null;
-  const shiftStartDate = dateFnsTz.fromZonedTime(
-    `${shiftDate}T${padTime(startTime.hour)}:${padTime(startTime.minute)}:00`,
-    timezone
-  );
-  let shiftEndDate = dateFnsTz.fromZonedTime(
-    `${shiftDate}T${padTime(endTime.hour)}:${padTime(endTime.minute)}:00`,
-    timezone
-  );
-  if (shiftEndDate <= shiftStartDate) {
-    shiftEndDate = dateFns.addDays(shiftEndDate, 1);
-  }
-  const shiftMinutes = Math.max(dateFns.differenceInMinutes(shiftEndDate, shiftStartDate), 0);
-  if (shiftMinutes <= 0) return null;
-  const elapsed = dateFns.differenceInMinutes(now4, shiftStartDate);
-  return Math.min(Math.max(elapsed, 0), shiftMinutes);
-};
-var maskFutureHourlySeries = ({
-  data,
-  shiftStart,
-  shiftEnd,
-  shiftDate,
-  timezone,
-  now: now4 = /* @__PURE__ */ new Date()
-}) => {
-  if (!Array.isArray(data)) {
-    return [];
-  }
-  const normalizedData = data.map((value) => typeof value === "number" && Number.isFinite(value) ? value : null);
-  if (!normalizedData.length) {
-    return normalizedData;
-  }
-  const shiftMinutes = getShiftDurationMinutes(shiftStart, shiftEnd);
-  const elapsedMinutes = getShiftElapsedMinutes({
-    shiftStart,
-    shiftEnd,
-    shiftDate,
-    timezone,
-    now: now4
-  });
-  if (shiftMinutes === null || elapsedMinutes === null || elapsedMinutes >= shiftMinutes) {
-    return normalizedData;
-  }
-  return normalizedData.map((value, index) => {
-    const slotStartMinutes = index * 60;
-    return slotStartMinutes > elapsedMinutes ? null : value;
-  });
-};
-var buildUptimeSeries = ({
-  idleTimeHourly,
-  shiftStart,
-  shiftEnd,
-  shiftDate,
-  timezone,
-  elapsedMinutes
-}) => {
-  const normalizedIdle = normalizeIdleTimeHourly(idleTimeHourly || {});
-  const hasIdleData = Object.keys(normalizedIdle).length > 0;
-  if (!hasIdleData || !shiftDate || !timezone) {
-    return {
-      points: [],
-      activeMinutes: 0,
-      idleMinutes: 0,
-      availableMinutes: 0,
-      shiftMinutes: 0,
-      elapsedMinutes: 0,
-      hasData: false
-    };
-  }
-  const startTime = parseTime(shiftStart);
-  const endTime = parseTime(shiftEnd);
-  if (!startTime || !endTime) {
-    return {
-      points: [],
-      activeMinutes: 0,
-      idleMinutes: 0,
-      availableMinutes: 0,
-      shiftMinutes: 0,
-      elapsedMinutes: 0,
-      hasData: false
-    };
-  }
-  const shiftStartDate = dateFnsTz.fromZonedTime(
-    `${shiftDate}T${padTime(startTime.hour)}:${padTime(startTime.minute)}:00`,
-    timezone
-  );
-  let shiftEndDate = dateFnsTz.fromZonedTime(
-    `${shiftDate}T${padTime(endTime.hour)}:${padTime(endTime.minute)}:00`,
-    timezone
-  );
-  if (shiftEndDate <= shiftStartDate) {
-    shiftEndDate = dateFns.addDays(shiftEndDate, 1);
-  }
-  const shiftMinutes = Math.max(dateFns.differenceInMinutes(shiftEndDate, shiftStartDate), 0);
-  if (shiftMinutes <= 0) {
-    return {
-      points: [],
-      activeMinutes: 0,
-      idleMinutes: 0,
-      availableMinutes: 0,
-      shiftMinutes: 0,
-      elapsedMinutes: 0,
-      hasData: false
-    };
-  }
-  const elapsedMinutesClamped = Number.isFinite(elapsedMinutes) ? Math.min(Math.max(Math.floor(elapsedMinutes ?? 0), 0), shiftMinutes) : shiftMinutes;
-  const points = [];
-  let activeMinutes = 0;
-  let idleMinutes = 0;
-  for (let minuteIndex = 0; minuteIndex < shiftMinutes; minuteIndex += 1) {
-    const minuteDate = dateFns.addMinutes(shiftStartDate, minuteIndex);
-    const timeLabel = dateFnsTz.formatInTimeZone(minuteDate, timezone, "h:mm a");
-    if (minuteIndex >= elapsedMinutesClamped) {
-      points.push({
-        minuteIndex,
-        timeLabel,
-        uptime: null,
-        status: "unknown"
-      });
-      continue;
-    }
-    const hourKey = dateFnsTz.formatInTimeZone(minuteDate, timezone, "H");
-    const minuteKey = Number.parseInt(dateFnsTz.formatInTimeZone(minuteDate, timezone, "m"), 10);
-    const hourBucket = normalizedIdle[hourKey] || [];
-    const value = Array.isArray(hourBucket) ? hourBucket[minuteKey] : void 0;
-    const status = interpretIdleValue(value);
-    if (status === "active") activeMinutes += 1;
-    if (status === "idle") idleMinutes += 1;
-    points.push({
-      minuteIndex,
-      timeLabel,
-      uptime: status === "active" ? 1 : status === "idle" ? 0 : null,
-      status
-    });
-  }
-  return {
-    points,
-    activeMinutes,
-    idleMinutes,
-    availableMinutes: activeMinutes + idleMinutes,
-    shiftMinutes,
-    elapsedMinutes: elapsedMinutesClamped,
-    hasData: activeMinutes + idleMinutes > 0
-  };
-};
-var getUptimeUtilizationPercent = (shift) => {
-  const efficiency = shift.efficiency;
-  if (Number.isFinite(efficiency)) {
-    return Math.round(Math.max(0, Math.min(100, Number(efficiency))));
-  }
-  const idleSeconds = Number.isFinite(shift.idleTime) ? Number(shift.idleTime) : 0;
-  const activeSeconds = Number.isFinite(shift.activeTimeSeconds) ? Number(shift.activeTimeSeconds) : null;
-  let availableSeconds = Number.isFinite(shift.availableTimeSeconds) ? Number(shift.availableTimeSeconds) : null;
-  if (availableSeconds === null) {
-    if ((activeSeconds ?? 0) > 0 || idleSeconds > 0) {
-      availableSeconds = (activeSeconds ?? 0) + idleSeconds;
-    } else {
-      return 0;
-    }
-  }
-  if (availableSeconds <= 0) return 0;
-  const clampedIdleSeconds = Math.min(Math.max(idleSeconds, 0), availableSeconds);
-  const productiveSeconds = Math.max(
-    activeSeconds ?? availableSeconds - clampedIdleSeconds,
-    0
-  );
-  return Math.round(productiveSeconds / availableSeconds * 100);
-};
 var getTimeFromTimeString = (timeStr) => {
   if (!timeStr) {
     return { hour: 0, minute: 0, decimalHour: 0 };
@@ -50195,7 +50576,7 @@ var formatOperationalDateKey = (dateKey, options) => {
     timeZone: "UTC"
   });
 };
-var getSegmentMinutes = (isoString, timeZone, reportDate) => {
+var getSegmentMinutes2 = (isoString, timeZone, reportDate) => {
   const date = new Date(isoString);
   if (isNaN(date.getTime())) return NaN;
   const formatter = new Intl.DateTimeFormat("en-US", {
@@ -50216,13 +50597,13 @@ var getSegmentMinutes = (isoString, timeZone, reportDate) => {
   if (dateKey > reportDate) {
     const d1 = new Date(dateKey);
     const d2 = new Date(reportDate);
-    const diffDays = Math.round((d1.getTime() - d2.getTime()) / (1e3 * 3600 * 24));
-    minutes += diffDays * 24 * 60;
+    const diffDays2 = Math.round((d1.getTime() - d2.getTime()) / (1e3 * 3600 * 24));
+    minutes += diffDays2 * 24 * 60;
   } else if (dateKey < reportDate) {
     const d1 = new Date(dateKey);
     const d2 = new Date(reportDate);
-    const diffDays = Math.round((d2.getTime() - d1.getTime()) / (1e3 * 3600 * 24));
-    minutes -= diffDays * 24 * 60;
+    const diffDays2 = Math.round((d2.getTime() - d1.getTime()) / (1e3 * 3600 * 24));
+    minutes -= diffDays2 * 24 * 60;
   }
   return minutes;
 };
@@ -50632,7 +51013,7 @@ var LinePdfGenerator = ({
       const skuRemarksByIndex = {};
       if (lineInfo.metrics.sku_segments && lineInfo.metrics.sku_segments.length > 0) {
         lineInfo.metrics.sku_segments.forEach((segment, segmentIndex) => {
-          const segmentMinutes = getSegmentMinutes(segment.start_time, reportTimezone, lineInfo.date);
+          const segmentMinutes = getSegmentMinutes2(segment.start_time, reportTimezone, lineInfo.date);
           if (!isNaN(segmentMinutes)) {
             const intervalIndex = hourlyTimeRanges.findIndex(
               (inv) => segmentMinutes >= inv.start && segmentMinutes < inv.end
@@ -52367,7 +52748,7 @@ var formatOperationalDateKey2 = (dateKey, options) => {
     timeZone: "UTC"
   });
 };
-var getSegmentMinutes2 = (isoString, timeZone, reportDate) => {
+var getSegmentMinutes3 = (isoString, timeZone, reportDate) => {
   const date = new Date(isoString);
   if (isNaN(date.getTime())) return NaN;
   const formatter = new Intl.DateTimeFormat("en-US", {
@@ -52388,13 +52769,13 @@ var getSegmentMinutes2 = (isoString, timeZone, reportDate) => {
   if (dateKey > reportDate) {
     const d1 = new Date(dateKey);
     const d2 = new Date(reportDate);
-    const diffDays = Math.round((d1.getTime() - d2.getTime()) / (1e3 * 3600 * 24));
-    minutes += diffDays * 24 * 60;
+    const diffDays2 = Math.round((d1.getTime() - d2.getTime()) / (1e3 * 3600 * 24));
+    minutes += diffDays2 * 24 * 60;
   } else if (dateKey < reportDate) {
     const d1 = new Date(dateKey);
     const d2 = new Date(reportDate);
-    const diffDays = Math.round((d2.getTime() - d1.getTime()) / (1e3 * 3600 * 24));
-    minutes -= diffDays * 24 * 60;
+    const diffDays2 = Math.round((d2.getTime() - d1.getTime()) / (1e3 * 3600 * 24));
+    minutes -= diffDays2 * 24 * 60;
   }
   return minutes;
 };
@@ -52626,7 +53007,7 @@ var WorkspacePdfGenerator = ({
       const skuRemarksByIndex = {};
       if (workspace.sku_segments && workspace.sku_segments.length > 0) {
         workspace.sku_segments.forEach((segment, segmentIndex) => {
-          const segmentMinutes = getSegmentMinutes2(segment.start_time, reportTimezone, workspace.date);
+          const segmentMinutes = getSegmentMinutes3(segment.start_time, reportTimezone, workspace.date);
           if (!isNaN(segmentMinutes)) {
             const intervalIndex = hourlyIntervals.findIndex(
               (inv) => segmentMinutes >= inv.start && segmentMinutes < inv.end
@@ -53468,12 +53849,10 @@ var formatPercentRange = (min, max) => {
   return `${format10(min)}-${format10(max)}%`;
 };
 var Legend5 = ({
-  useBottleneckLabel = false,
   legend,
   metricLabel = "Efficiency"
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
-  const exclamationLabel = useBottleneckLabel ? "Bottleneck" : "<50% efficiency";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 text-xs font-medium text-slate-600", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-medium text-gray-700 hidden sm:block", children: [
       metricLabel,
@@ -53492,11 +53871,6 @@ var Legend5 = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-[#E34329]" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPercentRange(effectiveLegend.red_min, effectiveLegend.red_max) })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-slate-200 mx-1" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-3 h-3 sm:w-4 sm:h-4 bg-[#E34329] rounded-full text-white font-bold text-[8px] sm:text-[10px]", children: "!" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: exclamationLabel })
     ] })
   ] });
 };
@@ -53610,7 +53984,6 @@ var WorkspaceGrid = React144__namespace.default.memo(({
   factoryView = "factory",
   line2Uuid = "line-2",
   className = "",
-  hasFlowBuffers = false,
   legend = DEFAULT_EFFICIENCY_LEGEND,
   videoSources = {},
   videoStreamsByWorkspaceId = {},
@@ -53654,7 +54027,7 @@ var WorkspaceGrid = React144__namespace.default.memo(({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col w-full h-full overflow-hidden bg-slate-50/50 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-none px-4 py-3 z-20 flex flex-row items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex bg-white/95 rounded-lg shadow-sm px-4 py-2 border border-slate-200/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex bg-white/95 rounded-lg shadow-sm px-4 py-2 border border-slate-200/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, metricLabel: legendMetricLabel }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 shrink-0", children: [
         toolbarRightContent,
         mapViewEnabled && /* @__PURE__ */ jsxRuntime.jsx(
@@ -53674,7 +54047,7 @@ var WorkspaceGrid = React144__namespace.default.memo(({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden px-3 py-2 bg-white border-b border-slate-200/60 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden px-3 py-2 bg-white border-b border-slate-200/60 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, metricLabel: legendMetricLabel }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
       motion.div,
       {
@@ -64335,6 +64708,7 @@ var buildLineInfoSnapshot = (lineDetails, metrics2) => {
       underperforming_workspace_uuids: metrics2.underperforming_workspace_uuids || [],
       output_array: metrics2.output_array || [],
       output_hourly: metrics2.output_hourly,
+      hourly_target_output: metrics2.hourly_target_output ?? null,
       line_threshold: metrics2.line_threshold ?? 0,
       threshold_pph: metrics2.threshold_pph ?? 0,
       shift_start: metrics2.shift_start || "06:00",
@@ -64421,6 +64795,7 @@ var transformLineMetrics = (lineId, detailResponse, queryDate, queryShiftId) =>
       underperforming_workspace_names: [],
       underperforming_workspace_uuids: [],
       output_array: [],
+      hourly_target_output: null,
       line_threshold: 0,
       threshold_pph: 0,
       shift_start: "06:00",
@@ -65458,6 +65833,9 @@ var BottomSection = React144.memo(({
   workspaceDisplayNames,
   hourlyOutputData,
   hourlyThreshold,
+  hourlyTargetOutput,
+  idleTimeHourly,
+  timezone,
   urlDate,
   urlShift,
   navigate,
@@ -65628,8 +66006,12 @@ var BottomSection = React144.memo(({
             {
               data: hourlyOutputData,
               pphThreshold: hourlyThreshold,
+              hourlyTargetOutput,
               shiftStart: lineInfo.metrics.shift_start || "06:00",
               shiftEnd: lineInfo.metrics.shift_end,
+              idleTimeHourly,
+              shiftDate: lineInfo.date,
+              timezone,
               skuSegments: skuAware ? skuSegments : void 0,
               activeSkuId
             }
@@ -65650,6 +66032,9 @@ var BottomSection = React144.memo(({
   if (prevProps.lineInfo.monitoring_mode !== nextProps.lineInfo.monitoring_mode) return false;
   if (prevProps.skuAware !== nextProps.skuAware) return false;
   if (prevProps.activeSkuId !== nextProps.activeSkuId) return false;
+  if (JSON.stringify(prevProps.hourlyTargetOutput || []) !== JSON.stringify(nextProps.hourlyTargetOutput || [])) {
+    return false;
+  }
   const prevSkuSegmentsSignature = JSON.stringify(
     (prevProps.skuSegments || []).map((segment) => ({
       sku_id: segment.sku_id,
@@ -65722,7 +66107,9 @@ var BottomSection = React144.memo(({
   );
   if (prevWorkspaceSignature !== nextWorkspaceSignature) return false;
   if (prevProps.lineInfo.metrics.shift_start !== nextProps.lineInfo.metrics.shift_start) return false;
+  if (prevProps.lineInfo.metrics.shift_end !== nextProps.lineInfo.metrics.shift_end) return false;
   if (prevProps.hourlyThreshold !== nextProps.hourlyThreshold) return false;
+  if (JSON.stringify(prevProps.idleTimeHourly || {}) !== JSON.stringify(nextProps.idleTimeHourly || {})) return false;
   if (prevProps.urlDate !== nextProps.urlDate || prevProps.urlShift !== nextProps.urlShift) return false;
   if (prevProps.workspaceDisplayNames !== nextProps.workspaceDisplayNames) return false;
   return true;
@@ -65990,6 +66377,7 @@ var KPIDetailView = ({
     }
   }, [urlDate, urlShift, urlTab]);
   const { shiftConfig, isLoading: isShiftConfigLoading } = useDynamicShiftConfig(lineId);
+  const lineTimezone = shiftConfig?.timezone || configuredTimezone;
   const getShiftName = React144.useCallback((shiftId) => {
     return getShiftNameById(shiftId, configuredTimezone, shiftConfig);
   }, [configuredTimezone, shiftConfig]);
@@ -66030,12 +66418,12 @@ var KPIDetailView = ({
     operationalTodayDate.setHours(0, 0, 0, 0);
     compareDateInZone.setHours(0, 0, 0, 0);
     const diffTime = compareDateInZone.getTime() - operationalTodayDate.getTime();
-    const diffDays = Math.round(diffTime / (1e3 * 60 * 60 * 24));
-    if (diffDays === 0) return "Today";
-    if (diffDays === -1) return "Yesterday";
-    if (diffDays === 1) return "Tomorrow";
-    if (diffDays < -1) return `${Math.abs(diffDays)} days ago`;
-    if (diffDays > 1) return `${diffDays} days ahead`;
+    const diffDays2 = Math.round(diffTime / (1e3 * 60 * 60 * 24));
+    if (diffDays2 === 0) return "Today";
+    if (diffDays2 === -1) return "Yesterday";
+    if (diffDays2 === 1) return "Tomorrow";
+    if (diffDays2 < -1) return `${Math.abs(diffDays2)} days ago`;
+    if (diffDays2 > 1) return `${diffDays2} days ahead`;
     return "Today";
   }, [configuredTimezone, shiftConfig]);
   const {
@@ -66245,6 +66633,7 @@ var KPIDetailView = ({
         underperforming_workspace_uuids: metrics2.underperforming_workspace_uuids || [],
         output_array: metrics2.output_array || [],
         output_hourly: metrics2.output_hourly,
+        hourly_target_output: metrics2.hourly_target_output ?? null,
         line_threshold: metrics2.line_threshold ?? 0,
         threshold_pph: metrics2.threshold_pph ?? 0,
         shift_start: metrics2.shift_start || "06:00",
@@ -66254,7 +66643,7 @@ var KPIDetailView = ({
         idle_time_hourly: metrics2.idle_time_hourly || null,
         // Multi-SKU additive fields (Phase 6) — propagated from
         // `useLineDetailPageData`. Backend authoritative; we never recompute.
-        // The selector below uses these to swap header KPIs per selected SKU.
+        // The output-card selection below uses these to swap header KPIs per selected SKU.
         sku_aware: Boolean(metrics2.sku_aware),
         real_sku_count: metrics2.real_sku_count ?? 0,
         sku_breakdown: Array.isArray(metrics2.sku_breakdown) ? metrics2.sku_breakdown : [],
@@ -66351,7 +66740,7 @@ var KPIDetailView = ({
   }, [lineSkuSegments, outputChartSkuBreakdown, hasUrlDate, hasUrlShift]);
   const normalizedSelectedSkuId = selectedSkuId !== "all" ? selectedSkuId : null;
   const isLineSkuAware = Boolean(resolvedLineInfo?.metrics.sku_aware);
-  const showSkuSelector = isLineSkuAware && realSkuOptions.length > 0;
+  const showSkuSelector = isLineSkuAware && realSkuOptions.length > 0 && !isUptimeMode;
   React144.useEffect(() => {
     if (selectedSkuId === "all") return;
     const stillPresent = realSkuOptions.some((item) => item.sku_id === selectedSkuId);
@@ -66378,15 +66767,11 @@ var KPIDetailView = ({
         ...resolvedLineInfo.metrics,
         current_output: selectedSkuRow.current_output ?? 0,
         ideal_output: selectedSkuRow.ideal_output ?? 0,
-        avg_efficiency: selectedSkuRow.avg_efficiency ?? resolvedLineInfo.metrics.avg_efficiency,
         total_workspaces: selectedSkuRow.total_workspaces ?? resolvedLineInfo.metrics.total_workspaces,
         underperforming_workspaces: selectedSkuRow.underperforming_workspaces ?? resolvedLineInfo.metrics.underperforming_workspaces,
         underperforming_workspace_names: selectedSkuRow.underperforming_workspace_names ?? resolvedLineInfo.metrics.underperforming_workspace_names,
         underperforming_workspace_uuids: selectedSkuRow.underperforming_workspace_uuids ?? resolvedLineInfo.metrics.underperforming_workspace_uuids,
-        output_array: selectedSkuRow.output_array ?? resolvedLineInfo.metrics.output_array,
-        output_hourly: selectedSkuRow.output_hourly ?? resolvedLineInfo.metrics.output_hourly,
-        line_threshold: selectedSkuRow.line_threshold ?? resolvedLineInfo.metrics.line_threshold,
-        poorest_performing_workspaces: selectedSkuRow.poorest_performing_workspaces ?? resolvedLineInfo.metrics.poorest_performing_workspaces
+        line_threshold: selectedSkuRow.line_threshold ?? resolvedLineInfo.metrics.line_threshold
       }
     };
   }, [resolvedLineInfo, selectedSkuRow]);
@@ -67165,11 +67550,9 @@ var KPIDetailView = ({
               showIdleTime: idleTimeVlmEnabled
             }
           ) : (
-            // Phase 6: pass `displayLineInfo` so the SKU selector
-            // swaps `current_output`, `ideal_output`,
-            // `avg_efficiency`, `line_threshold` on the header KPI
-            // cards. When `selectedSkuId === 'all'`, this is exactly
-            // `resolvedLineInfo` (aggregate path preserved).
+            // Keep the line output + underperforming cards SKU-aware,
+            // while Average Efficiency stays on the aggregate line
+            // metrics even when a specific SKU is selected.
             /* @__PURE__ */ jsxRuntime.jsx(
               MetricCards,
               {
@@ -67214,6 +67597,9 @@ var KPIDetailView = ({
               workspaceDisplayNames,
               hourlyOutputData,
               hourlyThreshold,
+              hourlyTargetOutput: chartMetrics?.hourly_target_output ?? null,
+              idleTimeHourly: chartMetrics?.idle_time_hourly,
+              timezone: lineTimezone,
               urlDate,
               urlShift,
               navigate,
@@ -67279,8 +67665,8 @@ var KPIDetailView = ({
               showIdleTime: idleTimeVlmEnabled
             }
           ) : (
-            // Phase 6: pass `displayLineInfo` so the SKU selector
-            // swaps the four SKU-specific fields on the header.
+            // Keep the line output + underperforming cards SKU-aware,
+            // while Average Efficiency stays aggregate.
             /* @__PURE__ */ jsxRuntime.jsx(
               MetricCards,
               {
@@ -67325,6 +67711,8 @@ var KPIDetailView = ({
               workspaceDisplayNames,
               hourlyOutputData,
               hourlyThreshold,
+              idleTimeHourly: chartMetrics?.idle_time_hourly,
+              timezone: lineTimezone,
               urlDate,
               urlShift,
               navigate,
@@ -73561,12 +73949,12 @@ var getDaysDifference = (date, timezone = "UTC", shiftStartTime = "06:00") => {
   operationalTodayDate.setHours(0, 0, 0, 0);
   compareDateInTz.setHours(0, 0, 0, 0);
   const diffTime = compareDateInTz.getTime() - operationalTodayDate.getTime();
-  const diffDays = Math.round(diffTime / (1e3 * 60 * 60 * 24));
-  if (diffDays === 0) return "Today";
-  if (diffDays === -1) return "Yesterday";
-  if (diffDays === 1) return "Tomorrow";
-  if (diffDays < -1) return `${Math.abs(diffDays)} days ago`;
-  if (diffDays > 1) return `${diffDays} days ahead`;
+  const diffDays2 = Math.round(diffTime / (1e3 * 60 * 60 * 24));
+  if (diffDays2 === 0) return "Today";
+  if (diffDays2 === -1) return "Yesterday";
+  if (diffDays2 === 1) return "Tomorrow";
+  if (diffDays2 < -1) return `${Math.abs(diffDays2)} days ago`;
+  if (diffDays2 > 1) return `${diffDays2} days ahead`;
   return "Today";
 };
 var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
@@ -74002,7 +74390,7 @@ var WorkspaceDetailView = ({
     () => resolveLiveSkuId(workspace?.sku_segments),
     [workspace?.sku_segments]
   );
-  const activeSkuId = selectedSkuId || liveSkuId;
+  const activeSkuId = selectedSkuId;
   const resolvedLineId = effectiveLineId || workspace?.line_id || cachedDetailedMetrics?.line_id || cachedOverviewMetrics?.line_id || overviewFallback?.line_id;
   const { timezone: cycleTimeTimezone } = useTimezone({
     lineId: resolvedLineId || void 0,
@@ -74970,6 +75358,7 @@ var WorkspaceDetailView = ({
                           {
                             data: workspace.hourly_action_counts || [],
                             pphThreshold: workspace.pph_threshold || 0,
+                            hourlyTargetOutput: workspace.hourly_target_output,
                             shiftStart: workspace.shift_start || "06:00",
                             shiftEnd: workspace.shift_end,
                             showIdleTime: showChartIdleTime,
@@ -74977,7 +75366,7 @@ var WorkspaceDetailView = ({
                             idleTimeClips,
                             idleTimeClipClassifications,
                             shiftDate: idleClipDate,
-                            timezone,
+                            timezone: effectiveCycleTimeTimezone,
                             skuSegments: isSkuAware ? skuSegments : void 0,
                             activeSkuId
                           }
@@ -75116,6 +75505,7 @@ var WorkspaceDetailView = ({
                             {
                               data: workspace.hourly_action_counts || [],
                               pphThreshold: workspace.pph_threshold || 0,
+                              hourlyTargetOutput: workspace.hourly_target_output,
                               shiftStart: workspace.shift_start || "06:00",
                               shiftEnd: workspace.shift_end,
                               showIdleTime: showChartIdleTime,
@@ -75123,7 +75513,7 @@ var WorkspaceDetailView = ({
                               idleTimeClips,
                               idleTimeClipClassifications,
                               shiftDate: idleClipDate,
-                              timezone,
+                              timezone: effectiveCycleTimeTimezone,
                               skuSegments: isSkuAware ? skuSegments : void 0,
                               activeSkuId
                             }
@@ -78400,8 +78790,8 @@ var ImprovementCenterView = () => {
     const firstSeen = new Date(new Date(openedAt).toLocaleString("en-US", { timeZone: timezone }));
     if (Number.isNaN(firstSeen.getTime())) return void 0;
     const now4 = new Date((/* @__PURE__ */ new Date()).toLocaleString("en-US", { timeZone: timezone }));
-    const diffDays = Math.max(0, Math.floor((now4.getTime() - firstSeen.getTime()) / (1e3 * 60 * 60 * 24)));
-    return Math.max(1, Math.ceil(diffDays / 7));
+    const diffDays2 = Math.max(0, Math.floor((now4.getTime() - firstSeen.getTime()) / (1e3 * 60 * 60 * 24)));
+    return Math.max(1, Math.ceil(diffDays2 / 7));
   };
   const toZonedDate = (value) => {
     if (!value) return void 0;
@@ -79082,12 +79472,12 @@ var ThreadSidebar = ({
     const date = new Date(dateString);
     const now4 = /* @__PURE__ */ new Date();
     const diffMs = now4.getTime() - date.getTime();
-    const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
-    if (diffDays === 0) {
+    const diffDays2 = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+    if (diffDays2 === 0) {
       return "Today";
-    } else if (diffDays === 1) {
+    } else if (diffDays2 === 1) {
       return "Yesterday";
-    } else if (diffDays < 7) {
+    } else if (diffDays2 < 7) {
       return date.toLocaleDateString("en-US", { weekday: "short" });
     } else {
       return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });