@optifye/dashboard-core 6.6.5 → 6.6.7

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React19 from 'react';
-import React19__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, forwardRef, useImperativeHandle, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, Fragment as Fragment$1, createElement, Component } from 'react';
+import * as React20 from 'react';
+import React20__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, forwardRef, useImperativeHandle, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { toZonedTime, formatInTimeZone } from 'date-fns-tz';
@@ -13,7 +13,7 @@ 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, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Settings2, CheckCircle2, Search, Loader2, AlertCircle, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, RefreshCw, XCircle, ChevronLeft, ChevronRight, Activity, Sun, Moon, MousePointer, ArrowRight, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, TrendingUp, TrendingDown, Building2, FolderOpen, Folder, HelpCircle, Play, Settings, LifeBuoy, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Settings2, CheckCircle2, Search, Loader2, AlertCircle, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, RefreshCw, Sliders, Sparkles, TrendingDown, TrendingUp, FolderOpen, Folder, HelpCircle, Play, Activity, Layers, Filter, XCircle, ChevronLeft, ChevronRight, Sun, Moon, MousePointer, ArrowRight, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, Building2, 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, UsersIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, ArrowLeftIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
@@ -268,14 +268,14 @@ var _getDashboardConfigInstance = () => {
   }
   return dashboardConfigInstance;
 };
-var DashboardConfigContext = React19.createContext(void 0);
+var DashboardConfigContext = React20.createContext(void 0);
 var DashboardProvider = ({ config: userProvidedConfig, children }) => {
-  const fullConfig = React19.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
+  const fullConfig = React20.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
   _setDashboardConfigInstance(fullConfig);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     _setDashboardConfigInstance(fullConfig);
   }, [fullConfig]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!fullConfig.theme) return;
     const styleId = "dashboard-core-theme-vars";
     let styleEl = document.getElementById(styleId);
@@ -301,7 +301,7 @@ var DashboardProvider = ({ config: userProvidedConfig, children }) => {
   return /* @__PURE__ */ jsx(DashboardConfigContext.Provider, { value: fullConfig, children });
 };
 var useDashboardConfig = () => {
-  const ctx = React19.useContext(DashboardConfigContext);
+  const ctx = React20.useContext(DashboardConfigContext);
   if (!ctx) throw new Error("useDashboardConfig must be used within a DashboardProvider");
   return ctx;
 };
