@flamingo-stack/openframe-frontend-core 0.0.586 → 0.0.587-1973.5528.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.586",
+  "version": "0.0.587-1973.5528.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -444,6 +444,7 @@
     "@hookform/resolvers": "~5.2.2",
     "@storybook/nextjs-vite": "^10.1.11",
     "@svgr/cli": "^8.1.0",
+    "@tanstack/react-query": "^5.101.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@types/node": "^24.10.4",

package/src/chat-protocol/__tests__/nats-decoder-golden.test.ts

@@ -329,3 +329,133 @@ describe('decodeNatsChunk — seq envelope', () => {
     }).toMatchSnapshot();
   });
 });
+
+describe('decodeNatsChunk — Mingo source metadata', () => {
+  it.each(['GUIDE', 'SOURCES'] as const)('decodes %s payloads into safe sources and playable refs', type => {
+    expect(
+      decodeNatsChunk({
+        type,
+        streamSeq: 81,
+        payload: {
+          sources: [
+            {
+              index: 1,
+              name: 'Install agent',
+              path: 'docs/install.md',
+              documentType: 'markdown',
+              externalUrl: 'https://docs.example.test/install',
+            },
+            {
+              index: 2,
+              name: 'Unsafe source',
+              path: 'docs/unsafe.md',
+              documentType: 'markdown',
+              externalUrl: 'javascript:alert(1)',
+            },
+            {
+              index: 1,
+              name: 'Duplicate',
+              path: 'docs/duplicate.md',
+              documentType: 'markdown',
+            },
+            { index: 3, name: '', path: 'docs/empty.md', documentType: 'markdown' },
+          ],
+          videos: [
+            {
+              ref: '[card://video:MdFJNoJeqZQ]',
+              title: 'Install the agent',
+              url: 'https://www.youtube.com/watch?v=MdFJNoJeqZQ',
+              sourceRepo: 'embedded-videos',
+              metadata: { youtubeUrl: 'MdFJNoJeqZQ' },
+            },
+            {
+              ref: '[card://video:mux-9b6586b494]',
+              title: 'Community demo',
+              url: 'https://stream.mux.com/playback-id.m3u8',
+              metadata: { videoUrl: 'javascript:alert(1)' },
+            },
+            {
+              ref: '[card://video:mp4-1b2047dc1b]',
+              title: 'Product overview',
+              url: 'https://cdn.example.test/product-overview.mp4',
+              metadata: { videoUrl: 'https://cdn.example.test/product-overview.mp4' },
+            },
+            {
+              ref: '[card://video:MdFJNoJeqZQ]',
+              title: 'Duplicate video',
+              url: 'https://cdn.example.test/duplicate.mp4',
+            },
+          ],
+          cards: [
+            {
+              ref: '[card://markdown:install-agent]',
+              entityType: 'markdown',
+              entityId: 'install-agent',
+            },
+          ],
+        },
+      }),
+    ).toEqual({
+      type: 'sources',
+      seq: 81,
+      sources: [
+        {
+          index: 1,
+          name: 'Install agent',
+          path: 'docs/install.md',
+          documentType: 'markdown',
+          externalUrl: 'https://docs.example.test/install',
+        },
+        {
+          index: 2,
+          name: 'Unsafe source',
+          path: 'docs/unsafe.md',
+          documentType: 'markdown',
+        },
+      ],
+      refs: [
+        {
+          type: 'video',
+          id: 'MdFJNoJeqZQ',
+          title: 'Install the agent',
+          url: 'https://www.youtube.com/watch?v=MdFJNoJeqZQ',
+          sourceRepo: 'embedded-videos',
+          metadata: { youtubeUrl: 'MdFJNoJeqZQ' },
+        },
+        {
+          type: 'video',
+          id: 'mux-9b6586b494',
+          title: 'Community demo',
+          url: 'https://stream.mux.com/playback-id.m3u8',
+          metadata: { videoUrl: 'https://stream.mux.com/playback-id.m3u8' },
+        },
+        {
+          type: 'video',
+          id: 'mp4-1b2047dc1b',
+          title: 'Product overview',
+          url: 'https://cdn.example.test/product-overview.mp4',
+          metadata: { videoUrl: 'https://cdn.example.test/product-overview.mp4' },
+        },
+        {
+          type: 'markdown',
+          id: 'install-agent',
+          title: 'install-agent',
+          url: null,
+        },
+      ],
+    });
+  });
+
+  it('drops a metadata payload with no valid sources or refs', () => {
+    expect(
+      decodeNatsChunk({
+        type: 'SOURCES',
+        payload: {
+          sources: [{ index: 0, name: 'Invalid', path: '', documentType: '' }],
+          videos: [{ ref: 'https://example.test/video' }],
+          cards: [{ ref: '[CARD://blog:wrong-case]' }],
+        },
+      }),
+    ).toBeNull();
+  });
+});

