@optifye/dashboard-core 6.4.1 → 6.5.0

package/dist/index.js

@@ -7,7 +7,6 @@ var dateFnsTz = require('date-fns-tz');
 var dateFns = require('date-fns');
 var mixpanel = require('mixpanel-browser');
 var events = require('events');
-var clientS3 = require('@aws-sdk/client-s3');
 var supabaseJs = require('@supabase/supabase-js');
 var Hls2 = require('hls.js');
 var useSWR = require('swr');
@@ -18,12 +17,14 @@ var reactSlot = require('@radix-ui/react-slot');
 var lucideReact = require('lucide-react');
 var reactDayPicker = require('react-day-picker');
 var outline = require('@heroicons/react/24/outline');
+var solid = require('@heroicons/react/24/solid');
 var html2canvas = require('html2canvas');
 var jsPDF = require('jspdf');
 var SelectPrimitive = require('@radix-ui/react-select');
 var videojs = require('video.js');
 require('video.js/dist/video-js.css');
 var sonner = require('sonner');
+var clientS3 = require('@aws-sdk/client-s3');
 var s3RequestPresigner = require('@aws-sdk/s3-request-presigner');
 var stream = require('stream');
 
@@ -1703,6 +1704,25 @@ var workspaceService = {
     this._workspaceDisplayNamesCache.clear();
     this._cacheTimestamp = 0;
   },
+  /**
+   * Updates the display name for a workspace
+   * @param workspaceId - The workspace UUID
+   * @param displayName - The new display name
+   * @returns Promise<void>
+   */
+  async updateWorkspaceDisplayName(workspaceId, displayName) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const config = _getDashboardConfigInstance();
+    const dbConfig = config?.databaseConfig;
+    const workspacesTable = getTable3(dbConfig, "workspaces");
+    const { error } = await supabase.from(workspacesTable).update({ display_name: displayName.trim() }).eq("id", workspaceId);
+    if (error) {
+      console.error(`Error updating workspace display name for ${workspaceId}:`, error);
+      throw error;
+    }
+    this.clearWorkspaceDisplayNamesCache();
+  },
   async updateWorkspaceAction(updates) {
     const supabase = _getSupabaseInstance();
     if (!supabase) throw new Error("Supabase client not initialized");
@@ -1846,6 +1866,209 @@ var workspaceService = {
     }
   }
 };
+var WorkspaceHealthService = class _WorkspaceHealthService {
+  constructor() {
+    this.cache = /* @__PURE__ */ new Map();
+    this.cacheExpiryMs = 30 * 1e3;
+  }
+  // 30 seconds cache
+  static getInstance() {
+    if (!_WorkspaceHealthService.instance) {
+      _WorkspaceHealthService.instance = new _WorkspaceHealthService();
+    }
+    return _WorkspaceHealthService.instance;
+  }
+  getFromCache(key) {
+    const cached = this.cache.get(key);
+    if (cached && Date.now() - cached.timestamp < this.cacheExpiryMs) {
+      return cached.data;
+    }
+    this.cache.delete(key);
+    return null;
+  }
+  setCache(key, data) {
+    this.cache.set(key, { data, timestamp: Date.now() });
+  }
+  async getWorkspaceHealthStatus(options = {}) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    let query = supabase.from("workspace_health_status").select("*").order("workspace_display_name", { ascending: true });
+    if (options.lineId) {
+      query = query.eq("line_id", options.lineId);
+    }
+    if (options.companyId) {
+      query = query.eq("company_id", options.companyId);
+    }
+    const { data, error } = await query;
+    if (error) {
+      console.error("Error fetching workspace health status:", error);
+      throw error;
+    }
+    const processedData = (data || []).map((item) => this.processHealthStatus(item));
+    let filteredData = processedData;
+    try {
+      const { data: enabledWorkspaces, error: workspaceError } = await supabase.from("workspaces").select("workspace_id, display_name").eq("enable", true);
+      if (!workspaceError && enabledWorkspaces && enabledWorkspaces.length > 0) {
+        const enabledWorkspaceNames = /* @__PURE__ */ new Set();
+        enabledWorkspaces.forEach((w) => {
+          if (w.workspace_id) enabledWorkspaceNames.add(w.workspace_id);
+          if (w.display_name) enabledWorkspaceNames.add(w.display_name);
+        });
+        filteredData = filteredData.filter((item) => {
+          const displayName = item.workspace_display_name || "";
+          return enabledWorkspaceNames.has(displayName);
+        });
+      } else if (!workspaceError && enabledWorkspaces && enabledWorkspaces.length === 0) {
+        return [];
+      } else if (workspaceError) {
+        console.error("Error fetching enabled workspaces:", workspaceError);
+      }
+    } catch (e) {
+      console.error("Error filtering workspaces:", e);
+    }
+    if (options.status) {
+      filteredData = filteredData.filter((item) => item.status === options.status);
+    }
+    if (options.searchTerm) {
+      const searchLower = options.searchTerm.toLowerCase();
+      filteredData = filteredData.filter(
+        (item) => item.workspace_display_name?.toLowerCase().includes(searchLower) || item.line_name?.toLowerCase().includes(searchLower) || item.company_name?.toLowerCase().includes(searchLower)
+      );
+    }
+    if (options.sortBy) {
+      filteredData.sort((a, b) => {
+        let compareValue = 0;
+        switch (options.sortBy) {
+          case "name":
+            compareValue = (a.workspace_display_name || "").localeCompare(b.workspace_display_name || "");
+            break;
+          case "status":
+            compareValue = this.getStatusPriority(a.status) - this.getStatusPriority(b.status);
+            break;
+          case "lastUpdate":
+            compareValue = new Date(b.last_heartbeat).getTime() - new Date(a.last_heartbeat).getTime();
+            break;
+        }
+        return options.sortOrder === "desc" ? -compareValue : compareValue;
+      });
+    }
+    return filteredData;
+  }
+  async getWorkspaceHealthById(workspaceId) {
+    const cacheKey = `health-${workspaceId}`;
+    const cached = this.getFromCache(cacheKey);
+    if (cached) return cached;
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const { data, error } = await supabase.from("workspace_health_status").select("*").eq("workspace_id", workspaceId).single();
+    if (error) {
+      if (error.code === "PGRST116") {
+        return null;
+      }
+      console.error("Error fetching workspace health:", error);
+      throw error;
+    }
+    const processedData = data ? this.processHealthStatus(data) : null;
+    if (processedData) {
+      this.setCache(cacheKey, processedData);
+    }
+    return processedData;
+  }
+  async getHealthSummary(lineId, companyId) {
+    this.clearCache();
+    const workspaces = await this.getWorkspaceHealthStatus({ lineId, companyId });
+    const totalWorkspaces = workspaces.length;
+    const healthyWorkspaces = workspaces.filter((w) => w.status === "healthy").length;
+    const unhealthyWorkspaces = workspaces.filter((w) => w.status === "unhealthy").length;
+    const warningWorkspaces = workspaces.filter((w) => w.status === "warning").length;
+    const uptimePercentage = totalWorkspaces > 0 ? healthyWorkspaces / totalWorkspaces * 100 : 0;
+    return {
+      totalWorkspaces,
+      healthyWorkspaces,
+      unhealthyWorkspaces,
+      warningWorkspaces,
+      uptimePercentage,
+      lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }
+  async getHealthMetrics(workspaceId, startDate, endDate) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    return {
+      avgResponseTime: 250,
+      totalDowntime: 0,
+      incidentCount: 0,
+      mttr: 0
+    };
+  }
+  processHealthStatus(data) {
+    const now2 = /* @__PURE__ */ new Date();
+    const lastHeartbeat = new Date(data.last_heartbeat);
+    const minutesSinceUpdate = Math.floor((now2.getTime() - lastHeartbeat.getTime()) / (1e3 * 60));
+    let status = "unknown";
+    let isStale = false;
+    if (data.is_healthy) {
+      if (minutesSinceUpdate < 3) {
+        status = "healthy";
+      } else if (minutesSinceUpdate < 5) {
+        status = "warning";
+        isStale = true;
+      } else {
+        status = "unhealthy";
+        isStale = true;
+      }
+    } else {
+      status = "unhealthy";
+      if (minutesSinceUpdate > 5) {
+        isStale = true;
+      }
+    }
+    const timeSinceLastUpdate = dateFns.formatDistanceToNow(lastHeartbeat, { addSuffix: true });
+    return {
+      ...data,
+      status,
+      timeSinceLastUpdate,
+      isStale
+    };
+  }
+  getStatusPriority(status) {
+    const priorities = {
+      unhealthy: 0,
+      warning: 1,
+      unknown: 2,
+      healthy: 3
+    };
+    return priorities[status];
+  }
+  subscribeToHealthUpdates(callback, filters) {
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    let subscription = supabase.channel("workspace-health-updates").on(
+      "postgres_changes",
+      {
+        event: "*",
+        schema: "public",
+        table: "workspace_health_status"
+      },
+      (payload) => {
+        if (payload.new) {
+          const newData = payload.new;
+          if (filters?.lineId && newData.line_id !== filters.lineId) return;
+          if (filters?.companyId && newData.company_id !== filters.companyId) return;
+          this.clearCache();
+          callback(newData);
+        }
+      }
+    ).subscribe();
+    return () => {
+      subscription.unsubscribe();
+    };
+  }
+  clearCache() {
+    this.cache.clear();
+  }
+};
+var workspaceHealthService = WorkspaceHealthService.getInstance();
 
 // src/lib/services/skuService.ts
 var getTable4 = (dbConfig, tableName) => {
@@ -2675,6 +2898,17 @@ var TicketHistoryService = class {
     }
     return data;
   }
+  /**
+   * Update ticket serviced status
+   */
+  static async updateTicketServicedStatus(ticketId, serviced) {
+    const supabase = _getSupabaseInstance();
+    const { data, error } = await supabase.from("support_ticket_history").update({ serviced, updated_at: (/* @__PURE__ */ new Date()).toISOString() }).eq("id", ticketId).select().single();
+    if (error) {
+      throw new Error(`Failed to update ticket serviced status: ${error.message}`);
+    }
+    return data;
+  }
 };
 
 // src/lib/services/audioService.ts
@@ -3229,6 +3463,14 @@ function parseS3Uri(s3Uri, sopCategories) {
     return null;
   }
 }
+function shuffleArray(array) {
+  const shuffled = [...array];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled;
+}
 
 // src/lib/cache/clipsCache.ts
 var LRUCache = class _LRUCache {
@@ -3741,300 +3983,321 @@ if (typeof window !== "undefined") {
     });
   });
 }
