@optifye/dashboard-core 6.12.51 → 6.12.52

package/dist/index.js

@@ -6067,7 +6067,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)
@@ -6326,12 +6327,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}`,
@@ -6343,39 +6406,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);
   },
@@ -6396,7 +6452,8 @@ var workspaceService = {
    */
   clearWorkspaceDisplayNamesCache() {
     this._workspaceDisplayNamesCache.clear();
-    this._cacheTimestamp = 0;
+    this._workspaceDisplayNamesInFlight.clear();
+    this._workspaceDisplayNamesByLineInFlight.clear();
   },
   clearWorkspacesCache() {
     this._workspacesCache.clear();
@@ -6902,10 +6959,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({
@@ -6955,6 +7018,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({
@@ -7689,6 +7755,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: dateFnsTz.formatInTimeZone(currentTiming.shiftStartDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+        shiftEnd: dateFnsTz.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,
@@ -7911,6 +7995,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,
@@ -12003,85 +12090,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 {
@@ -12090,11 +12382,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 });
     });
   }
@@ -12107,71 +12397,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(() => {
@@ -12179,30 +12498,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 () => {
@@ -12212,75 +12518,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);
     }
   }
@@ -12293,23 +12594,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);
@@ -13315,15 +13622,43 @@ function useSessionTracking(options = {}) {
   const trackerRef = React125.useRef(null);
   const isTrackingRef = React125.useRef(false);
   const initRef = React125.useRef(false);
-  const getAccessToken2 = React125.useCallback(async () => {
-    return session?.access_token || null;
+  const accessTokenRef = React125.useRef(null);
+  const isAuthenticatedRef = React125.useRef(isAuthenticated);
+  const onSessionStartRef = React125.useRef(onSessionStart);
+  const onSessionEndRef = React125.useRef(onSessionEnd);
+  const apiBaseUrl2 = config?.apiBaseUrl || process.env.NEXT_PUBLIC_API_BASE_URL || "";
+  isAuthenticatedRef.current = isAuthenticated;
+  React125.useEffect(() => {
+    if (session?.access_token) {
+      accessTokenRef.current = session.access_token;
+    }
   }, [session?.access_token]);
+  React125.useEffect(() => {
+    onSessionStartRef.current = onSessionStart;
+  }, [onSessionStart]);
+  React125.useEffect(() => {
+    onSessionEndRef.current = onSessionEnd;
+  }, [onSessionEnd]);
+  const getAccessToken2 = React125.useCallback(async () => {
+    return accessTokenRef.current;
+  }, []);
+  const endCurrentTracker = React125.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;
+      }
+    });
+  }, []);
   React125.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;
@@ -13331,41 +13666,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]);
   React125.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 = React125.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,
@@ -17464,7 +17792,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);
     }
@@ -17646,7 +17974,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,
@@ -17996,7 +18324,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;
@@ -18042,7 +18370,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}`);
@@ -18075,7 +18403,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}`);
@@ -18329,7 +18657,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
         hls.loadSource(resolvedHlsSrc);
         activeStreamUrlRef.current = resolvedHlsSrc;
         hls.on(Hls__default.default.Events.ERROR, (_, data) => {
-          debugLog("[HLS] Error", {
+          debugLog2("[HLS] Error", {
             type: data.type,
             details: data.details,
             fatal: data.fatal,
@@ -18337,7 +18665,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
             frag: data.frag?.sn
           });
           if (data.type === Hls__default.default.ErrorTypes.MEDIA_ERROR && data.details === Hls__default.default.ErrorDetails.BUFFER_STALLED_ERROR) {
-            debugLog("[HLS] Buffer stalled, waiting for next segment");
+            debugLog2("[HLS] Buffer stalled, waiting for next segment");
             attemptPlay();
             return;
           }
@@ -18481,7 +18809,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
@@ -18877,6 +19205,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) => {
@@ -18898,6 +19227,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;
@@ -18981,7 +19326,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}`);
@@ -18996,10 +19345,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;
@@ -19015,6 +19361,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) {
@@ -38749,6 +39126,7 @@ var HourlyOutputChartComponent = ({
                             timeRange: data2.timeRange,
                             startTime,
                             endTime,
+                            timezone,
                             output: Math.round(data2.originalOutput || 0),
                             target: data2.target,
                             status: data2.status
@@ -38922,6 +39300,7 @@ var HourlyOutputChartComponent = ({
                                   timeRange: entry.timeRange,
                                   startTime,
                                   endTime,
+                                  timezone,
                                   output: Math.round(entry.originalOutput || 0),
                                   target: entry.target,
                                   status: entry.status
@@ -42389,6 +42768,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,
@@ -42400,6 +42838,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
@@ -46237,6 +46681,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;
@@ -46265,6 +46739,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) => {
@@ -46289,6 +46778,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;
@@ -46367,6 +46877,8 @@ var FileManagerFilters = ({
   idleTimeVlmEnabled = false,
   showPercentileCycleFilters = true,
   prefetchedClipMetadata,
+  prefetchedClipTotals,
+  prefetchedPercentileClips,
   externallyManagedLoadingCategories,
   activeCategoryLoading,
   idleClipSort = "latest",
@@ -46374,6 +46886,7 @@ var FileManagerFilters = ({
   initialTimeFilter
 }) => {
   const [expandedNodes, setExpandedNodes] = React125.useState(/* @__PURE__ */ new Set());
+  const [activeInitialTimeFilter, setActiveInitialTimeFilter] = React125.useState(initialTimeFilter ?? null);
   const [startTime, setStartTime] = React125.useState(initialTimeFilter?.startTime ?? "");
   const [endTime, setEndTime] = React125.useState(initialTimeFilter?.endTime ?? "");
   const [isTimeFilterActive, setIsTimeFilterActive] = React125.useState(
@@ -46388,14 +46901,93 @@ var FileManagerFilters = ({
   const [showIdleLabelFilterModal, setShowIdleLabelFilterModal] = React125.useState(false);
   const [isLoadingIdleReasonOptions, setIsLoadingIdleReasonOptions] = React125.useState(false);
   const timezone = useAppTimezone();
+  const activeTimeFilterTimezone = activeInitialTimeFilter?.timezone || initialTimeFilter?.timezone || timezone;
+  const activeTimeFilterKey = React125.useMemo(() => startTime && endTime && isTimeFilterActive ? `${startTime}-${endTime}-${activeTimeFilterTimezone}` : "none", [activeTimeFilterTimezone, endTime, isTimeFilterActive, startTime]);
+  const initialTimeFilterCategoryIds = React125.useMemo(() => {
+    if (!activeInitialTimeFilter) {
+      return [];
+    }
+    return Array.from(new Set([
+      activeInitialTimeFilter.categoryId,
+      ...activeInitialTimeFilter.categoryIds || []
+    ].filter((value) => typeof value === "string" && value.length > 0)));
+  }, [activeInitialTimeFilter]);
+  const requiredHourlyFilterCategoryIds = React125.useMemo(() => {
+    if (initialTimeFilterCategoryIds.length > 0) {
+      return initialTimeFilterCategoryIds;
+    }
+    if (!isTimeFilterActive || !startTime || !endTime) {
+      return [];
+    }
+    return REQUIRED_HOURLY_FILTER_CATEGORY_IDS;
+  }, [endTime, initialTimeFilterCategoryIds, isTimeFilterActive, startTime]);
+  const categoriesForTree = React125.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] = React125.useState({});
+  const [scopedCategoryTotals, setScopedCategoryTotals] = React125.useState({});
   const [loadingCategories, setLoadingCategories] = React125.useState(/* @__PURE__ */ new Set());
+  const isCategoryScopedByTimeFilter = React125.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 = React125.useCallback((categoryId) => requiredHourlyFilterCategoryIds.includes(categoryId), [requiredHourlyFilterCategoryIds]);
+  const manualHourlySnapshotKey = React125.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 = React125.useRef(null);
+  const manualHourlySnapshotInFlightKeyRef = React125.useRef(null);
+  const [manualHourlySnapshotFailureKey, setManualHourlySnapshotFailureKey] = React125.useState(null);
+  const isManualHourlySnapshotPending = Boolean(
+    manualHourlySnapshotKey && manualHourlySnapshotAppliedKeyRef.current !== manualHourlySnapshotKey && manualHourlySnapshotFailureKey !== manualHourlySnapshotKey
+  );
   const [categoryPages, setCategoryPages] = React125.useState({});
   const [categoryHasMore, setCategoryHasMore] = React125.useState({});
   const [localClipClassifications, setLocalClipClassifications] = React125.useState({});
   const clipMetadataRef = React125.useRef({});
   const inFlightMetadataRequestsRef = React125.useRef(/* @__PURE__ */ new Set());
+  const inFlightPercentileClipRequestsRef = React125.useRef(/* @__PURE__ */ new Set());
+  const autoSelectedScopedClipRef = React125.useRef(null);
   const previousIdleClipSortRef = React125.useRef(idleClipSort);
   const mergedClipClassifications = React125.useMemo(() => ({
     ...clipClassifications || {},
@@ -46408,12 +47000,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]);
   React125.useEffect(() => {
     if (previousIdleClipSortRef.current === idleClipSort) {
@@ -46445,18 +47039,66 @@ var FileManagerFilters = ({
       return next;
     });
   }, [idleClipSort]);
+  React125.useEffect(() => {
+    manualHourlySnapshotAppliedKeyRef.current = null;
+    manualHourlySnapshotInFlightKeyRef.current = null;
+    setManualHourlySnapshotFailureKey(null);
+    setScopedCategoryTotals({});
+    setClipMetadata({});
+    setCategoryPages({});
+    setCategoryHasMore({});
+    setPercentileClips({});
+    setPercentileCounts({
+      "fast-cycles": null,
+      "slow-cycles": null
+    });
+  }, [activeTimeFilterKey]);
   const isCategoryExternallyManaged = React125.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 = React125.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 = React125.useCallback((categoryId) => {
+    if (Array.isArray(clipMetadata[categoryId])) {
+      return true;
+    }
+    if (Array.isArray(prefetchedClipMetadata?.[categoryId])) {
+      return true;
+    }
+    return typeof prefetchedClipTotals?.[categoryId] === "number";
+  }, [clipMetadata, prefetchedClipMetadata, prefetchedClipTotals]);
   React125.useEffect(() => {
     if (!prefetchedClipMetadata) {
       return;
@@ -46479,6 +47121,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 };
@@ -46503,7 +47161,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;
         }
@@ -46512,8 +47170,68 @@ var FileManagerFilters = ({
       });
       return changed ? next : prev;
     });
-  }, [prefetchedClipMetadata, counts]);
+  }, [prefetchedClipMetadata, prefetchedClipTotals, counts, isCategoryScopedByTimeFilter]);
+  React125.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 = React125.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] = React125.useState({
     "fast-cycles": null,
     "slow-cycles": null
@@ -46623,11 +47341,12 @@ var FileManagerFilters = ({
       return null;
     }
   }, [supabase]);
-  const getMetadataLoadingKey = React125.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 = React125.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 = React125.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: {
@@ -46641,9 +47360,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"
@@ -46652,7 +47374,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 = React125.useCallback(async (clips) => {
     if (!idleTimeVlmEnabled || clips.length === 0) {
       return;
@@ -46720,6 +47455,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 || []);
       }
@@ -46736,7 +47477,94 @@ var FileManagerFilters = ({
         return newSet;
       });
     }
-  }, [workspaceId, date, shift, fetchClipMetadataPage, idleTimeVlmEnabled, seedIdleClassifications, getMetadataLoadingKey]);
+  }, [workspaceId, date, shift, fetchClipMetadataPage, idleTimeVlmEnabled, seedIdleClassifications, getMetadataLoadingKey, isCategoryScopedByTimeFilter]);
+  React125.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 = React125.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 = React125.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 = React125.useCallback(async () => {
     if (!workspaceId || !date || shift === void 0) {
       return;
@@ -46802,6 +47630,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`;
@@ -46817,7 +47651,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
         }),
@@ -46832,7 +47669,7 @@ var FileManagerFilters = ({
         [type]: data.clips || []
       }));
       setPercentileCounts((prev) => {
-        if (typeof prev[type] === "number") {
+        if (!shouldScopeToTimeFilter && typeof prev[type] === "number") {
           return prev;
         }
         return {
@@ -46843,8 +47680,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
+  ]);
+  React125.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
+  ]);
+  React125.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
+  ]);
+  React125.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 = React125.useMemo(() => {
     if (!workspaceId || !date || shift === void 0) {
       return null;
@@ -46867,12 +47902,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]);
   React125.useEffect(() => {
     if (!showPercentileCycleFilters) {
       return;
@@ -46928,11 +47966,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() };
@@ -46951,37 +47998,30 @@ var FileManagerFilters = ({
     }
   }, [workspaceId, date, shift, filterState.percentile, showPercentileCycleFilters, supabase, percentileCounts, percentileClips, fetchPercentileClips]);
   React125.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 = React125.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]);
+  React125.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 = React125.useCallback((type, isExpanded, colorClasses) => {
     const iconMap = {
       "fast-cycles": { icon: lucideReact.TrendingUp, color: "text-green-600" },
@@ -47010,12 +48050,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]);
+  React125.useEffect(() => {
+    const requestedCategory = activeFilter;
+    if (!requestedCategory || !isInitialTimeFilterCategory(requestedCategory) || isCategoryExternallyManaged(requestedCategory) || hasCompleteMetadataForInitialTimeFilter(requestedCategory)) {
+      return;
+    }
+    fetchClipMetadata(requestedCategory, 1);
+  }, [
+    activeFilter,
+    fetchClipMetadata,
+    hasCompleteMetadataForInitialTimeFilter,
+    isCategoryExternallyManaged,
+    isInitialTimeFilterCategory
+  ]);
   React125.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -47079,25 +48136,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 = React125.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);
       }
@@ -47107,9 +48173,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);
@@ -47119,7 +48198,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,
@@ -47157,6 +48236,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__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: `h-4 w-4 ${colorClasses.text}` }) : getCategoryIcon(category.icon, colorClasses),
@@ -47164,10 +48244,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",
@@ -47176,6 +48264,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",
@@ -47187,7 +48276,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",
@@ -47207,6 +48296,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",
@@ -47218,7 +48308,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",
@@ -47249,7 +48339,7 @@ var FileManagerFilters = ({
             hour12: true,
             hour: 'numeric',
             minute: '2-digit',
-            timeZone: timezone
+            timeZone: activeTimeFilterTimezone
           });
           
           return {
@@ -47268,7 +48358,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);
       }
@@ -47283,23 +48377,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 = React125.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__ */ jsxRuntime.jsx(lucideReact.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 = React125.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 = React125.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]);
+  React125.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 = React125.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
+  ]);
+  React125.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");
@@ -47317,10 +48651,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");
@@ -47330,7 +48668,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,
@@ -47368,8 +48720,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);
@@ -47382,24 +48737,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__ */ jsxRuntime.jsxs("div", { className: "select-none animate-in", children: [
       /* @__PURE__ */ jsxRuntime.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: [
@@ -47435,7 +48806,7 @@ var FileManagerFilters = ({
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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)
@@ -47471,7 +48842,7 @@ var FileManagerFilters = ({
                   })()
                 ) })
               ] }),
-              node.count !== void 0 && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : node.count }) })
             ] })
           ]
         }
@@ -47482,6 +48853,7 @@ var FileManagerFilters = ({
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
           "Loading clips..."
         ] }) }),
+        showScopedEmptyState && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 text-center text-sm text-slate-500", children: "No clips found" }),
         isLoadMoreLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center text-sm text-slate-500", children: [
           /* @__PURE__ */ jsxRuntime.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..."
@@ -47496,7 +48868,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)"
             ]
           }
@@ -47559,6 +48931,8 @@ var FileManagerFilters = ({
                 e.stopPropagation();
                 setStartTime("");
                 setEndTime("");
+                setActiveInitialTimeFilter(null);
+                setScopedCategoryTotals({});
                 setIsTimeFilterActive(false);
               },
               className: "rounded-full p-0.5 transition-colors hover:bg-blue-100",
@@ -47692,6 +49066,8 @@ var FileManagerFilters = ({
                   onClick: () => {
                     setStartTime("");
                     setEndTime("");
+                    setActiveInitialTimeFilter(null);
+                    setScopedCategoryTotals({});
                     setStartSearchTerm("");
                     setEndSearchTerm("");
                     setIsTimeFilterActive(false);
@@ -47780,8 +49156,13 @@ var FileManagerFilters = ({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 flex-1 min-h-0 overflow-y-auto scrollbar-thin", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filterTree.map((node) => renderNode(node)) }),
-      filterTree.length === 0 && (startTime || endTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: displayedFilterTree.map((node) => renderNode(node)) }),
+      displayedFilterTree.length === 0 && isChartHandoffLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-8 w-8 animate-spin text-blue-500" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "Loading clips..." }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500", children: "Finding clips from the selected hour" })
+      ] }),
+      displayedFilterTree.length === 0 && !isChartHandoffLoading && (startTime || endTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clips found" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500 mb-4", children: "No clips match the selected time range" }),
@@ -47791,6 +49172,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",
@@ -47798,12 +49181,12 @@ var FileManagerFilters = ({
           }
         )
       ] }),
-      filterTree.length === 0 && !startTime && !endTime && categories.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+      displayedFilterTree.length === 0 && !startTime && !endTime && categories.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clip types available" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500", children: "Loading clip categories..." })
       ] }),
-      filterTree.length === 0 && !startTime && !endTime && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+      displayedFilterTree.length === 0 && !startTime && !endTime && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "h-12 w-12 mx-auto" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clips available" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-slate-500", children: "No clips found for the selected time period" })
@@ -48210,6 +49593,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;
@@ -48257,6 +49699,7 @@ var BottlenecksContent = ({
   ticketId,
   prefetchedPercentileCounts,
   lowMomentsPrefetch,
+  initialTimePrefetch,
   initialTimeFilter
 }) => {
   console.log("\u{1F3AB} [BottlenecksContent] Rendered with ticketId:", ticketId || "NONE", "workspaceId:", workspaceId, "date:", date, "shift:", shift);
@@ -48469,6 +49912,108 @@ var BottlenecksContent = ({
     enabled: isEffectiveShiftReady
   });
   const isLowMomentsCategoryAvailable = React125.useMemo(() => Array.isArray(clipTypes) && clipTypes.some((type) => type?.type === LOW_EFFICIENCY_CATEGORY_ID || type?.id === LOW_EFFICIENCY_CATEGORY_ID), [clipTypes]);
+  const requestedInitialCategoryCandidates = React125.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 = React125.useMemo(() => new Set(requestedInitialCategoryCandidates), [requestedInitialCategoryCandidates]);
+  const isInitialTimeHandoffCategory = React125.useCallback((categoryId) => Boolean(
+    hasInitialTimeHandoff && categoryId && (initialTimeHandoffCategorySet.size === 0 || initialTimeHandoffCategorySet.has(categoryId))
+  ), [hasInitialTimeHandoff, initialTimeHandoffCategorySet]);
+  const isTimestampInInitialTimeHandoff = React125.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 = React125.useMemo(() => resolveInitialClipCategory(requestedInitialCategoryCandidates, clipTypes, dynamicCounts), [clipTypes, dynamicCounts, requestedInitialCategoryCandidates]);
+  const initialTimeFilterKey = React125.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] || "";
+  React125.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,
@@ -48516,6 +50061,15 @@ var BottlenecksContent = ({
     }
   });
   React125.useEffect(() => {
+    if (resolvedInitialCategory) {
+      if (initialFilter !== resolvedInitialCategory) {
+        setInitialFilter(resolvedInitialCategory);
+      }
+      if (activeFilterRef.current !== resolvedInitialCategory) {
+        updateActiveFilter(resolvedInitialCategory);
+      }
+      return;
+    }
     if (initialFilter) {
       return;
     }
@@ -48532,7 +50086,15 @@ var BottlenecksContent = ({
       activeFilterRef.current = defaultCategory;
       return;
     }
-  }, [clipTypes, dynamicCounts, defaultCategory, initialFilter, isLowMomentsCategoryAvailable]);
+  }, [
+    clipTypes,
+    dynamicCounts,
+    defaultCategory,
+    initialFilter,
+    isLowMomentsCategoryAvailable,
+    resolvedInitialCategory,
+    updateActiveFilter
+  ]);
   const mergedCounts = React125.useMemo(() => {
     return { ...dynamicCounts };
   }, [dynamicCounts]);
@@ -48581,6 +50143,9 @@ var BottlenecksContent = ({
   const loadFirstVideoForCategory = React125.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}`);
@@ -49026,8 +50591,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 {
@@ -49066,7 +50632,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"
         });
@@ -49083,10 +50652,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"
@@ -49099,7 +50671,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,
@@ -49146,8 +50719,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);
@@ -49181,7 +50755,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]);
   React125.useEffect(() => {
     if (activeFilter !== LOW_EFFICIENCY_CATEGORY_ID || !isLowMomentsCategoryAvailable) {
       return;
@@ -49213,6 +50787,37 @@ var BottlenecksContent = ({
     applyMetadataSnapshot,
     isLowMomentsCategoryAvailable
   ]);
+  React125.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
+  ]);
   React125.useEffect(() => {
     if (previousIdleClipSortRef.current === idleClipSort) {
       return;
@@ -49252,7 +50857,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
@@ -49276,7 +50881,7 @@ var BottlenecksContent = ({
         }
       }
     }
-  }, [activeFilter, allVideos, mergedCounts, currentClipId, loadCategoryMetadata]);
+  }, [activeFilter, allVideos, mergedCounts, currentClipId, loadCategoryMetadata, isInitialTimeHandoffCategory]);
   React125.useEffect(() => {
     if (!currentClipId || activeFilter === "all") {
       return;
@@ -49304,10 +50909,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);
     }
@@ -49327,17 +50941,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);
@@ -49356,7 +50973,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)) {
@@ -49744,6 +51361,32 @@ var BottlenecksContent = ({
     }
     return filteredVideos[currentIndex];
   }, [filteredVideos, currentIndex]);