package/src/chat-protocol/__tests__/source-metadata.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it, vi } from 'vitest';
+import { isSourceMetadataCardRef, sourceMetadataEvent } from '../source-metadata';
+
+describe('source metadata card provenance', () => {
+  it('is recognized by a separate package entrypoint module instance', async () => {
+    const event = sourceMetadataEvent({
+      sources: [
+        {
+          index: 1,
+          id: 'install-agent',
+          name: 'Install the OpenFrame agent on Windows',
+          path: 'getting-started/install-agent.md',
+          documentType: 'markdown',
+        },
+      ],
+      cards: [
+        {
+          ref: '[card://markdown:install-agent]',
+          entityType: 'markdown',
+          entityId: 'install-agent',
+        },
+      ],
+    });
+    const ref = event?.refs?.[0];
+    if (!ref) throw new Error('Expected matching source metadata card ref');
+
+    vi.resetModules();
+    const { isSourceMetadataCardRef: isSourceMetadataCardRefFromSecondEntrypoint } = await import('../source-metadata');
+
+    expect(isSourceMetadataCardRefFromSecondEntrypoint(ref)).toBe(true);
+  });
+
+  it('keeps source provenance after a serializing host boundary', () => {
+    const event = sourceMetadataEvent({
+      sources: [
+        {
+          index: 1,
+          id: 'install-agent',
+          name: 'Install the OpenFrame agent on Windows',
+          path: 'getting-started/install-agent.md',
+          documentType: 'markdown',
+        },
+      ],
+      cards: [
+        {
+          ref: '[card://markdown:install-agent]',
+          entityType: 'markdown',
+          entityId: 'install-agent',
+        },
+      ],
+    });
+    const ref = event?.refs?.[0];
+    if (!ref) throw new Error('Expected matching source metadata card ref');
+
+    const restoredRef = structuredClone(ref);
+
+    expect(isSourceMetadataCardRef(restoredRef)).toBe(true);
+  });
+
+  it('does not recognize an arbitrary enriched card ref', async () => {
+    vi.resetModules();
+    const { isSourceMetadataCardRef: isSourceMetadataCardRefFromSecondEntrypoint } = await import('../source-metadata');
+
+    expect(
+      isSourceMetadataCardRefFromSecondEntrypoint({
+        type: 'markdown',
+        id: 'unmatched-doc',
+        title: 'Plausible but unmatched document',
+        url: null,
+        metadata: { path: 'docs/unmatched.md' },
+      }),
+    ).toBe(false);
+  });
+});

package/src/chat-protocol/events.ts

@@ -12,7 +12,8 @@
 // rows straight to the accumulator, so restating them here would be two
 // declarations of one wire contract. Type-only import from a React-free
 // module; `nats-decoder.ts` already depends on the same file for MESSAGE_TYPE.
-import type { AskOptionData } from '../components/chat/types/message.types';
+import type { ChatRef } from '../components/chat/chat-ref.types';
+import type { AskOptionData, ChatSource } from '../components/chat/types/message.types';
 // The wire-frame shapes these events carry through are defined ONCE in
 // `./frames.ts` — reuse them here rather than restating their fields.
 import type { ApprovalRequestField, DecisionResolvedFrame, UsageTelemetry } from './frames';
@@ -240,6 +241,12 @@ export interface ChatMetadataEvent extends ChatStreamEventBase {
   };
 }
 
