@optifye/dashboard-core 6.4.1 → 6.5.0

package/dist/index.mjs

@@ -3,10 +3,9 @@ import React19__default, { createContext, useRef, useCallback, useState, useMemo
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { toZonedTime, formatInTimeZone } from 'date-fns-tz';
-import { subDays, format, parseISO, isValid, isFuture, isToday } from 'date-fns';
+import { subDays, format, parseISO, isValid, formatDistanceToNow, isFuture, isToday } from 'date-fns';
 import mixpanel from 'mixpanel-browser';
 import { EventEmitter } from 'events';
-import { S3Client, ListObjectsV2Command, GetObjectCommand } from '@aws-sdk/client-s3';
 import { REALTIME_SUBSCRIBE_STATES, createClient } from '@supabase/supabase-js';
 import Hls2 from 'hls.js';
 import useSWR from 'swr';
@@ -14,15 +13,17 @@ import { noop, warning, invariant, progress, secondsToMilliseconds, milliseconds
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, PieChart, Pie, Cell, ReferenceLine, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
-import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, Clock, ArrowLeft, Calendar, Save, Minus, ArrowDown, ArrowUp, ArrowLeftIcon, Settings2, CheckCircle2, Search, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, RefreshCw, Menu, Send, Copy, Edit2, UserCheck, LogOut, Package, Settings, LifeBuoy, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, ArrowLeft, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Settings2, CheckCircle2, Search, Loader2, AlertCircle, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, XCircle, ChevronLeft, ChevronRight, WifiOff, Wifi, Grid3x3, List, Sun, Moon, MessageSquare, Trash2, RefreshCw, Menu, Send, Copy, UserCheck, LogOut, Package, TrendingUp, TrendingDown, Activity, Settings, LifeBuoy, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
-import { XMarkIcon, ArrowRightIcon, HomeIcon, TrophyIcon, ChartBarIcon, AdjustmentsHorizontalIcon, ClockIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, Bars3Icon, ArrowLeftIcon as ArrowLeftIcon$1, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, InformationCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon, ArrowRightIcon, HomeIcon, TrophyIcon, ChartBarIcon, AdjustmentsHorizontalIcon, ClockIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, InformationCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { CheckIcon } from '@heroicons/react/24/solid';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 import { toast } from 'sonner';
+import { S3Client, ListObjectsV2Command, GetObjectCommand } from '@aws-sdk/client-s3';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import { Readable } from 'stream';
 
@@ -1673,6 +1674,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");
@@ -1816,6 +1836,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 = 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) => {
@@ -2645,6 +2868,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
@@ -3199,6 +3433,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 {
@@ -3711,300 +3953,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 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 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 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 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 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;
@@ -4016,375 +4279,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 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 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 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 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 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);
@@ -4393,35 +4366,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");
     }
@@ -4439,88 +4412,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();
   }
 };
 
@@ -8435,6 +8386,16 @@ function useTicketHistory(companyId) {
       throw err;
     }
   }, [refreshTickets]);
+  const updateTicketServicedStatus = 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]);
   useEffect(() => {
     if (companyId) {
       refreshTickets();
@@ -8446,7 +8407,8 @@ function useTicketHistory(companyId) {
     error,
     createTicket,
     refreshTickets,
-    updateTicketStatus
+    updateTicketStatus,
+    updateTicketServicedStatus
   };
 }
 
@@ -11598,7 +11560,8 @@ var usePrefetchClipCounts = ({
   date,
   shift,
   enabled = true,
-  buildIndex = true,
+  buildIndex = false,
+  // Default to false for cost efficiency
   subscriberId
 }) => {
   const dashboardConfig = useDashboardConfig();
@@ -11686,12 +11649,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);
         },
@@ -12097,6 +12060,140 @@ function useWorkspaceNavigation() {
     getWorkspaceNavigationParams: getWorkspaceNavigationParams2
   };
 }
