test: add LLM integration test for full pipeline

Real end-to-end test: diff → Anthropic analysis + script generation →
Playwright recording → FFmpeg GIF conversion. No mocking — all layers
are real. Skips gracefully when ANTHROPIC_API_KEY is not set.

- Add virtual-tryon-diff.ts fixture with JSX diff matching test server HTML
- Add llm-pipeline.test.ts with structural assertions on pipeline result
- Add vitest.llm.config.ts (separate config, explicit .env loading)
- Exclude llm-* from test:integration to keep it fast and free
- Add test:llm script to package.json

Result: 1 test, passes in ~27s, produces a 190KB GIF

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: DeDuckProject

package.json

@@ -12,6 +12,7 @@
     "build": "pnpm -r build",
     "test": "vitest run",
     "test:integration": "vitest run --config vitest.integration.config.ts",
+    "test:llm": "vitest run --config vitest.llm.config.ts",
     "test:all": "vitest run && vitest run --config vitest.integration.config.ts",
     "typecheck": "pnpm -r typecheck",
     "lint": "pnpm -r lint"

tests/integration/fixtures/virtual-tryon-diff.ts

@@ -0,0 +1,47 @@
+/**
+ * Fixture diff describing the addition of a "Virtual Try-On" button and modal
+ * to a product page. The element IDs and text match the test server HTML exactly,
+ * so LLM-generated Playwright scripts will find them.
+ */
+export const VIRTUAL_TRYON_DIFF = `diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
+index a1b2c3d..e4f5a6b 100644
+--- a/src/app/products/page.tsx
++++ b/src/app/products/page.tsx
+@@ -8,10 +8,32 @@ export default function ProductPage() {
+   return (
+     <div>
+       <h1>Wireless Headphones</h1>
+       <p>Premium noise-cancelling headphones with 30-hour battery life.</p>
+       <p id="counter">0</p>
+       <button id="add-to-cart" onClick={handleAddToCart}>
+         Add to Cart
+       </button>
++      <button
++        id="try-on-btn"
++        onClick={() => setShowTryOn(true)}
++        style={{ marginLeft: '0.5rem', background: '#10b981', color: 'white', border: 'none', padding: '0.75rem 1.5rem', borderRadius: '6px', cursor: 'pointer' }}
++      >
++        Virtual Try-On
++      </button>
++
++      {showTryOn && (
++        <div className="modal open" id="modal">
++          <div className="modal-content">
++            <button
++              className="close-btn"
++              id="close-modal"
++              aria-label="Close"
++              onClick={() => setShowTryOn(false)}
++            >
++              &times;
++            </button>
++            <h2>Virtual Try-On</h2>
++            <p>See how these headphones look on you using your camera.</p>
++            <button id="start-tryon">Start Try-On</button>
++          </div>
++        </div>
++      )}
+     </div>
+   );
+ }
+`;

tests/integration/llm-pipeline.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { existsSync, rmSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { startTestServer, type TestServer } from './fixtures/server.js';
+import { runPipeline } from '../../packages/core/src/pipeline.js';
+import { VIRTUAL_TRYON_DIFF } from './fixtures/virtual-tryon-diff.js';
+import type { GitGlimpseConfig } from '../../packages/core/src/config/schema.js';
+
+const HAS_API_KEY = !!process.env['ANTHROPIC_API_KEY'];
+
+let server: TestServer;
+let outputDir: string;
+
+beforeAll(async () => {
+  server = await startTestServer();
+  outputDir = join(tmpdir(), `git-glimpse-llm-test-${Date.now()}`);
+}, 15000);
+
+afterAll(async () => {
+  if (server) await server.close();
+  if (existsSync(outputDir)) {
+    rmSync(outputDir, { recursive: true, force: true });
+  }
+});
+
+const config: GitGlimpseConfig = {
+  app: {},
+  // Map the diff's file path to / so the LLM navigates to the test server root
+  routeMap: {
+    'src/app/products/page.tsx': '/',
+  },
+  recording: {
+    viewport: { width: 1280, height: 720 },
+    format: 'gif',
+    maxDuration: 30,
+    deviceScaleFactor: 1,
+  },
+  llm: {
+    provider: 'anthropic',
+    model: 'claude-sonnet-4-6',
+  },
+};
+
+describe.skipIf(!HAS_API_KEY)('LLM pipeline (real Anthropic + Playwright + FFmpeg)', () => {
+  it('generates a working demo GIF from a fixture diff', async () => {
+    const result = await runPipeline({
+      diff: VIRTUAL_TRYON_DIFF,
+      baseUrl: server.url,
+      outputDir,
+      config,
+    });
+
+    // LLM produced a meaningful analysis
+    expect(result.analysis.changeDescription).toBeTruthy();
+    expect(result.analysis.suggestedDemoFlow).toBeTruthy();
+    expect(result.analysis.changedFiles).toContain('src/app/products/page.tsx');
+
+    // LLM produced a structurally valid script
+    expect(result.script).toContain('export async function demo');
+    expect(result.script).toContain('page');
+
+    // Attempt count is within retry budget
+    expect(result.attempts).toBeGreaterThanOrEqual(1);
+    expect(result.attempts).toBeLessThanOrEqual(3);
+
+    if (!result.success) {
+      // Surface LLM/Playwright errors to make failures easy to diagnose
+      console.error('Pipeline errors:', result.errors);
+      console.error('Generated script:\n', result.script);
+    }
+
+    // Full pipeline succeeded — GIF was recorded
+    expect(result.success).toBe(true);
+    expect(result.recording).toBeDefined();
+    expect(result.recording!.path).toMatch(/\.gif$/);
+    expect(existsSync(result.recording!.path)).toBe(true);
+    expect(result.recording!.sizeMB).toBeGreaterThan(0);
+    expect(result.recording!.sizeMB).toBeLessThan(10);
+    expect(result.recording!.duration).toBeGreaterThan(0);
+    expect(result.recording!.duration).toBeLessThan(30);
+  }, 120000);
+});

vitest.integration.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     include: ['tests/integration/**/*.test.ts'],
+    exclude: ['tests/integration/llm-*.test.ts', '**/node_modules/**'],
     globals: true,
     testTimeout: 60000,
     hookTimeout: 30000,

vitest.llm.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+import { readFileSync, existsSync } from 'node:fs';
+
+function loadDotenv(): Record<string, string> {
+  const env: Record<string, string> = {};
+  if (!existsSync('.env')) return env;
+  for (const line of readFileSync('.env', 'utf-8').split('\n')) {
+    const match = line.match(/^([^#\s][^=]*)=(.*)$/);
+    if (match) env[match[1].trim()] = match[2].trim();
+  }
+  return env;
+}
+
+export default defineConfig({
+  test: {
+    include: ['tests/integration/llm-*.test.ts'],
+    globals: true,
+    testTimeout: 120000,
+    hookTimeout: 30000,
+    pool: 'forks',
+    poolOptions: { forks: { singleFork: true } },
+    env: loadDotenv(),
+  },
+});