-
-// src/lib/api/s3-clips.ts
-var RequestDeduplicationCache = class {
-  constructor() {
-    this.pendingRequests = /* @__PURE__ */ new Map();
-    this.maxCacheSize = 1e3;
-    this.cleanupInterval = 3e5;
-    // 5 minutes
-    this.lastCleanup = Date.now();
+var getSupabaseClient = () => {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  if (!url || !key) {
+    throw new Error("Supabase configuration missing");
+  }
+  return supabaseJs.createClient(url, key);
+};
+var getAuthToken = async () => {
+  try {
+    const supabase = getSupabaseClient();
+    const { data: { session } } = await supabase.auth.getSession();
+    return session?.access_token || null;
+  } catch (error) {
+    console.error("[S3ClipsAPIClient] Error getting auth token:", error);
+    return null;
+  }
+};
+var S3ClipsAPIClient = class {
+  constructor(sopCategories) {
+    this.baseUrl = "/api/clips";
+    this.requestCache = /* @__PURE__ */ new Map();
+    this.sopCategories = sopCategories;
+    console.log("[S3ClipsAPIClient] \u2705 Initialized - Using secure API routes (no direct S3 access)");
   }
   /**
-   * Get or create a deduplicated request
+   * Fetch with authentication and error handling
    */
-  async deduplicate(key, factory, logPrefix = "Request") {
-    this.periodicCleanup();
-    const existingRequest = this.pendingRequests.get(key);
-    if (existingRequest) {
-      console.log(`[${logPrefix}] Deduplicating request for key: ${key}`);
-      return existingRequest;
+  async fetchWithAuth(endpoint, body) {
+    const token = await getAuthToken();
+    if (!token) {
+      throw new Error("Authentication required");
+    }
+    const response = await fetch(endpoint, {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${token}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(body)
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Request failed" }));
+      throw new Error(error.error || `API error: ${response.status}`);
+    }
+    return response.json();
+  }
+  /**
+   * Deduplicate requests to prevent multiple API calls
+   */
+  async deduplicate(key, factory) {
+    if (this.requestCache.has(key)) {
+      console.log(`[S3ClipsAPIClient] Deduplicating request: ${key}`);
+      return this.requestCache.get(key);
     }
-    console.log(`[${logPrefix}] Creating new request for key: ${key}`);
     const promise = factory().finally(() => {
-      this.pendingRequests.delete(key);
-      console.log(`[${logPrefix}] Completed and cleaned up request: ${key}`);
+      this.requestCache.delete(key);
     });
-    this.pendingRequests.set(key, promise);
+    this.requestCache.set(key, promise);
     return promise;
   }
   /**
-   * Clear all pending requests (useful for cleanup)
+   * List S3 clips
    */
-  clear() {
-    console.log(`[RequestCache] Clearing ${this.pendingRequests.size} pending requests`);
-    this.pendingRequests.clear();
+  async listS3Clips(params) {
+    const cacheKey = `list:${JSON.stringify(params)}`;
+    return this.deduplicate(cacheKey, async () => {
+      const response = await this.fetchWithAuth(this.baseUrl, {
+        action: "list",
+        workspaceId: params.workspaceId,
+        date: params.date,
+        shift: params.shiftId,
+        maxKeys: params.maxKeys
+      });
+      return response.clips.map((clip) => clip.originalUri);
+    });
   }
   /**
-   * Get current cache stats
+   * Get clip counts
    */
-  getStats() {
-    return {
-      pendingCount: this.pendingRequests.size,
-      maxSize: this.maxCacheSize
+  async getClipCounts(workspaceId, date, shiftId) {
+    const cacheKey = `counts:${workspaceId}:${date}:${shiftId}`;
+    return this.deduplicate(cacheKey, async () => {
+      const response = await this.fetchWithAuth(this.baseUrl, {
+        action: "count",
+        workspaceId,
+        date,
+        shift: shiftId.toString()
+      });
+      return response.counts;
+    });
+  }
+  /**
+   * Get clip counts with index (for compatibility)
+   */
+  async getClipCountsWithIndex(workspaceId, date, shiftId) {
+    const counts = await this.getClipCounts(workspaceId, date, shiftId.toString());
+    const videoIndex = {
+      byCategory: /* @__PURE__ */ new Map(),
+      allVideos: [],
+      counts,
+      workspaceId,
+      date,
+      shiftId: shiftId.toString(),
+      lastUpdated: /* @__PURE__ */ new Date()
     };
+    return { counts, videoIndex };
   }
   /**
-   * Periodic cleanup to prevent memory leaks
+   * Get metadata for a video
    */
-  periodicCleanup() {
-    const now2 = Date.now();
-    if (now2 - this.lastCleanup > this.cleanupInterval) {
-      if (this.pendingRequests.size > this.maxCacheSize) {
-        console.warn(`[RequestCache] Cache size exceeded ${this.maxCacheSize}, clearing oldest entries`);
-        const entries = Array.from(this.pendingRequests.entries());
-        this.pendingRequests.clear();
-        entries.slice(-Math.floor(this.maxCacheSize / 2)).forEach(([key, promise]) => {
-          this.pendingRequests.set(key, promise);
-        });
+  async getMetadata(playlistUri) {
+    const cacheKey = `metadata:${playlistUri}`;
+    return this.deduplicate(cacheKey, async () => {
+      const response = await this.fetchWithAuth(this.baseUrl, {
+        action: "metadata",
+        playlistUri
+      });
+      return response.metadata;
+    });
+  }
+  /**
+   * Get metadata cycle time
+   */
+  async getMetadataCycleTime(playlistUri) {
+    const metadata = await this.getMetadata(playlistUri);
+    return metadata?.cycle_time_seconds || null;
+  }
+  /**
+   * Get first clip for category
+   */
+  async getFirstClipForCategory(workspaceId, date, shiftId, category) {
+    const cacheKey = `first:${workspaceId}:${date}:${shiftId}:${category}`;
+    return this.deduplicate(cacheKey, async () => {
+      const response = await this.fetchWithAuth(this.baseUrl, {
+        action: "first",
+        workspaceId,
+        date,
+        shift: shiftId.toString(),
+        category,
+        sopCategories: this.sopCategories
+      });
+      return response.video;
+    });
+  }
+  /**
+   * Get clip by index
+   */
+  async getClipByIndex(workspaceId, date, shiftId, category, index, includeCycleTime = true, includeMetadata = false) {
+    const cacheKey = `by-index:${workspaceId}:${date}:${shiftId}:${category}:${index}`;
+    return this.deduplicate(cacheKey, async () => {
+      const response = await this.fetchWithAuth(this.baseUrl, {
+        action: "by-index",
+        workspaceId,
+        date,
+        shift: shiftId.toString(),
+        category,
+        index,
+        sopCategories: this.sopCategories
+      });
+      const video = response.video;
+      if (video && includeMetadata && video.originalUri) {
+        try {
+          const metadata = await this.getMetadata(video.originalUri);
+          if (metadata) {
+            video.cycle_time_seconds = metadata.cycle_time_seconds;
+            video.creation_timestamp = metadata.creation_timestamp;
+          }
+        } catch (error) {
+          console.warn("[S3ClipsAPIClient] Failed to fetch metadata:", error);
+        }
       }
-      this.lastCleanup = now2;
-    }
+      return video;
+    });
+  }
+  /**
+   * Get videos page with pagination
+   */
+  async getVideosPage(workspaceId, date, shiftId, category, pageSize = 5, startAfter) {
+    const cacheKey = `page:${workspaceId}:${date}:${shiftId}:${category}:${pageSize}:${startAfter || "first"}`;
+    return this.deduplicate(cacheKey, async () => {
+      const response = await this.fetchWithAuth(this.baseUrl, {
+        action: "page",
+        workspaceId,
+        date,
+        shift: shiftId.toString(),
+        category,
+        pageSize,
+        startAfter,
+        sopCategories: this.sopCategories
+      });
+      return {
+        videos: response.videos,
+        nextToken: response.nextToken,
+        hasMore: response.hasMore
+      };
+    });
+  }
+  /**
+   * Convert S3 URI to CloudFront URL
+   * In the API client, URLs are already signed from the server
+   */
+  s3UriToCloudfront(s3Uri) {
+    return s3Uri;
+  }
+  /**
+   * Clean up resources
+   */
+  dispose() {
+    this.requestCache.clear();
+  }
+  /**
+   * Get service statistics
+   */
+  getStats() {
+    return {
+      requestCache: {
+        pendingCount: this.requestCache.size,
+        maxSize: 1e3
+      }
+    };
   }
 };
+
+// src/lib/api/s3-clips-secure.ts
 var S3ClipsService = class {
   constructor(config) {
-    // Request deduplication cache
-    this.requestCache = new RequestDeduplicationCache();
-    // Flag to prevent metadata fetching during index building
+    // Flags for compatibility
     this.isIndexBuilding = false;
-    // Flag to prevent metadata fetching during entire prefetch operation
     this.isPrefetching = false;
-    // Global safeguard: limit concurrent metadata fetches to prevent flooding
     this.currentMetadataFetches = 0;
     this.MAX_CONCURRENT_METADATA = 3;
     this.config = config;
     if (!config.s3Config) {
       throw new Error("S3 configuration is required");
     }
+    const sopCategories = config.s3Config.sopCategories?.default;
+    this.apiClient = new S3ClipsAPIClient(sopCategories);
     const processing = config.s3Config.processing || {};
     this.defaultLimitPerCategory = processing.defaultLimitPerCategory || 30;
     this.maxLimitPerCategory = processing.maxLimitPerCategory || 1e3;
     this.concurrencyLimit = processing.concurrencyLimit || 10;
     this.maxInitialFetch = processing.maxInitialFetch || 60;
-    const region = this.validateAndSanitizeRegion(config.s3Config.region);
-    console.log(`S3ClipsService: Using AWS region: ${region}`);
-    this.s3Client = new clientS3.S3Client({
-      region,
-      credentials: config.s3Config.credentials ? {
-        accessKeyId: config.s3Config.credentials.accessKeyId,
-        secretAccessKey: config.s3Config.credentials.secretAccessKey
-      } : void 0
-    });
-  }
-  /**
-   * Validates and sanitizes the AWS region
-   */
-  validateAndSanitizeRegion(region) {
-    const defaultRegion = "us-east-1";
-    if (!region || typeof region !== "string") {
-      console.warn(`S3ClipsService: Invalid region provided (${region}), using default: ${defaultRegion}`);
-      return defaultRegion;
-    }
-    const sanitizedRegion = region.trim().toLowerCase();
-    if (!sanitizedRegion) {
-      console.warn(`S3ClipsService: Empty region provided, using default: ${defaultRegion}`);
-      return defaultRegion;
-    }
-    const regionPattern = /^[a-z]{2,3}-[a-z]+-\d+$/;
-    if (!regionPattern.test(sanitizedRegion)) {
-      console.warn(`S3ClipsService: Invalid region format (${sanitizedRegion}), using default: ${defaultRegion}`);
-      return defaultRegion;
-    }
-    return sanitizedRegion;
+    console.log("[S3ClipsService] \u2705 Initialized with secure API client - AWS credentials are now server-side only!");
   }
   /**
-   * Lists S3 clips for a workspace, date, and shift with request deduplication
+   * Lists S3 clips using API
    */
   async listS3Clips(params) {
-    const { workspaceId, date, shiftId, maxKeys } = params;
+    const { workspaceId, date, shiftId } = params;
     if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}. Must be 0 (day) or 1 (night)`);
+      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
       return [];
     }
-    const prefix = `sop_violations/${workspaceId}/${date}/${shiftId}/`;
-    console.log(`[S3ClipsService] Listing clips for workspace: ${workspaceId}, date: ${date}, shift: ${shiftId}`);
-    const deduplicationKey = `list-s3-clips:${prefix}:${maxKeys || "all"}`;
-    return this.requestCache.deduplicate(
-      deduplicationKey,
-      () => this.executeListS3Clips(params),
-      "ListS3Clips"
-    );
-  }
-  /**
-   * Internal implementation of S3 listing (called through deduplication)
-   */
-  async executeListS3Clips(params) {
-    const { workspaceId, date, shiftId, maxKeys } = params;
-    const prefix = `sop_violations/${workspaceId}/${date}/${shiftId}/`;
-    console.log(`[S3ClipsService] Executing S3 list for prefix: ${prefix}`);
+    console.log(`[S3ClipsService] Listing clips via API for workspace: ${workspaceId}`);
     try {
-      let playlists = [];
-      let continuationToken = void 0;
-      do {
-        const command = new clientS3.ListObjectsV2Command({
-          Bucket: this.config.s3Config.bucketName,
-          Prefix: prefix,
-          ContinuationToken: continuationToken,
-          MaxKeys: maxKeys ?? 1e3
-        });
-        const response = await this.s3Client.send(command);
-        console.log(`Got S3 response for ${prefix}:`, {
-          keyCount: response.KeyCount,
-          contentsLength: response.Contents?.length || 0,
-          hasContinuation: !!response.NextContinuationToken
-        });
-        if (response.Contents) {
-          if (response.Contents.length > 0) {
-            console.log("Sample Keys:", response.Contents.slice(0, 3).map((obj) => obj.Key));
-          }
-          for (const obj of response.Contents) {
-            if (obj.Key && obj.Key.endsWith("playlist.m3u8")) {
-              if (obj.Key.includes("missed_qchecks")) {
-                console.log(`Skipping missed_qchecks path: ${obj.Key}`);
-                continue;
-              }
-              playlists.push(`s3://${this.config.s3Config.bucketName}/${obj.Key}`);
-            }
-          }
-        }
-        continuationToken = response.NextContinuationToken;
-        if (maxKeys && playlists.length >= maxKeys) {
-          break;
-        }
-      } while (continuationToken && (!maxKeys || playlists.length < maxKeys));
-      console.log(`Found ${playlists.length} HLS playlists in ${prefix}`);
-      if (playlists.length > 0) {
-        console.log("First playlist URI:", playlists[0]);
-      }
-      return playlists;
+      return await this.apiClient.listS3Clips(params);
     } catch (error) {
-      console.error(`Error listing S3 objects with prefix '${prefix}':`, error);
+      console.error("[S3ClipsService] Error listing clips:", error);
       return [];
     }
   }
   /**
-   * Fetches and extracts cycle time from metadata.json with deduplication
+   * Get metadata cycle time
    */
   async getMetadataCycleTime(playlistUri) {
-    const deduplicationKey = `metadata-cycle-time:${playlistUri}`;
-    return this.requestCache.deduplicate(
-      deduplicationKey,
-      () => this.executeGetMetadataCycleTime(playlistUri),
-      "MetadataCycleTime"
-    );
-  }
-  /**
-   * Internal implementation of metadata cycle time fetching
-   */
-  async executeGetMetadataCycleTime(playlistUri) {
     try {
-      const metadataUri = playlistUri.replace(/playlist\.m3u8$/, "metadata.json");
-      const url = new URL(metadataUri);
-      const bucket = url.hostname;
-      const key = url.pathname.substring(1);
-      console.log(`[S3ClipsService] Fetching metadata cycle time for: ${key}`);
-      const command = new clientS3.GetObjectCommand({
-        Bucket: bucket,
-        Key: key
-      });
-      const response = await this.s3Client.send(command);
-      if (!response.Body) {
-        console.warn(`Empty response body for metadata file: ${key}`);
-        return null;
-      }
-      const metadataContent = await response.Body.transformToString();
-      const metadata = JSON.parse(metadataContent);
-      const cycleTimeFrames = metadata?.original_task_metadata?.cycle_time;
-      if (typeof cycleTimeFrames === "number") {
-        return cycleTimeFrames;
-      }
-      return null;
+      return await this.apiClient.getMetadataCycleTime(playlistUri);
     } catch (error) {
-      console.error(`Error fetching or parsing metadata:`, error);
+      console.error("[S3ClipsService] Error fetching metadata cycle time:", error);
       return null;
     }
   }
   /**
-   * Control prefetch mode to prevent metadata fetching during background operations
+   * Control prefetch mode
    */
   setPrefetchMode(enabled) {
     this.isPrefetching = enabled;
-    console.log(`[S3ClipsService] Prefetch mode ${enabled ? "enabled" : "disabled"} - metadata fetching ${enabled ? "blocked" : "allowed"}`);
+    console.log(`[S3ClipsService] Prefetch mode ${enabled ? "enabled" : "disabled"}`);
   }
   /**
-   * Fetches full metadata including timestamps with deduplication
+   * Get full metadata
    */
   async getFullMetadata(playlistUri) {
     if (this.isIndexBuilding || this.isPrefetching) {
-      console.warn(`[S3ClipsService] Skipping metadata fetch - building: ${this.isIndexBuilding}, prefetching: ${this.isPrefetching}`);
+      console.warn("[S3ClipsService] Skipping metadata - operation in progress");
       return null;
     }
     if (this.currentMetadataFetches >= this.MAX_CONCURRENT_METADATA) {
-      console.warn(`[S3ClipsService] Skipping metadata - max concurrent fetches (${this.MAX_CONCURRENT_METADATA}) reached`);
+      console.warn("[S3ClipsService] Skipping metadata - max concurrent fetches reached");
       return null;
     }
     this.currentMetadataFetches++;
     try {
-      const deduplicationKey = `full-metadata:${playlistUri}`;
-      return await this.requestCache.deduplicate(
-        deduplicationKey,
-        () => this.executeGetFullMetadata(playlistUri),
-        "FullMetadata"
-      );
-    } finally {
-      this.currentMetadataFetches--;
-    }
-  }
-  /**
-   * Internal implementation of full metadata fetching
-   */
-  async executeGetFullMetadata(playlistUri) {
-    try {
-      const metadataUri = playlistUri.replace(/playlist\.m3u8$/, "metadata.json");
-      const url = new URL(metadataUri);
-      const bucket = url.hostname;
-      const key = url.pathname.substring(1);
-      console.log(`[S3ClipsService] Fetching full metadata for: ${key}`);
-      const command = new clientS3.GetObjectCommand({
-        Bucket: bucket,
-        Key: key
-      });
-      const response = await this.s3Client.send(command);
-      if (!response.Body) {
-        console.warn(`Empty response body for metadata file: ${key}`);
-        return null;
-      }
-      const metadataContent = await response.Body.transformToString();
-      const metadata = JSON.parse(metadataContent);
-      return metadata;
+      return await this.apiClient.getMetadata(playlistUri);
     } catch (error) {
-      console.error(`Error fetching or parsing metadata:`, error);
+      console.error("[S3ClipsService] Error fetching metadata:", error);
       return null;
+    } finally {
+      this.currentMetadataFetches--;
     }
   }
   /**
-   * Converts S3 URI to CloudFront URL
+   * Convert S3 URI to CloudFront URL
+   * URLs from API are already signed
    */
   s3UriToCloudfront(s3Uri) {
-    const url = new URL(s3Uri);
-    const key = url.pathname.startsWith("/") ? url.pathname.substring(1) : url.pathname;
-    const cloudfrontUrl = `${this.config.s3Config.cloudFrontDomain}/${key}`;
-    return cloudfrontUrl;
+    if (s3Uri.startsWith("http")) {
+      return s3Uri;
+    }
+    console.warn("[S3ClipsService] Unexpected S3 URI in secure mode:", s3Uri);
+    return s3Uri;
   }
   /**
-   * Gets SOP categories for a specific workspace
+   * Get SOP categories for workspace
    */
   getSOPCategories(workspaceId) {
     const sopConfig = this.config.s3Config?.sopCategories;
@@ -4046,375 +4309,85 @@ var S3ClipsService = class {
   }
   async getClipCounts(workspaceId, date, shiftId, buildIndex) {
     if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] getClipCounts - Invalid shift ID: ${shiftId}. Must be 0 (day) or 1 (night)`);
-      return buildIndex ? { counts: {}, videoIndex: { byCategory: /* @__PURE__ */ new Map(), allVideos: [], counts: {}, workspaceId, date, shiftId: "0", lastUpdated: /* @__PURE__ */ new Date() } } : {};
-    }
-    const deduplicationKey = `clip-counts:${workspaceId}:${date}:${shiftId}:${buildIndex ? "with-index" : "counts-only"}`;
-    return this.requestCache.deduplicate(
-      deduplicationKey,
-      () => this.executeGetClipCounts(workspaceId, date, shiftId, buildIndex),
-      "ClipCounts"
-    );
-  }
-  /**
-   * Internal implementation of clip counts fetching
-   */
-  async executeGetClipCounts(workspaceId, date, shiftId, buildIndex) {
-    if (buildIndex) {
-      this.isIndexBuilding = true;
-      console.log(`[S3ClipsService] Starting index building - metadata fetching disabled`);
+      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
+      return buildIndex ? { counts: {}, videoIndex: this.createEmptyVideoIndex(workspaceId, date, shiftId.toString()) } : {};
     }
     try {
-      const basePrefix = `sop_violations/${workspaceId}/${date}/${shiftId}/`;
-      const counts = { total: 0 };
-      const categoryFolders = [
-        "idle_time",
-        "low_value",
-        "sop_deviation",
-        "missing_quality_check",
-        "best_cycle_time",
-        "worst_cycle_time",
-        "long_cycle_time",
-        "cycle_completion",
-        "bottleneck"
-      ];
-      const shiftName = shiftId === 0 || shiftId === "0" ? "Day" : "Night";
-      console.log(`[S3ClipsService] ${buildIndex ? "Building video index and counting" : "Fast counting"} clips for ${workspaceId} on ${date}, shift ${shiftId} (${shiftName} Shift)`);
-      const startTime = performance.now();
-      const videoIndex = buildIndex ? {
-        byCategory: /* @__PURE__ */ new Map(),
-        allVideos: [],
-        counts: {},
-        workspaceId,
-        date,
-        shiftId: shiftId.toString(),
-        lastUpdated: /* @__PURE__ */ new Date(),
-        _debugId: `vid_${Date.now()}_${Math.random().toString(36).substring(7)}`
-      } : null;
-      const countPromises = categoryFolders.map(async (category) => {
-        const categoryPrefix = `${basePrefix}${category}/videos/`;
-        const categoryVideos = [];
-        try {
-          if (buildIndex) {
-            const command = new clientS3.ListObjectsV2Command({
-              Bucket: this.config.s3Config.bucketName,
-              Prefix: categoryPrefix,
-              MaxKeys: 1e3
-            });
-            let continuationToken;
-            do {
-              if (continuationToken) {
-                command.input.ContinuationToken = continuationToken;
-              }
-              const response = await this.s3Client.send(command);
-              if (response.Contents) {
-                for (const obj of response.Contents) {
-                  if (obj.Key && obj.Key.endsWith("playlist.m3u8")) {
-                    if (obj.Key.includes("missed_qchecks")) {
-                      continue;
-                    }
-                    const s3Uri = `s3://${this.config.s3Config.bucketName}/${obj.Key}`;
-                    const sopCategories = this.getSOPCategories(workspaceId);
-                    const parsedInfo = parseS3Uri(s3Uri, sopCategories);
-                    const belongsToCategory = parsedInfo && (parsedInfo.type === category || // Handle specific mismatches between folder names and parsed types
-                    category === "cycle_completion" && parsedInfo.type === "cycle_completion" || category === "sop_deviation" && parsedInfo.type === "missing_quality_check" || category === "missing_quality_check" && parsedInfo.type === "missing_quality_check" || category === "idle_time" && parsedInfo.type === "low_value" || category === "low_value" && parsedInfo.type === "low_value");
-                    if (belongsToCategory) {
-                      const videoEntry = {
-                        uri: s3Uri,
-                        category: parsedInfo.type,
-                        // Use the parsed type, not the folder name
-                        timestamp: parsedInfo.timestamp,
-                        videoId: `${workspaceId}-${parsedInfo.timestamp}`,
-                        workspaceId,
-                        date,
-                        shiftId: shiftId.toString()
-                      };
-                      categoryVideos.push(videoEntry);
-                    }
-                  }
-                }
-              }
-              continuationToken = response.NextContinuationToken;
-            } while (continuationToken);
-            categoryVideos.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-            if (categoryVideos.length > 0) {
-              console.log(`[S3ClipsService] Found ${categoryVideos.length} videos for category '${category}' (parsed types: ${[...new Set(categoryVideos.map((v) => v.category))].join(", ")})`);
-            }
-            return { category, count: categoryVideos.length, videos: categoryVideos };
-          } else {
-            const command = new clientS3.ListObjectsV2Command({
-              Bucket: this.config.s3Config.bucketName,
-              Prefix: categoryPrefix,
-              Delimiter: "/",
-              MaxKeys: 1e3
-            });
-            let folderCount = 0;
-            let continuationToken;
-            do {
-              if (continuationToken) {
-                command.input.ContinuationToken = continuationToken;
-              }
-              const response = await this.s3Client.send(command);
-              if (response.CommonPrefixes) {
-                folderCount += response.CommonPrefixes.length;
-              }
-              continuationToken = response.NextContinuationToken;
-            } while (continuationToken);
-            return { category, count: folderCount, videos: [] };
-          }
-        } catch (error) {
-          console.error(`Error ${buildIndex ? "building index for" : "counting folders for"} category ${category}:`, error);
-          return { category, count: 0, videos: [] };
-        }
-      });
-      const results = await Promise.all(countPromises);
-      for (const { category, count, videos } of results) {
-        counts[category] = count;
-        counts.total += count;
-        if (buildIndex && videoIndex && videos) {
-          if (videos.length > 0) {
-            const parsedType = videos[0].category;
-            videoIndex.byCategory.set(parsedType, videos);
-            console.log(`[S3ClipsService] Indexed ${videos.length} videos under parsed type '${parsedType}'`);
-            if (category !== parsedType) {
-              videoIndex.byCategory.set(category, videos);
-              console.log(`[S3ClipsService] Created alias: S3 folder '${category}' -> parsed type '${parsedType}' (${videos.length} videos)`);
-            }
-          }
-          videoIndex.allVideos.push(...videos);
-        }
-      }
-      if (buildIndex && videoIndex) {
-        videoIndex.allVideos.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-        videoIndex.counts = { ...counts };
-      }
-      const elapsed = performance.now() - startTime;
-      console.log(`[S3ClipsService] ${buildIndex ? "Video index and counts" : "Clip counts"} completed in ${elapsed.toFixed(2)}ms - Total: ${counts.total}`);
-      if (buildIndex && videoIndex) {
-        console.log(`[S3ClipsService] Final video index summary:`);
-        console.log(`  - VideoIndex ID: ${videoIndex._debugId}`);
-        console.log(`  - Total videos in allVideos: ${videoIndex.allVideos.length}`);
-        console.log(`  - Categories in byCategory Map: ${Array.from(videoIndex.byCategory.keys()).join(", ")}`);
-        for (const [cat, vids] of videoIndex.byCategory.entries()) {
-          console.log(`    - '${cat}': ${vids.length} videos`);
-        }
-        return { counts, videoIndex };
-      }
-      return counts;
-    } finally {
       if (buildIndex) {
-        this.isIndexBuilding = false;
-        console.log(`[S3ClipsService] Index building complete - metadata fetching re-enabled`);
+        const result = await this.apiClient.getClipCountsWithIndex(workspaceId, date, shiftId);
+        const cacheKey = `clip-counts:${workspaceId}:${date}:${shiftId}`;
+        await smartVideoCache.setClipCounts(cacheKey, result);
+        return result;
+      } else {
+        const counts = await this.apiClient.getClipCounts(workspaceId, date, shiftId);
+        return counts;
       }
+    } catch (error) {
+      console.error("[S3ClipsService] Error fetching clip counts:", error);
+      return buildIndex ? { counts: {}, videoIndex: this.createEmptyVideoIndex(workspaceId, date, shiftId.toString()) } : {};
     }
   }
   async getClipCountsCacheFirst(workspaceId, date, shiftId, buildIndex) {
     const cacheKey = `clip-counts:${workspaceId}:${date}:${shiftId}`;
     const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
     if (cachedResult) {
-      console.log(`[S3ClipsService] Using cached clip counts for ${workspaceId}`);
-      if (buildIndex) {
-        return cachedResult;
-      } else {
-        return cachedResult.counts;
-      }
+      console.log("[S3ClipsService] Using cached clip counts");
+      return buildIndex ? cachedResult : cachedResult.counts;
     }
-    console.log(`[S3ClipsService] Cache miss - fetching clip counts for ${workspaceId}`);
+    console.log("[S3ClipsService] Cache miss - fetching from API");
     return buildIndex ? this.getClipCounts(workspaceId, date, shiftId, true) : this.getClipCounts(workspaceId, date, shiftId);
   }
   /**
-   * Get first clip for a specific category with deduplication
+   * Get first clip for category
    */
   async getFirstClipForCategory(workspaceId, date, shiftId, category) {
     if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] getFirstClipForCategory - Invalid shift ID: ${shiftId}. Must be 0 (day) or 1 (night)`);
+      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
       return null;
     }
-    const deduplicationKey = `first-clip:${workspaceId}:${date}:${shiftId}:${category}`;
-    return this.requestCache.deduplicate(
-      deduplicationKey,
-      () => this.executeGetFirstClipForCategory(workspaceId, date, shiftId, category),
-      "FirstClip"
-    );
-  }
-  /**
-   * Internal implementation of first clip fetching
-   */
-  async executeGetFirstClipForCategory(workspaceId, date, shiftId, category) {
-    const categoryPrefix = `sop_violations/${workspaceId}/${date}/${shiftId}/${category}/videos/`;
     try {
-      const command = new clientS3.ListObjectsV2Command({
-        Bucket: this.config.s3Config.bucketName,
-        Prefix: categoryPrefix,
-        MaxKeys: 10
-        // Small limit since we only need one
-      });
-      const response = await this.s3Client.send(command);
-      if (response.Contents) {
-        const playlistObj = response.Contents.find((obj) => obj.Key?.endsWith("playlist.m3u8"));
-        if (playlistObj && playlistObj.Key) {
-          const s3Uri = `s3://${this.config.s3Config.bucketName}/${playlistObj.Key}`;
-          const sopCategories = this.getSOPCategories(workspaceId);
-          const parsedInfo = parseS3Uri(s3Uri, sopCategories);
-          if (parsedInfo) {
-            const cloudfrontUrl = this.s3UriToCloudfront(s3Uri);
-            return {
-              id: `${workspaceId}-${date}-${shiftId}-${category}-first`,
-              src: cloudfrontUrl,
-              ...parsedInfo,
-              originalUri: s3Uri
-            };
-          }
-        }
-      }
+      return await this.apiClient.getFirstClipForCategory(workspaceId, date, shiftId, category);
     } catch (error) {
-      console.error(`Error getting first clip for category ${category}:`, error);
+      console.error("[S3ClipsService] Error fetching first clip:", error);
+      return null;
     }
