@optifye/dashboard-core 6.12.29 → 6.12.31

package/dist/{automation-DYa3jNEf.d.mts → automation-ZIumB5W9.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;
@@ -196,10 +212,12 @@ interface WorkspaceMetrics {
     video_grid_green_streak_minutes?: number | null;
     video_grid_green_streak_anchor_at?: string | null;
     video_grid_green_streak_started_at?: string | null;
+    video_grid_green_streak_observed_at?: string | null;
     scheduled_break_active?: boolean;
     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 +495,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-ZIumB5W9.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;
@@ -196,10 +212,12 @@ interface WorkspaceMetrics {
     video_grid_green_streak_minutes?: number | null;
     video_grid_green_streak_anchor_at?: string | null;
     video_grid_green_streak_started_at?: string | null;
+    video_grid_green_streak_observed_at?: string | null;
     scheduled_break_active?: boolean;
     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 +495,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-ZIumB5W9.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-ZIumB5W9.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,52 @@ 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("|");
+};
+var VALID_STATUS_BADGE_ICON_TOKENS = /* @__PURE__ */ new Set([
+  "alert-triangle",
+  "refresh-cw",
+  "package",
+  "clock",
+  "user-x",
+  "wrench",
+  "activity",
+  "clipboard-x"
+]);
+var normalizeStatusBadgeToken = (value) => String(value || "").trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+var resolveVideoGridStatusBadgeIconToken = (badge) => {
+  if (badge.kind === "no_plan") {
+    return "clipboard-x";
+  }
+  const reasonTokens = /* @__PURE__ */ new Set([
+    normalizeStatusBadgeToken(badge.label),
+    normalizeStatusBadgeToken(badge.display_name),
+    normalizeStatusBadgeToken(badge.title)
+  ]);
+  if (reasonTokens.has("no_material")) {
+    return "package";
+  }
+  if (reasonTokens.has("machine_maintenance") || reasonTokens.has("machine_downtime")) {
+    return "wrench";
+  }
+  const iconToken = normalizeStatusBadgeToken(badge.icon_token);
+  if (VALID_STATUS_BADGE_ICON_TOKENS.has(iconToken)) {
+    return iconToken;
+  }
+  return "activity";
+};
 function getTrendArrowAndColor(trend) {
   if (trend > 0) {
     return { arrow: "\u2191", color: "text-green-400" };
@@ -1906,6 +2045,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 +2072,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 +2151,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: resolveVideoGridStatusBadgeIconToken(badge),
+                  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 +2242,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,52 @@ 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("|");
+};
+var VALID_STATUS_BADGE_ICON_TOKENS = /* @__PURE__ */ new Set([
+  "alert-triangle",
+  "refresh-cw",
+  "package",
+  "clock",
+  "user-x",
+  "wrench",
+  "activity",
+  "clipboard-x"
+]);
+var normalizeStatusBadgeToken = (value) => String(value || "").trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+var resolveVideoGridStatusBadgeIconToken = (badge) => {
+  if (badge.kind === "no_plan") {
+    return "clipboard-x";
+  }
+  const reasonTokens = /* @__PURE__ */ new Set([
+    normalizeStatusBadgeToken(badge.label),
+    normalizeStatusBadgeToken(badge.display_name),
+    normalizeStatusBadgeToken(badge.title)
+  ]);
+  if (reasonTokens.has("no_material")) {
+    return "package";
+  }
+  if (reasonTokens.has("machine_maintenance") || reasonTokens.has("machine_downtime")) {
+    return "wrench";
+  }
+  const iconToken = normalizeStatusBadgeToken(badge.icon_token);
+  if (VALID_STATUS_BADGE_ICON_TOKENS.has(iconToken)) {
+    return iconToken;
+  }
+  return "activity";
+};
 function getTrendArrowAndColor(trend) {
   if (trend > 0) {
     return { arrow: "\u2191", color: "text-green-400" };
@@ -1899,6 +2038,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 +2065,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 +2144,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: resolveVideoGridStatusBadgeIconToken(badge),
+                  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 +2235,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) {