@optifye/dashboard-core 6.12.51 → 6.12.52

package/dist/index.mjs

@@ -10,7 +10,7 @@ import { EventEmitter } from 'events';
 import { createClient, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js';
 import Hls, { Events, ErrorTypes } from 'hls.js';
 import useSWR from 'swr';
-import { Camera, AlertTriangle, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, RefreshCw, ArrowUpDown, X, Coffee, Plus, Filter, ArrowUp, ArrowDown, ArrowRight, HelpCircle, ClipboardX, Activity, Wrench, UserX, Clock, Package, Monitor, CheckCircle2, ArrowLeft, Calendar, Save, AlertCircle, Loader2, Minus, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, XCircle, Palette, LockKeyhole, TrendingDown, FolderOpen, Folder, ArrowDownWideNarrow, Tag, Sliders, Layers, Search, Edit2, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Video, Copy, Lightbulb, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, Pencil, UserCheck, LogOut, Film, MessageSquare, Menu, Send, Settings, LifeBuoy, EyeOff, Zap, ExternalLink, Flame, Crown, Medal } from 'lucide-react';
+import { Camera, AlertTriangle, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, RefreshCw, ArrowUpDown, X, Coffee, Plus, Filter, ArrowUp, ArrowDown, ArrowRight, HelpCircle, ClipboardX, Activity, Wrench, UserX, Clock, Package, Monitor, CheckCircle2, ArrowLeft, Calendar, Save, AlertCircle, Loader2, Minus, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, Palette, LockKeyhole, XCircle, Search, Edit2, TrendingDown, FolderOpen, Folder, ArrowDownWideNarrow, Tag, Sliders, Layers, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Video, Copy, Lightbulb, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, Pencil, UserCheck, LogOut, Film, MessageSquare, Menu, Send, Settings, LifeBuoy, EyeOff, Zap, ExternalLink, Flame, Crown, Medal } from 'lucide-react';
 import { memo, noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, ReferenceLine, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, Customized, Cell, PieChart, Pie, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
@@ -6038,7 +6038,8 @@ var getAuthToken2 = async () => {
 var workspaceService = {
   // Cache for workspace display names to avoid repeated API calls
   _workspaceDisplayNamesCache: /* @__PURE__ */ new Map(),
-  _cacheTimestamp: 0,
+  _workspaceDisplayNamesInFlight: /* @__PURE__ */ new Map(),
+  _workspaceDisplayNamesByLineInFlight: /* @__PURE__ */ new Map(),
   _cacheExpiryMs: 5 * 60 * 1e3,
   // 5 minutes cache
   // Cache for workspace lists to avoid repeated API calls (line configuration changes infrequently)
@@ -6297,12 +6298,74 @@ var workspaceService = {
    * Returns a map of workspace_id -> display_name
    */
   async getWorkspaceDisplayNames(companyId, lineId) {
-    try {
+    const cacheKey = `${companyId || "all"}::${lineId || "all"}`;
+    const existingInFlight = this._workspaceDisplayNamesInFlight.get(cacheKey);
+    if (existingInFlight) {
+      return existingInFlight;
+    }
+    const fetchPromise = (async () => {
+      try {
+        const token = await getAuthToken2();
+        const apiUrl = getBackendUrl2();
+        const params = new URLSearchParams();
+        if (companyId) params.append("company_id", companyId);
+        if (lineId) params.append("line_id", lineId);
+        const response = await fetch(`${apiUrl}/api/workspaces/display-names?${params.toString()}`, {
+          headers: {
+            "Authorization": `Bearer ${token}`,
+            "Content-Type": "application/json"
+          }
+        });
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(`Backend API error (${response.status}): ${errorText}`);
+        }
+        const data = await response.json();
+        const displayNamesMap = /* @__PURE__ */ new Map();
+        if (data.display_names) {
+          Object.entries(data.display_names).forEach(([key, value]) => {
+            displayNamesMap.set(key, value);
+          });
+        }
+        this._workspaceDisplayNamesCache.set(cacheKey, {
+          displayNames: displayNamesMap,
+          timestamp: Date.now()
+        });
+        return displayNamesMap;
+      } catch (error) {
+        console.error("Error fetching workspace display names:", error);
+        addSentryBreadcrumb("Workspace display-name fallback failed", {
+          surface: "workspace_display_names",
+          route: "/api/workspaces/display-names",
+          severity: "warning",
+          extras: {
+            company_id: companyId || null,
+            line_id: lineId || null,
+            pathname: typeof window !== "undefined" ? window.location.pathname : "unknown",
+            error_message: error instanceof Error ? error.message : String(error)
+          }
+        });
+        throw error;
+      } finally {
+        this._workspaceDisplayNamesInFlight.delete(cacheKey);
+      }
+    })();
+    this._workspaceDisplayNamesInFlight.set(cacheKey, fetchPromise);
+    return fetchPromise;
+  },
+  async getWorkspaceDisplayNamesByLine(companyId, lineIds) {
+    const normalizedLineIds = Array.from(new Set((lineIds || []).filter(Boolean))).sort();
+    const cacheKey = `${companyId || "all"}::byLine::${normalizedLineIds.join(",") || "all"}`;
+    const existingInFlight = this._workspaceDisplayNamesByLineInFlight.get(cacheKey);
+    if (existingInFlight) {
+      return existingInFlight;
+    }
+    const fetchPromise = (async () => {
       const token = await getAuthToken2();
       const apiUrl = getBackendUrl2();
       const params = new URLSearchParams();
       if (companyId) params.append("company_id", companyId);
-      if (lineId) params.append("line_id", lineId);
+      if (normalizedLineIds.length > 0) params.append("line_ids", normalizedLineIds.join(","));
       const response = await fetch(`${apiUrl}/api/workspaces/display-names?${params.toString()}`, {
         headers: {
           "Authorization": `Bearer ${token}`,
@@ -6314,39 +6377,32 @@ var workspaceService = {
         throw new Error(`Backend API error (${response.status}): ${errorText}`);
       }
       const data = await response.json();
-      const displayNamesMap = /* @__PURE__ */ new Map();
-      if (data.display_names) {
-        Object.entries(data.display_names).forEach(([key, value]) => {
-          displayNamesMap.set(key, value);
+      const source = data.display_names_by_line || {};
+      const byLine = /* @__PURE__ */ new Map();
+      Object.entries(source).forEach(([lineId, displayNames]) => {
+        if (normalizedLineIds.length > 0 && !normalizedLineIds.includes(lineId)) return;
+        const lineMap = /* @__PURE__ */ new Map();
+        Object.entries(displayNames).forEach(([workspaceId, displayName]) => {
+          lineMap.set(workspaceId, displayName);
         });
-      }
-      this._workspaceDisplayNamesCache = displayNamesMap;
-      this._cacheTimestamp = Date.now();
-      return displayNamesMap;
-    } catch (error) {
-      console.error("Error fetching workspace display names:", error);
-      addSentryBreadcrumb("Workspace display-name fallback failed", {
-        surface: "workspace_display_names",
-        route: "/api/workspaces/display-names",
-        severity: "warning",
-        extras: {
-          company_id: companyId || null,
-          line_id: lineId || null,
-          pathname: typeof window !== "undefined" ? window.location.pathname : "unknown",
-          error_message: error instanceof Error ? error.message : String(error)
-        }
+        byLine.set(lineId, lineMap);
       });
-      throw error;
-    }
+      return byLine;
+    })().finally(() => {
+      this._workspaceDisplayNamesByLineInFlight.delete(cacheKey);
+    });
+    this._workspaceDisplayNamesByLineInFlight.set(cacheKey, fetchPromise);
+    return fetchPromise;
   },
   /**
    * Gets cached workspace display names (with cache expiry)
    */
   async getCachedWorkspaceDisplayNames(companyId, lineId) {
     const now4 = Date.now();
-    const cacheAge = now4 - this._cacheTimestamp;
-    if (cacheAge < this._cacheExpiryMs && this._workspaceDisplayNamesCache.size > 0) {
-      return this._workspaceDisplayNamesCache;
+    const cacheKey = `${companyId || "all"}::${lineId || "all"}`;
+    const cached = this._workspaceDisplayNamesCache.get(cacheKey);
+    if (cached && now4 - cached.timestamp < this._cacheExpiryMs && cached.displayNames.size > 0) {
+      return cached.displayNames;
     }
     return this.getWorkspaceDisplayNames(companyId, lineId);
   },
@@ -6367,7 +6423,8 @@ var workspaceService = {
    */
   clearWorkspaceDisplayNamesCache() {
     this._workspaceDisplayNamesCache.clear();
-    this._cacheTimestamp = 0;
+    this._workspaceDisplayNamesInFlight.clear();
+    this._workspaceDisplayNamesByLineInFlight.clear();
   },
   clearWorkspacesCache() {
     this._workspacesCache.clear();
@@ -6873,10 +6930,16 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
   hasBackendUrl() {
     return Boolean(process.env.NEXT_PUBLIC_BACKEND_URL);
   }
+  isCanonicalDate(value) {
+    return typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value);
+  }
   async fetchBackendWorkspaceUptimeSummaries(companyId, lineIds, date, shiftId, timezone) {
     if (!this.hasBackendUrl()) {
       return null;
     }
+    if (!this.isCanonicalDate(date)) {
+      return null;
+    }
     const supabase = _getSupabaseInstance();
     if (!supabase) throw new Error("Supabase client not initialized");
     const params = new URLSearchParams({
@@ -6926,6 +6989,9 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     if (!this.hasBackendUrl()) {
       return null;
     }
+    if (!this.isCanonicalDate(date)) {
+      return null;
+    }
     const supabase = _getSupabaseInstance();
     if (!supabase) throw new Error("Supabase client not initialized");
     const params = new URLSearchParams({
@@ -7660,6 +7726,24 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const currentTiming = this.getShiftTiming(timezone, shiftConfig);
     const queryDate = overrideDate ?? currentTiming.date;
     const queryShiftId = overrideShiftId ?? currentTiming.shiftId;
+    if (!this.isCanonicalDate(queryDate)) {
+      return {
+        shiftId: queryShiftId,
+        shiftLabel: currentTiming.shiftLabel,
+        shiftStart: formatInTimeZone(currentTiming.shiftStartDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+        shiftEnd: formatInTimeZone(currentTiming.shiftEndDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+        totalMinutes: currentTiming.totalMinutes,
+        completedMinutes: currentTiming.completedMinutes,
+        uptimeMinutes: 0,
+        downtimeMinutes: 0,
+        pendingMinutes: currentTiming.pendingMinutes,
+        uptimePercentage: 0,
+        hasData: false,
+        generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        points: [],
+        downtimeSegments: []
+      };
+    }
     if (lineId) {
       const backendTimeline = await this.fetchBackendWorkspaceUptimeTimeline(
         workspaceId,
@@ -7882,6 +7966,9 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const defaultTimezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
     const shiftConfig = passedShiftConfig || dashboardConfig?.shiftConfig;
     const effectiveTimezone = timezone || shiftConfig?.timezone || defaultTimezone;
+    if (overrideDate !== void 0 && !this.isCanonicalDate(overrideDate)) {
+      return /* @__PURE__ */ new Map();
+    }
     if (lineShiftConfigs && lineShiftConfigs.size > 0) {
       return this.calculateWorkspaceUptimeMultiLine(
         companyId,
@@ -11974,85 +12061,290 @@ function formatReasonLabel(reason) {
   return reason.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
 
+// src/lib/services/sessionActivityAccumulator.ts
+var TRACKED_ACTIVITY_EVENTS = ["mousemove", "pointermove", "keydown", "click", "scroll", "wheel", "touchstart"];
+function createSessionData(sessionId, userId, companyId, now4, isVisible, isFocused) {
+  return {
+    sessionId,
+    userId,
+    companyId,
+    startedAt: now4,
+    lastTick: now4,
+    cumulativeTotalMs: 0,
+    cumulativeActiveMs: 0,
+    cumulativePassiveMs: 0,
+    lastActivityAt: null,
+    isUserActive: false,
+    isVisible,
+    isFocused,
+    state: "ACTIVE",
+    currentSegment: null,
+    pendingSegments: [],
+    segmentCounter: 0
+  };
+}
+var SessionActivityAccumulator = class {
+  constructor(idleThresholdMs, getDashboardView) {
+    this.idleThresholdMs = idleThresholdMs;
+    this.getDashboardView = getDashboardView;
+  }
+  shouldTrackTime(session) {
+    if (!session) return false;
+    return session.state === "ACTIVE" && session.isVisible && session.isFocused;
+  }
+  getActivityState(session, now4) {
+    if (!session.lastActivityAt) {
+      return "passive";
+    }
+    const timeSinceActivity = now4.getTime() - session.lastActivityAt.getTime();
+    return timeSinceActivity <= this.idleThresholdMs ? "active" : "passive";
+  }
+  updateTimes(session, now4 = /* @__PURE__ */ new Date()) {
+    if (!session || session.state === "ENDED") return;
+    const elapsed = now4.getTime() - session.lastTick.getTime();
+    if (elapsed <= 0) return;
+    if (!this.shouldTrackTime(session)) {
+      this.flushCurrentSegment(session, now4);
+      session.lastTick = now4;
+      return;
+    }
+    let cursor = new Date(session.lastTick);
+    const idleCutoff = session.lastActivityAt ? new Date(session.lastActivityAt.getTime() + this.idleThresholdMs) : null;
+    if (idleCutoff && cursor < idleCutoff && now4 > idleCutoff) {
+      this.addTrackedDuration(session, "active", cursor, idleCutoff);
+      cursor = idleCutoff;
+    }
+    this.addTrackedDuration(session, this.getActivityState(session, now4), cursor, now4);
+    session.lastTick = now4;
+  }
+  flushCurrentSegment(session, endAt) {
+    if (!session?.currentSegment) return;
+    const current = session.currentSegment;
+    const currentEndMs = new Date(current.segment_end_at).getTime();
+    if (endAt.getTime() > currentEndMs) {
+      current.duration_ms += endAt.getTime() - currentEndMs;
+      current.segment_end_at = endAt.toISOString();
+    }
+    if (current.duration_ms > 0) {
+      session.pendingSegments.push(current);
+    }
+    session.currentSegment = null;
+  }
+  addTrackedDuration(session, state, start, end) {
+    const durationMs = end.getTime() - start.getTime();
+    if (durationMs <= 0) return;
+    session.cumulativeTotalMs += durationMs;
+    if (state === "active") {
+      session.cumulativeActiveMs += durationMs;
+      session.isUserActive = true;
+    } else {
+      session.cumulativePassiveMs += durationMs;
+      session.isUserActive = false;
+    }
+    this.addSegmentDuration(session, state, start, end);
+  }
+  addSegmentDuration(session, state, start, end) {
+    const durationMs = end.getTime() - start.getTime();
+    if (durationMs <= 0) return;
+    const dashboardView = this.getDashboardView();
+    const current = session.currentSegment;
+    if (current && current.state === state && current.dashboard_view === dashboardView && current.segment_end_at === start.toISOString()) {
+      current.segment_end_at = end.toISOString();
+      current.duration_ms += durationMs;
+      return;
+    }
+    this.flushCurrentSegment(session, start);
+    session.segmentCounter += 1;
+    session.currentSegment = {
+      client_segment_id: `${session.sessionId}_seg_${session.segmentCounter}`,
+      segment_start_at: start.toISOString(),
+      segment_end_at: end.toISOString(),
+      state,
+      duration_ms: durationMs,
+      dashboard_view: dashboardView,
+      tracker_version: 2
+    };
+  }
+};
+
+// src/lib/services/sessionTrackerTransport.ts
+var SessionTrackerTransport = class {
+  constructor(config, trackerVersion, maxSegmentsPerRequest) {
+    this.config = config;
+    this.trackerVersion = trackerVersion;
+    this.maxSegmentsPerRequest = maxSegmentsPerRequest;
+  }
+  async sendStartSession(session) {
+    const token = await this.config.getAccessToken();
+    if (!token) {
+      console.warn("[SessionTracker] No access token, skipping start session API call");
+      return;
+    }
+    await fetch(`${this.config.apiBaseUrl}/api/sessions/start`, {
+      method: "POST",
+      headers: this.authHeaders(token),
+      body: JSON.stringify({
+        session_id: session.sessionId,
+        user_agent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+        dashboard_view: this.getDashboardView(),
+        tracker_version: this.trackerVersion
+      })
+    });
+  }
+  async sendHeartbeat(session) {
+    const token = await this.config.getAccessToken();
+    if (!token) return null;
+    const segmentsToSend = session.pendingSegments.slice(0, this.maxSegmentsPerRequest);
+    const sentSegmentIds = new Set(segmentsToSend.map((segment) => segment.client_segment_id));
+    const response = await fetch(`${this.config.apiBaseUrl}/api/sessions/heartbeat`, {
+      method: "POST",
+      headers: this.authHeaders(token),
+      body: JSON.stringify({
+        session_id: session.sessionId,
+        cumulative_total_ms: session.cumulativeTotalMs,
+        cumulative_active_ms: session.cumulativeActiveMs,
+        cumulative_passive_ms: session.cumulativePassiveMs,
+        visibility_state: typeof document !== "undefined" ? document.visibilityState : "visible",
+        is_user_active: session.isUserActive,
+        dashboard_view: this.getDashboardView(),
+        tracker_version: this.trackerVersion,
+        activity_segments: segmentsToSend
+      })
+    });
+    const payload = await response.json().catch(() => ({}));
+    return {
+      ok: response.ok,
+      acknowledged: payload?.acknowledged === false ? false : payload?.acknowledged === true ? true : null,
+      sentSegmentIds
+    };
+  }
+  async sendEndSession(session, reason, keepalive) {
+    const token = keepalive && this.config.getCachedAccessToken ? this.config.getCachedAccessToken() : await this.config.getAccessToken();
+    if (!token) {
+      console.warn("[SessionTracker] No access token, skipping end session API call");
+      return false;
+    }
+    const response = await fetch(`${this.config.apiBaseUrl}/api/sessions/end`, {
+      method: "POST",
+      keepalive,
+      headers: this.authHeaders(token),
+      body: JSON.stringify({
+        session_id: session.sessionId,
+        end_reason: reason,
+        final_total_ms: session.cumulativeTotalMs,
+        final_active_ms: session.cumulativeActiveMs,
+        final_passive_ms: session.cumulativePassiveMs,
+        tracker_version: this.trackerVersion,
+        activity_segments: session.pendingSegments.slice(0, this.maxSegmentsPerRequest)
+      })
+    });
+    return response.ok;
+  }
+  authHeaders(token) {
+    return {
+      "Content-Type": "application/json",
+      "Authorization": `Bearer ${token}`
+    };
+  }
+  getDashboardView() {
+    return typeof window !== "undefined" ? window.location.pathname : void 0;
+  }
+};
+
 // src/lib/services/sessionTracker.ts
 function generateSessionId() {
   return `sess_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
 }
+function isDebugEnabled() {
+  return typeof process !== "undefined" && process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
+}
+function debugLog(message, data) {
+  if (isDebugEnabled()) {
+    console.log(`[SessionTracker] ${message}`, data || {});
+  }
+}
 var SessionTracker = class {
   constructor(config) {
     this.session = null;
     this.heartbeatInterval = null;
-    this.graceTimeout = null;
     this.tickInterval = null;
-    // Constants
+    this.heartbeatInFlight = false;
+    this.pendingForcedHeartbeat = false;
+    this.TRACKER_VERSION = 2;
     this.HEARTBEAT_INTERVAL_MS = 3e4;
-    // 30 seconds
-    this.HIDDEN_GRACE_PERIOD_MS = 3e5;
-    // 5 minutes
     this.IDLE_THRESHOLD_MS = 3e4;
-    // 30 seconds without activity = passive
     this.TICK_INTERVAL_MS = 1e3;
+    this.MAX_SEGMENTS_PER_REQUEST = 200;
     this.config = config;
+    this.activityAccumulator = new SessionActivityAccumulator(
+      this.IDLE_THRESHOLD_MS,
+      () => this.getDashboardView()
+    );
+    this.transport = new SessionTrackerTransport(
+      this.config,
+      this.TRACKER_VERSION,
+      this.MAX_SEGMENTS_PER_REQUEST
+    );
     this.boundHandleActivity = this.handleUserActivity.bind(this);
     this.boundHandleVisibility = this.handleVisibilityChange.bind(this);
     this.boundHandleBeforeUnload = this.handleBeforeUnload.bind(this);
+    this.boundHandlePageHide = this.handlePageHide.bind(this);
+    this.boundHandlePageShow = this.handlePageShow.bind(this);
     this.boundHandleFocus = this.handleWindowFocus.bind(this);
     this.boundHandleBlur = this.handleWindowBlur.bind(this);
   }
-  /**
-   * Start a new session
-   */
   async startSession(userId, companyId) {
     if (this.session && this.session.state !== "ENDED") {
-      console.log("[SessionTracker] Session already active, ignoring start");
+      debugLog("Session already active, ignoring start", { sessionId: this.session.sessionId });
       return;
     }
     const sessionId = generateSessionId();
     const now4 = /* @__PURE__ */ new Date();
-    this.session = {
+    this.session = createSessionData(
       sessionId,
       userId,
       companyId,
-      startedAt: now4,
-      lastTick: now4,
-      cumulativeTotalMs: 0,
-      cumulativeActiveMs: 0,
-      cumulativePassiveMs: 0,
-      lastActivityAt: now4,
-      isUserActive: true,
-      isVisible: typeof document !== "undefined" ? document.visibilityState === "visible" : true,
-      isFocused: typeof document !== "undefined" && typeof document.hasFocus === "function" ? document.hasFocus() : true,
-      state: "ACTIVE",
-      hiddenSince: null
-    };
+      now4,
+      this.getDocumentVisibility(),
+      this.getWindowFocus()
+    );
+    await this.sendStartSession();
+    if (!this.session || this.session.sessionId !== sessionId) {
+      return;
+    }
+    if (this.session.state === "ENDED") {
+      await this.sendEndSession(this.session.endReason || "navigation");
+      debugLog("Session start completed after local end", { sessionId });
+      return;
+    }
+    const trackingStart = /* @__PURE__ */ new Date();
+    this.session.lastTick = trackingStart;
+    this.session.isVisible = this.getDocumentVisibility();
+    this.session.isFocused = this.getWindowFocus();
     this.setupActivityListeners();
     this.setupVisibilityListener();
     this.setupFocusListeners();
-    this.setupBeforeUnloadListener();
+    this.setupPageLifecycleListeners();
     this.startTimeTick();
     this.startHeartbeat();
-    await this.sendStartSession();
     this.config.onSessionStart?.(sessionId);
-    console.log("[SessionTracker] Session started:", sessionId);
+    debugLog("Session started", { sessionId });
   }
-  /**
-   * End the current session
-   */
   async endSession(reason) {
     if (!this.session || this.session.state === "ENDED") {
       return;
     }
     const sessionId = this.session.sessionId;
     this.updateTimes();
+    this.flushCurrentSegment(/* @__PURE__ */ new Date());
+    this.session.endReason = reason;
+    await this.drainPendingSegmentsBeforeEnd();
     this.session.state = "ENDED";
     this.cleanup();
     await this.sendEndSession(reason);
     this.config.onSessionEnd?.(sessionId, reason);
-    console.log("[SessionTracker] Session ended:", sessionId, "reason:", reason);
+    debugLog("Session ended", { sessionId, reason });
   }
-  /**
-   * Get current session stats (for debugging/display)
-   */
   getSessionStats() {
     if (!this.session) return null;
     return {
@@ -12061,11 +12353,9 @@ var SessionTracker = class {
       passiveMs: this.session.cumulativePassiveMs
     };
   }
-  // ===== Private Methods =====
   setupActivityListeners() {
     if (typeof window === "undefined") return;
-    const events = ["mousemove", "keydown", "click", "scroll", "touchstart"];
-    events.forEach((event) => {
+    TRACKED_ACTIVITY_EVENTS.forEach((event) => {
       window.addEventListener(event, this.boundHandleActivity, { passive: true });
     });
   }
@@ -12078,71 +12368,100 @@ var SessionTracker = class {
     window.addEventListener("focus", this.boundHandleFocus);
     window.addEventListener("blur", this.boundHandleBlur);
   }
-  setupBeforeUnloadListener() {
+  setupPageLifecycleListeners() {
     if (typeof window === "undefined") return;
     window.addEventListener("beforeunload", this.boundHandleBeforeUnload);
+    window.addEventListener("pagehide", this.boundHandlePageHide);
+    window.addEventListener("pageshow", this.boundHandlePageShow);
   }
-  handleUserActivity() {
+  handleUserActivity(event) {
     if (!this.session || this.session.state === "ENDED") return;
+    if ("isTrusted" in event && event.isTrusted === false) return;
+    this.updateTimes();
     this.session.lastActivityAt = /* @__PURE__ */ new Date();
     this.session.isUserActive = true;
   }
   handleVisibilityChange() {
     if (!this.session || this.session.state === "ENDED") return;
+    const now4 = /* @__PURE__ */ new Date();
+    this.updateTimes(now4);
     if (document.visibilityState === "hidden") {
-      this.session.hiddenSince = /* @__PURE__ */ new Date();
-      this.session.state = "BACKGROUND_GRACE";
+      this.flushCurrentSegment(now4);
       this.session.isVisible = false;
       this.session.isFocused = false;
-      this.session.lastTick = /* @__PURE__ */ new Date();
-      this.graceTimeout = setTimeout(() => {
-        this.endSession("hidden_timeout");
-      }, this.HIDDEN_GRACE_PERIOD_MS);
-      console.log("[SessionTracker] Tab hidden, starting grace period");
-    } else {
-      if (this.graceTimeout) {
-        clearTimeout(this.graceTimeout);
-        this.graceTimeout = null;
-      }
-      this.session.hiddenSince = null;
-      this.session.state = "ACTIVE";
-      this.session.isVisible = true;
-      this.session.isFocused = typeof document !== "undefined" && typeof document.hasFocus === "function" ? document.hasFocus() : true;
-      this.session.lastActivityAt = /* @__PURE__ */ new Date();
-      this.session.isUserActive = true;
-      this.session.lastTick = /* @__PURE__ */ new Date();
-      console.log("[SessionTracker] Tab visible again");
+      this.session.isUserActive = false;
+      this.session.lastActivityAt = null;
+      this.session.lastTick = now4;
+      void this.sendHeartbeat(true);
+      debugLog("Tab hidden");
+      return;
     }
+    this.session.isVisible = true;
+    this.session.isFocused = this.getWindowFocus();
+    this.session.isUserActive = false;
+    this.session.lastActivityAt = null;
+    this.session.lastTick = now4;
+    void this.sendHeartbeat(true);
+    debugLog("Tab visible");
   }
   handleWindowFocus() {
     if (!this.session || this.session.state === "ENDED") return;
+    const now4 = /* @__PURE__ */ new Date();
+    this.updateTimes(now4);
     this.session.isFocused = true;
-    this.session.lastActivityAt = /* @__PURE__ */ new Date();
-    this.session.isUserActive = true;
-    this.session.lastTick = /* @__PURE__ */ new Date();
+    this.session.isUserActive = false;
+    this.session.lastActivityAt = null;
+    this.session.lastTick = now4;
+    void this.sendHeartbeat(true);
   }
   handleWindowBlur() {
     if (!this.session || this.session.state === "ENDED") return;
+    const now4 = /* @__PURE__ */ new Date();
+    this.updateTimes(now4);
+    this.flushCurrentSegment(now4);
     this.session.isFocused = false;
-    this.session.lastTick = /* @__PURE__ */ new Date();
+    this.session.isUserActive = false;
+    this.session.lastActivityAt = null;
+    this.session.lastTick = now4;
+    void this.sendHeartbeat(true);
   }
-  handleBeforeUnload(_e) {
-    if (this.session && this.session.state !== "ENDED") {
-      this.updateTimes();
-      const data = {
-        session_id: this.session.sessionId,
-        end_reason: "tab_close",
-        final_total_ms: this.session.cumulativeTotalMs,
-        final_active_ms: this.session.cumulativeActiveMs,
-        final_passive_ms: this.session.cumulativePassiveMs
-      };
-      if (navigator.sendBeacon) {
-        const blob = new Blob([JSON.stringify(data)], { type: "application/json" });
-        navigator.sendBeacon(`${this.config.apiBaseUrl}/api/sessions/end`, blob);
-      }
-      this.session.state = "ENDED";
-      this.cleanup();
+  handleBeforeUnload() {
+    this.finalizeWithKeepalive("tab_close");
+  }
+  handlePageHide(event) {
+    if (event.persisted) {
+      if (!this.session || this.session.state === "ENDED") return;
+      const now4 = /* @__PURE__ */ new Date();
+      this.updateTimes(now4);
+      this.flushCurrentSegment(now4);
+      this.session.isVisible = false;
+      this.session.isFocused = false;
+      this.session.isUserActive = false;
+      this.session.lastActivityAt = null;
+      this.session.lastTick = now4;
+      void this.sendHeartbeat(true);
+      return;
     }
+    this.finalizeWithKeepalive("pagehide");
+  }
+  handlePageShow(event) {
+    if (!event.persisted || !this.session || this.session.state === "ENDED") return;
+    const now4 = /* @__PURE__ */ new Date();
+    this.session.isVisible = this.getDocumentVisibility();
+    this.session.isFocused = this.getWindowFocus();
+    this.session.isUserActive = false;
+    this.session.lastActivityAt = null;
+    this.session.lastTick = now4;
+    void this.sendHeartbeat(true);
+  }
+  finalizeWithKeepalive(reason) {
+    if (!this.session || this.session.state === "ENDED") return;
+    this.updateTimes();
+    this.flushCurrentSegment(/* @__PURE__ */ new Date());
+    this.session.endReason = reason;
+    this.session.state = "ENDED";
+    void this.sendEndSession(reason, true);
+    this.cleanup();
   }
   startTimeTick() {
     this.tickInterval = setInterval(() => {
@@ -12150,30 +12469,17 @@ var SessionTracker = class {
     }, this.TICK_INTERVAL_MS);
   }
   shouldTrackTime() {
-    if (!this.session) return false;
-    const stateAllowsTracking = this.session.state === "ACTIVE" || this.session.state === "BACKGROUND_GRACE";
-    return stateAllowsTracking && this.session.isVisible && this.session.isFocused;
+    return this.activityAccumulator.shouldTrackTime(this.session);
   }
-  updateTimes() {
-    if (!this.session || this.session.state === "ENDED") return;
-    const now4 = /* @__PURE__ */ new Date();
-    const elapsed = now4.getTime() - this.session.lastTick.getTime();
-    if (!this.shouldTrackTime()) {
-      this.session.lastTick = now4;
-      return;
-    }
-    if (this.session.state === "ACTIVE" || this.session.state === "BACKGROUND_GRACE") {
-      this.session.cumulativeTotalMs += elapsed;
-      const timeSinceActivity = now4.getTime() - this.session.lastActivityAt.getTime();
-      if (timeSinceActivity < this.IDLE_THRESHOLD_MS) {
-        this.session.cumulativeActiveMs += elapsed;
-        this.session.isUserActive = true;
-      } else {
-        this.session.cumulativePassiveMs += elapsed;
-        this.session.isUserActive = false;
-      }
-    }
-    this.session.lastTick = now4;
+  getActivityState(now4) {
+    if (!this.session) return "passive";
+    return this.activityAccumulator.getActivityState(this.session, now4);
+  }
+  updateTimes(now4 = /* @__PURE__ */ new Date()) {
+    this.activityAccumulator.updateTimes(this.session, now4);
+  }
+  flushCurrentSegment(endAt) {
+    this.activityAccumulator.flushCurrentSegment(this.session, endAt);
   }
   startHeartbeat() {
     this.heartbeatInterval = setInterval(async () => {
@@ -12183,75 +12489,70 @@ var SessionTracker = class {
   async sendStartSession() {
     if (!this.session) return;
     try {
-      const token = await this.config.getAccessToken();
-      if (!token) {
-        console.warn("[SessionTracker] No access token, skipping start session API call");
-        return;
-      }
-      await fetch(`${this.config.apiBaseUrl}/api/sessions/start`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${token}`
-        },
-        body: JSON.stringify({
-          session_id: this.session.sessionId,
-          user_agent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-          dashboard_view: typeof window !== "undefined" ? window.location.pathname : void 0
-        })
-      });
+      await this.transport.sendStartSession(this.session);
     } catch (error) {
       console.error("[SessionTracker] Failed to send start session:", error);
     }
   }
-  async sendHeartbeat() {
+  async sendHeartbeat(force = false, allowReplacement = true) {
+    if (this.heartbeatInFlight) {
+      this.pendingForcedHeartbeat || (this.pendingForcedHeartbeat = force);
+      return;
+    }
     if (!this.session || this.session.state === "ENDED") return;
+    this.heartbeatInFlight = true;
     try {
-      const token = await this.config.getAccessToken();
-      if (!token) return;
-      await fetch(`${this.config.apiBaseUrl}/api/sessions/heartbeat`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${token}`
-        },
-        body: JSON.stringify({
-          session_id: this.session.sessionId,
-          cumulative_total_ms: this.session.cumulativeTotalMs,
-          cumulative_active_ms: this.session.cumulativeActiveMs,
-          cumulative_passive_ms: this.session.cumulativePassiveMs,
-          visibility_state: typeof document !== "undefined" ? document.visibilityState : "visible",
-          is_user_active: this.session.isUserActive,
-          dashboard_view: typeof window !== "undefined" ? window.location.pathname : void 0
-        })
-      });
+      this.updateTimes();
+      this.flushCurrentSegment(/* @__PURE__ */ new Date());
+      if (!force && !this.shouldTrackTime()) return;
+      const result = await this.transport.sendHeartbeat(this.session);
+      if (!result) return;
+      if (result.ok && result.acknowledged !== false) {
+        debugLog("Heartbeat acknowledged", { segments: result.sentSegmentIds.size });
+        this.session.pendingSegments = this.session.pendingSegments.filter(
+          (segment) => !result.sentSegmentIds.has(segment.client_segment_id)
+        );
+      } else if (result.ok && result.acknowledged === false && allowReplacement && this.shouldTrackTime()) {
+        const { userId, companyId, sessionId } = this.session;
+        this.session.state = "ENDED";
+        this.cleanup();
+        debugLog("Heartbeat not acknowledged, starting replacement session", { sessionId });
+        await this.startSession(userId, companyId);
+      }
     } catch (error) {
       console.error("[SessionTracker] Failed to send heartbeat:", error);
+    } finally {
+      this.heartbeatInFlight = false;
+      if (this.pendingForcedHeartbeat && this.session?.state !== "ENDED") {
+        this.pendingForcedHeartbeat = false;
+        void this.sendHeartbeat(true);
+      }
     }
   }
-  async sendEndSession(reason) {
+  async drainPendingSegmentsBeforeEnd() {
+    if (!this.session) return;
+    let guard = 0;
+    while (this.session.state !== "ENDED" && this.session.pendingSegments.length > this.MAX_SEGMENTS_PER_REQUEST && guard < 20) {
+      const pendingBefore = this.session.pendingSegments.length;
+      await this.sendHeartbeat(true, false);
+      if (!this.session || this.session.pendingSegments.length >= pendingBefore) {
+        break;
+      }
+      guard += 1;
+    }
+  }
+  async sendEndSession(reason, keepalive = false) {
     if (!this.session) return;
     try {
-      const token = await this.config.getAccessToken();
-      if (!token) {
-        console.warn("[SessionTracker] No access token, skipping end session API call");
-        return;
+      const ok = await this.transport.sendEndSession(this.session, reason, keepalive);
+      if (ok) {
+        this.session.pendingSegments = this.session.pendingSegments.slice(this.MAX_SEGMENTS_PER_REQUEST);
       }
-      await fetch(`${this.config.apiBaseUrl}/api/sessions/end`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "Authorization": `Bearer ${token}`
-        },
-        body: JSON.stringify({
-          session_id: this.session.sessionId,
-          end_reason: reason,
-          final_total_ms: this.session.cumulativeTotalMs,
-          final_active_ms: this.session.cumulativeActiveMs,
-          final_passive_ms: this.session.cumulativePassiveMs
-        })
-      });
     } catch (error) {
+      if (keepalive) {
+        debugLog("Keepalive end session failed after page lifecycle transition", { reason });
+        return;
+      }
       console.error("[SessionTracker] Failed to send end session:", error);
     }
   }
@@ -12264,23 +12565,29 @@ var SessionTracker = class {
       clearInterval(this.tickInterval);
       this.tickInterval = null;
     }
-    if (this.graceTimeout) {
-      clearTimeout(this.graceTimeout);
-      this.graceTimeout = null;
-    }
     if (typeof window !== "undefined") {
-      const events = ["mousemove", "keydown", "click", "scroll", "touchstart"];
-      events.forEach((event) => {
+      TRACKED_ACTIVITY_EVENTS.forEach((event) => {
         window.removeEventListener(event, this.boundHandleActivity);
       });
       window.removeEventListener("focus", this.boundHandleFocus);
       window.removeEventListener("blur", this.boundHandleBlur);
       window.removeEventListener("beforeunload", this.boundHandleBeforeUnload);
+      window.removeEventListener("pagehide", this.boundHandlePageHide);
+      window.removeEventListener("pageshow", this.boundHandlePageShow);
     }
     if (typeof document !== "undefined") {
       document.removeEventListener("visibilitychange", this.boundHandleVisibility);
     }
   }
+  getDashboardView() {
+    return typeof window !== "undefined" ? window.location.pathname : void 0;
+  }
+  getDocumentVisibility() {
+    return typeof document !== "undefined" ? document.visibilityState === "visible" : true;
+  }
+  getWindowFocus() {
+    return typeof document !== "undefined" && typeof document.hasFocus === "function" ? document.hasFocus() : true;
+  }
 };
 function createSessionTracker(config) {
   return new SessionTracker(config);
@@ -13286,15 +13593,43 @@ function useSessionTracking(options = {}) {
   const trackerRef = useRef(null);
   const isTrackingRef = useRef(false);
   const initRef = useRef(false);
-  const getAccessToken2 = useCallback(async () => {
-    return session?.access_token || null;
+  const accessTokenRef = useRef(null);
+  const isAuthenticatedRef = useRef(isAuthenticated);
+  const onSessionStartRef = useRef(onSessionStart);
+  const onSessionEndRef = useRef(onSessionEnd);
+  const apiBaseUrl2 = config?.apiBaseUrl || process.env.NEXT_PUBLIC_API_BASE_URL || "";
+  isAuthenticatedRef.current = isAuthenticated;
+  useEffect(() => {
+    if (session?.access_token) {
+      accessTokenRef.current = session.access_token;
+    }
   }, [session?.access_token]);
+  useEffect(() => {
+    onSessionStartRef.current = onSessionStart;
+  }, [onSessionStart]);
+  useEffect(() => {
+    onSessionEndRef.current = onSessionEnd;
+  }, [onSessionEnd]);
+  const getAccessToken2 = useCallback(async () => {
+    return accessTokenRef.current;
+  }, []);
+  const endCurrentTracker = useCallback((reason) => {
+    const tracker = trackerRef.current;
+    if (!tracker) return null;
+    const tokenForEndingSession = accessTokenRef.current;
+    trackerRef.current = null;
+    isTrackingRef.current = false;
+    return tracker.endSession(reason).finally(() => {
+      if (reason === "logout" && !isAuthenticatedRef.current && accessTokenRef.current === tokenForEndingSession) {
+        accessTokenRef.current = null;
+      }
+    });
+  }, []);
   useEffect(() => {
     if (!enabled || !isAuthenticated || !user || !session || initRef.current) {
       return;
     }
     initRef.current = true;
-    const apiBaseUrl2 = config?.apiBaseUrl || process.env.NEXT_PUBLIC_API_BASE_URL || "";
     if (!apiBaseUrl2) {
       console.warn("[useSessionTracking] No API base URL configured, session tracking disabled");
       return;
@@ -13302,41 +13637,34 @@ function useSessionTracking(options = {}) {
     const tracker = createSessionTracker({
       apiBaseUrl: apiBaseUrl2,
       getAccessToken: getAccessToken2,
+      getCachedAccessToken: () => accessTokenRef.current,
       onSessionStart: (sessionId) => {
         isTrackingRef.current = true;
-        onSessionStart?.(sessionId);
+        onSessionStartRef.current?.(sessionId);
       },
       onSessionEnd: (sessionId, reason) => {
         isTrackingRef.current = false;
-        onSessionEnd?.(sessionId, reason);
+        onSessionEndRef.current?.(sessionId, reason);
       }
     });
     trackerRef.current = tracker;
     const companyId = user?.company_id || user?.properties?.company_id || null;
     tracker.startSession(user.id, companyId);
     return () => {
-      if (trackerRef.current) {
-        trackerRef.current.endSession("navigation");
-        trackerRef.current = null;
-      }
+      const reason = isAuthenticatedRef.current ? "navigation" : "logout";
+      void endCurrentTracker(reason);
       initRef.current = false;
       isTrackingRef.current = false;
     };
-  }, [enabled, isAuthenticated, user?.id, session?.access_token, config?.apiBaseUrl, getAccessToken2, onSessionStart, onSessionEnd, user]);
+  }, [enabled, isAuthenticated, user?.id, apiBaseUrl2, getAccessToken2, endCurrentTracker]);
   useEffect(() => {
     if (!isAuthenticated && trackerRef.current && isTrackingRef.current) {
-      trackerRef.current.endSession("logout");
-      trackerRef.current = null;
-      isTrackingRef.current = false;
+      void endCurrentTracker("logout");
     }
-  }, [isAuthenticated]);
+  }, [isAuthenticated, endCurrentTracker]);
   const endSession = useCallback(async (reason) => {
-    if (trackerRef.current) {
-      await trackerRef.current.endSession(reason);
-      trackerRef.current = null;
-      isTrackingRef.current = false;
-    }
-  }, []);
+    await endCurrentTracker(reason);
+  }, [endCurrentTracker]);
   const sessionStats = trackerRef.current?.getSessionStats() || null;
   return {
     sessionStats,
@@ -17435,7 +17763,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     return Number.isFinite(parsed) ? parsed : DEFAULT_MAX_MANIFEST_AGE_MS;
   })();
   const manifestStaleThresholdMs = maxManifestAgeMs > 0 ? Math.min(maxManifestAgeMs, SEGMENT_MAX_AGE_MS) : SEGMENT_MAX_AGE_MS;
-  const debugLog = (...args) => {
+  const debugLog2 = (...args) => {
     if (debugEnabled) {
       console.log(...args);
     }
@@ -17617,7 +17945,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
         return;
       }
     } catch (error) {
-      debugLog("[HLS] Stale manifest poll failed", error);
+      debugLog2("[HLS] Stale manifest poll failed", error);
     }
     staleManifestPollDelayRef.current = Math.min(
       staleManifestPollDelayRef.current + 5e3,
@@ -17967,7 +18295,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
       }
       return true;
     } catch (error) {
-      debugLog("[HLS] Manifest freshness check failed", error);
+      debugLog2("[HLS] Manifest freshness check failed", error);
       {
         markStaleStream("manifest freshness check failed");
         return false;
@@ -18013,7 +18341,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
   };
   const softRestart = (reason) => {
     if (staleManifestTriggeredRef.current) {
-      debugLog("[HLS] Skip soft restart while manifest is stale", reason);
+      debugLog2("[HLS] Skip soft restart while manifest is stale", reason);
       return;
     }
     console.warn(`[HLS] Soft restart: ${reason}`);
@@ -18046,7 +18374,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
   };
   const hardRestart = (reason) => {
     if (staleManifestTriggeredRef.current) {
-      debugLog("[HLS] Skip hard restart while manifest is stale", reason);
+      debugLog2("[HLS] Skip hard restart while manifest is stale", reason);
       return;
     }
     console.warn(`[HLS] Hard restart: ${reason}`);
@@ -18300,7 +18628,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
         hls.loadSource(resolvedHlsSrc);
         activeStreamUrlRef.current = resolvedHlsSrc;
         hls.on(Hls.Events.ERROR, (_, data) => {
-          debugLog("[HLS] Error", {
+          debugLog2("[HLS] Error", {
             type: data.type,
             details: data.details,
             fatal: data.fatal,
@@ -18308,7 +18636,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
             frag: data.frag?.sn
           });
           if (data.type === Hls.ErrorTypes.MEDIA_ERROR && data.details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
-            debugLog("[HLS] Buffer stalled, waiting for next segment");
+            debugLog2("[HLS] Buffer stalled, waiting for next segment");
             attemptPlay();
             return;
           }
@@ -18452,7 +18780,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
               }
             }
           }
-          debugLog("[HLS] Level loaded", {
+          debugLog2("[HLS] Level loaded", {
             targetduration: details.targetduration,
             edge: details.edge,
             fragments: data.details?.fragments?.length
@@ -18848,6 +19176,7 @@ var isInitializing = false;
 var initializedWithLineIds = [];
 var missingLineContextWarnings = /* @__PURE__ */ new Set();
 var lineLoadPromises = /* @__PURE__ */ new Map();
+var GLOBAL_CACHE_KEY = "global";
 var initializationPromise = null;
 var workspaceDisplayNamesListeners = /* @__PURE__ */ new Set();
 var notifyWorkspaceDisplayNamesListeners = (changedLineId) => {
@@ -18869,6 +19198,22 @@ var storeLineDisplayNames = (lineId, lineDisplayNamesMap) => {
     runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
   });
 };
+var storeGlobalDisplayNames = (displayNamesMap) => {
+  runtimeWorkspaceDisplayNames[GLOBAL_CACHE_KEY] = {};
+  displayNamesMap.forEach((displayName, workspaceId) => {
+    runtimeWorkspaceDisplayNames[GLOBAL_CACHE_KEY][workspaceId] = displayName;
+  });
+};
+var storeDisplayNamesByLine = (displayNamesByLine, requestedLineIds = []) => {
+  displayNamesByLine.forEach((lineDisplayNamesMap, lineId) => {
+    storeLineDisplayNames(lineId, lineDisplayNamesMap);
+  });
+  requestedLineIds.forEach((lineId) => {
+    if (!runtimeWorkspaceDisplayNames[lineId]) {
+      runtimeWorkspaceDisplayNames[lineId] = {};
+    }
+  });
+};
 var ensureLineWorkspaceDisplayNamesLoaded = async (lineId) => {
   if (!lineId || runtimeWorkspaceDisplayNames[lineId]) {
     return;
@@ -18952,7 +19297,11 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
       console.log("\u{1F504} Target line IDs for workspace filtering:", targetLineIds);
       runtimeWorkspaceDisplayNames = {};
       lineLoadPromises.clear();
-      if (targetLineIds.length > 0) {
+      if (targetLineIds.length > 1) {
+        const displayNamesByLine = await workspaceService.getWorkspaceDisplayNamesByLine(void 0, targetLineIds);
+        storeDisplayNamesByLine(displayNamesByLine, targetLineIds);
+        console.log(`\u2705 Stored display names for ${displayNamesByLine.size} authorized lines`);
+      } else if (targetLineIds.length === 1) {
         const results = await Promise.all(
           targetLineIds.map(async (lineId) => {
             console.log(`\u{1F504} Fetching workspaces for line: ${lineId}`);
@@ -18967,10 +19316,7 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
       } else {
         console.warn("\u26A0\uFE0F No line IDs found, fetching all workspaces (less efficient)");
         const allWorkspacesMap = await workspaceService.getWorkspaceDisplayNames();
-        runtimeWorkspaceDisplayNames["global"] = {};
-        allWorkspacesMap.forEach((displayName, workspaceId) => {
-          runtimeWorkspaceDisplayNames["global"][workspaceId] = displayName;
-        });
+        storeGlobalDisplayNames(allWorkspacesMap);
       }
       isInitialized = true;
       initializedWithLineIds = targetLineIds;
@@ -18986,6 +19332,37 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
   })();
   await initializationPromise;
 }
+var preInitializeWorkspaceDisplayNamesForLines = async (lineIds) => {
+  const uniqueLineIds = Array.from(new Set((lineIds || []).filter(Boolean)));
+  if (uniqueLineIds.length === 0) {
+    await preInitializeWorkspaceDisplayNames();
+    return;
+  }
+  if (uniqueLineIds.length === 1) {
+    await preInitializeWorkspaceDisplayNames(uniqueLineIds[0]);
+    return;
+  }
+  if (isInitialized && uniqueLineIds.every((lineId) => Boolean(runtimeWorkspaceDisplayNames[lineId]))) {
+    return;
+  }
+  if (initializationPromise) {
+    await initializationPromise;
+    if (uniqueLineIds.every((lineId) => Boolean(runtimeWorkspaceDisplayNames[lineId]))) {
+      return;
+    }
+  }
+  isInitializing = true;
+  initializationPromise = workspaceService.getWorkspaceDisplayNamesByLine(void 0, uniqueLineIds).then((displayNamesByLine) => {
+    storeDisplayNamesByLine(displayNamesByLine, uniqueLineIds);
+    initializedWithLineIds = uniqueLineIds;
+    isInitialized = true;
+    notifyWorkspaceDisplayNamesListeners();
+  }).finally(() => {
+    isInitializing = false;
+    initializationPromise = null;
+  });
+  await initializationPromise;
+};
 var preInitializeWorkspaceDisplayNames = async (lineId) => {
   console.log("\u{1F504} preInitializeWorkspaceDisplayNames called for lineId:", lineId);
   if (isInitialized) {
@@ -38720,6 +39097,7 @@ var HourlyOutputChartComponent = ({
                             timeRange: data2.timeRange,
                             startTime,
                             endTime,
+                            timezone,
                             output: Math.round(data2.originalOutput || 0),
                             target: data2.target,
                             status: data2.status
@@ -38893,6 +39271,7 @@ var HourlyOutputChartComponent = ({
                                   timeRange: entry.timeRange,
                                   startTime,
                                   endTime,
+                                  timezone,
                                   output: Math.round(entry.originalOutput || 0),
                                   target: entry.target,
                                   status: entry.status
@@ -42360,6 +42739,65 @@ var buildPrefetchedExplorerMetadata = (activeFilter, metadataCategoryId, categor
   };
 };
 var shouldDeferClipPlayerRender = (cropLoading, workspaceCrop) => cropLoading && workspaceCrop === null;
+var parseSortableCycleTime = (value) => {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+};
+var readSortableCycleTime = (clip) => {
+  const candidate = clip;
+  return parseSortableCycleTime(candidate?.cycleTimeSeconds) ?? parseSortableCycleTime(candidate?.cycle_time_seconds) ?? parseSortableCycleTime(candidate?.duration) ?? parseSortableCycleTime(
+    candidate?.original_task_metadata?.cycle_time
+  ) ?? null;
+};
+var readSortableTimestamp = (clip) => {
+  const candidate = clip;
+  const timestamp = candidate?.creation_timestamp || candidate?.timestamp || candidate?.clip_timestamp || candidate?.clip_end_time || candidate?.clip_start_time;
+  if (typeof timestamp !== "string") {
+    return 0;
+  }
+  const parsed = new Date(timestamp).getTime();
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+var sortPercentileCycleClipsForDisplay = (categoryId, clips) => {
+  if (categoryId !== "fast-cycles" && categoryId !== "slow-cycles") {
+    return [...clips];
+  }
+  return [...clips].sort((left, right) => {
+    const leftCycleTime = readSortableCycleTime(left);
+    const rightCycleTime = readSortableCycleTime(right);
+    const leftMissingCycleTime = leftCycleTime === null;
+    const rightMissingCycleTime = rightCycleTime === null;
+    if (leftMissingCycleTime !== rightMissingCycleTime) {
+      return leftMissingCycleTime ? 1 : -1;
+    }
+    if (leftCycleTime !== null && rightCycleTime !== null && leftCycleTime !== rightCycleTime) {
+      return categoryId === "fast-cycles" ? leftCycleTime - rightCycleTime : rightCycleTime - leftCycleTime;
+    }
+    return readSortableTimestamp(right) - readSortableTimestamp(left);
+  });
+};
+var resolveInitialClipCategory = (categoryCandidates, clipTypes = [], counts = {}) => {
+  const candidates = Array.from(
+    new Set(
+      categoryCandidates.filter((candidate) => Boolean(candidate)).map((candidate) => candidate.trim()).filter(Boolean)
+    )
+  );
+  if (candidates.length === 0) {
+    return null;
+  }
+  const availableCategories = /* @__PURE__ */ new Set();
+  clipTypes.forEach((type) => {
+    if (type?.type) availableCategories.add(String(type.type));
+    if (type?.id) availableCategories.add(String(type.id));
+  });
+  return candidates.find((candidate) => (counts[candidate] || 0) > 0) || candidates.find((candidate) => availableCategories.has(candidate)) || null;
+};
 var getCategoryMetadataLoadPlanForFilterChange = ({
   activeFilter,
   currentClipId,
@@ -42371,6 +42809,12 @@ var getCategoryMetadataLoadPlanForFilterChange = ({
   if (activeFilter === "recent_flow_red_streak" && categoryTotal > 0) {
     return { shouldLoad: true, autoLoadFirstVideo: true };
   }
+  if (activeFilter === "fast-cycles" || activeFilter === "slow-cycles") {
+    return { shouldLoad: true, autoLoadFirstVideo: true };
+  }
+  if (categoryTotal > 0 && activeFilter === "cycle_completion") {
+    return { shouldLoad: true, autoLoadFirstVideo: true };
+  }
   return {
     shouldLoad: Boolean(currentClipId),
     autoLoadFirstVideo: false
@@ -46208,6 +46652,36 @@ var CLIP_METADATA_PAGE_SIZE = 50;
 var RECENT_FLOW_RED_STREAK_CLIP_TYPE2 = "recent_flow_red_streak";
 var RECENT_FLOW_RED_STREAK_DISPLAY_LABEL = "Low moments";
 var RECENT_FLOW_RED_STREAK_DISPLAY_SUBTITLE = "Moments of low efficiency";
+var REQUIRED_HOURLY_HANDOFF_CATEGORIES = {
+  cycle_completion: {
+    id: "cycle_completion",
+    label: "Cycle Completion",
+    description: "Successfully completed production cycles",
+    color: "green",
+    icon: "check-circle"
+  },
+  idle_time: {
+    id: "idle_time",
+    label: "Idle Time",
+    description: "Idle periods",
+    color: "purple",
+    icon: "clock"
+  },
+  [RECENT_FLOW_RED_STREAK_CLIP_TYPE2]: {
+    id: RECENT_FLOW_RED_STREAK_CLIP_TYPE2,
+    label: RECENT_FLOW_RED_STREAK_DISPLAY_LABEL,
+    description: RECENT_FLOW_RED_STREAK_DISPLAY_SUBTITLE,
+    color: "red",
+    icon: "alert-triangle"
+  }
+};
+var REQUIRED_HOURLY_FILTER_CATEGORY_IDS = [
+  RECENT_FLOW_RED_STREAK_CLIP_TYPE2,
+  "cycle_completion",
+  "fast-cycles",
+  "slow-cycles",
+  "idle_time"
+];
 var parseCycleTime = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -46236,6 +46710,21 @@ var formatDurationLabel = (seconds) => {
   }
   return `${Math.round(roundedSeconds / 60)} min`;
 };
+var timeValueToMinutes = (value) => {
+  const [hourValue, minuteValue] = value.substring(0, 5).split(":").map(Number);
+  if (!Number.isInteger(hourValue) || !Number.isInteger(minuteValue) || hourValue < 0 || hourValue > 23 || minuteValue < 0 || minuteValue > 59) {
+    return null;
+  }
+  return hourValue * 60 + minuteValue;
+};
+var isMinuteInTimeWindow = (minute, startValue, endValue) => {
+  const startMinute = timeValueToMinutes(startValue);
+  const endMinute = timeValueToMinutes(endValue);
+  if (startMinute === null || endMinute === null) {
+    return true;
+  }
+  return endMinute > startMinute ? minute >= startMinute && minute < endMinute : minute >= startMinute || minute < endMinute;
+};
 var sortRedFlowMetadata = (clips) => {
   return clips.slice().sort((left, right) => {
     const getOutputShortfall = (clip) => {
@@ -46260,6 +46749,27 @@ var sortRedFlowMetadata = (clips) => {
     return (Number.isFinite(rightTime) ? rightTime : 0) - (Number.isFinite(leftTime) ? leftTime : 0);
   });
 };
+var buildClipMetadataFromVideo = (video, index) => ({
+  id: video.id,
+  clipId: video.id,
+  clip_timestamp: video.creation_timestamp || video.timestamp,
+  description: video.description,
+  severity: video.severity,
+  category: video.type,
+  duration: typeof video.duration === "number" ? video.duration : typeof video.cycle_time_seconds === "number" ? video.cycle_time_seconds : void 0,
+  clip_start_time: video.clip_start_time,
+  clip_end_time: video.clip_end_time,
+  index,
+  idle_start_time: video.idle_start_time,
+  idle_end_time: video.idle_end_time,
+  cycle_item_count: null,
+  red_flow_timeline: video.red_flow_timeline,
+  red_flow_severity_score: video.red_flow_severity_score,
+  red_flow_output_shortfall_units: video.red_flow_output_shortfall_units,
+  red_flow_worst_minute: video.red_flow_worst_minute,
+  red_flow_explanation_summary: video.red_flow_explanation_summary,
+  red_flow_explanation: video.red_flow_explanation
+});
 var getSeverityIcon = (severity, categoryId, cycleTimeSeconds, targetCycleTime, clipId) => {
   if (categoryId === "idle_time" || categoryId === "low_value" || categoryId === "longest-idles") {
     return null;
@@ -46338,6 +46848,8 @@ var FileManagerFilters = ({
   idleTimeVlmEnabled = false,
   showPercentileCycleFilters = true,
   prefetchedClipMetadata,
+  prefetchedClipTotals,
+  prefetchedPercentileClips,
   externallyManagedLoadingCategories,
   activeCategoryLoading,
   idleClipSort = "latest",
@@ -46345,6 +46857,7 @@ var FileManagerFilters = ({
   initialTimeFilter
 }) => {
   const [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set());
+  const [activeInitialTimeFilter, setActiveInitialTimeFilter] = useState(initialTimeFilter ?? null);
   const [startTime, setStartTime] = useState(initialTimeFilter?.startTime ?? "");
   const [endTime, setEndTime] = useState(initialTimeFilter?.endTime ?? "");
   const [isTimeFilterActive, setIsTimeFilterActive] = useState(
@@ -46359,14 +46872,93 @@ var FileManagerFilters = ({
   const [showIdleLabelFilterModal, setShowIdleLabelFilterModal] = useState(false);
   const [isLoadingIdleReasonOptions, setIsLoadingIdleReasonOptions] = useState(false);
   const timezone = useAppTimezone();
+  const activeTimeFilterTimezone = activeInitialTimeFilter?.timezone || initialTimeFilter?.timezone || timezone;
+  const activeTimeFilterKey = useMemo(() => startTime && endTime && isTimeFilterActive ? `${startTime}-${endTime}-${activeTimeFilterTimezone}` : "none", [activeTimeFilterTimezone, endTime, isTimeFilterActive, startTime]);
+  const initialTimeFilterCategoryIds = useMemo(() => {
+    if (!activeInitialTimeFilter) {
+      return [];
+    }
+    return Array.from(new Set([
+      activeInitialTimeFilter.categoryId,
+      ...activeInitialTimeFilter.categoryIds || []
+    ].filter((value) => typeof value === "string" && value.length > 0)));
+  }, [activeInitialTimeFilter]);
+  const requiredHourlyFilterCategoryIds = useMemo(() => {
+    if (initialTimeFilterCategoryIds.length > 0) {
+      return initialTimeFilterCategoryIds;
+    }
+    if (!isTimeFilterActive || !startTime || !endTime) {
+      return [];
+    }
+    return REQUIRED_HOURLY_FILTER_CATEGORY_IDS;
+  }, [endTime, initialTimeFilterCategoryIds, isTimeFilterActive, startTime]);
+  const categoriesForTree = useMemo(() => {
+    if (requiredHourlyFilterCategoryIds.length === 0) {
+      return categories;
+    }
+    const existingCategoryIds = new Set(categories.map((category) => category.id));
+    const mergedCategories = [...categories];
+    requiredHourlyFilterCategoryIds.forEach((categoryId) => {
+      const fallbackCategory = REQUIRED_HOURLY_HANDOFF_CATEGORIES[categoryId];
+      if (!fallbackCategory || existingCategoryIds.has(categoryId)) {
+        return;
+      }
+      mergedCategories.push(fallbackCategory);
+      existingCategoryIds.add(categoryId);
+    });
+    return mergedCategories;
+  }, [categories, requiredHourlyFilterCategoryIds]);
   const supabase = useSupabase();
   const [clipMetadata, setClipMetadata] = useState({});
+  const [scopedCategoryTotals, setScopedCategoryTotals] = useState({});
   const [loadingCategories, setLoadingCategories] = useState(/* @__PURE__ */ new Set());
+  const isCategoryScopedByTimeFilter = useCallback((categoryId) => {
+    if (!startTime || !endTime || !isTimeFilterActive) {
+      return false;
+    }
+    if (!activeInitialTimeFilter) {
+      return true;
+    }
+    if (activeFilter === categoryId || activeInitialTimeFilter.categoryId === categoryId) {
+      return true;
+    }
+    return Boolean(activeInitialTimeFilter.categoryIds?.includes(categoryId));
+  }, [
+    activeFilter,
+    activeInitialTimeFilter,
+    endTime,
+    isTimeFilterActive,
+    startTime
+  ]);
+  const isRequiredHourlyFilterCategory = useCallback((categoryId) => requiredHourlyFilterCategoryIds.includes(categoryId), [requiredHourlyFilterCategoryIds]);
+  const manualHourlySnapshotKey = useMemo(() => {
+    if (activeInitialTimeFilter || !isTimeFilterActive || !startTime || !endTime || !workspaceId || !date || shift === void 0) {
+      return null;
+    }
+    return `${workspaceId}:${date}:${shift}:${startTime}:${endTime}:${activeTimeFilterTimezone}`;
+  }, [
+    activeInitialTimeFilter,
+    activeTimeFilterTimezone,
+    date,
+    endTime,
+    isTimeFilterActive,
+    shift,
+    startTime,
+    workspaceId
+  ]);
+  const manualHourlySnapshotAppliedKeyRef = useRef(null);
+  const manualHourlySnapshotInFlightKeyRef = useRef(null);
+  const [manualHourlySnapshotFailureKey, setManualHourlySnapshotFailureKey] = useState(null);
+  const isManualHourlySnapshotPending = Boolean(
+    manualHourlySnapshotKey && manualHourlySnapshotAppliedKeyRef.current !== manualHourlySnapshotKey && manualHourlySnapshotFailureKey !== manualHourlySnapshotKey
+  );
   const [categoryPages, setCategoryPages] = useState({});
   const [categoryHasMore, setCategoryHasMore] = useState({});
   const [localClipClassifications, setLocalClipClassifications] = useState({});
   const clipMetadataRef = useRef({});
   const inFlightMetadataRequestsRef = useRef(/* @__PURE__ */ new Set());
+  const inFlightPercentileClipRequestsRef = useRef(/* @__PURE__ */ new Set());
+  const autoSelectedScopedClipRef = useRef(null);
   const previousIdleClipSortRef = useRef(idleClipSort);
   const mergedClipClassifications = useMemo(() => ({
     ...clipClassifications || {},
@@ -46379,12 +46971,14 @@ var FileManagerFilters = ({
     if (!initialTimeFilter?.startTime || !initialTimeFilter?.endTime) {
       return;
     }
+    setActiveInitialTimeFilter(initialTimeFilter);
     setStartTime(initialTimeFilter.startTime);
     setEndTime(initialTimeFilter.endTime);
     setIsTimeFilterActive(true);
     setShowTimeFilterModal(false);
     setStartSearchTerm("");
     setEndSearchTerm("");
+    setScopedCategoryTotals({});
   }, [initialTimeFilter?.startTime, initialTimeFilter?.endTime]);
   useEffect(() => {
     if (previousIdleClipSortRef.current === idleClipSort) {
@@ -46416,18 +47010,66 @@ var FileManagerFilters = ({
       return next;
     });
   }, [idleClipSort]);
+  useEffect(() => {
+    manualHourlySnapshotAppliedKeyRef.current = null;
+    manualHourlySnapshotInFlightKeyRef.current = null;
+    setManualHourlySnapshotFailureKey(null);
+    setScopedCategoryTotals({});
+    setClipMetadata({});
+    setCategoryPages({});
+    setCategoryHasMore({});
+    setPercentileClips({});
+    setPercentileCounts({
+      "fast-cycles": null,
+      "slow-cycles": null
+    });
+  }, [activeTimeFilterKey]);
   const isCategoryExternallyManaged = useCallback((categoryId) => {
     if (!categoryId) {
       return false;
     }
-    if (prefetchedClipMetadata && Array.isArray(prefetchedClipMetadata[categoryId]) && prefetchedClipMetadata[categoryId].length > 0) {
+    if (isManualHourlySnapshotPending && requiredHourlyFilterCategoryIds.includes(categoryId)) {
+      return true;
+    }
+    if (prefetchedClipMetadata && Array.isArray(prefetchedClipMetadata[categoryId]) && (prefetchedClipMetadata[categoryId].length > 0 || typeof prefetchedClipTotals?.[categoryId] === "number")) {
+      return true;
+    }
+    if (prefetchedPercentileClips && Array.isArray(prefetchedPercentileClips[categoryId]) && (prefetchedPercentileClips[categoryId].length > 0 || isCategoryScopedByTimeFilter(categoryId) && typeof prefetchedClipTotals?.[categoryId] === "number")) {
       return true;
     }
     if (externallyManagedLoadingCategories?.[categoryId]) {
       return true;
     }
     return false;
-  }, [prefetchedClipMetadata, externallyManagedLoadingCategories]);
+  }, [
+    externallyManagedLoadingCategories,
+    isManualHourlySnapshotPending,
+    isCategoryScopedByTimeFilter,
+    prefetchedClipMetadata,
+    prefetchedClipTotals,
+    prefetchedPercentileClips,
+    requiredHourlyFilterCategoryIds
+  ]);
+  const getAvailableClipMetadata = useCallback((categoryId) => {
+    const localClips = clipMetadata[categoryId];
+    if (Array.isArray(localClips) && localClips.length > 0) {
+      return localClips;
+    }
+    const prefetchedClips = prefetchedClipMetadata?.[categoryId];
+    if (Array.isArray(prefetchedClips) && prefetchedClips.length > 0) {
+      return prefetchedClips;
+    }
+    return [];
+  }, [clipMetadata, prefetchedClipMetadata]);
+  const hasKnownClipMetadata = useCallback((categoryId) => {
+    if (Array.isArray(clipMetadata[categoryId])) {
+      return true;
+    }
+    if (Array.isArray(prefetchedClipMetadata?.[categoryId])) {
+      return true;
+    }
+    return typeof prefetchedClipTotals?.[categoryId] === "number";
+  }, [clipMetadata, prefetchedClipMetadata, prefetchedClipTotals]);
   useEffect(() => {
     if (!prefetchedClipMetadata) {
       return;
@@ -46450,6 +47092,22 @@ var FileManagerFilters = ({
       });
       return changed ? next : prev;
     });
+    setScopedCategoryTotals((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      Object.entries(prefetchedClipMetadata).forEach(([categoryId, clips]) => {
+        if (!Array.isArray(clips) || !isCategoryScopedByTimeFilter(categoryId)) {
+          return;
+        }
+        const nextTotal = typeof prefetchedClipTotals?.[categoryId] === "number" ? Math.max(0, prefetchedClipTotals[categoryId]) : clips.length;
+        if (next[categoryId] === nextTotal) {
+          return;
+        }
+        next[categoryId] = nextTotal;
+        changed = true;
+      });
+      return changed ? next : prev;
+    });
     setCategoryPages((prev) => {
       let changed = false;
       const next = { ...prev };
@@ -46474,7 +47132,7 @@ var FileManagerFilters = ({
           return;
         }
         const knownTotal = typeof counts?.[categoryId] === "number" ? counts[categoryId] : null;
-        const inferredHasMore = knownTotal !== null ? clips.length < knownTotal : prev[categoryId];
+        const inferredHasMore = isCategoryScopedByTimeFilter(categoryId) ? false : knownTotal !== null ? clips.length < knownTotal : prev[categoryId];
         if (typeof inferredHasMore !== "boolean" || next[categoryId] === inferredHasMore) {
           return;
         }
@@ -46483,8 +47141,68 @@ var FileManagerFilters = ({
       });
       return changed ? next : prev;
     });
-  }, [prefetchedClipMetadata, counts]);
+  }, [prefetchedClipMetadata, prefetchedClipTotals, counts, isCategoryScopedByTimeFilter]);
+  useEffect(() => {
+    if (!prefetchedPercentileClips) {
+      return;
+    }
+    setPercentileClips((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      ["fast-cycles", "slow-cycles"].forEach((categoryId) => {
+        const clips = prefetchedPercentileClips[categoryId];
+        if (!Array.isArray(clips)) {
+          return;
+        }
+        const previousClips = prev[categoryId] || [];
+        const previousSignature = previousClips.map((clip) => clip.id).join("|");
+        const nextSignature = clips.map((clip) => clip.id).join("|");
+        if (previousSignature === nextSignature) {
+          return;
+        }
+        next[categoryId] = clips;
+        changed = true;
+      });
+      return changed ? next : prev;
+    });
+    setPercentileCounts((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      ["fast-cycles", "slow-cycles"].forEach((categoryId) => {
+        const clips = prefetchedPercentileClips[categoryId];
+        if (!Array.isArray(clips)) {
+          return;
+        }
+        const nextTotal = typeof prefetchedClipTotals?.[categoryId] === "number" ? Math.max(0, prefetchedClipTotals[categoryId]) : clips.length;
+        if (next[categoryId] === nextTotal) {
+          return;
+        }
+        next[categoryId] = nextTotal;
+        changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, [prefetchedClipTotals, prefetchedPercentileClips]);
   const { state: filterState } = useClipFilter();
+  const shouldShowCategory = useCallback((categoryId) => {
+    switch (categoryId) {
+      case "fast-cycles":
+        return showPercentileCycleFilters && filterState.showFastCycles;
+      case "slow-cycles":
+        return showPercentileCycleFilters && 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, showPercentileCycleFilters]);
   const [percentileCounts, setPercentileCounts] = useState({
     "fast-cycles": null,
     "slow-cycles": null
@@ -46594,11 +47312,12 @@ var FileManagerFilters = ({
       return null;
     }
   }, [supabase]);
-  const getMetadataLoadingKey = useCallback((categoryId, page) => `${categoryId}-${page}-${categoryId === RECENT_FLOW_RED_STREAK_CLIP_TYPE2 ? "red_flow_output_shortfall_desc" : categoryId === "idle_time" ? idleClipSort : "latest"}`, [idleClipSort]);
+  const getMetadataLoadingKey = useCallback((categoryId, page) => `${categoryId}-${page}-${categoryId === RECENT_FLOW_RED_STREAK_CLIP_TYPE2 ? "red_flow_output_shortfall_desc" : categoryId === "idle_time" ? idleClipSort : "latest"}-${activeTimeFilterKey}`, [activeTimeFilterKey, idleClipSort]);
   const fetchClipMetadataPage = useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       throw new Error("Missing required params for clip metadata fetch");
     }
+    const shouldScopeToTimeFilter = isCategoryScopedByTimeFilter(categoryId);
     const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
       method: "POST",
       headers: {
@@ -46612,9 +47331,12 @@ var FileManagerFilters = ({
         category: categoryId,
         page,
         limit: CLIP_METADATA_PAGE_SIZE,
-        knownTotal: typeof counts?.[categoryId] === "number" ? counts[categoryId] : null,
+        knownTotal: shouldScopeToTimeFilter ? null : typeof counts?.[categoryId] === "number" ? counts[categoryId] : null,
         snapshotDateTime,
         snapshotClipId,
+        startTime: shouldScopeToTimeFilter ? startTime : void 0,
+        endTime: shouldScopeToTimeFilter ? endTime : void 0,
+        timeFilterTimezone: shouldScopeToTimeFilter ? activeTimeFilterTimezone : void 0,
         sort: categoryId === RECENT_FLOW_RED_STREAK_CLIP_TYPE2 ? "red_flow_output_shortfall_desc" : categoryId === "idle_time" ? idleClipSort : "latest"
       }),
       redirectReason: "session_expired"
@@ -46623,7 +47345,20 @@ var FileManagerFilters = ({
       throw new Error(`API error: ${response.status}`);
     }
     return response.json();
-  }, [workspaceId, date, shift, counts, snapshotDateTime, snapshotClipId, idleClipSort, supabase]);
+  }, [
+    activeTimeFilterTimezone,
+    endTime,
+    isCategoryScopedByTimeFilter,
+    startTime,
+    workspaceId,
+    date,
+    shift,
+    counts,
+    snapshotDateTime,
+    snapshotClipId,
+    idleClipSort,
+    supabase
+  ]);
   const seedIdleClassifications = useCallback(async (clips) => {
     if (!idleTimeVlmEnabled || clips.length === 0) {
       return;
@@ -46691,6 +47426,12 @@ var FileManagerFilters = ({
         ...prev,
         [categoryId]: page === 1 ? data.clips : [...prev[categoryId] || [], ...data.clips]
       }));
+      if (isCategoryScopedByTimeFilter(categoryId)) {
+        setScopedCategoryTotals((prev) => ({
+          ...prev,
+          [categoryId]: Math.max(0, Number(data.total || 0))
+        }));
+      }
       if (categoryId === "idle_time" && idleTimeVlmEnabled) {
         await seedIdleClassifications(data.clips || []);
       }
@@ -46707,7 +47448,94 @@ var FileManagerFilters = ({
         return newSet;
       });
     }
-  }, [workspaceId, date, shift, fetchClipMetadataPage, idleTimeVlmEnabled, seedIdleClassifications, getMetadataLoadingKey]);
+  }, [workspaceId, date, shift, fetchClipMetadataPage, idleTimeVlmEnabled, seedIdleClassifications, getMetadataLoadingKey, isCategoryScopedByTimeFilter]);
+  useCallback(async (categoryId) => {
+    if (!workspaceId || !date || shift === void 0) {
+      console.warn("[FileManager] Missing required params for full clip metadata fetch");
+      return;
+    }
+    const loadingKey = `${getMetadataLoadingKey(categoryId, 1)}-all`;
+    if (inFlightMetadataRequestsRef.current.has(loadingKey)) {
+      return;
+    }
+    inFlightMetadataRequestsRef.current.add(loadingKey);
+    setLoadingCategories((prev) => /* @__PURE__ */ new Set([...prev, loadingKey]));
+    try {
+      let accumulatedClips = [];
+      let currentPage = 0;
+      let hasMore = true;
+      while (hasMore) {
+        const nextPage = currentPage + 1;
+        const pageData = await fetchClipMetadataPage(categoryId, nextPage);
+        const pageClips = pageData.clips || [];
+        accumulatedClips = [...accumulatedClips, ...pageClips];
+        currentPage = nextPage;
+        hasMore = Boolean(pageData.hasMore && pageClips.length > 0);
+      }
+      const dedupedClips = accumulatedClips.filter((clip, index, arr) => {
+        const clipKey = clip.clipId || clip.id;
+        return arr.findIndex((item) => (item.clipId || item.id) === clipKey) === index;
+      });
+      setClipMetadata((prev) => ({
+        ...prev,
+        [categoryId]: dedupedClips
+      }));
+      setCategoryPages((prev) => ({ ...prev, [categoryId]: Math.max(currentPage, 1) }));
+      setCategoryHasMore((prev) => ({ ...prev, [categoryId]: false }));
+      if (categoryId === "idle_time" && idleTimeVlmEnabled) {
+        await seedIdleClassifications(dedupedClips);
+      }
+      console.log(`[FileManager] Loaded all ${dedupedClips.length} clips for ${categoryId} due to chart time filter`);
+    } catch (error) {
+      console.error("[FileManager] Error fetching full clip metadata:", error);
+    } finally {
+      inFlightMetadataRequestsRef.current.delete(loadingKey);
+      setLoadingCategories((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(loadingKey);
+        return newSet;
+      });
+    }
+  }, [
+    workspaceId,
+    date,
+    shift,
+    fetchClipMetadataPage,
+    idleTimeVlmEnabled,
+    seedIdleClassifications,
+    getMetadataLoadingKey
+  ]);
+  const isInitialTimeFilterCategory = useCallback((categoryId) => {
+    if (!startTime || !endTime || !activeInitialTimeFilter) {
+      return false;
+    }
+    if (activeFilter === categoryId) {
+      return true;
+    }
+    if (activeInitialTimeFilter.categoryId === categoryId) {
+      return true;
+    }
+    return Array.isArray(activeInitialTimeFilter.categoryIds) && activeInitialTimeFilter.categoryIds.includes(categoryId);
+  }, [
+    activeFilter,
+    activeInitialTimeFilter,
+    endTime,
+    startTime
+  ]);
+  const hasCompleteMetadataForInitialTimeFilter = useCallback((categoryId) => {
+    if (!isInitialTimeFilterCategory(categoryId)) {
+      return true;
+    }
+    const loadedClips = clipMetadataRef.current[categoryId] || [];
+    const knownTotal = typeof scopedCategoryTotals[categoryId] === "number" ? scopedCategoryTotals[categoryId] : null;
+    if (categoryHasMore[categoryId]) {
+      return false;
+    }
+    if (knownTotal !== null && loadedClips.length < knownTotal) {
+      return false;
+    }
+    return loadedClips.length > 0 || knownTotal === 0;
+  }, [categoryHasMore, isInitialTimeFilterCategory, scopedCategoryTotals]);
   const ensureAllIdleTimeClipMetadataLoaded = useCallback(async () => {
     if (!workspaceId || !date || shift === void 0) {
       return;
@@ -46773,6 +47601,12 @@ var FileManagerFilters = ({
       console.warn("[FileManager] Missing required params for percentile clips fetch");
       return;
     }
+    const shouldScopeToTimeFilter = isCategoryScopedByTimeFilter(type);
+    const requestKey = `${type}:${date}:${shift}:${filterState.percentile}:${shouldScopeToTimeFilter ? activeTimeFilterKey : "unscoped"}`;
+    if (inFlightPercentileClipRequestsRef.current.has(requestKey)) {
+      return;
+    }
+    inFlightPercentileClipRequestsRef.current.add(requestKey);
     try {
       const startDate = `${date}T00:00:00Z`;
       const endDate = `${date}T23:59:59Z`;
@@ -46788,7 +47622,10 @@ var FileManagerFilters = ({
           endDate,
           percentile: filterState.percentile,
           shiftId: shift,
-          limit: 50,
+          limit: shouldScopeToTimeFilter ? 500 : 100,
+          startTime: shouldScopeToTimeFilter ? startTime : void 0,
+          endTime: shouldScopeToTimeFilter ? endTime : void 0,
+          timeFilterTimezone: shouldScopeToTimeFilter ? activeTimeFilterTimezone : void 0,
           // The actual percentile action (fast-cycles, slow-cycles, idle-times)
           percentileAction: type
         }),
@@ -46803,7 +47640,7 @@ var FileManagerFilters = ({
         [type]: data.clips || []
       }));
       setPercentileCounts((prev) => {
-        if (typeof prev[type] === "number") {
+        if (!shouldScopeToTimeFilter && typeof prev[type] === "number") {
           return prev;
         }
         return {
@@ -46814,8 +47651,206 @@ var FileManagerFilters = ({
       console.log(`[FileManager] Loaded ${data.clips?.length || 0} ${type} clips (percentile: ${filterState.percentile}%)`);
     } catch (error) {
       console.error(`[FileManager] Error fetching ${type} clips:`, error);
+    } finally {
+      inFlightPercentileClipRequestsRef.current.delete(requestKey);
+    }
+  }, [
+    activeTimeFilterTimezone,
+    activeTimeFilterKey,
+    endTime,
+    isCategoryScopedByTimeFilter,
+    startTime,
+    workspaceId,
+    date,
+    shift,
+    filterState.percentile,
+    showPercentileCycleFilters,
+    supabase
+  ]);
+  useEffect(() => {
+    if (!manualHourlySnapshotKey) {
+      return;
+    }
+    if (manualHourlySnapshotAppliedKeyRef.current === manualHourlySnapshotKey) {
+      return;
+    }
+    if (manualHourlySnapshotInFlightKeyRef.current === manualHourlySnapshotKey) {
+      return;
+    }
+    manualHourlySnapshotInFlightKeyRef.current = manualHourlySnapshotKey;
+    setManualHourlySnapshotFailureKey((prev) => prev === manualHourlySnapshotKey ? null : prev);
+    const applyHourlySnapshot = async () => {
+      try {
+        const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            action: "hourly-snapshot",
+            workspaceId,
+            date,
+            shift,
+            startTime,
+            endTime,
+            timeFilterTimezone: activeTimeFilterTimezone
+          }),
+          redirectReason: "session_expired"
+        });
+        if (!response.ok) {
+          throw new Error(`API error: ${response.status}`);
+        }
+        const snapshot = await response.json();
+        const metadataByCategory = snapshot?.metadataByCategory && typeof snapshot.metadataByCategory === "object" ? snapshot.metadataByCategory : {};
+        const percentileClipsByCategory = snapshot?.percentileClipsByCategory && typeof snapshot.percentileClipsByCategory === "object" ? snapshot.percentileClipsByCategory : {};
+        const rawTotalsByCategory = snapshot?.totalsByCategory && typeof snapshot.totalsByCategory === "object" ? snapshot.totalsByCategory : {};
+        const totalsByCategory = requiredHourlyFilterCategoryIds.reduce((accumulator, categoryId) => {
+          const rawTotal = rawTotalsByCategory[categoryId];
+          if (typeof rawTotal === "number" && Number.isFinite(rawTotal)) {
+            accumulator[categoryId] = Math.max(0, rawTotal);
+            return accumulator;
+          }
+          if (categoryId === "fast-cycles" || categoryId === "slow-cycles") {
+            accumulator[categoryId] = Array.isArray(percentileClipsByCategory[categoryId]) ? percentileClipsByCategory[categoryId].length : 0;
+            return accumulator;
+          }
+          accumulator[categoryId] = Array.isArray(metadataByCategory[categoryId]) ? metadataByCategory[categoryId].length : 0;
+          return accumulator;
+        }, {});
+        setClipMetadata((prev) => {
+          const next = { ...prev };
+          requiredHourlyFilterCategoryIds.forEach((categoryId) => {
+            if (categoryId === "fast-cycles" || categoryId === "slow-cycles") {
+              return;
+            }
+            next[categoryId] = Array.isArray(metadataByCategory[categoryId]) ? metadataByCategory[categoryId] : [];
+          });
+          return next;
+        });
+        setScopedCategoryTotals((prev) => ({
+          ...prev,
+          ...totalsByCategory
+        }));
+        if (showPercentileCycleFilters) {
+          setPercentileClips((prev) => ({
+            ...prev,
+            "fast-cycles": Array.isArray(percentileClipsByCategory["fast-cycles"]) ? percentileClipsByCategory["fast-cycles"] : [],
+            "slow-cycles": Array.isArray(percentileClipsByCategory["slow-cycles"]) ? percentileClipsByCategory["slow-cycles"] : []
+          }));
+          setPercentileCounts((prev) => ({
+            ...prev,
+            "fast-cycles": totalsByCategory["fast-cycles"] ?? 0,
+            "slow-cycles": totalsByCategory["slow-cycles"] ?? 0
+          }));
+        }
+        setCategoryPages((prev) => {
+          const next = { ...prev };
+          requiredHourlyFilterCategoryIds.forEach((categoryId) => {
+            next[categoryId] = 1;
+          });
+          return next;
+        });
+        setCategoryHasMore((prev) => {
+          const next = { ...prev };
+          requiredHourlyFilterCategoryIds.forEach((categoryId) => {
+            next[categoryId] = false;
+          });
+          return next;
+        });
+        const idleClips = metadataByCategory.idle_time;
+        if (Array.isArray(idleClips) && idleClips.length > 0) {
+          await seedIdleClassifications(idleClips);
+        }
+        manualHourlySnapshotAppliedKeyRef.current = manualHourlySnapshotKey;
+        setManualHourlySnapshotFailureKey((prev) => prev === manualHourlySnapshotKey ? null : prev);
+      } catch (error) {
+        console.error("[FileManager] Error fetching manual hourly snapshot:", error);
+        setManualHourlySnapshotFailureKey(manualHourlySnapshotKey);
+      } finally {
+        if (manualHourlySnapshotInFlightKeyRef.current === manualHourlySnapshotKey) {
+          manualHourlySnapshotInFlightKeyRef.current = null;
+        }
+      }
+    };
+    void applyHourlySnapshot();
+  }, [
+    activeTimeFilterTimezone,
+    date,
+    endTime,
+    manualHourlySnapshotKey,
+    requiredHourlyFilterCategoryIds,
+    seedIdleClassifications,
+    shift,
+    showPercentileCycleFilters,
+    startTime,
+    supabase,
+    workspaceId
+  ]);
+  useEffect(() => {
+    if (!startTime || !endTime || !activeInitialTimeFilter || initialTimeFilterCategoryIds.length === 0) {
+      return;
     }
-  }, [workspaceId, date, shift, filterState.percentile, showPercentileCycleFilters, supabase]);
+    initialTimeFilterCategoryIds.forEach((categoryId) => {
+      if (categoryId === "fast-cycles" || categoryId === "slow-cycles") {
+        const hasScopedPercentileResult = typeof percentileCounts[categoryId] === "number";
+        if (!isCategoryExternallyManaged(categoryId) && !hasScopedPercentileResult && showPercentileCycleFilters) {
+          fetchPercentileClips(categoryId);
+        }
+        return;
+      }
+      if (isCategoryExternallyManaged(categoryId)) {
+        return;
+      }
+      if (!hasCompleteMetadataForInitialTimeFilter(categoryId)) {
+        fetchClipMetadata(categoryId, 1);
+      }
+    });
+  }, [
+    activeInitialTimeFilter,
+    endTime,
+    fetchClipMetadata,
+    fetchPercentileClips,
+    hasCompleteMetadataForInitialTimeFilter,
+    initialTimeFilterCategoryIds,
+    isCategoryExternallyManaged,
+    percentileCounts,
+    showPercentileCycleFilters,
+    startTime
+  ]);
+  useEffect(() => {
+    if (!startTime || !endTime || !isTimeFilterActive || activeInitialTimeFilter) {
+      return;
+    }
+    categoriesForTree.forEach((category) => {
+      if (!shouldShowCategory(category.id) || isCategoryExternallyManaged(category.id)) {
+        return;
+      }
+      if (typeof scopedCategoryTotals[category.id] !== "number") {
+        fetchClipMetadata(category.id, 1);
+      }
+    });
+    if (showPercentileCycleFilters) {
+      if (!isCategoryExternallyManaged("fast-cycles") && typeof percentileCounts["fast-cycles"] !== "number") {
+        fetchPercentileClips("fast-cycles");
+      }
+      if (!isCategoryExternallyManaged("slow-cycles") && typeof percentileCounts["slow-cycles"] !== "number") {
+        fetchPercentileClips("slow-cycles");
+      }
+    }
+  }, [
+    activeInitialTimeFilter,
+    categoriesForTree,
+    endTime,
+    fetchClipMetadata,
+    fetchPercentileClips,
+    isCategoryExternallyManaged,
+    isTimeFilterActive,
+    percentileCounts,
+    scopedCategoryTotals,
+    shouldShowCategory,
+    showPercentileCycleFilters,
+    startTime
+  ]);
   const percentileCountsKey = useMemo(() => {
     if (!workspaceId || !date || shift === void 0) {
       return null;
@@ -46838,12 +47873,15 @@ var FileManagerFilters = ({
     }
     percentileCountsKeyRef.current = percentileCountsKey;
     percentilePrefetchRef.current = { key: null, types: /* @__PURE__ */ new Set() };
+    if (prefetchedPercentileClips && (Array.isArray(prefetchedPercentileClips["fast-cycles"]) || Array.isArray(prefetchedPercentileClips["slow-cycles"]))) {
+      return;
+    }
     setPercentileCounts({
       "fast-cycles": null,
       "slow-cycles": null
     });
     setPercentileClips({});
-  }, [showPercentileCycleFilters, percentileCountsKey]);
+  }, [prefetchedPercentileClips, showPercentileCycleFilters, percentileCountsKey]);
   useEffect(() => {
     if (!showPercentileCycleFilters) {
       return;
@@ -46899,11 +47937,20 @@ var FileManagerFilters = ({
       const data = await response.json();
       const fastCycles = data?.counts?.["fast-cycles"];
       const slowCycles = data?.counts?.["slow-cycles"];
-      setPercentileCounts((prev) => ({
-        ...prev,
-        "fast-cycles": typeof fastCycles === "number" ? fastCycles : prev["fast-cycles"],
-        "slow-cycles": typeof slowCycles === "number" ? slowCycles : prev["slow-cycles"]
-      }));
+      if (typeof fastCycles === "number" || typeof slowCycles === "number") {
+        setPercentileCounts((prev) => {
+          const nextFastCycles = typeof fastCycles === "number" ? fastCycles : prev["fast-cycles"];
+          const nextSlowCycles = typeof slowCycles === "number" ? slowCycles : prev["slow-cycles"];
+          if (prev["fast-cycles"] === nextFastCycles && prev["slow-cycles"] === nextSlowCycles) {
+            return prev;
+          }
+          return {
+            ...prev,
+            "fast-cycles": nextFastCycles,
+            "slow-cycles": nextSlowCycles
+          };
+        });
+      }
       if (options?.prefetchClips) {
         if (percentilePrefetchRef.current.key !== requestKey) {
           percentilePrefetchRef.current = { key: requestKey, types: /* @__PURE__ */ new Set() };
@@ -46922,37 +47969,30 @@ var FileManagerFilters = ({
     }
   }, [workspaceId, date, shift, filterState.percentile, showPercentileCycleFilters, supabase, percentileCounts, percentileClips, fetchPercentileClips]);
   useEffect(() => {
-    if (!showPercentileCycleFilters || !isReady || !percentileCountsKey) {
+    if (!showPercentileCycleFilters || !isReady || !percentileCountsKey || isTimeFilterActive) {
       return;
     }
-    const schedule = () => {
-      fetchPercentileCounts({ prefetchClips: true });
-    };
-    if (typeof window !== "undefined" && "requestIdleCallback" in window) {
-      window.requestIdleCallback(schedule, { timeout: 1e3 });
-    } else {
-      setTimeout(schedule, 0);
-    }
-  }, [showPercentileCycleFilters, isReady, percentileCountsKey, fetchPercentileCounts]);
-  const shouldShowCategory = useCallback((categoryId) => {
-    switch (categoryId) {
-      case "fast-cycles":
-        return showPercentileCycleFilters && filterState.showFastCycles;
-      case "slow-cycles":
-        return showPercentileCycleFilters && 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;
+    fetchPercentileCounts({ prefetchClips: true });
+  }, [showPercentileCycleFilters, isReady, percentileCountsKey, fetchPercentileCounts, isTimeFilterActive]);
+  useEffect(() => {
+    if (!isReady || isTimeFilterActive || activeFilter !== RECENT_FLOW_RED_STREAK_CLIP_TYPE2) {
+      return;
     }
-  }, [filterState, showPercentileCycleFilters]);
+    ["cycle_completion", "idle_time"].forEach((categoryId) => {
+      if ((counts?.[categoryId] || 0) <= 0 || hasKnownClipMetadata(categoryId) || isCategoryExternallyManaged(categoryId)) {
+        return;
+      }
+      fetchClipMetadata(categoryId, 1);
+    });
+  }, [
+    activeFilter,
+    counts,
+    fetchClipMetadata,
+    hasKnownClipMetadata,
+    isCategoryExternallyManaged,
+    isReady,
+    isTimeFilterActive
+  ]);
   const getPercentileIcon = useCallback((type, isExpanded, colorClasses) => {
     const iconMap = {
       "fast-cycles": { icon: TrendingUp, color: "text-green-600" },
@@ -46981,12 +48021,29 @@ var FileManagerFilters = ({
         newExpanded.add(activeFilter);
         return newExpanded;
       });
-      const category = categories.find((cat) => cat.id === activeFilter);
-      if (category && !isCategoryExternallyManaged(activeFilter) && !clipMetadataRef.current[activeFilter]) {
-        fetchClipMetadata(activeFilter, 1);
+      const category = categoriesForTree.find((cat) => cat.id === activeFilter);
+      if (category) {
+        if (isInitialTimeFilterCategory(activeFilter) && !isCategoryExternallyManaged(activeFilter) && !hasCompleteMetadataForInitialTimeFilter(activeFilter)) {
+          fetchClipMetadata(activeFilter, 1);
+        } else if (!isCategoryExternallyManaged(activeFilter) && !clipMetadataRef.current[activeFilter]) {
+          fetchClipMetadata(activeFilter, 1);
+        }
       }
     }
   }, [activeFilter]);
+  useEffect(() => {
+    const requestedCategory = activeFilter;
+    if (!requestedCategory || !isInitialTimeFilterCategory(requestedCategory) || isCategoryExternallyManaged(requestedCategory) || hasCompleteMetadataForInitialTimeFilter(requestedCategory)) {
+      return;
+    }
+    fetchClipMetadata(requestedCategory, 1);
+  }, [
+    activeFilter,
+    fetchClipMetadata,
+    hasCompleteMetadataForInitialTimeFilter,
+    isCategoryExternallyManaged,
+    isInitialTimeFilterCategory
+  ]);
   useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -47050,25 +48107,34 @@ var FileManagerFilters = ({
     }
     try {
       const clipDate = new Date(clipTimestamp);
-      const clipTimeStr = clipDate.toLocaleTimeString("en-US", {
+      const clipParts = new Intl.DateTimeFormat("en-US", {
         hour12: false,
         hour: "2-digit",
         minute: "2-digit",
-        timeZone: timezone
-      });
-      return clipTimeStr >= startTime && clipTimeStr <= endTime;
+        timeZone: activeTimeFilterTimezone
+      }).formatToParts(clipDate);
+      const hourValue = clipParts.find((part) => part.type === "hour")?.value;
+      const minuteValue = clipParts.find((part) => part.type === "minute")?.value;
+      const clipMinute = timeValueToMinutes(`${hourValue}:${minuteValue}`);
+      return clipMinute === null ? false : isMinuteInTimeWindow(clipMinute, startTime, endTime);
     } catch (error) {
       console.error("[FileManager] Error parsing clip timestamp:", error);
       return true;
     }
-  }, [isTimeFilterActive, startTime, endTime, timezone]);
+  }, [isTimeFilterActive, startTime, endTime, activeTimeFilterTimezone]);
   const filterTree = useMemo(() => {
     const tree = [];
     const regularCategoryNodes = [];
-    categories.forEach((category) => {
+    categoriesForTree.forEach((category) => {
+      if (category.id === "fast-cycles" || category.id === "slow-cycles") {
+        return;
+      }
       const categoryCount = counts?.[category.id] || 0;
-      const categoryClips = clipMetadata[category.id] || [];
-      let filteredClips = categoryClips.filter((clip) => isClipInTimeRange(clip.clip_timestamp));
+      const categoryMetadataClips = getAvailableClipMetadata(category.id);
+      const categoryVideoFallbackClips = categoryMetadataClips.length === 0 && isInitialTimeFilterCategory(category.id) ? videos.filter((video) => video.type === category.id).map(buildClipMetadataFromVideo).filter((clip) => isClipInTimeRange(clip.clip_timestamp)) : [];
+      const categoryClips = categoryMetadataClips.length > 0 ? categoryMetadataClips : categoryVideoFallbackClips;
+      const timeFilteredClips = categoryClips.filter((clip) => isClipInTimeRange(clip.clip_timestamp));
+      let filteredClips = timeFilteredClips;
       if (category.id === RECENT_FLOW_RED_STREAK_CLIP_TYPE2) {
         filteredClips = sortRedFlowMetadata(filteredClips);
       }
@@ -47078,9 +48144,22 @@ var FileManagerFilters = ({
           return classification?.label === idleLabelFilter;
         });
       }
-      const displayCount = isTimeFilterActive || category.id === "idle_time" && idleLabelFilter ? filteredClips.length : categoryCount;
+      const scopedTotal = typeof scopedCategoryTotals[category.id] === "number" ? scopedCategoryTotals[category.id] : null;
+      const isScopedByTimeFilter = isCategoryScopedByTimeFilter(category.id);
+      const scopedPageLoaded = isScopedByTimeFilter && typeof scopedCategoryTotals[category.id] === "number";
+      const scopedResponseHadOutOfHourClips = categoryClips.length > filteredClips.length;
+      const shouldTrustScopedTotal = !scopedResponseHadOutOfHourClips || Boolean(categoryHasMore[category.id]);
+      const isCategoryMetadataLoading = Array.from(loadingCategories).some((key) => key.startsWith(`${category.id}-`));
+      const isScopedTotalPending = isTimeFilterActive && isScopedByTimeFilter && scopedTotal === null;
+      const displayCount = isScopedTotalPending ? null : isTimeFilterActive && isScopedByTimeFilter && scopedTotal !== null ? shouldTrustScopedTotal ? scopedTotal : filteredClips.length : isTimeFilterActive || category.id === "idle_time" && idleLabelFilter ? filteredClips.length : categoryCount;
+      const shouldShowScopedEmptyCategory = Boolean(
+        scopedPageLoaded && !isCategoryMetadataLoading && !categoryHasMore[category.id] && filteredClips.length === 0 && (isRequiredHourlyFilterCategory(category.id) || activeFilter === category.id)
+      );
+      const shouldShowScopedLoadingCategory = Boolean(
+        isScopedTotalPending && (isRequiredHourlyFilterCategory(category.id) || !activeInitialTimeFilter || activeFilter === category.id)
+      );
       const shouldShowEmptyIdleTime = category.id === "idle_time" && idleLabelFilter;
-      if ((displayCount > 0 || shouldShowEmptyIdleTime) && shouldShowCategory(category.id)) {
+      if ((typeof displayCount === "number" && displayCount > 0 || shouldShowEmptyIdleTime || isCategoryMetadataLoading || shouldShowScopedEmptyCategory || shouldShowScopedLoadingCategory) && shouldShowCategory(category.id)) {
         const colorClasses = getColorClasses(category.color);
         const clipNodes = filteredClips.map((clip, index) => {
           const cycleTime = extractCycleTimeSeconds(clip);
@@ -47090,7 +48169,7 @@ var FileManagerFilters = ({
           const baseTimeLabel = formatClipExplorerTimeLabel({
             categoryId: category.id,
             clipTimestamp: clip.clip_timestamp,
-            timezone,
+            timezone: activeTimeFilterTimezone,
             durationSeconds: idleDuration ?? clip.duration,
             idleStartTime: clip.idle_start_time,
             idleEndTime: clip.idle_end_time,
@@ -47128,6 +48207,7 @@ var FileManagerFilters = ({
           type: "category",
           count: displayCount,
           // Use filtered count when time filter is active
+          countLoading: isScopedTotalPending || isCategoryMetadataLoading && scopedTotal === null,
           children: clipNodes,
           // Use clip nodes from metadata
           icon: expandedNodes.has(category.id) ? /* @__PURE__ */ jsx(FolderOpen, { className: `h-4 w-4 ${colorClasses.text}` }) : getCategoryIcon(category.icon, colorClasses),
@@ -47135,10 +48215,18 @@ var FileManagerFilters = ({
         });
       }
     });
-    const filteredFastCycles = (percentileClips["fast-cycles"] || []).filter((clip) => isClipInTimeRange(clip.creation_timestamp || ""));
-    const filteredSlowCycles = (percentileClips["slow-cycles"] || []).filter((clip) => isClipInTimeRange(clip.creation_timestamp || ""));
+    const filteredFastCycles = sortPercentileCycleClipsForDisplay(
+      "fast-cycles",
+      (percentileClips["fast-cycles"] || []).filter((clip) => isClipInTimeRange(clip.creation_timestamp || ""))
+    );
+    const filteredSlowCycles = sortPercentileCycleClipsForDisplay(
+      "slow-cycles",
+      (percentileClips["slow-cycles"] || []).filter((clip) => isClipInTimeRange(clip.creation_timestamp || ""))
+    );
     const fastCount = typeof percentileCounts["fast-cycles"] === "number" ? percentileCounts["fast-cycles"] : null;
     const slowCount = typeof percentileCounts["slow-cycles"] === "number" ? percentileCounts["slow-cycles"] : null;
+    const isFastCountPending = showPercentileCycleFilters && fastCount === null;
+    const isSlowCountPending = showPercentileCycleFilters && slowCount === null;
     const percentileCategories = showPercentileCycleFilters ? [
       {
         id: "fast-cycles",
@@ -47147,6 +48235,7 @@ var FileManagerFilters = ({
         description: "Top 10% fastest performance",
         type: "percentile-category",
         count: isTimeFilterActive ? fastCount === null && filteredFastCycles.length === 0 ? null : filteredFastCycles.length : fastCount,
+        countLoading: isFastCountPending,
         icon: getPercentileIcon("fast-cycles", expandedNodes.has("fast-cycles"), { text: "text-green-600" }),
         color: "green",
         percentileType: "fast-cycles",
@@ -47158,7 +48247,7 @@ var FileManagerFilters = ({
             label: `${formatClipExplorerTimeLabel({
               categoryId: "fast-cycles",
               clipTimestamp: clip.creation_timestamp || clip.timestamp || "",
-              timezone,
+              timezone: activeTimeFilterTimezone,
               durationSeconds: cycleTime
             })}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
             type: "video",
@@ -47178,6 +48267,7 @@ var FileManagerFilters = ({
         description: "Bottom 10% slowest performance",
         type: "percentile-category",
         count: isTimeFilterActive ? slowCount === null && filteredSlowCycles.length === 0 ? null : filteredSlowCycles.length : slowCount,
+        countLoading: isSlowCountPending,
         icon: getPercentileIcon("slow-cycles", expandedNodes.has("slow-cycles"), { text: "text-red-600" }),
         color: "red",
         percentileType: "slow-cycles",
@@ -47189,7 +48279,7 @@ var FileManagerFilters = ({
             label: `${formatClipExplorerTimeLabel({
               categoryId: "slow-cycles",
               clipTimestamp: clip.creation_timestamp || clip.timestamp || "",
-              timezone,
+              timezone: activeTimeFilterTimezone,
               durationSeconds: cycleTime
             })}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
             type: "video",
@@ -47220,7 +48310,7 @@ var FileManagerFilters = ({
             hour12: true,
             hour: 'numeric',
             minute: '2-digit',
-            timeZone: timezone
+            timeZone: activeTimeFilterTimezone
           });
           
           return {
@@ -47239,7 +48329,11 @@ var FileManagerFilters = ({
     const orderedIds = [RECENT_FLOW_RED_STREAK_CLIP_TYPE2, "cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
     orderedIds.forEach((orderedId) => {
       const percentileCategory = percentileCategories.find((cat) => cat.id === orderedId);
-      const shouldIncludePercentile = percentileCategory ? typeof percentileCategory.count === "number" && percentileCategory.count > 0 : false;
+      const shouldIncludePercentile = percentileCategory ? typeof percentileCategory.count === "number" || Boolean(
+        isTimeFilterActive && isRequiredHourlyFilterCategory(orderedId) && typeof percentileCategory.count === "number" && percentileCategory.count === 0
+      ) || Boolean(
+        percentileCategory.countLoading && (isRequiredHourlyFilterCategory(orderedId) || !activeInitialTimeFilter || activeFilter === orderedId)
+      ) : false;
       if (percentileCategory && shouldIncludePercentile && shouldShowCategory(orderedId)) {
         tree.push(percentileCategory);
       }
@@ -47254,23 +48348,263 @@ var FileManagerFilters = ({
       }
     });
     percentileCategories.forEach((category) => {
-      const shouldIncludePercentile = typeof category.count === "number" && category.count > 0;
+      const shouldIncludePercentile = typeof category.count === "number" || Boolean(
+        isTimeFilterActive && isRequiredHourlyFilterCategory(category.id) && typeof category.count === "number" && category.count === 0
+      ) || Boolean(
+        category.countLoading && (isRequiredHourlyFilterCategory(category.id) || !activeInitialTimeFilter || activeFilter === category.id)
+      );
       if (!orderedIds.includes(category.id) && shouldIncludePercentile && shouldShowCategory(category.id)) {
         tree.push(category);
       }
     });
     return tree;
-  }, [categories, expandedNodes, counts, clipMetadata, percentileCounts, percentileClips, shouldShowCategory, getPercentileIcon, isClipInTimeRange, isTimeFilterActive, showPercentileCycleFilters]);
+  }, [categoriesForTree, expandedNodes, counts, getAvailableClipMetadata, percentileCounts, percentileClips, shouldShowCategory, getPercentileIcon, isClipInTimeRange, isTimeFilterActive, showPercentileCycleFilters, loadingCategories, activeTimeFilterTimezone, isInitialTimeFilterCategory, isRequiredHourlyFilterCategory, hasCompleteMetadataForInitialTimeFilter, scopedCategoryTotals, isCategoryScopedByTimeFilter, categoryHasMore, activeFilter]);
+  const chartHandoffVideoFallbackTree = useMemo(() => {
+    if (!startTime || !endTime || !activeInitialTimeFilter || !activeFilter) {
+      return [];
+    }
+    const fallbackCategory = categoriesForTree.find((category) => category.id === activeFilter) || categoriesForTree.find((category) => videos.some((video) => video.type === category.id));
+    if (!fallbackCategory) {
+      return [];
+    }
+    const fallbackVideos = videos.filter((video) => video.type === fallbackCategory.id);
+    const sourceVideos = fallbackVideos.map(buildClipMetadataFromVideo).filter((clip) => isClipInTimeRange(clip.clip_timestamp));
+    if (sourceVideos.length === 0) {
+      return [];
+    }
+    const colorClasses = getColorClasses(fallbackCategory.color);
+    const clipNodes = sourceVideos.map((clip, index) => {
+      const cycleTime = extractCycleTimeSeconds(clip);
+      const baseTimeLabel = formatClipExplorerTimeLabel({
+        categoryId: fallbackCategory.id,
+        clipTimestamp: clip.clip_timestamp,
+        timezone: activeTimeFilterTimezone,
+        durationSeconds: clip.duration,
+        idleStartTime: clip.idle_start_time,
+        idleEndTime: clip.idle_end_time,
+        clipStartTime: clip.clip_start_time,
+        clipEndTime: clip.clip_end_time
+      });
+      const displayLabel = `${baseTimeLabel}${clip.duration && fallbackCategory.id !== "idle_time" && fallbackCategory.id !== "low_value" && fallbackCategory.id !== RECENT_FLOW_RED_STREAK_CLIP_TYPE2 ? ` - (${clip.duration.toFixed(1)}s)` : ""}`;
+      return {
+        id: clip.id,
+        label: displayLabel,
+        type: "video",
+        icon: getSeverityIcon(clip.severity, fallbackCategory.id, cycleTime, resolvedTargetCycleTime, clip.clipId),
+        timestamp: clip.clip_timestamp,
+        severity: clip.severity,
+        clipId: clip.clipId,
+        categoryId: fallbackCategory.id,
+        clipPosition: index + 1,
+        cycleTimeSeconds: cycleTime,
+        duration: clip.duration,
+        cycleItemCount: null,
+        redFlowSeverityScore: clip.red_flow_severity_score ?? null,
+        redFlowExplanationSummary: clip.red_flow_explanation_summary ?? clip.red_flow_explanation?.summary ?? null
+      };
+    });
+    return [{
+      id: activeFilter,
+      label: fallbackCategory.id === RECENT_FLOW_RED_STREAK_CLIP_TYPE2 ? RECENT_FLOW_RED_STREAK_DISPLAY_LABEL : fallbackCategory.label,
+      subtitle: fallbackCategory.subtitle || fallbackCategory.description,
+      description: fallbackCategory.description,
+      type: "category",
+      count: clipNodes.length,
+      children: clipNodes,
+      icon: /* @__PURE__ */ jsx(FolderOpen, { className: `h-4 w-4 ${colorClasses.text}` }),
+      color: fallbackCategory.color
+    }];
+  }, [
+    activeFilter,
+    activeInitialTimeFilter,
+    activeTimeFilterTimezone,
+    categoriesForTree,
+    counts,
+    currentVideoId,
+    endTime,
+    getDisplayValue,
+    isClipInTimeRange,
+    resolvedTargetCycleTime,
+    startTime,
+    videos
+  ]);
+  const displayedFilterTree = useMemo(() => {
+    if (chartHandoffVideoFallbackTree.length === 0) {
+      return filterTree;
+    }
+    if (filterTree.length === 0) {
+      return chartHandoffVideoFallbackTree;
+    }
+    const fallbackNode = chartHandoffVideoFallbackTree[0];
+    const activeNode = filterTree.find((node) => node.id === activeFilter);
+    const activeNodeHasChildren = (activeNode?.children?.length || 0) > 0;
+    const shouldReplaceActiveNode = Boolean(
+      activeFilter && fallbackNode && activeNode && !activeNodeHasChildren && isInitialTimeFilterCategory(activeFilter)
+    );
+    if (!shouldReplaceActiveNode) {
+      return filterTree;
+    }
+    return filterTree.map((node) => node.id === activeFilter ? fallbackNode : node);
+  }, [activeFilter, chartHandoffVideoFallbackTree, filterTree, isInitialTimeFilterCategory]);
+  const getSelectionContextForNodes = useCallback((categoryId, clipNodes) => {
+    const normalizeSeverity = (severity) => severity === "low" || severity === "medium" || severity === "high" ? severity : "medium";
+    const scopedNodes = clipNodes.filter((node) => node.type === "video" && Boolean(node.clipId || node.id));
+    const scopedNodeClips = scopedNodes.map((node, index) => ({
+      id: node.clipId || node.id,
+      clipId: node.clipId || node.id,
+      clip_timestamp: node.timestamp || "",
+      creation_timestamp: node.timestamp || "",
+      description: node.label,
+      severity: normalizeSeverity(node.severity),
+      category: categoryId,
+      duration: node.duration,
+      cycle_time_seconds: node.cycleTimeSeconds,
+      index
+    }));
+    const categoryClips = getAvailableClipMetadata(categoryId);
+    const contextClips = isCategoryScopedByTimeFilter(categoryId) && scopedNodeClips.length > 0 ? scopedNodeClips : categoryClips.length > 0 ? categoryClips : scopedNodeClips;
+    const scopedTotal = scopedCategoryTotals[categoryId];
+    const total = typeof scopedTotal === "number" ? scopedTotal : counts?.[categoryId];
+    return contextClips.length ? { clips: contextClips, total } : void 0;
+  }, [counts, getAvailableClipMetadata, isCategoryScopedByTimeFilter, scopedCategoryTotals]);
+  useEffect(() => {
+    if (!activeInitialTimeFilter || !startTime || !endTime || currentVideoId || !onClipSelect) {
+      return;
+    }
+    const categoryPriority = Array.from(new Set([
+      activeInitialTimeFilter.categoryId,
+      activeFilter,
+      ...activeInitialTimeFilter.categoryIds || []
+    ].filter((value) => typeof value === "string" && value.length > 0)));
+    const preferredCategoryId = categoryPriority[0];
+    const orderedCategoryNodes = displayedFilterTree.filter((categoryNode) => isInitialTimeFilterCategory(categoryNode.id)).sort((left, right) => {
+      const leftIndex = categoryPriority.indexOf(left.id);
+      const rightIndex = categoryPriority.indexOf(right.id);
+      const leftPriority = leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex;
+      const rightPriority = rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex;
+      return leftPriority - rightPriority;
+    });
+    const preferredCategoryNode = preferredCategoryId ? orderedCategoryNodes.find((categoryNode) => categoryNode.id === preferredCategoryId) : void 0;
+    if (preferredCategoryId && !preferredCategoryNode) {
+      const preferredKnownTotal = preferredCategoryId === "fast-cycles" || preferredCategoryId === "slow-cycles" ? percentileCounts[preferredCategoryId] : scopedCategoryTotals[preferredCategoryId];
+      if (preferredKnownTotal !== 0) {
+        return;
+      }
+    }
+    const preferredFirstClipNode = preferredCategoryNode?.children?.find((child) => child.type === "video" && Boolean(child.clipId) && Boolean(child.categoryId));
+    if (preferredCategoryId && preferredCategoryNode && !preferredFirstClipNode) {
+      const preferredKnownTotal = preferredCategoryId === "fast-cycles" || preferredCategoryId === "slow-cycles" ? percentileCounts[preferredCategoryId] : scopedCategoryTotals[preferredCategoryId];
+      if (preferredKnownTotal !== 0) {
+        return;
+      }
+    }
+    for (const categoryNode of orderedCategoryNodes) {
+      const firstClipNode = categoryNode.children?.find((child) => child.type === "video" && Boolean(child.clipId) && Boolean(child.categoryId));
+      if (!firstClipNode?.clipId || !firstClipNode.categoryId) {
+        continue;
+      }
+      const selectionKey = `${activeTimeFilterKey}:${firstClipNode.categoryId}:${firstClipNode.clipId}:${currentVideoId || "none"}`;
+      if (autoSelectedScopedClipRef.current === selectionKey) {
+        return;
+      }
+      autoSelectedScopedClipRef.current = selectionKey;
+      const selectionContext = getSelectionContextForNodes(firstClipNode.categoryId, categoryNode.children || []);
+      onClipSelect(
+        firstClipNode.categoryId,
+        firstClipNode.clipId,
+        firstClipNode.clipPosition,
+        selectionContext
+      );
+      return;
+    }
+  }, [
+    activeInitialTimeFilter,
+    activeFilter,
+    activeTimeFilterKey,
+    currentVideoId,
+    displayedFilterTree,
+    endTime,
+    getSelectionContextForNodes,
+    isInitialTimeFilterCategory,
+    onClipSelect,
+    percentileCounts,
+    scopedCategoryTotals,
+    startTime
+  ]);
+  const isChartHandoffLoading = useMemo(() => {
+    if (!startTime || !endTime || !activeInitialTimeFilter || !activeFilter || !isInitialTimeFilterCategory(activeFilter)) {
+      return false;
+    }
+    const pageOneLoadingKey = getMetadataLoadingKey(activeFilter, 1);
+    return Boolean(
+      activeCategoryLoading || Array.from(loadingCategories).some((key) => key === pageOneLoadingKey || key.startsWith(`${pageOneLoadingKey}-all`))
+    );
+  }, [
+    activeCategoryLoading,
+    activeFilter,
+    activeInitialTimeFilter,
+    endTime,
+    getMetadataLoadingKey,
+    isInitialTimeFilterCategory,
+    loadingCategories,
+    startTime
+  ]);
+  useEffect(() => {
+    if (!isTimeFilterActive || !startTime || !endTime || !activeFilter || activeFilter === "all" || !onClipSelect) {
+      return;
+    }
+    const activeCategoryNode = displayedFilterTree.find((categoryNode) => categoryNode.id === activeFilter);
+    const activeClipNodes = (activeCategoryNode?.children || []).filter((child) => child.type === "video" && Boolean(child.clipId) && Boolean(child.categoryId));
+    if (activeClipNodes.length === 0) {
+      return;
+    }
+    const currentClipIsVisible = Boolean(
+      currentVideoId && activeClipNodes.some((child) => (child.clipId || child.id) === currentVideoId)
+    );
+    if (currentClipIsVisible) {
+      return;
+    }
+    const firstClipNode = activeClipNodes[0];
+    if (!firstClipNode?.clipId || !firstClipNode.categoryId) {
+      return;
+    }
+    const selectionKey = `${activeTimeFilterKey}:${firstClipNode.categoryId}:${firstClipNode.clipId}:${currentVideoId || "none"}`;
+    if (autoSelectedScopedClipRef.current === selectionKey) {
+      return;
+    }
+    autoSelectedScopedClipRef.current = selectionKey;
+    const selectionContext = getSelectionContextForNodes(firstClipNode.categoryId, activeClipNodes);
+    onClipSelect(
+      firstClipNode.categoryId,
+      firstClipNode.clipId,
+      firstClipNode.clipPosition,
+      selectionContext
+    );
+  }, [
+    activeFilter,
+    activeTimeFilterKey,
+    currentVideoId,
+    displayedFilterTree,
+    endTime,
+    getSelectionContextForNodes,
+    isTimeFilterActive,
+    onClipSelect,
+    startTime
+  ]);
   const toggleExpanded = (nodeId) => {
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(nodeId)) {
       newExpanded.delete(nodeId);
     } else {
       newExpanded.add(nodeId);
-      const category = categories.find((cat) => cat.id === nodeId);
-      if (category && !clipMetadata[nodeId] && !isCategoryExternallyManaged(nodeId)) {
+      const category = categoriesForTree.find((cat) => cat.id === nodeId);
+      if (category) {
         console.log(`[FileManager] Fetching clips for expanded category: ${nodeId}`);
-        fetchClipMetadata(nodeId, 1);
+        if (isInitialTimeFilterCategory(nodeId) && !hasCompleteMetadataForInitialTimeFilter(nodeId)) {
+          fetchClipMetadata(nodeId, 1);
+        } else if (!hasKnownClipMetadata(nodeId) && !isCategoryExternallyManaged(nodeId)) {
+          fetchClipMetadata(nodeId, 1);
+        }
       }
       if (!isCategoryExternallyManaged(nodeId) && showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
         fetchPercentileClips("fast-cycles");
@@ -47288,10 +48622,14 @@ var FileManagerFilters = ({
         newExpanded.delete(node.id);
       } else {
         newExpanded.add(node.id);
-        const category = categories.find((cat) => cat.id === node.id);
-        if (category && !clipMetadata[node.id] && !isCategoryExternallyManaged(node.id)) {
+        const category = categoriesForTree.find((cat) => cat.id === node.id);
+        if (category) {
           console.log(`[FileManager] Fetching clips for expanded category: ${node.id}`);
-          fetchClipMetadata(node.id, 1);
+          if (isInitialTimeFilterCategory(node.id) && !hasCompleteMetadataForInitialTimeFilter(node.id)) {
+            fetchClipMetadata(node.id, 1);
+          } else if (!hasKnownClipMetadata(node.id) && !isCategoryExternallyManaged(node.id)) {
+            fetchClipMetadata(node.id, 1);
+          }
         }
         if (!isCategoryExternallyManaged(node.id) && showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
           fetchPercentileClips("fast-cycles");
@@ -47301,7 +48639,21 @@ var FileManagerFilters = ({
         }
       }
       setExpandedNodes(newExpanded);
-      onFilterChange(node.id);
+      if (node.id !== activeFilter) {
+        onFilterChange(node.id);
+      }
+      if (isCategoryScopedByTimeFilter(node.id) && onClipSelect && node.children?.length) {
+        const firstClipNode = node.children.find((child) => child.type === "video" && Boolean(child.clipId) && Boolean(child.categoryId));
+        if (firstClipNode?.clipId && firstClipNode.categoryId) {
+          const selectionContext = getSelectionContextForNodes(firstClipNode.categoryId, node.children);
+          onClipSelect(
+            firstClipNode.categoryId,
+            firstClipNode.clipId,
+            firstClipNode.clipPosition,
+            selectionContext
+          );
+        }
+      }
       if (node.id === "fast-cycles") {
         trackCoreEvent("Fast Clips Clicked", {
           workspaceId,
@@ -47339,8 +48691,11 @@ var FileManagerFilters = ({
     } else if (node.type === "video") {
       if (onClipSelect && node.categoryId !== void 0 && node.clipId !== void 0) {
         console.log(`[FileManager] Selecting clip: category=${node.categoryId}, clipId=${node.clipId}, position=${node.clipPosition}`);
-        const categoryClips = node.categoryId ? clipMetadata[node.categoryId] : void 0;
-        const selectionContext = categoryClips?.length ? { clips: categoryClips, total: counts?.[node.categoryId] } : void 0;
+        const categoryNode = displayedFilterTree.find((candidate) => candidate.id === node.categoryId);
+        const selectionContext = getSelectionContextForNodes(
+          node.categoryId,
+          categoryNode?.children || [node]
+        );
         onClipSelect(node.categoryId, node.clipId, node.clipPosition, selectionContext);
       } else {
         const videoIndex = videos.findIndex((v) => v.id === node.id);
@@ -47353,24 +48708,40 @@ var FileManagerFilters = ({
   const renderNode = (node, depth = 0) => {
     const isExpanded = expandedNodes.has(node.id);
     const isActive = activeFilter === node.id;
-    const isCurrentVideo = currentVideoId === node.id;
-    const isCountUnknown = node.type === "percentile-category" && node.count === null;
-    const hasChildren = isCountUnknown || (node.count || 0) > 0;
-    const hasLoadedChildren = (clipMetadata[node.id]?.length || percentileClips[node.id]?.length || 0) > 0;
+    const nodeClipId = node.clipId || node.id;
+    const isCurrentVideo = Boolean(
+      node.type === "video" && currentVideoId && currentVideoId === nodeClipId
+    );
+    const isCountUnknown = Boolean(
+      (node.type === "category" || node.type === "percentile-category") && (node.count === null || node.countLoading)
+    );
+    const hasRenderedChildren = (node.children?.length || 0) > 0;
     const loadedPage = categoryPages[node.id] || 0;
     const pageOneLoadingKey = getMetadataLoadingKey(node.id, 1);
     const nextMetadataPage = loadedPage + 1;
     const nextLoadMorePage = (categoryPages[node.id] || 1) + 1;
     const isPageOneLoading = loadingCategories.has(pageOneLoadingKey);
+    const isFullCategoryLoading = Array.from(loadingCategories).some((key) => key.startsWith(`${pageOneLoadingKey}-all`));
     const isLoadMoreLoading = loadedPage > 0 && loadingCategories.has(getMetadataLoadingKey(node.id, nextMetadataPage));
+    const isNodeLoading = Boolean(
+      isPageOneLoading || isFullCategoryLoading || activeCategoryLoading && node.id === activeFilter
+    );
+    const totalForLoadMore = isCategoryScopedByTimeFilter(node.id) && typeof scopedCategoryTotals[node.id] === "number" ? scopedCategoryTotals[node.id] : counts?.[node.id] || 0;
     const showInitialLoadingState = Boolean(
-      isExpanded && !hasLoadedChildren && (node.type === "category" || node.type === "percentile-category") && (isPageOneLoading || activeCategoryLoading && node.id === activeFilter)
+      isExpanded && !hasRenderedChildren && (node.type === "category" || node.type === "percentile-category") && isNodeLoading
+    );
+    const showScopedEmptyState = Boolean(
+      isExpanded && !hasRenderedChildren && !isNodeLoading && !categoryHasMore[node.id] && isCategoryScopedByTimeFilter(node.id) && (node.type === "category" || node.type === "percentile-category")
     );
+    const hasChildren = isCountUnknown || (node.count || 0) > 0 || isNodeLoading || showScopedEmptyState;
     const colorClasses = node.color ? getColorClasses(node.color) : null;
     return /* @__PURE__ */ jsxs("div", { className: "select-none animate-in", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
+          "aria-current": isCurrentVideo ? "true" : void 0,
+          "data-qa-clips-row-clip-id": node.type === "video" ? nodeClipId : void 0,
+          "data-qa-clips-row-category-id": node.type === "video" ? node.categoryId : void 0,
           className: `flex items-center cursor-pointer transition-all duration-300 ease-out group relative overflow-hidden ${node.type === "category" && depth === 0 ? `py-3 px-4 rounded-2xl hover:bg-gradient-to-r hover:from-slate-50 hover:to-blue-50/30 hover:shadow-lg hover:shadow-blue-100/20 hover:scale-[1.02] hover:-translate-y-0.5 ${isActive ? "bg-gradient-to-r from-blue-50 via-blue-50/80 to-indigo-50/60 border border-blue-200/50 shadow-lg shadow-blue-100/30 scale-[1.02]" : "border border-transparent"}` : `py-2 px-3 rounded-xl hover:bg-gradient-to-r hover:from-slate-50 hover:to-slate-50/50 hover:shadow-sm ${isActive ? "bg-gradient-to-r from-blue-50/80 to-blue-50/40 border border-blue-200/30 shadow-sm" : "border border-transparent"} ${isCurrentVideo ? "bg-gradient-to-r from-blue-50 to-blue-50/60 border border-blue-200/50 shadow-md shadow-blue-100/20" : ""}`} ${node.type === "video" ? "ml-6" : ""}`,
           onClick: () => handleNodeClick(node),
           children: [
@@ -47406,7 +48777,7 @@ var FileManagerFilters = ({
             /* @__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" || node.type === "percentile-category" ? "text-slate-800 text-sm" : "text-slate-700 text-xs"} ${isCurrentVideo ? "text-blue-700 font-bold" : ""} group-hover:text-slate-900 transition-colors duration-200`, children: node.label }),
-                node.type === "category" && (node.subtitle || categories.find((c) => c.id === node.id)?.description) && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: node.subtitle || categories.find((c) => c.id === node.id)?.description }),
+                node.type === "category" && (node.subtitle || categoriesForTree.find((c) => c.id === node.id)?.description) && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: node.subtitle || categoriesForTree.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 || node.categoryId === "cycle_completion" || node.categoryId === "idle_time" || node.categoryId === "low_value" || node.categoryId === RECENT_FLOW_RED_STREAK_CLIP_TYPE2) && /* @__PURE__ */ jsx("div", { className: "text-xs mt-0.5 font-medium", children: node.categoryId === "idle_time" ? (
                   // Show root cause label for idle time clips (text only, icon is on the left)
@@ -47442,7 +48813,7 @@ var FileManagerFilters = ({
                   })()
                 ) })
               ] }),
-              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 === null ? "\u2014" : 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: isCountUnknown ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : node.count }) })
             ] })
           ]
         }
@@ -47453,6 +48824,7 @@ var FileManagerFilters = ({
           /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
           "Loading clips..."
         ] }) }),
+        showScopedEmptyState && /* @__PURE__ */ jsx("div", { className: "py-2 px-3 text-center text-sm text-slate-500", children: "No clips found" }),
         isLoadMoreLoading && /* @__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" }),
           "Loading more clips..."
@@ -47467,7 +48839,7 @@ var FileManagerFilters = ({
             className: "w-full py-2 px-3 text-sm text-blue-600 hover:bg-blue-50 rounded-lg transition-colors duration-200 text-center",
             children: [
               "Load more clips (",
-              (counts?.[node.id] || 0) - (clipMetadata[node.id]?.length || 0),
+              Math.max(0, totalForLoadMore - getAvailableClipMetadata(node.id).length),
               " remaining)"
             ]
           }
@@ -47530,6 +48902,8 @@ var FileManagerFilters = ({
                 e.stopPropagation();
                 setStartTime("");
                 setEndTime("");
+                setActiveInitialTimeFilter(null);
+                setScopedCategoryTotals({});
                 setIsTimeFilterActive(false);
               },
               className: "rounded-full p-0.5 transition-colors hover:bg-blue-100",
@@ -47663,6 +49037,8 @@ var FileManagerFilters = ({
                   onClick: () => {
                     setStartTime("");
                     setEndTime("");
+                    setActiveInitialTimeFilter(null);
+                    setScopedCategoryTotals({});
                     setStartSearchTerm("");
                     setEndSearchTerm("");
                     setIsTimeFilterActive(false);
@@ -47751,8 +49127,13 @@ var FileManagerFilters = ({
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex-1 min-h-0 overflow-y-auto scrollbar-thin", children: [
-      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filterTree.map((node) => renderNode(node)) }),
-      filterTree.length === 0 && (startTime || endTime) && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: displayedFilterTree.map((node) => renderNode(node)) }),
+      displayedFilterTree.length === 0 && isChartHandoffLoading && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+        /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-blue-500" }) }),
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "Loading clips..." }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Finding clips from the selected hour" })
+      ] }),
+      displayedFilterTree.length === 0 && !isChartHandoffLoading && (startTime || endTime) && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsx(Clock, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clips found" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500 mb-4", children: "No clips match the selected time range" }),
@@ -47762,6 +49143,8 @@ var FileManagerFilters = ({
             onClick: () => {
               setStartTime("");
               setEndTime("");
+              setActiveInitialTimeFilter(null);
+              setScopedCategoryTotals({});
               setIsTimeFilterActive(false);
             },
             className: "inline-flex items-center px-4 py-2 bg-blue-50 text-blue-600 text-sm font-medium rounded-lg hover:bg-blue-100 transition-colors duration-200",
@@ -47769,12 +49152,12 @@ var FileManagerFilters = ({
           }
         )
       ] }),
-      filterTree.length === 0 && !startTime && !endTime && categories.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+      displayedFilterTree.length === 0 && !startTime && !endTime && categories.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsx(HelpCircle, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clip types available" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Loading clip categories..." })
       ] }),
-      filterTree.length === 0 && !startTime && !endTime && categories.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+      displayedFilterTree.length === 0 && !startTime && !endTime && categories.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsx(Play, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clips available" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "No clips found for the selected time period" })
@@ -48181,6 +49564,65 @@ function useClipsRealtimeUpdates({
 }
 var LOW_EFFICIENCY_CATEGORY_ID = "recent_flow_red_streak";
 var LOW_EFFICIENCY_AI_SUMMARY_ENABLED = process.env.NEXT_PUBLIC_LOW_EFFICIENCY_AI_SUMMARY_ENABLED === "true";
+var timeValueToMinutes2 = (value) => {
+  const [hourValue, minuteValue] = value.substring(0, 5).split(":").map(Number);
+  if (!Number.isInteger(hourValue) || !Number.isInteger(minuteValue) || hourValue < 0 || hourValue > 23 || minuteValue < 0 || minuteValue > 59) {
+    return null;
+  }
+  return hourValue * 60 + minuteValue;
+};
+var isMinuteInTimeWindow2 = (minute, startValue, endValue) => {
+  const startMinute = timeValueToMinutes2(startValue);
+  const endMinute = timeValueToMinutes2(endValue);
+  if (startMinute === null || endMinute === null) {
+    return true;
+  }
+  return endMinute > startMinute ? minute >= startMinute && minute < endMinute : minute >= startMinute || minute < endMinute;
+};
+var CHART_HANDOFF_CATEGORY_FALLBACKS = {
+  cycle_completion: {
+    label: "Cycle Completion",
+    description: "Successfully completed production cycles",
+    color: "blue",
+    icon: "check-circle"
+  },
+  "fast-cycles": {
+    label: "Fast Cycles",
+    description: "Fastest cycle clips",
+    color: "green",
+    icon: "trending-up"
+  },
+  "slow-cycles": {
+    label: "Slow Cycles",
+    description: "Slowest cycle clips",
+    color: "red",
+    icon: "trending-down"
+  },
+  idle_time: {
+    label: "Idle Time",
+    description: "Low value activities and idle moments",
+    color: "amber",
+    icon: "clock"
+  },
+  recent_flow_red_streak: {
+    label: "Low moments",
+    description: "Moments of low efficiency",
+    color: "rose",
+    icon: "alert-triangle"
+  },
+  worst_cycle_time: {
+    label: "Slow Cycles",
+    description: "Slowest cycle clips",
+    color: "red",
+    icon: "trending-down"
+  },
+  best_cycle_time: {
+    label: "Fast Cycles",
+    description: "Fastest cycle clips",
+    color: "green",
+    icon: "trending-up"
+  }
+};
 var parseFiniteNumber2 = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -48228,6 +49670,7 @@ var BottlenecksContent = ({
   ticketId,
   prefetchedPercentileCounts,
   lowMomentsPrefetch,
+  initialTimePrefetch,
   initialTimeFilter
 }) => {
   console.log("\u{1F3AB} [BottlenecksContent] Rendered with ticketId:", ticketId || "NONE", "workspaceId:", workspaceId, "date:", date, "shift:", shift);
@@ -48440,6 +49883,108 @@ var BottlenecksContent = ({
     enabled: isEffectiveShiftReady
   });
   const isLowMomentsCategoryAvailable = useMemo(() => Array.isArray(clipTypes) && clipTypes.some((type) => type?.type === LOW_EFFICIENCY_CATEGORY_ID || type?.id === LOW_EFFICIENCY_CATEGORY_ID), [clipTypes]);
+  const requestedInitialCategoryCandidates = useMemo(() => {
+    const requestedCategories = [
+      ...Array.isArray(initialTimeFilter?.categoryIds) ? initialTimeFilter.categoryIds : [],
+      initialTimeFilter?.categoryId
+    ];
+    return Array.from(
+      new Set(
+        requestedCategories.filter((category) => Boolean(category)).map((category) => category.trim()).filter(Boolean)
+      )
+    );
+  }, [initialTimeFilter?.categoryId, initialTimeFilter?.categoryIds]);
+  const hasInitialTimeHandoff = Boolean(initialTimeFilter?.startTime && initialTimeFilter?.endTime);
+  const initialTimeHandoffCategorySet = useMemo(() => new Set(requestedInitialCategoryCandidates), [requestedInitialCategoryCandidates]);
+  const isInitialTimeHandoffCategory = useCallback((categoryId) => Boolean(
+    hasInitialTimeHandoff && categoryId && (initialTimeHandoffCategorySet.size === 0 || initialTimeHandoffCategorySet.has(categoryId))
+  ), [hasInitialTimeHandoff, initialTimeHandoffCategorySet]);
+  const isTimestampInInitialTimeHandoff = useCallback((timestamp) => {
+    if (!hasInitialTimeHandoff || !initialTimeFilter?.startTime || !initialTimeFilter?.endTime || !timestamp) {
+      return true;
+    }
+    try {
+      const clipDate = new Date(timestamp);
+      if (Number.isNaN(clipDate.getTime())) {
+        return false;
+      }
+      const clipParts = new Intl.DateTimeFormat("en-US", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        timeZone: initialTimeFilter.timezone || timezone
+      }).formatToParts(clipDate);
+      const hourValue = clipParts.find((part) => part.type === "hour")?.value;
+      const minuteValue = clipParts.find((part) => part.type === "minute")?.value;
+      const clipMinute = timeValueToMinutes2(`${hourValue}:${minuteValue}`);
+      return clipMinute === null ? false : isMinuteInTimeWindow2(clipMinute, initialTimeFilter.startTime, initialTimeFilter.endTime);
+    } catch {
+      return false;
+    }
+  }, [
+    hasInitialTimeHandoff,
+    initialTimeFilter?.endTime,
+    initialTimeFilter?.startTime,
+    initialTimeFilter?.timezone,
+    timezone
+  ]);
+  const resolvedInitialCategory = useMemo(() => resolveInitialClipCategory(requestedInitialCategoryCandidates, clipTypes, dynamicCounts), [clipTypes, dynamicCounts, requestedInitialCategoryCandidates]);
+  const initialTimeFilterKey = useMemo(() => hasInitialTimeHandoff ? [
+    initialTimeFilter?.startTime,
+    initialTimeFilter?.endTime,
+    initialTimeFilter?.timezone || timezone,
+    initialTimeFilter?.categoryId || "",
+    ...initialTimeFilter?.categoryIds || []
+  ].join("|") : "", [
+    hasInitialTimeHandoff,
+    initialTimeFilter?.categoryId,
+    initialTimeFilter?.categoryIds,
+    initialTimeFilter?.endTime,
+    initialTimeFilter?.startTime,
+    initialTimeFilter?.timezone,
+    timezone
+  ]);
+  const preferredInitialTimeCategory = resolvedInitialCategory || requestedInitialCategoryCandidates[0] || "";
+  useEffect(() => {
+    if (!initialTimeFilterKey) {
+      return;
+    }
+    setPendingVideo(null);
+    setAllVideos([]);
+    setCurrentIndex(0);
+    setCurrentClipId(null);
+    currentClipIdRef.current = null;
+    setCurrentMetadataIndex(0);
+    currentMetadataIndexRef.current = 0;
+    setCurrentPosition(0);
+    currentPositionRef.current = 0;
+    setCurrentTotal(0);
+    currentTotalRef.current = 0;
+    setCategoryMetadata([]);
+    categoryMetadataRef.current = [];
+    setCategoryMetadataCategoryId(null);
+    setCategoryMetadataSort(null);
+    clearRetryTimeout();
+    navigationLockRef.current = false;
+    loadingCategoryRef.current = null;
+    if (loadingTimeoutRef.current) {
+      clearTimeout(loadingTimeoutRef.current);
+      loadingTimeoutRef.current = null;
+    }
+    setIsTransitioning(false);
+    setIsNavigating(false);
+    setIsCategoryLoading(false);
+    if (preferredInitialTimeCategory) {
+      setInitialFilter(preferredInitialTimeCategory);
+      updateActiveFilter(preferredInitialTimeCategory);
+      previousFilterRef.current = "";
+    }
+  }, [
+    clearRetryTimeout,
+    initialTimeFilterKey,
+    preferredInitialTimeCategory,
+    updateActiveFilter
+  ]);
   console.log("[BottlenecksContent] Clip types data:", {
     clipTypes,
     clipTypesLength: clipTypes?.length,
@@ -48487,6 +50032,15 @@ var BottlenecksContent = ({
     }
   });
   useEffect(() => {
+    if (resolvedInitialCategory) {
+      if (initialFilter !== resolvedInitialCategory) {
+        setInitialFilter(resolvedInitialCategory);
+      }
+      if (activeFilterRef.current !== resolvedInitialCategory) {
+        updateActiveFilter(resolvedInitialCategory);
+      }
+      return;
+    }
     if (initialFilter) {
       return;
     }
@@ -48503,7 +50057,15 @@ var BottlenecksContent = ({
       activeFilterRef.current = defaultCategory;
       return;
     }
-  }, [clipTypes, dynamicCounts, defaultCategory, initialFilter, isLowMomentsCategoryAvailable]);
+  }, [
+    clipTypes,
+    dynamicCounts,
+    defaultCategory,
+    initialFilter,
+    isLowMomentsCategoryAvailable,
+    resolvedInitialCategory,
+    updateActiveFilter
+  ]);
   const mergedCounts = useMemo(() => {
     return { ...dynamicCounts };
   }, [dynamicCounts]);
@@ -48552,6 +50114,9 @@ var BottlenecksContent = ({
   const loadFirstVideoForCategory = useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current || !isEffectiveShiftReady) return;
     const targetCategory = category || activeFilterRef.current;
+    if (targetCategory === "fast-cycles" || targetCategory === "slow-cycles") {
+      return;
+    }
     const operationKey = `loadFirstVideo:${targetCategory}:${effectiveDateString}:${effectiveShiftId}`;
     if (loadingCategoryRef.current === targetCategory || fetchInProgressRef.current.has(operationKey)) {
       console.log(`[BottlenecksContent] Load first video already in progress for ${targetCategory}`);
@@ -48997,8 +50562,9 @@ var BottlenecksContent = ({
           });
         }
         setVisibleCategoryMetadata(categoryId, cachedMetadata);
-        if (autoLoadFirstVideo && cachedMetadata.length > 0 && s3ClipsService) {
-          const firstClipMeta = cachedMetadata[0];
+        const cachedAutoloadCandidates = isInitialTimeHandoffCategory(categoryId) ? cachedMetadata.filter((clip) => isTimestampInInitialTimeHandoff(clip.clip_timestamp || clip.creation_timestamp || clip.timestamp)) : cachedMetadata;
+        if (autoLoadFirstVideo && cachedAutoloadCandidates.length > 0 && s3ClipsService) {
+          const firstClipMeta = cachedAutoloadCandidates[0];
           const firstClipId = firstClipMeta.clipId || firstClipMeta.id;
           const prefetchedFirstVideo = matchingLowMomentsPrefetch?.firstVideo ?? null;
           try {
@@ -49037,7 +50603,10 @@ var BottlenecksContent = ({
             endDate: `${resolvedDate}T23:59:59Z`,
             percentile: 10,
             shiftId: effectiveShiftId,
-            limit: 100
+            limit: isInitialTimeHandoffCategory(categoryId) ? 500 : 100,
+            startTime: isInitialTimeHandoffCategory(categoryId) ? initialTimeFilter?.startTime : void 0,
+            endTime: isInitialTimeHandoffCategory(categoryId) ? initialTimeFilter?.endTime : void 0,
+            timeFilterTimezone: isInitialTimeHandoffCategory(categoryId) ? initialTimeFilter?.timezone || timezone : void 0
           }),
           redirectReason: "session_expired"
         });
@@ -49054,10 +50623,13 @@ var BottlenecksContent = ({
             shift: effectiveShiftId,
             category: categoryId,
             page: 1,
-            limit: 100,
-            knownTotal: mergedCounts[categoryId] ?? null,
+            limit: isInitialTimeHandoffCategory(categoryId) ? 500 : 100,
+            knownTotal: isInitialTimeHandoffCategory(categoryId) ? null : mergedCounts[categoryId] ?? null,
             snapshotDateTime,
             snapshotClipId,
+            startTime: isInitialTimeHandoffCategory(categoryId) ? initialTimeFilter?.startTime : void 0,
+            endTime: isInitialTimeHandoffCategory(categoryId) ? initialTimeFilter?.endTime : void 0,
+            timeFilterTimezone: isInitialTimeHandoffCategory(categoryId) ? initialTimeFilter?.timezone || timezone : void 0,
             sort: categoryId === LOW_EFFICIENCY_CATEGORY_ID ? "red_flow_output_shortfall_desc" : categoryId === "idle_time" ? idleClipSort : "latest"
           }),
           redirectReason: "session_expired"
@@ -49070,7 +50642,8 @@ var BottlenecksContent = ({
       if (categoryData.clips && isMountedRef.current) {
         let metadataClips;
         if (isPercentileCategory(categoryId)) {
-          metadataClips = categoryData.clips.map((clip, index) => ({
+          const sortedPercentileClips = sortPercentileCycleClipsForDisplay(categoryId, categoryData.clips);
+          metadataClips = sortedPercentileClips.map((clip, index) => ({
             id: clip.id,
             clipId: clip.id,
             clip_timestamp: clip.creation_timestamp || clip.timestamp,
@@ -49117,8 +50690,9 @@ var BottlenecksContent = ({
         }));
         setVisibleCategoryMetadata(categoryId, metadataClips);
         console.log(`[BottlenecksContent] Loaded metadata for ${categoryId}: ${metadataClips.length} clips`);
-        if (autoLoadFirstVideo && metadataClips.length > 0 && s3ClipsService) {
-          const firstClipMeta = metadataClips[0];
+        const autoloadCandidates = isInitialTimeHandoffCategory(categoryId) ? metadataClips.filter((clip) => isTimestampInInitialTimeHandoff(clip.clip_timestamp || clip.creation_timestamp || clip.timestamp)) : metadataClips;
+        if (autoLoadFirstVideo && autoloadCandidates.length > 0 && s3ClipsService) {
+          const firstClipMeta = autoloadCandidates[0];
           const firstClipId = firstClipMeta.clipId || firstClipMeta.id;
           try {
             const video = await s3ClipsService.getClipById(firstClipId);
@@ -49152,7 +50726,7 @@ var BottlenecksContent = ({
         setIsCategoryLoading(false);
       }
     }
-  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, isFastSlowClipFiltersEnabled, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, idleClipSort, supabase, setVisibleCategoryMetadata, lowMomentsPrefetch, applyPrefetchedFirstVideo, applyMetadataSnapshot, isLowMomentsCategoryAvailable]);
+  }, [workspaceId, effectiveDateString, effectiveShiftId, getMetadataCacheKey, isPercentileCategory, isFastSlowClipFiltersEnabled, metadataCache, s3ClipsService, clearLoadingState, isEffectiveShiftReady, snapshotDateTime, snapshotClipId, idleClipSort, supabase, setVisibleCategoryMetadata, lowMomentsPrefetch, applyPrefetchedFirstVideo, applyMetadataSnapshot, isLowMomentsCategoryAvailable, isInitialTimeHandoffCategory, isTimestampInInitialTimeHandoff, initialTimeFilter?.endTime, initialTimeFilter?.startTime, initialTimeFilter?.timezone, timezone]);
   useEffect(() => {
     if (activeFilter !== LOW_EFFICIENCY_CATEGORY_ID || !isLowMomentsCategoryAvailable) {
       return;
@@ -49184,6 +50758,37 @@ var BottlenecksContent = ({
     applyMetadataSnapshot,
     isLowMomentsCategoryAvailable
   ]);
+  useEffect(() => {
+    if (!initialTimeFilter?.startTime || !initialTimeFilter?.endTime || !initialTimePrefetch || initialTimePrefetch.loading || initialTimePrefetch.categoryId !== activeFilter) {
+      return;
+    }
+    if (initialTimePrefetch.metadata.length > 0) {
+      applyMetadataSnapshot(
+        initialTimePrefetch.categoryId,
+        initialTimePrefetch.metadata,
+        initialTimePrefetch.total
+      );
+    }
+    if (initialTimePrefetch.firstVideo && isTimestampInInitialTimeHandoff(
+      initialTimePrefetch.firstVideo.creation_timestamp || initialTimePrefetch.firstVideo.timestamp
+    )) {
+      applyPrefetchedFirstVideo(initialTimePrefetch.firstVideo);
+      if (isMountedRef.current) {
+        setIsCategoryLoading(false);
+        setIsInitialLoading(false);
+        setIsTransitioning(false);
+        setIsNavigating(false);
+      }
+    }
+  }, [
+    activeFilter,
+    applyMetadataSnapshot,
+    applyPrefetchedFirstVideo,
+    initialTimeFilter?.endTime,
+    initialTimeFilter?.startTime,
+    initialTimePrefetch,
+    isTimestampInInitialTimeHandoff
+  ]);
   useEffect(() => {
     if (previousIdleClipSortRef.current === idleClipSort) {
       return;
@@ -49223,7 +50828,7 @@ var BottlenecksContent = ({
       currentTotalRef.current = total;
       setCurrentTotal(total);
       previousFilterRef.current = activeFilter;
-      const metadataLoadPlan = getCategoryMetadataLoadPlanForFilterChange({
+      const metadataLoadPlan = isInitialTimeHandoffCategory(activeFilter) ? { shouldLoad: false, autoLoadFirstVideo: false } : getCategoryMetadataLoadPlanForFilterChange({
         activeFilter,
         currentClipId,
         categoryTotal: total
@@ -49247,7 +50852,7 @@ var BottlenecksContent = ({
         }
       }
     }
-  }, [activeFilter, allVideos, mergedCounts, currentClipId, loadCategoryMetadata]);
+  }, [activeFilter, allVideos, mergedCounts, currentClipId, loadCategoryMetadata, isInitialTimeHandoffCategory]);
   useEffect(() => {
     if (!currentClipId || activeFilter === "all") {
       return;
@@ -49275,10 +50880,19 @@ var BottlenecksContent = ({
         console.warn("[BottlenecksContent] Error disposing player:", e);
       }
     }
-    loadingTimeoutRef.current = setTimeout(() => {
+    if (loadingTimeoutRef.current) {
+      clearTimeout(loadingTimeoutRef.current);
+      loadingTimeoutRef.current = null;
+    }
+    const loadingTimeout = setTimeout(() => {
+      if (loadingTimeoutRef.current !== loadingTimeout) {
+        return;
+      }
+      loadingTimeoutRef.current = null;
       console.warn("[BottlenecksContent] Loading timeout - clearing stuck loading state");
       clearLoadingState();
     }, 2e3);
+    loadingTimeoutRef.current = loadingTimeout;
     if (activeFilterRef.current !== categoryId) {
       updateActiveFilter(categoryId);
     }
@@ -49298,17 +50912,20 @@ var BottlenecksContent = ({
         setCurrentClipId(clipId);
         setAllVideos([video]);
         setCurrentIndex(0);
+        clearLoadingState();
       } else {
         throw new Error(`Failed to load video data for clip ${clipId}`);
       }
       await metadataPromise;
       let metadataArray = categoryMetadataRef.current;
-      const fallbackHasClip = fallbackMetadata?.some((clip) => clip.clipId === clipId);
-      if ((metadataArray.length === 0 || !metadataArray.some((clip) => clip.clipId === clipId)) && fallbackHasClip) {
+      const getMetadataClipId = (clip) => clip?.clipId || clip?.id;
+      const metadataHasClip = (clips) => clips.some((clip) => getMetadataClipId(clip) === clipId);
+      const fallbackHasClip = fallbackMetadata?.some((clip) => getMetadataClipId(clip) === clipId);
+      if ((metadataArray.length === 0 || !metadataHasClip(metadataArray)) && fallbackHasClip) {
         applyMetadataSnapshot(categoryId, fallbackMetadata, fallbackTotal);
         metadataArray = fallbackMetadata;
       }
-      if (metadataArray.length === 0 || !metadataArray.some((clip) => clip.clipId === clipId)) {
+      if (metadataArray.length === 0 || !metadataHasClip(metadataArray)) {
         if (!fallbackHasClip) {
           console.warn(`[BottlenecksContent] Clip ${clipId} not found in metadata for ${categoryId} (cache hit: ${metadataArray.length > 0}) - forcing refresh`);
           await loadCategoryMetadata(categoryId, false, true);
@@ -49327,7 +50944,7 @@ var BottlenecksContent = ({
         }
         return;
       }
-      const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
+      const clickedClipIndex = metadataArray.findIndex((clip) => getMetadataClipId(clip) === clipId);
       if (clickedClipIndex === -1) {
         console.warn(`[BottlenecksContent] Clip ${clipId} not found after metadata refresh`);
         if (!shouldUseMetadataNavigation(categoryId)) {
@@ -49715,6 +51332,32 @@ var BottlenecksContent = ({
     }
     return filteredVideos[currentIndex];
   }, [filteredVideos, currentIndex]);
+  const currentVideoMatchesInitialTimeHandoff = useMemo(() => {
+    if (!hasInitialTimeHandoff) {
+      return true;
+    }
+    if (!currentVideo) {
+      return false;
+    }
+    if (!isInitialTimeHandoffCategory(activeFilter) || !isInitialTimeHandoffCategory(currentVideo.type)) {
+      return false;
+    }
+    return isTimestampInInitialTimeHandoff(
+      currentVideo.creation_timestamp || currentVideo.timestamp || currentVideo.clip_end_time || currentVideo.clip_start_time
+    );
+  }, [
+    activeFilter,
+    currentVideo,
+    hasInitialTimeHandoff,
+    isInitialTimeHandoffCategory,
+    isTimestampInInitialTimeHandoff
+  ]);
+  const shouldHoldInitialTimeHandoffVideo = Boolean(
+    hasInitialTimeHandoff && !currentVideoMatchesInitialTimeHandoff && (isCategoryLoading || filteredVideos.length > 0 || (mergedCounts[activeFilter] || 0) > 0)
+  );
+  const canRenderCurrentVideo = Boolean(
+    filteredVideos.length > 0 && currentVideo && !isFullscreen && !shouldHoldInitialTimeHandoffVideo
+  );
   const currentLowEfficiencyClipId = currentVideo?.id || currentClipId || null;
   const isCurrentLowEfficiencyClip = Boolean(
     currentVideo?.type === "recent_flow_red_streak" || currentVideo?.red_flow_timeline
@@ -49881,11 +51524,111 @@ var BottlenecksContent = ({
     }
     return currentPosition;
   }, [activeFilter, categoryMetadata.length, currentMetadataIndex, currentPosition, shouldUseMetadataNavigation]);
-  const prefetchedExplorerMetadata = useMemo(() => activeFilter === LOW_EFFICIENCY_CATEGORY_ID && isLowMomentsCategoryAvailable && lowMomentsPrefetch?.key?.startsWith(`${LOW_EFFICIENCY_CATEGORY_ID}-${workspaceId}-${effectiveDateString}-${effectiveShiftId}-`) && !lowMomentsPrefetch.loading && lowMomentsPrefetch.metadata.length > 0 ? { [LOW_EFFICIENCY_CATEGORY_ID]: lowMomentsPrefetch.metadata } : activeFilter === "idle_time" && categoryMetadataSort !== idleClipSort ? void 0 : buildPrefetchedExplorerMetadata(
+  const initialTimePrefetchedMetadata = useMemo(() => {
+    if (!initialTimeFilter?.startTime || !initialTimeFilter?.endTime || !initialTimePrefetch || initialTimePrefetch.loading) {
+      return void 0;
+    }
+    if (initialTimePrefetch.metadataByCategory) {
+      return initialTimePrefetch.metadataByCategory;
+    }
+    if (initialTimePrefetch.categoryId === activeFilter && initialTimePrefetch.metadata.length > 0) {
+      return { [activeFilter]: initialTimePrefetch.metadata };
+    }
+    return void 0;
+  }, [
     activeFilter,
+    initialTimePrefetch,
+    initialTimeFilter?.endTime,
+    initialTimeFilter?.startTime
+  ]);
+  const prefetchedExplorerMetadata = useMemo(() => {
+    if (initialTimePrefetchedMetadata) {
+      return initialTimePrefetchedMetadata;
+    }
+    if (activeFilter === LOW_EFFICIENCY_CATEGORY_ID && isLowMomentsCategoryAvailable && lowMomentsPrefetch?.key?.startsWith(`${LOW_EFFICIENCY_CATEGORY_ID}-${workspaceId}-${effectiveDateString}-${effectiveShiftId}-`) && !lowMomentsPrefetch.loading && lowMomentsPrefetch.metadata.length > 0) {
+      return { [LOW_EFFICIENCY_CATEGORY_ID]: lowMomentsPrefetch.metadata };
+    }
+    if (activeFilter === "idle_time" && categoryMetadataSort !== idleClipSort) {
+      return void 0;
+    }
+    const metadataSnapshot = buildPrefetchedExplorerMetadata(
+      activeFilter,
+      categoryMetadataCategoryId,
+      categoryMetadata
+    );
+    if (metadataSnapshot) {
+      return metadataSnapshot;
+    }
+    if (initialTimeFilter?.startTime && initialTimeFilter?.endTime && currentVideo && currentVideo.type === activeFilter) {
+      return {
+        [activeFilter]: [{
+          id: currentVideo.id,
+          clipId: currentVideo.id,
+          clip_timestamp: currentVideo.creation_timestamp || currentVideo.timestamp,
+          description: currentVideo.description,
+          severity: currentVideo.severity,
+          category: activeFilter,
+          duration: typeof currentVideo.duration === "number" ? currentVideo.duration : typeof currentVideo.cycle_time_seconds === "number" ? currentVideo.cycle_time_seconds : void 0,
+          clip_start_time: currentVideo.clip_start_time,
+          clip_end_time: currentVideo.clip_end_time,
+          index: 0,
+          idle_start_time: currentVideo.idle_start_time,
+          idle_end_time: currentVideo.idle_end_time,
+          cycle_item_count: null,
+          red_flow_timeline: currentVideo.red_flow_timeline,
+          red_flow_severity_score: currentVideo.red_flow_severity_score,
+          red_flow_output_shortfall_units: currentVideo.red_flow_output_shortfall_units,
+          red_flow_worst_minute: currentVideo.red_flow_worst_minute,
+          red_flow_explanation_summary: currentVideo.red_flow_explanation_summary,
+          red_flow_explanation: currentVideo.red_flow_explanation
+        }]
+      };
+    }
+    return void 0;
+  }, [
+    activeFilter,
+    categoryMetadata,
     categoryMetadataCategoryId,
-    categoryMetadata
-  ), [activeFilter, categoryMetadata, categoryMetadataCategoryId, categoryMetadataSort, idleClipSort, lowMomentsPrefetch, workspaceId, effectiveDateString, effectiveShiftId, isLowMomentsCategoryAvailable]);
+    categoryMetadataSort,
+    currentVideo,
+    idleClipSort,
+    initialTimePrefetchedMetadata,
+    initialTimePrefetch,
+    initialTimeFilter?.endTime,
+    initialTimeFilter?.startTime,
+    lowMomentsPrefetch,
+    workspaceId,
+    effectiveDateString,
+    effectiveShiftId,
+    isLowMomentsCategoryAvailable
+  ]);
+  const externallyManagedLoadingCategories = useMemo(() => {
+    const managedCategories = {
+      recent_flow_red_streak: Boolean(
+        activeFilter === LOW_EFFICIENCY_CATEGORY_ID && isLowMomentsCategoryAvailable && lowMomentsPrefetch?.key?.startsWith(`${LOW_EFFICIENCY_CATEGORY_ID}-${workspaceId}-${effectiveDateString}-${effectiveShiftId}-`) && lowMomentsPrefetch.loading
+      )
+    };
+    const isInitialTimeHandoffPending = Boolean(
+      initialTimeFilter?.startTime && initialTimeFilter?.endTime && requestedInitialCategoryCandidates.length > 0 && (!initialTimePrefetch || initialTimePrefetch.loading)
+    );
+    if (isInitialTimeHandoffPending) {
+      requestedInitialCategoryCandidates.forEach((categoryId) => {
+        managedCategories[categoryId] = true;
+      });
+    }
+    return managedCategories;
+  }, [
+    activeFilter,
+    effectiveDateString,
+    effectiveShiftId,
+    initialTimeFilter?.endTime,
+    initialTimeFilter?.startTime,
+    initialTimePrefetch,
+    isLowMomentsCategoryAvailable,
+    lowMomentsPrefetch,
+    requestedInitialCategoryCandidates,
+    workspaceId
+  ]);
   const classificationClipIds = useMemo(() => {
     if (!idleTimeVlmEnabled) {
       return [];
@@ -50295,7 +52038,7 @@ var BottlenecksContent = ({
       /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: "S3 configuration is required to load video clips. Please check your dashboard configuration." })
     ] });
   }
-  if (clipTypesLoading && allVideos.length === 0 && Object.keys(mergedCounts).length === 0) {
+  if (!hasInitialTimeHandoff && clipTypesLoading && allVideos.length === 0 && Object.keys(mergedCounts).length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "flex-grow p-4 flex items-center justify-center min-h-[calc(100dvh-12rem)]", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
   if (error && error.type === "fatal" && !hasInitialLoad || clipTypesError) {
@@ -50305,7 +52048,30 @@ var BottlenecksContent = ({
       /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: error?.message || clipTypesError })
     ] });
   }
-  const categoriesToShow = clipTypes.length > 0 ? clipTypes : [];
+  const categoriesToShow = (() => {
+    const categories = clipTypes.length > 0 ? [...clipTypes] : [];
+    const existingTypes = new Set(categories.map((category) => category.type));
+    requestedInitialCategoryCandidates.forEach((categoryType) => {
+      if (existingTypes.has(categoryType) || !hasInitialTimeHandoff && (mergedCounts[categoryType] || 0) <= 0) {
+        return;
+      }
+      const fallback = CHART_HANDOFF_CATEGORY_FALLBACKS[categoryType];
+      if (!fallback) {
+        return;
+      }
+      categories.push({
+        id: categoryType,
+        type: categoryType,
+        label: fallback.label,
+        description: fallback.description,
+        color: fallback.color,
+        icon: fallback.icon,
+        sort_order: 50
+      });
+      existingTypes.add(categoryType);
+    });
+    return categories;
+  })();
   console.log("[BottlenecksContent] Categories to show:", {
     categoriesToShow,
     categoriesToShowLength: categoriesToShow?.length,
@@ -50324,190 +52090,204 @@ var BottlenecksContent = ({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:h-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "min-w-0 w-full lg:flex-[3] lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden lg:h-full", children: filteredVideos.length > 0 && currentVideo && !isFullscreen ? /* @__PURE__ */ jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative group lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-video lg:aspect-auto lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-full h-full",
-            style: {
-              opacity: isTransitioning ? 0 : 1,
-              transition: "opacity 0.1s ease-in-out"
-            },
-            children: !shouldDeferPlayerRenderForCrop && /* @__PURE__ */ jsx(
-              CroppedVideoPlayer,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "min-w-0 w-full lg:flex-[3] lg:h-full",
+          "data-qa-clips-active-filter": activeFilter || "",
+          "data-qa-clips-current-video-type": currentVideo?.type || "",
+          "data-qa-clips-current-video-id": currentVideo?.id || "",
+          "data-qa-clips-current-clip-id": currentClipId || "",
+          "data-qa-clips-filtered-count": filteredVideos.length,
+          "data-qa-clips-all-count": allVideos.length,
+          "data-qa-clips-current-video-matches-hour": String(currentVideoMatchesInitialTimeHandoff),
+          "data-qa-clips-hold-hour-video": String(shouldHoldInitialTimeHandoffVideo),
+          children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden lg:h-full", children: canRenderCurrentVideo && currentVideo ? /* @__PURE__ */ jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative group lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-video lg:aspect-auto lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                ref: videoRef,
-                src: currentVideo.src,
-                poster: "",
                 className: "w-full h-full",
-                crop: workspaceCrop?.crop,
-                autoplay: true,
-                playsInline: true,
-                loop: false,
-                externalLoadingControl: true,
-                onReady: handleVideoReady,
-                onPlay: handleVideoPlay,
-                onPause: handleVideoPause,
-                onTimeUpdate: handleTimeUpdate,
-                onDurationChange: handleDurationChange,
-                onEnded: handleVideoEnded,
-                onError: handleVideoError,
-                onLoadedData: handleLoadedData,
-                onPlaying: handleVideoPlaying,
-                onLoadingChange: handleVideoLoadingChange,
-                onShare: handleShareClip,
-                isShareLoading,
-                isShareCopied,
-                timelineAnnotations: currentVideo.red_flow_timeline,
-                timelineExplanation: currentVideo.red_flow_explanation,
-                timelineTimezone: timezone,
-                options: videoPlayerOptions
-              },
-              `${currentVideo.id}-${playerInstanceNonce}-inline`
-            )
-          }
-        ),
-        currentVideo.type === "recent_flow_red_streak" && !shouldDeferPlayerRenderForCrop ? /* @__PURE__ */ jsx(
-          RedFlowDiagnosticOverlay,
-          {
-            timeline: currentVideo.red_flow_timeline,
-            explanation: currentVideo.red_flow_explanation,
-            aiSummary: currentLowEfficiencyAiSummary,
-            aiSummaryLoading: isCurrentLowEfficiencyAiSummaryLoading,
-            aiSummaryError: currentLowEfficiencyAiSummaryError,
-            className: "right-4 top-4"
-          }
-        ) : null,
-        showBlockingVideoLoader && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        !shouldDeferPlayerRenderForCrop && !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        error && error.type === "retrying" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md" }),
-          /* @__PURE__ */ jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
-        ] }) }),
-        error && error.type === "fatal" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/90 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
-          /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
-          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: error.code === 3 ? "Stream Corrupted" : error.code === 4 ? "Format Not Supported" : error.code === 2 ? "Network Error" : error.code === 1 ? "Loading Interrupted" : "Playback Error" }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-6", children: error.message }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
-            error.canSkip && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => {
-                  setError(null);
-                  videoRetryCountRef.current = 0;
-                  handleNext();
+                style: {
+                  opacity: isTransitioning ? 0 : 1,
+                  transition: "opacity 0.1s ease-in-out"
                 },
-                className: "px-5 py-2.5 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition-colors",
-                children: "Skip to Next Clip"
+                children: !shouldDeferPlayerRenderForCrop && /* @__PURE__ */ jsx(
+                  CroppedVideoPlayer,
+                  {
+                    ref: videoRef,
+                    src: currentVideo.src,
+                    poster: "",
+                    className: "w-full h-full",
+                    crop: workspaceCrop?.crop,
+                    autoplay: true,
+                    playsInline: true,
+                    loop: false,
+                    externalLoadingControl: true,
+                    onReady: handleVideoReady,
+                    onPlay: handleVideoPlay,
+                    onPause: handleVideoPause,
+                    onTimeUpdate: handleTimeUpdate,
+                    onDurationChange: handleDurationChange,
+                    onEnded: handleVideoEnded,
+                    onError: handleVideoError,
+                    onLoadedData: handleLoadedData,
+                    onPlaying: handleVideoPlaying,
+                    onLoadingChange: handleVideoLoadingChange,
+                    onShare: handleShareClip,
+                    isShareLoading,
+                    isShareCopied,
+                    timelineAnnotations: currentVideo.red_flow_timeline,
+                    timelineExplanation: currentVideo.red_flow_explanation,
+                    timelineTimezone: timezone,
+                    options: videoPlayerOptions
+                  },
+                  `${currentVideo.id}-${playerInstanceNonce}-inline`
+                )
               }
             ),