-    return null;
   }
   /**
-   * Get a specific video from the pre-built video index - O(1) lookup performance
+   * Get video from index (for compatibility)
    */
   async getVideoFromIndex(videoIndex, category, index, includeCycleTime = true, includeMetadata = true) {
+    const { workspaceId, date, shiftId } = videoIndex;
+    return this.getClipByIndex(
+      workspaceId,
+      date,
+      shiftId,
+      category,
+      index,
+      includeCycleTime,
+      includeMetadata
+    );
+  }
+  /**
+   * Get clip by index
+   */
+  async getClipByIndex(workspaceId, date, shiftId, category, index, includeCycleTime = true, includeMetadata = false) {
     try {
-      const categoryVideos = videoIndex.byCategory.get(category);
-      if (!categoryVideos || index < 0 || index >= categoryVideos.length) {
-        console.warn(`Invalid index ${index} for category '${category}'. Available: ${categoryVideos?.length || 0}`);
-        console.warn(`Video index ID: ${videoIndex._debugId || "NO_ID"}`);
-        console.warn(`Video index categories available: [${Array.from(videoIndex.byCategory.keys()).join(", ")}]`);
-        console.warn(`Video index total videos: ${videoIndex.allVideos.length}`);
-        return null;
-      }
-      const videoEntry = categoryVideos[index];
-      return this.processFullVideo(
-        videoEntry.uri,
+      return await this.apiClient.getClipByIndex(
+        workspaceId,
+        date,
+        shiftId,
+        category,
         index,
-        videoEntry.workspaceId,
-        videoEntry.date,
-        videoEntry.shiftId,
         includeCycleTime,
         includeMetadata
       );
     } catch (error) {
-      console.error(`Error getting video from index at ${index} for category ${category}:`, error);
+      console.error("[S3ClipsService] Error fetching clip by index:", error);
       return null;
     }
   }
   /**
-   * Get a specific clip by index for a category with deduplication
-   * @deprecated Use getVideoFromIndex with a pre-built VideoIndex for better performance
-   */
-  async getClipByIndex(workspaceId, date, shiftId, category, index, includeCycleTime = true, includeMetadata = false) {
-    const deduplicationKey = `clip-by-index:${workspaceId}:${date}:${shiftId}:${category}:${index}:${includeCycleTime}:${includeMetadata}`;
-    return this.requestCache.deduplicate(
-      deduplicationKey,
-      () => this.executeGetClipByIndex(workspaceId, date, shiftId, category, index, includeCycleTime, includeMetadata),
-      "ClipByIndex"
-    );
-  }
-  /**
-   * Internal implementation of clip by index fetching
-   */
-  async executeGetClipByIndex(workspaceId, date, shiftId, category, index, includeCycleTime = true, includeMetadata = false) {
-    const categoryPrefix = `sop_violations/${workspaceId}/${date}/${shiftId}/${category}/videos/`;
-    try {
-      const command = new clientS3.ListObjectsV2Command({
-        Bucket: this.config.s3Config.bucketName,
-        Prefix: categoryPrefix,
-        MaxKeys: 1e3
-      });
-      let playlists = [];
-      let continuationToken = void 0;
-      do {
-        if (continuationToken) {
-          command.input.ContinuationToken = continuationToken;
-        }
-        const response = await this.s3Client.send(command);
-        if (response.Contents) {
-          for (const obj of response.Contents) {
-            if (obj.Key && obj.Key.endsWith("playlist.m3u8")) {
-              playlists.push(`s3://${this.config.s3Config.bucketName}/${obj.Key}`);
-            }
-          }
-        }
-        continuationToken = response.NextContinuationToken;
-      } while (continuationToken && playlists.length < index + 10);
-      playlists.sort((a, b) => {
-        const parsedA = parseS3Uri(a);
-        const parsedB = parseS3Uri(b);
-        if (!parsedA || !parsedB) return 0;
-        return parsedB.timestamp.localeCompare(parsedA.timestamp);
-      });
-      if (index < playlists.length) {
-        const uri = playlists[index];
-        return this.processFullVideo(
-          uri,
-          index,
-          workspaceId,
-          date,
-          shiftId.toString(),
-          includeCycleTime,
-          includeMetadata
-        );
-      }
-    } catch (error) {
-      console.error(`[getClipByIndex] Error getting clip at index ${index} for category ${category}:`, error);
-    }
-    return null;
-  }
-  /**
-   * Get one sample video from each category for preloading
-   */
-  async getSampleVideos(workspaceId, date, shiftId) {
-    const basePrefix = `sop_violations/${workspaceId}/${date}/${shiftId}/`;
-    const samples = {};
-    const sopCategories = this.getSOPCategories(workspaceId);
-    const categoriesToSample = sopCategories ? sopCategories.map((cat) => cat.id) : ["low_value", "best_cycle_time", "worst_cycle_time", "long_cycle_time", "cycle_completion"];
-    console.log(`[S3ClipsService] Getting sample videos for categories:`, categoriesToSample);
-    const samplePromises = categoriesToSample.map(async (category) => {
-      const categoryPrefix = `${basePrefix}${category}/`;
-      try {
-        const command = new clientS3.ListObjectsV2Command({
-          Bucket: this.config.s3Config.bucketName,
-          Prefix: categoryPrefix,
-          MaxKeys: 20
-          // Small limit since we only need one
-        });
-        const response = await this.s3Client.send(command);
-        if (response.Contents) {
-          const playlistObj = response.Contents.find((obj) => obj.Key?.endsWith("playlist.m3u8"));
-          if (playlistObj && playlistObj.Key) {
-            const s3Uri = `s3://${this.config.s3Config.bucketName}/${playlistObj.Key}`;
-            const parsedInfo = parseS3Uri(s3Uri, sopCategories);
-            if (parsedInfo) {
-              return {
-                category,
-                sample: {
-                  id: `${workspaceId}-${date}-${shiftId}-${category}-sample`,
-                  src: this.s3UriToCloudfront(s3Uri),
-                  // Pre-convert to CloudFront URL
-                  ...parsedInfo,
-                  originalUri: s3Uri
-                }
-              };
-            }
-          }
-        }
-      } catch (error) {
-        console.error(`Error getting sample for category ${category}:`, error);
-      }
-      return { category, sample: null };
-    });
-    const sampleResults = await Promise.all(samplePromises);
-    for (const { category, sample } of sampleResults) {
-      if (sample) {
-        samples[category] = sample;
-      }
-    }
-    return samples;
-  }
-  /**
-   * Processes a single video completely
+   * Process full video (for compatibility)
    */
   async processFullVideo(uri, index, workspaceId, date, shiftId, includeCycleTime, includeMetadata = false) {
     const sopCategories = this.getSOPCategories(workspaceId);
@@ -4423,35 +4396,35 @@ var S3ClipsService = class {
       console.warn(`Skipping URI due to parsing failure: ${uri}`);
       return null;
     }
-    let cycleTimeSeconds = null;
-    let creationTimestamp = void 0;
+    const video = {
+      id: `${workspaceId}-${date}-${shiftId}-${index}`,
+      src: uri,
+      // Already signed from API
+      ...parsedInfo,
+      originalUri: uri
+    };
     if (includeMetadata) {
       const metadata = await this.getFullMetadata(uri);
       if (metadata) {
-        if (metadata.original_task_metadata?.cycle_time) {
-          cycleTimeSeconds = metadata.original_task_metadata.cycle_time;
-        }
-        creationTimestamp = metadata.upload_timestamp || metadata.original_task_metadata?.timestamp || metadata.creation_timestamp || metadata[""];
+        video.cycle_time_seconds = metadata.original_task_metadata?.cycle_time;
+        video.creation_timestamp = metadata.upload_timestamp || metadata.original_task_metadata?.timestamp || metadata.creation_timestamp;
       }
-    } else if (includeCycleTime && (parsedInfo.type === "bottleneck" && parsedInfo.description.toLowerCase().includes("cycle time") || parsedInfo.type === "best_cycle_time" || parsedInfo.type === "worst_cycle_time" || parsedInfo.type === "cycle_completion")) {
-      cycleTimeSeconds = null;
     }
-    const cloudfrontPlaylistUrl = this.s3UriToCloudfront(uri);
-    const { type: videoType, timestamp: videoTimestamp } = parsedInfo;
-    return {
-      id: `${workspaceId}-${date}-${shiftId}-${videoType}-${videoTimestamp.replace(/:/g, "")}-${index}`,
-      src: cloudfrontPlaylistUrl,
-      // Direct CloudFront playlist URL
-      ...parsedInfo,
-      cycle_time_seconds: cycleTimeSeconds || void 0,
-      creation_timestamp: creationTimestamp
-    };
+    return video;
   }
   /**
-   * Simplified method to fetch clips based on parameters
+   * Fetch clips (main method for compatibility)
    */
   async fetchClips(params) {
-    const { workspaceId, date: inputDate, shift, category, limit, offset = 0, mode, includeCycleTime, includeMetadata, timestampStart, timestampEnd } = params;
+    const {
+      workspaceId,
+      date: inputDate,
+      shift,
+      category,
+      limit,
+      offset = 0,
+      mode
+    } = params;
     if (!workspaceId) {
       throw new Error("Valid Workspace ID is required");
     }
@@ -4469,88 +4442,66 @@ var S3ClipsService = class {
       const { shiftId: currentShiftId } = getCurrentShift2(this.config.dateTimeConfig?.defaultTimezone);
       shiftId = currentShiftId;
     }
-    console.log(`S3ClipsService: Fetching clips for workspace ${workspaceId} on date ${date}, shift ${shiftId}`);
+    console.log(`[S3ClipsService] Fetching clips for workspace ${workspaceId}`);
     if (mode === "summary") {
       const counts = await this.getClipCounts(workspaceId, date, shiftId.toString());
       return { counts, samples: {} };
     }
     const effectiveLimit = limit || this.defaultLimitPerCategory;
-    const s3Uris = await this.listS3Clips({
+    const result = await this.getVideosPage(
       workspaceId,
       date,
       shiftId,
-      maxKeys: category ? effectiveLimit * 2 : void 0
-      // Fetch extra for filtering
-    });
-    if (s3Uris.length === 0) {
-      console.log(`S3ClipsService: No HLS playlists found`);
-      return [];
-    }
-    let filteredUris = s3Uris;
-    if (category) {
-      filteredUris = s3Uris.filter((uri) => {
-        const parsedInfo = parseS3Uri(uri);
-        if (!parsedInfo) return false;
-        if (category === "long_cycle_time") {
-          return parsedInfo.type === "long_cycle_time" || parsedInfo.type === "bottleneck" && parsedInfo.description.toLowerCase().includes("cycle time");
-        }
-        return parsedInfo.type === category;
-      });
-      filteredUris = filteredUris.slice(offset, offset + effectiveLimit);
-    }
-    const videoPromises = filteredUris.map(async (uri, index) => {
-      return this.processFullVideo(
-        uri,
-        index,
+      category || "all",
+      effectiveLimit
+    );
+    return result.videos;
+  }
+  /**
+   * Get videos page using pagination API
+   */
+  async getVideosPage(workspaceId, date, shiftId, category, pageSize = 5, startAfter) {
+    try {
+      return await this.apiClient.getVideosPage(
         workspaceId,
         date,
-        shiftId.toString(),
-        includeCycleTime || false,
-        includeMetadata || false
-        // Never fetch metadata for timestamp filtering to prevent flooding
+        shiftId,
+        category,
+        pageSize,
+        startAfter
       );
-    });
-    const videoResults = await Promise.all(videoPromises);
-    let videos = videoResults.filter((v) => v !== null);
-    if (timestampStart || timestampEnd) {
-      videos = videos.filter((video) => {
-        if (!video.creation_timestamp) return false;
-        const videoTimestamp = new Date(video.creation_timestamp).getTime();
-        if (timestampStart && timestampEnd) {
-          const start = new Date(timestampStart).getTime();
-          const end = new Date(timestampEnd).getTime();
-          return videoTimestamp >= start && videoTimestamp <= end;
-        } else if (timestampStart) {
-          const start = new Date(timestampStart).getTime();
-          return videoTimestamp >= start;
-        } else if (timestampEnd) {
-          const end = new Date(timestampEnd).getTime();
-          return videoTimestamp <= end;
-        }
-        return true;
-      });
-    }
-    videos.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-    const cacheKey = `videos:${workspaceId}:${date}:${shiftId}:${category || "all"}`;
-    if (videos.length > 0) {
-      smartVideoCache.setVideos(cacheKey, videos);
+    } catch (error) {
+      console.error("[S3ClipsService] Error fetching videos page:", error);
+      return { videos: [], hasMore: false };
     }
-    return videos;
   }
   /**
-   * Cleanup method for proper resource management
+   * Create empty video index for compatibility
+   */
+  createEmptyVideoIndex(workspaceId, date, shiftId) {
+    return {
+      byCategory: /* @__PURE__ */ new Map(),
+      allVideos: [],
+      counts: {},
+      workspaceId,
+      date,
+      shiftId,
+      lastUpdated: /* @__PURE__ */ new Date(),
+      _debugId: `empty_${Date.now()}`
+    };
+  }
+  /**
+   * Cleanup
    */
   dispose() {
-    console.log("[S3ClipsService] Disposing service and clearing request cache");
-    this.requestCache.clear();
+    console.log("[S3ClipsService] Disposing service");
+    this.apiClient.dispose();
   }
   /**
-   * Get service statistics for monitoring
+   * Get statistics
    */
   getStats() {
-    return {
-      requestCache: this.requestCache.getStats()
-    };
+    return this.apiClient.getStats();
   }
 };
 
@@ -8465,6 +8416,16 @@ function useTicketHistory(companyId) {
       throw err;
     }
   }, [refreshTickets]);