+function useWorkspaceHealth(options = {}) {
+  const [workspaces, setWorkspaces] = useState([]);
+  const [summary, setSummary] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const unsubscribeRef = useRef(null);
+  const refreshIntervalRef = useRef(null);
+  const {
+    enableRealtime = true,
+    refreshInterval = 3e4,
+    // 30 seconds default
+    ...filterOptions
+  } = options;
+  const fetchData = 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 = 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]);
+  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] = useState(null);
+  const [metrics2, setMetrics] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const unsubscribeRef = useRef(null);
+  const refreshIntervalRef = useRef(null);
+  const { enableRealtime = true, refreshInterval = 3e4 } = options;
+  const fetchData = 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 = useCallback((data) => {
+    if (data.workspace_id === workspaceId) {
+      const updatedWorkspace = workspaceHealthService["processHealthStatus"](data);
+      setWorkspace(updatedWorkspace);
+    }
+  }, [workspaceId]);
+  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 = useCallback(
@@ -23284,8 +23381,7 @@ var ISTTimer = memo(() => {
   return /* @__PURE__ */ jsx(
     TimeDisplay2,
     {
-      variant: "minimal",
-      className: "text-sm font-medium text-gray-700"
+      variant: "minimal"
     }
   );
 });
@@ -23317,6 +23413,7 @@ var CardFooter2 = (props) => {
 };
 var TicketHistory = ({ companyId }) => {
   const { tickets, loading, error } = useTicketHistory(companyId);
+  const [expandedTickets, setExpandedTickets] = useState(/* @__PURE__ */ new Set());
   const getCategoryIcon = (category) => {
     switch (category) {
       case "general":
@@ -23373,6 +23470,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__ */ jsxs(Card2, { className: "h-full", children: [
       /* @__PURE__ */ jsx(CardHeader2, { children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg font-semibold text-gray-800", children: "History of Tickets" }) }),
@@ -23413,12 +23527,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__ */ 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__ */ jsx("div", { className: "flex items-start justify-between mb-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsx("div", { className: "p-1 bg-gray-100 rounded", children: /* @__PURE__ */ jsx(CategoryIcon, { className: "h-3 w-3 text-gray-600" }) }),
@@ -23429,9 +23545,42 @@ var TicketHistory = ({ companyId }) => {
                   /* @__PURE__ */ jsx(StatusIcon, { className: "h-2.5 w-2.5 mr-1" }),
                   ticket.status === "submitted" ? "New" : ticket.status.replace("_", " ")
                 ] }),
-                /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(CheckIcon, { className: "h-2.5 w-2.5 mr-1" }),
+                  "Serviced"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+                /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    transition: { duration: 0.2 },
+                    children: /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3" }),
+                      "Show less"
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }),
+                      "Show more"
+                    ] })
+                  }
+                )
               ] }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 mb-3 line-clamp-2 leading-relaxed", children: ticket.description }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
                 /* @__PURE__ */ jsx("span", { className: "text-gray-500 capitalize font-medium", children: ticket.category }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-gray-500", children: [
@@ -23453,6 +23602,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: CheckCircle,
+          shouldPulse: pulse
+        };
+      case "unhealthy":
+        return {
+          color: "text-red-500",
+          bgColor: "bg-red-500",
+          borderColor: "border-red-500",
+          label: "Unhealthy",
+          icon: XCircle,
+          shouldPulse: false
+        };
+      case "warning":
+        return {
+          color: "text-yellow-500",
+          bgColor: "bg-yellow-500",
+          borderColor: "border-yellow-500",
+          label: "Warning",
+          icon: AlertTriangle,
+          shouldPulse: true
+        };
+      case "unknown":
+      default:
+        return {
+          color: "text-gray-400",
+          bgColor: "bg-gray-400",
+          borderColor: "border-gray-400",
+          label: "Unknown",
+          icon: 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__ */ jsxs("div", { className: containerClasses, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+      /* @__PURE__ */ jsx("div", { className: dotClasses }),
+      config.shouldPulse && status === "healthy" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "absolute rounded-full opacity-25",
+            currentSize.dot,
+            config.bgColor,
+            "animate-ping"
+          )
+        }
+      )
+    ] }),
+    showLabel && /* @__PURE__ */ jsx("span", { className: clsx(currentSize.text, "font-medium", config.color), children: config.label }),
+    showTime && lastUpdated && /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "rounded-lg border p-3",
+        config.bgClass,
+        config.borderClass
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          showDetails && workspaceName && /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: workspaceName }),
+          showDetails && lineName && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: lineName }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(HealthStatusIndicator, { ...indicatorProps, showLabel: true }) })
+        ] }),
+        showDetails && consecutiveMisses !== void 0 && consecutiveMisses > 0 && /* @__PURE__ */ jsxs("div", { className: "ml-3 text-right", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: "Missed" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-gray-900 dark:text-gray-100", children: consecutiveMisses })
+        ] })
+      ] })
+    }
+  );
+};
 var LinePdfExportButton = ({
   targetElement,
   fileName = "line-export",
@@ -24575,6 +24883,8 @@ var WorkspaceCard = ({
   cycleTime,
   operators,
   status = "normal",
+  healthStatus,
+  healthLastUpdated,
   onCardClick,
   headerActions,
   footerContent,
@@ -24667,6 +24977,19 @@ var WorkspaceCard = ({
               ] })
             ] })
           ] }),