+export interface SourcesEvent extends ChatStreamEventBase {
+  type: 'sources';
+  sources: ChatSource[];
+  refs?: ChatRef[];
+}
+
 /** SSE usage frames — raw wire keys (snake_case) preserved. */
 export interface UsageEvent extends ChatStreamEventBase {
   type: 'usage';
@@ -362,6 +369,7 @@ export type ChatStreamEvent =
   | TicketEscalatedEvent
   | TicketEventEvent
   | ChatMetadataEvent
+  | SourcesEvent
   | UsageEvent
   | TokenUsageEvent
   | CompactionEvent

package/src/chat-protocol/nats-decoder.ts

@@ -20,6 +20,7 @@ import { MESSAGE_TYPE } from '../components/chat/types/message.types';
 import type { AskOptionData } from '../components/chat/types/message.types';
 import { ESCALATION_STATE, escalationResolvedStatus } from './events';
 import type { ApprovalToolCall, ChatStreamEvent } from './events';
+import { sourceMetadataEvent } from './source-metadata';
 
 /** Minimal structural view of a NATS chunk (see `ChunkData` in
  *  `src/components/chat/types/network.types.ts`). */
@@ -125,6 +126,12 @@ export function decodeNatsChunk(chunk: unknown): ChatStreamEvent | null {
       }
       return null;
 
+    case MESSAGE_TYPE.GUIDE:
+    case MESSAGE_TYPE.SOURCES: {
+      const event = sourceMetadataEvent(data.payload);
+      return event ? { ...event, ...seq } : null;
+    }
+
     // An ask card is only an ask card with something to pick: a question and at
     // least one option. Anything less is dropped rather than rendered as an
     // empty card the user can't answer — the backend already falls back to a

package/src/chat-protocol/source-metadata.ts

@@ -0,0 +1,202 @@
+import type { ChatRef } from '../components/chat/chat-ref.types';
+import type { ChatSource } from '../components/chat/types/message.types';
+import type { SourcesEvent } from './events';
+
+const CARD_REFERENCE = /^\[card:\/\/([a-zA-Z0-9_-]+):([a-zA-Z0-9_-]+)\]$/;
+const SOURCE_METADATA_MATCHED = 'sourceMetadataMatched';
+
+export function isSourceMetadataCardRef(ref: ChatRef): boolean {
+  return ref.metadata?.[SOURCE_METADATA_MATCHED] === true;
+}
+
+function requiredString(value: unknown): string | null {
+  if (typeof value !== 'string') return null;
+  const normalized = value.trim();
+  return normalized ? normalized : null;
+}
+
+function optionalString(value: unknown): string | undefined {
+  return requiredString(value) ?? undefined;
+}
+
+function httpsUrl(value: unknown): string | undefined {
+  const candidate = optionalString(value);
+  if (!candidate) return undefined;
+  try {
+    return new URL(candidate).protocol === 'https:' ? candidate : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function youtubeId(value: unknown): string | undefined {
+  const candidate = optionalString(value);
+  if (!candidate) return undefined;
+  if (/^[A-Za-z0-9_-]{11}$/.test(candidate)) return candidate;
+  const url = httpsUrl(candidate);
+  if (!url) return undefined;
+  const parsed = new URL(url);
+  const hostname = parsed.hostname.toLowerCase();
+  const youtubeHost = hostname === 'youtu.be' || hostname === 'youtube.com' || hostname.endsWith('.youtube.com');
+  if (!youtubeHost) return undefined;
+  const pathId =
+    hostname === 'youtu.be'
+      ? parsed.pathname.split('/').filter(Boolean)[0]
+      : parsed.pathname.match(/^\/(?:embed|v|shorts)\/([A-Za-z0-9_-]{11})(?:\/|$)/)?.[1];
+  const id = pathId ?? parsed.searchParams.get('v') ?? undefined;
+  return id && /^[A-Za-z0-9_-]{11}$/.test(id) ? id : undefined;
+}
+
+function nullableString(value: unknown): string | null | undefined {
+  return value === null ? null : optionalString(value);
+}
+
+function normalizeSourceItems(value: unknown): NonNullable<ChatSource['items']> | undefined {
+  if (!Array.isArray(value)) return undefined;
+  const items = value.flatMap(candidate => {
+    if (!candidate || typeof candidate !== 'object' || Array.isArray(candidate)) return [];
+    const item = candidate as Record<string, unknown>;
+    const id = requiredString(item.id);
+    const documentType = requiredString(item.documentType);
+    const name = requiredString(item.name);
+    if (!id || !documentType || !name) return [];
+    const externalUrl = httpsUrl(item.externalUrl);
+    const targetPlatform = nullableString(item.targetPlatform);
+    const path = nullableString(item.path);
+    return [
+      {
+        id,
+        documentType,
+        name,
+        ...(externalUrl ? { externalUrl } : {}),
+        ...(targetPlatform !== undefined ? { targetPlatform } : {}),
+        ...(path !== undefined ? { path } : {}),
+      },
+    ];
+  });
+  return items.length > 0 ? items : undefined;
+}
+
+function normalizeSources(value: unknown): ChatSource[] {
+  if (!Array.isArray(value)) return [];
+  const seen = new Set<number>();
+  const sources: ChatSource[] = [];
+  for (const candidate of value) {
+    if (!candidate || typeof candidate !== 'object' || Array.isArray(candidate)) continue;
+    const source = candidate as Record<string, unknown>;
+    const index = source.index;
+    const name = requiredString(source.name);
+    const path = requiredString(source.path);
+    const documentType = requiredString(source.documentType);
+    const validIndex =
+      typeof index === 'number' && Number.isFinite(index) && Number.isInteger(index) && index > 0 && !seen.has(index);
+    if (!validIndex || !name || !path || !documentType) continue;
+    seen.add(index);
+    const externalUrl = httpsUrl(source.externalUrl);
+    const targetPlatform = nullableString(source.targetPlatform);
+    const id = optionalString(source.id);
+    const sourceRepo = optionalString(source.sourceRepo);
+    const label = optionalString(source.label);
+    const items = normalizeSourceItems(source.items);
+    sources.push({
+      index,
+      name,
+      path,
+      documentType,
+      ...(externalUrl ? { externalUrl } : {}),
+      ...(targetPlatform !== undefined ? { targetPlatform } : {}),
+      ...(id ? { id } : {}),
+      ...(sourceRepo ? { sourceRepo } : {}),
+      ...(label ? { label } : {}),
+      ...(items ? { items } : {}),
+    });
+  }
+  return sources;
+}
+
+function normalizeVideoMetadata(value: unknown): Record<string, string> {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
+  const input = value as Record<string, unknown>;
+  const metadata: Record<string, string> = {};
+  for (const key of ['videoUrl', 'highlightVideoUrl', 'videoPoster', 'highlightVideoPoster'] as const) {
+    const url = httpsUrl(input[key]);
+    if (url) metadata[key] = url;
+  }
+  const id = youtubeId(input.youtubeUrl);
+  if (id) metadata.youtubeUrl = id;
+  return metadata;
+}
+
+function normalizeVideos(value: unknown): ChatRef[] {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap(candidate => {
+    if (!candidate || typeof candidate !== 'object' || Array.isArray(candidate)) return [];
+    const video = candidate as Record<string, unknown>;
+    const match = typeof video.ref === 'string' ? CARD_REFERENCE.exec(video.ref) : null;
+    if (!match || match[1] !== 'video') return [];
+    const id = match[2];
+    const title = optionalString(video.title) ?? id;
+    const url = httpsUrl(video.url) ?? null;
+    const sourceRepo = optionalString(video.sourceRepo);
+    const metadata = normalizeVideoMetadata(video.metadata);
+    if (url) {
+      const idFromUrl = youtubeId(url);
+      if (idFromUrl) {
+        metadata.youtubeUrl = idFromUrl;
+        delete metadata.videoUrl;
+      } else {
+        metadata.videoUrl = url;
+        delete metadata.youtubeUrl;
+      }
+    }
+    return [
+      {
+        type: 'video',
+        id,
+        title,
+        url,
+        ...(sourceRepo ? { sourceRepo } : {}),
+        ...(Object.keys(metadata).length > 0 ? { metadata } : {}),
+      },
+    ];
+  });
+}
+
+function normalizeCards(value: unknown, sources: ChatSource[]): ChatRef[] {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap(candidate => {
+    if (!candidate || typeof candidate !== 'object' || Array.isArray(candidate)) return [];
+    const card = candidate as Record<string, unknown>;
+    const match = typeof card.ref === 'string' ? CARD_REFERENCE.exec(card.ref) : null;
+    if (!match || match[1] === 'video') return [];
+    const type = requiredString(card.entityType);
+    const id = requiredString(card.entityId);
+    if (!type || !id || type !== match[1] || id !== match[2]) return [];
+    const source = sources.find(item => item.id === id && item.documentType === type);
+    const ref: ChatRef = {
+      type,
+      id,
+      title: source?.name ?? id,
+      url: source?.externalUrl ?? null,
+      ...(source?.sourceRepo ? { sourceRepo: source.sourceRepo } : {}),
+      ...(source?.targetPlatform !== undefined ? { targetPlatform: source.targetPlatform } : {}),
+      ...(source?.path ? { metadata: { path: source.path, [SOURCE_METADATA_MATCHED]: true } } : {}),
+    };
+    return [ref];
+  });
+}
+
+export function sourceMetadataEvent(payload: unknown): SourcesEvent | null {
+  if (!payload || typeof payload !== 'object' || Array.isArray(payload)) return null;
+  const metadata = payload as Record<string, unknown>;
+  const sources = normalizeSources(metadata.sources);
+  const refs = [...normalizeVideos(metadata.videos), ...normalizeCards(metadata.cards, sources)];
+  const refsByIdentity = new Map<string, ChatRef>();
+  refs.forEach(ref => {
+    const identity = `${ref.type}:${ref.id}`;
+    if (!refsByIdentity.has(identity)) refsByIdentity.set(identity, ref);
+  });
+  const uniqueRefs = Array.from(refsByIdentity.values());
+  if (sources.length === 0 && uniqueRefs.length === 0) return null;
+  return { type: 'sources', sources, ...(uniqueRefs.length > 0 ? { refs: uniqueRefs } : {}) };
+}

package/src/components/chat/__tests__/chat-message-list.test.tsx

@@ -146,6 +146,76 @@ describe('ChatMessageList force-scroll decisions', () => {
   });
 });
 
+describe('ChatMessageList message footers', () => {
+  const renderSourceFooter = (message: Message) =>
+    message.sources?.map(source => <span key={`${message.id}-${source.index}`}>{source.name}</span>);
+
+  it('keeps a sourced assistant footer after a later plain assistant message', () => {
+    const sourcedAssistant: Message = {
+      ...msg('a1', 'assistant'),
+      sources: [
+        {
+          index: 1,
+          name: 'Windows installation guide',
+          path: '/docs/windows',
+          documentType: 'openframe-docs',
+        },
+      ],
+    };
+    const plainAssistant = msg('a2', 'assistant');
+
+    render(
+      <ChatMessageList
+        dialogId="d1"
+        messages={[sourcedAssistant, plainAssistant]}
+        renderAfterMessage={renderSourceFooter}
+      />,
+    );
+
+    const sourceFooter = screen.getByText('Windows installation guide');
+    expect(sourceFooter).toBeInTheDocument();
+    expect(screen.getByText('body of a1')).toAppearBefore(sourceFooter);
+  });
+
+  it('renders separate source names when citation indices restart on each turn', () => {
+    const firstAssistant: Message = {
+      ...msg('a1', 'assistant'),
+      sources: [
+        {
+          index: 1,
+          name: 'First turn source',
+          path: '/docs/first',
+          documentType: 'openframe-docs',
+        },
+      ],
+    };
+    const secondAssistant: Message = {
+      ...msg('a2', 'assistant'),
+      sources: [
+        {
+          index: 1,
+          name: 'Second turn source',
+          path: '/docs/second',
+          documentType: 'openframe-docs',
+        },
+      ],
+    };
+
+    render(
+      <ChatMessageList
+        dialogId="d1"
+        messages={[firstAssistant, secondAssistant]}
+        renderAfterMessage={renderSourceFooter}
+      />,
+    );
+
+    const firstSourceFooter = screen.getByText('First turn source');
+    const secondSourceFooter = screen.getByText('Second turn source');
+    expect(screen.getByText('body of a1')).toAppearBefore(firstSourceFooter);
+    expect(screen.getByText('body of a2')).toAppearBefore(secondSourceFooter);
+  });
+});
+
 // The library's own `isAtBottom` lock is lost silently when the scroller's
 // box changes (source chips mounting below it) or when a card settling out
 // of its skeleton produces a resize-driven scroll the library reads as a

package/src/components/chat/__tests__/chat-message-streaming-memo.test.tsx

@@ -20,6 +20,7 @@
 import { render } from '@testing-library/react';
 import type React from 'react';
 import { describe, it, expect, vi } from 'vitest';
+import type { ChatRef } from '../chat-ref.types';
 import type { MessageSegment } from '../types';
 
 /** Every `componentOverrides` / `additionalRemarkPlugins` identity the
@@ -129,4 +130,89 @@ describe('ChatMessageEnhanced — override identity across a streamed turn', ()
     expect(seenRefs).toEqual([{ type: 'blog', id: 'abc' }]);
     expect(view.container.textContent).toContain('card:abc');
   });
+
+  it('enriches exact video markers with YouTube, hashed Mux, and hashed MP4 metadata', () => {
+    const seenRefs: Array<{ id: string; metadata?: Record<string, unknown> }> = [];
+    const refs: ChatRef[] = [
+      {
+        type: 'video',
+        id: 'MdFJNoJeqZQ',
+        title: 'Install the agent',
+        url: 'https://www.youtube.com/watch?v=MdFJNoJeqZQ',
+        metadata: { youtubeUrl: 'MdFJNoJeqZQ' },
+      },
+      {
+        type: 'video',
+        id: 'mux-9b6586b494',
+        title: 'Community demo',
+        url: 'https://stream.mux.com/playback-id.m3u8',
+        metadata: { videoUrl: 'https://stream.mux.com/playback-id.m3u8' },
+      },
+      {
+        type: 'video',
+        id: 'mp4-1b2047dc1b',
+        title: 'Product overview',
+        url: 'https://cdn.example.test/product-overview.mp4',
+        metadata: { videoUrl: 'https://cdn.example.test/product-overview.mp4' },
+      },
+    ];
+
+    render(
+      <ChatMessageEnhanced
+        role="assistant"
+        content={[
+          {
+            type: 'text',
+            text: 'Watch [card://video:MdFJNoJeqZQ] [card://video:mux-9b6586b494] [card://video:mp4-1b2047dc1b].',
+          },
+        ]}
+        refs={refs}
+        renderEntityCard={ref => {
+          seenRefs.push({ id: ref.id, metadata: ref.metadata });
+          return <div data-testid={`card-${ref.id}`}>{ref.title}</div>;
+        }}
+        NavLinkAnchor={NavLinkAnchor}
+      />,
+    );
+
+    expect(seenRefs).toEqual([
+      { id: 'MdFJNoJeqZQ', metadata: { youtubeUrl: 'MdFJNoJeqZQ' } },
+      { id: 'mux-9b6586b494', metadata: { videoUrl: 'https://stream.mux.com/playback-id.m3u8' } },
+      { id: 'mp4-1b2047dc1b', metadata: { videoUrl: 'https://cdn.example.test/product-overview.mp4' } },
+    ]);
+  });
+
+  it('rerenders a completed marker when its enriched metadata arrives later', () => {
+    const seenMetadata: Array<Record<string, unknown> | undefined> = [];
+    const content: MessageSegment[] = [{ type: 'text', text: 'Watch [card://video:mux-9b6586b494].' }];
+    const props = {
+      role: 'assistant' as const,
+      content,
+      renderEntityCard: (ref: ChatRef) => {
+        seenMetadata.push(ref.metadata);
+        return <div>video</div>;
+      },
+      NavLinkAnchor,
+    };
+    const view = render(<ChatMessageEnhanced {...props} />);
+
+    view.rerender(
+      <ChatMessageEnhanced
+        {...props}
+        refs={[
+          {
+            type: 'video',
+            id: 'mux-9b6586b494',
+            title: 'Community demo',
+            url: 'https://stream.mux.com/playback-id.m3u8',
+            metadata: { videoUrl: 'https://stream.mux.com/playback-id.m3u8' },
+          },
+        ]}
+      />,
+    );
+
+    expect(seenMetadata[seenMetadata.length - 1]).toEqual({
+      videoUrl: 'https://stream.mux.com/playback-id.m3u8',
+    });
+  });
 });