-            error.canRetry && /* @__PURE__ */ jsx(
-              "button",
+            currentVideo.type === "recent_flow_red_streak" && !shouldDeferPlayerRenderForCrop ? /* @__PURE__ */ jsx(
+              RedFlowDiagnosticOverlay,
               {
-                onClick: () => {
-                  videoRetryCountRef.current = 0;
-                  restartCurrentClipPlayback();
-                },
-                className: "px-5 py-2.5 bg-gray-600 hover:bg-gray-700 rounded-md text-sm font-medium transition-colors",
-                children: "Retry"
+                timeline: currentVideo.red_flow_timeline,
+                explanation: currentVideo.red_flow_explanation,
+                aiSummary: currentLowEfficiencyAiSummary,
+                aiSummaryLoading: isCurrentLowEfficiencyAiSummaryLoading,
+                aiSummaryError: currentLowEfficiencyAiSummaryError,
+                className: "right-4 top-4"
               }
-            )
-          ] })
-        ] }) }),
-        (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" ? currentVideo.type === "idle_time" ? (
-          // Show full colored badge for idle time
-          (() => {
-            const classification = getIdleTimeClassification(currentVideo);
-            const confidence = getIdleTimeConfidence(currentVideo);
-            const config = getRootCauseConfig(classification);
-            if (!config) return null;
-            const IconComponent = config.Icon;
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              idleTimeVlmEnabled && /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsxs("div", { className: `inline-flex max-w-[18rem] items-center gap-1.5 rounded-md border px-2.5 py-1.5 shadow-lg ${config.bgColor} ${config.borderColor}`, children: [
-                /* @__PURE__ */ jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
-                /* @__PURE__ */ jsx("span", { className: `truncate font-medium text-xs ${config.color}`, children: config.displayName || "Analyzing..." })
-              ] }) }),
-              idleTimeVlmEnabled && confidence !== null && (() => {
-                const confidencePercent = confidence * 100;
-                let confidenceLabel = "Low";
-                let confidenceColor = "text-red-500";
-                if (confidencePercent > 95) {
-                  confidenceLabel = "High";
-                  confidenceColor = "text-green-500";
-                } else if (confidencePercent >= 91) {
-                  confidenceLabel = "Medium";
-                  confidenceColor = "text-yellow-500";
-                }
-                return /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-black/70 backdrop-blur-sm shadow-lg border border-white/10", children: /* @__PURE__ */ jsxs("span", { className: "font-medium text-xs text-white", children: [
-                  "AI Confidence: ",
-                  /* @__PURE__ */ jsx("span", { className: confidenceColor, children: confidenceLabel })
-                ] }) }) });
+            ) : null,
+            showBlockingVideoLoader && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+            !shouldDeferPlayerRenderForCrop && !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+            error && error.type === "retrying" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md" }),
+              /* @__PURE__ */ jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
+            ] }) }),
+            error && error.type === "fatal" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/90 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: error.code === 3 ? "Stream Corrupted" : error.code === 4 ? "Format Not Supported" : error.code === 2 ? "Network Error" : error.code === 1 ? "Loading Interrupted" : "Playback Error" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-6", children: error.message }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
+                error.canSkip && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      setError(null);
+                      videoRetryCountRef.current = 0;
+                      handleNext();
+                    },
+                    className: "px-5 py-2.5 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition-colors",
+                    children: "Skip to Next Clip"
+                  }
+                ),
+                error.canRetry && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      videoRetryCountRef.current = 0;
+                      restartCurrentClipPlayback();
+                    },
+                    className: "px-5 py-2.5 bg-gray-600 hover:bg-gray-700 rounded-md text-sm font-medium transition-colors",
+                    children: "Retry"
+                  }
+                )
+              ] })
+            ] }) }),
+            (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" ? currentVideo.type === "idle_time" ? (
+              // Show full colored badge for idle time
+              (() => {
+                const classification = getIdleTimeClassification(currentVideo);
+                const confidence = getIdleTimeConfidence(currentVideo);
+                const config = getRootCauseConfig(classification);
+                if (!config) return null;
+                const IconComponent = config.Icon;
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  idleTimeVlmEnabled && /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsxs("div", { className: `inline-flex max-w-[18rem] items-center gap-1.5 rounded-md border px-2.5 py-1.5 shadow-lg ${config.bgColor} ${config.borderColor}`, children: [
+                    /* @__PURE__ */ jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
+                    /* @__PURE__ */ jsx("span", { className: `truncate font-medium text-xs ${config.color}`, children: config.displayName || "Analyzing..." })
+                  ] }) }),
+                  idleTimeVlmEnabled && confidence !== null && (() => {
+                    const confidencePercent = confidence * 100;
+                    let confidenceLabel = "Low";
+                    let confidenceColor = "text-red-500";
+                    if (confidencePercent > 95) {
+                      confidenceLabel = "High";
+                      confidenceColor = "text-green-500";
+                    } else if (confidencePercent >= 91) {
+                      confidenceLabel = "Medium";
+                      confidenceColor = "text-yellow-500";
+                    }
+                    return /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-black/70 backdrop-blur-sm shadow-lg border border-white/10", children: /* @__PURE__ */ jsxs("span", { className: "font-medium text-xs text-white", children: [
+                      "AI Confidence: ",
+                      /* @__PURE__ */ jsx("span", { className: confidenceColor, children: confidenceLabel })
+                    ] }) }) });
+                  })()
+                ] });
               })()
