@optifye/dashboard-core 6.12.29 → 6.12.30

package/dist/{automation-DYa3jNEf.d.mts → automation-Jf6Isg6G.d.mts}

@@ -5,6 +5,9 @@ declare const normalizeVideoGridMetricMode: (value: unknown, assemblyEnabled?: b
 declare const isRecentFlowVideoGridMetricMode: (value: unknown, assemblyEnabled?: boolean) => boolean;
 declare const isWipGatedVideoGridMetricMode: (value: unknown, assemblyEnabled?: boolean) => boolean;
 
+type IdleReasonPaletteToken = 'red' | 'amber' | 'blue' | 'violet' | 'emerald' | 'cyan' | 'slate';
+type IdleReasonIconToken = 'alert-triangle' | 'refresh-cw' | 'package' | 'clock' | 'user-x' | 'wrench' | 'activity' | 'clipboard-x' | 'help-circle';
+
 /** One row of per-SKU workspace metrics. Backend computes; frontend renders. */
 interface SkuBreakdownItem {
     /** UUID — `skus.id`. Stable identifier for selectors and threshold writes. */
@@ -149,6 +152,18 @@ interface PoorPerformingWorkspace {
     action_count: number;
     action_threshold: number;
 }
+interface VideoGridStatusBadge {
+    kind: 'idle_reason' | 'no_plan';
+    label: string | null;
+    display_name: string;
+    palette_token: IdleReasonPaletteToken;
+    icon_token: IdleReasonIconToken;
+    is_known?: boolean;
+    title?: string;
+    anchor_minute?: number;
+    reason_minute?: number;
+    shift_elapsed_fraction?: number;
+}
 interface WorkspaceMetrics {
     company_id: string;
     line_id: string;
@@ -170,6 +185,7 @@ interface WorkspaceMetrics {
     monitoring_mode?: 'output' | 'uptime';
     idle_time?: number;
     idle_time_hourly?: Record<string, any> | null;
+    idle_reason_hourly?: Record<string, any> | null;
     shift_start?: string;
     shift_end?: string;
     assembly_enabled?: boolean;
@@ -200,6 +216,7 @@ interface WorkspaceMetrics {
     incoming_wip_current?: number | null;
     incoming_wip_effective_at?: string | null;
     incoming_wip_buffer_name?: string | null;
+    video_grid_badges?: VideoGridStatusBadge[];
     /**
      * When present, controls whether the UI should show the exclamation indicator for this workstation.
      * - Flow-configured lines: true only when a WIP alert is active for a buffer that outputs to this workstation.
@@ -477,4 +494,4 @@ interface RecentFlowSnapshotGridProps {
 }
 declare const RecentFlowSnapshotGrid: React__default.FC<RecentFlowSnapshotGridProps>;
 
-export { type ActionThreshold as A, type CurrentWorkspaceSKU as C, type DashboardKPIs as D, type EfficiencyLegendUpdate as E, type KpiTrend as K, type LineSignal as L, type MonthlyTrendSummary as M, type PoorPerformingWorkspace as P, type RecentFlowSnapshotGridProps as R, type SkuBreakdownItem as S, type VideoGridMetricMode as V, type WorkspaceMetrics as W, type LineInfo as a, type WorkspaceDetailedMetrics as b, type SkuSegmentItem as c, type LineSkuBreakdownItem as d, type WorkspaceVideoStream as e, type Workspace as f, type WorkspaceCameraIpInfo as g, type WorkspaceActionUpdate as h, type ShiftConfiguration as i, type KpiSignal as j, type LineIssueResolutionSummary as k, type LineDetailedMetrics as l, type LineSignalSource as m, type KpiSignalSource as n, type KpiSignalMode as o, type ValueDelta as p, type PercentageDelta as q, type CountDelta as r, type DurationDelta as s, type WorkspaceCropRect as t, type LineThreshold as u, type ShiftConfigurationRecord as v, normalizeVideoGridMetricMode as w, isRecentFlowVideoGridMetricMode as x, isWipGatedVideoGridMetricMode as y, RecentFlowSnapshotGrid as z };
+export { type ActionThreshold as A, RecentFlowSnapshotGrid as B, type CurrentWorkspaceSKU as C, type DashboardKPIs as D, type EfficiencyLegendUpdate as E, type KpiTrend as K, type LineSignal as L, type MonthlyTrendSummary as M, type PoorPerformingWorkspace as P, type RecentFlowSnapshotGridProps as R, type SkuBreakdownItem as S, type VideoGridMetricMode as V, type WorkspaceMetrics as W, type LineInfo as a, type WorkspaceDetailedMetrics as b, type SkuSegmentItem as c, type LineSkuBreakdownItem as d, type WorkspaceVideoStream as e, type Workspace as f, type WorkspaceCameraIpInfo as g, type WorkspaceActionUpdate as h, type ShiftConfiguration as i, type KpiSignal as j, type LineIssueResolutionSummary as k, type LineDetailedMetrics as l, type VideoGridStatusBadge as m, type LineSignalSource as n, type KpiSignalSource as o, type KpiSignalMode as p, type ValueDelta as q, type PercentageDelta as r, type CountDelta as s, type DurationDelta as t, type WorkspaceCropRect as u, type LineThreshold as v, type ShiftConfigurationRecord as w, normalizeVideoGridMetricMode as x, isRecentFlowVideoGridMetricMode as y, isWipGatedVideoGridMetricMode as z };

package/dist/{automation-DYa3jNEf.d.ts → automation-Jf6Isg6G.d.ts}

@@ -5,6 +5,9 @@ declare const normalizeVideoGridMetricMode: (value: unknown, assemblyEnabled?: b
 declare const isRecentFlowVideoGridMetricMode: (value: unknown, assemblyEnabled?: boolean) => boolean;
 declare const isWipGatedVideoGridMetricMode: (value: unknown, assemblyEnabled?: boolean) => boolean;
 
+type IdleReasonPaletteToken = 'red' | 'amber' | 'blue' | 'violet' | 'emerald' | 'cyan' | 'slate';
+type IdleReasonIconToken = 'alert-triangle' | 'refresh-cw' | 'package' | 'clock' | 'user-x' | 'wrench' | 'activity' | 'clipboard-x' | 'help-circle';
+
 /** One row of per-SKU workspace metrics. Backend computes; frontend renders. */
 interface SkuBreakdownItem {
     /** UUID — `skus.id`. Stable identifier for selectors and threshold writes. */
@@ -149,6 +152,18 @@ interface PoorPerformingWorkspace {
     action_count: number;
     action_threshold: number;
 }
+interface VideoGridStatusBadge {
+    kind: 'idle_reason' | 'no_plan';
+    label: string | null;
+    display_name: string;
+    palette_token: IdleReasonPaletteToken;
+    icon_token: IdleReasonIconToken;
+    is_known?: boolean;
+    title?: string;
+    anchor_minute?: number;
+    reason_minute?: number;
+    shift_elapsed_fraction?: number;
+}
 interface WorkspaceMetrics {
     company_id: string;
     line_id: string;
@@ -170,6 +185,7 @@ interface WorkspaceMetrics {
     monitoring_mode?: 'output' | 'uptime';
     idle_time?: number;
     idle_time_hourly?: Record<string, any> | null;
+    idle_reason_hourly?: Record<string, any> | null;
     shift_start?: string;
     shift_end?: string;
     assembly_enabled?: boolean;
@@ -200,6 +216,7 @@ interface WorkspaceMetrics {
     incoming_wip_current?: number | null;
     incoming_wip_effective_at?: string | null;
     incoming_wip_buffer_name?: string | null;
+    video_grid_badges?: VideoGridStatusBadge[];
     /**
      * When present, controls whether the UI should show the exclamation indicator for this workstation.
      * - Flow-configured lines: true only when a WIP alert is active for a buffer that outputs to this workstation.
@@ -477,4 +494,4 @@ interface RecentFlowSnapshotGridProps {
 }
 declare const RecentFlowSnapshotGrid: React__default.FC<RecentFlowSnapshotGridProps>;
 
-export { type ActionThreshold as A, type CurrentWorkspaceSKU as C, type DashboardKPIs as D, type EfficiencyLegendUpdate as E, type KpiTrend as K, type LineSignal as L, type MonthlyTrendSummary as M, type PoorPerformingWorkspace as P, type RecentFlowSnapshotGridProps as R, type SkuBreakdownItem as S, type VideoGridMetricMode as V, type WorkspaceMetrics as W, type LineInfo as a, type WorkspaceDetailedMetrics as b, type SkuSegmentItem as c, type LineSkuBreakdownItem as d, type WorkspaceVideoStream as e, type Workspace as f, type WorkspaceCameraIpInfo as g, type WorkspaceActionUpdate as h, type ShiftConfiguration as i, type KpiSignal as j, type LineIssueResolutionSummary as k, type LineDetailedMetrics as l, type LineSignalSource as m, type KpiSignalSource as n, type KpiSignalMode as o, type ValueDelta as p, type PercentageDelta as q, type CountDelta as r, type DurationDelta as s, type WorkspaceCropRect as t, type LineThreshold as u, type ShiftConfigurationRecord as v, normalizeVideoGridMetricMode as w, isRecentFlowVideoGridMetricMode as x, isWipGatedVideoGridMetricMode as y, RecentFlowSnapshotGrid as z };
+export { type ActionThreshold as A, RecentFlowSnapshotGrid as B, type CurrentWorkspaceSKU as C, type DashboardKPIs as D, type EfficiencyLegendUpdate as E, type KpiTrend as K, type LineSignal as L, type MonthlyTrendSummary as M, type PoorPerformingWorkspace as P, type RecentFlowSnapshotGridProps as R, type SkuBreakdownItem as S, type VideoGridMetricMode as V, type WorkspaceMetrics as W, type LineInfo as a, type WorkspaceDetailedMetrics as b, type SkuSegmentItem as c, type LineSkuBreakdownItem as d, type WorkspaceVideoStream as e, type Workspace as f, type WorkspaceCameraIpInfo as g, type WorkspaceActionUpdate as h, type ShiftConfiguration as i, type KpiSignal as j, type LineIssueResolutionSummary as k, type LineDetailedMetrics as l, type VideoGridStatusBadge as m, type LineSignalSource as n, type KpiSignalSource as o, type KpiSignalMode as p, type ValueDelta as q, type PercentageDelta as r, type CountDelta as s, type DurationDelta as t, type WorkspaceCropRect as u, type LineThreshold as v, type ShiftConfigurationRecord as w, normalizeVideoGridMetricMode as x, isRecentFlowVideoGridMetricMode as y, isWipGatedVideoGridMetricMode as z };

package/dist/automation.d.mts

@@ -1,2 +1,2 @@
-export { z as RecentFlowSnapshotGrid, R as RecentFlowSnapshotGridProps, W as WorkspaceMetrics, e as WorkspaceVideoStream } from './automation-DYa3jNEf.mjs';
+export { B as RecentFlowSnapshotGrid, R as RecentFlowSnapshotGridProps, W as WorkspaceMetrics, e as WorkspaceVideoStream } from './automation-Jf6Isg6G.mjs';
 import 'react';

package/dist/automation.d.ts

@@ -1,2 +1,2 @@
-export { z as RecentFlowSnapshotGrid, R as RecentFlowSnapshotGridProps, W as WorkspaceMetrics, e as WorkspaceVideoStream } from './automation-DYa3jNEf.js';
+export { B as RecentFlowSnapshotGrid, R as RecentFlowSnapshotGridProps, W as WorkspaceMetrics, e as WorkspaceVideoStream } from './automation-Jf6Isg6G.js';
 import 'react';

package/dist/automation.js

@@ -1734,6 +1734,99 @@ var trackCoreEvent = (eventName, properties) => {
     return;
   }
 };
+var DEFAULT_PALETTE_TOKEN = "slate";
+var DEFAULT_ICON_TOKEN = "help-circle";
+var PALETTE_CONFIG = {
+  red: {
+    hex: "#dc2626",
+    textClass: "text-red-600",
+    bgClass: "bg-red-50",
+    borderClass: "border-red-200"
+  },
+  amber: {
+    hex: "#f59e0b",
+    textClass: "text-amber-600",
+    bgClass: "bg-amber-50",
+    borderClass: "border-amber-200"
+  },
+  blue: {
+    hex: "#3b82f6",
+    textClass: "text-blue-600",
+    bgClass: "bg-blue-50",
+    borderClass: "border-blue-200"
+  },
+  violet: {
+    hex: "#8b5cf6",
+    textClass: "text-violet-600",
+    bgClass: "bg-violet-50",
+    borderClass: "border-violet-200"
+  },
+  emerald: {
+    hex: "#10b981",
+    textClass: "text-emerald-600",
+    bgClass: "bg-emerald-50",
+    borderClass: "border-emerald-200"
+  },
+  cyan: {
+    hex: "#0891b2",
+    textClass: "text-cyan-600",
+    bgClass: "bg-cyan-50",
+    borderClass: "border-cyan-200"
+  },
+  slate: {
+    hex: "#64748b",
+    textClass: "text-slate-600",
+    bgClass: "bg-slate-50",
+    borderClass: "border-slate-200"
+  }
+};
+var ICON_CONFIG = {
+  "alert-triangle": lucideReact.AlertTriangle,
+  "refresh-cw": lucideReact.RefreshCw,
+  package: lucideReact.Package,
+  clock: lucideReact.Clock,
+  "user-x": lucideReact.UserX,
+  wrench: lucideReact.Wrench,
+  activity: lucideReact.Activity,
+  "clipboard-x": lucideReact.ClipboardX,
+  "help-circle": lucideReact.HelpCircle
+};
+var humanizeIdleReasonLabel = (value) => {
+  const text = String(value || "").trim();
+  if (!text) {
+    return "Unknown";
+  }
+  return text.replace(/_/g, " ").split(/\s+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+};
+var normalizePaletteToken = (value) => {
+  const token = String(value || "").trim().toLowerCase();
+  if (token in PALETTE_CONFIG) {
+    return token;
+  }
+  return DEFAULT_PALETTE_TOKEN;
+};
+var normalizeIconToken = (value) => {
+  const token = String(value || "").trim().toLowerCase();
+  if (token in ICON_CONFIG) {
+    return token;
+  }
+  return DEFAULT_ICON_TOKEN;
+};
+var getIdleReasonPresentation = (metadata) => {
+  const label = typeof metadata?.label === "string" && metadata.label.trim() ? metadata.label.trim() : null;
+  const displayName = typeof metadata?.displayName === "string" && metadata.displayName.trim() ? metadata.displayName.trim() : humanizeIdleReasonLabel(label);
+  const paletteToken = normalizePaletteToken(metadata?.paletteToken);
+  const iconToken = normalizeIconToken(metadata?.iconToken);
+  return {
+    label,
+    displayName,
+    paletteToken,
+    iconToken,
+    isKnown: Boolean(metadata?.isKnown),
+    Icon: ICON_CONFIG[iconToken],
+    ...PALETTE_CONFIG[paletteToken]
+  };
+};
 
 // src/lib/constants/videoGridMetricMode.ts
 var VALID_VIDEO_GRID_METRIC_MODES = /* @__PURE__ */ new Set([
@@ -1875,6 +1968,20 @@ var getVideoGridColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND, blu
   }
   return baseColor;
 };
+var getStatusBadgeSignature = (workspace) => {
+  const badges = workspace.video_grid_badges || [];
+  return badges.map((badge) => [
+    badge.kind,
+    badge.label,
+    badge.display_name,
+    badge.palette_token,
+    badge.icon_token,
+    badge.anchor_minute,
+    badge.reason_minute,
+    badge.shift_elapsed_fraction,
+    badge.title
+  ].join(":")).join("|");
+};
 function getTrendArrowAndColor(trend) {
   if (trend > 0) {
     return { arrow: "\u2191", color: "text-green-400" };
@@ -1906,6 +2013,7 @@ var VideoCard = React__default.default.memo(({
 }) => {
   const videoRef = React.useRef(null);
   const canvasRef = React.useRef(null);
+  const statusBadgeIdPrefix = React.useId();
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const { isStale: isStreamStale } = useHlsStreamWithCropping(videoRef, canvasRef, {
     src: hlsUrl,
@@ -1932,6 +2040,7 @@ var VideoCard = React__default.default.memo(({
   const shouldRenderMetricBadge = hasDisplayMetric;
   const badgeTitle = isHighEfficiencyOverride ? `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%` : hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
   const badgeLabel = `${Math.round(videoGridDisplayValue ?? 0)}%`;
+  const statusBadges = workspace.video_grid_badges || [];
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
@@ -2010,6 +2119,61 @@ var VideoCard = React__default.default.memo(({
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }
           ) }),
+          statusBadges.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-testid": "video-card-status-badges",
+              className: `absolute ${compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5"} z-30 flex items-center`,
+              children: statusBadges.map((badge, index) => {
+                const presentation = getIdleReasonPresentation({
+                  label: badge.label,
+                  displayName: badge.display_name,
+                  paletteToken: badge.palette_token,
+                  iconToken: badge.icon_token,
+                  isKnown: badge.is_known
+                });
+                const Icon = presentation.Icon;
+                const tooltipText = presentation.displayName;
+                const tooltipId = `video-card-status-tooltip-${statusBadgeIdPrefix}-${badge.kind}-${index}`;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    "data-testid": `video-card-status-badge-${badge.kind}`,
+                    "aria-label": tooltipText,
+                    "aria-describedby": tooltipId,
+                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
+                    style: {
+                      borderColor: presentation.hex
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Icon,
+                        {
+                          "aria-hidden": "true",
+                          className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
+                          strokeWidth: 2.4
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "span",
+                        {
+                          id: tooltipId,
+                          role: "tooltip",
+                          "data-testid": `video-card-status-tooltip-${badge.kind}`,
+                          className: "pointer-events-none absolute left-0 top-full mt-2 whitespace-nowrap rounded-md border border-white/10 bg-slate-950/95 px-2 py-1 text-[11px] font-semibold leading-none text-white opacity-0 shadow-[0_6px_18px_rgba(0,0,0,0.34)] transition-opacity duration-150 group-hover:opacity-100",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 left-3 h-2 w-2 rotate-45 border-l border-t border-white/10 bg-slate-950/95" }),
+                            tooltipText
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  `${badge.kind}-${badge.label || index}-${badge.reason_minute ?? index}`
+                );
+              })
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute bottom-0 left-0 right-0 ${compact ? "h-0.5" : "h-1"} bg-black/50 z-30`, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -2046,7 +2210,7 @@ var VideoCard = React__default.default.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
+  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || getStatusBadgeSignature(prevProps.workspace) !== getStatusBadgeSignature(nextProps.workspace) || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
     return false;
   }
   if (prevProps.workspace.workspace_uuid !== nextProps.workspace.workspace_uuid || prevProps.workspace.workspace_name !== nextProps.workspace.workspace_name || prevProps.workspace.line_id !== nextProps.workspace.line_id) {

package/dist/automation.mjs

@@ -1,5 +1,5 @@
-import React, { useRef, useCallback, useEffect, useState, useMemo } from 'react';
-import { Camera, AlertTriangle } from 'lucide-react';
+import React, { useRef, useId, useCallback, useEffect, useState, useMemo } from 'react';
+import { Camera, AlertTriangle, HelpCircle, ClipboardX, Activity, Wrench, UserX, Clock, Package, RefreshCw } from 'lucide-react';
 import Hls from 'hls.js';
 import 'mixpanel-browser';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -1727,6 +1727,99 @@ var trackCoreEvent = (eventName, properties) => {
     return;
   }
 };
+var DEFAULT_PALETTE_TOKEN = "slate";
+var DEFAULT_ICON_TOKEN = "help-circle";
+var PALETTE_CONFIG = {
+  red: {
+    hex: "#dc2626",
+    textClass: "text-red-600",
+    bgClass: "bg-red-50",
+    borderClass: "border-red-200"
+  },
+  amber: {
+    hex: "#f59e0b",
+    textClass: "text-amber-600",
+    bgClass: "bg-amber-50",
+    borderClass: "border-amber-200"
+  },
+  blue: {
+    hex: "#3b82f6",
+    textClass: "text-blue-600",
+    bgClass: "bg-blue-50",
+    borderClass: "border-blue-200"
+  },
+  violet: {
+    hex: "#8b5cf6",
+    textClass: "text-violet-600",
+    bgClass: "bg-violet-50",
+    borderClass: "border-violet-200"
+  },
+  emerald: {
+    hex: "#10b981",
+    textClass: "text-emerald-600",
+    bgClass: "bg-emerald-50",
+    borderClass: "border-emerald-200"
+  },
+  cyan: {
+    hex: "#0891b2",
+    textClass: "text-cyan-600",
+    bgClass: "bg-cyan-50",
+    borderClass: "border-cyan-200"
+  },
+  slate: {
+    hex: "#64748b",
+    textClass: "text-slate-600",
+    bgClass: "bg-slate-50",
+    borderClass: "border-slate-200"
+  }
+};
+var ICON_CONFIG = {
+  "alert-triangle": AlertTriangle,
+  "refresh-cw": RefreshCw,
+  package: Package,
+  clock: Clock,
+  "user-x": UserX,
+  wrench: Wrench,
+  activity: Activity,
+  "clipboard-x": ClipboardX,
+  "help-circle": HelpCircle
+};
+var humanizeIdleReasonLabel = (value) => {
+  const text = String(value || "").trim();
+  if (!text) {
+    return "Unknown";
+  }
+  return text.replace(/_/g, " ").split(/\s+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+};
+var normalizePaletteToken = (value) => {
+  const token = String(value || "").trim().toLowerCase();
+  if (token in PALETTE_CONFIG) {
+    return token;
+  }
+  return DEFAULT_PALETTE_TOKEN;
+};
+var normalizeIconToken = (value) => {
+  const token = String(value || "").trim().toLowerCase();
+  if (token in ICON_CONFIG) {
+    return token;
+  }
+  return DEFAULT_ICON_TOKEN;
+};
+var getIdleReasonPresentation = (metadata) => {
+  const label = typeof metadata?.label === "string" && metadata.label.trim() ? metadata.label.trim() : null;
+  const displayName = typeof metadata?.displayName === "string" && metadata.displayName.trim() ? metadata.displayName.trim() : humanizeIdleReasonLabel(label);
+  const paletteToken = normalizePaletteToken(metadata?.paletteToken);
+  const iconToken = normalizeIconToken(metadata?.iconToken);
+  return {
+    label,
+    displayName,
+    paletteToken,
+    iconToken,
+    isKnown: Boolean(metadata?.isKnown),
+    Icon: ICON_CONFIG[iconToken],
+    ...PALETTE_CONFIG[paletteToken]
+  };
+};
 
 // src/lib/constants/videoGridMetricMode.ts
 var VALID_VIDEO_GRID_METRIC_MODES = /* @__PURE__ */ new Set([
@@ -1868,6 +1961,20 @@ var getVideoGridColorState = (workspace, legend = DEFAULT_EFFICIENCY_LEGEND, blu
   }
   return baseColor;
 };
+var getStatusBadgeSignature = (workspace) => {
+  const badges = workspace.video_grid_badges || [];
+  return badges.map((badge) => [
+    badge.kind,
+    badge.label,
+    badge.display_name,
+    badge.palette_token,
+    badge.icon_token,
+    badge.anchor_minute,
+    badge.reason_minute,
+    badge.shift_elapsed_fraction,
+    badge.title
+  ].join(":")).join("|");
+};
 function getTrendArrowAndColor(trend) {
   if (trend > 0) {
     return { arrow: "\u2191", color: "text-green-400" };
@@ -1899,6 +2006,7 @@ var VideoCard = React.memo(({
 }) => {
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
+  const statusBadgeIdPrefix = useId();
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const { isStale: isStreamStale } = useHlsStreamWithCropping(videoRef, canvasRef, {
     src: hlsUrl,
@@ -1925,6 +2033,7 @@ var VideoCard = React.memo(({
   const shouldRenderMetricBadge = hasDisplayMetric;
   const badgeTitle = isHighEfficiencyOverride ? `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%` : hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
   const badgeLabel = `${Math.round(videoGridDisplayValue ?? 0)}%`;
+  const statusBadges = workspace.video_grid_badges || [];
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
@@ -2003,6 +2112,61 @@ var VideoCard = React.memo(({
               children: /* @__PURE__ */ jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }
           ) }),
+          statusBadges.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "video-card-status-badges",
+              className: `absolute ${compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5"} z-30 flex items-center`,
+              children: statusBadges.map((badge, index) => {
+                const presentation = getIdleReasonPresentation({
+                  label: badge.label,
+                  displayName: badge.display_name,
+                  paletteToken: badge.palette_token,
+                  iconToken: badge.icon_token,
+                  isKnown: badge.is_known
+                });
+                const Icon = presentation.Icon;
+                const tooltipText = presentation.displayName;
+                const tooltipId = `video-card-status-tooltip-${statusBadgeIdPrefix}-${badge.kind}-${index}`;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-testid": `video-card-status-badge-${badge.kind}`,
+                    "aria-label": tooltipText,
+                    "aria-describedby": tooltipId,
+                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
+                    style: {
+                      borderColor: presentation.hex
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          "aria-hidden": "true",
+                          className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
+                          strokeWidth: 2.4
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          id: tooltipId,
+                          role: "tooltip",
+                          "data-testid": `video-card-status-tooltip-${badge.kind}`,
+                          className: "pointer-events-none absolute left-0 top-full mt-2 whitespace-nowrap rounded-md border border-white/10 bg-slate-950/95 px-2 py-1 text-[11px] font-semibold leading-none text-white opacity-0 shadow-[0_6px_18px_rgba(0,0,0,0.34)] transition-opacity duration-150 group-hover:opacity-100",
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "absolute -top-1 left-3 h-2 w-2 rotate-45 border-l border-t border-white/10 bg-slate-950/95" }),
+                            tooltipText
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  `${badge.kind}-${badge.label || index}-${badge.reason_minute ?? index}`
+                );
+              })
+            }
+          ),
           /* @__PURE__ */ jsx("div", { className: `absolute bottom-0 left-0 right-0 ${compact ? "h-0.5" : "h-1"} bg-black/50 z-30`, children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -2039,7 +2203,7 @@ var VideoCard = React.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
+  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || getStatusBadgeSignature(prevProps.workspace) !== getStatusBadgeSignature(nextProps.workspace) || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
     return false;
   }
   if (prevProps.workspace.workspace_uuid !== nextProps.workspace.workspace_uuid || prevProps.workspace.workspace_name !== nextProps.workspace.workspace_name || prevProps.workspace.line_id !== nextProps.workspace.line_id) {

package/dist/index.css

@@ -538,6 +538,9 @@ body {
 .left-1 {
   left: 0.25rem;
 }
+.left-1\.5 {
+  left: 0.375rem;
+}
 .left-1\/2 {
   left: 50%;
 }
@@ -595,6 +598,9 @@ body {
 .top-1 {
   top: 0.25rem;
 }
+.top-1\.5 {
+  top: 0.375rem;
+}
 .top-1\/2 {
   top: 50%;
 }
@@ -1740,6 +1746,10 @@ body {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.rotate-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-0 {
   --tw-scale-x: 0;
   --tw-scale-y: 0;
@@ -2261,6 +2271,9 @@ body {
 .border-b-\[6px\] {
   border-bottom-width: 6px;
 }
+.border-l {
+  border-left-width: 1px;
+}
 .border-l-2 {
   border-left-width: 2px;
 }
@@ -3091,6 +3104,12 @@ body {
 .bg-slate-900\/60 {
   background-color: rgb(15 23 42 / 0.6);
 }
+.bg-slate-950\/70 {
+  background-color: rgb(2 6 23 / 0.7);
+}
+.bg-slate-950\/95 {
+  background-color: rgb(2 6 23 / 0.95);
+}
 .bg-teal-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
@@ -4974,6 +4993,22 @@ body {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.shadow-\[0_3px_10px_rgba\(0\,0\,0\,0\.34\)\,inset_0_0_0_1px_rgba\(255\,255\,255\,0\.18\)\] {
+  --tw-shadow: 0 3px 10px rgba(0,0,0,0.34),inset 0 0 0 1px rgba(255,255,255,0.18);
+  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color), inset 0 0 0 1px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.shadow-\[0_6px_18px_rgba\(0\,0\,0\,0\.34\)\] {
+  --tw-shadow: 0 6px 18px rgba(0,0,0,0.34);
+  --tw-shadow-colored: 0 6px 18px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .shadow-inner {
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { L as LineSignal, V as VideoGridMetricMode, W as WorkspaceMetrics, a as LineInfo, b as WorkspaceDetailedMetrics, S as SkuBreakdownItem, c as SkuSegmentItem, d as LineSkuBreakdownItem, E as EfficiencyLegendUpdate, D as DashboardKPIs, P as PoorPerformingWorkspace, e as WorkspaceVideoStream, K as KpiTrend, M as MonthlyTrendSummary, f as Workspace, g as WorkspaceCameraIpInfo, h as WorkspaceActionUpdate, A as ActionThreshold, i as ShiftConfiguration, j as KpiSignal, k as LineIssueResolutionSummary } from './automation-DYa3jNEf.mjs';
-export { r as CountDelta, C as CurrentWorkspaceSKU, s as DurationDelta, o as KpiSignalMode, n as KpiSignalSource, l as LineDetailedMetrics, m as LineSignalSource, u as LineThreshold, q as PercentageDelta, z as RecentFlowSnapshotGrid, R as RecentFlowSnapshotGridProps, v as ShiftConfigurationRecord, p as ValueDelta, t as WorkspaceCropRect, x as isRecentFlowVideoGridMetricMode, y as isWipGatedVideoGridMetricMode, w as normalizeVideoGridMetricMode } from './automation-DYa3jNEf.mjs';
+import { L as LineSignal, V as VideoGridMetricMode, W as WorkspaceMetrics, a as LineInfo, b as WorkspaceDetailedMetrics, S as SkuBreakdownItem, c as SkuSegmentItem, d as LineSkuBreakdownItem, E as EfficiencyLegendUpdate, D as DashboardKPIs, P as PoorPerformingWorkspace, e as WorkspaceVideoStream, K as KpiTrend, M as MonthlyTrendSummary, f as Workspace, g as WorkspaceCameraIpInfo, h as WorkspaceActionUpdate, A as ActionThreshold, i as ShiftConfiguration, j as KpiSignal, k as LineIssueResolutionSummary } from './automation-Jf6Isg6G.mjs';
+export { s as CountDelta, C as CurrentWorkspaceSKU, t as DurationDelta, p as KpiSignalMode, o as KpiSignalSource, l as LineDetailedMetrics, n as LineSignalSource, v as LineThreshold, r as PercentageDelta, B as RecentFlowSnapshotGrid, R as RecentFlowSnapshotGridProps, w as ShiftConfigurationRecord, q as ValueDelta, m as VideoGridStatusBadge, u as WorkspaceCropRect, y as isRecentFlowVideoGridMetricMode, z as isWipGatedVideoGridMetricMode, x as normalizeVideoGridMetricMode } from './automation-Jf6Isg6G.mjs';
 import * as _supabase_supabase_js from '@supabase/supabase-js';
 import { SupabaseClient as SupabaseClient$1, Session, User, AuthError } from '@supabase/supabase-js';
 import { LucideProps, Share2, Download } from 'lucide-react';
@@ -5262,9 +5262,11 @@ declare const pickPreferredLineMetricsRow: (supabase: {
  *   - Aggregates `current_output` and `ideal_output` sum across
  *     **real-SKU rows only**. Dummy rows contribute 0 — they are skipped
  *     from that summation set.
- *   - Weighted-average fields (avg_efficiency, avg_cycle_time, threshold_pph)
- *     use per-row active-minutes as weight; falls back to plain mean when
- *     no row has positive weight.
+ *   - Weighted-average fields (avg_efficiency, avg_cycle_time) use per-row
+ *     active-minutes as weight; falls back to plain mean when no row has
+ *     positive weight.
+ *   - `threshold_pph` sums across real rows so it matches the Targets
+ *     page/API additive output-family PPH rule.
  *   - `underperforming_workspaces` is averaged across ACTIVE real rows only
  *     (real row with `current_output > 0 || ideal_output > 0`), rounded
  *     half-up to the nearest whole number. Names / UUIDs are deduped unions

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { L as LineSignal, V as VideoGridMetricMode, W as WorkspaceMetrics, a as LineInfo, b as WorkspaceDetailedMetrics, S as SkuBreakdownItem, c as SkuSegmentItem, d as LineSkuBreakdownItem, E as EfficiencyLegendUpdate, D as DashboardKPIs, P as PoorPerformingWorkspace, e as WorkspaceVideoStream, K as KpiTrend, M as MonthlyTrendSummary, f as Workspace, g as WorkspaceCameraIpInfo, h as WorkspaceActionUpdate, A as ActionThreshold, i as ShiftConfiguration, j as KpiSignal, k as LineIssueResolutionSummary } from './automation-DYa3jNEf.js';
-export { r as CountDelta, C as CurrentWorkspaceSKU, s as DurationDelta, o as KpiSignalMode, n as KpiSignalSource, l as LineDetailedMetrics, m as LineSignalSource, u as LineThreshold, q as PercentageDelta, z as RecentFlowSnapshotGrid, R as RecentFlowSnapshotGridProps, v as ShiftConfigurationRecord, p as ValueDelta, t as WorkspaceCropRect, x as isRecentFlowVideoGridMetricMode, y as isWipGatedVideoGridMetricMode, w as normalizeVideoGridMetricMode } from './automation-DYa3jNEf.js';
+import { L as LineSignal, V as VideoGridMetricMode, W as WorkspaceMetrics, a as LineInfo, b as WorkspaceDetailedMetrics, S as SkuBreakdownItem, c as SkuSegmentItem, d as LineSkuBreakdownItem, E as EfficiencyLegendUpdate, D as DashboardKPIs, P as PoorPerformingWorkspace, e as WorkspaceVideoStream, K as KpiTrend, M as MonthlyTrendSummary, f as Workspace, g as WorkspaceCameraIpInfo, h as WorkspaceActionUpdate, A as ActionThreshold, i as ShiftConfiguration, j as KpiSignal, k as LineIssueResolutionSummary } from './automation-Jf6Isg6G.js';
+export { s as CountDelta, C as CurrentWorkspaceSKU, t as DurationDelta, p as KpiSignalMode, o as KpiSignalSource, l as LineDetailedMetrics, n as LineSignalSource, v as LineThreshold, r as PercentageDelta, B as RecentFlowSnapshotGrid, R as RecentFlowSnapshotGridProps, w as ShiftConfigurationRecord, q as ValueDelta, m as VideoGridStatusBadge, u as WorkspaceCropRect, y as isRecentFlowVideoGridMetricMode, z as isWipGatedVideoGridMetricMode, x as normalizeVideoGridMetricMode } from './automation-Jf6Isg6G.js';
 import * as _supabase_supabase_js from '@supabase/supabase-js';
 import { SupabaseClient as SupabaseClient$1, Session, User, AuthError } from '@supabase/supabase-js';
 import { LucideProps, Share2, Download } from 'lucide-react';
@@ -5262,9 +5262,11 @@ declare const pickPreferredLineMetricsRow: (supabase: {
  *   - Aggregates `current_output` and `ideal_output` sum across
  *     **real-SKU rows only**. Dummy rows contribute 0 — they are skipped
  *     from that summation set.
- *   - Weighted-average fields (avg_efficiency, avg_cycle_time, threshold_pph)
- *     use per-row active-minutes as weight; falls back to plain mean when
- *     no row has positive weight.
+ *   - Weighted-average fields (avg_efficiency, avg_cycle_time) use per-row
+ *     active-minutes as weight; falls back to plain mean when no row has
+ *     positive weight.
+ *   - `threshold_pph` sums across real rows so it matches the Targets
+ *     page/API additive output-family PPH rule.
  *   - `underperforming_workspaces` is averaged across ACTIVE real rows only
  *     (real row with `current_output > 0 || ideal_output > 0`), rounded
  *     half-up to the nearest whole number. Names / UUIDs are deduped unions

package/dist/index.js

@@ -4665,7 +4665,10 @@ var combineLineMetricsRows = (rows, dummySkuId) => {
   };
   const avgEfficiency = weighted("avg_efficiency");
   const avgCycleTime = weighted("avg_cycle_time");
-  const thresholdPph = weighted("threshold_pph");
+  const thresholdPph = rowsForAggregation.reduce(
+    (acc, row) => acc + (coerceOptionalNumber(row.threshold_pph) ?? 0),
+    0
+  );
   const underperformingWorkspaces = activeRealRows.length > 0 ? roundHalfUpInt(
     activeRealRows.reduce(
       (acc, row) => acc + safeInt(row.underperforming_workspaces),
@@ -14716,6 +14719,7 @@ var transformMonitorWorkspaceMetrics = ({
       monitoring_mode: item.monitoring_mode ?? void 0,
       idle_time: idleTimeSeconds,
       idle_time_hourly: item.idle_time_hourly ?? null,
+      idle_reason_hourly: item.idle_reason_hourly ?? null,
       shift_start: item.shift_start ?? void 0,
       shift_end: item.shift_end ?? void 0,
       assembly_enabled: item.assembly_enabled ?? false,
@@ -14751,6 +14755,7 @@ var transformMonitorWorkspaceMetrics = ({
       incoming_wip_current: item.incoming_wip_current ?? null,
       incoming_wip_effective_at: item.incoming_wip_effective_at ?? null,
       incoming_wip_buffer_name: item.incoming_wip_buffer_name ?? null,
+      video_grid_badges: Array.isArray(item.video_grid_badges) ? item.video_grid_badges : [],
       show_exclamation: item.show_exclamation ?? void 0
     };
     workspaceMetricsStore.setOverview(metric);
@@ -21269,6 +21274,7 @@ var ICON_CONFIG = {
   "user-x": lucideReact.UserX,
   wrench: lucideReact.Wrench,
   activity: lucideReact.Activity,
+  "clipboard-x": lucideReact.ClipboardX,
   "help-circle": lucideReact.HelpCircle
 };
 var humanizeIdleReasonLabel = (value) => {
@@ -38055,6 +38061,20 @@ var getVideoGridLegendLabel = (workspaces) => {
   }
   return visibleWorkspaces.some(isVideoGridRecentFlowEnabled) ? VIDEO_GRID_LEGEND_LABEL : MAP_GRID_LEGEND_LABEL;
 };
+var getStatusBadgeSignature = (workspace) => {
+  const badges = workspace.video_grid_badges || [];
+  return badges.map((badge) => [
+    badge.kind,
+    badge.label,
+    badge.display_name,
+    badge.palette_token,
+    badge.icon_token,
+    badge.anchor_minute,
+    badge.reason_minute,
+    badge.shift_elapsed_fraction,
+    badge.title
+  ].join(":")).join("|");
+};
 function getTrendArrowAndColor(trend) {
   if (trend > 0) {
     return { arrow: "\u2191", color: "text-green-400" };
@@ -38086,6 +38106,7 @@ var VideoCard = React144__namespace.default.memo(({
 }) => {
   const videoRef = React144.useRef(null);
   const canvasRef = React144.useRef(null);
+  const statusBadgeIdPrefix = React144.useId();
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const { isStale: isStreamStale } = useHlsStreamWithCropping(videoRef, canvasRef, {
     src: hlsUrl,
@@ -38112,6 +38133,7 @@ var VideoCard = React144__namespace.default.memo(({
   const shouldRenderMetricBadge = hasDisplayMetric;
   const badgeTitle = isHighEfficiencyOverride ? `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%` : hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
   const badgeLabel = `${Math.round(videoGridDisplayValue ?? 0)}%`;
+  const statusBadges = workspace.video_grid_badges || [];
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
@@ -38190,6 +38212,61 @@ var VideoCard = React144__namespace.default.memo(({
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }
           ) }),
+          statusBadges.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-testid": "video-card-status-badges",
+              className: `absolute ${compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5"} z-30 flex items-center`,
+              children: statusBadges.map((badge, index) => {
+                const presentation = getIdleReasonPresentation({
+                  label: badge.label,
+                  displayName: badge.display_name,
+                  paletteToken: badge.palette_token,
+                  iconToken: badge.icon_token,
+                  isKnown: badge.is_known
+                });
+                const Icon2 = presentation.Icon;
+                const tooltipText = presentation.displayName;
+                const tooltipId = `video-card-status-tooltip-${statusBadgeIdPrefix}-${badge.kind}-${index}`;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    "data-testid": `video-card-status-badge-${badge.kind}`,
+                    "aria-label": tooltipText,
+                    "aria-describedby": tooltipId,
+                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
+                    style: {
+                      borderColor: presentation.hex
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Icon2,
+                        {
+                          "aria-hidden": "true",
+                          className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
+                          strokeWidth: 2.4
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "span",
+                        {
+                          id: tooltipId,
+                          role: "tooltip",
+                          "data-testid": `video-card-status-tooltip-${badge.kind}`,
+                          className: "pointer-events-none absolute left-0 top-full mt-2 whitespace-nowrap rounded-md border border-white/10 bg-slate-950/95 px-2 py-1 text-[11px] font-semibold leading-none text-white opacity-0 shadow-[0_6px_18px_rgba(0,0,0,0.34)] transition-opacity duration-150 group-hover:opacity-100",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 left-3 h-2 w-2 rotate-45 border-l border-t border-white/10 bg-slate-950/95" }),
+                            tooltipText
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  `${badge.kind}-${badge.label || index}-${badge.reason_minute ?? index}`
+                );
+              })
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute bottom-0 left-0 right-0 ${compact ? "h-0.5" : "h-1"} bg-black/50 z-30`, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -38226,7 +38303,7 @@ var VideoCard = React144__namespace.default.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
+  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || getStatusBadgeSignature(prevProps.workspace) !== getStatusBadgeSignature(nextProps.workspace) || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
     return false;
   }
   if (prevProps.workspace.workspace_uuid !== nextProps.workspace.workspace_uuid || prevProps.workspace.workspace_name !== nextProps.workspace.workspace_name || prevProps.workspace.line_id !== nextProps.workspace.line_id) {

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { format, addDays, subMonths, endOfMonth, startOfMonth, endOfDay, eachDayOfInterval, getDay, isSameDay, isWithinInterval, startOfDay, parseISO, subDays, differenceInMinutes, addMinutes, addMonths, isValid, formatDistanceToNow, isToday, isFuture, isBefore } from 'date-fns';
 import { formatInTimeZone, fromZonedTime, toZonedTime } from 'date-fns-tz';
 import * as React144 from 'react';
-import React144__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, forwardRef, useImperativeHandle, useLayoutEffect, memo as memo$1, useContext, useSyncExternalStore, useId, Children, isValidElement, useInsertionEffect, startTransition, Fragment as Fragment$1, createElement, Component } from 'react';
+import React144__default, { createContext, useRef, useId, useCallback, useState, useMemo, useEffect, forwardRef, useImperativeHandle, useLayoutEffect, memo as memo$1, useContext, useSyncExternalStore, Children, isValidElement, useInsertionEffect, startTransition, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { toast } from 'sonner';
@@ -10,7 +10,7 @@ import { EventEmitter } from 'events';
 import { createClient, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js';
 import Hls, { Events, ErrorTypes } from 'hls.js';
 import useSWR from 'swr';
-import { Camera, AlertTriangle, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, Filter, X, Coffee, Plus, ArrowUp, ArrowDown, ArrowRight, CheckCircle2, ArrowLeft, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, XCircle, HelpCircle, Activity, Wrench, UserX, Package, RefreshCw, Palette, TrendingDown, FolderOpen, Folder, ArrowDownWideNarrow, Tag, Sliders, Layers, Search, Edit2, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Video, Copy, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, Pencil, UserCheck, LogOut, Film, MessageSquare, Menu, Send, Settings, LifeBuoy, EyeOff, Zap, Flame, Crown, Medal } from 'lucide-react';
+import { Camera, AlertTriangle, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, Filter, X, Coffee, Plus, ArrowUp, ArrowDown, ArrowRight, HelpCircle, ClipboardX, Activity, Wrench, UserX, Clock, Package, RefreshCw, CheckCircle2, ArrowLeft, Calendar, Save, AlertCircle, Loader2, Minus, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, XCircle, Palette, TrendingDown, FolderOpen, Folder, ArrowDownWideNarrow, Tag, Sliders, Layers, Search, Edit2, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Video, Copy, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, Pencil, UserCheck, LogOut, Film, MessageSquare, Menu, Send, Settings, LifeBuoy, EyeOff, Zap, Flame, Crown, Medal } from 'lucide-react';
 import { memo, noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, ReferenceLine, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, Customized, Cell, PieChart, Pie, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
@@ -4636,7 +4636,10 @@ var combineLineMetricsRows = (rows, dummySkuId) => {
   };
   const avgEfficiency = weighted("avg_efficiency");
   const avgCycleTime = weighted("avg_cycle_time");
-  const thresholdPph = weighted("threshold_pph");
+  const thresholdPph = rowsForAggregation.reduce(
+    (acc, row) => acc + (coerceOptionalNumber(row.threshold_pph) ?? 0),
+    0
+  );
   const underperformingWorkspaces = activeRealRows.length > 0 ? roundHalfUpInt(
     activeRealRows.reduce(
       (acc, row) => acc + safeInt(row.underperforming_workspaces),
@@ -14687,6 +14690,7 @@ var transformMonitorWorkspaceMetrics = ({
       monitoring_mode: item.monitoring_mode ?? void 0,
       idle_time: idleTimeSeconds,
       idle_time_hourly: item.idle_time_hourly ?? null,
+      idle_reason_hourly: item.idle_reason_hourly ?? null,
       shift_start: item.shift_start ?? void 0,
       shift_end: item.shift_end ?? void 0,
       assembly_enabled: item.assembly_enabled ?? false,
@@ -14722,6 +14726,7 @@ var transformMonitorWorkspaceMetrics = ({
       incoming_wip_current: item.incoming_wip_current ?? null,
       incoming_wip_effective_at: item.incoming_wip_effective_at ?? null,
       incoming_wip_buffer_name: item.incoming_wip_buffer_name ?? null,
+      video_grid_badges: Array.isArray(item.video_grid_badges) ? item.video_grid_badges : [],
       show_exclamation: item.show_exclamation ?? void 0
     };
     workspaceMetricsStore.setOverview(metric);
@@ -21240,6 +21245,7 @@ var ICON_CONFIG = {
   "user-x": UserX,
   wrench: Wrench,
   activity: Activity,
+  "clipboard-x": ClipboardX,
   "help-circle": HelpCircle
 };
 var humanizeIdleReasonLabel = (value) => {
@@ -38026,6 +38032,20 @@ var getVideoGridLegendLabel = (workspaces) => {
   }
   return visibleWorkspaces.some(isVideoGridRecentFlowEnabled) ? VIDEO_GRID_LEGEND_LABEL : MAP_GRID_LEGEND_LABEL;
 };
+var getStatusBadgeSignature = (workspace) => {
+  const badges = workspace.video_grid_badges || [];
+  return badges.map((badge) => [
+    badge.kind,
+    badge.label,
+    badge.display_name,
+    badge.palette_token,
+    badge.icon_token,
+    badge.anchor_minute,
+    badge.reason_minute,
+    badge.shift_elapsed_fraction,
+    badge.title
+  ].join(":")).join("|");
+};
 function getTrendArrowAndColor(trend) {
   if (trend > 0) {
     return { arrow: "\u2191", color: "text-green-400" };
@@ -38057,6 +38077,7 @@ var VideoCard = React144__default.memo(({
 }) => {
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
+  const statusBadgeIdPrefix = useId();
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const { isStale: isStreamStale } = useHlsStreamWithCropping(videoRef, canvasRef, {
     src: hlsUrl,
@@ -38083,6 +38104,7 @@ var VideoCard = React144__default.memo(({
   const shouldRenderMetricBadge = hasDisplayMetric;
   const badgeTitle = isHighEfficiencyOverride ? `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%` : hasVideoGridRecentFlow(workspace) ? `Flow ${Math.round(videoGridDisplayValue ?? 0)}%` : isRecentFlowCard ? "Flow unavailable" : `Efficiency ${Math.round(videoGridDisplayValue ?? 0)}%`;
   const badgeLabel = `${Math.round(videoGridDisplayValue ?? 0)}%`;
+  const statusBadges = workspace.video_grid_badges || [];
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
@@ -38161,6 +38183,61 @@ var VideoCard = React144__default.memo(({
               children: /* @__PURE__ */ jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} font-semibold`, children: badgeLabel })
             }
           ) }),
+          statusBadges.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "video-card-status-badges",
+              className: `absolute ${compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5"} z-30 flex items-center`,
+              children: statusBadges.map((badge, index) => {
+                const presentation = getIdleReasonPresentation({
+                  label: badge.label,
+                  displayName: badge.display_name,
+                  paletteToken: badge.palette_token,
+                  iconToken: badge.icon_token,
+                  isKnown: badge.is_known
+                });
+                const Icon2 = presentation.Icon;
+                const tooltipText = presentation.displayName;
+                const tooltipId = `video-card-status-tooltip-${statusBadgeIdPrefix}-${badge.kind}-${index}`;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-testid": `video-card-status-badge-${badge.kind}`,
+                    "aria-label": tooltipText,
+                    "aria-describedby": tooltipId,
+                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
+                    style: {
+                      borderColor: presentation.hex
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Icon2,
+                        {
+                          "aria-hidden": "true",
+                          className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
+                          strokeWidth: 2.4
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          id: tooltipId,
+                          role: "tooltip",
+                          "data-testid": `video-card-status-tooltip-${badge.kind}`,
+                          className: "pointer-events-none absolute left-0 top-full mt-2 whitespace-nowrap rounded-md border border-white/10 bg-slate-950/95 px-2 py-1 text-[11px] font-semibold leading-none text-white opacity-0 shadow-[0_6px_18px_rgba(0,0,0,0.34)] transition-opacity duration-150 group-hover:opacity-100",
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "absolute -top-1 left-3 h-2 w-2 rotate-45 border-l border-t border-white/10 bg-slate-950/95" }),
+                            tooltipText
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  `${badge.kind}-${badge.label || index}-${badge.reason_minute ?? index}`
+                );
+              })
+            }
+          ),
           /* @__PURE__ */ jsx("div", { className: `absolute bottom-0 left-0 right-0 ${compact ? "h-0.5" : "h-1"} bg-black/50 z-30`, children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -38197,7 +38274,7 @@ var VideoCard = React144__default.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
+  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.assembly_enabled !== nextProps.workspace.assembly_enabled || prevProps.workspace.video_grid_metric_mode !== nextProps.workspace.video_grid_metric_mode || prevProps.workspace.recent_flow_percent !== nextProps.workspace.recent_flow_percent || prevProps.workspace.recent_flow_effective_end_at !== nextProps.workspace.recent_flow_effective_end_at || prevProps.workspace.recent_flow_forced_zero_after_shift !== nextProps.workspace.recent_flow_forced_zero_after_shift || prevProps.workspace.scheduled_break_active !== nextProps.workspace.scheduled_break_active || prevProps.workspace.incoming_wip_current !== nextProps.workspace.incoming_wip_current || prevProps.workspace.incoming_wip_buffer_name !== nextProps.workspace.incoming_wip_buffer_name || getStatusBadgeSignature(prevProps.workspace) !== getStatusBadgeSignature(nextProps.workspace) || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
     return false;
   }
   if (prevProps.workspace.workspace_uuid !== nextProps.workspace.workspace_uuid || prevProps.workspace.workspace_name !== nextProps.workspace.workspace_name || prevProps.workspace.line_id !== nextProps.workspace.line_id) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.12.29",
+  "version": "6.12.30",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",