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

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   SoftwareInfo,
   SoftwareSourceBadge,
   ToolBadge
-} from "./chunk-3GXNCJZI.js";
+} from "./chunk-CR7GPMCM.js";
 import {
   AppHeader,
   AppLayout,
@@ -28,14 +28,14 @@ import {
   SlidingSidebar,
   TicketAlertsButton,
   TopNavigation
-} from "./chunk-GVM37TRU.js";
+} from "./chunk-U2ZRM3YB.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
   StickySectionNav,
   useSectionNavigation
-} from "./chunk-KAEVE7W2.js";
-import "./chunk-R5JVRFSW.js";
+} from "./chunk-646JEAY4.js";
+import "./chunk-4KWAHIYA.js";
 import {
   ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
   AIEnrichButton,
@@ -577,7 +577,7 @@ import {
   withFirstTouchAttribution,
   withWalkthroughOpenParam,
   writeDismissCookie
-} from "./chunk-VXUUSLD5.js";
+} from "./chunk-GD3OAM4T.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-1960.5386.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

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();
+  });
+});