@optifye/dashboard-core 6.9.11 → 6.9.13

package/dist/index.js

@@ -2163,6 +2163,88 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
   setCache(key, data) {
     this.cache.set(key, { data, timestamp: Date.now() });
   }
+  getShiftTiming(timezone, shiftConfig) {
+    const { shiftId, date } = getCurrentShift(timezone, shiftConfig);
+    const dayShiftId = shiftConfig?.dayShift?.id ?? 0;
+    const isDayShift = shiftId === dayShiftId;
+    const defaultDayStart = "06:00";
+    const defaultDayEnd = "18:00";
+    const defaultNightStart = "18:00";
+    const defaultNightEnd = "06:00";
+    const shiftStartStr = isDayShift ? shiftConfig?.dayShift?.startTime || defaultDayStart : shiftConfig?.nightShift?.startTime || defaultNightStart;
+    const shiftEndStr = isDayShift ? shiftConfig?.dayShift?.endTime || defaultDayEnd : shiftConfig?.nightShift?.endTime || defaultNightEnd;
+    const shiftLabel = isDayShift ? "Day Shift" : "Night Shift";
+    const parseTime = (value) => {
+      const [hourPart = "0", minutePart = "0"] = value.split(":");
+      const hour = Number.parseInt(hourPart, 10);
+      const minute = Number.parseInt(minutePart, 10);
+      return {
+        hour: Number.isFinite(hour) ? hour : 0,
+        minute: Number.isFinite(minute) ? minute : 0
+      };
+    };
+    const getShiftDurationMinutes = (start, end) => {
+      const startParsed = parseTime(start);
+      const endParsed = parseTime(end);
+      const startTotal = startParsed.hour * 60 + startParsed.minute;
+      const endTotal = endParsed.hour * 60 + endParsed.minute;
+      let duration = endTotal - startTotal;
+      if (duration <= 0) {
+        duration += 24 * 60;
+      }
+      return duration;
+    };
+    const shiftStartDate = dateFnsTz.fromZonedTime(`${date}T${shiftStartStr}:00`, timezone);
+    const totalMinutes = getShiftDurationMinutes(shiftStartStr, shiftEndStr);
+    const shiftEndDate = dateFns.addMinutes(shiftStartDate, totalMinutes);
+    const now2 = /* @__PURE__ */ new Date();
+    let completedMinutes = dateFns.differenceInMinutes(now2 < shiftEndDate ? now2 : shiftEndDate, shiftStartDate);
+    if (completedMinutes < 0) completedMinutes = 0;
+    if (completedMinutes > totalMinutes) completedMinutes = totalMinutes;
+    const pendingMinutes = Math.max(0, totalMinutes - completedMinutes);
+    return {
+      shiftId,
+      date,
+      shiftLabel,
+      shiftStartDate,
+      shiftEndDate,
+      totalMinutes,
+      completedMinutes,
+      pendingMinutes
+    };
+  }
+  normalizeHourBucket(bucket) {
+    if (Array.isArray(bucket)) return bucket;
+    if (bucket && Array.isArray(bucket.values)) return bucket.values;
+    return void 0;
+  }
+  normalizeOutputHourly(outputHourlyRaw) {
+    return outputHourlyRaw && typeof outputHourlyRaw === "object" ? Object.fromEntries(
+      Object.entries(outputHourlyRaw).map(([key, value]) => [key, this.normalizeHourBucket(value) || []])
+    ) : {};
+  }
+  interpretUptimeValue(value) {
+    if (value === null || value === void 0) return "down";
+    if (typeof value === "string") {
+      return value.trim().toLowerCase() === "x" ? "down" : "up";
+    }
+    return "up";
+  }
+  deriveStatusForMinute(minuteOffset, minuteDate, outputHourly, outputArray, timezone) {
+    const hourKey = dateFnsTz.formatInTimeZone(minuteDate, timezone, "H");
+    const minuteKey = Number.parseInt(dateFnsTz.formatInTimeZone(minuteDate, timezone, "m"), 10);
+    const hourBucket = outputHourly[hourKey];
+    if (Array.isArray(hourBucket)) {
+      const value = hourBucket[minuteKey];
+      if (value !== void 0) {
+        return this.interpretUptimeValue(value);
+      }
+    }
+    if (minuteOffset < outputArray.length) {
+      return this.interpretUptimeValue(outputArray[minuteOffset]);
+    }
+    return "down";
+  }
   async getWorkspaceHealthStatus(options = {}) {
     const supabase = _getSupabaseInstance();
     if (!supabase) throw new Error("Supabase client not initialized");
@@ -2179,15 +2261,13 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
       throw error;
     }
     const processedData = (data || []).map((item) => this.processHealthStatus(item));
+    const companyId = options.companyId || data?.[0]?.company_id;
     let uptimeMap = /* @__PURE__ */ new Map();