+  const updateTicketServicedStatus = React19.useCallback(async (ticketId, serviced) => {
+    setError(null);
+    try {
+      await TicketHistoryService.updateTicketServicedStatus(ticketId, serviced);
+      await refreshTickets();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update ticket serviced status");
+      throw err;
+    }
+  }, [refreshTickets]);
   React19.useEffect(() => {
     if (companyId) {
       refreshTickets();
@@ -8476,7 +8437,8 @@ function useTicketHistory(companyId) {
     error,
     createTicket,
     refreshTickets,
-    updateTicketStatus
+    updateTicketStatus,
+    updateTicketServicedStatus
   };
 }
 
@@ -11628,7 +11590,8 @@ var usePrefetchClipCounts = ({
   date,
   shift,
   enabled = true,
-  buildIndex = true,
+  buildIndex = false,
+  // Default to false for cost efficiency
   subscriberId
 }) => {
   const dashboardConfig = useDashboardConfig();
@@ -11716,12 +11679,12 @@ var usePrefetchClipCounts = ({
           }
         },
         onRenderReady: (key, newData) => {
-          console.log(`[usePrefetchClipCounts] Render ready with ${Object.values(newData.counts).reduce((sum, count) => sum + count, 0)} total clips`);
+          console.log(`[usePrefetchClipCounts] Render ready with ${Object.values(newData.counts || {}).reduce((sum, count) => sum + count, 0)} total clips`);
           setData(newData);
           setError(null);
         },
         onFullyIndexed: (key, newData) => {
-          console.log(`[usePrefetchClipCounts] Fully indexed with ${newData.videoIndex.allVideos.length} videos`);
+          console.log(`[usePrefetchClipCounts] Fully indexed with ${newData.videoIndex?.allVideos?.length || 0} videos`);
           setData(newData);
           setError(null);
         },
@@ -12127,6 +12090,140 @@ function useWorkspaceNavigation() {
     getWorkspaceNavigationParams: getWorkspaceNavigationParams2
   };
 }
+function useWorkspaceHealth(options = {}) {
+  const [workspaces, setWorkspaces] = React19.useState([]);
+  const [summary, setSummary] = React19.useState(null);
+  const [loading, setLoading] = React19.useState(true);
+  const [error, setError] = React19.useState(null);
+  const unsubscribeRef = React19.useRef(null);
+  const refreshIntervalRef = React19.useRef(null);
+  const {
+    enableRealtime = true,
+    refreshInterval = 3e4,
+    // 30 seconds default
+    ...filterOptions
+  } = options;
+  const fetchData = React19.useCallback(async () => {
+    try {
+      setError(null);
+      workspaceHealthService.clearCache();
+      const [workspacesData, summaryData] = await Promise.all([
+        workspaceHealthService.getWorkspaceHealthStatus(filterOptions),
+        workspaceHealthService.getHealthSummary(filterOptions.lineId, filterOptions.companyId)
+      ]);
+      setWorkspaces(workspacesData);
+      setSummary(summaryData);
+    } catch (err) {
+      console.error("Error fetching workspace health:", err);
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [filterOptions.lineId, filterOptions.companyId, filterOptions.status, filterOptions.searchTerm, filterOptions.sortBy, filterOptions.sortOrder]);
+  const handleRealtimeUpdate = React19.useCallback(async (data) => {
+    try {
+      const [workspacesData, summaryData] = await Promise.all([
+        workspaceHealthService.getWorkspaceHealthStatus(filterOptions),
+        workspaceHealthService.getHealthSummary(filterOptions.lineId, filterOptions.companyId)
+      ]);
+      setWorkspaces(workspacesData);
+      setSummary(summaryData);
+    } catch (err) {
+      console.error("Error updating real-time health data:", err);
+    }
+  }, [filterOptions]);
+  React19.useEffect(() => {
+    fetchData();
+    if (refreshInterval > 0) {
+      refreshIntervalRef.current = setInterval(fetchData, 1e4);
+    }
+    if (enableRealtime) {
+      unsubscribeRef.current = workspaceHealthService.subscribeToHealthUpdates(
+        handleRealtimeUpdate,
+        { lineId: filterOptions.lineId, companyId: filterOptions.companyId }
+      );
+    }
+    return () => {
+      if (refreshIntervalRef.current) {
+        clearInterval(refreshIntervalRef.current);
+      }
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+      }
+    };
+  }, [fetchData, enableRealtime, refreshInterval, handleRealtimeUpdate, filterOptions.lineId, filterOptions.companyId]);
+  return {
+    workspaces,
+    summary,
+    loading,
+    error,
+    refetch: fetchData
+  };
+}
+function useWorkspaceHealthById(workspaceId, options = {}) {
+  const [workspace, setWorkspace] = React19.useState(null);
+  const [metrics2, setMetrics] = React19.useState(null);
+  const [loading, setLoading] = React19.useState(true);
+  const [error, setError] = React19.useState(null);
+  const unsubscribeRef = React19.useRef(null);
+  const refreshIntervalRef = React19.useRef(null);
+  const { enableRealtime = true, refreshInterval = 3e4 } = options;
+  const fetchData = React19.useCallback(async () => {
+    if (!workspaceId) {
+      setWorkspace(null);
+      setMetrics(null);
+      setLoading(false);
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      const [workspaceData, metricsData] = await Promise.all([
+        workspaceHealthService.getWorkspaceHealthById(workspaceId),
+        workspaceHealthService.getHealthMetrics(workspaceId)
+      ]);
+      setWorkspace(workspaceData);
+      setMetrics(metricsData);
+    } catch (err) {
+      console.error("Error fetching workspace health by ID:", err);
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [workspaceId]);
+  const handleRealtimeUpdate = React19.useCallback((data) => {
+    if (data.workspace_id === workspaceId) {
+      const updatedWorkspace = workspaceHealthService["processHealthStatus"](data);
+      setWorkspace(updatedWorkspace);
+    }
+  }, [workspaceId]);
+  React19.useEffect(() => {
+    fetchData();
+    if (refreshInterval > 0) {
+      refreshIntervalRef.current = setInterval(fetchData, 1e4);
+    }
+    if (enableRealtime && workspaceId) {
+      unsubscribeRef.current = workspaceHealthService.subscribeToHealthUpdates(
+        handleRealtimeUpdate
+      );
+    }
+    return () => {
+      if (refreshIntervalRef.current) {
+        clearInterval(refreshIntervalRef.current);
+      }
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current();
+      }
+    };
+  }, [fetchData, enableRealtime, refreshInterval, handleRealtimeUpdate, workspaceId]);
+  return {
+    workspace,
+    metrics: metrics2,
+    loading,
+    error,
+    refetch: fetchData
+  };
+}
 function useDateFormatter() {
   const { defaultTimezone, defaultLocale, dateFormatOptions, timeFormatOptions, dateTimeFormatOptions } = useDateTimeConfig();
   const formatDate = React19.useCallback(
@@ -23314,8 +23411,7 @@ var ISTTimer = React19.memo(() => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TimeDisplay2,
     {
-      variant: "minimal",
-      className: "text-sm font-medium text-gray-700"
+      variant: "minimal"
     }
   );
 });
@@ -23347,6 +23443,7 @@ var CardFooter2 = (props) => {
 };
 var TicketHistory = ({ companyId }) => {
   const { tickets, loading, error } = useTicketHistory(companyId);
+  const [expandedTickets, setExpandedTickets] = React19.useState(/* @__PURE__ */ new Set());
   const getCategoryIcon = (category) => {
     switch (category) {
       case "general":
@@ -23403,6 +23500,23 @@ var TicketHistory = ({ companyId }) => {
         return "text-gray-600 bg-gray-50";
     }
   };
+  const toggleTicketExpansion = (ticketId) => {
+    setExpandedTickets((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(ticketId)) {
+        newSet.delete(ticketId);
+      } else {
+        newSet.add(ticketId);
+      }
+      return newSet;
+    });
+  };
+  const isTicketExpanded = (ticketId) => {
+    return expandedTickets.has(ticketId);
+  };
+  const shouldShowExpandButton = (description) => {
+    return description.length > 100 || description.includes("\n");
+  };
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg font-semibold text-gray-800", children: "History of Tickets" }) }),
@@ -23443,12 +23557,14 @@ var TicketHistory = ({ companyId }) => {
       tickets.map((ticket, index) => {
         const CategoryIcon = getCategoryIcon(ticket.category);
         const StatusIcon = getStatusIcon(ticket.status);
+        const isExpanded = isTicketExpanded(ticket.id);
+        const showExpandButton = shouldShowExpandButton(ticket.description);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           motion.div,
           {
             initial: { opacity: 0, y: 10 },
             animate: { opacity: 1, y: 0 },
-            className: `border-b border-gray-100 p-4 hover:bg-gray-50 transition-colors cursor-pointer ${index === 0 ? "border-t-0" : ""}`,
+            className: `border-b border-gray-100 p-4 hover:bg-gray-50 transition-colors ${index === 0 ? "border-t-0" : ""}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1 bg-gray-100 rounded", children: /* @__PURE__ */ jsxRuntime.jsx(CategoryIcon, { className: "h-3 w-3 text-gray-600" }) }),
@@ -23459,9 +23575,42 @@ var TicketHistory = ({ companyId }) => {
                   /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: "h-2.5 w-2.5 mr-1" }),
                   ticket.status === "submitted" ? "New" : ticket.status.replace("_", " ")
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(ticket.priority)}`, children: ticket.priority === "normal" ? "Standard" : ticket.priority })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(ticket.priority)}`, children: ticket.priority === "normal" ? "Standard" : ticket.priority }),
+                ticket.serviced && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-green-700 bg-green-100 border border-green-200", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(solid.CheckIcon, { className: "h-2.5 w-2.5 mr-1" }),
+                  "Serviced"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    transition: { duration: 0.2 },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-xs text-gray-600 leading-relaxed whitespace-pre-wrap ${!isExpanded && showExpandButton ? "line-clamp-2" : ""}`, children: ticket.description })
+                  },
+                  isExpanded ? "expanded" : "collapsed"
+                ) }),
+                showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleTicketExpansion(ticket.id);
+                    },
+                    className: "mt-2 flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700 font-medium transition-colors",
+                    children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronUpIcon, { className: "h-3 w-3" }),
+                      "Show less"
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "h-3 w-3" }),
+                      "Show more"
+                    ] })
+                  }
+                )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 mb-3 line-clamp-2 leading-relaxed", children: ticket.description }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 capitalize font-medium", children: ticket.category }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-gray-500", children: [
@@ -23483,6 +23632,165 @@ var TicketHistory = ({ companyId }) => {
   ] });
 };
 var TicketHistory_default = TicketHistory;