-            ] });
-          })()
-        ) : /* @__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" : 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"
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
-            /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
-          ] })
-        ] }) }) : (
-          /* Right side display for other video types */
-          currentVideo.type === "idle_time" ? (
-            // Show full colored badge for idle time
-            (() => {
-              const classification = getIdleTimeClassification(currentVideo);
-              const confidence = getIdleTimeConfidence(currentVideo);
-              const config = getRootCauseConfig(classification);
-              if (!config) return null;
-              const IconComponent = config.Icon;
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                idleTimeVlmEnabled && confidence !== null && /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-black/70 backdrop-blur-sm shadow-lg border border-white/10", children: /* @__PURE__ */ jsxs("span", { className: "font-medium text-xs text-white", children: [
-                  "AI Confidence: ",
-                  (confidence * 100).toFixed(0),
-                  "%"
-                ] }) }) }),
-                idleTimeVlmEnabled && /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxs("div", { className: `inline-flex max-w-[18rem] items-center gap-1.5 rounded-md border px-2.5 py-1.5 shadow-lg ${config.bgColor} ${config.borderColor}`, children: [
-                  /* @__PURE__ */ jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
-                  /* @__PURE__ */ jsx("span", { className: `truncate font-medium text-xs ${config.color}`, children: config.displayName || "Analyzing..." })
-                ] }) })
-              ] });
-            })()
-          ) : /* @__PURE__ */ jsx("div", { className: `absolute top-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs ${currentVideo.type === "recent_flow_red_streak" ? "left-3" : "right-3"}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${getSeverityColor(currentVideo.severity)} mr-2 animate-pulse` }),
-            /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
-            currentVideo.type !== "recent_flow_red_streak" && /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
-          ] }) })
-        )
-      ] }) }) }) : (
-        /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
-        hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
-          /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
-          /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
-          /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There were no video clips found for this workspace today." })
-        ] }) }) : (
-          /* Priority 5.5: Show "no folder selected" if activeFilter is empty */
-          hasInitialLoad && !activeFilter ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
-            /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
-            /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Folder Selected" }),
-            /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "Please select a folder to view clips." })
-          ] }) }) : (
-            /* Priority 6: Show "no matching clips" only if we have data loaded and specifically no clips for this filter */
-            hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+            ) : /* @__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" : 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"
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
+                /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
+              ] })
+            ] }) }) : (
+              /* Right side display for other video types */
+              currentVideo.type === "idle_time" ? (
+                // Show full colored badge for idle time
+                (() => {
+                  const classification = getIdleTimeClassification(currentVideo);
+                  const confidence = getIdleTimeConfidence(currentVideo);
+                  const config = getRootCauseConfig(classification);
+                  if (!config) return null;
+                  const IconComponent = config.Icon;
+                  return /* @__PURE__ */ jsxs(Fragment, { children: [
+                    idleTimeVlmEnabled && confidence !== null && /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-black/70 backdrop-blur-sm shadow-lg border border-white/10", children: /* @__PURE__ */ jsxs("span", { className: "font-medium text-xs text-white", children: [
+                      "AI Confidence: ",
+                      (confidence * 100).toFixed(0),
+                      "%"
+                    ] }) }) }),
+                    idleTimeVlmEnabled && /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxs("div", { className: `inline-flex max-w-[18rem] items-center gap-1.5 rounded-md border px-2.5 py-1.5 shadow-lg ${config.bgColor} ${config.borderColor}`, children: [
+                      /* @__PURE__ */ jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
+                      /* @__PURE__ */ jsx("span", { className: `truncate font-medium text-xs ${config.color}`, children: config.displayName || "Analyzing..." })
+                    ] }) })
+                  ] });
+                })()
+              ) : /* @__PURE__ */ jsx("div", { className: `absolute top-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs ${currentVideo.type === "recent_flow_red_streak" ? "left-3" : "right-3"}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${getSeverityColor(currentVideo.severity)} mr-2 animate-pulse` }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
+                currentVideo.type !== "recent_flow_red_streak" && /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
+              ] }) })
+            )
+          ] }) }) }) : shouldHoldInitialTimeHandoffVideo ? /* @__PURE__ */ jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full min-h-[220px] sm:min-h-[320px] lg:min-h-0 lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading clips..." }) }) }) }) : (
+            /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
+            hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
               /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
