feat(e2e): real media generation e2e tests

testing/e2e/fixtures/transcription/basic.json

@@ -1,9 +1,11 @@
 {
   "fixtures": [
     {
-      "match": { "userMessage": "[transcription] transcribe the audio clip" },
+      "match": { "userMessage": "audio.mpeg" },
       "response": {
-        "content": "Transcription result: I would like to buy a Fender Stratocaster please. The audio is clear with no background noise."
+        "transcription": {
+          "text": "I would like to buy a Fender Stratocaster please"
+        }
       }
     }
   ]

testing/e2e/fixtures/tts/basic.json

@@ -1,11 +1,9 @@
 {
   "fixtures": [
     {
-      "match": {
-        "userMessage": "[tts] generate speech for welcome to the guitar store"
-      },
+      "match": { "userMessage": "welcome to the guitar store" },
       "response": {
-        "content": "Audio generated successfully. The text 'Welcome to the guitar store' has been converted to speech using a warm, professional voice."
+        "audio": "SGVsbG8gd29ybGQ="
       }
     }
   ]

testing/e2e/fixtures/video-gen/basic.json

@@ -0,0 +1,13 @@
+{
+  "fixtures": [
+    {
+      "match": { "userMessage": "a guitar being played in a store" },
+      "response": {
+        "video": {
+          "url": "https://example.com/guitar-store.mp4",
+          "duration": 10
+        }
+      }
+    }
+  ]
+}

testing/e2e/global-setup.ts

@@ -6,18 +6,51 @@ import { fileURLToPath } from 'url'
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
+/**
+ * Directories to skip when loading JSON fixtures.
+ * - 'recorded' is for record-mode output
+ * - 'video-gen' uses programmatic registration (needs match.endpoint)
+ */
+const SKIP_FIXTURE_DIRS = new Set(['recorded', 'video-gen'])
+
 export default async function globalSetup() {
   const mock = new LLMock({ port: 4010, host: '127.0.0.1', logLevel: 'info' })
 
+  // Load all JSON fixture directories (except skipped ones)
   const fixturesDir = path.resolve(__dirname, 'fixtures')
   const entries = fs.readdirSync(fixturesDir, { withFileTypes: true })
   for (const entry of entries) {
-    if (entry.isDirectory() && entry.name !== 'recorded') {
+    if (entry.isDirectory() && !SKIP_FIXTURE_DIRS.has(entry.name)) {
       await mock.loadFixtureDir(path.join(fixturesDir, entry.name))
     }
   }
 
+  // Register media fixtures programmatically (require match.endpoint)
+  registerMediaFixtures(mock)
+
   await mock.start()
   console.log(`[aimock] started on port 4010`)
   ;(globalThis as any).__aimock = mock
 }
+
+function registerMediaFixtures(mock: LLMock) {
+  // Transcription: onTranscription sets match.endpoint = "transcription"
+  mock.onTranscription({
+    transcription: {
+      text: 'I would like to buy a Fender Stratocaster please',
+    },
+  })
+
+  // Video: onVideo sets match.endpoint = "video"
+  // id + status are required for the OpenAI SDK's videos API to work:
+  // - POST /v1/videos reads response.id for the job ID
+  // - GET /v1/videos/{id} reads response.status to determine completion
+  mock.onVideo('a guitar being played in a store', {
+    video: {
+      url: 'https://example.com/guitar-store.mp4',
+      duration: 10,
+      id: 'video-job-e2e',
+      status: 'completed',
+    },
+  })
+}

testing/e2e/src/components/ImageGenUI.tsx

@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import {
+  useGenerateImage,
+  fetchServerSentEvents,
+  fetchHttpStream,
+} from '@tanstack/ai-react'
+import { generateImageFn } from '@/lib/server-functions'
+import type { ImageGenerationResult } from '@tanstack/ai'
+import type { Mode, Provider } from '@/lib/types'
+
+interface ImageGenUIProps {
+  provider: Provider
+  mode: Mode
+  testId?: string
+  aimockPort?: number
+}
+
+export function ImageGenUI({
+  provider,
+  mode,
+  testId,
+  aimockPort,
+}: ImageGenUIProps) {
+  const [prompt, setPrompt] = useState('')
+
+  const connectionOptions = () => {
+    const body = { provider, numberOfImages: 1, testId, aimockPort }
+
+    if (mode === 'sse') {
+      return { connection: fetchServerSentEvents('/api/image'), body }
+    }
+    if (mode === 'http-stream') {
+      return { connection: fetchHttpStream('/api/image/stream'), body }
+    }
+    return {
+      fetcher: async (input: { prompt: string }) => {
+        return generateImageFn({
+          data: {
+            prompt: input.prompt,
+            provider,
+            numberOfImages: 1,
+            aimockPort,
+            testId,
+          },
+        }) as Promise<ImageGenerationResult>
+      },
+    }
+  }
+
+  const { generate, result, isLoading, error, status } =
+    useGenerateImage(connectionOptions())
+
+  return (
+    <div className="p-4 space-y-4">
+      <div className="flex gap-2">
+        <input
+          data-testid="prompt-input"
+          type="text"
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Describe the image..."
+          className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
+        />
+        <button
+          data-testid="generate-button"
+          onClick={() => generate({ prompt })}
+          disabled={!prompt.trim() || isLoading}
+          className="px-4 py-2 bg-orange-500 text-white rounded text-sm font-medium disabled:opacity-50"
+        >
+          Generate
+        </button>
+      </div>
+      <div data-testid="generation-status">
+        {status === 'idle'
+          ? 'idle'
+          : isLoading
+            ? 'loading'
+            : error
+              ? 'error'
+              : result
+                ? 'complete'
+                : 'idle'}
+      </div>
+      {error && (
+        <div data-testid="generation-error" className="text-red-400 text-sm">
+          {error.message}
+        </div>
+      )}
+      {result && (
+        <div className="grid grid-cols-2 gap-4">
+          {result.images.map((img, i) => (
+            <img
+              key={i}
+              data-testid="generated-image"
+              src={img.url || `data:image/png;base64,${img.b64Json}`}
+              alt={`Generated ${i + 1}`}
+              className="rounded border border-gray-700"
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

testing/e2e/src/components/TTSUI.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import {
+  useGenerateSpeech,
+  fetchServerSentEvents,
+  fetchHttpStream,
+} from '@tanstack/ai-react'
+import { generateSpeechFn } from '@/lib/server-functions'
+import type { TTSResult } from '@tanstack/ai'
+import type { Mode, Provider } from '@/lib/types'
+
+interface TTSUIProps {
+  provider: Provider
+  mode: Mode
+  testId?: string
+  aimockPort?: number
+}
+
+export function TTSUI({ provider, mode, testId, aimockPort }: TTSUIProps) {
+  const [text, setText] = useState('')
+
+  const connectionOptions = () => {
+    const body = { provider, testId, aimockPort }
+
+    if (mode === 'sse') {
+      return { connection: fetchServerSentEvents('/api/tts'), body }
+    }
+    if (mode === 'http-stream') {
+      return { connection: fetchHttpStream('/api/tts/stream'), body }
+    }
+    return {
+      fetcher: async (input: { text: string; voice?: string }) => {
+        return generateSpeechFn({
+          data: {
+            text: input.text,
+            voice: input.voice,
+            provider,
+            aimockPort,
+            testId,
+          },
+        }) as Promise<TTSResult>
+      },
+    }
+  }
+
+  const { generate, result, isLoading, error, status } =
+    useGenerateSpeech(connectionOptions())
+
+  return (
+    <div className="p-4 space-y-4">
+      <div className="flex gap-2">
+        <input
+          data-testid="text-input"
+          type="text"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Text to speak..."
+          className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
+        />
+        <button
+          data-testid="generate-button"
+          onClick={() => generate({ text })}
+          disabled={!text.trim() || isLoading}
+          className="px-4 py-2 bg-orange-500 text-white rounded text-sm font-medium disabled:opacity-50"
+        >
+          Generate
+        </button>
+      </div>
+      <div data-testid="generation-status">
+        {status === 'idle'
+          ? 'idle'
+          : isLoading
+            ? 'loading'
+            : error
+              ? 'error'
+              : result
+                ? 'complete'
+                : 'idle'}
+      </div>
+      {error && (
+        <div data-testid="generation-error" className="text-red-400 text-sm">
+          {error.message}
+        </div>
+      )}
+      {result && (
+        <audio
+          data-testid="generated-audio"
+          src={`data:audio/${result.format || 'mp3'};base64,${result.audio}`}
+          controls
+        />
+      )}
+    </div>
+  )
+}