@@ -1281,7 +1281,18 @@ var dashboardService = {
     const formattedStartDate = formatDate(startDate);
     const formattedEndDate = formatDate(endDate);
     try {
-      const { data, error } = await supabase.from(metricsTable).select("date, shift_id, efficiency, total_output, avg_cycle_time, ideal_output, avg_pph, pph_threshold, workspace_rank, idle_time").eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
+      const { data, error } = await supabase.from(metricsTable).select(`
+                date, 
+                shift_id, 
+                efficiency, 
+                total_output, 
+                avg_cycle_time, 
+                avg_pph, 
+                pph_threshold, 
+                workspace_rank, 
+                idle_time,
+                total_day_output
+              `).eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
       if (error) throw error;
       if (!data) return [];
       const transformedData = data.map((item) => ({
@@ -1291,7 +1302,8 @@ var dashboardService = {
         avg_efficiency: item.efficiency || 0,
         total_output: item.total_output || 0,
         avg_cycle_time: item.avg_cycle_time || 0,
-        ideal_output: item.ideal_output || 0,
+        ideal_output: item.total_day_output || 0,
+        // Use daily target directly from performance_metrics table
         avg_pph: item.avg_pph || 0,
         pph_threshold: item.pph_threshold || 0,
         workspace_rank: item.workspace_rank || 0,
@@ -3556,329 +3568,10 @@ var useAudioService = () => {
 };
 
 // src/lib/utils/dateShiftUtils.ts
-function isValidDateFormat(date) {
-  return /^\d{4}-\d{2}-\d{2}$/.test(date);
-}
 function isValidShiftId(shiftId) {
   const id3 = typeof shiftId === "string" ? parseInt(shiftId, 10) : shiftId;
   return id3 === 0 || id3 === 1;
 }
-
-// src/lib/api/s3-clips-parser.ts
-function parseS3Uri(s3Uri, sopCategories) {
-  const path = new URL(s3Uri).pathname;
-  const parts = path.split("/").filter((p) => p);
-  if (s3Uri.includes("missed_qchecks")) {
-    console.warn(`Skipping missed_qchecks URI in parseS3Uri: ${s3Uri}`);
-    return null;
-  }
-  if (parts.length < 8) {
-    console.warn(`Invalid S3 path structure: ${s3Uri} - Too few parts: ${parts.length}, expected at least 8`);
-    return null;
-  }
-  try {
-    const datePart = parts[2];
-    const shiftPart = parts[3];
-    const violationType = parts[4];
-    let folderName = "";
-    let timestamp = "";
-    for (let i = 5; i < parts.length; i++) {
-      const part = parts[i];
-      if (part && part.includes("_") && /\d{8}_\d{6}/.test(part)) {
-        folderName = part;
-        const timeMatch = folderName.match(/_(\d{8})_(\d{6})_/);
-        if (timeMatch) {
-          timestamp = `${timeMatch[2].substring(0, 2)}:${timeMatch[2].substring(2, 4)}:${timeMatch[2].substring(4, 6)}`;
-          break;
-        }
-      }
-    }
-    if (!timestamp) {
-      console.warn(`Couldn't extract timestamp from any part: ${parts.join("/")}`);
-      timestamp = "00:00:00";
-    }
-    let severity = "low";
-    let type = "bottleneck";
-    let description = "Analysis Clip";
-    const normalizedViolationType = violationType.toLowerCase().trim();
-    if (sopCategories && sopCategories.length > 0) {
-      const matchedCategory = sopCategories.find((category) => {
-        const categoryId = category.id.toLowerCase();
-        const s3FolderName = (category.s3FolderName || category.id).toLowerCase();
-        return categoryId === normalizedViolationType || s3FolderName === normalizedViolationType || // Also check for partial matches for flexibility
-        normalizedViolationType.includes(categoryId) || normalizedViolationType.includes(s3FolderName);
-      });
-      if (matchedCategory) {
-        type = matchedCategory.id;
-        description = matchedCategory.description || matchedCategory.label;
-        if (matchedCategory.color.includes("red")) {
-          severity = "high";
-        } else if (matchedCategory.color.includes("yellow") || matchedCategory.color.includes("orange")) {
-          severity = "medium";
-        } else {
-          severity = "low";
-        }
-        console.log(`Matched SOP category: ${matchedCategory.id} for violation type: ${violationType}`);
-        return { timestamp, severity, description, type, originalUri: s3Uri };
-      }
-    }
-    switch (normalizedViolationType) {
-      case "idle_time":
-      case "idle":
-      case "low_value":
-      case "low value":
-      case "low_value_moment":
-      case "low_value_moments":
-      case "low value moment":
-      case "low value moments":
-        type = "low_value";
-        severity = "low";
-        description = "Idle Time Detected";
-        break;
-      case "sop_deviation":
-        type = "missing_quality_check";
-        severity = "high";
-        description = "SOP Deviations";
-        break;
-      case "long_cycle_time":
-        severity = "high";
-        type = "long_cycle_time";
-        description = "Long Cycle Time Detected";
-        break;
-      case "best_cycle_time":
-        type = "best_cycle_time";
-        severity = "low";
-        description = "Best Cycle Time Performance";
-        break;
-      case "worst_cycle_time":
-        type = "worst_cycle_time";
-        severity = "high";
-        description = "Worst Cycle Time Performance";
-        break;
-      case "cycle_completion":
-      case "completed_cycles":
-      case "completed_cycle":
-        type = "cycle_completion";
-        severity = "low";
-        description = "Cycle Completion";
-        break;
-      case "running_cycle":
-      case "active_cycle":
-      case "production_cycle":
-        type = "running_cycle";
-        severity = "low";
-        description = "Active Production Cycle";
-        break;
-      case "setup_state":
-      case "machine_setup":
-      case "line_setup":
-        type = "setup_state";
-        severity = "medium";
-        description = "Machine Setup Activity";
-        break;
-      case "medium_bottleneck":
-        severity = "medium";
-        description = "Medium Bottleneck Identified";
-        break;
-      case "minor_bottleneck":
-      case "mild_bottleneck":
-        severity = "low";
-        description = "Minor Bottleneck Identified";
-        break;
-      default:
-        if (normalizedViolationType.includes("sop") && normalizedViolationType.includes("deviation")) {
-          type = "missing_quality_check";
-          severity = "high";
-          description = "SOP Deviations";
-        } else if (normalizedViolationType.includes("worst") && normalizedViolationType.includes("cycle")) {
-          type = "worst_cycle_time";
-          severity = "high";
-          description = "Worst Cycle Time Performance";
-        } else if (normalizedViolationType.includes("best") && normalizedViolationType.includes("cycle")) {
-          type = "best_cycle_time";
-          severity = "low";
-          description = "Best Cycle Time Performance";
-        } else if (normalizedViolationType.includes("long") && normalizedViolationType.includes("cycle")) {
-          type = "long_cycle_time";
-          severity = "high";
-          description = "Long Cycle Time Detected";
-        } else if (normalizedViolationType.includes("cycle") && (normalizedViolationType.includes("completion") || normalizedViolationType.includes("complete"))) {
-          type = "cycle_completion";
-          severity = "low";
-          description = "Cycle Completion";
-        } else if (normalizedViolationType.includes("running") && normalizedViolationType.includes("cycle")) {
-          type = "running_cycle";
-          severity = "low";
-          description = "Active Production Cycle";
-        } else if (normalizedViolationType.includes("setup") || normalizedViolationType.includes("machine") && normalizedViolationType.includes("setup")) {
-          type = "setup_state";
-          severity = "medium";
-          description = "Machine Setup Activity";
-        } else {
-          description = `Clip type: ${violationType.replace(/_/g, " ")}`;
-          console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
-        }
-        break;
-    }
-    return { timestamp, severity, description, type, originalUri: s3Uri };
-  } catch (error) {
-    console.error(`Error parsing S3 URI: ${s3Uri}`, error);
-    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;
-}
-var SmartVideoCache = class extends EventEmitter {
-  constructor() {
-    super();
-    this.metrics = {
-      hits: 0,
-      misses: 0,
-      evictions: 0,
-      totalSize: 0,
-      entryCount: 0,
-      hitRate: 0
-    };
-    this.setMaxListeners(50);
-  }
-  /**
-   * DISABLED - Always returns null
-   */
-  async getSummary(key) {
-    this.metrics.misses++;
-    this.updateHitRate();
-    return null;
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  async setSummary(key, summary) {
-  }
-  /**
-   * DISABLED - Always returns null
-   */
-  async getVideos(key) {
-    this.metrics.misses++;
-    this.updateHitRate();
-    return null;
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  async setVideos(key, videos) {
-  }
-  /**
-   * DISABLED - Always returns null
-   */
-  async getClipCounts(key) {
-    console.log("[SmartVideoCache] DISABLED - Returning null for clip counts");
-    this.metrics.misses++;
-    this.updateHitRate();
-    return null;
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  async setClipCounts(key, clipCountsWithIndex, ttlMinutes) {
-    console.log("[SmartVideoCache] DISABLED - Not caching clip counts");
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  setPrefetchStatus(key, status) {
-  }
-  /**
-   * DISABLED - Always returns NONE
-   */
-  getPrefetchStatus(key) {
-    return "none" /* NONE */;
-  }
-  /**
-   * DISABLED - Always returns false
-   */
-  isPrefetchReady(key) {
-    return false;
-  }
-  /**
-   * DISABLED - Returns empty cleanup function
-   */
-  subscribeToPrefetchStatus(key, callback) {
-    return () => {
-    };
-  }
-  /**
-   * DISABLED - Always returns null
-   */
-  getSignedUrl(s3Uri) {
-    this.metrics.misses++;
-    this.updateHitRate();
-    return null;
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  setSignedUrl(s3Uri, url, ttlSeconds = 3600) {
-  }
-  /**
-   * DISABLED - Always returns empty array
-   */
-  async getVideosByWorkspace(workspaceId) {
-    return [];
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  async warmup(entries) {
-  }
-  /**
-   * Get cache statistics (mostly zeros since cache is disabled)
-   */
-  getStats() {
-    return {
-      ...this.metrics,
-      summaryStats: { hits: 0, misses: this.metrics.misses, evictions: 0, totalSize: 0 },
-      videoStats: { hits: 0, misses: this.metrics.misses, evictions: 0, totalSize: 0 },
-      clipCountsStats: { hits: 0, misses: this.metrics.misses, evictions: 0, totalSize: 0 },
-      urlCacheSize: 0
-    };
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  clear(type) {
-    this.removeAllListeners();
-  }
-  /**
-   * Update hit rate metric
-   */
-  updateHitRate() {
-    const total = this.metrics.hits + this.metrics.misses;
-    this.metrics.hitRate = total > 0 ? this.metrics.hits / total : 0;
-  }
-  /**
-   * Export cache state for debugging (returns empty state)
-   */
-  exportState() {
-    return {
-      summaries: [],
-      videos: [],
-      urls: [],
-      metrics: this.getStats()
-    };
-  }
-};
-var smartVideoCache = new SmartVideoCache();
-if (typeof window !== "undefined") {
-  window.addEventListener("beforeunload", () => {
-    console.log("[SmartVideoCache] Cache disabled - no cleanup needed");
-  });
-}
 var getSupabaseClient = () => {
   const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
   const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
@@ -3891,616 +3584,6 @@ 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)");
-  }
-  /**
-   * Fetch with authentication and error handling
-   */
-  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);
-    }
-    const promise = factory().finally(() => {
-      this.requestCache.delete(key);
-    });
-    this.requestCache.set(key, promise);
-    return promise;
-  }
-  /**
-   * List S3 clips
-   */
-  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 clip counts
-   */
-  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 };
-  }
-  /**
-   * Get metadata for a video
-   */
-  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);
-        }
-      }
-      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
-      };
-    });
-  }
-  /**
-   * Batch fetch multiple videos in parallel
-   */
-  async batchFetchVideos(workspaceId, date, shiftId, requests) {
-    const batchKey = `batch:${workspaceId}:${date}:${shiftId}:${requests.length}`;
-    return this.deduplicate(batchKey, async () => {
-      const response = await this.fetchWithAuth("/api/clips/batch", {
-        workspaceId,
-        date,
-        shift: shiftId.toString(),
-        requests,
-        sopCategories: this.sopCategories
-      });
-      console.log(`[S3ClipsAPIClient] Batch fetched ${response.videos.length} videos in ${response.performance.duration}ms`);
-      return response.videos;
-    });
-  }
-  /**
-   * 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) {
-    // Flags for compatibility
-    this.isIndexBuilding = false;
-    this.isPrefetching = false;
-    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;
-    console.log("[S3ClipsService] \u2705 Initialized with secure API client - AWS credentials are now server-side only!");
-  }
-  /**
-   * Lists S3 clips using API
-   */
-  async listS3Clips(params) {
-    const { workspaceId, date, shiftId } = params;
-    if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
-      return [];
-    }
-    console.log(`[S3ClipsService] Listing clips via API for workspace: ${workspaceId}`);
-    try {
-      return await this.apiClient.listS3Clips(params);
-    } catch (error) {
-      console.error("[S3ClipsService] Error listing clips:", error);
-      return [];
-    }
-  }
-  /**
-   * Get metadata cycle time
-   */
-  async getMetadataCycleTime(playlistUri) {
-    try {
-      return await this.apiClient.getMetadataCycleTime(playlistUri);
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching metadata cycle time:", error);
-      return null;
-    }
-  }
-  /**
-   * Control prefetch mode
-   */
-  setPrefetchMode(enabled) {
-    this.isPrefetching = enabled;
-    console.log(`[S3ClipsService] Prefetch mode ${enabled ? "enabled" : "disabled"}`);
-  }
-  /**
-   * Get full metadata
-   */
-  async getFullMetadata(playlistUri) {
-    if (this.isIndexBuilding || 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 reached");
-      return null;
-    }
-    this.currentMetadataFetches++;
-    try {
-      return await this.apiClient.getMetadata(playlistUri);
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching metadata:", error);
-      return null;
-    } finally {
-      this.currentMetadataFetches--;
-    }
-  }
-  /**
-   * Convert S3 URI to CloudFront URL
-   * URLs from API are already signed
-   */
-  s3UriToCloudfront(s3Uri) {
-    if (s3Uri.startsWith("http")) {
-      return s3Uri;
-    }
-    console.warn("[S3ClipsService] Unexpected S3 URI in secure mode:", s3Uri);
-    return s3Uri;
-  }
-  /**
-   * Get SOP categories for workspace
-   */
-  getSOPCategories(workspaceId) {
-    const sopConfig = this.config.s3Config?.sopCategories;
-    if (!sopConfig) return void 0;
-    if (sopConfig.workspaceOverrides && sopConfig.workspaceOverrides[workspaceId]) {
-      return sopConfig.workspaceOverrides[workspaceId];
-    }
-    return sopConfig.default;
-  }
-  async getClipCounts(workspaceId, date, shiftId, buildIndex) {
-    if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
-      return buildIndex ? { counts: {}, videoIndex: this.createEmptyVideoIndex(workspaceId, date, shiftId.toString()) } : {};
-    }
-    try {
-      if (buildIndex) {
-        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");
-      return buildIndex ? cachedResult : cachedResult.counts;
-    }
-    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 category
-   */
-  async getFirstClipForCategory(workspaceId, date, shiftId, category) {
-    if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
-      return null;
-    }
-    try {
-      return await this.apiClient.getFirstClipForCategory(workspaceId, date, shiftId, category);
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching first clip:", error);
-      return null;
-    }
-  }
-  /**
-   * 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 {
-      return await this.apiClient.getClipByIndex(
-        workspaceId,
-        date,
-        shiftId,
-        category,
-        index,
-        includeCycleTime,
-        includeMetadata
-      );
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching clip by index:", error);
-      return null;
-    }
-  }
-  /**
-   * Process full video (for compatibility)
-   */
-  async processFullVideo(uri, index, workspaceId, date, shiftId, includeCycleTime, includeMetadata = false) {
-    const sopCategories = this.getSOPCategories(workspaceId);
-    const parsedInfo = parseS3Uri(uri, sopCategories);
-    if (!parsedInfo) {
-      console.warn(`Skipping URI due to parsing failure: ${uri}`);
-      return null;
-    }
-    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) {
-        video.cycle_time_seconds = metadata.original_task_metadata?.cycle_time;
-        video.creation_timestamp = metadata.upload_timestamp || metadata.original_task_metadata?.timestamp || metadata.creation_timestamp;
-      }
-    }
-    return video;
-  }
-  /**
-   * Fetch clips (main method for compatibility)
-   */
-  async fetchClips(params) {
-    const {
-      workspaceId,
-      date: inputDate,
-      shift,
-      category,
-      limit,
-      offset = 0,
-      mode
-    } = params;
-    if (!workspaceId) {
-      throw new Error("Valid Workspace ID is required");
-    }
-    const date = inputDate || getOperationalDate(
-      this.config.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
-      /* @__PURE__ */ new Date(),
-      this.config.shiftConfig?.dayShift?.startTime || "06:00"
-    );
-    if (!isValidDateFormat(date)) {
-      throw new Error("Invalid date format. Use YYYY-MM-DD.");
-    }
-    let shiftId;
-    if (shift !== void 0) {
-      if (!isValidShiftId(shift)) {
-        throw new Error("Invalid shift value. Must be 0 (day) or 1 (night).");
-      }
-      shiftId = parseInt(shift, 10);
-    } else {
-      const { shiftId: currentShiftId } = getCurrentShift(
-        this.config.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
-        this.config.shiftConfig
-      );
-      shiftId = currentShiftId;
-    }
-    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 result = await this.getVideosPage(
-      workspaceId,
-      date,
-      shiftId,
-      category || "all",
-      effectiveLimit
-    );
-    return result.videos;
-  }
-  /**
-   * Batch fetch multiple videos in parallel
-   */
-  async batchFetchVideos(workspaceId, date, shiftId, requests) {
-    try {
-      const results = await this.apiClient.batchFetchVideos(
-        workspaceId,
-        date,
-        shiftId,
-        requests
-      );
-      return results.map((r2) => r2.video).filter((v) => v !== null);
-    } catch (error) {
-      console.error("[S3ClipsService] Error batch fetching videos:", error);
-      return [];
-    }
-  }
-  /**
-   * Get videos page using pagination API
-   */
-  async getVideosPage(workspaceId, date, shiftId, category, pageSize = 5, startAfter) {
-    try {
-      return await this.apiClient.getVideosPage(
-        workspaceId,
-        date,
-        shiftId,
-        category,
-        pageSize,
-        startAfter
-      );
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching videos page:", error);
-      return { videos: [], hasMore: false };
-    }
-  }
-  /**
-   * 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()}`
-    };
-  }
-  /**
-   * Get clip by ID
-   */
-  async getClipById(clipId, sopCategories) {
-    console.log(`[S3ClipsService] Getting clip by ID: ${clipId} (Note: This is a fallback implementation)`);
-    try {
-      const parts = clipId.split("-");
-      if (parts.length >= 5) {
-        const workspaceId = parts[0];
-        const date = parts[1];
-        const shift = parts[2];
-        const category = parts[3];
-        const index = parseInt(parts[4], 10);
-        if (!isNaN(index)) {
-          return await this.getClipByIndex(workspaceId, date, shift, category, index, true, false);
-        }
-      }
-      console.warn(`[S3ClipsService] Could not parse clipId: ${clipId}`);
-      return null;
-    } catch (error) {
-      console.error("[S3ClipsService] Error getting clip by ID:", error);
-      return null;
-    }
-  }
-  /**
-   * Get neighboring clips
-   */
-  async getNeighboringClips(workspaceId, date, shiftId, category, currentClipId, sopCategories) {
-    console.log(`[S3ClipsService] Getting neighboring clips for ID: ${currentClipId} (Note: This is a fallback implementation)`);
-    try {
-      const parts = currentClipId.split("-");
-      if (parts.length >= 5) {
-        const index = parseInt(parts[4], 10);
-        if (!isNaN(index)) {
-          const [previous, next] = await Promise.all([
-            index > 0 ? this.getClipByIndex(workspaceId, date, shiftId, category, index - 1, true, false) : null,
-            this.getClipByIndex(workspaceId, date, shiftId, category, index + 1, true, false)
-          ]);
-          return { previous, next };
-        }
-      }
-      console.warn(`[S3ClipsService] Could not parse currentClipId: ${currentClipId}`);
-      return { previous: null, next: null };
-    } catch (error) {
-      console.error("[S3ClipsService] Error getting neighboring clips:", error);
-      return { previous: null, next: null };
-    }
-  }
-  /**
-   * Cleanup
-   */
-  dispose() {
-    console.log("[S3ClipsService] Disposing service");
-    this.apiClient.dispose();
-  }
-  /**
-   * Get statistics
-   */
-  getStats() {
-    return this.apiClient.getStats();
-  }
-};
-var getSupabaseClient2 = () => {
-  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 getAuthToken2 = async () => {
-  try {
-    const supabase = getSupabaseClient2();
-    const { data: { session } } = await supabase.auth.getSession();
     console.log("[S3ClipsSupabase] Auth session exists:", !!session, "has token:", !!session?.access_token);
     return session?.access_token || null;
   } catch (error) {
@@ -4531,7 +3614,7 @@ var S3ClipsSupabaseService = class {
    * Fetch with authentication and error handling
    */
   async fetchWithAuth(endpoint, body) {
-    const token = await getAuthToken2();
+    const token = await getAuthToken();
     if (!token) {
       throw new Error("Authentication required");
     }
@@ -4743,21 +3826,60 @@ var S3ClipsSupabaseService = class {
       return video || null;
     });
   }
+  /**
+   * Map percentile category to actual implementation
+   */
+  mapPercentileCategoryToType(category) {
+    switch (category) {
+      case "fast-cycles":
+        return { type: "fast-cycles", isPercentile: true };
+      case "slow-cycles":
+        return { type: "slow-cycles", isPercentile: true };
+      case "longest-idles":
+        return { type: "idle-times", isPercentile: true };
+      default:
+        return { type: null, isPercentile: false };
+    }
+  }
   /**
    * Get neighboring clips for navigation
    * Returns previous and next clips based on timestamp
+   * Handles both regular and percentile categories
    */
   async getNeighboringClips(workspaceId, date, shiftId, category, currentClipId, sopCategories) {
-    console.log(`[S3ClipsSupabase] Getting neighboring clips for ID: ${currentClipId}`);
-    const response = await this.fetchWithAuth("neighbors", {
-      workspaceId,
-      date,
-      shift: shiftId.toString(),
-      category,
-      currentClipId,
-      sopCategories: sopCategories || this.config.s3Config?.sopCategories?.default
-    });
-    return response.neighbors || { previous: null, next: null };
+    console.log(`[S3ClipsSupabase] Getting neighboring clips for ID: ${currentClipId}, category: ${category}`);
+    const percentileMapping = this.mapPercentileCategoryToType(category);
+    if (percentileMapping.isPercentile && percentileMapping.type) {
+      console.log(`[S3ClipsSupabase] Handling percentile category: ${category} -> ${percentileMapping.type}`);
+      const percentileClips = await this.getPercentileClips(
+        workspaceId,
+        date,
+        shiftId,
+        percentileMapping.type,
+        10,
+        // Default percentile, should be configurable
+        1e3
+        // Large limit to get all clips for navigation
+      );
+      const currentIndex = percentileClips.clips.findIndex((clip) => clip.id === currentClipId);
+      if (currentIndex === -1) {
+        return { previous: null, next: null };
+      }
+      return {
+        previous: currentIndex > 0 ? percentileClips.clips[currentIndex - 1] : null,
+        next: currentIndex < percentileClips.clips.length - 1 ? percentileClips.clips[currentIndex + 1] : null
+      };
+    } else {
+      const response = await this.fetchWithAuth("neighbors", {
+        workspaceId,
+        date,
+        shift: shiftId.toString(),
+        category,
+        currentClipId,
+        sopCategories: sopCategories || this.config.s3Config?.sopCategories?.default
+      });
+      return response.neighbors || { previous: null, next: null };
+    }
   }
   /**
    * Get clip by index
@@ -4867,8 +3989,96 @@ var S3ClipsSupabaseService = class {
       await this.batchFetchClips(workspaceId, date, shiftId, requests);
     }
   }
+  /**
+   * Get percentile-based clips (fast cycles, slow cycles, idle times)
+   */
+  async getPercentileClips(workspaceId, date, shiftId, type, percentile = 10, limit = 100) {
+    const cacheKey = `percentile:${workspaceId}:${date}:${shiftId}:${type}:${percentile}`;
+    return this.deduplicate(cacheKey, async () => {
+      console.log(`[S3ClipsSupabase] Fetching ${type} clips at ${percentile}% percentile`);
+      const startDate = `${date}T00:00:00Z`;
+      const endDate = `${date}T23:59:59Z`;
+      const response = await this.fetchWithAuth("percentile-clips", {
+        action: type,
+        workspaceId,
+        startDate,
+        endDate,
+        percentile,
+        shiftId: shiftId || null,
+        limit
+      });
+      console.log(`[S3ClipsSupabase] Fetched ${response.clips?.length || 0} ${type} clips`);
+      const transformedClips = (response.clips || []).map((clip) => ({
+        id: clip.clip_id,
+        src: clip.playlist,
+        // Raw playlist content
+        timestamp: new Date(clip.date).toLocaleTimeString("en-US", {
+          hour12: false,
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit"
+        }),
+        severity: this.getSeverityFromClipType(clip.clip_type_name),
+        description: this.getDescriptionFromClipType(clip.clip_type_name),
+        type: clip.clip_type_name,
+        originalUri: `clips:${clip.clip_id}`,
+        cycle_time_seconds: clip.metadata?.request?.metadata?.cycle_time ? clip.metadata.request.metadata.cycle_time / 20 : void 0,
+        creation_timestamp: clip.created_at,
+        percentile: clip.cycle_time_percentile || clip.idle_time_percentile
+      }));
+      return {
+        clips: transformedClips,
+        total: response.total || transformedClips.length,
+        hasMore: response.hasMore || false
+      };
+    });
+  }
+  /**
+   * Get workspace statistics
+   */
+  async getWorkspaceStats(workspaceId, startDate, endDate) {
+    const cacheKey = `stats:${workspaceId}:${startDate || "all"}:${endDate || "all"}`;
+    return this.deduplicate(cacheKey, async () => {
+      console.log(`[S3ClipsSupabase] Fetching workspace statistics`);
+      const response = await this.fetchWithAuth("workspace-stats", {
+        workspaceId,
+        startDate,
+        endDate
+      });
+      console.log(`[S3ClipsSupabase] Fetched workspace statistics`, response.stats);
+      return response.stats;
+    });
+  }
+  /**
+   * Helper to get severity from clip type
+   * Updated for new materialized view structure (only cycle_completion in 'cycle' category)
+   */
+  getSeverityFromClipType(clipType) {
+    switch (clipType) {
+      case "sop_deviations":
+        return "high";
+      case "idle_time":
+        return "medium";
+      case "cycle_completion":
+      default:
+        return "low";
+    }
+  }
+  /**
+   * Helper to get description from clip type
+   * Updated for new materialized view structure
+   */
+  getDescriptionFromClipType(clipType) {
+    const descriptions = {
+      "idle_time": "Idle Time Detected",
+      "sop_deviations": "SOP Deviations",
+      "cycle_completion": "Cycle Completion"
+    };
+    return descriptions[clipType] || "Analysis Clip";
+  }
 };
-var S3ClipsService2 = S3ClipsSupabaseService ;
+
+// src/lib/services/videoPrefetchManager.ts
 var VideoPrefetchManager = class extends EventEmitter {
   constructor() {
     super();
@@ -4882,7 +4092,7 @@ var VideoPrefetchManager = class extends EventEmitter {
   getS3Service(dashboardConfig) {
     const configKey = JSON.stringify(dashboardConfig.s3Config);
     if (!this.s3Services.has(configKey)) {
-      this.s3Services.set(configKey, new S3ClipsService2(dashboardConfig));
+      this.s3Services.set(configKey, new S3ClipsSupabaseService(dashboardConfig));
     }
     return this.s3Services.get(configKey);
   }
@@ -5702,6 +4912,95 @@ var useSubscriptionManagerSafe = () => {
   const { subscriptionManager } = useContext(SubscriptionManagerContext);
   return subscriptionManager;
 };
+var defaultState = {
+  percentile: 10,
+  showFastCycles: true,
+  showSlowCycles: true,
+  showLongestIdles: true,
+  showIdleTime: true,
+  showCycleCompletion: true,
+  showBestCycleTime: false,
+  showWorstCycleTime: false,
+  showLongCycleTime: false,
+  showSopDeviations: false,
+  dateRange: {
+    start: /* @__PURE__ */ new Date(),
+    end: /* @__PURE__ */ new Date()
+  },
+  shiftFilter: void 0,
+  percentileRange: void 0,
+  isAdvancedPanelOpen: false,
+  isLoadingPercentileClips: false
+};
+var ClipFilterContext = createContext(void 0);
+var ClipFilterProvider = ({ children }) => {
+  const [state, setState] = useState(defaultState);
+  const updatePercentile = useCallback((percentile) => {
+    if (percentile >= 1 && percentile <= 100) {
+      setState((prev) => ({ ...prev, percentile }));
+    }
+  }, []);
+  const toggleClipType = useCallback((clipType) => {
+    setState((prev) => ({
+      ...prev,
+      [clipType]: !prev[clipType]
+    }));
+  }, []);
+  const updateDateRange = useCallback((start, end) => {
+    setState((prev) => ({
+      ...prev,
+      dateRange: { start, end }
+    }));
+  }, []);
+  const updateShiftFilter = useCallback((shiftId) => {
+    setState((prev) => ({
+      ...prev,
+      shiftFilter: shiftId
+    }));
+  }, []);
+  const setPercentileRange = useCallback((min, max) => {
+    if (min >= 0 && max <= 100 && min < max) {
+      setState((prev) => ({
+        ...prev,
+        percentileRange: { min, max }
+      }));
+    }
+  }, []);
+  const toggleAdvancedPanel = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      isAdvancedPanelOpen: !prev.isAdvancedPanelOpen
+    }));
+  }, []);
+  const setLoadingPercentileClips = useCallback((loading) => {
+    setState((prev) => ({
+      ...prev,
+      isLoadingPercentileClips: loading
+    }));
+  }, []);
+  const resetFilters = useCallback(() => {
+    setState(defaultState);
+  }, []);
+  const value = {
+    state,
+    updatePercentile,
+    toggleClipType,
+    updateDateRange,
+    updateShiftFilter,
+    setPercentileRange,
+    toggleAdvancedPanel,
+    resetFilters,
+    setLoadingPercentileClips
+  };
+  return /* @__PURE__ */ jsx(ClipFilterContext.Provider, { value, children });
+};
+var useClipFilter = () => {
+  const context = useContext(ClipFilterContext);
+  if (!context) {
+    throw new Error("useClipFilter must be used within ClipFilterProvider");
+  }
+  return context;
+};
 var DEFAULT_COMPANY_ID = "default-company-id";
 var useWorkspaceMetrics = (workspaceId) => {
   const supabase = useSupabase();
@@ -12932,7 +12231,7 @@ var MotionConfigContext = createContext({
 });
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
-var PopChildMeasure = class extends React19.Component {
+var PopChildMeasure = class extends React20.Component {
   getSnapshotBeforeUpdate(prevProps) {
     const element = this.props.childRef.current;
     if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -12987,7 +12286,7 @@ function PopChild({ children, isPresent }) {
       document.head.removeChild(style);
     };
   }, [isPresent]);
-  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React19.cloneElement(children, { ref }) });
+  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React20.cloneElement(children, { ref }) });
 }
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
@@ -13024,7 +12323,7 @@ var PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, pre
   useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
   }, [isPresent]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
   }, [isPresent]);
   if (mode === "popLayout") {
@@ -20308,7 +19607,7 @@ var LoadingPage = ({
   subMessage = "Please wait while we prepare your data",
   className
 }) => {
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     console.log("LoadingPage rendered with message:", message);
     const timeout = setTimeout(() => {
       console.warn("LoadingPage has been visible for more than 8 seconds. This might indicate an issue.");
@@ -20349,15 +19648,15 @@ var withAuth = (WrappedComponent2, options) => {
     requireAuth: true,
     ...options
   };
-  const WithAuthComponent = React19.memo(function WithAuthComponent2(props) {
+  const WithAuthComponent = React20.memo(function WithAuthComponent2(props) {
     const { session, loading, error } = useAuth();
     const router = useRouter();
-    React19.useEffect(() => {
+    React20.useEffect(() => {
       if (process.env.NODE_ENV === "development" && process.env.DEBUG_AUTH === "true") {
         console.log("withAuth state:", { loading, hasSession: !!session, requireAuth: defaultOptions.requireAuth });
       }
     }, [session, loading]);
-    React19.useEffect(() => {
+    React20.useEffect(() => {
       if (!loading && defaultOptions.requireAuth && !session && !error) {
         console.log("Redirecting to login from withAuth");
         router.replace(defaultOptions.redirectTo);
@@ -20733,11 +20032,11 @@ var BarChartComponent = ({
   aspect = 2,
   ...restOfChartProps
 }) => {
-  const containerRef = React19__default.useRef(null);
-  const [containerReady, setContainerReady] = React19__default.useState(false);
+  const containerRef = React20__default.useRef(null);
+  const [containerReady, setContainerReady] = React20__default.useState(false);
   const themeConfig = useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -20835,7 +20134,7 @@ var BarChartComponent = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var BarChart = React19__default.memo(BarChartComponent, (prevProps, nextProps) => {
+var BarChart = React20__default.memo(BarChartComponent, (prevProps, nextProps) => {
   if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.layout !== nextProps.layout || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect) {
     return false;
   }
@@ -20883,11 +20182,11 @@ var LineChartComponent = ({
   aspect = 2,
   ...restOfChartProps
 }) => {
-  const containerRef = React19__default.useRef(null);
-  const [containerReady, setContainerReady] = React19__default.useState(false);
+  const containerRef = React20__default.useRef(null);
+  const [containerReady, setContainerReady] = React20__default.useState(false);
   const themeConfig = useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -20986,7 +20285,7 @@ var LineChartComponent = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var LineChart = React19__default.memo(LineChartComponent, (prevProps, nextProps) => {
+var LineChart = React20__default.memo(LineChartComponent, (prevProps, nextProps) => {
   if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect || JSON.stringify(prevProps.yAxisDomain) !== JSON.stringify(nextProps.yAxisDomain)) {
     return false;
   }
@@ -21063,7 +20362,7 @@ var OutputProgressChartComponent = ({
     ] }) })
   ] }) });
 };
-var OutputProgressChart = React19__default.memo(OutputProgressChartComponent);
+var OutputProgressChart = React20__default.memo(OutputProgressChartComponent);
 OutputProgressChart.displayName = "OutputProgressChart";
 var LargeOutputProgressChart = ({
   currentOutput,
@@ -21179,7 +20478,7 @@ var CycleTimeChartComponent = ({
     }
   ) }) });
 };
-var CycleTimeChart = React19__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
+var CycleTimeChart = React20__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
   if (prevProps.className !== nextProps.className) {
     return false;
   }
@@ -21205,8 +20504,8 @@ var CycleTimeOverTimeChart = ({
   className = ""
 }) => {
   const MAX_DATA_POINTS = 40;
-  const containerRef = React19__default.useRef(null);
-  const [containerReady, setContainerReady] = React19__default.useState(false);
+  const containerRef = React20__default.useRef(null);
+  const [containerReady, setContainerReady] = React20__default.useState(false);
   const getHourFromTimeString = (timeStr) => {
     const [hours, minutes] = timeStr.split(":");
     return parseInt(hours);
@@ -21217,10 +20516,10 @@ var CycleTimeOverTimeChart = ({
   };
   const displayData = getDisplayData(data);
   const DURATION = displayData.length;
-  const [animatedData, setAnimatedData] = React19__default.useState(Array(DURATION).fill(0));
-  const prevDataRef = React19__default.useRef(Array(DURATION).fill(0));
-  const animationFrameRef = React19__default.useRef(null);
-  const animateToNewData = React19__default.useCallback((targetData) => {
+  const [animatedData, setAnimatedData] = React20__default.useState(Array(DURATION).fill(0));
+  const prevDataRef = React20__default.useRef(Array(DURATION).fill(0));
+  const animationFrameRef = React20__default.useRef(null);
+  const animateToNewData = React20__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -21250,7 +20549,7 @@ var CycleTimeOverTimeChart = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const processedData = getDisplayData(data);
       animateToNewData(processedData);
@@ -21261,7 +20560,7 @@ var CycleTimeOverTimeChart = ({
       }
     };
   }, [data, animateToNewData]);
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -21504,7 +20803,7 @@ var CycleTimeOverTimeChart = ({
     }
   );
 };
-var Card = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -21516,7 +20815,7 @@ var Card = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -21525,7 +20824,7 @@ var CardHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -21537,7 +20836,7 @@ var CardTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -21546,9 +20845,9 @@ var CardDescription = React19.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -21624,7 +20923,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React19.forwardRef(
+var Button = React20.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -21647,8 +20946,8 @@ var HourlyOutputChartComponent = ({
   idleTimeHourly,
   className = ""
 }) => {
-  const containerRef = React19__default.useRef(null);
-  const [containerReady, setContainerReady] = React19__default.useState(false);
+  const containerRef = React20__default.useRef(null);
+  const [containerReady, setContainerReady] = React20__default.useState(false);
   const getTimeFromTimeString = (timeStr) => {
     const [hours, minutes] = timeStr.split(":");
     const hour = parseInt(hours);
@@ -21657,7 +20956,7 @@ var HourlyOutputChartComponent = ({
     return { hour, minute, decimalHour };
   };
   const shiftStartTime = getTimeFromTimeString(shiftStart);
-  const { shiftDuration, shiftEndTime, hasPartialLastHour } = React19__default.useMemo(() => {
+  const { shiftDuration, shiftEndTime, hasPartialLastHour } = React20__default.useMemo(() => {
     console.log("[HourlyOutputChart] Calculating shift duration with:", {
       shiftStart,
       shiftEnd,
@@ -21692,12 +20991,12 @@ var HourlyOutputChartComponent = ({
   }, [shiftEnd, shiftStartTime.decimalHour]);
   const SHIFT_DURATION = shiftDuration;
   shiftEndTime ? shiftEndTime.hour : (shiftStartTime.hour + SHIFT_DURATION) % 24;
-  const [animatedData, setAnimatedData] = React19__default.useState(
+  const [animatedData, setAnimatedData] = React20__default.useState(
     () => Array(SHIFT_DURATION).fill(0)
   );
-  const prevDataRef = React19__default.useRef(Array(SHIFT_DURATION).fill(0));
-  const animationFrameRef = React19__default.useRef(null);
-  React19__default.useEffect(() => {
+  const prevDataRef = React20__default.useRef(Array(SHIFT_DURATION).fill(0));
+  const animationFrameRef = React20__default.useRef(null);
+  React20__default.useEffect(() => {
     setAnimatedData((prev) => {
       if (prev.length !== SHIFT_DURATION) {
         return Array(SHIFT_DURATION).fill(0);
@@ -21706,14 +21005,14 @@ var HourlyOutputChartComponent = ({
     });
     prevDataRef.current = Array(SHIFT_DURATION).fill(0);
   }, [SHIFT_DURATION]);
-  const [idleBarState, setIdleBarState] = React19__default.useState({
+  const [idleBarState, setIdleBarState] = React20__default.useState({
     visible: showIdleTime,
     key: 0,
     shouldAnimate: false
   });
-  const prevShowIdleTimeRef = React19__default.useRef(showIdleTime);
-  const stateUpdateTimeoutRef = React19__default.useRef(null);
-  React19__default.useEffect(() => {
+  const prevShowIdleTimeRef = React20__default.useRef(showIdleTime);
+  const stateUpdateTimeoutRef = React20__default.useRef(null);
+  React20__default.useEffect(() => {
     if (stateUpdateTimeoutRef.current) {
       clearTimeout(stateUpdateTimeoutRef.current);
     }
@@ -21738,7 +21037,7 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [showIdleTime]);
-  const animateToNewData = React19__default.useCallback((targetData) => {
+  const animateToNewData = React20__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -21768,7 +21067,7 @@ var HourlyOutputChartComponent = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const shiftData = data.slice(0, SHIFT_DURATION);
       animateToNewData(shiftData);
@@ -21779,7 +21078,7 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [data, animateToNewData]);
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -21801,7 +21100,7 @@ var HourlyOutputChartComponent = ({
       clearTimeout(fallbackTimeout);
     };
   }, []);
-  const formatHour = React19__default.useCallback((hourIndex) => {
+  const formatHour = React20__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -21825,7 +21124,7 @@ var HourlyOutputChartComponent = ({
     };
     return `${formatTime3(startHour, startMinute)}-${formatTime3(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const formatTimeRange = React19__default.useCallback((hourIndex) => {
+  const formatTimeRange = React20__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -21846,7 +21145,7 @@ var HourlyOutputChartComponent = ({
     };
     return `${formatTime3(startHour, startMinute)} - ${formatTime3(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const chartData = React19__default.useMemo(() => {
+  const chartData = React20__default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
       const actualHour = (shiftStartTime.hour + i) % 24;
       const startMinute = shiftStartTime.minute;
@@ -21915,7 +21214,7 @@ var HourlyOutputChartComponent = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange, SHIFT_DURATION]);
-  const IdleBar = React19__default.useMemo(() => {
+  const IdleBar = React20__default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsx(
       Bar,
@@ -22240,7 +21539,7 @@ var HourlyOutputChartComponent = ({
     }
   );
 };
-var HourlyOutputChart = React19__default.memo(HourlyOutputChartComponent, (prevProps, nextProps) => {
+var HourlyOutputChart = React20__default.memo(HourlyOutputChartComponent, (prevProps, nextProps) => {
   if (prevProps.pphThreshold !== nextProps.pphThreshold || prevProps.shiftStart !== nextProps.shiftStart || prevProps.showIdleTime !== nextProps.showIdleTime || prevProps.className !== nextProps.className) {
     return false;
   }
@@ -22276,7 +21575,7 @@ function getTrendArrowAndColor(trend) {
     return { arrow: "\u2192", color: "text-gray-400" };
   }
 }
-var VideoCard = React19__default.memo(({
+var VideoCard = React20__default.memo(({
   workspace,
   hlsUrl,
   shouldPlay,
@@ -22425,7 +21724,7 @@ var VideoCard = React19__default.memo(({
 });
 VideoCard.displayName = "VideoCard";
 var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
-var VideoGridView = React19__default.memo(({
+var VideoGridView = React20__default.memo(({
   workspaces,
   selectedLine,
   className = "",
@@ -22578,32 +21877,10 @@ var VideoGridView = React19__default.memo(({
       observerRef.current?.disconnect();
     };
   }, [filteredWorkspaces]);
-  const prefetchCacheRef = useRef({});
+  useRef({});
   const handleWorkspaceClick = useCallback((workspace) => {
     const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
-    if (dashboardConfig?.s3Config && workspaceId) {
-      const operationalDate = getOperationalDate(dashboardConfig.dateTimeConfig?.defaultTimezone);
-      const fullKey = `${workspaceId}-${operationalDate}-all-all-meta-1000--`;
-      if (!prefetchCacheRef.current[fullKey]?.status) {
-        const clipsService = new S3ClipsService(dashboardConfig);
-        const fullPromise = clipsService.fetchClips({
-          workspaceId,
-          date: operationalDate,
-          mode: "full",
-          includeCycleTime: true,
-          includeMetadata: true,
-          limit: 1e3
-        });
-        prefetchCacheRef.current[fullKey] = { status: "pending", promise: fullPromise };
-        fullPromise.then((data) => {
-          prefetchCacheRef.current[fullKey] = { status: "resolved", data };
-          console.log(`Prefetched full clips data for workspace ${workspaceId}`);
-        }).catch((error) => {
-          prefetchCacheRef.current[fullKey] = { status: "rejected", error };
-          console.warn(`Failed to prefetch full clips for workspace ${workspaceId}:`, error);
-        });
-      }
-    }
+    console.log(`[VideoGridView] Prefetching disabled for workspace ${workspaceId}`);
     trackCoreEvent("Workspace Detail Clicked", {
       workspace_name: workspace.workspace_name,
       workspace_id: workspaceId,
@@ -23203,7 +22480,7 @@ var PieChart4 = ({
       }
     );
   };
-  const CustomTooltip = ({ active, payload }) => {
+  const CustomTooltip2 = ({ active, payload }) => {
     if (active && payload && payload.length) {
       const data2 = payload[0];
       return /* @__PURE__ */ jsxs("div", { className: "bg-white px-3 py-2 shadow-lg rounded-lg border border-gray-200", children: [
@@ -23234,7 +22511,7 @@ var PieChart4 = ({
         children: dataWithPercentage.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
     /* @__PURE__ */ jsx(
       Legend,
       {
@@ -23362,7 +22639,7 @@ var EmptyStateMessage = ({
   iconClassName
 }) => {
   let IconContent = null;
-  if (React19__default.isValidElement(iconType)) {
+  if (React20__default.isValidElement(iconType)) {
     IconContent = iconType;
   } else if (typeof iconType === "string") {
     const MappedIcon = IconMap[iconType];
@@ -26365,6 +25642,28 @@ var getOrdinal = (n) => {
   const v = n % 100;
   return n + (suffix[(v - 20) % 10] || suffix[v] || suffix[0]);
 };
+var CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-white/95 backdrop-blur-sm p-3 rounded-lg shadow-lg border border-gray-100", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-800 mb-1", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Actual:" }),
+          " ",
+          Math.round(payload[0].value),
+          " units"
+        ] }),
+        payload[0].payload.idealOutput > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Target:" }),
+          " ",
+          Math.round(payload[0].payload.idealOutput),
+          " units"
+        ] })
+      ] })
+    ] });
+  }
+  return null;
+};
 var WorkspaceMonthlyHistory = ({
   data,
   month,
@@ -26416,8 +25715,31 @@ var WorkspaceMonthlyHistory = ({
       });
     }
     const avgIdealOutput = validDaysCount > 0 ? totalIdealOutput / validDaysCount : 0;
-    return { data: dailyData, maxOutput, avgIdealOutput };
+    const calculatedMax = Math.max(maxOutput, avgIdealOutput);
+    const yAxisMax = calculatedMax > 0 ? calculatedMax * 1.1 : 100;
+    return { data: dailyData, maxOutput, avgIdealOutput, yAxisMax };
   }, [data, month, year, selectedShift]);
+  const yAxisTicks = useMemo(() => {
+    const max = chartData.yAxisMax;
+    const target = chartData.avgIdealOutput;
+    if (!max || max <= 0) return void 0;
+    const desiredIntervals = 4;
+    const roughStep = max / desiredIntervals;
+    const power = Math.pow(10, Math.floor(Math.log10(roughStep)));
+    const normalized = roughStep / power;
+    let step = 1 * power;
+    if (normalized >= 1.5 && normalized < 3) step = 2 * power;
+    else if (normalized >= 3 && normalized < 7) step = 5 * power;
+    else if (normalized >= 7) step = 10 * power;
+    const ticks = [];
+    for (let v = 0; v <= max; v += step) {
+      ticks.push(Math.round(v));
+    }
+    if (target > 0) {
+      ticks.push(Math.round(target));
+    }
+    return Array.from(new Set(ticks)).filter((v) => v >= 0 && v <= max).sort((a, b) => a - b);
+  }, [chartData.yAxisMax, chartData.avgIdealOutput]);
   const pieChartData = useMemo(() => {
     const validShifts = data.map((d) => selectedShift === "day" ? d.dayShift : d.nightShift).filter(hasRealData);
     if (validShifts.length === 0) return [];
@@ -26627,24 +25949,18 @@ var WorkspaceMonthlyHistory = ({
             }, children: [
               metrics2?.avgEfficiency ?? 0,
               "%"
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-gray-500 text-center mt-1", children: [
-              new Date(year, month).toLocaleString("default", { month: "short" }),
-              " avg"
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
             /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-600 text-center mb-1", children: "Avg Daily Output" }),
-            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-center text-gray-900", children: metrics2?.avgDailyOutput?.toLocaleString?.() ?? 0 }),
-            /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-500 text-center mt-1", children: "units/day" })
+            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-center text-gray-900", children: metrics2?.avgDailyOutput?.toLocaleString?.() ?? 0 })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
             /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-600 text-center mb-1", children: "Avg Cycle Time" }),
             /* @__PURE__ */ jsxs("div", { className: "text-2xl font-bold text-center text-gray-900", children: [
               metrics2?.avgCycleTime ?? 0,
               "s"
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-500 text-center mt-1", children: "per unit" })
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
@@ -26708,43 +26024,55 @@ var WorkspaceMonthlyHistory = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex-1", children: [
           /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-3", children: "Daily Output" }),
-          /* @__PURE__ */ jsx("div", { style: { height: "200px" }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx("div", { style: { height: "220px" }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
             BarChart$1,
             {
               data: chartData.data,
-              margin: { top: 5, right: 5, bottom: 35, left: 5 },
+              margin: { top: 20, right: 10, bottom: 40, left: 10 },
               children: [
                 /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#f3f4f6" }),
                 /* @__PURE__ */ jsx(
                   XAxis,
                   {
                     dataKey: "hour",
-                    tick: { fontSize: 9, fill: "#9ca3af" },
+                    tick: { fontSize: 10, fill: "#6b7280" },
                     interval: 0,
                     angle: -45,
-                    textAnchor: "end"
+                    textAnchor: "end",
+                    height: 60
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   YAxis,
                   {
-                    tick: { fontSize: 9, fill: "#9ca3af" },
-                    domain: [0, "dataMax"],
-                    width: 30
+                    domain: [0, chartData.yAxisMax],
+                    width: 35,
+                    ticks: yAxisTicks,
+                    tick: (props) => {
+                      const { x, y, payload } = props;
+                      const value = Math.round(payload.value);
+                      const targetValue = Math.round(chartData.avgIdealOutput);
+                      const isTarget = Math.abs(value - targetValue) < 1 && targetValue > 0;
+                      return /* @__PURE__ */ jsx(
+                        "text",
+                        {
+                          x: x - 5,
+                          y: y + 4,
+                          textAnchor: "end",
+                          fontSize: "10",
+                          fill: isTarget ? "#E34329" : "#6b7280",
+                          fontWeight: isTarget ? "600" : "normal",
+                          children: value < 1e-3 ? "" : value.toString()
+                        }
+                      );
+                    }
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   Tooltip,
                   {
                     cursor: false,
-                    contentStyle: {
-                      backgroundColor: "rgba(255, 255, 255, 0.95)",
-                      border: "1px solid #e5e7eb",
-                      borderRadius: "6px",
-                      fontSize: "11px",
-                      padding: "8px"
-                    },
-                    labelStyle: { fontSize: "11px", fontWeight: "600" }
+                    content: CustomTooltip
                   }
                 ),
                 chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsx(
@@ -26752,40 +26080,68 @@ var WorkspaceMonthlyHistory = ({
                   {
                     y: chartData.avgIdealOutput,
                     stroke: "#E34329",
-                    strokeDasharray: "3 3",
+                    strokeDasharray: "5 5",
                     strokeWidth: 2
                   }
                 ),
-                /* @__PURE__ */ jsx(Bar, { dataKey: "output", radius: [3, 3, 0, 0], children: chartData.data.map((entry, index) => /* @__PURE__ */ jsx(
-                  Cell,
-                  {
-                    fill: entry.output === 0 ? "#f3f4f6" : entry.color,
-                    style: {
-                      filter: "brightness(1)",
-                      transition: "filter 0.3s ease, transform 0.3s ease",
-                      cursor: "pointer"
-                    },
-                    onMouseEnter: (e) => {
-                      const target = e.target;
-                      target.style.filter = "brightness(1.1)";
-                      target.style.transform = "translateY(-4px)";
+                /* @__PURE__ */ jsxs(Bar, { dataKey: "output", radius: [4, 4, 0, 0], children: [
+                  chartData.data.map((entry, index) => /* @__PURE__ */ jsx(
+                    Cell,
+                    {
+                      fill: entry.output === 0 ? "#f3f4f6" : entry.color,
+                      style: {
+                        filter: "brightness(1)",
+                        transition: "all 0.3s ease",
+                        cursor: entry.output > 0 ? "pointer" : "default"
+                      },
+                      onMouseEnter: (e) => {
+                        if (entry.output > 0) {
+                          const target = e.target;
+                          target.style.filter = "brightness(1.1)";
+                          target.style.transform = "translateY(-2px)";
+                        }
+                      },
+                      onMouseLeave: (e) => {
+                        const target = e.target;
+                        target.style.filter = "brightness(1)";
+                        target.style.transform = "translateY(0)";
+                      }
                     },
-                    onMouseLeave: (e) => {
-                      const target = e.target;
-                      target.style.filter = "brightness(1)";
-                      target.style.transform = "translateY(0)";
+                    `cell-${index}`
+                  )),
+                  /* @__PURE__ */ jsx(
+                    LabelList,
+                    {
+                      dataKey: "originalOutput",
+                      position: "top",
+                      content: (props) => {
+                        const { x, y, width, value } = props;
+                        if (!value || value === 0) return null;
+                        return /* @__PURE__ */ jsx(
+                          "text",
+                          {
+                            x: x + width / 2,
+                            y: y - 5,
+                            textAnchor: "middle",
+                            fontSize: "11",
+                            fontWeight: "600",
+                            fill: "#374151",
+                            children: Math.round(value)
+                          }
+                        );
+                      }
                     }
-                  },
-                  `cell-${index}`
-                )) })
+                  )
+                ] })
               ]
             }
           ) }) }),
-          chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-4 mt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-8 h-0.5 border-t border-dashed", style: { borderColor: "#E34329" } }),
-            /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-gray-500", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-6 mt-3", children: chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-12 h-0.5 border-t-2 border-dashed", style: { borderColor: "#E34329" } }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-600", children: [
               "Target: ",
-              Math.round(chartData.avgIdealOutput)
+              Math.round(chartData.avgIdealOutput),
+              " units/day"
             ] })
           ] }) })
         ] })
@@ -27298,7 +26654,7 @@ function Skeleton({ className, ...props }) {
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -27314,7 +26670,7 @@ var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -27324,7 +26680,7 @@ var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -27334,7 +26690,7 @@ var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React19.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React20.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -27362,7 +26718,7 @@ var SelectContent = React19.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -27371,7 +26727,7 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -27387,7 +26743,7 @@ var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -27680,7 +27036,7 @@ if (typeof document !== "undefined") {
     document.head.appendChild(style);
   }
 }
-var VideoPlayer = React19__default.forwardRef(({
+var VideoPlayer = React20__default.forwardRef(({
   src,
   poster,
   autoplay = false,
@@ -27965,7 +27321,7 @@ var VideoPlayer = React19__default.forwardRef(({
       setIsReady(false);
     }
   }, []);
-  React19__default.useImperativeHandle(ref, () => ({
+  React20__default.useImperativeHandle(ref, () => ({
     player: playerRef.current,
     play,
     pause,
@@ -28581,7 +27937,7 @@ var NewClipsNotification = ({
     }
   );
 };
-var getSupabaseClient3 = () => {
+var getSupabaseClient2 = () => {
   const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
   const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
   if (!url || !key) {
@@ -28589,9 +27945,9 @@ var getSupabaseClient3 = () => {
   }
   return createClient(url, key);
 };
-var getAuthToken3 = async () => {
+var getAuthToken2 = async () => {
   try {
-    const supabase = getSupabaseClient3();
+    const supabase = getSupabaseClient2();
     const { data: { session } } = await supabase.auth.getSession();
     return session?.access_token || null;
   } catch (error) {
@@ -28612,7 +27968,7 @@ function useWorkspaceCrop(workspaceId) {
       setIsLoading(true);
       setError(null);
       try {
-        const token = await getAuthToken3();
+        const token = await getAuthToken2();
         if (!token) {
           throw new Error("Authentication required");
         }
@@ -28645,6 +28001,47 @@ function useWorkspaceCrop(workspaceId) {
   }, [workspaceId]);
   return { crop, isLoading, error };
 }
+var FilterDialogTrigger = ({
+  className = ""
+}) => {
+  const { state, toggleAdvancedPanel } = useClipFilter();
+  const activeFiltersCount = [
+    state.showFastCycles,
+    state.showSlowCycles,
+    state.showLongestIdles,
+    state.showCycleCompletion,
+    state.showIdleTime
+  ].filter(Boolean).length;
+  const isDefaultPercentile = state.percentile === 10;
+  const isDefaultShift = state.shiftFilter === void 0;
+  const hasCustomFilters = !isDefaultPercentile || !isDefaultShift || activeFiltersCount < 5;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: toggleAdvancedPanel,
+      className: `relative group p-2.5 bg-gradient-to-r from-blue-50 to-indigo-50 hover:from-blue-100 hover:to-indigo-100 border border-blue-200/60 hover:border-blue-300 rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-blue-100/50 ${className}`,
+      title: "Advanced Filters",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Sliders, { className: "h-5 w-5 text-blue-600 group-hover:text-blue-700 transition-colors" }),
+          hasCustomFilters && /* @__PURE__ */ jsx(Sparkles, { className: "absolute -top-1 -right-1 h-3 w-3 text-yellow-500 animate-pulse" })
+        ] }),
+        hasCustomFilters && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1 bg-gradient-to-r from-yellow-400 to-orange-400 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center shadow-lg animate-bounce", children: activeFiltersCount < 5 ? activeFiltersCount : "!" }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-semibold", children: "Advanced Filters" }),
+            /* @__PURE__ */ jsx("div", { className: "text-gray-300", children: hasCustomFilters ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              !isDefaultPercentile && `${state.percentile}% percentile`,
+              !isDefaultShift && ` \u2022 Shift ${state.shiftFilter === 0 ? "Day" : "Night"}`,
+              activeFiltersCount < 5 && ` \u2022 ${activeFiltersCount}/5 types`
+            ] }) : "Default settings" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-full right-4 w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-gray-900" })
+        ] })
+      ]
+    }
+  );
+};
 var getSeverityIcon = (severity) => {
   switch (severity) {
     case "high":
@@ -28708,6 +28105,10 @@ var FileManagerFilters = ({
   const [loadingCategories, setLoadingCategories] = useState(/* @__PURE__ */ new Set());
   const [categoryPages, setCategoryPages] = useState({});
   const [categoryHasMore, setCategoryHasMore] = useState({});
+  const { state: filterState, updatePercentile } = useClipFilter();
+  const [percentileCounts, setPercentileCounts] = useState({});
+  const [percentileClips, setPercentileClips] = useState({});
+  const [loadingPercentile, setLoadingPercentile] = useState(false);
   const fetchClipMetadata = useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for clip metadata fetch");
@@ -28720,7 +28121,7 @@ var FileManagerFilters = ({
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${await getAuthToken4()}`
+          "Authorization": `Bearer ${await getAuthToken3()}`
         },
         body: JSON.stringify({
           action: "clip-metadata",
@@ -28753,10 +28154,10 @@ var FileManagerFilters = ({
       });
     }
   }, [workspaceId, date, shift]);
-  const getAuthToken4 = async () => {
+  const getAuthToken3 = async () => {
     try {
-      const { createClient: createClient5 } = await import('@supabase/supabase-js');
-      const supabase = createClient5(
+      const { createClient: createClient4 } = await import('@supabase/supabase-js');
+      const supabase = createClient4(
         process.env.NEXT_PUBLIC_SUPABASE_URL || "",
         process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
       );
@@ -28767,6 +28168,91 @@ var FileManagerFilters = ({
       return null;
     }
   };
+  const fetchPercentileClips = useCallback(async (type) => {
+    if (!workspaceId || !date || shift === void 0) {
+      console.warn("[FileManager] Missing required params for percentile clips fetch");
+      return;
+    }
+    try {
+      const startDate = `${date}T00:00:00Z`;
+      const endDate = `${date}T23:59:59Z`;
+      const response = await fetch("/api/clips/supabase", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${await getAuthToken3()}`
+        },
+        body: JSON.stringify({
+          action: "percentile-clips",
+          workspaceId,
+          startDate,
+          endDate,
+          percentile: filterState.percentile,
+          shiftId: shift,
+          limit: 50,
+          // The actual percentile action (fast-cycles, slow-cycles, idle-times)
+          percentileAction: type
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+      const data = await response.json();
+      setPercentileClips((prev) => ({
+        ...prev,
+        [type]: data.clips || []
+      }));
+      setPercentileCounts((prev) => ({
+        ...prev,
+        [type]: data.total || 0
+      }));
+      console.log(`[FileManager] Loaded ${data.clips?.length || 0} ${type} clips (percentile: ${filterState.percentile}%)`);
+    } catch (error) {
+      console.error(`[FileManager] Error fetching ${type} clips:`, error);
+    }
+  }, [workspaceId, date, shift, filterState.percentile]);
+  useEffect(() => {
+    if (workspaceId && date && shift !== void 0) {
+      setLoadingPercentile(true);
+      Promise.all([
+        fetchPercentileClips("fast-cycles"),
+        fetchPercentileClips("slow-cycles")
+        // fetchPercentileClips('idle-times') // Temporarily commented out
+      ]).finally(() => {
+        setLoadingPercentile(false);
+      });
+    }
+  }, [fetchPercentileClips]);
+  const shouldShowCategory = useCallback((categoryId) => {
+    switch (categoryId) {
+      case "fast-cycles":
+        return filterState.showFastCycles;
+      case "slow-cycles":
+        return filterState.showSlowCycles;
+      case "longest-idles":
+        return false;
+      // filterState.showLongestIdles; // Temporarily disabled
+      case "cycle_completion":
+        return filterState.showCycleCompletion;
+      case "idle_time":
+        return filterState.showIdleTime;
+      case "sop_deviations":
+        return filterState.showSopDeviations;
+      default:
+        return true;
+    }
+  }, [filterState]);
+  const getPercentileIcon = useCallback((type, isExpanded, colorClasses) => {
+    const iconMap = {
+      "fast-cycles": { icon: TrendingUp, color: "text-green-600" },
+      "slow-cycles": { icon: TrendingDown, color: "text-red-600" },
+      "longest-idles": { icon: Clock, color: "text-orange-600" }
+    };
+    const config = iconMap[type];
+    if (!config) return null;
+    const IconComponent = config.icon;
+    return isExpanded ? /* @__PURE__ */ jsx(FolderOpen, { className: `h-4 w-4 ${config.color}` }) : /* @__PURE__ */ jsx(IconComponent, { className: `h-4 w-4 ${config.color}` });
+  }, []);
   const filterTree = useMemo(() => {
     const tree = [];
     categories.forEach((category) => {
@@ -28778,7 +28264,7 @@ var FileManagerFilters = ({
           (clip) => clip.description.toLowerCase().includes(searchTerm.toLowerCase()) || clip.clip_timestamp.includes(searchTerm) || clip.severity.toLowerCase().includes(searchTerm.toLowerCase())
         );
       }
-      if (categoryCount > 0) {
+      if (categoryCount > 0 && shouldShowCategory(category.id)) {
         const colorClasses = getColorClasses(category.color);
         const clipNodes = filteredClips.map((clip) => {
           const timeString = new Date(clip.clip_timestamp).toLocaleTimeString("en-US", {
@@ -28802,6 +28288,8 @@ var FileManagerFilters = ({
         tree.push({
           id: category.id,
           label: category.label,
+          subtitle: category.subtitle || category.description,
+          description: category.description,
           type: "category",
           count: categoryCount,
           // Use API count
@@ -28812,8 +28300,84 @@ var FileManagerFilters = ({
         });
       }
     });
+    const percentileCategories = [
+      {
+        id: "fast-cycles",
+        label: "Fast Cycles",
+        subtitle: `Top ${filterState.percentile}% fastest performance`,
+        description: `Top ${filterState.percentile}% fastest performance`,
+        type: "percentile-category",
+        count: percentileCounts["fast-cycles"] || 0,
+        icon: getPercentileIcon("fast-cycles", expandedNodes.has("fast-cycles"), { text: "text-green-600" }),
+        color: "green",
+        percentileType: "fast-cycles",
+        isPercentile: true,
+        children: (percentileClips["fast-cycles"] || []).map((clip, index) => ({
+          id: clip.id,
+          // Remove prefix to match currentVideoId
+          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
+          type: "video",
+          icon: getSeverityIcon(clip.severity),
+          timestamp: clip.creation_timestamp,
+          severity: clip.severity,
+          clipId: clip.id,
+          categoryId: "fast-cycles"
+        }))
+      },
+      {
+        id: "slow-cycles",
+        label: "Slow Cycles",
+        subtitle: `Top ${filterState.percentile}% slowest performance`,
+        description: `Top ${filterState.percentile}% slowest performance`,
+        type: "percentile-category",
+        count: percentileCounts["slow-cycles"] || 0,
+        icon: getPercentileIcon("slow-cycles", expandedNodes.has("slow-cycles"), { text: "text-red-600" }),
+        color: "red",
+        percentileType: "slow-cycles",
+        isPercentile: true,
+        children: (percentileClips["slow-cycles"] || []).map((clip, index) => ({
+          id: clip.id,
+          // Remove prefix to match currentVideoId
+          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
+          type: "video",
+          icon: getSeverityIcon(clip.severity),
+          timestamp: clip.creation_timestamp,
+          severity: clip.severity,
+          clipId: clip.id,
+          categoryId: "slow-cycles"
+        }))
+      }
+      // Temporarily commented out longest idle times
+      /* {
+        id: 'longest-idles',
+        label: 'Longest Idle Times',
+        subtitle: `Top ${filterState.percentile}% longest idle periods`,
+        description: `Top ${filterState.percentile}% longest idle periods`,
+        type: 'percentile-category' as const,
+        count: percentileCounts['idle-times'] || 0,
+        icon: getPercentileIcon('longest-idles', expandedNodes.has('longest-idles'), { text: 'text-orange-600' }),
+        color: 'orange',
+        percentileType: 'idle-times' as const,
+        isPercentile: true,
+        children: (percentileClips['idle-times'] || []).map((clip, index) => ({
+          id: clip.id, // Remove prefix to match currentVideoId
+          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ''}`,
+          type: 'video' as const,
+          icon: getSeverityIcon(clip.severity),
+          timestamp: clip.creation_timestamp,
+          severity: clip.severity,
+          clipId: clip.id,
+          categoryId: 'longest-idles'
+        }))
+      } */
+    ];
+    percentileCategories.forEach((category) => {
+      if (category.count > 0 && shouldShowCategory(category.id)) {
+        tree.unshift(category);
+      }
+    });
     return tree;
-  }, [categories, expandedNodes, searchTerm, counts, clipMetadata]);
+  }, [categories, expandedNodes, searchTerm, counts, clipMetadata, filterState.percentile, percentileCounts, percentileClips, shouldShowCategory, getPercentileIcon]);
   const toggleExpanded = (nodeId) => {
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(nodeId)) {
@@ -28829,7 +28393,7 @@ var FileManagerFilters = ({
     setExpandedNodes(newExpanded);
   };
   const handleNodeClick = (node) => {
-    if (node.type === "category") {
+    if (node.type === "category" || node.type === "percentile-category") {
       toggleExpanded(node.id);
       onFilterChange(node.id);
     } else if (node.type === "video") {
@@ -28848,7 +28412,7 @@ var FileManagerFilters = ({
     const isExpanded = expandedNodes.has(node.id);
     const isActive = activeFilter === node.id;
     const isCurrentVideo = currentVideoId === node.id;
-    const hasChildren = node.children && node.children.length > 0;
+    const hasChildren = (node.count || 0) > 0;
     const colorClasses = node.color ? getColorClasses(node.color) : null;
     return /* @__PURE__ */ jsxs("div", { className: "select-none animate-in", children: [
       /* @__PURE__ */ jsxs(
@@ -28865,25 +28429,26 @@ var FileManagerFilters = ({
                   e.stopPropagation();
                   toggleExpanded(node.id);
                 },
-                children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: `text-slate-600 group-hover:text-blue-600 transition-colors duration-200 ${node.type === "category" ? "h-4 w-4" : "h-3.5 w-3.5"}` }) : /* @__PURE__ */ jsx(ChevronRight, { className: `text-slate-600 group-hover:text-blue-600 transition-colors duration-200 ${node.type === "category" ? "h-4 w-4" : "h-3.5 w-3.5"}` })
+                children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: `text-slate-600 group-hover:text-blue-600 transition-colors duration-200 ${node.type === "category" || node.type === "percentile-category" ? "h-4 w-4" : "h-3.5 w-3.5"}` }) : /* @__PURE__ */ jsx(ChevronRight, { className: `text-slate-600 group-hover:text-blue-600 transition-colors duration-200 ${node.type === "category" || node.type === "percentile-category" ? "h-4 w-4" : "h-3.5 w-3.5"}` })
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 mr-3 ${node.type === "category" ? "p-2 rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-200" : "p-0.5"} ${colorClasses && node.type === "category" ? `${colorClasses.bg} border border-white/60` : ""}`, children: node.icon }),
+            /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 mr-3 ${node.type === "category" || node.type === "percentile-category" ? "p-2 rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-200" : "p-0.5"} ${colorClasses && (node.type === "category" || node.type === "percentile-category") ? `${colorClasses.bg} border border-white/60` : ""}`, children: node.icon }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("div", { className: `font-semibold tracking-tight ${node.type === "category" ? "text-slate-800 text-sm" : "text-slate-700 text-xs"} ${isCurrentVideo ? "text-emerald-700 font-bold" : ""} group-hover:text-slate-900 transition-colors duration-200`, children: node.label }),
+                /* @__PURE__ */ jsx("div", { className: `font-semibold tracking-tight ${node.type === "category" || node.type === "percentile-category" ? "text-slate-800 text-sm" : "text-slate-700 text-xs"} ${isCurrentVideo ? "text-emerald-700 font-bold" : ""} group-hover:text-slate-900 transition-colors duration-200`, children: node.label }),
                 node.type === "category" && categories.find((c) => c.id === node.id)?.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: categories.find((c) => c.id === node.id)?.description }),
+                node.type === "percentile-category" && node.subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: node.subtitle }),
                 node.type === "video" && node.severity && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${node.severity === "high" ? "bg-red-100 text-red-700" : node.severity === "medium" ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700"}`, children: [
                   node.severity,
                   " priority"
                 ] }) })
               ] }),
-              node.count !== void 0 && node.type === "category" && /* @__PURE__ */ jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsx("span", { className: `px-2.5 py-1 text-sm font-bold rounded-lg shadow-sm border backdrop-blur-sm flex-shrink-0 group-hover:scale-105 transition-all duration-200 ${colorClasses ? `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border} bg-opacity-80` : "bg-slate-100/80 text-slate-700 border-slate-200/60"}`, children: node.count }) })
+              node.count !== void 0 && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsx("span", { className: `px-2.5 py-1 text-sm font-bold rounded-lg shadow-sm border backdrop-blur-sm flex-shrink-0 group-hover:scale-105 transition-all duration-200 ${colorClasses ? `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border} bg-opacity-80` : "bg-slate-100/80 text-slate-700 border-slate-200/60"}`, children: node.count }) })
             ] })
           ]
         }
       ),
-      hasChildren && isExpanded && node.type === "category" && /* @__PURE__ */ jsx("div", { className: "mt-2 ml-3 animate-in border-l-2 border-slate-100 pl-3", children: /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto space-y-1 scrollbar-thin scrollbar-track-slate-100 scrollbar-thumb-slate-300", children: [
+      hasChildren && isExpanded && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsx("div", { className: "mt-2 ml-3 animate-in border-l-2 border-slate-100 pl-3", children: /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto space-y-1 scrollbar-thin scrollbar-track-slate-100 scrollbar-thumb-slate-300", children: [
         node.children.map((child) => renderNode(child, depth + 1)),
         loadingCategories.has(`${node.id}-${(categoryPages[node.id] || 0) + 1}`) && /* @__PURE__ */ jsx("div", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center text-sm text-slate-500", children: [
           /* @__PURE__ */ jsx("div", { className: "animate-spin mr-2 h-4 w-4 border-2 border-slate-300 border-t-blue-500 rounded-full" }),
@@ -28909,11 +28474,14 @@ var FileManagerFilters = ({
     ] }, node.id);
   };
   return /* @__PURE__ */ jsxs("div", { className: `bg-white rounded-2xl shadow-lg border border-gray-100 h-full hover:shadow-xl transition-all duration-300 ease-out backdrop-blur-sm ${className}`, children: [
-    /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-gray-50 bg-gradient-to-br from-slate-50/80 via-white to-blue-50/30", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "mr-3", children: /* @__PURE__ */ jsx(Folder, { className: "h-5 w-5 text-slate-700" }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-slate-900 tracking-tight", children: "Clips Explorer" }) })
+    /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-gray-50 bg-gradient-to-br from-slate-50/80 via-white to-blue-50/30", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "mr-3", children: /* @__PURE__ */ jsx(Folder, { className: "h-5 w-5 text-slate-700" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-slate-900 tracking-tight", children: "Clips Explorer" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(FilterDialogTrigger, {}) })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-slate-100/80", children: /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden px-4 py-3 border-b border-slate-100/80", children: /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx(Search, { className: "h-5 w-5 text-slate-400 group-focus-within:text-blue-500 transition-colors duration-200" }) }),
       /* @__PURE__ */ jsx(
         "input",
@@ -28927,7 +28495,7 @@ var FileManagerFilters = ({
       ),
       searchTerm && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-4 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-blue-500 rounded-full animate-pulse" }) })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 h-[calc(100%-14rem)] overflow-y-auto scrollbar-thin", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 h-[calc(100%-8rem)] overflow-y-auto scrollbar-thin", children: [
       /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filterTree.map((node) => renderNode(node)) }),
       filterTree.length === 0 && searchTerm && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsx(Search, { className: "h-12 w-12 mx-auto" }) }),
@@ -28959,6 +28527,301 @@ var FileManagerFilters = ({
     ] })
   ] });
 };
+var PERCENTILE_PRESETS = [5, 10, 15, 20, 25, 30];
+var AdvancedFilterDialog = ({
+  onApply
+}) => {
+  const {
+    state,
+    updatePercentile,
+    toggleClipType,
+    resetFilters,
+    toggleAdvancedPanel
+  } = useClipFilter();
+  const [customPercentile, setCustomPercentile] = useState(state.percentile.toString());
+  useEffect(() => {
+    setCustomPercentile(state.percentile.toString());
+  }, [state.percentile]);
+  const handlePercentileChange = (value) => {
+    updatePercentile(value);
+    setCustomPercentile(value.toString());
+  };
+  const handleCustomPercentileSubmit = () => {
+    const value = parseInt(customPercentile);
+    if (!isNaN(value) && value >= 1 && value <= 100) {
+      updatePercentile(value);
+    }
+  };
+  const handleClipTypeToggle = (clipType) => {
+    toggleClipType(clipType);
+  };
+  const handleApply = () => {
+    onApply?.();
+    toggleAdvancedPanel();
+  };
+  const handleReset = () => {
+    resetFilters();
+    setCustomPercentile("10");
+  };
+  if (!state.isAdvancedPanelOpen) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/30 backdrop-blur-sm z-50 transition-opacity duration-300",
+        onClick: toggleAdvancedPanel
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 w-full max-w-2xl max-h-[80vh] overflow-hidden transform transition-all duration-300 scale-100",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 px-6 py-4 border-b border-gray-100/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "p-2 bg-blue-100 rounded-xl", children: /* @__PURE__ */ jsx(Sliders, { className: "h-6 w-6 text-blue-600" }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Clip Filters" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Customize your clip exploration experience" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: toggleAdvancedPanel,
+                className: "p-2 hover:bg-white/50 rounded-xl transition-colors",
+                children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5 text-gray-500" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-8 overflow-y-auto max-h-[60vh]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "p-2 bg-gradient-to-r from-emerald-100 to-blue-100 rounded-lg", children: /* @__PURE__ */ jsx(Activity, { className: "h-5 w-5 text-emerald-600" }) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Performance Percentile" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Filter clips by performance ranking" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-r from-gray-50 to-blue-50 rounded-xl p-6 space-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700", children: "Percentile Range" }),
+                    /* @__PURE__ */ jsx("div", { className: "bg-white px-3 py-1.5 rounded-lg border border-blue-200", children: /* @__PURE__ */ jsxs("span", { className: "text-lg font-bold text-blue-600", children: [
+                      "Top ",
+                      state.percentile,
+                      "%"
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "range",
+                      min: "5",
+                      max: "50",
+                      step: "1",
+                      value: state.percentile,
+                      onChange: (e) => handlePercentileChange(parseInt(e.target.value)),
+                      className: "w-full h-3 bg-gradient-to-r from-green-200 via-yellow-200 to-red-200 rounded-lg appearance-none cursor-pointer",
+                      style: {
+                        background: `linear-gradient(to right, #86efac 0%, #fde047 50%, #fca5a5 100%)`
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-500", children: [
+                    /* @__PURE__ */ jsx("span", { children: "5% (Best)" }),
+                    /* @__PURE__ */ jsx("span", { children: "25% (Average)" }),
+                    /* @__PURE__ */ jsx("span", { children: "50% (Worst)" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700", children: "Quick Presets" }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: PERCENTILE_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => handlePercentileChange(preset),
+                      className: `px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${state.percentile === preset ? "bg-blue-600 text-white shadow-lg shadow-blue-200 scale-105" : "bg-white text-gray-700 border border-gray-200 hover:bg-blue-50 hover:border-blue-300"}`,
+                      children: [
+                        "Top ",
+                        preset,
+                        "%"
+                      ]
+                    },
+                    preset
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700", children: "Custom:" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "number",
+                        min: "1",
+                        max: "100",
+                        value: customPercentile,
+                        onChange: (e) => setCustomPercentile(e.target.value),
+                        onKeyPress: (e) => e.key === "Enter" && handleCustomPercentileSubmit(),
+                        className: "w-20 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                        placeholder: "10"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600", children: "%" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleCustomPercentileSubmit,
+                        className: "px-3 py-2 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors",
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "p-2 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg", children: /* @__PURE__ */ jsx(Layers, { className: "h-5 w-5 text-purple-600" }) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Clip Categories" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Choose which types of clips to display" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-green-50 to-red-50 rounded-xl p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsxs("h4", { className: "text-sm font-bold text-gray-700 uppercase tracking-wide flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 text-emerald-600" }),
+                    /* @__PURE__ */ jsx("span", { children: "Performance Extremes" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showFastCycles,
+                          onChange: () => handleClipTypeToggle("showFastCycles"),
+                          className: "w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-green-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-green-700", children: "Fast Cycles" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showSlowCycles,
+                          onChange: () => handleClipTypeToggle("showSlowCycles"),
+                          className: "w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(TrendingDown, { className: "h-4 w-4 text-red-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-red-700", children: "Slow Cycles" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showLongestIdles,
+                          onChange: () => handleClipTypeToggle("showLongestIdles"),
+                          className: "w-4 h-4 text-orange-600 border-gray-300 rounded focus:ring-orange-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-orange-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-orange-700", children: "Longest Idle Times" })
+                      ] })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsxs("h4", { className: "text-sm font-bold text-gray-700 uppercase tracking-wide flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-blue-600" }),
+                    /* @__PURE__ */ jsx("span", { children: "Standard Categories" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showCycleCompletion,
+                          onChange: () => handleClipTypeToggle("showCycleCompletion"),
+                          className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-blue-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-blue-700", children: "Cycle Completion" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showIdleTime,
+                          onChange: () => handleClipTypeToggle("showIdleTime"),
+                          className: "w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-purple-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-purple-700", children: "Idle Time" })
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-50/80 px-6 py-4 border-t border-gray-100/80", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleReset,
+                className: "flex items-center space-x-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx("span", { children: "Reset All Filters" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: toggleAdvancedPanel,
+                  className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleApply,
+                  className: "flex items-center space-x-2 px-6 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-200 transition-all duration-200",
+                  children: [
+                    /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsx("span", { children: "Apply Filters" })
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    ) })
+  ] });
+};
 function useClipsRealtimeUpdates({
   workspaceId,
   date,
@@ -29060,8 +28923,6 @@ function useClipsRealtimeUpdates({
     hasNewClips: newClipsNotification !== null && newClipsNotification.count > 0
   };
 }
-var USE_SUPABASE_CLIPS2 = true;
-var S3ClipsService3 = S3ClipsSupabaseService ;
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -29119,8 +28980,8 @@ var BottlenecksContent = ({
     workspaceId,
     date: date || getOperationalDate(),
     shiftId: effectiveShift,
-    enabled: USE_SUPABASE_CLIPS2,
-    // Only enable for Supabase implementation
+    enabled: true,
+    // Supabase implementation
     onNewClips: (notification) => {
       console.log(`[BottlenecksContent] New clips detected:`, notification);
       if (notification.clips.length > 0) {
@@ -29145,7 +29006,7 @@ var BottlenecksContent = ({
       console.warn("S3 configuration not found in dashboard config");
       return null;
     }
-    return new S3ClipsService3(dashboardConfig);
+    return new S3ClipsSupabaseService(dashboardConfig);
   }, [dashboardConfig]);
   const {
     clipTypes,
@@ -29166,8 +29027,7 @@ var BottlenecksContent = ({
     dynamicCounts,
     workspaceId,
     date: date || getOperationalDate(),
-    shift: shift || "0",
-    USE_SUPABASE_CLIPS: USE_SUPABASE_CLIPS2
+    shift: shift || "0"
   });
   useEffect(() => {
     if (clipTypes.length > 0 && !initialFilter) {
@@ -29275,12 +29135,8 @@ var BottlenecksContent = ({
             operationalDate,
             shiftStr,
             targetCategory,
-            0,
+            0
             // First video (index 0)
-            true,
-            // includeCycleTime
-            true
-            // includeMetadata
           );
           if (firstVideo && isMountedRef.current) {
             console.log(`[BottlenecksContent] Successfully loaded first video via index`);
@@ -29366,18 +29222,46 @@ var BottlenecksContent = ({
       }
     }
   }, [activeFilter, allVideos, mergedCounts]);
+  const isPercentileCategory = useCallback((categoryId) => {
+    return ["fast-cycles", "slow-cycles", "longest-idles"].includes(categoryId);
+  }, []);
+  const getClipTypesForPercentileCategory = useCallback((categoryId) => {
+    switch (categoryId) {
+      case "fast-cycles":
+      case "slow-cycles":
+        return ["cycle_completion"];
+      // Only cycle_completion now (best/worst/long moved to 'other')
+      case "longest-idles":
+        return ["idle_time"];
+      default:
+        return [categoryId];
+    }
+  }, []);
+  const getCategoryCount = useCallback((categoryId) => {
+    if (isPercentileCategory(categoryId)) {
+      if (isPercentileCategory(activeFilter) && activeFilter === categoryId) {
+        return allVideos.length;
+      }
+      return 0;
+    }
+    return mergedCounts[categoryId] || 0;
+  }, [isPercentileCategory, allVideos, mergedCounts, activeFilter]);
   const filteredVideos = useMemo(() => {
     if (!allVideos) return [];
     let filtered = [];
     if (activeFilter === "all") {
       filtered = [...allVideos];
+    } else if (isPercentileCategory(activeFilter)) {
+      const allowedTypes = getClipTypesForPercentileCategory(activeFilter);
+      filtered = allVideos.filter((video) => allowedTypes.includes(video.type));
+      console.log(`[BottlenecksContent] Filtering percentile category ${activeFilter}: found ${filtered.length} videos of types [${allowedTypes.join(", ")}]`);
     } else {
       filtered = allVideos.filter((video) => video.type === activeFilter);
     }
     return filtered.sort((a, b) => {
       return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
     });
-  }, [activeFilter, allVideos]);
+  }, [activeFilter, allVideos, isPercentileCategory, getClipTypesForPercentileCategory]);
   useEffect(() => {
     if (isNavigating && currentIndex < filteredVideos.length) {
       setIsNavigating(false);
@@ -29393,21 +29277,63 @@ var BottlenecksContent = ({
       updateActiveFilter(categoryId);
     }
     try {
-      const video = await s3ClipsService.getClipById(clipId);
-      if (video && isMountedRef.current) {
-        console.log(`[BottlenecksContent] Processing loaded video by ID: ${video.id}`);
-        setCurrentClipId(clipId);
-        setAllVideos([video]);
-        setCurrentIndex(0);
-        const counts = await s3ClipsService.getClipCounts(
-          workspaceId,
-          date || getOperationalDate(),
-          effectiveShift
+      if (isPercentileCategory(categoryId)) {
+        console.log(`[BottlenecksContent] Loading percentile category: ${categoryId}`);
+        const percentileType = categoryId === "fast-cycles" ? "fast-cycles" : categoryId === "slow-cycles" ? "slow-cycles" : "idle-times";
+        const { createClient: createClient4 } = await import('@supabase/supabase-js');
+        const supabase = createClient4(
+          process.env.NEXT_PUBLIC_SUPABASE_URL || "",
+          process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
         );
-        setCategoryPosition(1);
-        setIsNavigating(false);
-        console.log(`[BottlenecksContent] Successfully loaded clip by ID: ${video.id}`);
+        const { data: { session } } = await supabase.auth.getSession();
+        const authToken = session?.access_token;
+        if (!authToken) {
+          throw new Error("Authentication required");
+        }
+        const response = await fetch("/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${authToken}`
+          },
+          body: JSON.stringify({
+            action: "percentile-clips",
+            percentileAction: percentileType,
+            workspaceId,
+            startDate: `${date || getOperationalDate()}T00:00:00Z`,
+            endDate: `${date || getOperationalDate()}T23:59:59Z`,
+            percentile: 10,
+            shiftId: effectiveShift,
+            limit: 100
+          })
+        });
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || `API error: ${response.status}`);
+        }
+        const percentileData = await response.json();
+        if (percentileData.clips && percentileData.clips.length > 0 && isMountedRef.current) {
+          const clickedClipIndex = percentileData.clips.findIndex((clip) => clip.id === clipId);
+          if (clickedClipIndex !== -1) {
+            setCurrentClipId(clipId);
+            setAllVideos(percentileData.clips);
+            setCurrentIndex(clickedClipIndex);
+            setCategoryPosition(clickedClipIndex + 1);
+            console.log(`[BottlenecksContent] Loaded ${percentileData.clips.length} ${categoryId} clips, playing #${clickedClipIndex + 1}`);
+          }
+        }
+      } else {
+        const video = await s3ClipsService.getClipById(clipId);
+        if (video && isMountedRef.current) {
+          console.log(`[BottlenecksContent] Processing loaded video by ID: ${video.id}`);
+          setCurrentClipId(clipId);
+          setAllVideos([video]);
+          setCurrentIndex(0);
+          setCategoryPosition(1);
+          console.log(`[BottlenecksContent] Successfully loaded clip by ID: ${video.id}`);
+        }
       }
+      setIsNavigating(false);
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
       if (isMountedRef.current) {
@@ -29427,9 +29353,7 @@ var BottlenecksContent = ({
         operationalDate,
         shiftStr,
         categoryId,
-        clipIndex,
-        true,
-        true
+        clipIndex
       );
       if (video?.id) {
         await loadAndPlayClipById(video.id, categoryId);
@@ -29441,69 +29365,107 @@ var BottlenecksContent = ({
     }
   }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
   const handleNext = useCallback(async () => {
-    if (!isMountedRef.current || !currentClipId || !s3ClipsService) return;
+    if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    console.log(`[handleNext] Navigating from clip ID: ${currentClipId}`);
+    console.log(`[handleNext] Navigating in category: ${currentFilter}, current index: ${currentIndex}`);
     setIsNavigating(true);
     setError(null);
     try {
-      const neighbors = await s3ClipsService.getNeighboringClips(
-        workspaceId,
-        date || getOperationalDate(),
-        effectiveShift,
-        currentFilter,
-        currentClipId
-      );
-      if (neighbors.next) {
-        console.log(`[handleNext] Found next clip: ${neighbors.next.id}`);
-        setCurrentClipId(neighbors.next.id || null);
-        setAllVideos([neighbors.next]);
-        setCurrentIndex(0);
-        setCategoryPosition(categoryPosition + 1);
-        setIsNavigating(false);
-        videoRetryCountRef.current = 0;
+      if (isPercentileCategory(currentFilter)) {
+        if (currentIndex < allVideos.length - 1) {
+          const nextIndex = currentIndex + 1;
+          const nextVideo = allVideos[nextIndex];
+          console.log(`[handleNext] Moving to next percentile clip: ${nextVideo.id} (index ${nextIndex})`);
+          setCurrentClipId(nextVideo.id);
+          setCurrentIndex(nextIndex);
+          setCategoryPosition(nextIndex + 1);
+          setIsNavigating(false);
+        } else {
+          console.log(`[handleNext] Already at last clip in percentile category`);
+          setIsNavigating(false);
+        }
       } else {
-        console.log(`[handleNext] No next clip available`);
-        setIsNavigating(false);
+        if (!currentClipId || !s3ClipsService) {
+          setIsNavigating(false);
+          return;
+        }
+        const neighbors = await s3ClipsService.getNeighboringClips(
+          workspaceId,
+          date || getOperationalDate(),
+          effectiveShift,
+          currentFilter,
+          currentClipId
+        );
+        if (neighbors.next) {
+          console.log(`[handleNext] Found next clip: ${neighbors.next.id}`);
+          setCurrentClipId(neighbors.next.id || null);
+          setAllVideos([neighbors.next]);
+          setCurrentIndex(0);
+          setCategoryPosition(categoryPosition + 1);
+          setIsNavigating(false);
+          videoRetryCountRef.current = 0;
+        } else {
+          console.log(`[handleNext] No next clip available`);
+          setIsNavigating(false);
+        }
       }
     } catch (error2) {
-      console.error(`[handleNext] Error getting next clip:`, error2);
+      console.error(`[handleNext] Error navigating:`, error2);
       setError("Failed to navigate to next clip");
       setIsNavigating(false);
     }
-  }, [currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition]);
+  }, [currentIndex, allVideos, currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition, isPercentileCategory]);
   const handlePrevious = useCallback(async () => {
-    if (!isMountedRef.current || !currentClipId || !s3ClipsService) return;
+    if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    console.log(`[handlePrevious] Navigating from clip ID: ${currentClipId}`);
+    console.log(`[handlePrevious] Navigating in category: ${currentFilter}, current index: ${currentIndex}`);
     setIsNavigating(true);
     setError(null);
     try {
-      const neighbors = await s3ClipsService.getNeighboringClips(
-        workspaceId,
-        date || getOperationalDate(),
-        effectiveShift,
-        currentFilter,
-        currentClipId
-      );
-      if (neighbors.previous) {
-        console.log(`[handlePrevious] Found previous clip: ${neighbors.previous.id}`);
-        setCurrentClipId(neighbors.previous.id || null);
-        setAllVideos([neighbors.previous]);
-        setCurrentIndex(0);
-        setCategoryPosition(Math.max(1, categoryPosition - 1));
-        setIsNavigating(false);
-        videoRetryCountRef.current = 0;
+      if (isPercentileCategory(currentFilter)) {
+        if (currentIndex > 0) {
+          const prevIndex = currentIndex - 1;
+          const prevVideo = allVideos[prevIndex];
+          console.log(`[handlePrevious] Moving to previous percentile clip: ${prevVideo.id} (index ${prevIndex})`);
+          setCurrentClipId(prevVideo.id);
+          setCurrentIndex(prevIndex);
+          setCategoryPosition(prevIndex + 1);
+          setIsNavigating(false);
+        } else {
+          console.log(`[handlePrevious] Already at first clip in percentile category`);
+          setIsNavigating(false);
+        }
       } else {
-        console.log(`[handlePrevious] No previous clip available`);
-        setIsNavigating(false);
+        if (!currentClipId || !s3ClipsService) {
+          setIsNavigating(false);
+          return;
+        }
+        const neighbors = await s3ClipsService.getNeighboringClips(
+          workspaceId,
+          date || getOperationalDate(),
+          effectiveShift,
+          currentFilter,
+          currentClipId
+        );
+        if (neighbors.previous) {
+          console.log(`[handlePrevious] Found previous clip: ${neighbors.previous.id}`);
+          setCurrentClipId(neighbors.previous.id || null);
+          setAllVideos([neighbors.previous]);
+          setCurrentIndex(0);
+          setCategoryPosition(Math.max(1, categoryPosition - 1));
+          setIsNavigating(false);
+          videoRetryCountRef.current = 0;
+        } else {
+          console.log(`[handlePrevious] No previous clip available`);
+          setIsNavigating(false);
+        }
       }
     } catch (error2) {
-      console.error(`[handlePrevious] Error getting previous clip:`, error2);
+      console.error(`[handlePrevious] Error navigating:`, error2);
       setError("Failed to navigate to previous clip");
       setIsNavigating(false);
     }
-  }, [currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition]);
+  }, [currentIndex, allVideos, currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition, isPercentileCategory]);
   const currentVideo = useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -29617,24 +29579,36 @@ var BottlenecksContent = ({
   };
   const getClipTypeLabel = (video) => {
     if (!video) return "";
+    const currentFilter = activeFilterRef.current;
+    if (isPercentileCategory(currentFilter)) {
+      const percentileValue = video.percentile?.toFixed(1);
+      switch (currentFilter) {
+        case "fast-cycles":
+          return `\u26A1 Fast Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+        case "slow-cycles":
+          return `\u{1F40C} Slow Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+        case "longest-idles":
+          return `\u23F0 Long Idle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+        default:
+          return video.description || "Performance Clip";
+      }
+    }
     switch (video.type) {
       case "low_value":
         return "Idle Moment";
       case "missing_quality_check":
         return "SOP Deviation";
-      case "best_cycle_time":
-        return "Best Cycle Time";
-      case "worst_cycle_time":
-        return "Worst Cycle Time";
       case "cycle_completion":
         return "Cycle Completion";
+      case "idle_time":
+        return "Idle Time";
       case "running_cycle":
         return "Running Cycle";
       case "setup_state":
         return "Setup State";
       case "bottleneck":
       default:
-        return "";
+        return video.description || "";
     }
   };
   if (!dashboardConfig?.s3Config) {
@@ -29690,22 +29664,22 @@ var BottlenecksContent = ({
               "button",
               {
                 onClick: handlePrevious,
-                disabled: categoryPosition <= 1 || (mergedCounts[activeFilter] || 0) === 0,
-                className: `p-2 rounded-full transition-colors ${categoryPosition <= 1 || (mergedCounts[activeFilter] || 0) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
+                disabled: categoryPosition <= 1 || getCategoryCount(activeFilter) === 0,
+                className: `p-2 rounded-full transition-colors ${categoryPosition <= 1 || getCategoryCount(activeFilter) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
                 "aria-label": "Previous video",
                 children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: (mergedCounts[activeFilter] || 0) > 0 ? `${categoryPosition} / ${mergedCounts[activeFilter]}` : "0 / 0" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: getCategoryCount(activeFilter) > 0 ? `${categoryPosition} / ${getCategoryCount(activeFilter)}` : "0 / 0" }),
               error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-600 font-medium", children: error })
             ] }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: handleNext,
-                disabled: categoryPosition >= (mergedCounts[activeFilter] || 0) || (mergedCounts[activeFilter] || 0) === 0,
-                className: `p-2 rounded-full transition-colors ${categoryPosition >= (mergedCounts[activeFilter] || 0) || (mergedCounts[activeFilter] || 0) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
+                disabled: categoryPosition >= getCategoryCount(activeFilter) || getCategoryCount(activeFilter) === 0,
+                className: `p-2 rounded-full transition-colors ${categoryPosition >= getCategoryCount(activeFilter) || getCategoryCount(activeFilter) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
                 "aria-label": "Next video",
                 children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
               }
@@ -29776,9 +29750,9 @@ var BottlenecksContent = ({
                     }
                   )
                 ] }) }),
-                (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "low_value" ? /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" ? "bg-purple-400" : currentVideo.type === "best_cycle_time" ? "bg-green-600" : currentVideo.type === "worst_cycle_time" ? "bg-red-700" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-red-500"} mr-2 animate-pulse` }),
-                  (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-0.5 rounded", children: [
+                (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" || currentVideo.type === "idle_time" ? "bg-purple-400" : isPercentileCategory(activeFilterRef.current) ? activeFilterRef.current === "fast-cycles" ? "bg-green-600" : activeFilterRef.current === "slow-cycles" ? "bg-red-700" : "bg-orange-500" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-gray-500"} mr-2 animate-pulse` }),
+                  (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-0.5 rounded", children: [
                     "Cycle time: ",
                     currentVideo.cycle_time_seconds.toFixed(1),
                     "s"
@@ -29908,7 +29882,15 @@ var BottlenecksContent = ({
           className: "h-full"
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AdvancedFilterDialog,
+      {
+        onApply: () => {
+          console.log("[BottlenecksContent] Advanced filters applied, will refresh clips...");
+        }
+      }
+    )
   ] });
 };
 var getEfficiencyColor = (efficiency) => {
@@ -30011,7 +29993,7 @@ var arePropsEqual = (prevProps, nextProps) => {
   return prevProps.data.efficiency === nextProps.data.efficiency && prevProps.data.trend_score === nextProps.data.trend_score && prevProps.data.workspace_id === nextProps.data.workspace_id && prevProps.data.workspace_name === nextProps.data.workspace_name && prevProps.isBottleneck === nextProps.isBottleneck && prevProps.isLowEfficiency === nextProps.isLowEfficiency && prevProps.isVeryLowEfficiency === nextProps.isVeryLowEfficiency && // Position doesn't need deep equality check as it's generally static
   prevProps.position.id === nextProps.position.id;
 };
-var WorkspaceGridItem = React19__default.memo(({
+var WorkspaceGridItem = React20__default.memo(({
   data,
   position,
   isBottleneck = false,
@@ -30104,7 +30086,7 @@ var WorkspaceGridItem = React19__default.memo(({
   );
 }, arePropsEqual);
 WorkspaceGridItem.displayName = "WorkspaceGridItem";
-var WorkspaceGrid = React19__default.memo(({
+var WorkspaceGrid = React20__default.memo(({
   workspaces,
   isPdfMode = false,
   customWorkspacePositions,
@@ -30298,7 +30280,7 @@ var KPICard = ({
 }) => {
   useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  const trendInfo = React19__default.useMemo(() => {
+  const trendInfo = React20__default.useMemo(() => {
     let trendValue = trend || "neutral";
     if (change !== void 0 && trend === void 0) {
       trendValue = change > 0 ? "up" : change < 0 ? "down" : "neutral";
@@ -30321,7 +30303,7 @@ var KPICard = ({
     const shouldShowTrend = !(change === 0 && trend === void 0);
     return { trendValue, Icon: Icon2, colorClass, shouldShowTrend };
   }, [trend, change]);
-  const formattedValue = React19__default.useMemo(() => {
+  const formattedValue = React20__default.useMemo(() => {
     if (title === "Quality Compliance" && typeof value === "number") {
       return value.toFixed(1);
     }
@@ -30335,7 +30317,7 @@ var KPICard = ({
     }
     return value;
   }, [value, title]);
-  const formattedChange = React19__default.useMemo(() => {
+  const formattedChange = React20__default.useMemo(() => {
     if (change === void 0 || change === 0) return null;
     const absChange = Math.abs(change);
     return formatNumber(absChange, { minimumFractionDigits: 0, maximumFractionDigits: 1 });
@@ -31242,6 +31224,237 @@ var WorkspaceDisplayNameExample = () => {
     ] })
   ] });
 };
+var AdvancedFilterPanel = ({
+  className = "",
+  onApply
+}) => {
+  const {
+    state,
+    updatePercentile,
+    toggleClipType,
+    updateShiftFilter,
+    resetFilters,
+    toggleAdvancedPanel
+  } = useClipFilter();
+  const [customPercentile, setCustomPercentile] = useState(state.percentile.toString());
+  const handlePercentileChange = (value) => {
+    updatePercentile(value);
+    setCustomPercentile(value.toString());
+    onApply?.();
+  };
+  const handleShiftChange = (shiftId) => {
+    updateShiftFilter(shiftId);
+    onApply?.();
+  };
+  const handleClipTypeToggle = (clipType) => {
+    toggleClipType(clipType);
+    onApply?.();
+  };
+  const handleReset = () => {
+    resetFilters();
+    setCustomPercentile("10");
+    onApply?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `bg-white rounded-xl shadow-lg border border-gray-100 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50 cursor-pointer rounded-t-xl",
+        onClick: toggleAdvancedPanel,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ jsx(Sliders, { className: "h-5 w-5 text-blue-600" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Advanced Filters" })
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "p-1 hover:bg-white/50 rounded-lg transition-colors", children: state.isAdvancedPanelOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-5 w-5 text-gray-600" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-5 w-5 text-gray-600" }) })
+        ] })
+      }
+    ),
+    state.isAdvancedPanelOpen && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 text-blue-600" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700", children: "Percentile:" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: "5",
+              max: "30",
+              step: "5",
+              value: state.percentile,
+              onChange: (e) => handlePercentileChange(parseInt(e.target.value)),
+              className: "w-24 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-blue-600 min-w-[50px]", children: [
+            state.percentile,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [5, 10, 15, 20].map((preset) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handlePercentileChange(preset),
+            className: `px-2 py-1 text-xs font-medium rounded transition-colors ${state.percentile === preset ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+            children: [
+              preset,
+              "%"
+            ]
+          },
+          preset
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsx(Layers, { className: "h-4 w-4 text-purple-600" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700", children: "Types:" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showFastCycles,
+                  onChange: () => handleClipTypeToggle("showFastCycles"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "Fast" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showSlowCycles,
+                  onChange: () => handleClipTypeToggle("showSlowCycles"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "Slow" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showLongestIdles,
+                  onChange: () => handleClipTypeToggle("showLongestIdles"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "LongIdle" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showCycleCompletion,
+                  onChange: () => handleClipTypeToggle("showCycleCompletion"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "Completion" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showIdleTime,
+                  onChange: () => handleClipTypeToggle("showIdleTime"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "Idle" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 text-indigo-600" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700", children: "Shift:" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleShiftChange(void 0),
+                className: `px-2 py-1 text-xs font-medium rounded transition-colors ${state.shiftFilter === void 0 ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                children: "All"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleShiftChange(0),
+                className: `px-2 py-1 text-xs font-medium rounded transition-colors ${state.shiftFilter === 0 ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                children: "Day"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleShiftChange(1),
+                className: `px-2 py-1 text-xs font-medium rounded transition-colors ${state.shiftFilter === 1 ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                children: "Night"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between pt-2 border-t border-gray-100", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleReset,
+            className: "flex items-center space-x-1 px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { children: "Reset" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              onApply?.();
+              toggleAdvancedPanel();
+            },
+            className: "flex items-center space-x-1 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { children: "Apply & Close" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    !state.isAdvancedPanelOpen && /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4 text-sm", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
+        "Percentile: ",
+        /* @__PURE__ */ jsxs("span", { className: "font-semibold text-blue-600", children: [
+          state.percentile,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
+        "Shift: ",
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-indigo-600", children: state.shiftFilter === void 0 ? "All" : state.shiftFilter === 0 ? "Day" : "Night" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
+        "Categories: ",
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-purple-600", children: [
+          state.showFastCycles && "Fast",
+          state.showSlowCycles && "Slow",
+          state.showLongestIdles && "Idle",
+          state.showCycleCompletion && "Completion"
+        ].filter(Boolean).join(", ") || "None" })
+      ] })
+    ] }) }) })
+  ] });
+};
 var HamburgerButton = ({
   onClick,
   className = "",
@@ -31274,7 +31487,7 @@ var Breadcrumbs = ({ items }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React19__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React20__default.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-gray-400 dark:text-gray-500" }),
     /* @__PURE__ */ jsxs(
       "span",
@@ -33731,7 +33944,7 @@ var ThreadSidebar = ({
   ] });
 };
 var axelProfilePng = "/axel-profile.png";
-var ProfilePicture = React19__default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
+var ProfilePicture = React20__default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsx(
     "img",
     {
@@ -34622,7 +34835,7 @@ var AIAgentView = () => {
         barRadius: [4, 4, 0, 0]
         // Top corners rounded
       };
-      const CustomTooltip = ({ active, payload, label }) => {
+      const CustomTooltip2 = ({ active, payload, label }) => {
         if (active && payload && payload.length) {
           return /* @__PURE__ */ jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 mb-1", children: label }),
@@ -34722,7 +34935,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Bar,
               {
@@ -34766,7 +34979,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Line,
               {
@@ -34886,7 +35099,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -34946,7 +35159,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -35110,7 +35323,7 @@ var AIAgentView = () => {
               Tooltip,
               {
                 cursor: { strokeDasharray: "3 3" },
-                content: /* @__PURE__ */ jsx(CustomTooltip, {})
+                content: /* @__PURE__ */ jsx(CustomTooltip2, {})
               }
             ),
             /* @__PURE__ */ jsx(
@@ -35180,7 +35393,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -35254,7 +35467,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -36440,7 +36653,7 @@ function HomeView({
                 animate: { opacity: 1, scale: 1 },
                 transition: { duration: 0.3 },
                 className: "h-full",
-                children: React19__default.createElement(WorkspaceGrid, {
+                children: React20__default.createElement(WorkspaceGrid, {
                   workspaces: memoizedWorkspaceMetrics,
                   lineNames,
                   factoryView: factoryViewId,
@@ -36466,7 +36679,7 @@ function HomeView({
                 animate: { opacity: 1, scale: 1 },
                 transition: { duration: 0.3 },
                 className: "h-full",
-                children: React19__default.createElement(WorkspaceGrid, {
+                children: React20__default.createElement(WorkspaceGrid, {
                   workspaces: [],
                   // Show empty grid while loading
                   lineNames,
@@ -36493,7 +36706,7 @@ function HomeView({
     }
   );
 }
-var AuthenticatedHomeView = withAuth(React19__default.memo(HomeView));
+var AuthenticatedHomeView = withAuth(React20__default.memo(HomeView));
 var HomeView_default = HomeView;
 function withWorkspaceDisplayNames(Component3, options = {}) {
   const {
@@ -37611,7 +37824,7 @@ var KPIDetailViewWithDisplayNames = withSelectedLineDisplayNames(KPIDetailView);
 var KPIDetailView_default = KPIDetailViewWithDisplayNames;
 var LineCard = ({ line, onClick, supervisorEnabled = false }) => {
   const { kpis, isLoading, error } = useLineKPIs({ lineId: line.id });
-  const isOnTrack = React19__default.useMemo(() => {
+  const isOnTrack = React20__default.useMemo(() => {
     if (!kpis) return null;
     return kpis.efficiency.value > 90;
   }, [kpis]);
@@ -39414,7 +39627,7 @@ var ShiftsView = ({
     ] })
   ] });
 };
-var AuthenticatedShiftsView = withAuth(React19__default.memo(ShiftsView));
+var AuthenticatedShiftsView = withAuth(React20__default.memo(ShiftsView));
 var ShiftsView_default = ShiftsView;
 
 // src/lib/constants/actions.ts
@@ -41330,7 +41543,7 @@ var TargetsView = ({
 };
 var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
 var TargetsView_default = TargetsViewWithDisplayNames;
-var AuthenticatedTargetsView = withAuth(React19__default.memo(TargetsViewWithDisplayNames));
+var AuthenticatedTargetsView = withAuth(React20__default.memo(TargetsViewWithDisplayNames));
 
 // src/views/workspace-detail-view.utils.ts
 var formatISTDate2 = (date = /* @__PURE__ */ new Date(), options) => {
@@ -42219,7 +42432,7 @@ var WorkspaceDetailView = ({
                 }
               )
             ] }),
-            activeTab === "bottlenecks" && /* @__PURE__ */ jsx(
+            activeTab === "bottlenecks" && /* @__PURE__ */ jsx(ClipFilterProvider, { children: /* @__PURE__ */ jsx(
               BottlenecksContent,
               {
                 workspaceId,
@@ -42228,7 +42441,7 @@ var WorkspaceDetailView = ({
                 shift,
                 className: "h-[calc(100vh-10rem)]"
               }
-            )
+            ) })
           ] })
         ] }),
         /* @__PURE__ */ jsx(
@@ -43304,4 +43517,175 @@ var streamProxyConfig = {
   }
 };
 
-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, CroppedVideoPlayer, 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, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, 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, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, 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, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, 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, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipTypes, useClipTypesWithCounts, 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, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, workspaceHealthService, workspaceService };
+// src/lib/api/s3-clips-parser.ts
+function parseS3Uri(s3Uri, sopCategories) {
+  const path = new URL(s3Uri).pathname;
+  const parts = path.split("/").filter((p) => p);
+  if (s3Uri.includes("missed_qchecks")) {
+    console.warn(`Skipping missed_qchecks URI in parseS3Uri: ${s3Uri}`);
+    return null;
+  }
+  if (parts.length < 8) {
+    console.warn(`Invalid S3 path structure: ${s3Uri} - Too few parts: ${parts.length}, expected at least 8`);
+    return null;
+  }
+  try {
+    const datePart = parts[2];
+    const shiftPart = parts[3];
+    const violationType = parts[4];
+    let folderName = "";
+    let timestamp = "";
+    for (let i = 5; i < parts.length; i++) {
+      const part = parts[i];
+      if (part && part.includes("_") && /\d{8}_\d{6}/.test(part)) {
+        folderName = part;
+        const timeMatch = folderName.match(/_(\d{8})_(\d{6})_/);
+        if (timeMatch) {
+          timestamp = `${timeMatch[2].substring(0, 2)}:${timeMatch[2].substring(2, 4)}:${timeMatch[2].substring(4, 6)}`;
+          break;
+        }
+      }
+    }
+    if (!timestamp) {
+      console.warn(`Couldn't extract timestamp from any part: ${parts.join("/")}`);
+      timestamp = "00:00:00";
+    }
+    let severity = "low";
+    let type = "bottleneck";
+    let description = "Analysis Clip";
+    const normalizedViolationType = violationType.toLowerCase().trim();
+    if (sopCategories && sopCategories.length > 0) {
+      const matchedCategory = sopCategories.find((category) => {
+        const categoryId = category.id.toLowerCase();
+        const s3FolderName = (category.s3FolderName || category.id).toLowerCase();
+        return categoryId === normalizedViolationType || s3FolderName === normalizedViolationType || // Also check for partial matches for flexibility
+        normalizedViolationType.includes(categoryId) || normalizedViolationType.includes(s3FolderName);
+      });
+      if (matchedCategory) {
+        type = matchedCategory.id;
+        description = matchedCategory.description || matchedCategory.label;
+        if (matchedCategory.color.includes("red")) {
+          severity = "high";
+        } else if (matchedCategory.color.includes("yellow") || matchedCategory.color.includes("orange")) {
+          severity = "medium";
+        } else {
+          severity = "low";
+        }
+        console.log(`Matched SOP category: ${matchedCategory.id} for violation type: ${violationType}`);
+        return { timestamp, severity, description, type, originalUri: s3Uri };
+      }
+    }
+    switch (normalizedViolationType) {
+      case "idle_time":
+      case "idle":
+      case "low_value":
+      case "low value":
+      case "low_value_moment":
+      case "low_value_moments":
+      case "low value moment":
+      case "low value moments":
+        type = "low_value";
+        severity = "low";
+        description = "Idle Time Detected";
+        break;
+      case "sop_deviation":
+        type = "missing_quality_check";
+        severity = "high";
+        description = "SOP Deviations";
+        break;
+      case "long_cycle_time":
+        severity = "high";
+        type = "long_cycle_time";
+        description = "Long Cycle Time Detected";
+        break;
+      case "best_cycle_time":
+        type = "best_cycle_time";
+        severity = "low";
+        description = "Best Cycle Time Performance";
+        break;
+      case "worst_cycle_time":
+        type = "worst_cycle_time";
+        severity = "high";
+        description = "Worst Cycle Time Performance";
+        break;
+      case "cycle_completion":
+      case "completed_cycles":
+      case "completed_cycle":
+        type = "cycle_completion";
+        severity = "low";
+        description = "Cycle Completion";
+        break;
+      case "running_cycle":
+      case "active_cycle":
+      case "production_cycle":
+        type = "running_cycle";
+        severity = "low";
+        description = "Active Production Cycle";
+        break;
+      case "setup_state":
+      case "machine_setup":
+      case "line_setup":
+        type = "setup_state";
+        severity = "medium";
+        description = "Machine Setup Activity";
+        break;
+      case "medium_bottleneck":
+        severity = "medium";
+        description = "Medium Bottleneck Identified";
+        break;
+      case "minor_bottleneck":
+      case "mild_bottleneck":
+        severity = "low";
+        description = "Minor Bottleneck Identified";
+        break;
+      default:
+        if (normalizedViolationType.includes("sop") && normalizedViolationType.includes("deviation")) {
+          type = "missing_quality_check";
+          severity = "high";
+          description = "SOP Deviations";
+        } else if (normalizedViolationType.includes("worst") && normalizedViolationType.includes("cycle")) {
+          type = "worst_cycle_time";
+          severity = "high";
+          description = "Worst Cycle Time Performance";
+        } else if (normalizedViolationType.includes("best") && normalizedViolationType.includes("cycle")) {
+          type = "best_cycle_time";
+          severity = "low";
+          description = "Best Cycle Time Performance";
+        } else if (normalizedViolationType.includes("long") && normalizedViolationType.includes("cycle")) {
+          type = "long_cycle_time";
+          severity = "high";
+          description = "Long Cycle Time Detected";
+        } else if (normalizedViolationType.includes("cycle") && (normalizedViolationType.includes("completion") || normalizedViolationType.includes("complete"))) {
+          type = "cycle_completion";
+          severity = "low";
+          description = "Cycle Completion";
+        } else if (normalizedViolationType.includes("running") && normalizedViolationType.includes("cycle")) {
+          type = "running_cycle";
+          severity = "low";
+          description = "Active Production Cycle";
+        } else if (normalizedViolationType.includes("setup") || normalizedViolationType.includes("machine") && normalizedViolationType.includes("setup")) {
+          type = "setup_state";
+          severity = "medium";
+          description = "Machine Setup Activity";
+        } else {
+          description = `Clip type: ${violationType.replace(/_/g, " ")}`;
+          console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
+        }
+        break;
+    }
+    return { timestamp, severity, description, type, originalUri: s3Uri };
+  } catch (error) {
+    console.error(`Error parsing S3 URI: ${s3Uri}`, error);
+    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;
+}
+
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AdvancedFilterDialog, AdvancedFilterPanel, 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, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedVideoPlayer, 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, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, 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, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, 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, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, 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, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, workspaceHealthService, workspaceService };