-              /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
-              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
+              /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
+              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There were no video clips found for this workspace today." })
             ] }) }) : (
-              /* Priority 7: Default loading state for any other case */
-              /* @__PURE__ */ jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full min-h-[220px] sm:min-h-[320px] lg:min-h-0 lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
+              /* Priority 5.5: Show "no folder selected" if activeFilter is empty */
+              hasInitialLoad && !activeFilter ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+                /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
+                /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Folder Selected" }),
+                /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "Please select a folder to view clips." })
+              ] }) }) : (
+                /* Priority 6: Show "no matching clips" only if we have data loaded and specifically no clips for this filter */
+                hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
+                  /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
+                ] }) }) : (
+                  /* Priority 7: Default loading state for any other case */
+                  /* @__PURE__ */ jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full min-h-[220px] sm:min-h-[320px] lg:min-h-0 lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
+                )
+              )
             )
-          )
-        )
-      ) }) }),
+          ) })
+        }
+      ),
       /* @__PURE__ */ jsx("div", { className: "w-full lg:flex-shrink-0 lg:flex-[1] lg:min-w-[280px] lg:max-w-[320px] lg:h-full", children: triageMode ? (
         /* Triage Mode - Direct tile view for cycle completions and idle time */
         /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm h-full overflow-hidden flex flex-col", children: [
@@ -50642,7 +52422,7 @@ var BottlenecksContent = ({
             })),
             videos: allVideos || [],
             activeFilter,
-            currentVideoId: currentVideo?.id,
+            currentVideoId: currentVideo?.id || currentClipId || void 0,
             counts: mergedCounts,
             isReady: hasInitialLoad,
             prefetchedPercentileCounts: isFastSlowClipFiltersEnabled ? prefetchedPercentileCounts || void 0 : void 0,
@@ -50656,11 +52436,9 @@ var BottlenecksContent = ({
             idleTimeVlmEnabled,
             showPercentileCycleFilters: isFastSlowClipFiltersEnabled,
             prefetchedClipMetadata: prefetchedExplorerMetadata,
-            externallyManagedLoadingCategories: {
-              recent_flow_red_streak: Boolean(
-                activeFilter === LOW_EFFICIENCY_CATEGORY_ID && isLowMomentsCategoryAvailable && lowMomentsPrefetch?.key?.startsWith(`${LOW_EFFICIENCY_CATEGORY_ID}-${workspaceId}-${effectiveDateString}-${effectiveShiftId}-`) && lowMomentsPrefetch.loading
-              )
-            },
+            prefetchedClipTotals: initialTimePrefetch?.loading ? void 0 : initialTimePrefetch?.totalsByCategory,
+            prefetchedPercentileClips: initialTimePrefetch?.loading ? void 0 : initialTimePrefetch?.percentileClipsByCategory,
+            externallyManagedLoadingCategories,
             activeCategoryLoading: isCategoryLoading,
             idleClipSort,
             onIdleClipSortChange: setIdleClipSort,
@@ -70474,9 +72252,7 @@ function withWorkspaceDisplayNames(Component3, options = {}) {
               await preInitializeWorkspaceDisplayNames(selectedLineId);
             }
           } else if (lineIdArray.length > 0) {
-            await Promise.all(
-              lineIdArray.map((lineId) => preInitializeWorkspaceDisplayNames(lineId))
-            );
+            await preInitializeWorkspaceDisplayNamesForLines(lineIdArray);
           } else {
             await preInitializeWorkspaceDisplayNames();
           }
@@ -80940,7 +82716,6 @@ var TargetsViewUI = ({
   skuRequired = false,
   onUpdateWorkspaceSelectedSku
 }) => {
-  const { displayNames: workspaceDisplayNames } = useWorkspaceDisplayNames();
   const mobileMenuContext = useMobileMenu();
   useHideMobileHeader(!!mobileMenuContext);
   if (isLoading) {
@@ -81122,7 +82897,7 @@ var TargetsViewUI = ({
                   ] })
                 ] }) }),
                 /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => {
-                  const formattedName = workspaceDisplayNames[`${lineId}_${workspace.name}`] || formatWorkspaceName(workspace.name, lineId);
+                  const formattedName = workspace.displayName || formatWorkspaceName(workspace.name, lineId);
                   const realSkuOptions = (workspace.skuRows || []).filter((r2) => !r2.is_dummy);
                   const showSkuDropdown = !!onUpdateWorkspaceSelectedSku && realSkuOptions.length >= 1;
                   const isPlanLocked = !!workspace.productionPlanLock?.locked;
@@ -81673,6 +83448,7 @@ var TargetsView = ({
               return {
                 id: ws.id,
                 name: ws.workspace_id,
+                displayName: ws.display_name || ws.workspace_id,
                 targetPPH: selectedRow?.pph_threshold ?? (threshold?.pph_threshold ? Math.round(threshold.pph_threshold) : ""),
                 targetCycleTime: selectedRow?.ideal_cycle_time ?? (threshold?.ideal_cycle_time ?? ""),
                 targetDayOutput: selectedRow?.total_day_output ?? (threshold?.total_day_output ?? ""),
@@ -81731,6 +83507,7 @@ var TargetsView = ({
                 return {
                   id: ws.id,
                   name: ws.workspace_id,
+                  displayName: ws.display_name || ws.workspace_id,
                   targetPPH: "",
                   targetCycleTime: "",
                   targetDayOutput: "",
@@ -82211,15 +83988,31 @@ var TargetsView = ({
   const handleUpdateWorkspaceDisplayName = useCallback(async (workspaceId, displayName) => {
     try {
       const updated = await workspaceService.updateWorkspaceDisplayName(workspaceId, displayName);
+      const nextDisplayName = updated?.display_name || displayName;
+      setAllShiftsData((prev) => {
+        const next = { ...prev };
+        Object.entries(prev).forEach(([shiftId, shiftData]) => {
+          const numericShiftId = Number(shiftId);
+          const updatedShiftData = {};
+          Object.entries(shiftData).forEach(([lineId, line]) => {
+            updatedShiftData[lineId] = {
+              ...line,
+              workspaces: line.workspaces.map(
+                (ws) => ws.id === workspaceId ? { ...ws, displayName: nextDisplayName } : ws
+              )
+            };
+          });
+          next[numericShiftId] = updatedShiftData;
+        });
+        return next;
+      });
       if (updated?.line_id && updated?.workspace_id) {
         upsertWorkspaceDisplayNameInCache({
           lineId: updated.line_id,
           workspaceId: updated.workspace_id,
-          displayName: updated?.display_name || displayName,
+          displayName: nextDisplayName,
           enabled: updated?.enable
         });
-      } else {
-        await forceRefreshWorkspaceDisplayNames();
       }
       toast.success("Workspace name updated successfully");
     } catch (error) {
@@ -82263,9 +84056,8 @@ var TargetsView = ({
     }
   );
 };
-var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
-var TargetsView_default = TargetsViewWithDisplayNames;
-var AuthenticatedTargetsView = withAuth(React125__default.memo(TargetsViewWithDisplayNames));
+var TargetsView_default = TargetsView;
+var AuthenticatedTargetsView = withAuth(React125__default.memo(TargetsView));
 function useTimezone(options = {}) {
   const dashboardConfig = useDashboardConfig();
   const workspaceConfig = useWorkspaceConfig();
@@ -82445,17 +84237,22 @@ var WorkspaceHourSummaryPanel = ({
       return;
     }
     autoSummaryKeyRef.current = requestKey;
-    void summarize({
-      workspaceId,
-      companyId,
-      date,
-      shiftId,
-      hourIndex: selectedHour.hourIndex,
-      hourStart: selectedHour.startTime,
-      hourEnd: selectedHour.endTime,
-      forceRefresh: false,
-      selectionSource: selectedHour.source ?? "unknown"
-    }).catch(() => void 0);
+    const summaryTimer = window.setTimeout(() => {
+      void summarize({
+        workspaceId,
+        companyId,
+        date,
+        shiftId,
+        hourIndex: selectedHour.hourIndex,
+        hourStart: selectedHour.startTime,
+        hourEnd: selectedHour.endTime,
+        forceRefresh: false,
+        selectionSource: selectedHour.source ?? "unknown"
+      }).catch(() => void 0);
+    }, 1500);
+    return () => {
+      window.clearTimeout(summaryTimer);
+    };
   }, [canSummarize, companyId, date, selectedHour, selectedKey, shiftId, summarize, workspaceId]);
   if (!selectedHour) {
     return null;
@@ -82639,10 +84436,18 @@ var WorkspaceDetailView = ({
     setSelectedHour(null);
   }, [workspaceId, date, shift]);
   const dashboardConfig = useDashboardConfig();
+  const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
   const { legend: efficiencyLegend } = useEfficiencyLegend();
   const prewarmedClipsRef = useRef(/* @__PURE__ */ new Set());
   const prewarmInFlightRef = useRef(/* @__PURE__ */ new Set());
   const [lowMomentsPrefetch, setLowMomentsPrefetch] = useState(null);
+  const selectedHourClipPrefetchInFlightRef = useRef(/* @__PURE__ */ new Set());
+  const selectedHourClipPrefetchAbortRef = useRef(null);
+  const [initialTimePrefetch, setInitialTimePrefetch] = useState(null);
+  const {
+    isFastSlowClipFiltersEnabled,
+    isResolved: isFastSlowClipFiltersResolved
+  } = useCompanyFastSlowClipFiltersEnabled();
   const [aiSummaryHour, setAiSummaryHour] = useState(null);
   const buildHourlyOutputActionTrackingProps = useCallback((payload) => ({
     workspace_id: workspaceId,
@@ -82672,24 +84477,286 @@ var WorkspaceDetailView = ({
     timezone,
     workspaceId
   ]);
+  const prefetchClipsForSelectedHour = useCallback((hour) => {
+    if (!isClipsEnabled || !dashboardConfig?.s3Config || !workspaceId || !supabase) {
+      return;
+    }
+    const resolvedDate = date || getOperationalDate(timezone);
+    const resolvedShiftId = parsedShiftId ?? selectedShift;
+    if (!resolvedDate || resolvedShiftId === null || resolvedShiftId === void 0) {
+      return;
+    }
+    const categoryId = "cycle_completion";
+    const regularCategoryIds = ["cycle_completion", "idle_time", "recent_flow_red_streak"];
+    const percentileCategoryIds = isFastSlowClipFiltersEnabled ? ["fast-cycles", "slow-cycles"] : [];
+    const allPrefetchCategoryIds = [...regularCategoryIds, ...percentileCategoryIds];
+    const effectiveTimezone = hour.timezone || timezone;
+    const prefetchKey = [
+      workspaceId,
+      resolvedDate,
+      resolvedShiftId,
+      hour.startTime,
+      hour.endTime,
+      effectiveTimezone || "",
+      allPrefetchCategoryIds.join(",")
+    ].join("|");
+    if (initialTimePrefetch?.key === prefetchKey && !initialTimePrefetch.loading) {
+      return;
+    }
+    if (selectedHourClipPrefetchInFlightRef.current.has(prefetchKey)) {
+      return;
+    }
+    selectedHourClipPrefetchAbortRef.current?.abort();
+    const controller = new AbortController();
+    selectedHourClipPrefetchAbortRef.current = controller;
+    selectedHourClipPrefetchInFlightRef.current.add(prefetchKey);
+    const existingSnapshot = initialTimePrefetch?.key === prefetchKey ? initialTimePrefetch : null;
+    setInitialTimePrefetch({
+      key: prefetchKey,
+      categoryId,
+      metadata: existingSnapshot?.metadata || [],
+      metadataByCategory: existingSnapshot?.metadataByCategory || {},
+      totalsByCategory: existingSnapshot?.totalsByCategory || {},
+      percentileClipsByCategory: existingSnapshot?.percentileClipsByCategory || {},
+      firstVideo: existingSnapshot?.firstVideo || null,
+      total: existingSnapshot?.total || 0,
+      loading: true,
+      error: null
+    });
+    const s3Service = videoPrefetchManager.getS3Service(dashboardConfig);
+    const fetchHourlySnapshot = async () => {
+      try {
+        const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            action: "hourly-snapshot",
+            workspaceId,
+            date: resolvedDate,
+            shift: resolvedShiftId,
+            startTime: hour.startTime,
+            endTime: hour.endTime,
+            timeFilterTimezone: effectiveTimezone
+          }),
+          signal: controller.signal,
+          redirectReason: "session_expired"
+        });
+        if (!response.ok) {
+          return false;
+        }
+        const snapshot = await response.json();
+        const metadataByCategory = snapshot?.metadataByCategory && typeof snapshot.metadataByCategory === "object" ? snapshot.metadataByCategory : {};
+        const percentileClipsByCategory = snapshot?.percentileClipsByCategory && typeof snapshot.percentileClipsByCategory === "object" ? snapshot.percentileClipsByCategory : {};
+        const totalsByCategory = snapshot?.totalsByCategory && typeof snapshot.totalsByCategory === "object" ? Object.entries(snapshot.totalsByCategory).reduce((accumulator, [key, value]) => {
+          const total = Number(value);
+          accumulator[key] = Number.isFinite(total) ? Math.max(0, total) : 0;
+          return accumulator;
+        }, {}) : {};
+        const snapshotCategoryId = typeof snapshot?.categoryId === "string" ? snapshot.categoryId : categoryId;
+        const metadata = Array.isArray(snapshot?.metadata) ? snapshot.metadata : Array.isArray(metadataByCategory[snapshotCategoryId]) ? metadataByCategory[snapshotCategoryId] : [];
+        if (controller.signal.aborted) {
+          return true;
+        }
+        setInitialTimePrefetch({
+          key: prefetchKey,
+          categoryId: snapshotCategoryId,
+          metadata,
+          metadataByCategory,
+          totalsByCategory,
+          percentileClipsByCategory,
+          firstVideo: snapshot?.firstVideo || null,
+          total: typeof totalsByCategory[snapshotCategoryId] === "number" ? totalsByCategory[snapshotCategoryId] : metadata.length,
+          loading: false,
+          error: null
+        });
+        return true;
+      } catch (error2) {
+        if (error2.name === "AbortError") {
+          return true;
+        }
+        console.warn("[WorkspaceDetailView] Hourly clips snapshot failed; falling back to category prefetch:", error2);
+        return false;
+      }
+    };
+    const fetchRegularCategory = async (prefetchCategoryId) => {
+      const metadataResponse = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          action: "clip-metadata",
+          workspaceId,
+          date: resolvedDate,
+          shift: resolvedShiftId,
+          category: prefetchCategoryId,
+          page: 1,
+          limit: 500,
+          knownTotal: null,
+          startTime: hour.startTime,
+          endTime: hour.endTime,
+          timeFilterTimezone: effectiveTimezone,
+          sort: prefetchCategoryId === "recent_flow_red_streak" ? "red_flow_output_shortfall_desc" : "latest"
+        }),
+        signal: controller.signal,
+        redirectReason: "session_expired"
+      });
+      if (!metadataResponse.ok) {
+        throw new Error(`Hourly clips metadata prefetch failed for ${prefetchCategoryId}: ${metadataResponse.status}`);
+      }
+      const metadataData = await metadataResponse.json();
+      return {
+        categoryId: prefetchCategoryId,
+        clips: Array.isArray(metadataData?.clips) ? metadataData.clips : [],
+        total: typeof metadataData?.total === "number" ? metadataData.total : 0
+      };
+    };
+    const fetchPercentileCategory = async (prefetchCategoryId) => {
+      const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          action: "percentile-clips",
+          workspaceId,
+          startDate: `${resolvedDate}T00:00:00Z`,
+          endDate: `${resolvedDate}T23:59:59Z`,
+          percentile: 10,
+          shiftId: resolvedShiftId,
+          limit: 500,
+          startTime: hour.startTime,
+          endTime: hour.endTime,
+          timeFilterTimezone: effectiveTimezone,
+          percentileAction: prefetchCategoryId
+        }),
+        signal: controller.signal,
+        redirectReason: "session_expired"
+      });
+      if (!response.ok) {
+        throw new Error(`Hourly percentile clips prefetch failed for ${prefetchCategoryId}: ${response.status}`);
+      }
+      const data = await response.json();
+      return {
+        categoryId: prefetchCategoryId,
+        clips: Array.isArray(data?.clips) ? data.clips : [],
+        total: typeof data?.total === "number" ? data.total : 0
+      };
+    };
+    const runPrefetch = async () => {
+      try {
+        const snapshotLoaded = await fetchHourlySnapshot();
+        if (snapshotLoaded) {
+          return;
+        }
+        const cycleCompletionPromise = fetchRegularCategory("cycle_completion");
+        let resolvedFirstVideo = null;
+        const firstVideoPromise = cycleCompletionPromise.then(async (cycleResponse) => {
+          const firstClipId = cycleResponse.clips[0]?.clipId || cycleResponse.clips[0]?.id || null;
+          if (!firstClipId) {
+            return null;
+          }
+          const video = await s3Service.getClipById(firstClipId);
+          resolvedFirstVideo = video;
+          if (!controller.signal.aborted) {
+            setInitialTimePrefetch((prev) => prev?.key === prefetchKey ? {
+              ...prev,
+              firstVideo: video
+            } : prev);
+          }
+          return video;
+        }).catch((error2) => {
+          if (error2.name !== "AbortError") {
+            console.warn("[WorkspaceDetailView] Hourly first clip prefetch failed:", error2);
+          }
+          return null;
+        });
+        const percentileResponsesPromise = Promise.all(percentileCategoryIds.map(fetchPercentileCategory));
+        const regularResponses = await Promise.all([
+          cycleCompletionPromise,
+          fetchRegularCategory("idle_time"),
+          fetchRegularCategory("recent_flow_red_streak")
+        ]);
+        const percentileResponses = await percentileResponsesPromise;
+        const metadataByCategory = regularResponses.reduce((accumulator, response) => {
+          accumulator[response.categoryId] = response.clips;
+          return accumulator;
+        }, {});
+        const percentileClipsByCategory = percentileResponses.reduce((accumulator, response) => {
+          accumulator[response.categoryId] = response.clips;
+          return accumulator;
+        }, {});
+        const totalsByCategory = [...regularResponses, ...percentileResponses].reduce((accumulator, response) => {
+          accumulator[response.categoryId] = Math.max(0, Number(response.total || 0));
+          return accumulator;
+        }, {});
+        const metadata = metadataByCategory[categoryId] || [];
+        if (controller.signal.aborted) {
+          return;
+        }
+        setInitialTimePrefetch({
+          key: prefetchKey,
+          categoryId,
+          metadata,
+          metadataByCategory,
+          totalsByCategory,
+          percentileClipsByCategory,
+          firstVideo: resolvedFirstVideo,
+          total: typeof totalsByCategory[categoryId] === "number" ? totalsByCategory[categoryId] : metadata.length,
+          loading: false,
+          error: null
+        });
+        void firstVideoPromise;
+      } catch (error2) {
+        if (error2.name === "AbortError") {
+          return;
+        }
+        console.warn("[WorkspaceDetailView] Hourly clips prefetch failed:", error2);
+        setInitialTimePrefetch((prev) => prev?.key === prefetchKey ? {
+          ...prev,
+          loading: false,
+          error: error2 instanceof Error ? error2.message : "Hourly clips prefetch failed"
+        } : prev);
+      } finally {
+        selectedHourClipPrefetchInFlightRef.current.delete(prefetchKey);
+      }
+    };
+    void runPrefetch();
+  }, [
+    dashboardConfig,
+    date,
+    initialTimePrefetch,
+    isFastSlowClipFiltersEnabled,
+    isClipsEnabled,
+    parsedShiftId,
+    selectedShift,
+    supabase,
+    timezone,
+    workspaceId
+  ]);
   const handleOutputHourSelect = useCallback((payload) => {
-    setSelectedHour({
+    const hour = {
       source: "output",
       hourIndex: payload.hourIndex,
       timeRange: payload.timeRange,
       startTime: payload.startTime,
       endTime: payload.endTime,
+      timezone: payload.timezone,
       status: payload.status,
       output: payload.output,
       target: payload.target
-    });
-  }, []);
+    };
+    setSelectedHour(hour);
+    prefetchClipsForSelectedHour(hour);
+  }, [prefetchClipsForSelectedHour]);
   const handleAiSummaryClick = useCallback((payload) => {
     trackCoreEvent("Hourly Output Ask AI Clicked", buildHourlyOutputActionTrackingProps(payload));
     setAiSummaryHour(payload);
   }, [buildHourlyOutputActionTrackingProps]);
   const handleCycleHourSelect = useCallback((payload) => {
-    setSelectedHour({
+    const hour = {
       source: "cycle",
       hourIndex: payload.hourIndex,
       timeRange: payload.timeRange,
@@ -82699,17 +84766,23 @@ var WorkspaceDetailView = ({
       cycleTime: payload.cycleTime,
       idealCycleTime: payload.idealCycleTime,
       idleMinutes: payload.idleMinutes
-    });
-  }, []);
+    };
+    setSelectedHour(hour);
+    prefetchClipsForSelectedHour(hour);
+  }, [prefetchClipsForSelectedHour]);
   const handleOpenClipsForHour = useCallback((hour) => {
+    prefetchClipsForSelectedHour(hour);
     setPendingClipHourFilter({
       startTime: hour.startTime,
       endTime: hour.endTime,
       sourceLabel: hour.timeRange,
-      status: hour.status === "below_target" || hour.status === "above_standard" ? "below_target" : "met_target"
+      status: hour.status === "below_target" || hour.status === "above_standard" ? "below_target" : "met_target",
+      timezone: hour.timezone,
+      categoryId: "cycle_completion",
+      categoryIds: ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time", "recent_flow_red_streak"]
     });
     setActiveTab("bottlenecks");
-  }, []);
+  }, [prefetchClipsForSelectedHour]);
   const handleWatchClipsFromChart = useCallback((payload) => {
     trackCoreEvent("Hourly Output Watch Clips Clicked", buildHourlyOutputActionTrackingProps(payload));
     handleOpenClipsForHour({
@@ -82718,6 +84791,7 @@ var WorkspaceDetailView = ({
       timeRange: payload.timeRange,
       startTime: payload.startTime,
       endTime: payload.endTime,
+      timezone: payload.timezone,
       status: payload.status,
       output: payload.output,
       target: payload.target
@@ -82740,11 +84814,6 @@ var WorkspaceDetailView = ({
     startDate: isFullRange ? void 0 : rangeStart,
     endDate: isFullRange ? void 0 : rangeEnd
   });
-  const {
-    isFastSlowClipFiltersEnabled,
-    isResolved: isFastSlowClipFiltersResolved
-  } = useCompanyFastSlowClipFiltersEnabled();
-  const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
   dashboardConfig?.supervisorConfig?.enabled || false;
   const routedLineId = lineId || selectedLineId;
   const latestCachedDetailedMetrics = useMemo(() => {
@@ -84491,6 +86560,7 @@ var WorkspaceDetailView = ({
                 workspaceMetrics: detailedWorkspaceMetrics || void 0,
                 prefetchedPercentileCounts: isFastSlowClipFiltersEnabled ? prefetchedPercentileCounts : null,
                 lowMomentsPrefetch,
+                initialTimePrefetch,
                 initialTimeFilter: pendingClipHourFilter,
                 className: "h-[calc(100vh-10rem)]"
               }
@@ -94048,4 +96118,6 @@ var RecentFlowSnapshotGrid = ({
   );
 };
 
-export { ACTION_FAMILIES, ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AvatarUpload, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ChangeRoleDialog, ClipFilterProvider, ClipsCostView_default as ClipsCostView, CompactWorkspaceHealthCard, ConfirmRemoveUserDialog, CongratulationsOverlay, CroppedHlsVideoPlayer, 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_HOME_VIEW_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_SHIFT_DATA, 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, DiagnosisVideoModal, EFFICIENCY_ON_TRACK_THRESHOLD, EmptyStateMessage, EncouragementOverlay, FactoryAssignmentDropdown, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, FittingTitle, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthDateShiftSelector, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, HourlyUptimeChart, ISTTimer_default as ISTTimer, IdleTimeVlmConfigProvider, ImprovementCenterView_default as ImprovementCenterView, InlineEditableText, InteractiveOnboardingTour, InvitationService, InvitationsTable, InviteUserDialog, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPI_SIGNAL_LABELS, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend5 as Legend, LineAssignmentDropdown, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LineOvertakeNotificationManager, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, MobileMenuProvider, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlantHeadView_default as PlantHeadView, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProductionPlanApiError, ProductionPlanView_default as ProductionPlanView, ProfileView_default as ProfileView, ROOT_DASHBOARD_EVENT_NAMES, RecentFlowSnapshotGrid, RegistryProvider, RoleBadge, S3ClipsSupabaseService as S3ClipsService, S3Service, SENTRY_HANDLED_EVENT_SESSION_LIMIT, SENTRY_HANDLED_EVENT_WINDOW_MS, SENTRY_QUOTA_STORAGE_KEY, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionTracker, SessionTrackingContext, SessionTrackingProvider, SettingsPopup, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UptimeDonutChart, UptimeLineChart, UptimeMetricCards, UserAvatar, UserManagementService, UserManagementTable, UserService, UserUsageDetailModal, UserUsageStats, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceCycleTimeMetricCards, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, addSentryBreadcrumb, aggregateKPIsFromLineMetricsRows, aggregateLineSignals, alertsService, apiUtils, areAllLinesOnSameShift, authCoreService, authOTPService, authRateLimitService, awardsService, buildDateKey, buildKPIsFromLineMetricsRow, buildKpiLineHierarchy, buildLegacyLineOvertakeEventKey, buildLineLeaderboardRows, buildLineOvertakeEventKey, buildLineSkuBreakdown, buildShiftGroupsKey, canPermissionEditProductionPlan, canRoleAccessDashboardPath, canRoleAccessTeamManagement, canRoleAssignFactories, canRoleAssignLines, canRoleChangeRole, canRoleEditProductionPlan, canRoleInviteRole, canRoleManageCompany, canRoleManageTargets, canRoleManageUsers, canRoleRemoveUser, canRoleViewClipsCost, canRoleViewUsageStats, captureHandledFrontendException, captureSentryException, captureSentryMessage, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearSentryContext, clearWorkspaceDisplayNamesCache, cn, combineLineMetricsRows, countRealSkus, createDefaultKPIs, createInvitationService, createLinesService, createSessionTracker, createStorageService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, detectLineOvertakeEvents, fetchIdleTimeReasons, fetchLineDummySkuId, fetchLineSkuCatalog, filterDataByDateKeyRange, filterRealSkuBreakdown, forceRefreshWorkspaceDisplayNames, formatAwardMonth, formatDateInZone, formatDateKeyForDisplay, formatDateTimeInZone, formatDuration2 as formatDuration, formatISTDate, formatIdleTime, formatRangeLabel, formatReasonLabel, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getActionDisplayName, getActiveShift, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAllWorkspaceDisplayNamesSnapshot, getAnonClient, getAssignableRoles, getAssignmentColumnLabel, getAvailableShiftIds, getAwardBadgeType, getAwardDescription, getAwardTitle, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentShiftForLine, getCurrentTimeInZone, getCurrentWeekFullRange, getCurrentWeekToDateRange, getDashboardHeaderTimeInZone, getDateKeyFromDate, getDateKeyFromValue, getDayDateKey, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getInitials, getKpiSignalLabel, getKpiSignalStatus, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getMonthKeyBounds, getMonthWeekRanges, getMonthlyTrendComparisonLabel, getNextUpdateInterval, getOperationalDate, getRoleAssignmentKind, getRoleDescription, getRoleLabel, getRoleMetadata, getRoleNavPaths, getS3SignedUrl, getS3VideoSrc, getShiftData, getShiftNameById, getShiftWorkDurationSeconds, getShortShiftName, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUniformShiftGroup, getUserThreads, getUserThreadsPaginated, getVisibleRolesForCurrentUser, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, groupLinesByShift, hasAnyShiftData, identifyCoreUser, initializeCoreMixpanel, isEfficiencyOnTrack, isFactoryScopedRole, isFullMonthRange, isIgnorableFrontendError, isLegacyConfiguration, isLoopbackHostname, isPrefetchError, isRealSku, isRecentFlowVideoGridMetricMode, isSafari, isSupervisorRole, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWipGatedVideoGridMetricMode, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, lineLeaderboardService, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, normalizeActionFamily, normalizeDateKeyRange, normalizeDateKeyRangeUnbounded, normalizeRoleLevel, normalizeVideoGridMetricMode, optifyeAgentClient, parseDateKeyToDate, parseS3Uri, pickPreferredLineMetricsRow, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, productionPlanService, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSentryQuotaForTests, resetSubscriptionManager, resolveDefaultSkuId, resolveLiveSkuId, s3VideoPreloader, selectPreferredLineMetricsRow, setSentryUserContext, setSentryWorkspaceContext, shouldEnableLocalDevTestLogin, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, subscribeWorkspaceDisplayNames, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, transformToChartData, updateThreadTitle, upsertWorkspaceDisplayNameInCache, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useClipsInit, useCompanyClipsCost, useCompanyFastSlowClipFiltersEnabled, useCompanyHasVlmEnabledLine, useCompanyUsersUsage, useCompanyWorkspaceHourAiSummaryEnabled, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHideMobileHeader, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useIdleTimeClipClassifications, useIdleTimeReasons, useIdleTimeVlmConfig, useKpiTrends, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useLines, useMessages, useMetrics, useMobileMenu, useMonthlyTrend, useMultiLineShiftConfigs, useNavigation, useOperationalShiftKey, useOptionalSupabase, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useSessionTracking, useSessionTrackingContext, useShiftConfig, useShiftGroups, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useSupervisorsByLineIds, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useUserUsage, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthLastSeen, useWorkspaceHealthStatus, useWorkspaceHourSummary, useWorkspaceLightTimeline, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, useWorkspaceUptimeTimeline, useWorkspaceVideoStreams, userService, videoPrefetchManager, videoPreloader, weeklyTopPerformerService, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };
+export { ACTION_FAMILIES, ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AvatarUpload, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ChangeRoleDialog, ClipFilterProvider, ClipsCostView_default as ClipsCostView, CompactWorkspaceHealthCard, ConfirmRemoveUserDialog, CongratulationsOverlay, CroppedHlsVideoPlayer, 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_HOME_VIEW_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_SHIFT_DATA, 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, DiagnosisVideoModal, EFFICIENCY_ON_TRACK_THRESHOLD, EmptyStateMessage, EncouragementOverlay, FactoryAssignmentDropdown, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, FittingTitle, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthDateShiftSelector, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, HourlyUptimeChart, ISTTimer_default as ISTTimer, IdleTimeVlmConfigProvider, ImprovementCenterView_default as ImprovementCenterView, InlineEditableText, InteractiveOnboardingTour, InvitationService, InvitationsTable, InviteUserDialog, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPI_SIGNAL_LABELS, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend5 as Legend, LineAssignmentDropdown, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LineOvertakeNotificationManager, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, MobileMenuProvider, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlantHeadView_default as PlantHeadView, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProductionPlanApiError, ProductionPlanView_default as ProductionPlanView, ProfileView_default as ProfileView, ROOT_DASHBOARD_EVENT_NAMES, RecentFlowSnapshotGrid, RegistryProvider, RoleBadge, S3ClipsSupabaseService as S3ClipsService, S3Service, SENTRY_HANDLED_EVENT_SESSION_LIMIT, SENTRY_HANDLED_EVENT_WINDOW_MS, SENTRY_QUOTA_STORAGE_KEY, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionTracker, SessionTrackingContext, SessionTrackingProvider, SettingsPopup, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UptimeDonutChart, UptimeLineChart, UptimeMetricCards, UserAvatar, UserManagementService, UserManagementTable, UserService, UserUsageDetailModal, UserUsageStats, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceCycleTimeMetricCards, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, addSentryBreadcrumb, aggregateKPIsFromLineMetricsRows, aggregateLineSignals, alertsService, apiUtils, areAllLinesOnSameShift, authCoreService, authOTPService, authRateLimitService, awardsService, buildDateKey, buildKPIsFromLineMetricsRow, buildKpiLineHierarchy, buildLegacyLineOvertakeEventKey, buildLineLeaderboardRows, buildLineOvertakeEventKey, buildLineSkuBreakdown, buildShiftGroupsKey, canPermissionEditProductionPlan, canRoleAccessDashboardPath, canRoleAccessTeamManagement, canRoleAssignFactories, canRoleAssignLines, canRoleChangeRole, canRoleEditProductionPlan, canRoleInviteRole, canRoleManageCompany, canRoleManageTargets, canRoleManageUsers, canRoleRemoveUser, canRoleViewClipsCost, canRoleViewUsageStats, captureHandledFrontendException, captureSentryException, captureSentryMessage, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearSentryContext, clearWorkspaceDisplayNamesCache, cn, combineLineMetricsRows, countRealSkus, createDefaultKPIs, createInvitationService, createLinesService, createSessionTracker, createStorageService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, detectLineOvertakeEvents, fetchIdleTimeReasons, fetchLineDummySkuId, fetchLineSkuCatalog, filterDataByDateKeyRange, filterRealSkuBreakdown, forceRefreshWorkspaceDisplayNames, formatAwardMonth, formatDateInZone, formatDateKeyForDisplay, formatDateTimeInZone, formatDuration2 as formatDuration, formatISTDate, formatIdleTime, formatRangeLabel, formatReasonLabel, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getActionDisplayName, getActiveShift, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAllWorkspaceDisplayNamesSnapshot, getAnonClient, getAssignableRoles, getAssignmentColumnLabel, getAvailableShiftIds, getAwardBadgeType, getAwardDescription, getAwardTitle, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentShiftForLine, getCurrentTimeInZone, getCurrentWeekFullRange, getCurrentWeekToDateRange, getDashboardHeaderTimeInZone, getDateKeyFromDate, getDateKeyFromValue, getDayDateKey, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getInitials, getKpiSignalLabel, getKpiSignalStatus, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getMonthKeyBounds, getMonthWeekRanges, getMonthlyTrendComparisonLabel, getNextUpdateInterval, getOperationalDate, getRoleAssignmentKind, getRoleDescription, getRoleLabel, getRoleMetadata, getRoleNavPaths, getS3SignedUrl, getS3VideoSrc, getShiftData, getShiftNameById, getShiftWorkDurationSeconds, getShortShiftName, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUniformShiftGroup, getUserThreads, getUserThreadsPaginated, getVisibleRolesForCurrentUser, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, groupLinesByShift, hasAnyShiftData, identifyCoreUser, initializeCoreMixpanel, isEfficiencyOnTrack, isFactoryScopedRole, isFullMonthRange, isIgnorableFrontendError, isLegacyConfiguration, isLoopbackHostname, isPrefetchError, isRealSku, isRecentFlowVideoGridMetricMode, isSafari, isSupervisorRole, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWipGatedVideoGridMetricMode, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, lineLeaderboardService, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, normalizeActionFamily, normalizeDateKeyRange, normalizeDateKeyRangeUnbounded, normalizeRoleLevel, normalizeVideoGridMetricMode, optifyeAgentClient, parseDateKeyToDate, parseS3Uri, pickPreferredLineMetricsRow, preInitializeWorkspaceDisplayNames, preInitializeWorkspaceDisplayNamesForLines, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, productionPlanService, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSentryQuotaForTests, resetSubscriptionManager, resolveDefaultSkuId, resolveLiveSkuId, s3VideoPreloader, selectPreferredLineMetricsRow, setSentryUserContext, setSentryWorkspaceContext, shouldEnableLocalDevTestLogin, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, subscribeWorkspaceDisplayNames, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, transformToChartData, updateThreadTitle, upsertWorkspaceDisplayNameInCache, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useClipsInit, useCompanyClipsCost, useCompanyFastSlowClipFiltersEnabled, useCompanyHasVlmEnabledLine, useCompanyUsersUsage, useCompanyWorkspaceHourAiSummaryEnabled, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHideMobileHeader, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useIdleTimeClipClassifications, useIdleTimeReasons, useIdleTimeVlmConfig, useKpiTrends, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useLines, useMessages, useMetrics, useMobileMenu, useMonthlyTrend, useMultiLineShiftConfigs, useNavigation, useOperationalShiftKey, useOptionalSupabase, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useSessionTracking, useSessionTrackingContext, useShiftConfig, useShiftGroups, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useSupervisorsByLineIds, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useUserUsage, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthLastSeen, useWorkspaceHealthStatus, useWorkspaceHourSummary, useWorkspaceLightTimeline, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, useWorkspaceUptimeTimeline, useWorkspaceVideoStreams, userService, videoPrefetchManager, videoPreloader, weeklyTopPerformerService, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map