+  const currentVideoMatchesInitialTimeHandoff = React125.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
@@ -49910,11 +51553,111 @@ var BottlenecksContent = ({
     }
     return currentPosition;
   }, [activeFilter, categoryMetadata.length, currentMetadataIndex, currentPosition, shouldUseMetadataNavigation]);
-  const prefetchedExplorerMetadata = React125.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 = React125.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 = React125.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 = React125.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 = React125.useMemo(() => {
     if (!idleTimeVlmEnabled) {
       return [];
@@ -50324,7 +52067,7 @@ var BottlenecksContent = ({
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex-grow p-4 flex items-center justify-center min-h-[calc(100dvh-12rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
   if (error && error.type === "fatal" && !hasInitialLoad || clipTypesError) {
@@ -50334,7 +52077,30 @@ var BottlenecksContent = ({
       /* @__PURE__ */ jsxRuntime.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,
@@ -50353,190 +52119,204 @@ var BottlenecksContent = ({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:h-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 w-full lg:flex-[3] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden lg:h-full", children: filteredVideos.length > 0 && currentVideo && !isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative group lg:h-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "w-full h-full",
-            style: {
-              opacity: isTransitioning ? 0 : 1,
-              transition: "opacity 0.1s ease-in-out"
-            },
-            children: !shouldDeferPlayerRenderForCrop && /* @__PURE__ */ jsxRuntime.jsx(
-              CroppedVideoPlayer,
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden lg:h-full", children: canRenderCurrentVideo && currentVideo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative group lg:h-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        !shouldDeferPlayerRenderForCrop && !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        error && error.type === "retrying" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
-        ] }) }),
-        error && error.type === "fatal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/90 text-white p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-300 mb-6", children: error.message }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
-            error.canSkip && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "button",
+            currentVideo.type === "recent_flow_red_streak" && !shouldDeferPlayerRenderForCrop ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "font-medium text-xs text-white", children: [
-                  "AI Confidence: ",
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: confidenceColor, children: confidenceLabel })
-                ] }) }) });
+            ) : null,
+            showBlockingVideoLoader && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+            !shouldDeferPlayerRenderForCrop && !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+            error && error.type === "retrying" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
+            ] }) }),
+            error && error.type === "fatal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/90 text-white p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center max-w-md", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-300 mb-6", children: error.message }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
+                error.canSkip && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "font-medium text-xs text-white", children: [
+                      "AI Confidence: ",
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: confidenceColor, children: confidenceLabel })
+                    ] }) }) });
+                  })()
+                ] });
               })()