+          healthStatus && /* @__PURE__ */ jsx("div", { className: "pt-2 mt-auto border-t dark:border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "System Health" }),
+            /* @__PURE__ */ jsx(
+              HealthStatusIndicator,
+              {
+                status: healthStatus,
+                lastUpdated: healthLastUpdated,
+                showTime: false,
+                size: "sm",
+                pulse: healthStatus === "healthy"
+              }
+            )
+          ] }) }),
           chartData && chartData.data && chartData.data.length > 0 && /* @__PURE__ */ jsxs(
             "div",
             {
@@ -26204,6 +26527,315 @@ var VideoPlayer = React19__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__ */ 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__ */ jsx(
+          ArrowLeft,
+          {
+            className: cn(
+              "flex-shrink-0",
+              currentSize.icon,
+              disabled && "opacity-50"
+            )
+          }
+        ),
+        /* @__PURE__ */ 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__ */ 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__ */ jsx(
+          ArrowLeft,
+          {
+            className: cn(
+              "flex-shrink-0",
+              currentSize.icon,
+              disabled && "opacity-50"
+            )
+          }
+        ),
+        /* @__PURE__ */ 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] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const [saveStatus, setSaveStatus] = useState("idle");
+  const [lastSavedValue, setLastSavedValue] = useState(value);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const debounceTimeout = useRef(void 0);
+  const saveStatusTimeout = useRef(void 0);
+  useEffect(() => {
+    if (!isEditing) {
+      setEditValue(value);
+      setLastSavedValue(value);
+    }
+  }, [value, isEditing]);
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing]);
+  useEffect(() => {
+    return () => {
+      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+      if (saveStatusTimeout.current) clearTimeout(saveStatusTimeout.current);
+    };
+  }, []);
+  const performSave = 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]);
+  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__ */ jsx("div", { ref: containerRef, className: "inline-flex items-center gap-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "absolute right-1.5 top-1/2 -translate-y-1/2", children: [
+        saveStatus === "saving" && /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 text-blue-500 animate-spin" }),
+        saveStatus === "saved" && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-green-500" }),
+        saveStatus === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 text-red-500" }),
+        saveStatus === "idle" && hasUnsavedChanges && /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-yellow-400 rounded-full" })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ 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__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: editValue || placeholder }),
+        /* @__PURE__ */ jsx(
+          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,
@@ -26223,7 +26855,6 @@ var BottlenecksContent = ({
   const videoRef = useRef(null);
   const timestampFilterRef = useRef(null);
   const initialFilter = sopCategories && sopCategories.length > 0 ? sopCategories[0].id : "low_value";
-  const videoIndexRef = useRef(null);
   const currentIndexRef = useRef(0);
   const activeFilterRef = useRef(initialFilter);
   const isMountedRef = useRef(true);
@@ -26241,15 +26872,6 @@ var BottlenecksContent = ({
   const [isNavigating, setIsNavigating] = useState(false);
   const [error, setError] = useState(null);
   const [clipCounts, setClipCounts] = useState({});
-  const [videoIndex, setVideoIndex] = useState(null);
-  const updateVideoIndex = 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 = useCallback((newFilter) => {
     console.log(`[BottlenecksContent] Updating active filter: ${activeFilterRef.current} -> ${newFilter}`);
     setActiveFilter(newFilter);
@@ -26310,7 +26932,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 = useCallback(async () => {
     if (!workspaceId || !s3ClipsService || !dashboardConfig?.s3Config || !isMountedRef.current) return;
@@ -26329,7 +26952,6 @@ var BottlenecksContent = ({
       if (cachedResult) {
         console.log(`[BottlenecksContent] Using cached clip counts`);
         updateClipCounts(cachedResult.counts);
-        updateVideoIndex(cachedResult.videoIndex);
         setIsLoading(false);
         setHasInitialLoad(true);
         return;
@@ -26338,19 +26960,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);
@@ -26363,7 +26979,7 @@ var BottlenecksContent = ({
     } finally {
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts]);
   const loadingCategoryRef = useRef(null);
   const videoRetryCountRef = useRef(0);
   const loadingVideosRef = useRef(/* @__PURE__ */ new Set());
@@ -26371,7 +26987,6 @@ var BottlenecksContent = ({
   const ensureVideosLoaded = 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);
@@ -26398,17 +27013,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;
@@ -26461,12 +27065,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}`);
         }
@@ -26498,11 +27101,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)
@@ -26542,25 +27148,22 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, clipCounts, videoIndex, effectiveShift, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, s3ClipsService, clipCounts, effectiveShift, updateClipCounts]);
   useEffect(() => {
     if (s3ClipsService && !prefetchData) {
       fetchClipCounts();
     }
-  }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, updateVideoIndex, prefetchData]);
+  }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, prefetchData]);
   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]);
   useEffect(() => {
     if (s3ClipsService && clipCounts[activeFilter] > 0) {
       const hasVideosForCurrentFilter = allVideos.some((video) => {
@@ -26600,7 +27203,7 @@ var BottlenecksContent = ({
         setIsCategoryLoading(false);
       }
     }
-  }, [activeFilter, s3ClipsService, videoIndex, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
+  }, [activeFilter, s3ClipsService, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
   useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -26716,23 +27319,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(
@@ -27994,6 +28581,451 @@ var KPISection = 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: 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: 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: 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: 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 ? WifiOff : 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__ */ 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__ */ jsxs("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ 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__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: workspace.line_name })
+          ] }),
+          /* @__PURE__ */ 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__ */ jsx(StatusIcon, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx("span", { children: config.statusText })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5 text-gray-400" }),
+              /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
+                "Last seen: ",
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
+              ] })
+            ] }),
+            workspace.isStale && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(WifiOff, { className: "h-3.5 w-3.5 text-amber-500" }),
+              /* @__PURE__ */ jsx("span", { className: "text-amber-600 dark:text-amber-400 text-xs", children: "No recent updates" })
+            ] })
+          ] }),
+          config.pulse && !workspace.isStale && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ 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__ */ jsx("span", { className: clsx(
+                "relative inline-flex rounded-full h-2 w-2",
+                workspace.status === "healthy" ? "bg-emerald-500" : "bg-amber-500"
+              ) })
+            ] }),
+            /* @__PURE__ */ 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: 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: 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: 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: 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(StatusIcon, { className: clsx("h-5 w-5", config.iconColor) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ 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__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: workspace.line_name })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: workspace.timeSinceLastUpdate }),
+          /* @__PURE__ */ 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] = useState(initialViewMode);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [groupBy, setGroupBy] = useState(initialGroupBy);
+  const [expandedGroups, setExpandedGroups] = useState(/* @__PURE__ */ new Set());
+  const filteredWorkspaces = 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 = 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]);
+  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__ */ jsxs("div", { className: clsx("space-y-4", className), children: [
+    showFilters && /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-3 flex-wrap", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-[200px]", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+          /* @__PURE__ */ 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__ */ jsxs(Select, { value: statusFilter, onValueChange: (value) => setStatusFilter(value), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-[180px] bg-white border-gray-200", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "All statuses" }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxs(SelectItem, { value: "all", children: [
+              "All (",
+              workspaces.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "healthy", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Healthy (",
+                statusCounts.healthy,
+                ")"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "unhealthy", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-red-500" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Unhealthy (",
+                statusCounts.unhealthy,
+                ")"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "warning", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-500" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Warning (",
+                statusCounts.warning,
+                ")"
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "unknown", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-gray-400" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Unknown (",
+                statusCounts.unknown,
+                ")"
+              ] })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Select, { value: groupBy, onValueChange: (value) => setGroupBy(value), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-[160px] bg-white border-gray-200", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Group by" }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "none", children: "No grouping" }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "line", children: "Group by Line" }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "status", children: "Group by Status" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ 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__ */ jsx(Grid3x3, { className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(List, { className: "h-5 w-5" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 text-sm text-gray-500 dark:text-gray-400", children: [
+        "Showing ",
+        filteredWorkspaces.length,
+        " of ",
+        workspaces.length,
+        " workspaces"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-6", children: Object.entries(groupedWorkspaces).map(([groupName, groupWorkspaces]) => {
+      const isExpanded = groupBy === "none" || expandedGroups.has(groupName);
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        groupBy !== "none" && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between cursor-pointer group",
+            onClick: () => toggleGroup(groupName),
+            children: [
+              /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
+                groupName,
+                /* @__PURE__ */ jsxs("span", { className: "text-sm font-normal text-gray-500 dark:text-gray-400", children: [
+                  "(",
+                  groupWorkspaces.length,
+                  ")"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: clsx(
+                    "h-5 w-5 text-gray-400 transition-transform",
+                    isExpanded && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ 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__ */ jsx(
+                WorkspaceHealthCard,
+                {
+                  workspace,
+                  onClick: onWorkspaceClick,
+                  showDetails: true
+                },
+                workspace.workspace_id
+              ) : /* @__PURE__ */ jsx(
+                CompactWorkspaceHealthCard,
+                {
+                  workspace,
+                  onClick: onWorkspaceClick
+                },
+                workspace.workspace_id
+              )
+            )
+          }
+        )
+      ] }, groupName);
+    }) }),
+    filteredWorkspaces.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ 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 = memo(({ lineTitle, className = "", headerControls }) => {
   const getShiftName = () => {
@@ -28491,6 +29523,17 @@ var SideNavBar = memo(({
     });
     onMobileMenuClose?.();
   }, [navigate, onMobileMenuClose]);
+  const handleHealthClick = useCallback(() => {
+    navigate("/health", {
+      trackingEvent: {
+        name: "Health Status Page Clicked",
+        properties: {
+          source: "side_nav"
+        }
+      }
+    });
+    onMobileMenuClose?.();
+  }, [navigate, onMobileMenuClose]);
   const handleLogoClick = useCallback(() => {
     navigate("/");
     onMobileMenuClose?.();
@@ -28504,6 +29547,7 @@ var SideNavBar = memo(({
   const profileButtonClasses = useMemo(() => getButtonClasses("/profile"), [getButtonClasses, pathname]);
   const helpButtonClasses = useMemo(() => getButtonClasses("/help"), [getButtonClasses, pathname]);
   const skusButtonClasses = useMemo(() => getButtonClasses("/skus"), [getButtonClasses, pathname]);
+  const healthButtonClasses = useMemo(() => getButtonClasses("/health"), [getButtonClasses, pathname]);
   const NavigationContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "w-full py-6 px-4 flex-shrink-0", children: /* @__PURE__ */ jsx(
       "button",
@@ -28648,6 +29692,21 @@ var SideNavBar = memo(({
               /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Help" })
             ]
           }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleHealthClick,
+            className: healthButtonClasses,
+            "aria-label": "System Health",
+            tabIndex: 0,
+            role: "tab",
+            "aria-selected": pathname === "/health" || pathname.startsWith("/health/"),
+            children: [
+              /* @__PURE__ */ jsx(HeartIcon, { className: "w-5 h-5 mb-1" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Health" })
+            ]
+          }
         )
       ] })
     ] }),
@@ -30790,16 +31849,13 @@ var AIAgentView = () => {
     } }),
     /* @__PURE__ */ jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
       /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+          BackButtonMinimal,
           {
             onClick: () => navigate("/"),
-            className: "flex items-center text-gray-600 hover:text-gray-900",
-            "aria-label": "Go back",
-            children: [
-              /* @__PURE__ */ jsx(ArrowLeft, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to dashboard"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
@@ -31468,15 +32524,13 @@ var HelpView = ({
       transition: { duration: 0.3 },
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxs(
-            "button",
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+            BackButtonMinimal,
             {
               onClick: handleBackClick,
-              className: "flex items-center text-gray-600 hover:text-gray-900",
-              children: [
-                /* @__PURE__ */ jsx(ArrowLeftIcon$1, { className: "h-5 w-5" }),
-                /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Back" })
-              ]
+              text: "Back",
+              size: "default",
+              "aria-label": "Navigate back to dashboard"
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
@@ -31506,10 +32560,7 @@ var HelpView = ({
             /* @__PURE__ */ jsx("div", { className: "xl:col-span-3 order-1", children: /* @__PURE__ */ jsxs(Card2, { className: "shadow-lg border-gray-200 bg-white", children: [
               /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
                 /* @__PURE__ */ jsx("div", { className: "p-1.5 sm:p-2 bg-blue-100 rounded-lg", children: /* @__PURE__ */ jsx(DocumentTextIcon, { className: "h-4 w-4 sm:h-5 sm:w-5 text-blue-600" }) }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg sm:text-xl font-bold text-gray-900", children: "Submit Support Request" }),
-                  /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg sm:text-xl font-bold text-gray-900", children: "Submit Support Request" }) })
               ] }) }),
               /* @__PURE__ */ jsx(CardContent2, { className: "p-4 sm:p-6", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4 sm:space-y-5", children: [
                 /* @__PURE__ */ jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
@@ -32603,17 +33654,15 @@ var KPIDetailView = ({
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsx(ArrowLeftIcon$1, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: lineInfo?.line_name || "Line" }),
           /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -32975,17 +34024,15 @@ var KPIsOverviewView = ({
   if (error) {
     return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
       /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsx(ArrowLeftIcon$1, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -32997,17 +34044,15 @@ var KPIsOverviewView = ({
   if (lines.length === 0) {
     return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
       /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsx(ArrowLeftIcon$1, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33022,17 +34067,15 @@ var KPIsOverviewView = ({
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
     /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+          BackButtonMinimal,
           {
             onClick: handleBackClick,
-            className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 cursor-pointer",
-            children: [
-              /* @__PURE__ */ jsx(ArrowLeftIcon$1, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
           /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
@@ -33316,18 +34359,13 @@ var LeaderboardDetailView = memo(({
   return /* @__PURE__ */ jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-8 py-2 sm:py-2.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "M19 12H5" }),
-                /* @__PURE__ */ jsx("polyline", { points: "12 19 5 12 12 5" })
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm font-medium", children: "Back" })
-            ]
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to previous page"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
@@ -34388,18 +35426,15 @@ var ShiftsView = ({
   }, [lineConfigs, supabase, showToast]);
   return /* @__PURE__ */ jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ 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__ */ jsx(ArrowLeft, { className: "w-5 h-5" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
         /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shift Management" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Configure day and night shift timings and breaks for each production line" })
@@ -35297,6 +36332,7 @@ var TargetsViewUI = ({
   onSaveLine,
   onToggleBulkConfigure,
   onBulkConfigure,
+  onUpdateWorkspaceDisplayName,
   // SKU props
   skuEnabled = false,
   skus = [],
@@ -35308,15 +36344,13 @@ var TargetsViewUI = ({
   }
   return /* @__PURE__ */ jsxs("main", { className: "min-h-screen flex-1 bg-gray-50", children: [
     /* @__PURE__ */ jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+        BackButtonMinimal,
         {
           onClick: onBack,
-          className: "flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "h-5 w-5" }),
-            /* @__PURE__ */ jsx("span", { className: "ml-2", children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
       ) }),
       /* @__PURE__ */ jsx("div", { className: "absolute right-0", children: /* @__PURE__ */ jsxs(
@@ -35464,7 +36498,18 @@ var TargetsViewUI = ({
                   {
                     className: "px-6 py-4 hover:bg-gray-50 transition-all duration-200",
                     children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-6 items-center", children: [
-                      /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
+                      /* @__PURE__ */ jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ 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__ */ jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
                       /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs(
                         "select",
                         {
@@ -36205,6 +37250,17 @@ var TargetsView = ({
       router.push("/");
     }
   };
+  const handleUpdateWorkspaceDisplayName = useCallback(async (workspaceId, displayName) => {
+    try {
+      await workspaceService.updateWorkspaceDisplayName(workspaceId, displayName);
+      await forceRefreshWorkspaceDisplayNames();
+      toast.success("Workspace name updated successfully");
+    } catch (error) {
+      console.error("Error updating workspace display name:", error);
+      toast.error("Failed to update workspace name");
+      throw error;
+    }
+  }, []);
   return /* @__PURE__ */ jsx(
     TargetsViewUI_default,
     {
@@ -36227,6 +37283,7 @@ var TargetsView = ({
       onSaveLine: handleSaveLine,
       onToggleBulkConfigure: handleToggleBulkConfigure,
       onBulkConfigure: handleBulkConfigure,
+      onUpdateWorkspaceDisplayName: handleUpdateWorkspaceDisplayName,
       skuEnabled,
       skus,
       onUpdateSelectedSKU: updateSelectedSKU,
@@ -36325,6 +37382,14 @@ var WorkspaceDetailView = ({
   const [usingFallbackData, setUsingFallbackData] = useState(false);
   const [showIdleTime, setShowIdleTime] = useState(false);
   const dashboardConfig = useDashboardConfig();
+  const {
+    workspace: workspaceHealth,
+    loading: healthLoading,
+    error: healthError
+  } = useWorkspaceHealthById(workspaceId, {
+    enableRealtime: true,
+    refreshInterval: 3e4
+  });
   const {
     status: prefetchStatus,
     data: prefetchData,
@@ -36633,15 +37698,13 @@ var WorkspaceDetailView = ({
         "Error: ",
         error.message
       ] }),
-      /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx(
+        BackButton,
         {
           onClick: () => onNavigate && onNavigate("/"),
-          className: "inline-flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsx(ArrowLeft, { className: "w-5 h-5 mr-2" }),
-            "Return to Dashboard"
-          ]
+          text: "Return to Dashboard",
+          size: "default",
+          "aria-label": "Return to dashboard"
         }
       )
     ] });
@@ -36649,15 +37712,13 @@ var WorkspaceDetailView = ({
   if (!workspace) {
     return /* @__PURE__ */ jsxs("div", { className: "min-h-screen p-8 bg-slate-50", children: [
       /* @__PURE__ */ jsx("div", { className: "mb-4 text-xl text-gray-600", children: "Workspace not found" }),
-      /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx(
+        BackButton,
         {
           onClick: () => onNavigate && onNavigate("/"),
-          className: "inline-flex items-center text-gray-600 hover:text-gray-900",
-          children: [
-            /* @__PURE__ */ jsx(ArrowLeft, { className: "w-5 h-5 mr-2" }),
-            "Return to Dashboard"
-          ]
+          text: "Return to Dashboard",
+          size: "default",
+          "aria-label": "Return to dashboard"
         }
       )
     ] });
@@ -36672,21 +37733,16 @@ var WorkspaceDetailView = ({
         /* @__PURE__ */ jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
           /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative flex items-center", children: [
-              /* @__PURE__ */ jsxs(
-                "button",
+              /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
+                BackButtonMinimal,
                 {
                   onClick: handleBackNavigation,
-                  className: "absolute left-0 flex items-center text-gray-600 hover:text-gray-900 z-10",
-                  children: [
-                    /* @__PURE__ */ jsx(ArrowLeft, { className: "w-3 h-3 sm:w-3.5 lg:w-4 sm:h-3.5 lg:h-4 mr-1" }),
-                    /* @__PURE__ */ 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__ */ jsxs("div", { className: "absolute left-1/2 transform -translate-x-1/2 flex items-center gap-3", children: [
-                /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }),
-                /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
-              ] }),
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }) }),
               /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
             ] }),
             activeTab !== "monthly_history" && /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
@@ -36714,6 +37770,19 @@ var WorkspaceDetailView = ({
                   workspace.shift_type,
                   " Shift"
                 ] })
+              ] }),
+              workspaceHealth && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-xs text-blue-700", children: [
+                    "Last update: ",
+                    workspaceHealth.timeSinceLastUpdate
+                  ] })
+                ] })
               ] })
             ] }) }),
             /* @__PURE__ */ jsxs("div", { className: "mt-1 sm:mt-1.5 lg:mt-2 flex items-center justify-between", children: [
@@ -37190,17 +38259,15 @@ var SKUManagementView = () => {
   }
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-slate-50", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
-      /* @__PURE__ */ jsxs(
-        "button",
+      /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
+        BackButtonMinimal,
         {
           onClick: handleBack,
-          className: "absolute left-0 flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
-          children: [
-            /* @__PURE__ */ jsx(ArrowLeft, { className: "h-5 w-5" }),
-            /* @__PURE__ */ jsx("span", { children: "Back" })
-          ]
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
         /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "SKU Management" }),
         /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Manage Stock Keeping Units (SKUs) for production planning" })
@@ -37252,6 +38319,255 @@ var SKUManagementView = () => {
     )
   ] });
 };
+var WorkspaceHealthView = ({
+  lineId,
+  companyId,
+  onNavigate,
+  className = ""
+}) => {
+  const router = useRouter();
+  const [viewMode, setViewMode] = useState("grid");
+  const [groupBy, setGroupBy] = 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__ */ jsx(Moon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(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 = useCallback(
+    (workspace) => {
+      const url = `/workspace/${workspace.workspace_id}`;
+      if (onNavigate) {
+        onNavigate(url);
+      } else {
+        router.push(url);
+      }
+    },
+    [router, onNavigate]
+  );
+  const handleExport = 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__ */ jsx(CheckCircle, { className: "h-5 w-5 text-green-500" });
+      case "unhealthy":
+        return /* @__PURE__ */ jsx(XCircle, { className: "h-5 w-5 text-red-500" });
+      case "warning":
+        return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-yellow-500" });
+      default:
+        return /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 p-4", children: /* @__PURE__ */ jsx(LoadingState, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 p-4", children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto", children: /* @__PURE__ */ jsx(Card2, { className: "border-red-200 dark:border-red-800", children: /* @__PURE__ */ jsxs(CardContent2, { className: "p-8 text-center", children: [
+      /* @__PURE__ */ jsx(XCircle, { className: "h-12 w-12 text-red-500 mx-auto mb-4" }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2", children: "Error Loading Health Status" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400 mb-4", children: error.message || "Unable to load workspace health status" }),
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
+          BackButtonMinimal,
+          {
+            onClick: () => router.push("/"),
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to dashboard"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "System Health" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
+            /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute right-0 flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                refetch();
+              },
+              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+              "aria-label": "Refresh",
+              children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-5 w-5" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleExport,
+              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+              "aria-label": "Export CSV",
+              children: /* @__PURE__ */ jsx(Download, { className: "h-5 w-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
+        /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
+        /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
+          /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
+            shiftType,
+            " Shift"
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-4 space-y-6", children: [
+      summary && /* @__PURE__ */ 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__ */ jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2", children: [
+              /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "Overall System Status" }) }),
+              /* @__PURE__ */ jsxs(CardContent2, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
+                    summary.uptimePercentage.toFixed(1),
+                    "%"
+                  ] }),
+                  summary.uptimePercentage >= 99 ? /* @__PURE__ */ jsx(TrendingUp, { className: "h-5 w-5 text-green-500" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "h-5 w-5 text-red-500" })
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+                  summary.healthyWorkspaces,
+                  " of ",
+                  summary.totalWorkspaces,
+                  " workspaces healthy"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Card2, { children: [
+              /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                getStatusIcon("healthy"),
+                "Healthy"
+              ] }) }),
+              /* @__PURE__ */ jsxs(CardContent2, { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-green-600 dark:text-green-400", children: summary.healthyWorkspaces }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Operating normally" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Card2, { children: [
+              /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                getStatusIcon("warning"),
+                "Warning"
+              ] }) }),
+              /* @__PURE__ */ jsxs(CardContent2, { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-yellow-600 dark:text-yellow-400", children: summary.warningWorkspaces }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Delayed updates" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Card2, { children: [
+              /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                getStatusIcon("unhealthy"),
+                "Unhealthy"
+              ] }) }),
+              /* @__PURE__ */ jsxs(CardContent2, { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-red-600 dark:text-red-400", children: summary.unhealthyWorkspaces }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Requires attention" })
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 20 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.3, delay: 0.2 },
+          children: /* @__PURE__ */ 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;
@@ -37707,4 +39023,4 @@ var streamProxyConfig = {
   }
 };
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CongratulationsOverlay, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPrefetchManager, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedWorkspaceHealthView, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CompactWorkspaceHealthCard, CongratulationsOverlay, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPrefetchManager, videoPreloader, whatsappService, withAuth, withRegistry, workspaceHealthService, workspaceService };