@optifye/dashboard-core 6.12.14 → 6.12.16

package/dist/index.js

@@ -5596,8 +5596,9 @@ var dashboardService = {
         total_output: item.total_output || 0,
         avg_cycle_time: item.avg_cycle_time || 0,
         ideal_cycle_time: item.ideal_cycle_time ?? 0,
-        ideal_output: item.ideal_output || 0,
-        total_day_output: item.total_day_output ?? item.ideal_output ?? 0,
+        ideal_output: item.target_output ?? item.ideal_output ?? 0,
+        total_day_output: item.target_output ?? item.total_day_output ?? item.ideal_output ?? 0,
+        target_output: item.target_output ?? item.total_day_output ?? item.ideal_output ?? 0,
         avg_pph: item.avg_pph || 0,
         pph_threshold: item.pph_threshold || 0,
         workspace_rank: item.workspace_rank || 0,
@@ -13996,7 +13997,7 @@ var useLineWorkspaceMetrics = (lineId, options) => {
         trend: item.trend_score === 1 ? 2 : 0,
         predicted_output: item.ideal_output || 0,
         efficiency: item.efficiency || 0,
-        action_threshold: item.total_day_output || 0,
+        action_threshold: item.target_output ?? item.total_day_output_recalculated ?? item.total_day_output ?? 0,
         idle_time: item.idle_time ?? void 0,
         idle_time_hourly: item.idle_time_hourly || null,
         shift_start: item.shift_start || void 0,
@@ -14677,7 +14678,7 @@ var transformMonitorWorkspaceMetrics = ({
       trend: item.trend_score === 1 ? 2 : 0,
       predicted_output: item.ideal_output || 0,
       efficiency: item.efficiency || 0,
-      action_threshold: item.total_day_output || 0,
+      action_threshold: item.target_output ?? item.total_day_output_recalculated ?? item.total_day_output ?? 0,
       monitoring_mode: item.monitoring_mode ?? void 0,
       idle_time: idleTimeSeconds,
       idle_time_hourly: item.idle_time_hourly ?? null,
@@ -16847,6 +16848,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
       return url.includes(proxyBaseUrl);
     }
   };
+  const isSnapshotStreamUrl = (url) => url.includes("/api/automation/snapshot/stream/");
   const getR2CameraUuid = (url) => {
     try {
       const parsed = new URL(url);
@@ -17435,11 +17437,16 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
         return;
       }
       if (Hls__default.default.isSupported() && !isNativeHlsRef.current) {
+        const usesSnapshotStream = isSnapshotStreamUrl(resolvedHlsSrc);
         const mergedConfig = {
           ...HLS_CONFIG,
           ...hlsConfig,
+          enableWorker: usesSnapshotStream ? false : hlsConfig?.enableWorker ?? HLS_CONFIG.enableWorker,
           xhrSetup: (xhr, url) => {
             const usesProxy = isProxyUrl(url);
+            if (isSnapshotStreamUrl(url)) {
+              xhr.withCredentials = true;
+            }
             if (isR2WorkerUrl(url, r2WorkerDomain) || usesProxy) {
               if (isManifestUrl(url)) {
                 xhr.open("GET", buildCacheBustedUrl(url), true);
@@ -17453,7 +17460,11 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
             const isR2Url = isR2WorkerUrl(context.url, r2WorkerDomain);
             const isManifestRequest = isManifestUrl(context.url);
             const usesProxy = isProxyUrl(context.url);
+            const isSnapshotStream = isSnapshotStreamUrl(context.url);
             let requestUrl = context.url;
+            if (isSnapshotStream) {
+              initParams.credentials = "include";
+            }
             if (isR2Url || usesProxy) {
               if (authToken) {
                 initParams.headers = {
@@ -18858,6 +18869,7 @@ var useAllWorkspaceMetrics = (options) => {
             trend_score,
             line_id,
             total_day_output,
+            total_day_output_recalculated,
             workspace_display_name
           `).eq("date", fallbackQueryDate).eq("shift_id", fallbackQueryShiftId).in("workspace_id", allEnabledWorkspaceIds).order("efficiency", { ascending: false });
         if (fetchError) throw fetchError;
@@ -18876,7 +18888,7 @@ var useAllWorkspaceMetrics = (options) => {
           trend: item.trend_score === 1 ? 2 : 0,
           predicted_output: 0,
           efficiency: item.efficiency || 0,
-          action_threshold: item.total_day_output || 0
+          action_threshold: item.target_output ?? item.total_day_output_recalculated ?? item.total_day_output ?? 0
         }));
       } else if (shiftGroups.length > 0) {
         console.log(`[useAllWorkspaceMetrics] \u{1F3ED} Fetching per-shift: ${shiftGroups.length} group(s)`);
@@ -18903,6 +18915,7 @@ var useAllWorkspaceMetrics = (options) => {
               trend_score,
               line_id,
               total_day_output,
+              total_day_output_recalculated,
               workspace_display_name
             `).eq("date", group.date).eq("shift_id", group.shiftId).in("workspace_id", groupWorkspaceIds);
           if (fetchError) throw fetchError;
@@ -18921,7 +18934,7 @@ var useAllWorkspaceMetrics = (options) => {
             trend: item.trend_score === 1 ? 2 : 0,
             predicted_output: 0,
             efficiency: item.efficiency || 0,
-            action_threshold: item.total_day_output || 0
+            action_threshold: item.target_output ?? item.total_day_output_recalculated ?? item.total_day_output ?? 0
           }));
         });
         const results = await Promise.all(queryPromises);
@@ -51735,12 +51748,15 @@ var LinePdfGenerator = ({
       doc.setTextColor(0, 0, 0);
       const kpiStartY = 80;
       const kpiSpacing = 10;
+      const dayTargetOutput = Math.round(Number(
+        lineInfo.metrics.output_target_recalculated ?? lineInfo.metrics.line_threshold ?? 0
+      ));
       createKPIBox(kpiStartY);
       doc.setFontSize(11);
       doc.setFont("helvetica", "normal");
       doc.text("Output:", 25, kpiStartY);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, kpiStartY);
+      doc.text(`${lineInfo.metrics.current_output} / ${dayTargetOutput}`, 120, kpiStartY);
       createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
       doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing);
@@ -51775,6 +51791,18 @@ var LinePdfGenerator = ({
         fallbackHours: Math.max(hourlyTimeRanges.length, 1),
         rounding: "floor"
       });
+      const backendHourlyTargetOutput = lineInfo.metrics.hourly_target_output;
+      const shouldUseBackendHourlyTargets = backendHourlyTargetOutput !== void 0;
+      const resolveTargetForRange = (index) => {
+        if (shouldUseBackendHourlyTargets) {
+          if (!Array.isArray(backendHourlyTargetOutput)) return null;
+          const targetValue = backendHourlyTargetOutput[index];
+          if (targetValue === null || targetValue === void 0) return null;
+          const numericTarget = Number(targetValue);
+          return Number.isFinite(numericTarget) ? numericTarget : null;
+        }
+        return targetPlan.targets[index] ?? 0;
+      };
       const skuRemarksByIndex = {};
       if (lineInfo.metrics.sku_segments && lineInfo.metrics.sku_segments.length > 0) {
         lineInfo.metrics.sku_segments.forEach((segment, segmentIndex) => {
@@ -52004,8 +52032,9 @@ var LinePdfGenerator = ({
           doc.setDrawColor(200, 200, 200);
           doc.line(20, rowBottomY, 190, rowBottomY);
         }
-        const targetForRange = targetPlan.targets[index] ?? 0;
-        const targetStr = targetForRange.toString();
+        const targetForRange = resolveTargetForRange(index);
+        const roundedTargetForRange = targetForRange === null ? null : Math.round(targetForRange);
+        const targetStr = roundedTargetForRange === null ? "-" : roundedTargetForRange.toString();
         let remarkText = targetPlan.breakRemarks[index] || "";
         if (skuRemarksByIndex[index] && skuRemarksByIndex[index].length > 0) {
           const skuRemarks = skuRemarksByIndex[index];
@@ -52027,7 +52056,10 @@ var LinePdfGenerator = ({
         if (!dataCollected) {
           doc.setTextColor(100, 100, 100);
           doc.text("-", 135, yPos);
-        } else if (actualOutput >= targetForRange) {
+        } else if (roundedTargetForRange === null) {
+          doc.setTextColor(100, 100, 100);
+          doc.text("-", 135, yPos);
+        } else if (actualOutput >= roundedTargetForRange) {
           doc.setTextColor(0, 171, 69);
           doc.setFont("ZapfDingbats", "normal");
           doc.text("4", 135, yPos);
@@ -53789,6 +53821,19 @@ var WorkspacePdfGenerator = ({
         fallbackHours: Math.max(hourlyData.length, 1),
         rounding: "floor"
       }) : null;
+      const backendHourlyTargetOutput = workspace.hourly_target_output;
+      const shouldUseBackendHourlyTargets = backendHourlyTargetOutput !== void 0;
+      const resolveTargetForRange = (index) => {
+        if (!outputTargetPlan) return null;
+        if (shouldUseBackendHourlyTargets) {
+          if (!Array.isArray(backendHourlyTargetOutput)) return null;
+          const targetValue = backendHourlyTargetOutput[index];
+          if (targetValue === null || targetValue === void 0) return null;
+          const numericTarget = Number(targetValue);
+          return Number.isFinite(numericTarget) ? numericTarget : null;
+        }
+        return outputTargetPlan.targets[index] ?? hourlyTarget;
+      };
       const skuRemarksByIndex = {};
       if (workspace.sku_segments && workspace.sku_segments.length > 0) {
         workspace.sku_segments.forEach((segment, segmentIndex) => {
@@ -53915,7 +53960,7 @@ var WorkspacePdfGenerator = ({
         const idleValue = isUptimeMode ? entry.idleMinutes ?? 0 : 0;
         const uptimePercent = isUptimeMode ? entry.uptimePercent ?? 0 : 0;
         const outputStr = dataCollected ? outputValue.toString() : "TBD";
-        const effectiveTarget = outputTargetPlan?.targets[index] ?? hourlyTarget;
+        const effectiveTarget = resolveTargetForRange(index);
         let remarkText = outputTargetPlan?.breakRemarks[index] || "";
         if (skuRemarksByIndex[index] && skuRemarksByIndex[index].length > 0) {
           const skuRemarks = skuRemarksByIndex[index];
@@ -53923,7 +53968,8 @@ var WorkspacePdfGenerator = ({
           const compactSkuRemark = skuRemarks.length === 1 ? `${latestSku} started` : `${latestSku} started, +${skuRemarks.length - 1}`;
           remarkText = remarkText ? `${remarkText}, ${compactSkuRemark}` : compactSkuRemark;
         }
-        const targetStr = isUptimeMode ? dataCollected ? idleValue.toString() : "TBD" : effectiveTarget.toString();
+        const roundedEffectiveTarget = effectiveTarget === null ? null : Math.round(effectiveTarget);
+        const targetStr = isUptimeMode ? dataCollected ? idleValue.toString() : "TBD" : roundedEffectiveTarget === null ? "-" : roundedEffectiveTarget.toString();
         if (index < totalRows - 1) {
           const rowBottomY = headerBottomY + (index + 1) * rowHeight;
           doc.setDrawColor(200, 200, 200);
@@ -53966,7 +54012,10 @@ var WorkspacePdfGenerator = ({
           if (!dataCollected) {
             doc.setTextColor(100, 100, 100);
             doc.text("-", 135, yPos);
-          } else if (outputValue >= effectiveTarget) {
+          } else if (roundedEffectiveTarget === null) {
+            doc.setTextColor(100, 100, 100);
+            doc.text("-", 135, yPos);
+          } else if (outputValue >= roundedEffectiveTarget) {
             doc.setTextColor(0, 171, 69);
             doc.setFont("ZapfDingbats", "normal");
             doc.text("4", 135, yPos);
@@ -65535,6 +65584,7 @@ var buildLineInfoSnapshot = (lineDetails, metrics2) => {
       output_array: metrics2.output_array || [],
       output_hourly: metrics2.output_hourly,
       hourly_target_output: metrics2.hourly_target_output,
+      hourly_target_output_by_sku: metrics2.hourly_target_output_by_sku,
       line_threshold: metrics2.line_threshold ?? 0,
       output_target_recalculated: metrics2.output_target_recalculated ?? null,
       threshold_pph: metrics2.threshold_pph ?? 0,
@@ -65568,7 +65618,7 @@ var transformWorkspaceMetrics = (workspaceData, lineId, companyId, queryDate, qu
   trend: item.trend_score === 1 ? 2 : 0,
   predicted_output: item.ideal_output || 0,
   efficiency: item.efficiency || 0,
-  action_threshold: item.total_day_output || 0,
+  action_threshold: item.target_output ?? item.total_day_output_recalculated ?? item.total_day_output ?? 0,
   idle_time: item.idle_time ?? void 0,
   idle_time_hourly: item.idle_time_hourly || null,
   shift_start: item.shift_start || void 0,
@@ -67363,9 +67413,9 @@ var KPIDetailView = ({
             output: metric.current_output || 0,
             // LineMonthlyHistory expects `idealOutput` for the red dotted target ReferenceLine.
             // `line_threshold` comes from `line_metrics` (numeric -> string via PostgREST), so coerce.
-            idealOutput: Number(metric.line_threshold ?? metric.ideal_output ?? 0),
+            idealOutput: Number(metric.target_output ?? metric.line_threshold ?? metric.ideal_output ?? 0),
             // Keep legacy field in case any downstream code still reads it.
-            targetOutput: Number(metric.line_threshold ?? metric.ideal_output ?? 0),
+            targetOutput: Number(metric.target_output ?? metric.line_threshold ?? metric.ideal_output ?? 0),
             compliance_percentage: 95 + Math.random() * 5,
             // Mock data: random value between 95-100%
             hasData: isUptimeMode ? hasUptimeMetricData : true,
@@ -67452,6 +67502,7 @@ var KPIDetailView = ({
         output_array: metrics2.output_array || [],
         output_hourly: metrics2.output_hourly,
         hourly_target_output: metrics2.hourly_target_output,
+        hourly_target_output_by_sku: metrics2.hourly_target_output_by_sku,
         line_threshold: metrics2.line_threshold ?? 0,
         output_target_recalculated: metrics2.output_target_recalculated ?? null,
         threshold_pph: metrics2.threshold_pph ?? 0,
@@ -67579,6 +67630,19 @@ var KPIDetailView = ({
     if (selectedSkuId === "all") return null;
     return realSkuOptions.find((item) => item.sku_id === selectedSkuId) ?? null;
   }, [realSkuOptions, selectedSkuId]);
+  const selectedHourlyTargetOutput = React144.useMemo(() => {
+    const aggregateTarget = chartMetrics?.hourly_target_output;
+    if (!normalizedSelectedSkuId) return aggregateTarget;
+    const targetBySku = chartMetrics?.hourly_target_output_by_sku;
+    if (targetBySku && Object.prototype.hasOwnProperty.call(targetBySku, normalizedSelectedSkuId)) {
+      return targetBySku[normalizedSelectedSkuId];
+    }
+    return aggregateTarget;
+  }, [
+    chartMetrics?.hourly_target_output,
+    chartMetrics?.hourly_target_output_by_sku,
+    normalizedSelectedSkuId
+  ]);
   const displayLineInfo = React144.useMemo(() => {
     if (!resolvedLineInfo) return null;
     if (!selectedSkuRow) return resolvedLineInfo;
@@ -68420,7 +68484,7 @@ var KPIDetailView = ({
               workspaceDisplayNames,
               hourlyOutputData,
               hourlyThreshold,
-              hourlyTargetOutput: chartMetrics?.hourly_target_output,
+              hourlyTargetOutput: selectedHourlyTargetOutput,
               shiftBreaks: shiftConfig?.shifts?.find((shift) => shift.shiftId === resolvedLineInfo.shift_id)?.breaks || [],
               idleTimeHourly: chartMetrics?.idle_time_hourly,
               timezone: lineTimezone,
@@ -75822,8 +75886,8 @@ var WorkspaceDetailView = ({
         idealCycleTime: Number(metric.ideal_cycle_time || 0),
         pph: metric.avg_pph || 0,
         pphThreshold: metric.pph_threshold || 0,
-        idealOutput: Number(metric.ideal_output || 0),
-        targetOutput: Number(metric.total_day_output || 0),
+        idealOutput: Number(metric.target_output ?? metric.ideal_output ?? 0),
+        targetOutput: Number(metric.target_output ?? metric.total_day_output ?? 0),
         rank: metric.workspace_rank || 0,
         idleTime: idleTimeSeconds || 0,
         activeTimeSeconds,
@@ -85793,6 +85857,246 @@ var streamProxyConfig = {
     responseLimit: false
   }
 };
+var MOBILE_SCROLL_THRESHOLD2 = 15;
+var MOBILE_BREAKPOINT_PX2 = 640;
+var sortWorkspaces = (left, right) => {
+  if (left.line_id !== right.line_id) {
+    return left.line_id.localeCompare(right.line_id);
+  }
+  const leftMatch = left.workspace_name.match(/WS(\d+)/);
+  const rightMatch = right.workspace_name.match(/WS(\d+)/);
+  if (leftMatch && rightMatch) {
+    return parseInt(leftMatch[1], 10) - parseInt(rightMatch[1], 10);
+  }
+  return left.workspace_name.localeCompare(right.workspace_name, void 0, { numeric: true });
+};
+var RecentFlowSnapshotGrid = ({
+  workspaces,
+  videoStreamsByWorkspaceId,
+  legend,
+  className = ""
+}) => {
+  const containerRef = React144.useRef(null);
+  const readinessRef = React144.useRef(null);
+  const [gridCols, setGridCols] = React144.useState(4);
+  const [gridRows, setGridRows] = React144.useState(1);
+  const [isMobileScrollableGrid, setIsMobileScrollableGrid] = React144.useState(false);
+  const sortedWorkspaces = React144.useMemo(
+    () => [...workspaces || []].sort(sortWorkspaces),
+    [workspaces]
+  );
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const displayMinuteBucket = Math.floor(Date.now() / 6e4);
+  const expectedVideoCount = React144.useMemo(
+    () => sortedWorkspaces.filter((workspace) => {
+      const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+      return Boolean(workspaceId && videoStreamsByWorkspaceId[workspaceId]?.hls_url);
+    }).length,
+    [sortedWorkspaces, videoStreamsByWorkspaceId]
+  );
+  const publishSnapshotReadiness = React144.useCallback((readyVideoCount) => {
+    const status = {
+      expectedVideoCount,
+      readyVideoCount,
+      status: expectedVideoCount === 0 ? "no_videos" : readyVideoCount >= expectedVideoCount ? "ready" : "loading",
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    const isReady = expectedVideoCount > 0 && status.status === "ready";
+    if (typeof window !== "undefined") {
+      window.__OPTIFYE_SNAPSHOT_READY__ = isReady;
+      window.__OPTIFYE_SNAPSHOT_VIDEO_STATUS__ = status;
+    }
+    const marker = readinessRef.current;
+    if (marker) {
+      marker.dataset.ready = isReady ? "true" : "false";
+      marker.dataset.status = status.status;
+      marker.dataset.expectedVideoCount = String(status.expectedVideoCount);
+      marker.dataset.readyVideoCount = String(status.readyVideoCount);
+      marker.dataset.updatedAt = status.updatedAt;
+    }
+  }, [expectedVideoCount]);
+  const calculateOptimalGrid = React144.useCallback(() => {
+    if (!containerRef.current) return;
+    const containerPadding = 16;
+    const rawContainerWidth = containerRef.current.clientWidth;
+    const containerWidth = rawContainerWidth - containerPadding;
+    const containerHeight = containerRef.current.clientHeight - containerPadding;
+    const count = sortedWorkspaces.length;
+    if (count === 0) {
+      setGridCols(1);
+      setGridRows(1);
+      setIsMobileScrollableGrid(false);
+      return;
+    }
+    const shouldUseMobileScroll = rawContainerWidth < MOBILE_BREAKPOINT_PX2 && count >= MOBILE_SCROLL_THRESHOLD2;
+    const optimalLayouts = {
+      1: 1,
+      2: 2,
+      3: 3,
+      4: 2,
+      5: 3,
+      6: 3,
+      7: 4,
+      8: 4,
+      9: 3,
+      10: 5,
+      11: 4,
+      12: 4,
+      13: 5,
+      14: 5,
+      15: 5,
+      16: 4,
+      17: 6,
+      18: 6,
+      19: 5,
+      20: 5,
+      21: 7,
+      22: 6,
+      23: 6,
+      24: 6
+    };
+    let bestCols = optimalLayouts[count] || Math.ceil(Math.sqrt(count));
+    const containerAspectRatio = containerWidth / containerHeight;
+    const targetAspectRatio = 16 / 9;
+    const gap = 8;
+    if (containerAspectRatio > targetAspectRatio * 1.5 && count > 6) {
+      bestCols = Math.min(bestCols + 1, Math.ceil(count / 2));
+    }
+    const minCellWidth = 100;
+    const availableWidth = containerWidth - gap * (bestCols - 1);
+    const cellWidth = availableWidth / bestCols;
+    if (cellWidth < minCellWidth && bestCols > 1) {
+      bestCols = Math.max(1, Math.floor((containerWidth + gap) / (minCellWidth + gap)));
+    }
+    setGridCols(bestCols);
+    setGridRows(Math.ceil(count / bestCols));
+    setIsMobileScrollableGrid(shouldUseMobileScroll);
+  }, [sortedWorkspaces.length]);
+  React144.useEffect(() => {
+    calculateOptimalGrid();
+    window.addEventListener("resize", calculateOptimalGrid);
+    return () => window.removeEventListener("resize", calculateOptimalGrid);
+  }, [calculateOptimalGrid]);
+  React144.useEffect(() => {
+    const attachedVideos = /* @__PURE__ */ new Set();
+    const videoEvents = ["loadeddata", "canplay", "playing", "timeupdate", "error", "stalled"];
+    const hasDecodedFrame = (video) => video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA && video.videoWidth > 0 && video.videoHeight > 0;
+    const updateReadiness = () => {
+      const videos = Array.from(containerRef.current?.querySelectorAll("video") ?? []);
+      const readyVideoCount = videos.filter(hasDecodedFrame).length;
+      publishSnapshotReadiness(Math.min(readyVideoCount, expectedVideoCount));
+      for (const video of videos) {
+        if (attachedVideos.has(video)) continue;
+        attachedVideos.add(video);
+        for (const eventName of videoEvents) {
+          video.addEventListener(eventName, updateReadiness);
+        }
+      }
+    };
+    publishSnapshotReadiness(0);
+    updateReadiness();
+    const intervalId = window.setInterval(updateReadiness, 250);
+    return () => {
+      window.clearInterval(intervalId);
+      for (const video of attachedVideos) {
+        for (const eventName of videoEvents) {
+          video.removeEventListener(eventName, updateReadiness);
+        }
+      }
+      if (typeof window !== "undefined") {
+        window.__OPTIFYE_SNAPSHOT_READY__ = false;
+        window.__OPTIFYE_SNAPSHOT_VIDEO_STATUS__ = void 0;
+      }
+    };
+  }, [expectedVideoCount, publishSnapshotReadiness]);
+  if (!sortedWorkspaces.length) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: readinessRef,
+          "data-testid": "snapshot-video-readiness",
+          "data-ready": "false",
+          "data-status": "no_videos",
+          "data-expected-video-count": "0",
+          "data-ready-video-count": "0",
+          hidden: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[320px] items-center justify-center rounded-md border border-dashed border-slate-300 bg-slate-50 text-sm font-medium text-slate-500", children: "No workstation snapshot available" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-label": "Recent-flow workstation snapshot",
+      className: `relative h-full min-h-0 w-full overflow-hidden bg-slate-50/30 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: readinessRef,
+            "data-testid": "snapshot-video-readiness",
+            "data-ready": "false",
+            "data-status": expectedVideoCount === 0 ? "no_videos" : "loading",
+            "data-expected-video-count": expectedVideoCount,
+            "data-ready-video-count": "0",
+            hidden: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: containerRef,
+            "data-testid": "video-grid-scroll-container",
+            "data-mobile-scrollable": isMobileScrollableGrid ? "true" : "false",
+            className: `absolute inset-0 w-full overflow-x-hidden px-1 py-1 sm:px-2 sm:py-2 ${isMobileScrollableGrid ? "overflow-y-auto" : "overflow-hidden"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-testid": "video-grid-layout",
+                className: `grid min-w-0 w-full gap-1.5 sm:gap-2 ${isMobileScrollableGrid ? "content-start" : "h-full"}`,
+                style: {
+                  gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
+                  gridTemplateRows: isMobileScrollableGrid ? void 0 : `repeat(${gridRows}, 1fr)`,
+                  gridAutoFlow: "row"
+                },
+                children: sortedWorkspaces.map((workspace) => {
+                  const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+                  const stream = workspaceId ? videoStreamsByWorkspaceId[workspaceId] : null;
+                  const hlsUrl = stream?.hls_url || "";
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      "data-workspace-id": workspaceId,
+                      className: isMobileScrollableGrid ? "workspace-card relative min-w-0 w-full aspect-video min-h-[92px]" : "workspace-card relative min-w-0 w-full h-full",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        VideoCard,
+                        {
+                          workspace,
+                          hlsUrl,
+                          shouldPlay: Boolean(hlsUrl),
+                          legend: effectiveLegend,
+                          cropping: stream?.crop || void 0,
+                          canvasFps: 10,
+                          useRAF: false,
+                          displayMinuteBucket,
+                          displayName: workspace.displayName || workspace.workspace_name,
+                          compact: true
+                        }
+                      ) })
+                    },
+                    `${workspace.line_id}-${workspaceId}`
+                  );
+                })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 
 exports.ACTION_FAMILIES = ACTION_FAMILIES;
 exports.ACTION_NAMES = ACTION_NAMES;
@@ -85949,6 +86253,7 @@ exports.PrefetchStatus = PrefetchStatus;
 exports.PrefetchTimeoutError = PrefetchTimeoutError;
 exports.ProfileView = ProfileView_default;
 exports.ROOT_DASHBOARD_EVENT_NAMES = ROOT_DASHBOARD_EVENT_NAMES;
+exports.RecentFlowSnapshotGrid = RecentFlowSnapshotGrid;
 exports.RegistryProvider = RegistryProvider;
 exports.RoleBadge = RoleBadge;
 exports.S3ClipsService = S3ClipsSupabaseService;