-            ] });
-          })()
-        ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                idleTimeVlmEnabled && confidence !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "font-medium text-xs text-white", children: [
-                  "AI Confidence: ",
-                  (confidence * 100).toFixed(0),
-                  "%"
-                ] }) }) }),
-                idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate font-medium text-xs ${config.color}`, children: config.displayName || "Analyzing..." })
-                ] }) })
-              ] });
-            })()
-          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${getSeverityColor(currentVideo.severity)} mr-2 animate-pulse` }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
-            currentVideo.type !== "recent_flow_red_streak" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Folder Selected" }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
+            ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    idleTimeVlmEnabled && confidence !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "font-medium text-xs text-white", children: [
+                      "AI Confidence: ",
+                      (confidence * 100).toFixed(0),
+                      "%"
+                    ] }) }) }),
+                    idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-10", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconComponent, { className: `h-3.5 w-3.5 flex-shrink-0 ${config.iconColor}`, strokeWidth: 2.5 }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate font-medium text-xs ${config.color}`, children: config.displayName || "Analyzing..." })
+                    ] }) })
+                  ] });
+                })()
+              ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${getSeverityColor(currentVideo.severity)} mr-2 animate-pulse` }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
+                currentVideo.type !== "recent_flow_red_streak" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
+              ] }) })
+            )
+          ] }) }) }) : shouldHoldInitialTimeHandoffVideo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative lg:h-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative lg:h-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
+              /* Priority 5.5: Show "no folder selected" if activeFilter is empty */
+              hasInitialLoad && !activeFilter ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Folder Selected" }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative lg:h-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
+                )
+              )
             )
-          )
-        )
-      ) }) }),
+          ) })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm h-full overflow-hidden flex flex-col", children: [
@@ -50671,7 +52451,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,
@@ -50685,11 +52465,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,
@@ -70503,9 +72281,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();
           }
@@ -80969,7 +82745,6 @@ var TargetsViewUI = ({
   skuRequired = false,
   onUpdateWorkspaceSelectedSku
 }) => {
-  const { displayNames: workspaceDisplayNames } = useWorkspaceDisplayNames();
   const mobileMenuContext = useMobileMenu();
   useHideMobileHeader(!!mobileMenuContext);
   if (isLoading) {
@@ -81151,7 +82926,7 @@ var TargetsViewUI = ({
                   ] })
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.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;
@@ -81702,6 +83477,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 ?? ""),
@@ -81760,6 +83536,7 @@ var TargetsView = ({
                 return {
                   id: ws.id,
                   name: ws.workspace_id,
+                  displayName: ws.display_name || ws.workspace_id,
                   targetPPH: "",
                   targetCycleTime: "",
                   targetDayOutput: "",
@@ -82240,15 +84017,31 @@ var TargetsView = ({
   const handleUpdateWorkspaceDisplayName = React125.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();
       }
       sonner.toast.success("Workspace name updated successfully");
     } catch (error) {
@@ -82292,9 +84085,8 @@ var TargetsView = ({
     }
   );
 };
-var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
-var TargetsView_default = TargetsViewWithDisplayNames;
-var AuthenticatedTargetsView = withAuth(React125__namespace.default.memo(TargetsViewWithDisplayNames));
+var TargetsView_default = TargetsView;
+var AuthenticatedTargetsView = withAuth(React125__namespace.default.memo(TargetsView));
 function useTimezone(options = {}) {
   const dashboardConfig = useDashboardConfig();
   const workspaceConfig = useWorkspaceConfig();
@@ -82474,17 +84266,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;
@@ -82668,10 +84465,18 @@ var WorkspaceDetailView = ({
     setSelectedHour(null);
   }, [workspaceId, date, shift]);
   const dashboardConfig = useDashboardConfig();
+  const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
   const { legend: efficiencyLegend } = useEfficiencyLegend();
   const prewarmedClipsRef = React125.useRef(/* @__PURE__ */ new Set());
   const prewarmInFlightRef = React125.useRef(/* @__PURE__ */ new Set());
   const [lowMomentsPrefetch, setLowMomentsPrefetch] = React125.useState(null);
+  const selectedHourClipPrefetchInFlightRef = React125.useRef(/* @__PURE__ */ new Set());
+  const selectedHourClipPrefetchAbortRef = React125.useRef(null);
+  const [initialTimePrefetch, setInitialTimePrefetch] = React125.useState(null);
+  const {
+    isFastSlowClipFiltersEnabled,
+    isResolved: isFastSlowClipFiltersResolved
+  } = useCompanyFastSlowClipFiltersEnabled();
   const [aiSummaryHour, setAiSummaryHour] = React125.useState(null);
   const buildHourlyOutputActionTrackingProps = React125.useCallback((payload) => ({
     workspace_id: workspaceId,
@@ -82701,24 +84506,286 @@ var WorkspaceDetailView = ({
     timezone,
     workspaceId
   ]);
+  const prefetchClipsForSelectedHour = React125.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 = React125.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 = React125.useCallback((payload) => {
     trackCoreEvent("Hourly Output Ask AI Clicked", buildHourlyOutputActionTrackingProps(payload));
     setAiSummaryHour(payload);
   }, [buildHourlyOutputActionTrackingProps]);
   const handleCycleHourSelect = React125.useCallback((payload) => {
-    setSelectedHour({
+    const hour = {
       source: "cycle",
       hourIndex: payload.hourIndex,
       timeRange: payload.timeRange,
@@ -82728,17 +84795,23 @@ var WorkspaceDetailView = ({
       cycleTime: payload.cycleTime,
       idealCycleTime: payload.idealCycleTime,
       idleMinutes: payload.idleMinutes
-    });
-  }, []);
+    };
+    setSelectedHour(hour);
+    prefetchClipsForSelectedHour(hour);
+  }, [prefetchClipsForSelectedHour]);
   const handleOpenClipsForHour = React125.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 = React125.useCallback((payload) => {
     trackCoreEvent("Hourly Output Watch Clips Clicked", buildHourlyOutputActionTrackingProps(payload));
     handleOpenClipsForHour({
@@ -82747,6 +84820,7 @@ var WorkspaceDetailView = ({
       timeRange: payload.timeRange,
       startTime: payload.startTime,
       endTime: payload.endTime,
+      timezone: payload.timezone,
       status: payload.status,
       output: payload.output,
       target: payload.target
@@ -82769,11 +84843,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 = React125.useMemo(() => {
@@ -84520,6 +86589,7 @@ var WorkspaceDetailView = ({
                 workspaceMetrics: detailedWorkspaceMetrics || void 0,
                 prefetchedPercentileCounts: isFastSlowClipFiltersEnabled ? prefetchedPercentileCounts : null,
                 lowMomentsPrefetch,
+                initialTimePrefetch,
                 initialTimeFilter: pendingClipHourFilter,
                 className: "h-[calc(100vh-10rem)]"
               }
@@ -94507,6 +96577,7 @@ exports.parseDateKeyToDate = parseDateKeyToDate;
 exports.parseS3Uri = parseS3Uri;
 exports.pickPreferredLineMetricsRow = pickPreferredLineMetricsRow;
 exports.preInitializeWorkspaceDisplayNames = preInitializeWorkspaceDisplayNames;
+exports.preInitializeWorkspaceDisplayNamesForLines = preInitializeWorkspaceDisplayNamesForLines;
 exports.preloadS3Video = preloadS3Video;
 exports.preloadS3VideoUrl = preloadS3VideoUrl;
 exports.preloadS3VideosUrl = preloadS3VideosUrl;
@@ -94657,3 +96728,5 @@ exports.withRegistry = withRegistry;
 exports.withTimezone = withTimezone;
 exports.workspaceHealthService = workspaceHealthService;
 exports.workspaceService = workspaceService;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map