-    if (options.companyId || data && data.length > 0) {
-      const companyId = options.companyId || data[0]?.company_id;
-      if (companyId) {
-        try {
-          uptimeMap = await this.calculateWorkspaceUptime(companyId);
-        } catch (error2) {
-          console.error("Error calculating uptime:", error2);
-        }
+    if (companyId) {
+      try {
+        uptimeMap = await this.calculateWorkspaceUptime(companyId);
+      } catch (error2) {
+        console.error("Error calculating uptime:", error2);
       }
     }
     const dataWithUptime = processedData.map((workspace) => {
@@ -2203,16 +2283,29 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     });
     let filteredData = dataWithUptime;
     try {
-      const { data: enabledWorkspaces, error: workspaceError } = await supabase.from("workspaces").select("workspace_id, display_name").eq("enable", true);
+      const enabledQuery = supabase.from("workspaces").select("workspace_id, display_name, line_id").eq("enable", true);
+      if (options.lineId) {
+        enabledQuery.eq("line_id", options.lineId);
+      }
+      const { data: enabledWorkspaces, error: workspaceError } = await enabledQuery;
       if (!workspaceError && enabledWorkspaces && enabledWorkspaces.length > 0) {
-        const enabledWorkspaceNames = /* @__PURE__ */ new Set();
+        const enabledByLineAndId = /* @__PURE__ */ new Set();
+        const enabledByLineAndName = /* @__PURE__ */ new Set();
         enabledWorkspaces.forEach((w) => {
-          if (w.workspace_id) enabledWorkspaceNames.add(w.workspace_id);
-          if (w.display_name) enabledWorkspaceNames.add(w.display_name);
+          const lineKey = w.line_id ? String(w.line_id) : "";
+          const idKey = w.workspace_id ? String(w.workspace_id) : "";
+          const nameKey = w.display_name ? String(w.display_name) : "";
+          if (lineKey && idKey) enabledByLineAndId.add(`${lineKey}::${idKey}`);
+          if (lineKey && nameKey) enabledByLineAndName.add(`${lineKey}::${nameKey}`);
         });
         filteredData = filteredData.filter((item) => {
-          const displayName = item.workspace_display_name || "";
-          return enabledWorkspaceNames.has(displayName);
+          const lineKey = item.line_id ? String(item.line_id) : "";
+          if (!lineKey) return false;
+          const idKey = item.workspace_id ? `${lineKey}::${item.workspace_id}` : "";
+          const nameKey = item.workspace_display_name ? `${lineKey}::${item.workspace_display_name}` : "";
+          if (idKey && enabledByLineAndId.has(idKey)) return true;
+          if (nameKey && enabledByLineAndName.has(nameKey)) return true;
+          return false;
         });
       } else if (!workspaceError && enabledWorkspaces && enabledWorkspaces.length === 0) {
         return [];
@@ -2250,6 +2343,127 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     }
     return filteredData;
   }
+  async getWorkspaceUptimeTimeline(workspaceId, companyId) {
+    if (!workspaceId) {
+      throw new Error("workspaceId is required to fetch uptime timeline");
+    }
+    if (!companyId) {
+      throw new Error("companyId is required to fetch uptime timeline");
+    }
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const dashboardConfig = _getDashboardConfigInstance();
+    const timezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
+    const shiftConfig = dashboardConfig?.shiftConfig;
+    const {
+      shiftId,
+      shiftLabel,
+      shiftStartDate,
+      shiftEndDate,
+      totalMinutes,
+      completedMinutes,
+      pendingMinutes,
+      date
+    } = this.getShiftTiming(timezone, shiftConfig);
+    const tableName = `performance_metrics_${companyId.replace(/-/g, "_")}`;
+    const { data, error } = await supabase.from(tableName).select("workspace_id, output_hourly, output_array").eq("workspace_id", workspaceId).eq("date", date).eq("shift_id", shiftId).limit(1);
+    if (error) {
+      console.error("Error fetching uptime timeline metrics:", error);
+      throw error;
+    }
+    const record = Array.isArray(data) && data.length > 0 ? data[0] : null;
+    const outputHourly = this.normalizeOutputHourly(record?.output_hourly || {});
+    const outputArray = Array.isArray(record?.output_array) ? record.output_array : [];
+    const points = [];
+    let uptimeMinutes = 0;
+    let downtimeMinutes = 0;
+    const MIN_DOWNTIME_MINUTES = 2;
+    for (let minuteIndex = 0; minuteIndex < totalMinutes; minuteIndex++) {
+      const minuteDate = dateFns.addMinutes(shiftStartDate, minuteIndex);
+      const timestamp = dateFnsTz.formatInTimeZone(minuteDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX");
+      let status;
+      if (minuteIndex < completedMinutes) {
+        status = this.deriveStatusForMinute(
+          minuteIndex,
+          minuteDate,
+          outputHourly,
+          outputArray,
+          timezone
+        );
+        if (status === "up") {
+          uptimeMinutes += 1;
+        } else {
+          downtimeMinutes += 1;
+        }
+      } else {
+        status = "pending";
+      }
+      points.push({
+        minuteIndex,
+        timestamp,
+        status
+      });
+    }
+    const downtimeSegments = [];
+    let currentSegmentStart = null;
+    const pushSegment = (startIndex, endIndex) => {
+      if (endIndex <= startIndex) return;
+      const segmentStartDate = dateFns.addMinutes(shiftStartDate, startIndex);
+      const segmentEndDate = dateFns.addMinutes(shiftStartDate, endIndex);
+      downtimeSegments.push({
+        startMinuteIndex: startIndex,
+        endMinuteIndex: endIndex,
+        startTime: dateFnsTz.formatInTimeZone(segmentStartDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+        endTime: dateFnsTz.formatInTimeZone(segmentEndDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+        durationMinutes: endIndex - startIndex
+      });
+    };
+    for (let i = 0; i < completedMinutes; i++) {
+      const point = points[i];
+      if (point.status === "down") {
+        if (currentSegmentStart === null) {
+          currentSegmentStart = i;
+        }
+      } else if (currentSegmentStart !== null) {
+        pushSegment(currentSegmentStart, i);
+        currentSegmentStart = null;
+      }
+    }
+    if (currentSegmentStart !== null) {
+      pushSegment(currentSegmentStart, completedMinutes);
+    }
+    const filteredSegments = [];
+    downtimeSegments.forEach((segment) => {
+      if (segment.durationMinutes >= MIN_DOWNTIME_MINUTES) {
+        filteredSegments.push(segment);
+      } else {
+        for (let i = segment.startMinuteIndex; i < segment.endMinuteIndex; i++) {
+          if (points[i] && points[i].status === "down") {
+            points[i].status = "up";
+            downtimeMinutes = Math.max(0, downtimeMinutes - 1);
+            uptimeMinutes += 1;
+          }
+        }
+      }
+    });
+    const completedWindow = Math.max(1, uptimeMinutes + downtimeMinutes);
+    const uptimePercentage = completedMinutes > 0 ? Number((uptimeMinutes / completedWindow * 100).toFixed(1)) : 100;
+    return {
+      shiftId,
+      shiftLabel,
+      shiftStart: dateFnsTz.formatInTimeZone(shiftStartDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+      shiftEnd: dateFnsTz.formatInTimeZone(shiftEndDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+      totalMinutes,
+      completedMinutes,
+      uptimeMinutes,
+      downtimeMinutes,
+      pendingMinutes,
+      uptimePercentage,
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      points,
+      downtimeSegments: filteredSegments
+    };
+  }
   async getWorkspaceHealthById(workspaceId) {
     const cacheKey = `health-${workspaceId}`;
     const cached = this.getFromCache(cacheKey);
@@ -2387,145 +2601,63 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const dashboardConfig = _getDashboardConfigInstance();
     const timezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
     const shiftConfig = dashboardConfig?.shiftConfig;
-    const currentShiftInfo = getCurrentShift(timezone, shiftConfig);
-    const currentDate = currentShiftInfo.date;
-    const currentShiftId = currentShiftInfo.shiftId;
-    const now2 = /* @__PURE__ */ new Date();
-    const currentHour = now2.getHours();
-    const currentMinute = now2.getMinutes();
-    const dayShiftStart = shiftConfig?.dayShift?.startTime || "08:00";
-    const dayShiftEnd = shiftConfig?.dayShift?.endTime || "19:30";
-    const nightShiftStart = shiftConfig?.nightShift?.startTime || "19:30";
-    const nightShiftEnd = shiftConfig?.nightShift?.endTime || "06:00";
-    const parseShiftTime = (timeStr) => {
-      const [hour, minute] = timeStr.split(":").map(Number);
-      return { hour, minute };
-    };
-    let shiftStart, shiftEnd;
-    if (currentShiftId === 0) {
-      shiftStart = parseShiftTime(dayShiftStart);
-      shiftEnd = parseShiftTime(dayShiftEnd);
-    } else {
-      shiftStart = parseShiftTime(nightShiftStart);
-      shiftEnd = parseShiftTime(nightShiftEnd);
-    }
-    let elapsedMinutes = 0;
-    if (currentShiftId === 0) {
-      const shiftStartTotalMinutes = shiftStart.hour * 60 + shiftStart.minute;
-      const currentTotalMinutes = currentHour * 60 + currentMinute;
-      const shiftEndTotalMinutes = shiftEnd.hour * 60 + shiftEnd.minute;
-      if (currentTotalMinutes >= shiftStartTotalMinutes && currentTotalMinutes < shiftEndTotalMinutes) {
-        elapsedMinutes = currentTotalMinutes - shiftStartTotalMinutes;
-      } else if (currentTotalMinutes >= shiftEndTotalMinutes) {
-        elapsedMinutes = shiftEndTotalMinutes - shiftStartTotalMinutes;
-      }
-    } else {
-      const shiftStartTotalMinutes = shiftStart.hour * 60 + shiftStart.minute;
-      const currentTotalMinutes = currentHour * 60 + currentMinute;
-      const shiftEndTotalMinutes = shiftEnd.hour * 60 + shiftEnd.minute;
-      if (currentHour >= shiftStart.hour || currentHour < shiftEnd.hour) {
-        if (currentHour >= shiftStart.hour) {
-          elapsedMinutes = currentTotalMinutes - shiftStartTotalMinutes;
-        } else {
-          elapsedMinutes = 24 * 60 - shiftStartTotalMinutes + currentTotalMinutes;
-        }
-        if (currentHour >= shiftEnd.hour && currentTotalMinutes >= shiftEndTotalMinutes) {
-          const totalShiftMinutes = 24 * 60 - shiftStartTotalMinutes + shiftEndTotalMinutes;
-          elapsedMinutes = Math.min(elapsedMinutes, totalShiftMinutes);
-        }
-      }
-    }
+    const {
+      shiftId,
+      date,
+      shiftStartDate,
+      completedMinutes
+    } = this.getShiftTiming(timezone, shiftConfig);
     const tableName = `performance_metrics_${companyId.replace(/-/g, "_")}`;
     try {
-      const { data: queryData, error } = await supabase.from(tableName).select("workspace_id, workspace_display_name, output_hourly").eq("date", currentDate).eq("shift_id", currentShiftId);
+      const { data: queryData, error } = await supabase.from(tableName).select("workspace_id, workspace_display_name, output_hourly, output_array").eq("date", date).eq("shift_id", shiftId);
       if (error) {
         console.error("Error fetching performance metrics:", error);
         return /* @__PURE__ */ new Map();
       }
       const uptimeMap = /* @__PURE__ */ new Map();
       for (const record of queryData || []) {
-        let actualMinutes = 0;
-        let totalPossibleMinutes = 0;
-        const outputHourly = record.output_hourly || {};
-        const hoursElapsed = Math.ceil(elapsedMinutes / 60);
-        for (let hourIndex = 0; hourIndex < hoursElapsed; hourIndex++) {
-          const actualHour = (shiftStart.hour + hourIndex) % 24;
-          let hourData = [];
-          let minutesInThisHour = 60;
-          if (shiftStart.minute > 0) {
-            if (hourIndex === 0) {
-              const firstHourData = outputHourly[actualHour.toString()] || [];
-              const nextHour = (actualHour + 1) % 24;
-              const nextHourData = outputHourly[nextHour.toString()] || [];
-              hourData = [
-                ...Array.isArray(firstHourData) ? firstHourData.slice(shiftStart.minute) : [],
-                ...Array.isArray(nextHourData) ? nextHourData.slice(0, shiftStart.minute) : []
-              ];
-            } else if (hourIndex < hoursElapsed - 1) {
-              const currentHourData = outputHourly[actualHour.toString()] || [];
-              const nextHour = (actualHour + 1) % 24;
-              const nextHourData = outputHourly[nextHour.toString()] || [];
-              hourData = [
-                ...Array.isArray(currentHourData) ? currentHourData.slice(shiftStart.minute) : [],
-                ...Array.isArray(nextHourData) ? nextHourData.slice(0, shiftStart.minute) : []
-              ];
-            } else {
-              const isLastHourPartial = hourIndex === hoursElapsed - 1 && elapsedMinutes % 60 > 0;
-              if (isLastHourPartial) {
-                minutesInThisHour = elapsedMinutes % 60;
-                const currentHourData = outputHourly[actualHour.toString()] || [];
-                if (shiftStart.minute > 0) {
-                  const nextHour = (actualHour + 1) % 24;
-                  const nextHourData = outputHourly[nextHour.toString()] || [];
-                  const firstPart = Array.isArray(currentHourData) ? currentHourData.slice(shiftStart.minute) : [];
-                  const secondPart = Array.isArray(nextHourData) ? nextHourData.slice(0, Math.min(shiftStart.minute, minutesInThisHour)) : [];
-                  hourData = [...firstPart, ...secondPart].slice(0, minutesInThisHour);
-                } else {
-                  hourData = Array.isArray(currentHourData) ? currentHourData.slice(0, minutesInThisHour) : [];
-                }
-              } else {
-                const currentHourData = outputHourly[actualHour.toString()] || [];
-                const nextHour = (actualHour + 1) % 24;
-                const nextHourData = outputHourly[nextHour.toString()] || [];
-                hourData = [
-                  ...Array.isArray(currentHourData) ? currentHourData.slice(shiftStart.minute) : [],
-                  ...Array.isArray(nextHourData) ? nextHourData.slice(0, shiftStart.minute) : []
-                ];
-              }
-            }
+        const outputHourly = this.normalizeOutputHourly(record.output_hourly || {});
+        const outputArray = Array.isArray(record.output_array) ? record.output_array : [];
+        let uptimeMinutes = 0;
+        let downtimeMinutes = 0;
+        const MIN_DOWNTIME_MINUTES = 2;
+        let currentDownRun = 0;
+        for (let minuteIndex = 0; minuteIndex < completedMinutes; minuteIndex++) {
+          const minuteDate = dateFns.addMinutes(shiftStartDate, minuteIndex);
+          const status = this.deriveStatusForMinute(
+            minuteIndex,
+            minuteDate,
+            outputHourly,
+            outputArray,
+            timezone
+          );
+          if (status === "down") {
+            currentDownRun += 1;
           } else {
-            hourData = outputHourly[actualHour.toString()] || [];
-            if (hourIndex === hoursElapsed - 1) {
-              const remainingMinutes = elapsedMinutes % 60;
-              if (remainingMinutes > 0) {
-                minutesInThisHour = remainingMinutes;
-                hourData = Array.isArray(hourData) ? hourData.slice(0, minutesInThisHour) : [];
+            if (currentDownRun > 0) {
+              if (currentDownRun >= MIN_DOWNTIME_MINUTES) {
+                downtimeMinutes += currentDownRun;
+              } else {
+                uptimeMinutes += currentDownRun;
               }
+              currentDownRun = 0;
             }
+            uptimeMinutes += 1;
           }
-          const hasXArchitecture = Array.isArray(hourData) && hourData.some((val) => val === "x");
-          if (hasXArchitecture) {
-            const xCount = hourData.filter((val) => val === "x").length;
-            if (xCount <= 2) {
-              actualMinutes += minutesInThisHour;
-            } else {
-              const uptimeCount = hourData.filter((val) => val !== "x").length;
-              actualMinutes += Math.min(uptimeCount, minutesInThisHour);
-            }
+        }
+        if (currentDownRun > 0) {
+          if (currentDownRun >= MIN_DOWNTIME_MINUTES) {
+            downtimeMinutes += currentDownRun;
           } else {
-            const arrayLength = Array.isArray(hourData) ? hourData.length : 0;
-            if (arrayLength >= Math.min(58, minutesInThisHour - 2)) {
-              actualMinutes += minutesInThisHour;
-            } else {
-              actualMinutes += Math.min(arrayLength, minutesInThisHour);
-            }
+            uptimeMinutes += currentDownRun;
           }
-          totalPossibleMinutes += minutesInThisHour;
+          currentDownRun = 0;
         }
-        const percentage = totalPossibleMinutes > 0 ? Math.round(actualMinutes / totalPossibleMinutes * 1e3) / 10 : 100;
+        const completedWindow = uptimeMinutes + downtimeMinutes;
+        const percentage = completedWindow > 0 ? Number((uptimeMinutes / completedWindow * 100).toFixed(1)) : 100;
         uptimeMap.set(record.workspace_id, {
-          expectedMinutes: totalPossibleMinutes,
-          actualMinutes,
+          expectedMinutes: completedMinutes,
+          actualMinutes: uptimeMinutes,
           percentage,
           lastCalculated: (/* @__PURE__ */ new Date()).toISOString()
         });
@@ -2925,8 +3057,8 @@ var AuthService = class {
             "Authorization": `Bearer ${accessToken}`,
             "Content-Type": "application/json"
           },
-          timeout: 3e5,
-          // 5 minutes
+          timeout: 1e4,
+          // 10 seconds
           retries: 1,
           silentErrors: false
           // We want to know about auth errors
@@ -2963,8 +3095,8 @@ var AuthService = class {
             "Authorization": `Bearer ${accessToken}`,
             "Content-Type": "application/json"
           },
-          timeout: 3e5,
-          // 5 minutes
+          timeout: 1e4,
+          // 10 seconds
           retries: 2,
           // More retries for validation
           silentErrors: true,
@@ -2996,8 +3128,8 @@ var AuthService = class {
           "Authorization": `Bearer ${accessToken}`,
           "Content-Type": "application/json"
         },
-        timeout: 3e5,
-        // 5 minutes
+        timeout: 1e4,
+        // 10 seconds
         retries: 1,
         silentErrors: false
       }
@@ -10897,6 +11029,65 @@ var useWorkspaceHealthStatus = (workspaceId) => {
     refetch: fetchHealthStatus
   };
 };
+var useWorkspaceUptimeTimeline = (options) => {
+  const {
+    workspaceId,
+    companyId,
+    enabled = true,
+    refreshInterval
+  } = options;
+  const [timeline, setTimeline] = React23.useState(null);
+  const [loading, setLoading] = React23.useState(false);
+  const [error, setError] = React23.useState(null);
+  const isFetchingRef = React23.useRef(false);
+  const intervalRef = React23.useRef(null);
+  const fetchTimeline = React23.useCallback(async () => {
+    if (!enabled) return;
+    if (!workspaceId || !companyId) {
+      setTimeline(null);
+      return;
+    }
+    if (isFetchingRef.current) return;
+    try {
+      isFetchingRef.current = true;
+      setLoading(true);
+      setError(null);
+      const data = await workspaceHealthService.getWorkspaceUptimeTimeline(
+        workspaceId,
+        companyId
+      );
+      setTimeline(data);
+    } catch (err) {
+      console.error("[useWorkspaceUptimeTimeline] Failed to fetch timeline:", err);
+      setError({ message: err?.message || "Failed to load uptime timeline", code: err?.code || "FETCH_ERROR" });
+    } finally {
+      setLoading(false);
+      isFetchingRef.current = false;
+    }
+  }, [enabled, workspaceId, companyId]);
+  React23.useEffect(() => {
+    fetchTimeline();
+  }, [fetchTimeline]);
+  React23.useEffect(() => {
+    if (!refreshInterval || refreshInterval <= 0 || !enabled) {
+      return;
+    }
+    intervalRef.current = setInterval(() => {
+      fetchTimeline();
+    }, refreshInterval);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [refreshInterval, enabled, fetchTimeline]);
+  return {
+    timeline,
+    loading,
+    error,
+    refetch: fetchTimeline
+  };
+};
 function useDateFormatter() {
   const { defaultTimezone, defaultLocale, dateFormatOptions, timeFormatOptions, dateTimeFormatOptions } = useDateTimeConfig();
   const formatDate = React23.useCallback(
@@ -10912,7 +11103,7 @@ function useDateFormatter() {
     },
     [defaultTimezone, defaultLocale, dateFormatOptions]
   );
-  const formatTime3 = React23.useCallback(
+  const formatTime5 = React23.useCallback(
     (date, formatString) => {
       const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
       if (!dateFns.isValid(dateObj)) return "Invalid Time";
@@ -10943,7 +11134,7 @@ function useDateFormatter() {
   }, []);
   return {
     formatDate,
-    formatTime: formatTime3,
+    formatTime: formatTime5,
     formatDateTime,
     getNow,
     timezone: defaultTimezone || "UTC",
@@ -23929,7 +24120,7 @@ var HourlyOutputChartComponent = ({
       endHour = Math.floor(endDecimalHour) % 24;
       endMinute = Math.round(endDecimalHour % 1 * 60);
     }
-    const formatTime3 = (h, m) => {
+    const formatTime5 = (h, m) => {
       const period = h >= 12 ? "PM" : "AM";
       const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
       if (m === 0) {
@@ -23937,9 +24128,9 @@ var HourlyOutputChartComponent = ({
       }
       return `${hour12}:${m.toString().padStart(2, "0")}${period}`;
     };
-    return `${formatTime3(startHour, startMinute)}-${formatTime3(endHour, endMinute)}`;
+    return `${formatTime5(startHour, startMinute)}-${formatTime5(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const formatTimeRange = React23__namespace.default.useCallback((hourIndex) => {
+  const formatTimeRange2 = React23__namespace.default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -23953,12 +24144,12 @@ var HourlyOutputChartComponent = ({
       endHour = Math.floor(endDecimalHour) % 24;
       endMinute = Math.round(endDecimalHour % 1 * 60);
     }
-    const formatTime3 = (h, m) => {
+    const formatTime5 = (h, m) => {
       const period = h >= 12 ? "PM" : "AM";
       const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
       return `${hour12}:${m.toString().padStart(2, "0")} ${period}`;
     };
-    return `${formatTime3(startHour, startMinute)} - ${formatTime3(endHour, endMinute)}`;
+    return `${formatTime5(startHour, startMinute)} - ${formatTime5(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
   const chartData = React23__namespace.default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
@@ -24019,7 +24210,7 @@ var HourlyOutputChartComponent = ({
       idleMinutes = idleArray.filter((val) => val === "1" || val === 1).length;
       return {
         hour: formatHour(i),
-        timeRange: formatTimeRange(i),
+        timeRange: formatTimeRange2(i),
         output: animatedData[i] || 0,
         originalOutput: data[i] || 0,
         // Keep original data for labels
@@ -24028,7 +24219,7 @@ var HourlyOutputChartComponent = ({
         idleArray
       };
     });
-  }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange, SHIFT_DURATION]);
+  }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange2, SHIFT_DURATION]);
   const IdleBar = React23__namespace.default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -25129,7 +25320,7 @@ var SOPComplianceChart = ({
       }
     };
   }, [data, animateToNewData, mockData]);
-  const formatTime3 = (minuteIndex) => {
+  const formatTime5 = (minuteIndex) => {
     const totalMinutes = shiftStartHour * 60 + minuteIndex;
     const hours = Math.floor(totalMinutes / 60) % 24;
     const minutes = totalMinutes % 60;
@@ -25141,7 +25332,7 @@ var SOPComplianceChart = ({
     const hasDataForMinute = index < animatedData.length - 10;
     return {
       minute: index,
-      time: formatTime3(index),
+      time: formatTime5(index),
       compliance: hasDataForMinute ? animatedData[index] : null
     };
   });
@@ -25575,7 +25766,7 @@ var DateTimeDisplay = ({
   const {
     defaultTimezone
   } = useDateTimeConfig();
-  const { formatDate, formatTime: formatTime3 } = useDateFormatter();
+  const { formatDate, formatTime: formatTime5 } = useDateFormatter();
   const [now2, setNow] = React23.useState(() => getCurrentTimeInZone(defaultTimezone || "UTC"));
   React23.useEffect(() => {
     const timerId = setInterval(() => {
@@ -25587,7 +25778,7 @@ var DateTimeDisplay = ({
     return null;
   }
   const formattedDate = showDate ? formatDate(now2) : "";
-  const formattedTime = showTime ? formatTime3(now2) : "";
+  const formattedTime = showTime ? formatTime5(now2) : "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300", className), children: [
     showDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "date-display", "aria-label": `Current date: ${formattedDate}`, children: formattedDate }),
     showDate && showTime && formattedDate && formattedTime && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "separator", "aria-hidden": "true", children: "|" }),
@@ -25751,7 +25942,7 @@ var BreakNotificationPopup = ({
   const handlePrevious = () => {
     setCurrentIndex((prev) => (prev - 1 + visibleBreaks.length) % visibleBreaks.length);
   };
-  const formatTime3 = (minutes) => {
+  const formatTime5 = (minutes) => {
     const hours = Math.floor(minutes / 60);
     const mins = minutes % 60;
     if (hours > 0) {
@@ -25825,9 +26016,9 @@ var BreakNotificationPopup = ({
                 formatTo12Hour(currentBreak.endTime)
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mb-2", children: [
-                formatTime3(currentBreak.elapsedMinutes),
+                formatTime5(currentBreak.elapsedMinutes),
                 " elapsed of ",
-                formatTime3(currentBreak.duration),
+                formatTime5(currentBreak.duration),
                 " total"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -26131,64 +26322,208 @@ var getSeverityColor = (severity) => {
       return "bg-gray-500";
   }
 };
-var PlayPauseIndicator = ({
-  show,
+var formatTime2 = (seconds) => {
+  if (!seconds || isNaN(seconds)) return "0:00";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) {
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  }
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
+var VideoControls = ({
   isPlaying,
-  duration = 600
+  currentTime,
+  duration,
+  buffered,
+  showControls,
+  controlsPinned = false,
+  onTogglePinControls,
+  playbackRate = 1,
+  onPlayPause,
+  onSeek,
+  onSeekStart,
+  onSeekEnd,
+  onToggleFullscreen,
+  onPlaybackRateChange,
+  className = ""
 }) => {
-  const [isVisible, setIsVisible] = React23.useState(false);
-  const [isFading, setIsFading] = React23.useState(false);
+  const [isDragging, setIsDragging] = React23.useState(false);
+  const [dragTime, setDragTime] = React23.useState(0);
+  const [isHoveringProgressBar, setIsHoveringProgressBar] = React23.useState(false);
+  const [showSpeedMenu, setShowSpeedMenu] = React23.useState(false);
+  const speedMenuRef = React23.useRef(null);
+  const progressColor = "#4b5563";
+  const controlsVisible = showControls || controlsPinned;
+  const getPercentage = (current, total) => {
+    if (!total || total === 0) return 0;
+    return Math.min(Math.max(current / total * 100, 0), 100);
+  };
+  const handleSeekChange = (e) => {
+    const newTime = parseFloat(e.target.value);
+    setDragTime(newTime);
+    onSeek(newTime);
+  };
+  const handleSeekStart = () => {
+    setIsDragging(true);
+    setDragTime(currentTime);
+    onSeekStart?.();
+  };
+  const handleSeekEnd = () => {
+    setIsDragging(false);
+    onSeekEnd?.();
+  };
   React23.useEffect(() => {
-    if (show) {
-      setIsVisible(true);
-      setIsFading(false);
-      const fadeTimer = setTimeout(() => {
-        setIsFading(true);
-      }, 100);
-      const hideTimer = setTimeout(() => {
-        setIsVisible(false);
-        setIsFading(false);
-      }, duration);
-      return () => {
-        clearTimeout(fadeTimer);
-        clearTimeout(hideTimer);
-      };
-    }
-  }, [show, duration]);
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+    const handleClickOutside = (event) => {
+      if (speedMenuRef.current && !speedMenuRef.current.contains(event.target)) {
+        setShowSpeedMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const displayTime = isDragging ? dragTime : currentTime;
+  const progressPercent = getPercentage(displayTime, duration);
+  const bufferedPercent = getPercentage(buffered, duration);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10",
-      style: {
-        opacity: isFading ? 0 : 1,
-        transition: `opacity ${duration - 100}ms ease-out`
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-black/70 rounded-full p-6", children: isPlaying ? (
-        // Play icon (triangle)
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "white",
-            className: "w-16 h-16",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" })
-          }
-        )
-      ) : (
-        // Pause icon (two bars)
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
+      className: `absolute bottom-0 left-0 right-0 px-3 pb-3 pt-12 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"} ${className}`,
+      style: { touchAction: "none" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "white",
-            className: "w-16 h-16",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
+            className: "relative h-1 mb-4 group cursor-pointer",
+            onMouseEnter: () => setIsHoveringProgressBar(true),
+            onMouseLeave: () => setIsHoveringProgressBar(false),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-2 -bottom-2 left-0 right-0 z-20" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 bottom-0 bg-white/20 rounded-full overflow-hidden z-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute top-0 left-0 bottom-0 bg-white/40 transition-all duration-200",
+                  style: { width: `${bufferedPercent}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute top-0 left-0 bottom-0 bg-[#007bff] transition-all duration-75 z-10",
+                  style: { width: `${progressPercent}%`, backgroundColor: progressColor },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: `absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-3 h-3 rounded-full shadow transform transition-transform duration-200 ${isHoveringProgressBar || isDragging ? "scale-100" : "scale-0"}`,
+                      style: { backgroundColor: progressColor }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: duration || 100,
+                  step: "0.1",
+                  value: displayTime,
+                  onChange: handleSeekChange,
+                  onMouseDown: handleSeekStart,
+                  onMouseUp: handleSeekEnd,
+                  onTouchStart: handleSeekStart,
+                  onTouchEnd: handleSeekEnd,
+                  className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30 margin-0 padding-0"
+                }
+              )
+            ]
           }
-        )
-      ) })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onPlayPause();
+                },
+                className: "hover:text-[#007bff] transition-colors focus:outline-none",
+                "aria-label": isPlaying ? "Pause" : "Play",
+                children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs font-medium font-sans", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime2(displayTime) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 text-white/70", children: "/" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white/70", children: formatTime2(duration) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+            onTogglePinControls && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onTogglePinControls();
+                },
+                className: `transition-colors focus:outline-none ${controlsPinned ? "text-[#007bff]" : "hover:text-[#007bff]"}`,
+                "aria-label": controlsPinned ? "Unpin controls" : "Pin controls",
+                title: controlsPinned ? "Unpin controls" : "Pin controls",
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: controlsPinned ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3h6l-1 7h3v2h-4.5l-.5 4.5-2 1L10 12H6v-2h3z" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3h6l-1 7h3v2h-4v5l-2 1-1-6H6v-2h3z" }) })
+              }
+            ),
+            onPlaybackRateChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: speedMenuRef, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowSpeedMenu(!showSpeedMenu);
+                  },
+                  className: "text-xs font-medium hover:text-[#007bff] transition-colors focus:outline-none min-w-[32px]",
+                  "aria-label": "Playback Speed",
+                  children: [
+                    playbackRate,
+                    "x"
+                  ]
+                }
+              ),
+              showSpeedMenu && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-full right-0 mb-2 bg-black/90 text-white rounded shadow-lg overflow-hidden z-50 min-w-[80px]", children: [0.5, 1, 1.5, 2, 2.5, 3, 4, 5].map((rate) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onPlaybackRateChange(rate);
+                    setShowSpeedMenu(false);
+                  },
+                  className: `block w-full text-left px-4 py-2 text-xs hover:bg-white/20 transition-colors ${playbackRate === rate ? "text-[#007bff] font-bold" : ""}`,
+                  children: [
+                    rate,
+                    "x"
+                  ]
+                },
+                rate
+              )) })
+            ] }),
+            onToggleFullscreen && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleFullscreen();
+                },
+                className: "hover:text-[#007bff] transition-colors focus:outline-none",
+                "aria-label": "Toggle Fullscreen",
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+              }
+            )
+          ] })
+        ] })
+      ]
     }
   );
 };
@@ -26316,9 +26651,15 @@ var HlsVideoPlayer = React23.forwardRef(({
   const blobUrlRef = React23.useRef(null);
   const [isReady, setIsReady] = React23.useState(false);
   const [isLoading, setIsLoading] = React23.useState(true);
-  const [showIndicator, setShowIndicator] = React23.useState(false);
-  const [indicatorIsPlaying, setIndicatorIsPlaying] = React23.useState(false);
-  const indicatorKeyRef = React23.useRef(0);
+  const [showControls, setShowControls] = React23.useState(true);
+  const [controlsPinned, setControlsPinned] = React23.useState(false);
+  const [isPlaying, setIsPlaying] = React23.useState(false);
+  const [currentTime, setCurrentTime] = React23.useState(0);
+  const [duration, setDuration] = React23.useState(0);
+  const [buffered, setBuffered] = React23.useState(0);
+  const [playbackRate, setPlaybackRate] = React23.useState(1);
+  const userSeekingRef = React23.useRef(false);
+  const controlsTimeoutRef = React23.useRef(null);
   const eventCallbacksRef = React23.useRef({
     onReady,
     onPlay,
@@ -26497,8 +26838,6 @@ var HlsVideoPlayer = React23.forwardRef(({
             }
           });
           hls.on(Hls3.Events.FRAG_LOADING, () => {
-            setIsLoading(true);
-            eventCallbacksRef.current.onLoadingChange?.(true);
           });
           hls.on(Hls3.Events.FRAG_LOADED, () => {
             setIsLoading(false);
@@ -26552,25 +26891,52 @@ var HlsVideoPlayer = React23.forwardRef(({
     const handleCanPlay = () => {
       if (!hlsRef.current) {
         setIsReady(true);
-        onReady?.(player);
       }
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      onReady?.(player);
+    };
+    const handlePlay = () => {
+      setIsPlaying(true);
+      eventCallbacksRef.current.onPlay?.(player);
+    };
+    const handlePause = () => {
+      if (userSeekingRef.current && videoRef.current) {
+        videoRef.current.play().catch((err) => console.warn("Auto-resume after seek pause failed:", err));
+        return;
+      }
+      setIsPlaying(false);
+      eventCallbacksRef.current.onPause?.(player);
     };
-    const handlePlay = () => eventCallbacksRef.current.onPlay?.(player);
-    const handlePause = () => eventCallbacksRef.current.onPause?.(player);
     const handlePlaying = () => {
       setIsLoading(false);
+      setIsPlaying(true);
       eventCallbacksRef.current.onLoadingChange?.(false);
       eventCallbacksRef.current.onPlaying?.(player);
     };
     const handleTimeUpdate = () => {
       const currentTime2 = video.currentTime || 0;
+      setCurrentTime(currentTime2);
+      if (video.buffered.length > 0) {
+        for (let i = 0; i < video.buffered.length; i++) {
+          if (video.buffered.start(i) <= currentTime2 && video.buffered.end(i) >= currentTime2) {
+            setBuffered(video.buffered.end(i));
+            break;
+          }
+        }
+      }
       eventCallbacksRef.current.onTimeUpdate?.(player, currentTime2);
     };
     const handleDurationChange = () => {
       const duration2 = video.duration || 0;
+      setDuration(duration2);
       eventCallbacksRef.current.onDurationChange?.(player, duration2);
     };
-    const handleEnded = () => eventCallbacksRef.current.onEnded?.(player);
+    const handleEnded = () => {
+      setIsPlaying(false);
+      userSeekingRef.current = false;
+      eventCallbacksRef.current.onEnded?.(player);
+    };
     const handleLoadStart = () => {
       setIsLoading(true);
       eventCallbacksRef.current.onLoadingChange?.(true);
@@ -26586,8 +26952,19 @@ var HlsVideoPlayer = React23.forwardRef(({
       setIsLoading(true);
       eventCallbacksRef.current.onLoadingChange?.(true);
     };
-    const handleSeeking = () => eventCallbacksRef.current.onSeeking?.(player);
-    const handleSeeked = () => eventCallbacksRef.current.onSeeked?.(player);
+    const handleSeeking = () => {
+      userSeekingRef.current = true;
+      eventCallbacksRef.current.onSeeking?.(player);
+    };
+    const handleSeeked = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      if (videoRef.current) {
+        videoRef.current.play().catch((err) => console.warn("Resume playback after seek failed:", err));
+      }
+      userSeekingRef.current = false;
+      eventCallbacksRef.current.onSeeked?.(player);
+    };
     const handleError = () => {
       const error = video.error;
       if (error) {
@@ -26600,6 +26977,10 @@ var HlsVideoPlayer = React23.forwardRef(({
         eventCallbacksRef.current.onError?.(player, errorInfo);
       }
     };
+    const handlePlaybackRateChange2 = (e) => {
+      const target = e.target;
+      setPlaybackRate(target.playbackRate);
+    };
     video.addEventListener("canplay", handleCanPlay);
     video.addEventListener("play", handlePlay);
     video.addEventListener("pause", handlePause);
@@ -26614,6 +26995,7 @@ var HlsVideoPlayer = React23.forwardRef(({
     video.addEventListener("seeking", handleSeeking);
     video.addEventListener("seeked", handleSeeked);
     video.addEventListener("error", handleError);
+    video.addEventListener("ratechange", handlePlaybackRateChange2);
     return () => {
       video.removeEventListener("canplay", handleCanPlay);
       video.removeEventListener("play", handlePlay);
@@ -26629,6 +27011,7 @@ var HlsVideoPlayer = React23.forwardRef(({
       video.removeEventListener("seeking", handleSeeking);
       video.removeEventListener("seeked", handleSeeked);
       video.removeEventListener("error", handleError);
+      video.removeEventListener("ratechange", handlePlaybackRateChange2);
     };
   }, [
     src,
@@ -26657,20 +27040,46 @@ var HlsVideoPlayer = React23.forwardRef(({
       }
     }
   }, [autoplay]);
+  const resetControlsTimeout = React23.useCallback(() => {
+    if (controlsPinned) {
+      setShowControls(true);
+      return;
+    }
+    setShowControls(true);
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+    if (isPlaying) {
+      controlsTimeoutRef.current = setTimeout(() => {
+        setShowControls(false);
+      }, 3e3);
+    }
+  }, [isPlaying, controlsPinned]);
+  const handleMouseMove = React23.useCallback(() => {
+    resetControlsTimeout();
+  }, [resetControlsTimeout]);
+  React23.useEffect(() => {
+    resetControlsTimeout();
+    return () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    };
+  }, [isPlaying, resetControlsTimeout]);
   const play = React23.useCallback(() => {
     return videoRef.current?.play();
   }, []);
   const pause = React23.useCallback(() => {
     videoRef.current?.pause();
   }, []);
-  const currentTime = React23.useCallback((time2) => {
+  const currentTimeProp = React23.useCallback((time2) => {
     if (time2 !== void 0 && videoRef.current) {
       videoRef.current.currentTime = time2;
       return time2;
     }
     return videoRef.current?.currentTime || 0;
   }, []);
-  const duration = React23.useCallback(() => {
+  const durationProp = React23.useCallback(() => {
     return videoRef.current?.duration || 0;
   }, []);
   const paused = React23.useCallback(() => {
@@ -26683,95 +27092,144 @@ var HlsVideoPlayer = React23.forwardRef(({
     }
     return videoRef.current?.muted ?? false;
   }, []);
-  const volume = React23.useCallback((level) => {
+  const volumeProp = React23.useCallback((level) => {
     if (level !== void 0 && videoRef.current) {
       videoRef.current.volume = level;
       return level;
     }
     return videoRef.current?.volume ?? 1;
   }, []);
-  const playbackRate = React23.useCallback((rate) => {
+  const playbackRateProp = React23.useCallback((rate) => {
     if (rate !== void 0 && videoRef.current) {
       videoRef.current.playbackRate = rate;
       return rate;
     }
     return videoRef.current?.playbackRate ?? 1;
   }, []);
+  const handleTogglePlay = React23.useCallback(() => {
+    if (videoRef.current) {
+      if (videoRef.current.paused) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+      }
+    }
+  }, []);
+  const handleSeek = React23.useCallback((time2) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = time2;
+      videoRef.current.play().catch((err) => console.warn("Resume playback failed during seek:", err));
+    }
+  }, []);
+  const handleSeekStart = React23.useCallback(() => {
+    userSeekingRef.current = true;
+  }, []);
+  const handleSeekEnd = React23.useCallback(() => {
+    if (videoRef.current) {
+      videoRef.current.play().catch((err) => console.warn("Resume playback failed after seek:", err));
+    }
+  }, []);
+  const handlePlaybackRateChange = React23.useCallback((rate) => {
+    if (videoRef.current) {
+      videoRef.current.playbackRate = rate;
+    }
+  }, []);
+  const handleToggleFullscreen = React23.useCallback(() => {
+    if (videoContainerRef.current) {
+      if (!document.fullscreenElement) {
+        videoContainerRef.current.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+  }, []);
   React23.useImperativeHandle(ref, () => ({
     hls: hlsRef.current,
     video: videoRef.current,
     play,
     pause,
-    currentTime,
-    duration,
+    currentTime: currentTimeProp,
+    duration: durationProp,
     paused,
     mute,
-    volume,
-    playbackRate,
+    volume: volumeProp,
+    playbackRate: playbackRateProp,
     dispose,
     isReady,
     // For backward compatibility with Video.js API
     player: playerLikeObject()
-  }), [play, pause, currentTime, duration, paused, mute, volume, playbackRate, dispose, isReady, playerLikeObject]);
-  const handleClickWithIndicator = React23.useCallback(() => {
-    if (!onClick || !videoRef.current) return;
-    const willBePlaying = videoRef.current.paused;
-    setIndicatorIsPlaying(willBePlaying);
-    setShowIndicator(false);
-    setTimeout(() => {
-      indicatorKeyRef.current += 1;
-      setShowIndicator(true);
-    }, 0);
-    onClick();
-  }, [onClick]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `hls-video-player-wrapper ${className}`, style: { position: "relative", width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "hls-video-player-container",
-        ref: videoContainerRef,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "video",
+  }), [play, pause, currentTimeProp, durationProp, paused, mute, volumeProp, playbackRateProp, dispose, isReady, playerLikeObject]);
+  const handleContainerClick = React23.useCallback(() => {
+    if (!onClick && !controls) {
+      handleTogglePlay();
+    }
+    if (onClick) {
+      onClick();
+    }
+  }, [onClick, controls, handleTogglePlay]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `hls-video-player-wrapper ${className} group`,
+      style: { position: "relative", width: "100%", height: "100%" },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => isPlaying && !controlsPinned && setShowControls(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            ref: videoRef,
-            className: "hls-video-element",
-            poster,
-            controls,
-            loop,
-            muted,
-            playsInline,
-            autoPlay: autoplay,
-            preload: "metadata"
+            className: "hls-video-player-container",
+            ref: videoContainerRef,
+            onClick: handleContainerClick,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "video",
+                {
+                  ref: videoRef,
+                  className: "hls-video-element",
+                  poster,
+                  controls: false,
+                  loop,
+                  muted,
+                  playsInline,
+                  autoPlay: autoplay,
+                  preload: "metadata"
+                }
+              ),
+              controls && /* @__PURE__ */ jsxRuntime.jsx(
+                VideoControls,
+                {
+                  isPlaying,
+                  currentTime,
+                  duration,
+                  buffered,
+                  showControls: controlsPinned || showControls || !isPlaying,
+                  controlsPinned,
+                  playbackRate,
+                  onPlayPause: handleTogglePlay,
+                  onSeek: handleSeek,
+                  onSeekStart: handleSeekStart,
+                  onSeekEnd: handleSeekEnd,
+                  onPlaybackRateChange: handlePlaybackRateChange,
+                  onTogglePinControls: () => setControlsPinned((prev) => {
+                    const next = !prev;
+                    if (next) {
+                      setShowControls(true);
+                    } else {
+                      resetControlsTimeout();
+                    }
+                    return next;
+                  }),
+                  onToggleFullscreen: handleToggleFullscreen
+                }
+              )
+            ]
           }
-        )
-      }
-    ),
-    isLoading && !externalLoadingControl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hls-video-player-loading", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-    onClick && !controls && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        onClick: handleClickWithIndicator,
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: 1,
-          cursor: "pointer"
-        },
-        "aria-label": "Click to play/pause"
-      }
-    ),
-    onClick && !controls && /* @__PURE__ */ jsxRuntime.jsx(
-      PlayPauseIndicator,
-      {
-        show: showIndicator,
-        isPlaying: indicatorIsPlaying
-      },
-      indicatorKeyRef.current
-    )
-  ] });
+        ),
+        isLoading && !externalLoadingControl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hls-video-player-loading", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) })
+      ]
+    }
+  );
 });
 HlsVideoPlayer.displayName = "HlsVideoPlayer";
 var VideoPlayer = HlsVideoPlayer;
@@ -26779,6 +27237,7 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
   crop,
   debug = false,
   onClick,
+  controls = true,
   ...videoProps
 }, ref) => {
   const {
@@ -26800,9 +27259,15 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
   const [isVideoReady, setIsVideoReady] = React23.useState(false);
   const [canvasDimensions, setCanvasDimensions] = React23.useState({ width: 0, height: 0 });
   const [isProcessing, setIsProcessing] = React23.useState(false);
-  const [showIndicator, setShowIndicator] = React23.useState(false);
-  const [indicatorIsPlaying, setIndicatorIsPlaying] = React23.useState(false);
-  const indicatorKeyRef = React23.useRef(0);
+  const [showControls, setShowControls] = React23.useState(true);
+  const [isPlaying, setIsPlaying] = React23.useState(false);
+  const [currentTime, setCurrentTime] = React23.useState(0);
+  const [duration, setDuration] = React23.useState(0);
+  const [buffered, setBuffered] = React23.useState(0);
+  const [playbackRate, setPlaybackRate] = React23.useState(1);
+  const controlsTimeoutRef = React23.useRef(null);
+  const userSeekingRef = React23.useRef(false);
+  const [controlsPinned, setControlsPinned] = React23.useState(false);
   const stopCanvasRendering = React23.useCallback(() => {
     if (animationFrameRef.current) {
       cancelAnimationFrame(animationFrameRef.current);
@@ -26887,7 +27352,7 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
     const canvas = canvasRef.current;
     const video = videoElementRef.current;
     const ctx = canvas.getContext("2d");
-    if (!ctx || video.paused || video.ended) {
+    if (!ctx || video.readyState < 2) {
       return;
     }
     const videoWidth = video.videoWidth;
@@ -26914,7 +27379,9 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
       canvas.height
       // Destination (full canvas)
     );
-    animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
+    if (!video.paused && !video.ended) {
+      animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
+    }
   }, [crop]);
   const handleVideoReady = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video player ready");
@@ -26922,11 +27389,15 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
     if (videoEl) {
       videoElementRef.current = videoEl;
       setIsVideoReady(true);
+      if (videoEl.readyState >= 2) {
+        renderFrameToCanvas();
+      }
     }
     onReadyProp?.(player);
-  }, [onReadyProp]);
+  }, [onReadyProp, renderFrameToCanvas]);
   const handleVideoPlay = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video playing, starting canvas rendering");
+    setIsPlaying(true);
     if (crop && canvasRef.current) {
       setIsProcessing(true);
       renderFrameToCanvas();
@@ -26934,43 +27405,40 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
     onPlayProp?.(player);
   }, [crop, renderFrameToCanvas, onPlayProp]);
   const handleVideoPause = React23.useCallback((player) => {
-    console.log("[CroppedHlsVideoPlayer] Video paused, stopping canvas rendering and CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video paused, stopping canvas rendering (keeping last frame)");
+    if (userSeekingRef.current && hiddenVideoRef.current) {
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+      return;
+    }
     stopCanvasRendering();
     setIsProcessing(false);
-    if (canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-      }
-    }
+    setIsPlaying(false);
+    renderFrameToCanvas();
     onPauseProp?.(player);
-  }, [stopCanvasRendering, onPauseProp]);
+  }, [stopCanvasRendering, onPauseProp, renderFrameToCanvas]);
   const handleVideoEnded = React23.useCallback((player) => {
-    console.log("[CroppedHlsVideoPlayer] Video ended, CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video ended, stopping canvas rendering (keeping last frame)");
     stopCanvasRendering();
     setIsProcessing(false);
-    if (canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-      }
-    }
+    setIsPlaying(false);
+    userSeekingRef.current = false;
     onEndedProp?.(player);
   }, [stopCanvasRendering, onEndedProp]);
   const handleSeeking = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video seeking");
-    if (crop && !videoElementRef.current?.paused) {
+    userSeekingRef.current = true;
+    if (crop) {
       renderFrameToCanvas();
     }
     onSeekingProp?.(player);
   }, [crop, renderFrameToCanvas, onSeekingProp]);
   const handleSeeked = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video seeked");
-    if (crop && !videoElementRef.current?.paused) {
+    hiddenVideoRef.current?.play()?.catch(() => {
+    });
+    userSeekingRef.current = false;
+    if (crop) {
       renderFrameToCanvas();
     }
     onSeekedProp?.(player);
@@ -26978,8 +27446,29 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
   const handleLoadedMetadata = React23.useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video metadata loaded");
     calculateCanvasDimensions();
+    if (hiddenVideoRef.current?.video) {
+      setDuration(hiddenVideoRef.current.video.duration || 0);
+    }
+    requestAnimationFrame(() => renderFrameToCanvas());
     onLoadedMetadataProp?.(player);
-  }, [calculateCanvasDimensions, onLoadedMetadataProp]);
+  }, [calculateCanvasDimensions, onLoadedMetadataProp, renderFrameToCanvas]);
+  const handleTimeUpdate = React23.useCallback((player, time2) => {
+    setCurrentTime(time2);
+    if (hiddenVideoRef.current?.video && hiddenVideoRef.current.video.buffered.length > 0) {
+      const video = hiddenVideoRef.current.video;
+      for (let i = 0; i < video.buffered.length; i++) {
+        if (video.buffered.start(i) <= time2 && video.buffered.end(i) >= time2) {
+          setBuffered(video.buffered.end(i));
+          break;
+        }
+      }
+    }
+    videoProps.onTimeUpdate?.(player, time2);
+  }, [videoProps.onTimeUpdate]);
+  const handleDurationChange = React23.useCallback((player, dur) => {
+    setDuration(dur);
+    videoProps.onDurationChange?.(player, dur);
+  }, [videoProps.onDurationChange]);
   React23.useEffect(() => {
     calculateCanvasDimensions();
     const handleResize = () => {
@@ -27007,33 +27496,97 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
       stopCanvasRendering();
     };
   }, [stopCanvasRendering]);
+  const resetControlsTimeout = React23.useCallback(() => {
+    if (controlsPinned) {
+      setShowControls(true);
+      return;
+    }
+    setShowControls(true);
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+    if (isPlaying) {
+      controlsTimeoutRef.current = setTimeout(() => {
+        setShowControls(false);
+      }, 3e3);
+    }
+  }, [isPlaying, controlsPinned]);
+  const handleMouseMove = React23.useCallback(() => {
+    resetControlsTimeout();
+  }, [resetControlsTimeout]);
+  React23.useEffect(() => {
+    resetControlsTimeout();
+    return () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    };
+  }, [isPlaying, resetControlsTimeout]);
+  const handleTogglePlay = React23.useCallback(() => {
+    if (hiddenVideoRef.current?.video) {
+      if (hiddenVideoRef.current.video.paused) {
+        hiddenVideoRef.current.play();
+      } else {
+        hiddenVideoRef.current.pause();
+      }
+    }
+  }, []);
+  const handleSeek = React23.useCallback((time2) => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.currentTime(time2);
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+      setTimeout(() => renderFrameToCanvas(), 50);
+    }
+  }, [renderFrameToCanvas]);
+  const handleSeekStart = React23.useCallback(() => {
+    userSeekingRef.current = true;
+  }, []);
+  const handleSeekEnd = React23.useCallback(() => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+    }
+  }, []);
+  const handlePlaybackRateChange = React23.useCallback((rate) => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.playbackRate(rate);
+      setPlaybackRate(rate);
+    }
+  }, []);
+  const handleToggleFullscreen = React23.useCallback(() => {
+    if (videoContainerRef.current) {
+      if (!document.fullscreenElement) {
+        videoContainerRef.current.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+  }, []);
   if (!crop) {
-    return /* @__PURE__ */ jsxRuntime.jsx(HlsVideoPlayer, { ref, ...videoProps, onClick });
-  }
-  const handleClickWithIndicator = () => {
-    if (!onClick || !hiddenVideoRef.current?.video) return;
-    const video = hiddenVideoRef.current.video;
-    const willBePlaying = video.paused;
-    setIndicatorIsPlaying(willBePlaying);
-    setShowIndicator(false);
-    setTimeout(() => {
-      indicatorKeyRef.current += 1;
-      setShowIndicator(true);
-    }, 0);
-    onClick();
+    return /* @__PURE__ */ jsxRuntime.jsx(HlsVideoPlayer, { ref, ...videoProps, onClick, controls });
+  }
+  const handleClick = () => {
+    if (!onClick && !controls) {
+      handleTogglePlay();
+    }
+    if (onClick) onClick();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${inheritedClassName}`,
-      onClick: handleClickWithIndicator,
+      className: `relative w-full h-full flex items-center justify-center bg-black group ${inheritedClassName} ${onClick || controls ? "cursor-pointer" : ""}`,
+      onClick: handleClick,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => isPlaying && !controlsPinned && setShowControls(false),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           HlsVideoPlayer,
           {
             ref: hiddenVideoRef,
             ...videoProps,
+            controls: false,
             onReady: handleVideoReady,
             onPlay: handleVideoPlay,
             onPause: handleVideoPause,
@@ -27043,7 +27596,9 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
             onLoadedMetadata: handleLoadedMetadata,
             onLoadedData: videoProps.onLoadedData,
             onPlaying: videoProps.onPlaying,
-            onLoadingChange: videoProps.onLoadingChange
+            onLoadingChange: videoProps.onLoadingChange,
+            onTimeUpdate: handleTimeUpdate,
+            onDurationChange: handleDurationChange
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -27060,8 +27615,8 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
             }
           }
         ),
-        !isVideoReady && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        debug && isVideoReady && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono", children: [
+        !isVideoReady && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+        debug && isVideoReady && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono pointer-events-none z-20", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             "Crop: ",
             crop.x,
@@ -27085,13 +27640,32 @@ var CroppedHlsVideoPlayer = React23.forwardRef(({
             isProcessing ? "Yes" : "No"
           ] })
         ] }),
-        onClick && /* @__PURE__ */ jsxRuntime.jsx(
-          PlayPauseIndicator,
+        controls && isVideoReady && /* @__PURE__ */ jsxRuntime.jsx(
+          VideoControls,
           {
-            show: showIndicator,
-            isPlaying: indicatorIsPlaying
-          },
-          indicatorKeyRef.current
+            isPlaying,
+            currentTime,
+            duration,
+            buffered,
+            showControls: controlsPinned || showControls || !isPlaying,
+            controlsPinned,
+            playbackRate,
+            onPlayPause: handleTogglePlay,
+            onSeek: handleSeek,
+            onSeekStart: handleSeekStart,
+            onSeekEnd: handleSeekEnd,
+            onPlaybackRateChange: handlePlaybackRateChange,
+            onTogglePinControls: () => setControlsPinned((prev) => {
+              const next = !prev;
+              if (next) {
+                setShowControls(true);
+              } else {
+                resetControlsTimeout();
+              }
+              return next;
+            }),
+            onToggleFullscreen: handleToggleFullscreen
+          }
         )
       ]
     }
@@ -27630,6 +28204,67 @@ var SilentErrorBoundary = class extends React23__namespace.default.Component {
     ] }) });
   }
 };
+var PlayPauseIndicator = ({
+  show,
+  isPlaying,
+  duration = 600
+}) => {
+  const [isVisible, setIsVisible] = React23.useState(false);
+  const [isFading, setIsFading] = React23.useState(false);
+  React23.useEffect(() => {
+    if (show) {
+      setIsVisible(true);
+      setIsFading(false);
+      const fadeTimer = setTimeout(() => {
+        setIsFading(true);
+      }, 100);
+      const hideTimer = setTimeout(() => {
+        setIsVisible(false);
+        setIsFading(false);
+      }, duration);
+      return () => {
+        clearTimeout(fadeTimer);
+        clearTimeout(hideTimer);
+      };
+    }
+  }, [show, duration]);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10",
+      style: {
+        opacity: isFading ? 0 : 1,
+        transition: `opacity ${duration - 100}ms ease-out`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-black/70 rounded-full p-6", children: isPlaying ? (
+        // Play icon (triangle)
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "white",
+            className: "w-16 h-16",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" })
+          }
+        )
+      ) : (
+        // Pause icon (two bars)
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "white",
+            className: "w-16 h-16",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
+          }
+        )
+      ) })
+    }
+  );
+};
 var BackButton = ({
   onClick,
   text = "Back",
@@ -31049,7 +31684,7 @@ function DiagnosisVideoModal({
     }
     loadClip();
   }, [clipId, supabase, transformPlaylistUrls]);
-  const formatTime3 = (seconds) => {
+  const formatTime5 = (seconds) => {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
     return `${mins}:${secs.toString().padStart(2, "0")}`;
@@ -31241,9 +31876,9 @@ function DiagnosisVideoModal({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [
-                formatTime3(currentTime),
+                formatTime5(currentTime),
                 " / ",
-                formatTime3(duration)
+                formatTime5(duration)
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
@@ -33063,45 +33698,35 @@ var LinePdfGenerator = ({
       const doc = new jsPDF.jsPDF();
       const pageHeight = doc.internal.pageSize.height;
       const addHeaderPage1 = () => {
-        doc.setFontSize(12);
+        doc.setFontSize(14);
         doc.setFont("helvetica", "bold");
-        doc.setTextColor(70, 70, 70);
+        doc.setTextColor(50, 50, 50);
         doc.text("OPTIFYE.AI", 20, 15);
-        doc.setFontSize(10);
+        doc.setFontSize(9);
         doc.setFont("helvetica", "normal");
         doc.setTextColor(100, 100, 100);
-        const reportText = "REAL-TIME PERFORMANCE REPORT";
-        const reportTextWidth = doc.getStringUnitWidth(reportText) * 10 / doc.internal.scaleFactor;
-        doc.text(reportText, doc.internal.pageSize.width - 20 - reportTextWidth, 15);
-        doc.setDrawColor(220, 220, 220);
-        doc.setLineWidth(0.3);
+        const generatedText = `Generated on ${(/* @__PURE__ */ new Date()).toLocaleString("en-IN", { timeZone: "Asia/Kolkata" })}`;
+        const generatedTextWidth = doc.getStringUnitWidth(generatedText) * 9 / doc.internal.scaleFactor;
+        doc.text(generatedText, doc.internal.pageSize.width - 20 - generatedTextWidth, 15);
+        doc.setDrawColor(200, 200, 200);
+        doc.setLineWidth(0.5);
         doc.line(20, 20, 190, 20);
       };
       const addHeaderPage2 = () => {
-        doc.setFontSize(12);
+        doc.setFontSize(14);
         doc.setFont("helvetica", "bold");
-        doc.setTextColor(70, 70, 70);
+        doc.setTextColor(50, 50, 50);
         doc.text("OPTIFYE.AI", 20, 15);
-        doc.setFontSize(10);
+        doc.setFontSize(9);
         doc.setFont("helvetica", "normal");
         doc.setTextColor(100, 100, 100);
-        const reportText = "REAL-TIME PERFORMANCE REPORT";
-        const reportTextWidth = doc.getStringUnitWidth(reportText) * 10 / doc.internal.scaleFactor;
-        doc.text(reportText, doc.internal.pageSize.width - 20 - reportTextWidth, 15);
-        doc.text("Page 2", doc.internal.pageSize.width - 30, pageHeight - 15);
-        doc.setDrawColor(220, 220, 220);
-        doc.setLineWidth(0.3);
-        doc.line(20, 20, 190, 20);
-        return 35;
-      };
-      const addFooter = (pageNum) => {
-        doc.setFontSize(9);
-        doc.setTextColor(130, 130, 130);
         const generatedText = `Generated on ${(/* @__PURE__ */ new Date()).toLocaleString("en-IN", { timeZone: "Asia/Kolkata" })}`;
-        doc.text(generatedText, 20, pageHeight - 15);
-        if (pageNum === 1) {
-          doc.text("Page 1", doc.internal.pageSize.width - 30, pageHeight - 15);
-        }
+        const generatedTextWidth = doc.getStringUnitWidth(generatedText) * 9 / doc.internal.scaleFactor;
+        doc.text(generatedText, doc.internal.pageSize.width - 20 - generatedTextWidth, 15);
+        doc.setDrawColor(200, 200, 200);
+        doc.setLineWidth(0.5);
+        doc.line(20, 20, 190, 20);
+        return 30;
       };
       addHeaderPage1();
       doc.setFontSize(26);
@@ -33147,37 +33772,47 @@ var LinePdfGenerator = ({
       doc.setDrawColor(200, 200, 200);
       doc.setLineWidth(0.5);
       doc.line(20, 53, 190, 53);
-      doc.setFontSize(16);
+      const perfOverviewStartY = 58;
+      doc.setFillColor(245, 245, 245);
+      doc.roundedRect(15, perfOverviewStartY, 180, 50, 3, 3, "F");
+      doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
-      doc.setTextColor(70, 70, 70);
-      doc.text("Line Performance Overview", 20, 65);
+      doc.setTextColor(40, 40, 40);
+      doc.text("Line Performance Overview", 20, 68);
       doc.setTextColor(0, 0, 0);
       const createKPIBox = (y) => {
-        doc.setFillColor(250, 250, 250);
-        doc.roundedRect(22, y - 7, 165, 12, 1, 1, "F");
+        doc.setFillColor(255, 255, 255);
+        doc.roundedRect(22, y - 7, 165, 12, 2, 2, "F");
+        doc.setDrawColor(230, 230, 230);
+        doc.setLineWidth(0.2);
+        doc.roundedRect(22, y - 7, 165, 12, 2, 2, "S");
       };
-      createKPIBox(77);
-      doc.setFontSize(12);
+      const kpiStartY = 80;
+      const kpiSpacing = 10;
+      createKPIBox(kpiStartY);
+      doc.setFontSize(11);
       doc.setFont("helvetica", "normal");
-      doc.text("Output:", 25, 77);
+      doc.text("Output:", 25, kpiStartY);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, 77);
-      createKPIBox(87);
+      doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, kpiStartY);
+      createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
-      doc.text("Underperforming Workspaces:", 25, 87);
+      doc.text("Underperforming Workspaces:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.underperforming_workspaces} / ${lineInfo.metrics.total_workspaces}`, 120, 87);
-      createKPIBox(97);
+      doc.text(`${lineInfo.metrics.underperforming_workspaces} / ${lineInfo.metrics.total_workspaces}`, 120, kpiStartY + kpiSpacing);
+      createKPIBox(kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "normal");
-      doc.text("Average Efficiency:", 25, 97);
+      doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, 97);
-      doc.setDrawColor(200, 200, 200);
-      doc.line(20, 110, 190, 110);
-      doc.setFontSize(16);
+      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, kpiStartY + kpiSpacing * 2);
+      doc.setDrawColor(180, 180, 180);
+      doc.setLineWidth(0.8);
+      doc.line(20, 118, 190, 118);
+      const hourlyOverviewStartY = 123;
+      doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
-      doc.setTextColor(70, 70, 70);
-      doc.text("Hourly Output Overview", 20, 135);
+      doc.setTextColor(40, 40, 40);
+      doc.text("Hourly Output Overview", 20, 133);
       doc.setTextColor(0, 0, 0);
       const getHourlyTimeRanges = (startTimeStr, endTimeStr) => {
         const [hours, minutes] = startTimeStr.split(":");
@@ -33214,7 +33849,7 @@ var LinePdfGenerator = ({
           }
           hourEndTime.setSeconds(0);
           hourEndTime.setMilliseconds(0);
-          const formatTime3 = (date2) => {
+          const formatTime5 = (date2) => {
             return date2.toLocaleTimeString("en-IN", {
               hour: "2-digit",
               minute: "2-digit",
@@ -33222,7 +33857,7 @@ var LinePdfGenerator = ({
               timeZone: "Asia/Kolkata"
             });
           };
-          return `${formatTime3(hourStartTime)} - ${formatTime3(hourEndTime)}`;
+          return `${formatTime5(hourStartTime)} - ${formatTime5(hourEndTime)}`;
         });
       };
       const hourlyTimeRanges = lineInfo.metrics.shift_start ? getHourlyTimeRanges(lineInfo.metrics.shift_start, lineInfo.metrics.shift_end) : [];
@@ -33369,86 +34004,94 @@ var LinePdfGenerator = ({
           return Math.round(lineInfo.metrics.current_output / shiftDuration);
         });
       }
+      const tableHeaderY = 143;
+      const tableStartY = 151;
+      const rowSpacing = 8;
+      const bottomPadding = 8;
+      const hourlyTableHeight = hourlyTimeRanges.length * rowSpacing;
+      const backgroundHeight = tableStartY - hourlyOverviewStartY + hourlyTableHeight + bottomPadding;
+      doc.setFillColor(245, 245, 245);
+      doc.roundedRect(15, hourlyOverviewStartY, 180, backgroundHeight, 3, 3, "F");
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
-      doc.setFillColor(245, 245, 245);
-      doc.roundedRect(20, 140, 170, 8, 1, 1, "F");
-      doc.text("Time Range", 25, 145);
-      doc.text("Actual Output", 80, 145);
-      doc.text("Target Output", 125, 145);
-      doc.text("Status", 170, 145);
-      doc.setLineWidth(0.2);
-      doc.setDrawColor(220, 220, 220);
-      doc.line(20, 148, 190, 148);
+      doc.text("Time Range", 25, tableHeaderY);
+      doc.text("Output", 80, tableHeaderY);
+      doc.text("Target", 125, tableHeaderY);
+      doc.text("Status", 170, tableHeaderY);
+      doc.setLineWidth(0.3);
+      doc.setDrawColor(200, 200, 200);
+      doc.line(20, 146, 190, 146);
       doc.setFont("helvetica", "normal");
-      let yPos = 155;
-      const rowSpacing = 7;
+      let yPos = tableStartY;
+      const lineDateForTable = new Date(lineInfo.date);
+      const todayForTable = /* @__PURE__ */ new Date();
+      todayForTable.setHours(0, 0, 0, 0);
+      lineDateForTable.setHours(0, 0, 0, 0);
+      const isTodayForTable = lineDateForTable.getTime() === todayForTable.getTime();
+      let currentHour = 24;
+      if (isTodayForTable) {
+        const now2 = /* @__PURE__ */ new Date();
+        const currentTimeIST = new Date(now2.toLocaleString("en-US", { timeZone: "Asia/Kolkata" }));
+        currentHour = currentTimeIST.getHours();
+      }
       hourlyTimeRanges.forEach((timeRange, index) => {
-        if (index % 2 === 0) {
-          doc.setFillColor(252, 252, 252);
-          doc.roundedRect(20, yPos - 5, 170, 8, 1, 1, "F");
-        }
-        const actualOutput = hourlyActualOutput[index];
-        const isOverTarget = actualOutput >= targetOutputPerHour;
+        const actualOutput = hourlyActualOutput[index] || 0;
+        const [startHourStr] = (lineInfo.metrics.shift_start || "6:00").split(":");
+        const startHour = parseInt(startHourStr);
+        const hourNumber = (startHour + index) % 24;
+        const dataCollected = !isTodayForTable || hourNumber < currentHour;
+        const outputStr = dataCollected ? actualOutput.toString() : "TBD";
+        const targetStr = targetOutputPerHour.toString();
         doc.text(timeRange, 25, yPos);
-        doc.text(actualOutput.toString(), 80, yPos);
-        doc.text(targetOutputPerHour.toString(), 125, yPos);
-        if (isOverTarget) {
-          doc.setDrawColor(0, 171, 69);
-          doc.setLineWidth(0.5);
-          const tickX = 170;
-          const tickY = yPos - 1;
-          doc.line(tickX - 2, tickY, tickX, tickY + 1.5);
-          doc.line(tickX, tickY + 1.5, tickX + 2, tickY - 2);
+        doc.text(outputStr, 80, yPos);
+        doc.text(targetStr, 125, yPos);
+        if (!dataCollected) {
+          doc.setTextColor(100, 100, 100);
+          doc.text("-", 170, yPos);
+        } else if (actualOutput >= targetOutputPerHour) {
+          doc.setTextColor(0, 171, 69);
+          doc.setFont("ZapfDingbats", "normal");
+          doc.text("4", 170, yPos);
+          doc.setFont("helvetica", "normal");
         } else {
-          doc.setDrawColor(227, 67, 41);
-          doc.setLineWidth(0.5);
-          const crossX = 170;
-          const crossY = yPos - 1;
-          doc.line(crossX - 2, crossY - 2, crossX + 2, crossY + 2);
-          doc.line(crossX - 2, crossY + 2, crossX + 2, crossY - 2);
+          doc.setTextColor(227, 67, 41);
+          doc.text("\xD7", 170, yPos);
         }
-        doc.setDrawColor(220, 220, 220);
-        doc.setLineWidth(0.2);
+        doc.setTextColor(0, 0, 0);
         yPos += rowSpacing;
       });
-      doc.roundedRect(20, 140, 170, yPos - 140 - 3, 1, 1, "S");
-      addFooter(1);
       doc.addPage();
       yPos = addHeaderPage2();
-      doc.setFontSize(16);
+      const workspaceSectionStartY = yPos;
+      const sortedWorkspaces = [...workspaceData].sort((a, b) => (a.efficiency || 0) - (b.efficiency || 0)).slice(0, 10);
+      const wsRowCount = sortedWorkspaces.length > 0 ? sortedWorkspaces.length : 1;
+      const wsTableHeight = 10 + 8 + 7 + wsRowCount * 8 + 8;
+      doc.setFillColor(245, 245, 245);
+      doc.roundedRect(15, workspaceSectionStartY, 180, wsTableHeight, 3, 3, "F");
+      doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
-      doc.setTextColor(70, 70, 70);
+      doc.setTextColor(40, 40, 40);
       doc.text("Poorest Performing Workspaces", 20, yPos);
       doc.setTextColor(0, 0, 0);
       yPos += 10;
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
-      doc.setFillColor(245, 245, 245);
-      doc.roundedRect(20, yPos, 170, 8, 1, 1, "F");
       yPos += 5;
       doc.text("Workspace", 25, yPos);
-      doc.text("Current/Ideal", 85, yPos);
+      doc.text("Current/Target", 85, yPos);
       doc.text("Efficiency", 145, yPos);
       yPos += 3;
-      doc.setLineWidth(0.2);
-      doc.setDrawColor(220, 220, 220);
+      doc.setLineWidth(0.3);
+      doc.setDrawColor(200, 200, 200);
       doc.line(20, yPos, 190, yPos);
       doc.setFont("helvetica", "normal");
-      const tableStartY = yPos;
       yPos += 7;
-      const sortedWorkspaces = [...workspaceData].sort((a, b) => (a.efficiency || 0) - (b.efficiency || 0)).slice(0, 10);
       if (sortedWorkspaces.length === 0) {
         doc.text("No workspace data available", 25, yPos);
         yPos += 10;
       } else {
         sortedWorkspaces.forEach((ws, index) => {
-          if (index % 2 === 0) {
-            doc.setFillColor(252, 252, 252);
-            doc.roundedRect(20, yPos - 5, 170, 8, 1, 1, "F");
-          }
           const workspaceName = getWorkspaceDisplayName(ws.workspace_name, lineInfo.line_id);
-          const maxWidth = 55;
           const truncatedName = workspaceName.length > 25 ? workspaceName.substring(0, 22) + "..." : workspaceName;
           doc.text(truncatedName, 25, yPos);
           doc.text(`${ws.action_count || 0} / ${ws.action_threshold || 0}`, 85, yPos);
@@ -33456,9 +34099,6 @@ var LinePdfGenerator = ({
           yPos += 8;
         });
       }
-      const wsTableHeight = yPos - tableStartY - 3;
-      doc.roundedRect(20, tableStartY, 170, wsTableHeight, 1, 1, "S");
-      addFooter(2);
       doc.save(`${lineInfo.line_name}_${date.split(",")[0]}.pdf`);
     } catch (error) {
       console.error("PDF generation failed:", error);
@@ -34632,25 +35272,25 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
       doc.setFont("helvetica", "bold");
       doc.setTextColor(50, 50, 50);
       doc.text("OPTIFYE.AI", 20, 15);
-      doc.setFontSize(11);
+      doc.setFontSize(9);
       doc.setFont("helvetica", "normal");
-      doc.setTextColor(80, 80, 80);
-      const reportText = "REAL-TIME PERFORMANCE REPORT";
-      const reportTextWidth = doc.getStringUnitWidth(reportText) * 11 / doc.internal.scaleFactor;
-      doc.text(reportText, doc.internal.pageSize.width - 20 - reportTextWidth, 15);
+      doc.setTextColor(100, 100, 100);
+      const generatedText = `Generated on ${(/* @__PURE__ */ new Date()).toLocaleString("en-IN", { timeZone: "Asia/Kolkata" })}`;
+      const generatedTextWidth = doc.getStringUnitWidth(generatedText) * 9 / doc.internal.scaleFactor;
+      doc.text(generatedText, doc.internal.pageSize.width - 20 - generatedTextWidth, 15);
       doc.setDrawColor(200, 200, 200);
       doc.setLineWidth(0.5);
       doc.line(20, 20, 190, 20);
       doc.setFillColor(250, 250, 250);
-      doc.roundedRect(15, 25, 180, 55, 3, 3, "F");
+      doc.roundedRect(15, 25, 180, 53, 3, 3, "F");
       doc.setFontSize(32);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(0, 0, 0);
-      doc.text(lineName, 20, 40);
+      doc.text(lineName, 20, 39);
       doc.setFontSize(22);
       doc.setFont("helvetica", "normal");
       doc.setTextColor(40, 40, 40);
-      doc.text(getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id), 20, 52);
+      doc.text(getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id), 20, 51);
       doc.setFontSize(13);
       doc.setFont("helvetica", "normal");
       doc.setTextColor(60, 60, 60);
@@ -34661,8 +35301,8 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
         timeZone: "Asia/Kolkata"
       });
       const shiftType = "Day Shift";
-      doc.text(`${date}`, 20, 65);
-      doc.text(`${shiftType}`, 20, 73);
+      doc.text(`${date}`, 20, 63);
+      doc.text(`${shiftType}`, 20, 71);
       const currentTime = (/* @__PURE__ */ new Date()).toLocaleTimeString("en-IN", {
         hour: "2-digit",
         minute: "2-digit",
@@ -34675,11 +35315,11 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
       });
       doc.setFontSize(12);
       doc.setTextColor(80, 80, 80);
-      doc.text(`Report Period: ${shiftStartTime} - ${currentTime}`, 20, 81);
+      doc.text(`Report Period: ${shiftStartTime} - ${currentTime}`, 20, 79);
       doc.setTextColor(0, 0, 0);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 90, 190, 90);
+      doc.line(20, 88, 190, 88);
       const createKPIBox = (y) => {
         doc.setFillColor(255, 255, 255);
         doc.roundedRect(22, y - 7, 165, 12, 2, 2, "F");
@@ -34687,66 +35327,72 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
         doc.setLineWidth(0.2);
         doc.roundedRect(22, y - 7, 165, 12, 2, 2, "S");
       };
+      const perfOverviewStartY = 93;
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, 95, 180, 60, 3, 3, "F");
+      doc.roundedRect(15, perfOverviewStartY, 180, 60, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Performance Overview", 20, 105);
+      doc.text("Performance Overview", 20, 103);
       doc.setTextColor(0, 0, 0);
-      const kpiStartY = 117;
+      const kpiStartY = 115;
       const kpiSpacing = 10;
       createKPIBox(kpiStartY);
       doc.setFontSize(11);
       doc.setFont("helvetica", "normal");
-      doc.text("Progress:", 25, kpiStartY);
+      doc.text("Current Output/Target Output:", 25, kpiStartY);
       doc.setFont("helvetica", "bold");
-      doc.text(`${(workspace.total_actions / workspace.target_output * 100).toFixed(0)}% of Today's target`, 120, kpiStartY);
+      doc.text(`${workspace.total_actions} / ${workspace.target_output}`, 120, kpiStartY);
       createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
-      doc.text("Current Output/Ideal Output:", 25, kpiStartY + kpiSpacing);
+      doc.text("Efficiency:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${workspace.total_actions} / ${workspace.target_output}`, 120, kpiStartY + kpiSpacing);
+      doc.text(`${(workspace.avg_efficiency || 0).toFixed(1)}% (Target: 80%)`, 120, kpiStartY + kpiSpacing);
       createKPIBox(kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "normal");
-      doc.text("Efficiency:", 25, kpiStartY + kpiSpacing * 2);
-      doc.setFont("helvetica", "bold");
-      doc.text(`${(workspace.avg_efficiency || 0).toFixed(1)}% (Target: 80%)`, 120, kpiStartY + kpiSpacing * 2);
-      createKPIBox(kpiStartY + kpiSpacing * 3);
-      doc.setFont("helvetica", "normal");
-      doc.text("PPH (Pieces Per Hour):", 25, kpiStartY + kpiSpacing * 3);
+      doc.text("PPH (Pieces Per Hour):", 25, kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "bold");
-      doc.text(`${workspace.avg_pph.toFixed(1)} (Standard: ${workspace.pph_threshold.toFixed(1)})`, 120, kpiStartY + kpiSpacing * 3);
+      doc.text(`${workspace.avg_pph.toFixed(1)} (Standard: ${workspace.pph_threshold.toFixed(1)})`, 120, kpiStartY + kpiSpacing * 2);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 170, 190, 170);
+      doc.line(20, 163, 190, 163);
+      const hourlyPerfStartY = 168;
+      const hourlyData = workspace.hourly_action_counts || [];
+      const hourlyTarget = workspace.pph_threshold;
+      const tableStartY = 199;
+      const rowHeight = 8;
+      const bottomPadding = 8;
+      const backgroundHeight = tableStartY - hourlyPerfStartY + hourlyData.length * rowHeight + bottomPadding;
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, 175, 180, 85, 3, 3, "F");
+      doc.roundedRect(15, hourlyPerfStartY, 180, backgroundHeight, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Hourly Performance", 20, 185);
+      doc.text("Hourly Performance", 20, 178);
       doc.setTextColor(0, 0, 0);
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
-      doc.setFillColor(245, 245, 245);
-      doc.roundedRect(20, 177, 170, 8, 1, 1, "F");
-      doc.text("Time Range", 25, 182);
-      doc.text("Output", 95, 182);
-      doc.text("Target", 135, 182);
-      doc.text("Status", 170, 182);
-      doc.setLineWidth(0.2);
-      doc.setDrawColor(220, 220, 220);
-      doc.line(20, 185, 190, 185);
+      doc.text("Time Range", 25, 188);
+      doc.text("Output", 95, 188);
+      doc.text("Target", 135, 188);
+      doc.text("Status", 170, 188);
+      doc.setLineWidth(0.3);
+      doc.setDrawColor(200, 200, 200);
+      doc.line(20, 191, 190, 191);
       doc.setFont("helvetica", "normal");
-      let yPos = 191;
-      const hourlyData = workspace.hourly_action_counts || [];
-      const hourlyTarget = workspace.pph_threshold;
+      let yPos = tableStartY;
+      const workspaceDate = new Date(workspace.date);
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      workspaceDate.setHours(0, 0, 0, 0);
+      const isToday = workspaceDate.getTime() === today.getTime();
+      let currentHour = 24;
+      if (isToday) {
+        const now2 = /* @__PURE__ */ new Date();
+        const currentTimeIST = new Date(now2.toLocaleString("en-US", { timeZone: "Asia/Kolkata" }));
+        currentHour = currentTimeIST.getHours();
+      }
       hourlyData.forEach((output, index) => {
-        if (index % 2 === 0) {
-          doc.setFillColor(252, 252, 252);
-          doc.roundedRect(20, yPos - 5, 170, 8, 1, 1, "F");
-        }
         const startTime = /* @__PURE__ */ new Date(`2000-01-01 ${workspace.shift_start}`);
         startTime.setHours(startTime.getHours() + index);
         const endTime = new Date(startTime);
@@ -34758,14 +35404,17 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
           hour: "numeric",
           hour12: true
         })}`;
-        const outputStr = output.toString();
+        const hourNumber = startTime.getHours();
+        const dataCollected = !isToday || hourNumber < currentHour;
+        const outputStr = dataCollected ? output.toString() : "TBD";
         const targetStr = hourlyTarget.toString();
-        const outputX = 95 + doc.getStringUnitWidth(outputStr) * doc.getFontSize() / (2 * doc.internal.scaleFactor);
-        const targetX = 135 + doc.getStringUnitWidth(targetStr) * doc.getFontSize() / (2 * doc.internal.scaleFactor);
         doc.text(timeRange, 25, yPos);
-        doc.text(outputStr, outputX, yPos);
-        doc.text(targetStr, targetX, yPos);
-        if (output >= hourlyTarget) {
+        doc.text(outputStr, 95, yPos);
+        doc.text(targetStr, 135, yPos);
+        if (!dataCollected) {
+          doc.setTextColor(100, 100, 100);
+          doc.text("-", 170, yPos);
+        } else if (output >= hourlyTarget) {
           doc.setTextColor(0, 171, 69);
           doc.setFont("ZapfDingbats", "normal");
           doc.text("4", 170, yPos);
@@ -34775,15 +35424,8 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
           doc.text("\xD7", 170, yPos);
         }
         doc.setTextColor(0, 0, 0);
-        yPos += 8;
+        yPos += rowHeight;
       });
-      doc.setLineWidth(0.2);
-      doc.setDrawColor(220, 220, 220);
-      doc.roundedRect(20, 187, 170, yPos - 187 - 3, 1, 1, "S");
-      doc.setFontSize(9);
-      doc.setTextColor(130, 130, 130);
-      const generatedText = `Generated on ${(/* @__PURE__ */ new Date()).toLocaleString("en-IN", { timeZone: "Asia/Kolkata" })}`;
-      doc.text(generatedText, 20, 280);
       doc.save(`${workspace.workspace_name}_${date.split(",")[0]}.pdf`);
     } catch (error) {
       console.error("PDF generation failed:", error);
@@ -35863,7 +36505,8 @@ var WorkspaceHealthCard = ({
   workspace,
   onClick,
   showDetails = true,
-  className = ""
+  className = "",
+  onViewDetails
 }) => {
   const getStatusConfig = () => {
     switch (workspace.status) {
@@ -35916,38 +36559,101 @@ var WorkspaceHealthCard = ({
       onClick(workspace);
     }
   };
+  const handleViewDetails = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (onViewDetails) {
+      onViewDetails(workspace);
+    }
+  };
   const handleKeyDown = (event) => {
     if (onClick && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       onClick(workspace);
     }
   };
+  const formatDuration3 = (minutes) => {
+    if (!minutes || minutes <= 0) return "0 min";
+    const rounded = Math.max(Math.round(minutes), 0);
+    const days = Math.floor(rounded / 1440);
+    const hours = Math.floor(rounded % 1440 / 60);
+    const mins = rounded % 60;
+    const parts = [];
+    if (days) parts.push(`${days} day${days === 1 ? "" : "s"}`);
+    if (hours) parts.push(`${hours} hr${hours === 1 ? "" : "s"}`);
+    if (mins) parts.push(`${mins} min${mins === 1 ? "" : "s"}`);
+    if (!parts.length) {
+      parts.push("1 min");
+    }
+    return parts.join(" ");
+  };
   const formatTimeAgo = (timeString) => {
-    return timeString.replace("about ", "").replace(" ago", "");
+    if (!timeString) return "Unknown";
+    const cleaned = timeString.replace("about ", "").trim();
+    if (cleaned.toLowerCase() === "never") return "Never";
+    const minuteMatch = cleaned.match(/(\d+)\s*m/);
+    if (!minuteMatch) {
+      return cleaned;
+    }
+    const minutes = parseInt(minuteMatch[1], 10);
+    if (!Number.isFinite(minutes)) return cleaned;
+    if (minutes < 1) return "Just now";
+    if (minutes < 60) {
+      return `${minutes} min ago`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    if (hours < 24) {
+      const parts2 = [`${hours} hr${hours === 1 ? "" : "s"}`];
+      if (remainingMinutes) {
+        parts2.push(`${remainingMinutes} min`);
+      }
+      return `${parts2.join(" ")} ago`;
+    }
+    const days = Math.floor(hours / 24);
+    const remainingHours = hours % 24;
+    const parts = [`${days} day${days === 1 ? "" : "s"}`];
+    if (remainingHours) {
+      parts.push(`${remainingHours} hr${remainingHours === 1 ? "" : "s"}`);
+    }
+    return `${parts.join(" ")} ago`;
   };
-  const formatDowntime = (uptimeDetails) => {
-    if (!uptimeDetails) return "";
+  const getDowntimeConfig = (uptimeDetails) => {
+    if (!uptimeDetails) {
+      if (workspace.status === "healthy") {
+        return {
+          text: "0m",
+          className: "text-emerald-600 dark:text-emerald-400",
+          label: "Total Downtime"
+        };
+      }
+      return { text: "--", className: "text-slate-400", label: "Total Downtime" };
+    }
     const downtimeMinutes = Math.max(0, uptimeDetails.expectedMinutes - uptimeDetails.actualMinutes);
-    if (downtimeMinutes === 0) return "No downtime";
-    if (downtimeMinutes < 1) return "< 1 min downtime";
-    if (downtimeMinutes < 60) return `${downtimeMinutes} min downtime`;
-    const hours = Math.floor(downtimeMinutes / 60);
-    const minutes = downtimeMinutes % 60;
-    if (minutes === 0) {
-      return `${hours} hr downtime`;
+    if (downtimeMinutes === 0) {
+      return {
+        text: "0m",
+        className: "text-emerald-600 dark:text-emerald-400",
+        label: "Total Downtime"
+      };
     }
-    return `${hours} hr ${minutes} min downtime`;
+    return {
+      text: `${formatDuration3(downtimeMinutes)}`,
+      className: downtimeMinutes > 60 ? "text-rose-600 dark:text-rose-400" : "text-amber-600 dark:text-amber-400",
+      label: "Total Downtime"
+    };
   };
+  const downtimeConfig = getDowntimeConfig(workspace.uptimeDetails);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Card2,
     {
       className: clsx(
-        "relative overflow-hidden transition-all duration-300",
+        "relative overflow-hidden transition-all duration-300 h-full flex flex-col",
         "bg-gradient-to-br",
         config.gradient,
         "border",
         config.border,
-        "shadow-sm hover:shadow-md",
+        "shadow-sm hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-700",
         onClick && "cursor-pointer hover:scale-[1.01]",
         workspace.isStale && "opacity-90",
         className
@@ -35957,7 +36663,7 @@ var WorkspaceHealthCard = ({
       tabIndex: onClick ? 0 : void 0,
       role: onClick ? "button" : void 0,
       "aria-label": `Workspace ${workspace.workspace_display_name} status: ${workspace.status}`,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 flex-grow flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-start gap-2 sm:gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 break-words", children: workspace.workspace_display_name || `Workspace ${workspace.workspace_id.slice(0, 8)}` }),
@@ -35979,21 +36685,20 @@ var WorkspaceHealthCard = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
             ] })
           ] }),
-          workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-3.5 w-3.5 text-gray-400" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
-              "Uptime today: ",
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-                workspace.uptimePercentage.toFixed(1),
-                "%"
-              ] })
-            ] })
-          ] }),
-          workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
-            "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
-            workspace.uptimePercentage >= 97 ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
-          ), children: formatDowntime(workspace.uptimeDetails) }) })
-        ] })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-3 border-t border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-slate-500 uppercase tracking-wide", children: "Total Downtime" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx("text-sm font-semibold", downtimeConfig.className), children: downtimeConfig.text })
+          ] }) })
+        ] }),
+        onViewDetails && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4 mt-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleViewDetails,
+            className: "w-full inline-flex items-center justify-center rounded-lg border border-slate-200/60 bg-white/60 px-3 py-2 text-sm font-medium text-slate-700 shadow-sm backdrop-blur-sm transition-all hover:bg-white/90 hover:text-slate-900 dark:bg-white/10 dark:text-slate-200 dark:border-white/10 dark:hover:bg-white/20",
+            type: "button",
+            children: "View shift timeline"
+          }
+        ) })
       ] })
     }
   );
@@ -36001,8 +36706,11 @@ var WorkspaceHealthCard = ({
 var CompactWorkspaceHealthCard = ({
   workspace,
   onClick,
-  className = ""
+  className = "",
+  onViewDetails
 }) => {
+  const downtimeMinutes = workspace.uptimeDetails ? Math.max(0, workspace.uptimeDetails.expectedMinutes - workspace.uptimeDetails.actualMinutes) : null;
+  const downtimeLabel = downtimeMinutes === null ? "No downtime data" : downtimeMinutes === 0 ? "No downtime" : `${downtimeMinutes} min down`;
   const getStatusConfig = () => {
     switch (workspace.status) {
       case "healthy":
@@ -36042,6 +36750,13 @@ var CompactWorkspaceHealthCard = ({
       onClick(workspace);
     }
   };
+  const handleViewDetails = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (onViewDetails) {
+      onViewDetails(workspace);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -36069,14 +36784,20 @@ var CompactWorkspaceHealthCard = ({
               workspace.uptimePercentage.toFixed(1),
               "%"
             ] }),
-            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: "\u2022" }),
-            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
-              Math.max(0, workspace.uptimeDetails.expectedMinutes - workspace.uptimeDetails.actualMinutes),
-              "m down"
-            ] })
+            downtimeMinutes !== null && downtimeMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: "\u2022" }),
+            downtimeLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: downtimeLabel })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: workspace.timeSinceLastUpdate }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("h-2 w-2 rounded-full", config.dot) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("h-2 w-2 rounded-full", config.dot) }),
+          onViewDetails && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleViewDetails,
+              className: "rounded-full border border-gray-200 px-2 py-0.5 text-[11px] font-medium text-gray-600 hover:bg-gray-50",
+              type: "button",
+              children: "View"
+            }
+          )
         ] })
       ]
     }
@@ -36085,6 +36806,7 @@ var CompactWorkspaceHealthCard = ({
 var HealthStatusGrid = ({
   workspaces,
   onWorkspaceClick,
+  onWorkspaceViewDetails,
   showFilters = true,
   groupBy: initialGroupBy = "none",
   className = ""
@@ -36272,7 +36994,8 @@ var HealthStatusGrid = ({
           {
             workspace,
             onClick: onWorkspaceClick,
-            showDetails: true
+            showDetails: true,
+            onViewDetails: onWorkspaceViewDetails
           },
           workspace.workspace_id
         )) })
@@ -39808,7 +40531,7 @@ var AIAgentView = () => {
     }
     return formattedLines.join("");
   };
-  const formatTime3 = (timestamp) => {
+  const formatTime5 = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleTimeString([], {
       hour: "2-digit",
@@ -41072,7 +41795,7 @@ var AIAgentView = () => {
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-1.5 sm:mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime3(message.created_at) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime5(message.created_at) }),
                         message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
                           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Axel" })
@@ -43903,8 +44626,7 @@ var KPIsOverviewView = ({
             " Shift"
           ] })
         ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-600 text-center mt-2 sm:mt-3 px-2 sm:px-0", children: "Click on any line to view detailed performance metrics" })
+      ] }) })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-3 sm:p-4 md:p-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6", children: lines.map((line) => /* @__PURE__ */ jsxRuntime.jsx(
       LineCard,
@@ -48221,18 +48943,41 @@ var useWorkspaceHealth = (options) => {
   const isFetchingRef = React23.useRef(false);
   const refreshIntervalRef = React23.useRef(null);
   const healthTable = databaseConfig?.tables?.workspace_health || "workspace_health_status";
-  const calculateHealthStatus = (workspace) => {
-    if (!workspace.last_heartbeat) return "unknown";
-    const now2 = /* @__PURE__ */ new Date();
-    const lastHeartbeat = new Date(workspace.last_heartbeat);
-    const minutesSince = (now2.getTime() - lastHeartbeat.getTime()) / 6e4;
-    if (minutesSince < 5) return "healthy";
-    if (minutesSince < 15) return "warning";
-    return "unhealthy";
-  };
+  const computeSummary = React23.useCallback((data) => {
+    const total = data.length;
+    const healthy = data.filter((w) => w.status === "healthy").length;
+    const unhealthy = data.filter((w) => w.status === "unhealthy").length;
+    const warning6 = data.filter((w) => w.status === "warning").length;
+    let uptimePercentage = total > 0 ? healthy / total * 100 : 100;
+    let totalDowntimeMinutes;
+    const withUptime = data.filter(
+      (w) => w.uptimePercentage !== void 0 && w.uptimeDetails !== void 0
+    );
+    if (withUptime.length > 0) {
+      const totalUptime = withUptime.reduce((sum, w) => sum + (w.uptimePercentage || 0), 0);
+      uptimePercentage = totalUptime / withUptime.length;
+      totalDowntimeMinutes = withUptime.reduce((sum, w) => {
+        if (w.uptimeDetails) {
+          return sum + Math.max(0, w.uptimeDetails.expectedMinutes - w.uptimeDetails.actualMinutes);
+        }
+        return sum;
+      }, 0);
+    }
+    return {
+      totalWorkspaces: total,
+      healthyWorkspaces: healthy,
+      unhealthyWorkspaces: unhealthy,
+      warningWorkspaces: warning6,
+      uptimePercentage,
+      totalDowntimeMinutes,
+      lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }, []);
   const fetchWorkspacesHealth = React23.useCallback(async () => {
-    if (!supabase || isFetchingRef.current) return;
+    if (isFetchingRef.current) return;
     if (!options.companyId) {
+      setWorkspaces([]);
+      setSummary(computeSummary([]));
       setLoading(false);
       return;
     }
@@ -48240,39 +48985,12 @@ var useWorkspaceHealth = (options) => {
       isFetchingRef.current = true;
       setLoading(true);
       setError(null);
-      let query = supabase.from(healthTable).select("*").eq("company_id", options.companyId);
-      if (options.lineId) {
-        query = query.eq("line_id", options.lineId);
-      }
-      query = query.order("workspace_display_name", { ascending: true });
-      const { data, error: fetchError } = await query;
-      if (fetchError) throw fetchError;
-      const healthData = data || [];
-      const workspacesWithStatus = healthData.map((ws) => {
-        const status = calculateHealthStatus(ws);
-        const now2 = /* @__PURE__ */ new Date();
-        const lastUpdate = ws.last_heartbeat ? new Date(ws.last_heartbeat) : null;
-        const timeSinceLastUpdate = lastUpdate ? `${Math.floor((now2.getTime() - lastUpdate.getTime()) / 6e4)}m ago` : "Never";
-        return {
-          ...ws,
-          status,
-          timeSinceLastUpdate,
-          isStale: !lastUpdate || now2.getTime() - lastUpdate.getTime() > 15 * 6e4
-        };
+      const workspacesWithStatus = await workspaceHealthService.getWorkspaceHealthStatus({
+        lineId: options.lineId,
+        companyId: options.companyId
       });
       setWorkspaces(workspacesWithStatus);
-      const total = workspacesWithStatus.length;
-      const healthy = workspacesWithStatus.filter((w) => w.status === "healthy").length;
-      const unhealthy = workspacesWithStatus.filter((w) => w.status === "unhealthy").length;
-      const warning6 = workspacesWithStatus.filter((w) => w.status === "warning").length;
-      setSummary({
-        totalWorkspaces: total,
-        healthyWorkspaces: healthy,
-        unhealthyWorkspaces: unhealthy,
-        warningWorkspaces: warning6,
-        uptimePercentage: total > 0 ? healthy / total * 100 : 100,
-        lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-      });
+      setSummary(computeSummary(workspacesWithStatus));
     } catch (err) {
       console.error("[useWorkspaceHealth] Error fetching workspace health:", err);
       setError({ message: err.message, code: err.code || "FETCH_ERROR" });
@@ -48281,7 +48999,7 @@ var useWorkspaceHealth = (options) => {
       setLoading(false);
       isFetchingRef.current = false;
     }
-  }, [supabase, options.companyId, options.lineId, healthTable]);
+  }, [options.companyId, options.lineId, computeSummary]);
   React23.useEffect(() => {
     fetchWorkspacesHealth();
   }, [fetchWorkspacesHealth]);
@@ -48326,6 +49044,395 @@ var useWorkspaceHealth = (options) => {
     refetch: fetchWorkspacesHealth
   };
 };
+var STATUS_COLORS = {
+  up: "bg-emerald-500",
+  down: "bg-rose-500",
+  pending: "bg-gray-200"
+};
+var STATUS_TITLES = {
+  up: "Uptime",
+  down: "Downtime",
+  pending: "Pending"
+};
+var formatTime4 = (date, timezone) => new Intl.DateTimeFormat("en-IN", {
+  hour: "numeric",
+  minute: "2-digit",
+  hour12: true,
+  timeZone: timezone
+}).format(date);
+var formatDuration = (minutes) => {
+  if (minutes < 1) return "<1 min";
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  const remainder = minutes % 60;
+  if (remainder === 0) return `${hours} hr${hours > 1 ? "s" : ""}`;
+  return `${hours} hr ${remainder} min`;
+};
+var formatDowntimeLabel = (minutes, includeSuffix = true) => {
+  if (!minutes || minutes <= 0) {
+    return includeSuffix ? "No downtime" : "0 min";
+  }
+  const rounded = Math.max(Math.round(minutes), 0);
+  const days = Math.floor(rounded / 1440);
+  const hours = Math.floor(rounded % 1440 / 60);
+  const mins = rounded % 60;
+  const parts = [];
+  if (days) parts.push(`${days} day${days === 1 ? "" : "s"}`);
+  if (hours) parts.push(`${hours} hr${hours === 1 ? "" : "s"}`);
+  if (mins) parts.push(`${mins} min${mins === 1 ? "" : "s"}`);
+  if (!parts.length) {
+    parts.push("1 min");
+  }
+  const label = parts.join(" ");
+  return includeSuffix ? `${label} down` : label;
+};
+var UptimeTimelineStrip = ({
+  points,
+  totalMinutes,
+  shiftStart,
+  shiftEnd,
+  timezone,
+  className = "",
+  uptimePercentage = 0,
+  downtimeMinutes = 0
+}) => {
+  const segments = React23.useMemo(() => {
+    if (!points.length || totalMinutes <= 0) return [];
+    const result = [];
+    let current = {
+      status: points[0].status,
+      length: 1,
+      startMinuteIndex: points[0].minuteIndex,
+      startTimestamp: points[0].timestamp,
+      endTimestamp: points[0].timestamp
+    };
+    for (let i = 1; i < points.length; i++) {
+      const point = points[i];
+      if (point.status === current.status) {
+        current.length += 1;
+        current.endTimestamp = point.timestamp;
+      } else {
+        result.push(current);
+        current = {
+          status: point.status,
+          length: 1,
+          startMinuteIndex: point.minuteIndex,
+          startTimestamp: point.timestamp,
+          endTimestamp: point.timestamp
+        };
+      }
+    }
+    result.push(current);
+    return result;
+  }, [points, totalMinutes]);
+  const markers = React23.useMemo(() => {
+    if (totalMinutes <= 0) return [];
+    const startDate = new Date(shiftStart);
+    const endDate = new Date(shiftEnd);
+    const roundedTotal = Math.max(totalMinutes, 1);
+    const markerInterval = totalMinutes > 360 ? 120 : 60;
+    const markerList = [];
+    for (let minute = 0; minute <= roundedTotal; minute += markerInterval) {
+      const markerMinute = Math.min(minute, roundedTotal);
+      const markerDate = dateFns.addMinutes(startDate, markerMinute);
+      markerList.push({
+        minute: markerMinute,
+        label: formatTime4(markerDate, timezone)
+      });
+    }
+    const endLabel = formatTime4(endDate, timezone);
+    if (!markerList.some((marker) => marker.minute === roundedTotal)) {
+      markerList.push({
+        minute: roundedTotal,
+        label: endLabel
+      });
+    } else {
+      markerList[markerList.length - 1] = {
+        minute: roundedTotal,
+        label: endLabel
+      };
+    }
+    return markerList;
+  }, [shiftStart, shiftEnd, timezone, totalMinutes]);
+  if (!points.length || totalMinutes <= 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-xl border border-dashed border-gray-200 bg-gray-50/50 p-6 text-center text-sm text-gray-600", children: "No uptime data available for this shift yet." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-3 text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-900 font-semibold", children: [
+      uptimePercentage.toFixed(1),
+      " % uptime ",
+      downtimeMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-600 font-normal", children: [
+        "(",
+        formatDowntimeLabel(downtimeMinutes),
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex h-4 overflow-hidden rounded-lg border border-gray-200 shadow-sm bg-white", children: segments.map((segment, index) => {
+      const startDate = new Date(segment.startTimestamp);
+      const endDate = new Date(segment.endTimestamp);
+      if (segment.length > 1) {
+        endDate.setMinutes(endDate.getMinutes() + 1);
+      }
+      const tooltip = `${STATUS_TITLES[segment.status]} \u2022 ${formatDuration(segment.length)} (${formatTime4(
+        startDate,
+        timezone
+      )} - ${formatTime4(endDate, timezone)})`;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `${STATUS_COLORS[segment.status]} transition-all hover:opacity-80 cursor-pointer`,
+          style: { flex: segment.length },
+          title: tooltip
+        },
+        `${segment.status}-${segment.startMinuteIndex}-${index}`
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none relative w-full mt-4 min-h-6", children: markers.map((marker) => {
+      const left = totalMinutes > 0 ? marker.minute / totalMinutes * 100 : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "absolute flex -translate-x-1/2 flex-col items-center",
+          style: { left: `${left}%` },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1.5 h-2 w-px bg-gray-300" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-gray-600 whitespace-nowrap", children: marker.label })
+          ]
+        },
+        `${marker.label}-${marker.minute}`
+      );
+    }) })
+  ] });
+};
+var UptimeTimelineStrip_default = UptimeTimelineStrip;
+var SHORT_INTERRUPT_THRESHOLD_MINUTES = 3;
+var formatDuration2 = (minutes) => {
+  if (!minutes || minutes <= 0) return "0 min";
+  const rounded = Math.max(Math.round(minutes), 0);
+  const days = Math.floor(rounded / 1440);
+  const hours = Math.floor(rounded % 1440 / 60);
+  const mins = rounded % 60;
+  const parts = [];
+  if (days) parts.push(`${days} day${days === 1 ? "" : "s"}`);
+  if (hours) parts.push(`${hours} hr${hours === 1 ? "" : "s"}`);
+  if (mins) parts.push(`${mins} min${mins === 1 ? "" : "s"}`);
+  if (!parts.length) {
+    parts.push("1 min");
+  }
+  return parts.join(" ");
+};
+var formatDowntimeLabel2 = (minutes, includeSuffix = true) => {
+  if (!minutes || minutes <= 0) {
+    return includeSuffix ? "No downtime" : "0 min";
+  }
+  const label = formatDuration2(minutes);
+  return includeSuffix ? `${label} down` : label;
+};
+var formatTimeRange = (start, end, timezone) => {
+  const formatter = new Intl.DateTimeFormat("en-IN", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone
+  });
+  return `${formatter.format(start)} - ${formatter.format(end)}`;
+};
+var WorkspaceUptimeDetailModal = ({
+  workspace,
+  isOpen,
+  onClose
+}) => {
+  const timezone = useAppTimezone() || "UTC";
+  const logsContainerRef = React23.useRef(null);
+  const [showScrollIndicator, setShowScrollIndicator] = React23.useState(false);
+  const {
+    timeline,
+    loading,
+    error,
+    refetch
+  } = useWorkspaceUptimeTimeline({
+    workspaceId: workspace?.workspace_id,
+    companyId: workspace?.company_id,
+    enabled: isOpen && Boolean(workspace?.workspace_id && workspace?.company_id),
+    refreshInterval: 6e4
+  });
+  React23.useEffect(() => {
+    if (!isOpen || !workspace) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose, workspace]);
+  const shiftStart = timeline ? new Date(timeline.shiftStart) : null;
+  const shiftEnd = timeline ? new Date(timeline.shiftEnd) : null;
+  const downtimeSegments = timeline?.downtimeSegments || [];
+  downtimeSegments.length;
+  const downtimeMinutes = timeline?.downtimeMinutes ?? 0;
+  const uptimePercentage = timeline?.uptimePercentage ?? workspace?.uptimePercentage ?? 0;
+  const allInterruptionsSorted = React23.useMemo(
+    () => [...downtimeSegments].sort(
+      (a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime()
+    ),
+    [downtimeSegments]
+  );
+  React23.useEffect(() => {
+    const checkScroll = () => {
+      const container2 = logsContainerRef.current;
+      if (container2) {
+        const hasScroll = container2.scrollHeight > container2.clientHeight;
+        const isAtBottom = container2.scrollHeight - container2.scrollTop <= container2.clientHeight + 10;
+        setShowScrollIndicator(hasScroll && !isAtBottom);
+      }
+    };
+    checkScroll();
+    const container = logsContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", checkScroll);
+      return () => container.removeEventListener("scroll", checkScroll);
+    }
+  }, [downtimeSegments]);
+  const renderSegment = (segment) => {
+    const start = new Date(segment.startTime);
+    const end = new Date(segment.endTime);
+    const isMajor = segment.durationMinutes >= SHORT_INTERRUPT_THRESHOLD_MINUTES;
+    const containerClasses = isMajor ? "border-rose-200 bg-rose-50" : "border-gray-200 bg-white";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `rounded-lg border px-5 py-3 ${containerClasses}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-900", children: formatTimeRange(start, end, timezone) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600 mt-1", children: [
+            "Duration: ",
+            formatDowntimeLabel2(segment.durationMinutes, false)
+          ] })
+        ]
+      },
+      `${segment.startMinuteIndex}-${segment.endMinuteIndex}`
+    );
+  };
+  if (!isOpen || !workspace) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4",
+      onClick: onClose,
+      "aria-modal": "true",
+      role: "dialog",
+      "aria-labelledby": "uptime-detail-title",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "relative flex w-full max-w-4xl max-h-[90vh] flex-col rounded-2xl bg-white shadow-2xl border border-gray-100",
+          onClick: (event) => event.stopPropagation(),
+          role: "document",
+          "aria-labelledby": "uptime-detail-title",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-start justify-between border-b border-gray-100 px-8 py-6 sticky top-0 z-10 bg-white rounded-t-2xl", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 mr-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "uptime-detail-title", className: "text-2xl font-semibold text-gray-900 truncate mb-3", children: workspace.workspace_display_name || `Workspace ${workspace.workspace_id.slice(0, 6)}` }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 text-sm text-gray-600", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: timeline?.shiftLabel || "Current Shift" }),
+                  shiftStart && shiftEnd && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300", children: "\u2022" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: formatTimeRange(shiftStart, shiftEnd, timezone) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${workspace.status === "healthy" ? "bg-emerald-500 animate-pulse" : workspace.status === "warning" ? "bg-amber-500" : "bg-rose-500"}` }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs font-medium ${workspace.status === "healthy" ? "text-emerald-700" : workspace.status === "warning" ? "text-amber-700" : "text-rose-700"}`, children: workspace.status === "healthy" ? "Operational" : workspace.status === "warning" ? "Intermittent" : "Down" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300", children: "\u2022" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500", children: [
+                    "Last heartbeat ",
+                    workspace.timeSinceLastUpdate
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: refetch,
+                    disabled: loading,
+                    className: "inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200 shadow-sm",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: `h-4 w-4 ${loading ? "animate-spin" : ""}` }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Refresh" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors duration-200",
+                    "aria-label": "Close uptime details",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-8 py-6 space-y-6", children: error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-rose-100 bg-rose-50 p-5 text-sm text-rose-700", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold mb-1", children: "Unable to load uptime details" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-rose-600/90", children: error.message })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pb-4 border-b border-gray-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  UptimeTimelineStrip_default,
+                  {
+                    points: timeline?.points || [],
+                    totalMinutes: timeline?.totalMinutes || 0,
+                    shiftStart: timeline?.shiftStart || (/* @__PURE__ */ new Date()).toISOString(),
+                    shiftEnd: timeline?.shiftEnd || (/* @__PURE__ */ new Date()).toISOString(),
+                    timezone,
+                    uptimePercentage,
+                    downtimeMinutes
+                  }
+                ),
+                loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 mt-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4 animate-spin text-gray-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Updating timeline\u2026" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3", children: "Downtime Logs" }),
+                downtimeSegments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-gray-100 bg-gray-50/50 px-5 py-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: "No downtime events recorded for this shift." }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      ref: logsContainerRef,
+                      className: "max-h-[400px] overflow-y-auto space-y-2 pr-2",
+                      style: {
+                        scrollbarWidth: "thin",
+                        scrollbarColor: "#CBD5E0 #F7FAFC"
+                      },
+                      children: allInterruptionsSorted.map((segment) => renderSegment(segment))
+                    }
+                  ),
+                  showScrollIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white via-white/80 to-transparent pointer-events-none flex items-end justify-center pb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-gray-500 animate-bounce", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Scroll for more" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+                  ] }) })
+                ] })
+              ] })
+            ] }) }) })
+          ]
+        }
+      )
+    }
+  );
+};
+var WorkspaceUptimeDetailModal_default = WorkspaceUptimeDetailModal;
 var WorkspaceHealthView = ({
   lineId,
   companyId,
@@ -48335,6 +49442,7 @@ var WorkspaceHealthView = ({
   const router$1 = router.useRouter();
   const [groupBy, setGroupBy] = React23.useState("line");
   const timezone = useAppTimezone();
+  const [selectedWorkspace, setSelectedWorkspace] = React23.useState(null);
   const operationalDate = getOperationalDate(timezone || "UTC");
   const currentHour = (/* @__PURE__ */ new Date()).getHours();
   const isNightShift = currentHour >= 18 || currentHour < 6;
@@ -48375,6 +49483,12 @@ var WorkspaceHealthView = ({
     },
     [router$1, onNavigate]
   );
+  const handleViewDetails = React23.useCallback((workspace) => {
+    setSelectedWorkspace(workspace);
+  }, []);
+  const handleCloseDetails = React23.useCallback(() => {
+    setSelectedWorkspace(null);
+  }, []);
   const handleExport = React23.useCallback(() => {
     const csv = [
       ["Workspace", "Line", "Company", "Status", "Last Heartbeat", "Consecutive Misses"],
@@ -48432,178 +49546,189 @@ var WorkspaceHealthView = ({
       )
     ] }) }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              BackButtonMinimal,
+              {
+                onClick: () => router$1.push("/"),
+                text: "Back",
+                size: "sm",
+                "aria-label": "Navigate back to dashboard"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => {
+                    refetch();
+                  },
+                  className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                  "aria-label": "Refresh",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleExport,
+                  className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                  "aria-label": "Export CSV",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
             BackButtonMinimal,
             {
               onClick: () => router$1.push("/"),
               text: "Back",
-              size: "sm",
+              size: "default",
               "aria-label": "Navigate back to dashboard"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: () => {
                   refetch();
                 },
-                className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
                 "aria-label": "Refresh",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-5 w-5" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: handleExport,
-                className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
                 "aria-label": "Export CSV",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-5 w-5" })
               }
             )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 sm:mt-2 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
+              shiftType,
+              " Shift"
+            ] })
           ] })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-          BackButtonMinimal,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto p-4 space-y-6", children: [