+var HealthStatusIndicator = ({
+  status,
+  lastUpdated,
+  showLabel = false,
+  showTime = true,
+  size = "md",
+  className = "",
+  inline = true,
+  pulse = true
+}) => {
+  const getStatusConfig = () => {
+    switch (status) {
+      case "healthy":
+        return {
+          color: "text-green-500",
+          bgColor: "bg-green-500",
+          borderColor: "border-green-500",
+          label: "Healthy",
+          icon: lucideReact.CheckCircle,
+          shouldPulse: pulse
+        };
+      case "unhealthy":
+        return {
+          color: "text-red-500",
+          bgColor: "bg-red-500",
+          borderColor: "border-red-500",
+          label: "Unhealthy",
+          icon: lucideReact.XCircle,
+          shouldPulse: false
+        };
+      case "warning":
+        return {
+          color: "text-yellow-500",
+          bgColor: "bg-yellow-500",
+          borderColor: "border-yellow-500",
+          label: "Warning",
+          icon: lucideReact.AlertTriangle,
+          shouldPulse: true
+        };
+      case "unknown":
+      default:
+        return {
+          color: "text-gray-400",
+          bgColor: "bg-gray-400",
+          borderColor: "border-gray-400",
+          label: "Unknown",
+          icon: lucideReact.Activity,
+          shouldPulse: false
+        };
+    }
+  };
+  const config = getStatusConfig();
+  config.icon;
+  const sizeClasses = {
+    sm: {
+      dot: "h-2 w-2",
+      icon: "h-3 w-3",
+      text: "text-xs",
+      spacing: "gap-1"
+    },
+    md: {
+      dot: "h-3 w-3",
+      icon: "h-4 w-4",
+      text: "text-sm",
+      spacing: "gap-1.5"
+    },
+    lg: {
+      dot: "h-4 w-4",
+      icon: "h-5 w-5",
+      text: "text-base",
+      spacing: "gap-2"
+    }
+  };
+  const currentSize = sizeClasses[size];
+  const containerClasses = clsx(
+    "flex items-center",
+    currentSize.spacing,
+    inline ? "inline-flex" : "flex",
+    className
+  );
+  const dotClasses = clsx(
+    "rounded-full",
+    currentSize.dot,
+    config.bgColor,
+    config.shouldPulse && "animate-pulse"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClasses, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: dotClasses }),
+      config.shouldPulse && status === "healthy" && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx(
+            "absolute rounded-full opacity-25",
+            currentSize.dot,
+            config.bgColor,
+            "animate-ping"
+          )
+        }
+      )
+    ] }),
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(currentSize.text, "font-medium", config.color), children: config.label }),
+    showTime && lastUpdated && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(currentSize.text, "text-gray-500 dark:text-gray-400"), children: lastUpdated })
+  ] });
+};
+var DetailedHealthStatus = ({
+  workspaceName,
+  lineName,
+  consecutiveMisses,
+  showDetails = true,
+  ...indicatorProps
+}) => {
+  const getStatusConfig = () => {
+    switch (indicatorProps.status) {
+      case "healthy":
+        return {
+          bgClass: "bg-green-50 dark:bg-green-900/20",
+          borderClass: "border-green-200 dark:border-green-800"
+        };
+      case "unhealthy":
+        return {
+          bgClass: "bg-red-50 dark:bg-red-900/20",
+          borderClass: "border-red-200 dark:border-red-800"
+        };
+      case "warning":
+        return {
+          bgClass: "bg-yellow-50 dark:bg-yellow-900/20",
+          borderClass: "border-yellow-200 dark:border-yellow-800"
+        };
+      default:
+        return {
+          bgClass: "bg-gray-50 dark:bg-gray-900/20",
+          borderClass: "border-gray-200 dark:border-gray-800"
+        };
+    }
+  };
+  const config = getStatusConfig();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx(
+        "rounded-lg border p-3",
+        config.bgClass,
+        config.borderClass
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          showDetails && workspaceName && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: workspaceName }),
+          showDetails && lineName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: lineName }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(HealthStatusIndicator, { ...indicatorProps, showLabel: true }) })
+        ] }),
+        showDetails && consecutiveMisses !== void 0 && consecutiveMisses > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-3 text-right", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Missed" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold text-gray-900 dark:text-gray-100", children: consecutiveMisses })
+        ] })
+      ] })
+    }
+  );
+};
 var LinePdfExportButton = ({
   targetElement,
   fileName = "line-export",
@@ -24605,6 +24913,8 @@ var WorkspaceCard = ({
   cycleTime,
   operators,
   status = "normal",
+  healthStatus,
+  healthLastUpdated,
   onCardClick,
   headerActions,
   footerContent,
@@ -24697,6 +25007,19 @@ var WorkspaceCard = ({
               ] })
             ] })
           ] }),
+          healthStatus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 mt-auto border-t dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "System Health" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              HealthStatusIndicator,
+              {
+                status: healthStatus,
+                lastUpdated: healthLastUpdated,
+                showTime: false,
+                size: "sm",
+                pulse: healthStatus === "healthy"
+              }
+            )
+          ] }) }),
           chartData && chartData.data && chartData.data.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -26234,6 +26557,315 @@ var VideoPlayer = React19__namespace.default.forwardRef(({
   ] });
 });
 VideoPlayer.displayName = "VideoPlayer";
