@flamingo-stack/openframe-frontend-core 0.0.583 → 0.0.584-1973.5420.1

package/package.json

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

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/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,187 @@
+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_-]+)\]$/;
+
+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): 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 [];
+    return [{ type, id, title: id, url: null }];
+  });
+}
+
+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)];
+  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-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',
+    });
+  });
 });

package/src/components/chat/__tests__/embeddable-chat-sources.test.tsx

@@ -0,0 +1,171 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { decodeNatsChunk } from '../../../chat-protocol/nats-decoder';
+import { type ChatRuntime, ChatRuntimeContext } from '../../../contexts/chat-runtime-context';
+import { EmbeddableChat } from '../embeddable-chat';
+import { createChatStreamReducer } from '../stream/chat-stream-reducer';
+import type { UnifiedChatMessage, UnifiedChatState } from '../types/unified-chat-state.types';
+
+vi.mock('@mux/mux-player-react', () => ({
+  default: ({ src }: { src?: string }) => <div data-testid="mux-player" data-src={src} />,
+}));
+
+const runtime: ChatRuntime = {
+  endpoints: {
+    chatStreamUrl: '/test/chat',
+    approvalToolUrl: '/test/approve',
+    commandsUrl: '/test/commands',
+    buildListUrl: () => null,
+    attachmentUploadUrl: '/test/upload',
+    attachmentViewUrlPrefix: '/test/view/',
+    identityUrl: '/test/identity',
+  },
+  navigation: { mode: 'host' },
+  source: 'openframe',
+};
+
+function stateFor(messages: UnifiedChatMessage[]): UnifiedChatState {
+  const noop = () => {};
+  const asyncNoop = async () => {};
+  return {
+    messages,
+    isLoading: false,
+    streamingPhase: 'idle',
+    sendMessage: asyncNoop,
+    stopMessage: noop,
+    clearMessages: noop,
+    discussRef: noop,
+    displayRef: noop,
+    currentProvider: null,
+    currentModelLabel: null,
+    currentContextWindowMaxTokens: null,
+    currentInputTokens: null,
+    currentOutputTokens: null,
+    currentCacheHitRatePct: null,
+    currentUsageBreakdown: null,
+    dialogs: [{ id: 'dialog-1', title: 'Sources' }],
+    activeDialogId: 'dialog-1',
+    selectDialog: noop,
+    startNewDialog: () => Promise.resolve(null),
+    deleteDialog: asyncNoop,
+    renameDialog: asyncNoop,
+    archiveDialog: asyncNoop,
+    isDialogsLoading: false,
+    dialogsError: false,
+    reloadDialogs: noop,
+    isMessagesLoading: false,
+    hasMoreDialogs: false,
+    loadMoreDialogs: asyncNoop,
+    hasMoreMessages: false,
+    loadMoreMessages: asyncNoop,
+    approveRequest: asyncNoop,
+    rejectRequest: asyncNoop,
+    dialogTokenUsage: null,
+    connectionState: 'connected',
+  };
+}
+
+function renderChat(messages: UnifiedChatMessage[]) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ChatRuntimeContext.Provider value={runtime}>
+        <DialogPrimitive.Root open>
+          <EmbeddableChat
+            shell="none"
+            defaultOpen
+            defaultActiveMode="mingo"
+            showInternalTrigger={false}
+            previewMode
+            mingoState={stateFor(messages)}
+          />
+        </DialogPrimitive.Root>
+      </ChatRuntimeContext.Provider>
+    </QueryClientProvider>,
+  );
+}
+
+beforeAll(() => {
+  vi.stubGlobal('matchMedia', () => ({
+    matches: false,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }));
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe(): void {}
+      disconnect(): void {}
+      unobserve(): void {}
+    },
+  );
+  vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+    new Response(JSON.stringify({ commands: [] }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    }),
+  );
+});
+
+afterAll(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+describe('EmbeddableChat source strip', () => {
+  it('renders live SOURCES metadata in citation order with uncited overflow', () => {
+    const reducer = createChatStreamReducer({ transport: 'nats' });
+    for (const chunk of [
+      { type: 'MESSAGE_START', streamSeq: 1 },
+      {
+        type: 'SOURCES',
+        payload: {
+          sources: [
+            { index: 1, name: 'First source', path: 'first', documentType: 'docs' },
+            { index: 2, name: 'Second source', path: 'second', documentType: 'docs' },
+            { index: 3, name: 'Third source', path: 'third', documentType: 'docs' },
+            { index: 4, name: 'Fourth source', path: 'fourth', documentType: 'docs' },
+          ],
+          videos: [
+            {
+              ref: '[card://video:mux-9b6586b494]',
+              title: 'Product overview',
+              url: 'https://stream.mux.com/product-overview.m3u8',
+            },
+          ],
+        },
+        streamSeq: 2,
+      },
+      {
+        type: 'TEXT',
+        text:
+          'Compare the third source [3] with the first [1] and cite [3] once. ' +
+          'Watch [card://video:mux-9b6586b494].',
+        streamSeq: 3,
+      },
+      { type: 'MESSAGE_END', streamSeq: 4 },
+    ]) {
+      const event = decodeNatsChunk(chunk);
+      if (event) reducer.apply(event);
+    }
+
+    renderChat(reducer.state.messages);
+
+    const chips = screen.getAllByTitle(/source$/i);
+    expect(chips.map(chip => chip.textContent)).toEqual(['[3] Third source', '[1] First source']);
+    expect(screen.queryByText('[2] Second source')).not.toBeInTheDocument();
+    const expander = screen.getByRole('button', { name: 'Show 2 additional retrieved sources' });
+    expect(expander).toHaveTextContent('+2 more retrieved sources');
+
+    fireEvent.click(expander);
+
+    expect(screen.getByText('[2] Second source')).toBeInTheDocument();
+    expect(screen.getByText('[4] Fourth source')).toBeInTheDocument();
+    expect(screen.getByTestId('mux-player')).toHaveAttribute(
+      'data-src',
+      'https://stream.mux.com/product-overview.m3u8',
+    );
+  });
+});