+        summary && /* @__PURE__ */ jsxRuntime.jsxs(
+          motion.div,
           {
-            onClick: () => router$1.push("/"),
-            text: "Back",
-            size: "default",
-            "aria-label": "Navigate back to dashboard"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => {
-                refetch();
-              },
-              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-              "aria-label": "Refresh",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-5 w-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleExport,
-              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-              "aria-label": "Export CSV",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-5 w-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
-            shiftType,
-            " Shift"
-          ] })
-        ] })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto p-4 space-y-6", children: [
-      summary && /* @__PURE__ */ jsxRuntime.jsxs(
-        motion.div,
-        {
-          initial: { opacity: 0, y: 20 },
-          animate: { opacity: 1, y: 0 },
-          transition: { duration: 0.3, delay: 0.1 },
-          className: "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-2 sm:gap-3 lg:gap-4",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "System Availability" }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
-                    summary.uptimePercentage.toFixed(1),
-                    "%"
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.3, delay: 0.1 },
+            className: "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-2 sm:gap-3 lg:gap-4",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "System Availability" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
+                      summary.uptimePercentage.toFixed(1),
+                      "%"
+                    ] }),
+                    summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
                   ] }),
-                  summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Overall system uptime today" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
-                getStatusIcon("healthy"),
-                "Healthy"
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.healthyWorkspaces }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Operating normally" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
-                getStatusIcon("warning"),
-                "Warning"
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.warningWorkspaces }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Delayed updates" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
-                getStatusIcon("unhealthy"),
-                "Unhealthy"
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.unhealthyWorkspaces }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Requires attention" })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Overall system uptime today" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                  getStatusIcon("healthy"),
+                  "Healthy"
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.healthyWorkspaces }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Operating normally" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                  getStatusIcon("warning"),
+                  "Warning"
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.warningWorkspaces }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Delayed updates" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                  getStatusIcon("unhealthy"),
+                  "Unhealthy"
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.unhealthyWorkspaces }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Requires attention" })
+                ] })
               ] })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        motion.div,
