feat: make media inspection progressive

tests/browser/application.spec.ts

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 import {
   observeRuntime,
+  PRIMARY_FIXTURE,
   startNestedStaticServer,
   type NestedStaticServer,
 } from './browser-helpers';
@@ -119,6 +120,38 @@ test.describe('static application and Toolbox shell', () => {
     await expect(inspectorDrawer).toBeHidden();
     await expect(inspector).toBeFocused();
   });
+
+  test('shows native preview metadata without loading the FFmpeg runtime', async ({
+    page,
+  }) => {
+    const runtime = observeRuntime(page);
+    await page.goto('/');
+
+    await page
+      .locator('input[type="file"][accept*="audio"]')
+      .first()
+      .setInputFiles(PRIMARY_FIXTURE);
+
+    await expect(page.locator('.quick-preview video')).toBeVisible();
+    const card = page
+      .locator('.media-card')
+      .filter({ hasText: 'pattern-av.mp4' });
+    await expect(card.locator('.phase--idle')).toContainText(
+      'Ready to play · Details on demand'
+    );
+    await expect(card).toContainText(/\d+:\d{2}\.\d{2}/u);
+    expect(
+      runtime.requests.some((url) => url.includes('/vendor/ffmpeg/'))
+    ).toBe(false);
+
+    await page.getByRole('tab', { name: 'Edit' }).click();
+    await expect(
+      page.getByRole('button', { name: 'Inspect & render timeline' })
+    ).toBeEnabled();
+    expect(
+      runtime.requests.some((url) => url.includes('/vendor/ffmpeg/'))
+    ).toBe(false);
+  });
 });
 
 test.describe('nested static deployment and Toolbox context', () => {