+var BackButton = ({
+  onClick,
+  text = "Back",
+  className,
+  size = "default",
+  disabled = false,
+  "aria-label": ariaLabel
+}) => {
+  const sizeClasses = {
+    sm: {
+      container: "gap-1 px-2 py-1.5",
+      icon: "w-3.5 h-3.5",
+      text: "text-xs"
+    },
+    default: {
+      container: "gap-2 px-3 py-2",
+      icon: "w-4 h-4",
+      text: "text-sm"
+    },
+    lg: {
+      container: "gap-2 px-4 py-2.5",
+      icon: "w-5 h-5",
+      text: "text-base"
+    }
+  };
+  const currentSize = sizeClasses[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      "aria-label": ariaLabel || `${text} button`,
+      className: cn(
+        // Base styles
+        "flex items-center font-medium rounded-lg transition-all duration-200",
+        // Size-specific styles
+        currentSize.container,
+        // Color and interaction styles
+        disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-600 hover:text-gray-900 hover:bg-gray-50 active:bg-gray-100",
+        // Focus styles for accessibility
+        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ArrowLeft,
+          {
+            className: cn(
+              "flex-shrink-0",
+              currentSize.icon,
+              disabled && "opacity-50"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+          "font-medium select-none",
+          currentSize.text,
+          disabled && "opacity-50"
+        ), children: text })
+      ]
+    }
+  );
+};
+var BackButtonMinimal = ({
+  onClick,
+  text = "Back",
+  className,
+  size = "default",
+  disabled = false,
+  "aria-label": ariaLabel
+}) => {
+  const sizeClasses = {
+    sm: {
+      icon: "w-3.5 h-3.5",
+      text: "text-xs ml-1"
+    },
+    default: {
+      icon: "w-4 h-4",
+      text: "text-sm ml-2"
+    },
+    lg: {
+      icon: "w-5 h-5",
+      text: "text-base ml-2"
+    }
+  };
+  const currentSize = sizeClasses[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      "aria-label": ariaLabel || `${text} button`,
+      className: cn(
+        // Base styles - minimal padding for tight spaces
+        "flex items-center transition-colors duration-200",
+        // Color and interaction styles
+        disabled ? "text-gray-400 cursor-not-allowed" : "text-gray-600 hover:text-gray-900",
+        // Focus styles for accessibility
+        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ArrowLeft,
+          {
+            className: cn(
+              "flex-shrink-0",
+              currentSize.icon,
+              disabled && "opacity-50"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+          "font-medium select-none",
+          currentSize.text,
+          disabled && "opacity-50"
+        ), children: text })
+      ]
+    }
+  );
+};
+var InlineEditableText = ({
+  value,
+  onSave,
+  placeholder = "Click to edit",
+  className = "",
+  editIconClassName = "",
+  inputClassName = "",
+  debounceDelay = 750,
+  // 750ms for quick auto-save
+  disabled = false
+}) => {
+  const [isEditing, setIsEditing] = React19.useState(false);
+  const [editValue, setEditValue] = React19.useState(value);
+  const [saveStatus, setSaveStatus] = React19.useState("idle");
+  const [lastSavedValue, setLastSavedValue] = React19.useState(value);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React19.useState(false);
+  const inputRef = React19.useRef(null);
+  const containerRef = React19.useRef(null);
+  const debounceTimeout = React19.useRef(void 0);
+  const saveStatusTimeout = React19.useRef(void 0);
+  React19.useEffect(() => {
+    if (!isEditing) {
+      setEditValue(value);
+      setLastSavedValue(value);
+    }
+  }, [value, isEditing]);
+  React19.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing]);
+  React19.useEffect(() => {
+    return () => {
+      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+      if (saveStatusTimeout.current) clearTimeout(saveStatusTimeout.current);
+    };
+  }, []);
+  const performSave = React19.useCallback(async (valueToSave, shouldClose = false) => {
+    const trimmedValue = valueToSave.trim();
+    if (trimmedValue === lastSavedValue.trim()) {
+      setHasUnsavedChanges(false);
+      if (shouldClose) {
+        setIsEditing(false);
+        setSaveStatus("idle");
+      }
+      return;
+    }
+    setSaveStatus("saving");
+    setHasUnsavedChanges(false);
+    try {
+      await onSave(trimmedValue);
+      setLastSavedValue(trimmedValue);
+      setSaveStatus("saved");
+      if (!shouldClose && inputRef.current) {
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      }
+      if (saveStatusTimeout.current) clearTimeout(saveStatusTimeout.current);
+      saveStatusTimeout.current = setTimeout(() => {
+        setSaveStatus("idle");
+      }, 2e3);
+      if (shouldClose) {
+        setIsEditing(false);
+      }
+    } catch (error) {
+      console.error("Failed to save:", error);
+      setSaveStatus("error");
+      setHasUnsavedChanges(true);
+      if (saveStatusTimeout.current) clearTimeout(saveStatusTimeout.current);
+      saveStatusTimeout.current = setTimeout(() => {
+        setSaveStatus("idle");
+      }, 3e3);
+      if (!shouldClose && inputRef.current) {
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      }
+    }
+  }, [lastSavedValue, onSave]);
+  React19.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isEditing && containerRef.current && !containerRef.current.contains(event.target)) {
+        if (debounceTimeout.current) {
+          clearTimeout(debounceTimeout.current);
+        }
+        performSave(editValue, true);
+      }
+    };
+    if (isEditing) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isEditing, editValue, performSave]);
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setEditValue(newValue);
+    if (newValue.trim() !== lastSavedValue.trim()) {
+      setHasUnsavedChanges(true);
+      setSaveStatus("idle");
+    } else {
+      setHasUnsavedChanges(false);
+    }
+    if (debounceTimeout.current) {
+      clearTimeout(debounceTimeout.current);
+    }
+    if (newValue.trim() !== lastSavedValue.trim()) {
+      debounceTimeout.current = setTimeout(() => {
+        performSave(newValue, false);
+      }, debounceDelay);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+      performSave(editValue, true);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      if (debounceTimeout.current) {
+        clearTimeout(debounceTimeout.current);
+      }
+      setEditValue(lastSavedValue);
+      setHasUnsavedChanges(false);
+      setSaveStatus("idle");
+      setIsEditing(false);
+    }
+  };
+  const handleClick = () => {
+    if (!disabled && !isEditing) {
+      setIsEditing(true);
+      setSaveStatus("idle");
+    }
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "inline-flex items-center gap-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: editValue,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          className: `px-2 py-1 pr-7 text-sm border rounded-md transition-colors duration-200
+              ${saveStatus === "error" ? "border-red-400 focus:ring-red-500 focus:border-red-500" : hasUnsavedChanges ? "border-yellow-400 focus:ring-yellow-500 focus:border-yellow-500" : saveStatus === "saved" ? "border-green-400 focus:ring-green-500 focus:border-green-500" : "border-blue-400 focus:ring-blue-500 focus:border-blue-500"}
+              focus:outline-none focus:ring-2 bg-white
+              ${inputClassName}`,
+          placeholder,
+          autoComplete: "off"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-1.5 top-1/2 -translate-y-1/2", children: [
+        saveStatus === "saving" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-3.5 h-3.5 text-blue-500 animate-spin" }),
+        saveStatus === "saved" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 text-green-500" }),
+        saveStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-3.5 h-3.5 text-red-500" }),
+        saveStatus === "idle" && hasUnsavedChanges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 bg-yellow-400 rounded-full" })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      onClick: handleClick,
+      className: `inline-flex items-center gap-1.5 cursor-pointer px-2 py-1 rounded-md 
+        transition-all duration-200 hover:bg-gray-50 group
+        ${disabled ? "cursor-not-allowed opacity-50" : ""}
+        ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: editValue || placeholder }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.Edit2,
+          {
+            className: `w-3.5 h-3.5 text-gray-400 transition-opacity duration-200 
+          opacity-0 group-hover:opacity-100
+          ${disabled ? "hidden" : ""}
+          ${editIconClassName}`
+          }
+        )
+      ]
+    }
+  );
+};
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -26253,7 +26885,6 @@ var BottlenecksContent = ({
   const videoRef = React19.useRef(null);
   const timestampFilterRef = React19.useRef(null);
   const initialFilter = sopCategories && sopCategories.length > 0 ? sopCategories[0].id : "low_value";
-  const videoIndexRef = React19.useRef(null);
   const currentIndexRef = React19.useRef(0);
   const activeFilterRef = React19.useRef(initialFilter);
   const isMountedRef = React19.useRef(true);
@@ -26271,15 +26902,6 @@ var BottlenecksContent = ({
   const [isNavigating, setIsNavigating] = React19.useState(false);
   const [error, setError] = React19.useState(null);
   const [clipCounts, setClipCounts] = React19.useState({});
-  const [videoIndex, setVideoIndex] = React19.useState(null);
-  const updateVideoIndex = React19.useCallback((newIndex) => {
-    console.log(`[BottlenecksContent] Updating video index - ID: ${newIndex?._debugId || "NO_ID"}, total videos: ${newIndex?.allVideos.length || 0}, categories: ${newIndex?.byCategory.size || 0}`);
-    if (newIndex) {
-      console.log(`[BottlenecksContent] VideoIndex categories: [${Array.from(newIndex.byCategory.keys()).join(", ")}]`);
-    }
-    setVideoIndex(newIndex);
-    videoIndexRef.current = newIndex;
-  }, []);
   const updateActiveFilter = React19.useCallback((newFilter) => {
     console.log(`[BottlenecksContent] Updating active filter: ${activeFilterRef.current} -> ${newFilter}`);
     setActiveFilter(newFilter);
@@ -26340,7 +26962,8 @@ var BottlenecksContent = ({
     date: date || getOperationalDate(),
     shift: effectiveShift,
     enabled: !!workspaceId && !!s3ClipsService,
-    buildIndex: true
+    buildIndex: false
+    // Disabled to reduce S3 costs - use pagination instead
   });
   const fetchClipCounts = React19.useCallback(async () => {
     if (!workspaceId || !s3ClipsService || !dashboardConfig?.s3Config || !isMountedRef.current) return;
@@ -26359,7 +26982,6 @@ var BottlenecksContent = ({
       if (cachedResult) {
         console.log(`[BottlenecksContent] Using cached clip counts`);
         updateClipCounts(cachedResult.counts);
-        updateVideoIndex(cachedResult.videoIndex);
         setIsLoading(false);
         setHasInitialLoad(true);
         return;
@@ -26368,19 +26990,13 @@ var BottlenecksContent = ({
       const fullResult = await s3ClipsService.getClipCounts(
         workspaceId,
         operationalDate,
-        shiftStr,
-        true
-        // Build index
+        shiftStr
+        // Don't build index - use pagination for cost efficiency
       );
-      if (fullResult && "counts" in fullResult && "videoIndex" in fullResult) {
-        updateClipCounts(fullResult.counts);
-        updateVideoIndex(fullResult.videoIndex);
-        await smartVideoCache.setClipCounts(cacheKey, fullResult, 5);
-        console.log(`[BottlenecksContent] Fetched and cached clip counts with ${fullResult.videoIndex.allVideos.length} videos`);
-      } else if (fullResult) {
+      if (fullResult) {
         const counts = fullResult;
         updateClipCounts(counts);
-        console.log(`[BottlenecksContent] Fetched clip counts (no video index)`);
+        console.log(`[BottlenecksContent] Fetched and cached clip counts`);
       }
       setIsLoading(false);
       setHasInitialLoad(true);
@@ -26393,7 +27009,7 @@ var BottlenecksContent = ({
     } finally {
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts]);
   const loadingCategoryRef = React19.useRef(null);
   const videoRetryCountRef = React19.useRef(0);
   const loadingVideosRef = React19.useRef(/* @__PURE__ */ new Set());
@@ -26401,7 +27017,6 @@ var BottlenecksContent = ({
   const ensureVideosLoaded = React19.useCallback(async (centerIndex) => {
     if (!s3ClipsService || !workspaceId || !isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    const currentVideoIndex = videoIndexRef.current;
     let effectiveFilter = currentFilter;
     if (sopCategories && sopCategories.length > 0) {
       const category = sopCategories.find((cat) => cat.id === currentFilter);
@@ -26428,17 +27043,6 @@ var BottlenecksContent = ({
     const loadPromises = indicesToLoad.map(async (index) => {
       try {
         let video = null;
-        if (currentVideoIndex && currentVideoIndex.byCategory && currentVideoIndex.allVideos.length > 0) {
-          video = await s3ClipsService.getVideoFromIndex(
-            currentVideoIndex,
-            effectiveFilter,
-            index,
-            true,
-            // includeCycleTime - OK for preloading
-            false
-            // includeMetadata - NO metadata during bulk preloading to prevent flooding
-          );
-        }
         if (!video) {
           const operationalDate = date || getOperationalDate();
           const shiftStr = effectiveShift;
@@ -26491,12 +27095,11 @@ var BottlenecksContent = ({
     try {
       const operationalDate = date || getOperationalDate();
       const shiftStr = effectiveShift;
-      if (!clipCounts[targetCategory] && !videoIndex) {
+      if (!clipCounts[targetCategory]) {
         const cacheKey = `clip-counts:${workspaceId}:${operationalDate}:${shiftStr}`;
         const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
         if (cachedResult && cachedResult.counts[targetCategory] > 0) {
           updateClipCounts(cachedResult.counts);
-          updateVideoIndex(cachedResult.videoIndex);
           setHasInitialLoad(true);
           console.log(`[BottlenecksContent] Used cached data for loadFirstVideoForCategory - ${targetCategory}`);
         }
@@ -26528,11 +27131,14 @@ var BottlenecksContent = ({
       } catch (directError) {
         console.warn(`[BottlenecksContent] Direct S3 loading failed, trying video index:`, directError);
       }
-      const currentVideoIndex = videoIndexRef.current;
-      if (clipCounts[targetCategory] > 0 && currentVideoIndex && currentVideoIndex.allVideos.length > 0) {
+      if (clipCounts[targetCategory] > 0) {
         try {
-          const firstVideo = await s3ClipsService.getVideoFromIndex(
-            currentVideoIndex,
+          const operationalDate2 = date || getOperationalDate();
+          const shiftStr2 = effectiveShift;
+          const firstVideo = await s3ClipsService.getClipByIndex(
+            workspaceId,
+            operationalDate2,
+            shiftStr2,
             targetCategory,
             0,
             // First video (index 0)
@@ -26572,25 +27178,22 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, clipCounts, videoIndex, effectiveShift, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, s3ClipsService, clipCounts, effectiveShift, updateClipCounts]);
   React19.useEffect(() => {
     if (s3ClipsService && !prefetchData) {
       fetchClipCounts();
     }
-  }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, updateVideoIndex, prefetchData]);
+  }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, prefetchData]);
   React19.useEffect(() => {
-    if (prefetchData) {
-      console.log(`[BottlenecksContent] Received prefetch update - status: ${prefetchStatus}, videos: ${prefetchData.videoIndex.allVideos.length}, ID: ${prefetchData.videoIndex._debugId || "NO_ID"}`);
+    if (prefetchData && prefetchData.counts) {
+      console.log(`[BottlenecksContent] Received prefetch update - status: ${prefetchStatus}`);
       updateClipCounts(prefetchData.counts);
-      if (prefetchData.videoIndex.allVideos.length > 0) {
-        updateVideoIndex(prefetchData.videoIndex);
-      }
-      if (!hasInitialLoad && prefetchData.videoIndex.allVideos.length > 0) {
+      if (!hasInitialLoad) {
         setIsLoading(false);
         setHasInitialLoad(true);
       }
     }
-  }, [prefetchData, prefetchStatus, updateClipCounts, updateVideoIndex, hasInitialLoad]);
+  }, [prefetchData, prefetchStatus, updateClipCounts, hasInitialLoad]);
   React19.useEffect(() => {
     if (s3ClipsService && clipCounts[activeFilter] > 0) {
       const hasVideosForCurrentFilter = allVideos.some((video) => {
@@ -26630,7 +27233,7 @@ var BottlenecksContent = ({
         setIsCategoryLoading(false);
       }
     }
-  }, [activeFilter, s3ClipsService, videoIndex, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
+  }, [activeFilter, s3ClipsService, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
   React19.useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -26746,23 +27349,7 @@ var BottlenecksContent = ({
       }
       try {
         let video = null;
-        const currentVideoIndex = videoIndexRef.current;
-        if (currentVideoIndex && currentVideoIndex.byCategory && currentVideoIndex.allVideos.length > 0 && s3ClipsService) {
-          console.log(`[BottlenecksContent] Using video index for navigation - ID: ${currentVideoIndex._debugId || "NO_ID"}, total categories: ${currentVideoIndex.byCategory.size}, total videos: ${currentVideoIndex.allVideos.length}, filter: ${currentFilter}`);
-          console.log(`[BottlenecksContent] VideoIndex categories in handleNext: [${Array.from(currentVideoIndex.byCategory.keys()).join(", ")}]`);
-          video = await s3ClipsService.getVideoFromIndex(
-            currentVideoIndex,
-            effectiveFilter,
-            nextIndex,
-            true,
-            // includeCycleTime
-            false
-            // includeMetadata - DON'T fetch metadata during navigation to prevent flooding!
-          );
-        } else {
-          console.warn(`[BottlenecksContent] Video index not ready for navigation: ID: ${currentVideoIndex?._debugId || "NO_ID"}, byCategory exists = ${!!currentVideoIndex?.byCategory}, allVideos = ${currentVideoIndex?.allVideos?.length || 0}`);
-        }
-        if (!video && s3ClipsService) {
+        if (s3ClipsService) {
           const operationalDate = date || getOperationalDate();
           const shiftStr = effectiveShift;
           video = await s3ClipsService.getClipByIndex(
@@ -28024,6 +28611,451 @@ var KPISection = React19.memo(({
   return true;
 });
 KPISection.displayName = "KPISection";
+var WorkspaceHealthCard = ({
+  workspace,
+  onClick,
+  showDetails = true,
+  className = ""
+}) => {
+  const getStatusConfig = () => {
+    switch (workspace.status) {
+      case "healthy":
+        return {
+          gradient: "from-emerald-50 to-green-50 dark:from-emerald-950/30 dark:to-green-950/30",
+          border: "border-emerald-200 dark:border-emerald-800",
+          icon: lucideReact.CheckCircle2,
+          iconColor: "text-emerald-600 dark:text-emerald-400",
+          badge: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300",
+          statusText: "Online",
+          pulse: true
+        };
+      case "unhealthy":
+        return {
+          gradient: "from-rose-50 to-red-50 dark:from-rose-950/30 dark:to-red-950/30",
+          border: "border-rose-200 dark:border-rose-800",
+          icon: lucideReact.XCircle,
+          iconColor: "text-rose-600 dark:text-rose-400",
+          badge: "bg-rose-100 text-rose-700 dark:bg-rose-900/50 dark:text-rose-300",
+          statusText: "Offline",
+          pulse: false
+        };
+      case "warning":
+        return {
+          gradient: "from-amber-50 to-yellow-50 dark:from-amber-950/30 dark:to-yellow-950/30",
+          border: "border-amber-200 dark:border-amber-800",
+          icon: lucideReact.AlertTriangle,
+          iconColor: "text-amber-600 dark:text-amber-400",
+          badge: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
+          statusText: "Degraded",
+          pulse: true
+        };
+      default:
+        return {
+          gradient: "from-gray-50 to-slate-50 dark:from-gray-950/30 dark:to-slate-950/30",
+          border: "border-gray-200 dark:border-gray-800",
+          icon: lucideReact.Activity,
+          iconColor: "text-gray-500 dark:text-gray-400",
+          badge: "bg-gray-100 text-gray-700 dark:bg-gray-900/50 dark:text-gray-300",
+          statusText: "Unknown",
+          pulse: false
+        };
+    }
+  };
+  const config = getStatusConfig();
+  const StatusIcon = config.icon;
+  workspace.isStale ? lucideReact.WifiOff : lucideReact.Wifi;
+  const handleClick = () => {
+    if (onClick) {
+      onClick(workspace);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick(workspace);
+    }
+  };
+  const formatTimeAgo = (timeString) => {
+    return timeString.replace("about ", "").replace(" ago", "");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Card2,
+    {
+      className: clsx(
+        "relative overflow-hidden transition-all duration-300",
+        "bg-gradient-to-br",
+        config.gradient,
+        "border",
+        config.border,
+        "shadow-sm hover:shadow-md",
+        onClick && "cursor-pointer hover:scale-[1.01]",
+        workspace.isStale && "opacity-90",
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      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: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1", children: workspace.workspace_display_name || `Workspace ${workspace.workspace_id.slice(0, 8)}` }),
+            showDetails && workspace.line_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: workspace.line_name })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx(
+            "flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
+            config.badge
+          ), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.statusText })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { 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: [
+                "Last seen: ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
+              ] })
+            ] }),
+            workspace.isStale && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WifiOff, { className: "h-3.5 w-3.5 text-amber-500" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-600 dark:text-amber-400 text-xs", children: "No recent updates" })
+            ] })
+          ] }),
+          config.pulse && !workspace.isStale && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
+                "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
+                workspace.status === "healthy" ? "bg-emerald-400" : "bg-amber-400"
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
+                "relative inline-flex rounded-full h-2 w-2",
+                workspace.status === "healthy" ? "bg-emerald-500" : "bg-amber-500"
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Live" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+var CompactWorkspaceHealthCard = ({
+  workspace,
+  onClick,
+  className = ""
+}) => {
+  const getStatusConfig = () => {
+    switch (workspace.status) {
+      case "healthy":
+        return {
+          dot: "bg-emerald-500",
+          icon: lucideReact.CheckCircle2,
+          iconColor: "text-emerald-600 dark:text-emerald-400",
+          bg: "hover:bg-emerald-50 dark:hover:bg-emerald-950/20"
+        };
+      case "unhealthy":
+        return {
+          dot: "bg-rose-500",
+          icon: lucideReact.XCircle,
+          iconColor: "text-rose-600 dark:text-rose-400",
+          bg: "hover:bg-rose-50 dark:hover:bg-rose-950/20"
+        };
+      case "warning":
+        return {
+          dot: "bg-amber-500",
+          icon: lucideReact.AlertTriangle,
+          iconColor: "text-amber-600 dark:text-amber-400",
+          bg: "hover:bg-amber-50 dark:hover:bg-amber-950/20"
+        };
+      default:
+        return {
+          dot: "bg-gray-400",
+          icon: lucideReact.Activity,
+          iconColor: "text-gray-500 dark:text-gray-400",
+          bg: "hover:bg-gray-50 dark:hover:bg-gray-950/20"
+        };
+    }
+  };
+  const config = getStatusConfig();
+  const StatusIcon = config.icon;
+  const handleClick = () => {
+    if (onClick) {
+      onClick(workspace);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex items-center justify-between px-4 py-3 rounded-lg border",
+        "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
+        "transition-all duration-200",
+        onClick && `cursor-pointer ${config.bg}`,
+        className
+      ),
+      onClick: handleClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: clsx("h-5 w-5", config.iconColor) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: workspace.workspace_display_name || `WS-${workspace.workspace_id.slice(0, 6)}` }),
+            workspace.line_name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: workspace.line_name })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__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) })
+        ] })
+      ]
+    }
+  );
+};
+var HealthStatusGrid = ({
+  workspaces,
+  onWorkspaceClick,
+  viewMode: initialViewMode = "grid",
+  showFilters = true,
+  groupBy: initialGroupBy = "none",
+  className = ""
+}) => {
+  const [viewMode, setViewMode] = React19.useState(initialViewMode);
+  const [searchTerm, setSearchTerm] = React19.useState("");
+  const [statusFilter, setStatusFilter] = React19.useState("all");
+  const [groupBy, setGroupBy] = React19.useState(initialGroupBy);
+  const [expandedGroups, setExpandedGroups] = React19.useState(/* @__PURE__ */ new Set());
+  const filteredWorkspaces = React19.useMemo(() => {
+    let filtered = [...workspaces];
+    if (searchTerm) {
+      const search = searchTerm.toLowerCase();
+      filtered = filtered.filter(
+        (w) => w.workspace_display_name?.toLowerCase().includes(search) || w.line_name?.toLowerCase().includes(search) || w.company_name?.toLowerCase().includes(search)
+      );
+    }
+    if (statusFilter !== "all") {
+      filtered = filtered.filter((w) => w.status === statusFilter);
+    }
+    return filtered;
+  }, [workspaces, searchTerm, statusFilter]);
+  const groupedWorkspaces = React19.useMemo(() => {
+    if (groupBy === "none") {
+      return { "All Workspaces": filteredWorkspaces };
+    }
+    const groups = {};
+    filteredWorkspaces.forEach((workspace) => {
+      let key = "Unknown";
+      switch (groupBy) {
+        case "line":
+          key = workspace.line_name || "Unknown Line";
+          break;
+        case "status":
+          key = workspace.status;
+          break;
+      }
+      if (!groups[key]) {
+        groups[key] = [];
+      }
+      groups[key].push(workspace);
+    });
+    const sortedGroups = {};
+    Object.keys(groups).sort().forEach((key) => {
+      sortedGroups[key] = groups[key];
+    });
+    return sortedGroups;
+  }, [filteredWorkspaces, groupBy]);
+  React19.useEffect(() => {
+    if (groupBy !== "none") {
+      setExpandedGroups(new Set(Object.keys(groupedWorkspaces)));
+    }
+  }, [groupBy, groupedWorkspaces]);
+  const toggleGroup = (groupName) => {
+    const newExpanded = new Set(expandedGroups);
+    if (newExpanded.has(groupName)) {
+      newExpanded.delete(groupName);
+    } else {
+      newExpanded.add(groupName);
+    }
+    setExpandedGroups(newExpanded);
+  };
+  const getStatusCounts = () => {
+    const counts = {
+      healthy: 0,
+      unhealthy: 0,
+      warning: 0,
+      unknown: 0
+    };
+    workspaces.forEach((w) => {
+      counts[w.status]++;
+    });
+    return counts;
+  };
+  const statusCounts = getStatusCounts();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("space-y-4", className), children: [
+    showFilters && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-3 flex-wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-[200px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search workspaces...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              className: "w-full pl-10 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: statusFilter, onValueChange: (value) => setStatusFilter(value), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[180px] bg-white border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "All statuses" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: "all", children: [
+              "All (",
+              workspaces.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "healthy", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Healthy (",
+                statusCounts.healthy,
+                ")"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "unhealthy", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-red-500" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Unhealthy (",
+                statusCounts.unhealthy,
+                ")"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "warning", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-500" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Warning (",
+                statusCounts.warning,
+                ")"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "unknown", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-gray-400" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Unknown (",
+                statusCounts.unknown,
+                ")"
+              ] })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: groupBy, onValueChange: (value) => setGroupBy(value), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[160px] bg-white border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Group by" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "none", children: "No grouping" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "line", children: "Group by Line" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "status", children: "Group by Status" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setViewMode("grid"),
+              className: clsx(
+                "p-2 rounded-lg transition-colors",
+                viewMode === "grid" ? "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+              ),
+              "aria-label": "Grid view",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid3x3, { className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setViewMode("list"),
+              className: clsx(
+                "p-2 rounded-lg transition-colors",
+                viewMode === "list" ? "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+              ),
+              "aria-label": "List view",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-5 w-5" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-sm text-gray-500 dark:text-gray-400", children: [
+        "Showing ",
+        filteredWorkspaces.length,
+        " of ",
+        workspaces.length,
+        " workspaces"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: Object.entries(groupedWorkspaces).map(([groupName, groupWorkspaces]) => {
+      const isExpanded = groupBy === "none" || expandedGroups.has(groupName);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        groupBy !== "none" && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between cursor-pointer group",
+            onClick: () => toggleGroup(groupName),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
+                groupName,
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-normal text-gray-500 dark:text-gray-400", children: [
+                  "(",
+                  groupWorkspaces.length,
+                  ")"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ChevronDown,
+                {
+                  className: clsx(
+                    "h-5 w-5 text-gray-400 transition-transform",
+                    isExpanded && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx(
+              viewMode === "grid" ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" : "space-y-2"
+            ),
+            children: groupWorkspaces.map(
+              (workspace) => viewMode === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(
+                WorkspaceHealthCard,
+                {
+                  workspace,
+                  onClick: onWorkspaceClick,
+                  showDetails: true
+                },
+                workspace.workspace_id
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                CompactWorkspaceHealthCard,
+                {
+                  workspace,
+                  onClick: onWorkspaceClick
+                },
+                workspace.workspace_id
+              )
+            )
+          }
+        )
+      ] }, groupName);
+    }) }),
+    filteredWorkspaces.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: searchTerm || statusFilter !== "all" ? "No workspaces found matching your filters." : "No workspaces available." }) })
+  ] });
+};
 var ISTTimer2 = ISTTimer_default;
 var DashboardHeader = React19.memo(({ lineTitle, className = "", headerControls }) => {
   const getShiftName = () => {
@@ -28521,6 +29553,17 @@ var SideNavBar = React19.memo(({
     });
     onMobileMenuClose?.();
   }, [navigate, onMobileMenuClose]);
+  const handleHealthClick = React19.useCallback(() => {
+    navigate("/health", {
+      trackingEvent: {
+        name: "Health Status Page Clicked",
+        properties: {
+          source: "side_nav"
+        }
+      }
+    });
+    onMobileMenuClose?.();
+  }, [navigate, onMobileMenuClose]);
   const handleLogoClick = React19.useCallback(() => {
     navigate("/");
     onMobileMenuClose?.();
@@ -28534,6 +29577,7 @@ var SideNavBar = React19.memo(({
   const profileButtonClasses = React19.useMemo(() => getButtonClasses("/profile"), [getButtonClasses, pathname]);
   const helpButtonClasses = React19.useMemo(() => getButtonClasses("/help"), [getButtonClasses, pathname]);
   const skusButtonClasses = React19.useMemo(() => getButtonClasses("/skus"), [getButtonClasses, pathname]);
+  const healthButtonClasses = React19.useMemo(() => getButtonClasses("/health"), [getButtonClasses, pathname]);
   const NavigationContent = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full py-6 px-4 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -28678,6 +29722,21 @@ var SideNavBar = React19.memo(({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Help" })
             ]
           }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleHealthClick,
+            className: healthButtonClasses,
+            "aria-label": "System Health",
+            tabIndex: 0,
+            role: "tab",
+            "aria-selected": pathname === "/health" || pathname.startsWith("/health/"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.HeartIcon, { className: "w-5 h-5 mb-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Health" })
+            ]
+          }
         )
       ] })
     ] }),
@@ -30820,16 +31879,13 @@ var AIAgentView = () => {
     } }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
       /* @__PURE__ */ jsxRuntime.jsx("header", { className: "flex-shrink-0 bg-white px-8 py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: () => navigate("/"),
-            className: "flex items-center text-gray-600 hover:text-gray-900",
-            "aria-label": "Go back",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to dashboard"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
@@ -31498,15 +32554,13 @@ var HelpView = ({
       transition: { duration: 0.3 },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            BackButtonMinimal,
             {
               onClick: handleBackClick,
-              className: "flex items-center text-gray-600 hover:text-gray-900",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-              ]
+              text: "Back",
+              size: "default",
+              "aria-label": "Navigate back to dashboard"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
@@ -31536,10 +32590,7 @@ var HelpView = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:col-span-3 order-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "shadow-lg border-gray-200 bg-white", children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100 p-4 sm:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1.5 sm:p-2 bg-blue-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(outline.DocumentTextIcon, { className: "h-4 w-4 sm:h-5 sm:w-5 text-blue-600" }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg sm:text-xl font-bold text-gray-900", children: "Submit Support Request" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-600 mt-1", children: "Direct line to our engineering team \u2022 Avg. response time: <30 minutes" })
-                ] })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg sm:text-xl font-bold text-gray-900", children: "Submit Support Request" }) })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "p-4 sm:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4 sm:space-y-5", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
@@ -32633,17 +33684,15 @@ var KPIDetailView = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: lineInfo?.line_name || "Line" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33005,17 +34054,15 @@ var KPIsOverviewView = ({
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33027,17 +34074,15 @@ var KPIsOverviewView = ({
   if (lines.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33052,17 +34097,15 @@ var KPIsOverviewView = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowLeftIcon, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33346,18 +34389,13 @@ var LeaderboardDetailView = React19.memo(({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-8 py-2 sm:py-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 text-gray-600 hover:text-gray-900 transition-colors",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "w-4 h-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 19 5 12 12 5" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
@@ -34418,18 +35456,15 @@ var ShiftsView = ({
   }, [lineConfigs, supabase, showToast]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        BackButtonMinimal,
         {
           onClick: () => onBackClick ? onBackClick() : window.history.back(),
-          className: "absolute left-0 flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
-          "aria-label": "Go back",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shift Management" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Configure day and night shift timings and breaks for each production line" })
@@ -35327,6 +36362,7 @@ var TargetsViewUI = ({
   onSaveLine,
   onToggleBulkConfigure,
   onBulkConfigure,
+  onUpdateWorkspaceDisplayName,
   // SKU props
   skuEnabled = false,
   skus = [],
@@ -35338,15 +36374,13 @@ var TargetsViewUI = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "min-h-screen flex-1 bg-gray-50", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        BackButtonMinimal,
         {
           onClick: onBack,
-          className: "flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "h-5 w-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -35494,7 +36528,18 @@ var TargetsViewUI = ({
                   {
                     className: "px-6 py-4 hover:bg-gray-50 transition-all duration-200",
                     children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 items-center", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
+                        InlineEditableText,
+                        {
+                          value: formattedName,
+                          onSave: async (newName) => {
+                            await onUpdateWorkspaceDisplayName(workspace.id, newName);
+                          },
+                          placeholder: "Workspace name",
+                          className: "font-medium text-gray-900",
+                          inputClassName: "min-w-[120px]"
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
                         "select",
                         {
@@ -36235,6 +37280,17 @@ var TargetsView = ({
       router.push("/");
     }
   };
+  const handleUpdateWorkspaceDisplayName = React19.useCallback(async (workspaceId, displayName) => {
+    try {
+      await workspaceService.updateWorkspaceDisplayName(workspaceId, displayName);
+      await forceRefreshWorkspaceDisplayNames();
+      sonner.toast.success("Workspace name updated successfully");
+    } catch (error) {
+      console.error("Error updating workspace display name:", error);
+      sonner.toast.error("Failed to update workspace name");
+      throw error;
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     TargetsViewUI_default,
     {
@@ -36257,6 +37313,7 @@ var TargetsView = ({
       onSaveLine: handleSaveLine,
       onToggleBulkConfigure: handleToggleBulkConfigure,
       onBulkConfigure: handleBulkConfigure,
+      onUpdateWorkspaceDisplayName: handleUpdateWorkspaceDisplayName,
       skuEnabled,
       skus,
       onUpdateSelectedSKU: updateSelectedSKU,
@@ -36355,6 +37412,14 @@ var WorkspaceDetailView = ({
   const [usingFallbackData, setUsingFallbackData] = React19.useState(false);
   const [showIdleTime, setShowIdleTime] = React19.useState(false);
   const dashboardConfig = useDashboardConfig();
+  const {
+    workspace: workspaceHealth,
+    loading: healthLoading,
+    error: healthError
+  } = useWorkspaceHealthById(workspaceId, {
+    enableRealtime: true,
+    refreshInterval: 3e4
+  });
   const {
     status: prefetchStatus,
     data: prefetchData,
@@ -36663,15 +37728,13 @@ var WorkspaceDetailView = ({
         "Error: ",
         error.message
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BackButton,
         {
           onClick: () => onNavigate && onNavigate("/"),
-          className: "inline-flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5 mr-2" }),
-            "Return to Dashboard"
-          ]
+          text: "Return to Dashboard",
+          size: "default",
+          "aria-label": "Return to dashboard"
         }
       )
     ] });
@@ -36679,15 +37742,13 @@ var WorkspaceDetailView = ({
   if (!workspace) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen p-8 bg-slate-50", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 text-xl text-gray-600", children: "Workspace not found" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BackButton,
         {
           onClick: () => onNavigate && onNavigate("/"),
-          className: "inline-flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5 mr-2" }),
-            "Return to Dashboard"
-          ]
+          text: "Return to Dashboard",
+          size: "default",
+          "aria-label": "Return to dashboard"
         }
       )
     ] });
@@ -36702,21 +37763,16 @@ var WorkspaceDetailView = ({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                BackButtonMinimal,
                 {
                   onClick: handleBackNavigation,
-                  className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 z-10",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-3 h-3 sm:w-3.5 lg:w-4 sm:h-3.5 lg:h-4 mr-1" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm sm:text-sm lg:text-base", children: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : date || shift ? "Back to Monthly History" : "Back" })
-                  ]
+                  text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : date || shift ? "Back to Monthly History" : "Back",
+                  size: "default",
+                  "aria-label": "Navigate back to previous page"
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-1/2 transform -translate-x-1/2 flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
-              ] }),
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
             ] }),
             activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
@@ -36744,6 +37800,19 @@ var WorkspaceDetailView = ({
                   workspace.shift_type,
                   " Shift"
                 ] })
+              ] }),
+              workspaceHealth && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(
+                    "h-1.5 w-1.5 rounded-full",
+                    workspaceHealth.status === "healthy" ? "bg-green-600" : workspaceHealth.status === "unhealthy" ? "bg-red-600" : workspaceHealth.status === "warning" ? "bg-amber-600" : "bg-gray-500"
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-blue-700", children: [
+                    "Last update: ",
+                    workspaceHealth.timeSinceLastUpdate
+                  ] })
+                ] })
               ] })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 sm:mt-1.5 lg:mt-2 flex items-center justify-between", children: [
@@ -37220,17 +38289,15 @@ var SKUManagementView = () => {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-slate-50", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        BackButtonMinimal,
         {
           onClick: handleBack,
-          className: "absolute left-0 flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-5 w-5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "SKU Management" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Manage Stock Keeping Units (SKUs) for production planning" })
@@ -37282,6 +38349,255 @@ var SKUManagementView = () => {
     )
   ] });
 };
+var WorkspaceHealthView = ({
+  lineId,
+  companyId,
+  onNavigate,
+  className = ""
+}) => {
+  const router$1 = router.useRouter();
+  const [viewMode, setViewMode] = React19.useState("grid");
+  const [groupBy, setGroupBy] = React19.useState("line");
+  const operationalDate = getOperationalDate();
+  const currentHour = (/* @__PURE__ */ new Date()).getHours();
+  const isNightShift = currentHour >= 18 || currentHour < 6;
+  const shiftType = isNightShift ? "Night" : "Day";
+  const formatDate = (date) => {
+    const d = new Date(date);
+    return d.toLocaleDateString("en-IN", {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      timeZone: "Asia/Kolkata"
+    });
+  };
+  const getShiftIcon = (shift) => {
+    return shift === "Night" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" });
+  };
+  const {
+    workspaces,
+    summary,
+    loading,
+    error,
+    refetch
+  } = useWorkspaceHealth({
+    lineId,
+    companyId,
+    enableRealtime: true,
+    refreshInterval: 1e4
+    // Refresh every 10 seconds for more responsive updates
+  });
+  const handleWorkspaceClick = React19.useCallback(
+    (workspace) => {
+      const url = `/workspace/${workspace.workspace_id}`;
+      if (onNavigate) {
+        onNavigate(url);
+      } else {
+        router$1.push(url);
+      }
+    },
+    [router$1, onNavigate]
+  );
+  const handleExport = React19.useCallback(() => {
+    const csv = [
+      ["Workspace", "Line", "Company", "Status", "Last Heartbeat", "Consecutive Misses"],
+      ...workspaces.map((w) => [
+        w.workspace_display_name || "",
+        w.line_name || "",
+        w.company_name || "",
+        w.status,
+        w.last_heartbeat,
+        w.consecutive_misses?.toString() || "0"
+      ])
+    ].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `workspace-health-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  }, [workspaces]);
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case "healthy":
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-5 w-5 text-green-500" });
+      case "unhealthy":
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-5 w-5 text-red-500" });
+      case "warning":
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-yellow-500" });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-gray-400" });
+    }
+  };
+  const getUptimeColor = (percentage) => {
+    if (percentage >= 99) return "text-green-600 dark:text-green-400";
+    if (percentage >= 95) return "text-yellow-600 dark:text-yellow-400";
+    return "text-red-600 dark:text-red-400";
+  };
+  if (loading && !summary) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 p-4", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingState, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: "border-red-200 dark:border-red-800", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { className: "p-8 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-12 w-12 text-red-500 mx-auto mb-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2", children: "Error Loading Health Status" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: error.message || "Unable to load workspace health status" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => refetch(),
+          className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors",
+          children: "Try Again"
+        }
+      )
+    ] }) }) }) });
+  }
+  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-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", 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: "default",
+            "aria-label": "Navigate back to dashboard"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", 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-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "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", 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: "Overall System Status" }) }),
+              /* @__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 >= 99 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+                  summary.healthyWorkspaces,
+                  " of ",
+                  summary.totalWorkspaces,
+                  " workspaces healthy"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { 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-green-600 dark:text-green-400", 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, { 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-yellow-600 dark:text-yellow-400", 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, { 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-red-600 dark:text-red-400", 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,
+              viewMode,
+              showFilters: true,
+              groupBy
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+var WorkspaceHealthView_default = withAuth(WorkspaceHealthView, {
+  redirectTo: "/login",
+  requireAuth: true
+});
+var AuthenticatedWorkspaceHealthView = WorkspaceHealthView;
 var S3Service = class {
   constructor(config) {
     this.s3Client = null;
@@ -37748,6 +39064,9 @@ exports.AuthenticatedHelpView = AuthenticatedHelpView;
 exports.AuthenticatedHomeView = AuthenticatedHomeView;
 exports.AuthenticatedShiftsView = AuthenticatedShiftsView;
 exports.AuthenticatedTargetsView = AuthenticatedTargetsView;
+exports.AuthenticatedWorkspaceHealthView = AuthenticatedWorkspaceHealthView;
+exports.BackButton = BackButton;
+exports.BackButtonMinimal = BackButtonMinimal;
 exports.BarChart = BarChart;
 exports.BaseHistoryCalendar = BaseHistoryCalendar;
 exports.BottlenecksContent = BottlenecksContent;
@@ -37759,6 +39078,7 @@ exports.CardDescription = CardDescription2;
 exports.CardFooter = CardFooter2;
 exports.CardHeader = CardHeader2;
 exports.CardTitle = CardTitle2;
+exports.CompactWorkspaceHealthCard = CompactWorkspaceHealthCard;
 exports.CongratulationsOverlay = CongratulationsOverlay;
 exports.CycleTimeChart = CycleTimeChart;
 exports.CycleTimeOverTimeChart = CycleTimeOverTimeChart;
@@ -37782,6 +39102,7 @@ exports.DateDisplay = DateDisplay_default;
 exports.DateTimeDisplay = DateTimeDisplay;
 exports.DebugAuth = DebugAuth;
 exports.DebugAuthView = DebugAuthView_default;
+exports.DetailedHealthStatus = DetailedHealthStatus;
 exports.EmptyStateMessage = EmptyStateMessage;
 exports.EncouragementOverlay = EncouragementOverlay;
 exports.FactoryView = FactoryView_default;
@@ -37789,10 +39110,13 @@ exports.GaugeChart = GaugeChart;
 exports.GridComponentsPlaceholder = GridComponentsPlaceholder;
 exports.HamburgerButton = HamburgerButton;
 exports.Header = Header;
+exports.HealthStatusGrid = HealthStatusGrid;
+exports.HealthStatusIndicator = HealthStatusIndicator;
 exports.HelpView = HelpView_default;
 exports.HomeView = HomeView_default;
 exports.HourlyOutputChart = HourlyOutputChart2;
 exports.ISTTimer = ISTTimer_default;
+exports.InlineEditableText = InlineEditableText;
 exports.KPICard = KPICard;
 exports.KPIDetailView = KPIDetailView_default;
 exports.KPIGrid = KPIGrid;
@@ -37834,6 +39158,7 @@ exports.PrefetchStatus = PrefetchStatus;
 exports.PrefetchTimeoutError = PrefetchTimeoutError;
 exports.ProfileView = ProfileView_default;
 exports.RegistryProvider = RegistryProvider;
+exports.S3ClipsService = S3ClipsService;
 exports.S3Service = S3Service;
 exports.SKUManagementView = SKUManagementView;
 exports.SOPComplianceChart = SOPComplianceChart;
@@ -37874,6 +39199,8 @@ exports.WorkspaceDetailView = WorkspaceDetailView_default;
 exports.WorkspaceDisplayNameExample = WorkspaceDisplayNameExample;
 exports.WorkspaceGrid = WorkspaceGrid;
 exports.WorkspaceGridItem = WorkspaceGridItem;
+exports.WorkspaceHealthCard = WorkspaceHealthCard;
+exports.WorkspaceHealthView = WorkspaceHealthView_default;
 exports.WorkspaceHistoryCalendar = WorkspaceHistoryCalendar;
 exports.WorkspaceMetricCards = WorkspaceMetricCards;
 exports.WorkspaceMonthlyDataFetcher = WorkspaceMonthlyDataFetcher;
@@ -37958,6 +39285,7 @@ exports.isWorkspaceDisplayNamesLoading = isWorkspaceDisplayNamesLoading;
 exports.mergeWithDefaultConfig = mergeWithDefaultConfig;
 exports.migrateLegacyConfiguration = migrateLegacyConfiguration;
 exports.optifyeAgentClient = optifyeAgentClient;
+exports.parseS3Uri = parseS3Uri;
 exports.preInitializeWorkspaceDisplayNames = preInitializeWorkspaceDisplayNames;
 exports.preloadS3Video = preloadS3Video;
 exports.preloadS3VideoUrl = preloadS3VideoUrl;
@@ -37971,6 +39299,7 @@ exports.resetCoreMixpanel = resetCoreMixpanel;
 exports.resetFailedUrl = resetFailedUrl;
 exports.resetSubscriptionManager = resetSubscriptionManager;
 exports.s3VideoPreloader = s3VideoPreloader;
+exports.shuffleArray = shuffleArray;
 exports.skuService = skuService;
 exports.startCoreSessionRecording = startCoreSessionRecording;
 exports.stopCoreSessionRecording = stopCoreSessionRecording;
@@ -38037,6 +39366,8 @@ exports.useWorkspaceDetailedMetrics = useWorkspaceDetailedMetrics;
 exports.useWorkspaceDisplayName = useWorkspaceDisplayName;
 exports.useWorkspaceDisplayNames = useWorkspaceDisplayNames;
 exports.useWorkspaceDisplayNamesMap = useWorkspaceDisplayNamesMap;
+exports.useWorkspaceHealth = useWorkspaceHealth;
+exports.useWorkspaceHealthById = useWorkspaceHealthById;
 exports.useWorkspaceMetrics = useWorkspaceMetrics;
 exports.useWorkspaceNavigation = useWorkspaceNavigation;
 exports.useWorkspaceOperators = useWorkspaceOperators;
@@ -38045,4 +39376,5 @@ exports.videoPreloader = videoPreloader;
 exports.whatsappService = whatsappService;
 exports.withAuth = withAuth;
 exports.withRegistry = withRegistry;
+exports.workspaceHealthService = workspaceHealthService;
 exports.workspaceService = workspaceService;