-        {
-          initial: { opacity: 0, y: 20 },
-          animate: { opacity: 1, y: 0 },
-          transition: { duration: 0.3, delay: 0.2 },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            HealthStatusGrid,
-            {
-              workspaces,
-              onWorkspaceClick: handleWorkspaceClick,
-              showFilters: true,
-              groupBy
-            }
-          )
-        }
-      )
-    ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.3, delay: 0.2 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              HealthStatusGrid,
+              {
+                workspaces,
+                onWorkspaceClick: handleWorkspaceClick,
+                onWorkspaceViewDetails: handleViewDetails,
+                showFilters: true,
+                groupBy
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WorkspaceUptimeDetailModal_default,
+      {
+        workspace: selectedWorkspace,
+        isOpen: Boolean(selectedWorkspace),
+        onClose: handleCloseDetails
+      }
+    )
   ] });
 };
 var WorkspaceHealthView_default = withAuth(WorkspaceHealthView, {
@@ -52563,6 +53688,7 @@ exports.useWorkspaceHealthStatus = useWorkspaceHealthStatus;
 exports.useWorkspaceMetrics = useWorkspaceMetrics;
 exports.useWorkspaceNavigation = useWorkspaceNavigation;
 exports.useWorkspaceOperators = useWorkspaceOperators;
+exports.useWorkspaceUptimeTimeline = useWorkspaceUptimeTimeline;
 exports.userService = userService;
 exports.videoPrefetchManager = videoPrefetchManager;
 exports.videoPreloader = videoPreloader;