@flamingo-stack/openframe-frontend-core 0.0.581 → 0.0.582-1958.5391.1

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   SoftwareInfo,
   SoftwareSourceBadge,
   ToolBadge
-} from "./chunk-3GXNCJZI.js";
+} from "./chunk-T4DIAKIK.js";
 import {
   AppHeader,
   AppLayout,
@@ -28,14 +28,14 @@ import {
   SlidingSidebar,
   TicketAlertsButton,
   TopNavigation
-} from "./chunk-GVM37TRU.js";
+} from "./chunk-GAL6EXUY.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
   StickySectionNav,
   useSectionNavigation
-} from "./chunk-KAEVE7W2.js";
-import "./chunk-R5JVRFSW.js";
+} from "./chunk-EULY3BXB.js";
+import "./chunk-5U2FU5LM.js";
 import {
   ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
   AIEnrichButton,
@@ -577,7 +577,7 @@ import {
   withFirstTouchAttribution,
   withWalkthroughOpenParam,
   writeDismissCookie
-} from "./chunk-VXUUSLD5.js";
+} from "./chunk-XA5UPYWE.js";
 import "./chunk-L2SLFCXP.js";
 import "./chunk-BJXDHKUX.js";
 import {
@@ -892,6 +892,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
   UnarchiveChatModal,
+  VIDEO_PLAYBACK_FAILED_EVENT,
   Video,
   VideoBiteCard,
   VideoBitesStrip,
@@ -1054,7 +1055,7 @@ import {
   useVideoOriginPreconnect,
   useVideoWarmup,
   usesCanonicalStatusStyle
-} from "./chunk-HJVKPG55.js";
+} from "./chunk-F227VMPL.js";
 import {
   HEADING_EMOJI_RE,
   HUB_HEADER_OFFSET_PX,
@@ -2504,6 +2505,7 @@ export {
   UserIcon,
   UsersGroupIcon,
   UsersIcon,
+  VIDEO_PLAYBACK_FAILED_EVENT,
   VendorDirectoryIcon,
   VendorShowcaseMainIcon,
   VendorsIcon,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/logs-list.tsx","../src/components/log-severity-dot.tsx","../src/types/logs.types.ts","../src/assets/index.ts"],"sourcesContent":["import { type FC, forwardRef, useRef } from 'react';\nimport type { LogsListProps, LogEntry } from '../types/logs.types';\nimport { cn } from '../utils/cn';\nimport { LogSeverityDot } from './log-severity-dot';\nimport { ToolIcon } from './tool-icon';\n\nconst formatTimestamp = (timestamp: string | Date): string => {\n  const date = timestamp instanceof Date ? timestamp : new Date(timestamp);\n\n  // UTC getters so the timestamp is identical on server (UTC) and client\n  // (local) — otherwise React #418 hydration mismatch.\n  const year = date.getUTCFullYear();\n  const month = String(date.getUTCMonth() + 1).padStart(2, '0');\n  const day = String(date.getUTCDate()).padStart(2, '0');\n  const hours = String(date.getUTCHours()).padStart(2, '0');\n  const minutes = String(date.getUTCMinutes()).padStart(2, '0');\n\n  return `${year}/${month}/${day},${hours}:${minutes}`;\n};\n\nconst LogCard: FC<{\n  log: LogEntry;\n  isLast: boolean;\n  showConnector: boolean;\n  onClick?: () => void;\n}> = ({ log, isLast, showConnector, onClick }) => {\n  return (\n    <div className=\"relative\">\n      <div\n        className={cn(\n          'relative box-border flex w-full items-start gap-3 rounded px-1 py-2',\n          'cursor-pointer transition-colors hover:bg-ods-bg-hover/50',\n        )}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n      >\n        <LogSeverityDot severity={log.severity} size=\"md\" />\n\n        <div className=\"min-w-0 flex-1 space-y-1\">\n          <p className=\"text-ods-text-primary text-h6\">{log.title}</p>\n          <div className=\"flex items-center gap-2\">\n            <p className=\"text-ods-text-secondary text-h5\">{formatTimestamp(log.timestamp)}</p>\n            {log.toolType && <ToolIcon toolType={log.toolType} size={16} />}\n          </div>\n        </div>\n      </div>\n\n      {showConnector && !isLast && (\n        <div\n          className=\"absolute left-[15px] w-[2px] bg-ods-border\"\n          style={{\n            top: '28px',\n            bottom: '-10px',\n          }}\n          aria-hidden=\"true\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport const LogsList = forwardRef<HTMLDivElement, LogsListProps>(\n  (\n    {\n      logs,\n      maxHeight = '400px',\n      showConnector = true,\n      onLogClick,\n      loading = false,\n      emptyMessage = 'No logs to display',\n      className,\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const isFullHeight = maxHeight === '100%';\n\n    const getContainerStyles = () => {\n      if (isFullHeight) return undefined;\n      return { maxHeight, minHeight: '200px' };\n    };\n\n    const getContainerClasses = () => {\n      if (isFullHeight) return 'h-full';\n      return '';\n    };\n\n    if (loading) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-ods-border bg-ods-card p-4',\n            'flex items-center justify-center',\n            getContainerClasses(),\n            className,\n          )}\n          style={getContainerStyles()}\n        >\n          <div className=\"text-ods-text-muted text-h6\">Loading logs...</div>\n        </div>\n      );\n    }\n\n    if (logs.length === 0) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-ods-border bg-ods-card p-4',\n            'flex items-center justify-center',\n            getContainerClasses(),\n            className,\n          )}\n          style={getContainerStyles()}\n        >\n          <div className=\"text-ods-text-muted text-h6\">{emptyMessage}</div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative rounded-lg border border-ods-border bg-ods-card',\n          'flex flex-col overflow-hidden',\n          getContainerClasses(),\n          className,\n        )}\n        style={getContainerStyles()}\n      >\n        <div ref={containerRef} className=\"flex-1 overflow-y-auto px-4 py-3\">\n          {logs.map((log, index) => (\n            <LogCard\n              key={log.id}\n              log={log}\n              isLast={index === logs.length - 1}\n              showConnector={showConnector}\n              onClick={() => onLogClick?.(log)}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nLogsList.displayName = 'LogsList';\n","import { forwardRef } from 'react';\nimport { type LogSeverityDotProps, LOG_SEVERITY_COLORS, LOG_SEVERITY_LABELS } from '../types/logs.types';\nimport { cn } from '../utils/cn';\n\nexport const LogSeverityDot = forwardRef<HTMLDivElement, LogSeverityDotProps>(\n  ({ severity, size = 'md', className }, ref) => {\n    const sizeClasses = {\n      sm: 'w-4 h-4',\n      md: 'w-6 h-6',\n      lg: 'w-8 h-8',\n    };\n\n    const dotSizeClasses = {\n      sm: 'w-2 h-2',\n      md: 'w-3 h-3',\n      lg: 'w-4 h-4',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('relative flex shrink-0 items-center justify-center', sizeClasses[size], className)}\n        aria-label={`${LOG_SEVERITY_LABELS[severity]} severity`}\n      >\n        <div\n          className={cn('rounded-full', dotSizeClasses[size])}\n          style={{ backgroundColor: LOG_SEVERITY_COLORS[severity] }}\n        />\n      </div>\n    );\n  },\n);\n\nLogSeverityDot.displayName = 'LogSeverityDot';\n","import type { ToolType } from './tool.types';\n\nexport type LogSeverity = 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL';\n\nexport interface LogEntry {\n  id: string;\n  ingestDay: string;\n  eventType: string;\n  severity: LogSeverity;\n  title: string;\n  timestamp: string | Date;\n  toolType?: ToolType;\n  toolIcon?: string;\n  message?: string;\n  metadata?: Record<string, unknown>;\n}\n\nexport interface LogsListProps {\n  logs: LogEntry[];\n  maxHeight?: string | number;\n  showConnector?: boolean;\n  onLogClick?: (log: LogEntry) => void;\n  loading?: boolean;\n  emptyMessage?: string;\n  className?: string;\n}\n\nexport interface LogSeverityDotProps {\n  severity: LogSeverity;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nexport const LOG_SEVERITY_COLORS: Record<LogSeverity, string> = {\n  DEBUG: '#888888',\n  INFO: '#888888',\n  WARNING: '#e1b32f',\n  ERROR: '#f36666',\n  CRITICAL: '#b43b3b',\n};\n\nexport const LOG_SEVERITY_LABELS: Record<LogSeverity, string> = {\n  DEBUG: 'Debug',\n  INFO: 'Info',\n  WARNING: 'Warning',\n  ERROR: 'Error',\n  CRITICAL: 'Critical',\n};\n","// Assets exports\n// Font files and other static assets\n// Platform utilities will be available when needed\n\nexport const assets = {} as const;\nexport * from './fae-avatar';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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","names":["forwardRef","jsx","forwardRef"]}
+{"version":3,"sources":["../src/components/logs-list.tsx","../src/components/log-severity-dot.tsx","../src/types/logs.types.ts","../src/assets/index.ts"],"sourcesContent":["import { type FC, forwardRef, useRef } from 'react';\nimport type { LogsListProps, LogEntry } from '../types/logs.types';\nimport { cn } from '../utils/cn';\nimport { LogSeverityDot } from './log-severity-dot';\nimport { ToolIcon } from './tool-icon';\n\nconst formatTimestamp = (timestamp: string | Date): string => {\n  const date = timestamp instanceof Date ? timestamp : new Date(timestamp);\n\n  // UTC getters so the timestamp is identical on server (UTC) and client\n  // (local) — otherwise React #418 hydration mismatch.\n  const year = date.getUTCFullYear();\n  const month = String(date.getUTCMonth() + 1).padStart(2, '0');\n  const day = String(date.getUTCDate()).padStart(2, '0');\n  const hours = String(date.getUTCHours()).padStart(2, '0');\n  const minutes = String(date.getUTCMinutes()).padStart(2, '0');\n\n  return `${year}/${month}/${day},${hours}:${minutes}`;\n};\n\nconst LogCard: FC<{\n  log: LogEntry;\n  isLast: boolean;\n  showConnector: boolean;\n  onClick?: () => void;\n}> = ({ log, isLast, showConnector, onClick }) => {\n  return (\n    <div className=\"relative\">\n      <div\n        className={cn(\n          'relative box-border flex w-full items-start gap-3 rounded px-1 py-2',\n          'cursor-pointer transition-colors hover:bg-ods-bg-hover/50',\n        )}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n      >\n        <LogSeverityDot severity={log.severity} size=\"md\" />\n\n        <div className=\"min-w-0 flex-1 space-y-1\">\n          <p className=\"text-ods-text-primary text-h6\">{log.title}</p>\n          <div className=\"flex items-center gap-2\">\n            <p className=\"text-ods-text-secondary text-h5\">{formatTimestamp(log.timestamp)}</p>\n            {log.toolType && <ToolIcon toolType={log.toolType} size={16} />}\n          </div>\n        </div>\n      </div>\n\n      {showConnector && !isLast && (\n        <div\n          className=\"absolute left-[15px] w-[2px] bg-ods-border\"\n          style={{\n            top: '28px',\n            bottom: '-10px',\n          }}\n          aria-hidden=\"true\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport const LogsList = forwardRef<HTMLDivElement, LogsListProps>(\n  (\n    {\n      logs,\n      maxHeight = '400px',\n      showConnector = true,\n      onLogClick,\n      loading = false,\n      emptyMessage = 'No logs to display',\n      className,\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const isFullHeight = maxHeight === '100%';\n\n    const getContainerStyles = () => {\n      if (isFullHeight) return undefined;\n      return { maxHeight, minHeight: '200px' };\n    };\n\n    const getContainerClasses = () => {\n      if (isFullHeight) return 'h-full';\n      return '';\n    };\n\n    if (loading) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-ods-border bg-ods-card p-4',\n            'flex items-center justify-center',\n            getContainerClasses(),\n            className,\n          )}\n          style={getContainerStyles()}\n        >\n          <div className=\"text-ods-text-muted text-h6\">Loading logs...</div>\n        </div>\n      );\n    }\n\n    if (logs.length === 0) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-ods-border bg-ods-card p-4',\n            'flex items-center justify-center',\n            getContainerClasses(),\n            className,\n          )}\n          style={getContainerStyles()}\n        >\n          <div className=\"text-ods-text-muted text-h6\">{emptyMessage}</div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative rounded-lg border border-ods-border bg-ods-card',\n          'flex flex-col overflow-hidden',\n          getContainerClasses(),\n          className,\n        )}\n        style={getContainerStyles()}\n      >\n        <div ref={containerRef} className=\"flex-1 overflow-y-auto px-4 py-3\">\n          {logs.map((log, index) => (\n            <LogCard\n              key={log.id}\n              log={log}\n              isLast={index === logs.length - 1}\n              showConnector={showConnector}\n              onClick={() => onLogClick?.(log)}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nLogsList.displayName = 'LogsList';\n","import { forwardRef } from 'react';\nimport { type LogSeverityDotProps, LOG_SEVERITY_COLORS, LOG_SEVERITY_LABELS } from '../types/logs.types';\nimport { cn } from '../utils/cn';\n\nexport const LogSeverityDot = forwardRef<HTMLDivElement, LogSeverityDotProps>(\n  ({ severity, size = 'md', className }, ref) => {\n    const sizeClasses = {\n      sm: 'w-4 h-4',\n      md: 'w-6 h-6',\n      lg: 'w-8 h-8',\n    };\n\n    const dotSizeClasses = {\n      sm: 'w-2 h-2',\n      md: 'w-3 h-3',\n      lg: 'w-4 h-4',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('relative flex shrink-0 items-center justify-center', sizeClasses[size], className)}\n        aria-label={`${LOG_SEVERITY_LABELS[severity]} severity`}\n      >\n        <div\n          className={cn('rounded-full', dotSizeClasses[size])}\n          style={{ backgroundColor: LOG_SEVERITY_COLORS[severity] }}\n        />\n      </div>\n    );\n  },\n);\n\nLogSeverityDot.displayName = 'LogSeverityDot';\n","import type { ToolType } from './tool.types';\n\nexport type LogSeverity = 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL';\n\nexport interface LogEntry {\n  id: string;\n  ingestDay: string;\n  eventType: string;\n  severity: LogSeverity;\n  title: string;\n  timestamp: string | Date;\n  toolType?: ToolType;\n  toolIcon?: string;\n  message?: string;\n  metadata?: Record<string, unknown>;\n}\n\nexport interface LogsListProps {\n  logs: LogEntry[];\n  maxHeight?: string | number;\n  showConnector?: boolean;\n  onLogClick?: (log: LogEntry) => void;\n  loading?: boolean;\n  emptyMessage?: string;\n  className?: string;\n}\n\nexport interface LogSeverityDotProps {\n  severity: LogSeverity;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nexport const LOG_SEVERITY_COLORS: Record<LogSeverity, string> = {\n  DEBUG: '#888888',\n  INFO: '#888888',\n  WARNING: '#e1b32f',\n  ERROR: '#f36666',\n  CRITICAL: '#b43b3b',\n};\n\nexport const LOG_SEVERITY_LABELS: Record<LogSeverity, string> = {\n  DEBUG: 'Debug',\n  INFO: 'Info',\n  WARNING: 'Warning',\n  ERROR: 'Error',\n  CRITICAL: 'Critical',\n};\n","// Assets exports\n// Font files and other static assets\n// Platform utilities will be available when needed\n\nexport const assets = {} as const;\nexport * from './fae-avatar';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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","names":["forwardRef","jsx","forwardRef"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.581",
+  "version": "0.0.582-1958.5391.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/.push-button-selector.md

@@ -1,4 +1,4 @@
-<!-- source-hash: 1b470f4e084b6cb0c7cd286c460838ca -->
+<!-- source-hash: 0ccfb311d1bb254bbfb9ffdb994a9af1 -->
 A client-side React component that renders a list of toggleable push-button options with support for single/multi-select, section grouping, disabled states with tooltips, loading skeletons, and error handling.
 
 ## Key Components

package/src/components/features/__tests__/video-playback-failure.test.tsx

@@ -0,0 +1,250 @@
+/**
+ * Playback-failure handling for the shared `<Video>`.
+ *
+ * Two branches: the file player (MuxPlayer) via a fake element that fires the
+ * media events the watchdog listens to, and the YouTube facade via the
+ * postMessage channel it subscribes to. Both assert the same contract — a
+ * failure surfaces a reachable retry AND is reported once.
+ */
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import { forwardRef, useImperativeHandle } from 'react';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
+
+interface FakeMuxEl {
+  paused: boolean;
+  ended: boolean;
+  currentTime: number;
+  loadCalls: number;
+  playCalls: number;
+  listeners: Record<string, Array<() => void>>;
+  emit: (type: string) => void;
+}
+
+let muxProps: Record<string, (() => void) | undefined> = {};
+let muxEl: FakeMuxEl | null = null;
+
+vi.mock('@mux/mux-player-react', () => {
+  const Fake = forwardRef((props: Record<string, unknown>, ref: React.Ref<unknown>) => {
+    muxProps = props as Record<string, (() => void) | undefined>;
+    useImperativeHandle(ref, () => {
+      const listeners: Record<string, Array<() => void>> = {};
+      const el = {
+        paused: false,
+        ended: false,
+        loadCalls: 0,
+        playCalls: 0,
+        muted: false,
+        volume: 1,
+        currentTime: 0,
+        duration: 100,
+        listeners,
+        play: () => {
+          el.playCalls += 1;
+          el.paused = false;
+          return Promise.resolve();
+        },
+        pause: () => {
+          el.paused = true;
+        },
+        // Mirrors the real element: a reload rewinds to zero.
+        load: () => {
+          el.loadCalls += 1;
+          el.currentTime = 0;
+        },
+        addEventListener: (type: string, fn: () => void) => {
+          (listeners[type] ??= []).push(fn);
+        },
+        removeEventListener: (type: string, fn: () => void) => {
+          listeners[type] = (listeners[type] ?? []).filter(l => l !== fn);
+        },
+        emit: (type: string) => {
+          for (const fn of [...(listeners[type] ?? [])]) fn();
+        },
+      };
+      muxEl = el;
+      return el;
+    }, []);
+    return <div data-testid="mux" />;
+  });
+  Fake.displayName = 'FakeMuxPlayer';
+  return { default: Fake };
+});
+
+import { Video, VIDEO_PLAYBACK_FAILED_EVENT } from '../video';
+
+const YT_ORIGIN = 'https://www.youtube-nocookie.com';
+const ERROR_TEXT = 'This video failed to play.';
+
+function ytMessage(body: unknown): void {
+  window.dispatchEvent(new MessageEvent('message', { data: JSON.stringify(body), origin: YT_ORIGIN }));
+}
+
+function failureEvents(spy: { mock: { calls: unknown[][] } }): CustomEvent[] {
+  return spy.mock.calls
+    .map(call => call[0])
+    .filter((e): e is CustomEvent => e instanceof CustomEvent && e.type === VIDEO_PLAYBACK_FAILED_EVENT);
+}
+
+describe('Video — file playback failure handling', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    muxProps = {};
+    muxEl = null;
+  });
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    // Re-spying on a live spy returns it with its calls intact — restore, or
+    // the next test counts this one's events.
+    vi.restoreAllMocks();
+  });
+
+  it('a mid-playback stall surfaces a retry and reports the failure once', () => {
+    const dispatched = vi.spyOn(window, 'dispatchEvent');
+    render(<Video kind="file" url="https://example.com/a.m3u8" layout="centered" />);
+
+    // Buffering while playback is expected — the watchdog arms.
+    act(() => muxProps.onWaiting?.());
+    expect(screen.queryByText(ERROR_TEXT)).toBeNull();
+
+    // No progress within the window → failure surfaces.
+    act(() => {
+      vi.advanceTimersByTime(15_000);
+    });
+    expect(screen.getByText(ERROR_TEXT)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+
+    const events = failureEvents(dispatched);
+    expect(events).toHaveLength(1);
+    expect(events[0].detail).toMatchObject({ kind: 'file', reason: 'stall' });
+  });
+
+  it('Try again reloads and resumes the element, clearing the error', () => {
+    render(<Video kind="file" url="https://example.com/a.m3u8" layout="centered" />);
+    act(() => muxProps.onWaiting?.());
+    act(() => {
+      vi.advanceTimersByTime(15_000);
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+    expect(muxEl?.loadCalls).toBe(1);
+    expect(muxEl?.playCalls).toBe(1);
+    expect(screen.queryByText(ERROR_TEXT)).toBeNull();
+  });
+
+  it('Try again resumes from where the stall happened, not from the top', () => {
+    render(<Video kind="file" url="https://example.com/a.m3u8" layout="centered" />);
+    if (muxEl) muxEl.currentTime = 480;
+    act(() => muxProps.onWaiting?.());
+    act(() => {
+      vi.advanceTimersByTime(15_000);
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+    expect(muxEl?.currentTime).toBe(0); // reload rewound it
+    act(() => muxEl?.emit('loadedmetadata'));
+    expect(muxEl?.currentTime).toBe(480);
+    // One-shot: a later reload must not drag the old position back.
+    expect(muxEl?.listeners.loadedmetadata).toHaveLength(0);
+  });
+
+  it('a hard media error surfaces the retry immediately', () => {
+    render(<Video kind="file" url="https://example.com/a.m3u8" layout="centered" />);
+    act(() => muxProps.onError?.());
+    expect(screen.getByText(ERROR_TEXT)).toBeInTheDocument();
+  });
+
+  it('a stall that self-heals dismisses its own overlay', () => {
+    render(<Video kind="file" url="https://example.com/a.m3u8" layout="centered" />);
+    act(() => muxProps.onWaiting?.());
+    act(() => {
+      vi.advanceTimersByTime(15_000);
+    });
+    expect(screen.getByText(ERROR_TEXT)).toBeInTheDocument();
+
+    act(() => muxProps.onPlaying?.());
+    expect(screen.queryByText(ERROR_TEXT)).toBeNull();
+  });
+
+  it('a paused player is never treated as a stall', () => {
+    render(<Video kind="file" url="https://example.com/a.m3u8" layout="centered" />);
+    if (muxEl) muxEl.paused = true;
+    act(() => muxProps.onWaiting?.());
+    act(() => {
+      vi.advanceTimersByTime(15_000);
+    });
+    expect(screen.queryByText(ERROR_TEXT)).toBeNull();
+  });
+
+  it('decorative first-frame previews stay silent on error', () => {
+    render(<Video kind="file" url="https://example.com/a.m3u8" firstFrameOnly />);
+    act(() => muxProps.onError?.());
+    expect(screen.queryByText(ERROR_TEXT)).toBeNull();
+  });
+});
+
+describe('Video — YouTube facade failure handling', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  function activate(): void {
+    render(<Video kind="youtube" url="dQw4w9WgXcQ" />);
+    fireEvent.click(screen.getByRole('button', { name: /Play:/ }));
+  }
+
+  it('an explicit embed error surfaces retry + a YouTube fallback link', () => {
+    const dispatched = vi.spyOn(window, 'dispatchEvent');
+    activate();
+    act(() => ytMessage({ event: 'onError', info: 150 }));
+
+    expect(screen.getByText(ERROR_TEXT)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Watch on YouTube' })).toHaveAttribute(
+      'href',
+      'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    );
+    expect(failureEvents(dispatched)[0].detail).toMatchObject({
+      kind: 'youtube',
+      reason: 'error',
+      errorCode: 150,
+    });
+  });
+
+  // Regression guard: a silent embed is NOT a failed one. Safari/iOS block the
+  // unmuted autoplay and wait for a click inside the iframe, and a broken jsapi
+  // channel reports nothing at all — a readiness timeout would tear both down.
+  it('a silent embed is left alone, however long it stays silent', () => {
+    const dispatched = vi.spyOn(window, 'dispatchEvent');
+    activate();
+    act(() => {
+      vi.advanceTimersByTime(120_000);
+    });
+
+    expect(screen.queryByText(ERROR_TEXT)).toBeNull();
+    expect(screen.getByTitle('YouTube Video')).toBeInTheDocument();
+    expect(failureEvents(dispatched)).toHaveLength(0);
+  });
+
+  it('reaching PLAYING keeps the embed and never shows the error', () => {
+    activate();
+    act(() => ytMessage({ event: 'infoDelivery', info: { playerState: 1 } }));
+    act(() => {
+      vi.advanceTimersByTime(12_000);
+    });
+    expect(screen.queryByText(ERROR_TEXT)).toBeNull();
+  });
+
+  it('Try again remounts the embed', () => {
+    activate();
+    act(() => ytMessage({ event: 'onError', info: 150 }));
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }));
+    expect(screen.queryByText(ERROR_TEXT)).toBeNull();
+    expect(screen.queryByRole('link', { name: 'Watch on YouTube' })).toBeNull();
+    expect(screen.getByTitle('YouTube Video')).toBeInTheDocument();
+  });
+});

package/src/components/features/push-button-selector.tsx

@@ -2,7 +2,9 @@
 
 import { Check } from 'lucide-react';
 import type React from 'react';
-import { Badge } from '../ui';
+import { useEffect, useRef } from 'react';
+import { UnifiedSkeleton } from '../loading';
+import { Badge, Input } from '../ui';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 
 export interface SelectableOption {
@@ -27,6 +29,28 @@ export interface SectionDefinition {
   description?: string; // Optional description shown under section label
 }
 
+/** SERVER-SIDE search: the selector renders the input; the PARENT owns the
+ *  query state and re-fetches `options` (never a client-side .filter of a
+ *  pre-fetched list). While `isLoading`, the input stays mounted (typing
+ *  must not lose focus to a skeleton swap). */
+export interface PushButtonSelectorSearch {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+}
+
+/** Lazy paging: the option list becomes a FIXED-HEIGHT scroll viewport with
+ *  an IntersectionObserver sentinel near the bottom — the selector calls
+ *  `onLoadMore` as the user scrolls; the parent appends to `options`. */
+export interface PushButtonSelectorLazyLoad {
+  hasMore: boolean;
+  isFetchingMore: boolean;
+  onLoadMore: () => void;
+  /** CSS height of the scroll viewport (default '336px' ≈ 6 rows). */
+  maxHeight?: string;
+}
+
 interface PushButtonSelectorProps {
   options: SelectableOption[];
   selectedIds: string[];
@@ -41,25 +65,37 @@ interface PushButtonSelectorProps {
   error?: string | null;
   skeletonCount?: number;
   sections?: SectionDefinition[]; // Optional sections for grouping options
+  /** Built-in server-side search input (see PushButtonSelectorSearch). */
+  search?: PushButtonSelectorSearch;
+  /** Built-in fixed-height scroll + infinite paging (see PushButtonSelectorLazyLoad). */
+  lazyLoad?: PushButtonSelectorLazyLoad;
+  /** Rendered inside the list when `options` is empty and not loading. */
+  emptyMessage?: React.ReactNode;
+  /** Rendered under the list (result counts, hints). */
+  footer?: React.ReactNode;
 }
 
-// Skeleton component matching external pattern from announcement-form.tsx
+// Composed from the app-wide UnifiedSkeleton system (components/loading) —
+// the same base every other loading surface uses (bg-ods-skeleton pulse,
+// prefers-reduced-motion support, role="status" a11y). Each skeleton row
+// mirrors a LOADED option row exactly (bg-ods-bg card, p-4, icon + two
+// 20px-tall text lines + selection box) so the list never jumps on load.
 function PushButtonSelectorSkeleton({ count = 3, hasTitle }: { count?: number; hasTitle?: boolean }) {
   return (
-    <div className="space-y-3">
-      {hasTitle && <div className="h-5 w-20 animate-pulse rounded bg-ods-skeleton" />}
+    <div className="space-y-3" role="status" aria-label="Loading options">
+      {hasTitle && <UnifiedSkeleton className="h-5 w-20" aria-label="Loading title" />}
       <div className="space-y-3">
         {Array.from({ length: count }, (_, i) => (
-          <div key={i} className="animate-pulse rounded-lg border border-ods-border bg-ods-skeleton p-4">
-            <div className="flex items-center justify-between">
+          <div key={i} className="rounded-lg border border-ods-border bg-ods-bg p-4">
+            <div className="flex items-center justify-between gap-4">
               <div className="flex items-center gap-3">
-                <div className="h-8 w-8 rounded bg-ods-skeleton" />
+                <UnifiedSkeleton className="h-8 w-8" aria-label="Loading icon" />
                 <div>
-                  <div className="mb-1 h-4 w-20 rounded bg-ods-skeleton" />
-                  <div className="h-3 w-32 rounded bg-ods-skeleton" />
+                  <UnifiedSkeleton variant="text" className="mb-2 h-4 w-24" aria-label="Loading name" />
+                  <UnifiedSkeleton variant="text" className="h-4 w-36" aria-label="Loading description" />
                 </div>
               </div>
-              <div className="h-6 w-6 rounded border-2 border-ods-border bg-ods-skeleton" />
+              <UnifiedSkeleton className="h-6 w-6" aria-label="Loading selection state" />
             </div>
           </div>
         ))}
@@ -94,18 +130,68 @@ export function PushButtonSelector({
   error = null,
   skeletonCount = 3,
   sections,
+  search,
+  lazyLoad,
+  emptyMessage,
+  footer,
 }: PushButtonSelectorProps) {
-  // LOADING STATE
-  if (isLoading) {
+  // Lazy-load sentinel: observe within the scroll viewport so onLoadMore
+  // fires as the user approaches the bottom. Hooks run unconditionally
+  // (before the early returns) per the rules of hooks. Pass a STABLE
+  // onLoadMore (react-query's fetchNextPage is) — an inline arrow re-arms
+  // the observer each render (harmless, just wasteful).
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const lazyHasMore = lazyLoad?.hasMore ?? false;
+  const lazyFetching = lazyLoad?.isFetchingMore ?? false;
+  const onLoadMore = lazyLoad?.onLoadMore;
+  const optionCount = options.length;
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    const root = scrollRef.current;
+    if (!sentinel || !root || !onLoadMore || !lazyHasMore) return undefined;
+    const observer = new IntersectionObserver(
+      entries => {
+        if (entries.some(e => e.isIntersecting) && !lazyFetching) {
+          onLoadMore();
+        }
+      },
+      { root, rootMargin: '80px' },
+    );
+    observer.observe(sentinel);
+    return () => {
+      observer.disconnect();
+    };
+    // optionCount: re-arm when the list grows (the sentinel moves).
+  }, [lazyHasMore, lazyFetching, onLoadMore, optionCount]);
+
+  const searchInput = search ? (
+    <Input
+      value={search.value}
+      onChange={e => search.onChange(e.target.value)}
+      placeholder={search.placeholder}
+      aria-label={search.ariaLabel ?? search.placeholder ?? 'Search'}
+    />
+  ) : null;
+
+  // Framed mode (search and/or lazyLoad): loading and error are NOT early
+  // returns — the frame (title, search input, fixed-height viewport, footer)
+  // must stay pixel-identical across loading/loaded/empty/error, with only
+  // the viewport CONTENT swapping. An early-return skeleton dropped the
+  // bordered viewport + footer and rendered shorter rows, so the whole
+  // section collapsed and jumped on every debounced search.
+  const framed = !!search || !!lazyLoad;
+
+  // LOADING / ERROR STATES — legacy (unframed) consumers keep the historical
+  // whole-component swap, byte-identical.
+  if (isLoading && !framed) {
     return (
       <div className={className}>
         <PushButtonSelectorSkeleton count={skeletonCount} hasTitle={!!title} />
       </div>
     );
   }
-
-  // ERROR STATE
-  if (error) {
+  if (error && !framed) {
     return (
       <div className={className}>
         <PushButtonSelectorError message={error} title={title} />
@@ -252,15 +338,54 @@ export function PushButtonSelector({
     );
   };
 
+  // ~82px per row: enough skeleton rows to fill the fixed viewport, so the
+  // loading state occupies the SAME height as the loaded list.
+  const framedSkeletonCount = lazyLoad ? Math.max(skeletonCount, 4) : skeletonCount;
+  const listContent = isLoading ? (
+    <PushButtonSelectorSkeleton count={framedSkeletonCount} />
+  ) : error ? (
+    <PushButtonSelectorError message={error} />
+  ) : (
+    <>
+      {options.length === 0 && emptyMessage !== undefined ? (
+        <div className="text-ods-text-secondary text-h6">{emptyMessage}</div>
+      ) : (
+        renderOptionsContent()
+      )}
+      {lazyLoad ? (
+        <>
+          <div ref={sentinelRef} />
+          {lazyLoad.isFetchingMore ? (
+            <div className="py-2 text-center text-ods-text-secondary text-h6">Loading more…</div>
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+
   return (
     <TooltipProvider delayDuration={150}>
       <div className={`space-y-4 ${className}`}>
         {title && <h3 className="text-ods-text-primary text-h5">{title}</h3>}
 
-        {renderOptionsContent()}
+        {searchInput}
+
+        {lazyLoad ? (
+          <div
+            ref={scrollRef}
+            className="space-y-4 overflow-y-auto rounded-lg border border-ods-border p-2"
+            style={{ height: lazyLoad.maxHeight ?? '336px' }}
+          >
+            {listContent}
+          </div>
+        ) : (
+          listContent
+        )}
+
+        {footer}
 
         {/* Selection Summary */}
-        {selectionSummary && validSelectedIds.length > 0 && (
+        {!isLoading && !error && selectionSummary && validSelectedIds.length > 0 && (
           <div className="rounded-lg border border-ods-success bg-ods-success-secondary p-4">
             <div className="mb-2 flex items-center gap-2">
               <div className="h-2 w-2 rounded-full bg-ods-success"></div>