vibes

screenshot/src/cache.ts

@@ -60,7 +60,7 @@ export class ScreenshotCache {
   }
 
   getPath(key: string): string {
-    return join(this.dir, `${key}.png`);
+    return join(this.dir, `${key}.jpg`);
   }
 
   /**

screenshot/src/network-cache.ts

@@ -0,0 +1,58 @@
+interface CacheEntry {
+  body: Buffer;
+  headers: Record<string, string>;
+  status: number;
+}
+
+const MAX_ENTRIES = 2000;
+
+/**
+ * In-memory cache for network responses (tiles, JS/CSS bundles, font glyphs).
+ *
+ * This is the single biggest performance win for non-GPU environments:
+ * cached tiles and assets are served in microseconds instead of making
+ * HTTP roundtrips, saving 1-3+ seconds per screenshot after warm-up.
+ */
+export class NetworkCache {
+  private cache = new Map<string, CacheEntry>();
+  hits = 0;
+  misses = 0;
+
+  shouldCache(url: string): boolean {
+    // Vector map tiles (protobuf)
+    if (url.includes('/api/tiles/')) return true;
+    // Static assets by extension
+    if (/\.(js|css|woff2?|ttf|png|jpe?g|svg|ico|pbf|json)(\?|$)/i.test(url)) return true;
+    // Font glyphs and emoji sprites under /assets/
+    if (url.includes('/assets/')) return true;
+    return false;
+  }
+
+  get(url: string): CacheEntry | undefined {
+    const entry = this.cache.get(url);
+    if (entry) {
+      this.hits++;
+      return entry;
+    }
+    this.misses++;
+    return undefined;
+  }
+
+  set(url: string, entry: CacheEntry): void {
+    if (this.cache.size >= MAX_ENTRIES) {
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey) this.cache.delete(firstKey);
+    }
+    this.cache.set(url, entry);
+  }
+
+  get size(): number {
+    return this.cache.size;
+  }
+
+  stats(): string {
+    const total = this.hits + this.misses;
+    const rate = total > 0 ? ((this.hits / total) * 100).toFixed(0) : '0';
+    return `${this.size} entries, ${rate}% hit rate (${this.hits}/${total})`;
+  }
+}

screenshot/src/screenshot.ts

@@ -1,25 +1,23 @@
-import { chromium, type Browser, type Page } from 'playwright';
+import { chromium, type Browser, type BrowserContext, type Page, type Route } from 'playwright';
 import { existsSync, readdirSync } from 'fs';
+import { NetworkCache } from './network-cache.js';
 
 const VIEWPORT = { width: 1200, height: 630 };
 const NAVIGATION_TIMEOUT = 15_000;
-const TILE_BUFFER_MS = 500;
+const READY_TIMEOUT = 15_000;
+const RENDER_BUFFER_MS = 200;
 const POOL_SIZE = 3;
 
 let browser: Browser | null = null;
+let sharedContext: BrowserContext | null = null;
 const pagePool: Page[] = [];
 let warmingUp = false;
+const networkCache = new NetworkCache();
 
-/**
- * Detect if a GPU is available for hardware-accelerated rendering.
- * Checks for DRI devices on Linux which indicate GPU + driver availability.
- */
 function detectGpu(): boolean {
   try {
-    // Check for DRI render nodes (Linux)
     if (existsSync('/dev/dri')) {
       const devices = readdirSync('/dev/dri');
-      // Look for renderD* (render nodes) or card* (display cards)
       const hasGpu = devices.some((d) => d.startsWith('renderD') || d.startsWith('card'));
       if (hasGpu) {
         console.log(`GPU detected: /dev/dri contains ${devices.join(', ')}`);
@@ -27,7 +25,7 @@ function detectGpu(): boolean {
       }
     }
   } catch {
-    // Ignore errors - fall back to software rendering
+    // Fall through to software rendering
   }
   console.log('No GPU detected, using SwiftShader software rendering');
   return false;
@@ -41,14 +39,31 @@ function getBrowserArgs(): string[] {
     '--disable-dev-shm-usage',
     '--enable-webgl',
     '--ignore-gpu-blocklist',
+    // Prevent timer/renderer throttling in headless mode
+    '--disable-background-timer-throttling',
+    '--disable-backgrounding-occluded-windows',
+    '--disable-renderer-backgrounding',
+    // Ensure compositor finishes all stages before screenshot capture
+    '--run-all-compositor-stages-before-draw',
+    // Skip color profile conversion overhead
+    '--force-color-profile=srgb',
+    // Reduce non-essential browser features
+    '--disable-domain-reliability',
+    '--disable-features=TranslateUI',
   ];
 
   if (hasGpu) {
-    // Use hardware GPU acceleration
     return [...baseArgs, '--enable-gpu', '--use-gl=egl'];
   } else {
-    // Fall back to SwiftShader software rendering
-    return [...baseArgs, '--disable-gpu', '--use-gl=swiftshader'];
+    return [
+      ...baseArgs,
+      '--disable-gpu',
+      '--use-gl=swiftshader',
+      // Run the GPU (SwiftShader) work in the browser process to eliminate
+      // IPC overhead between browser and GPU processes — significant win
+      // when all GL calls are CPU-bound anyway
+      '--in-process-gpu',
+    ];
   }
 }
 
@@ -61,22 +76,71 @@ async function ensureBrowser(): Promise<Browser> {
   return browser;
 }
 
-async function createPage(): Promise<Page> {
+async function ensureContext(): Promise<BrowserContext> {
+  if (sharedContext) return sharedContext;
+
   const instance = await ensureBrowser();
-  const context = await instance.newContext({
+  sharedContext = await instance.newContext({
     viewport: VIEWPORT,
     deviceScaleFactor: 1,
   });
+
+  // Set up response caching at context level — all pages share the cache.
+  // This means tiles fetched during pre-warm or a previous screenshot are
+  // served instantly for subsequent screenshots.
+  await sharedContext.route('**/*', async (route: Route) => {
+    const url = route.request().url();
+
+    // Non-cacheable requests (API data, etc.) pass through directly
+    if (!networkCache.shouldCache(url)) {
+      await route.continue();
+      return;
+    }
+
+    // Cache hit — fulfill from memory, zero network
+    const cached = networkCache.get(url);
+    if (cached) {
+      await route.fulfill({
+        status: cached.status,
+        headers: cached.headers,
+        body: cached.body,
+      });
+      return;
+    }
+
+    // Cache miss — fetch, cache, fulfill
+    try {
+      const response = await route.fetch();
+      const body = await response.body();
+      const entry = {
+        body,
+        headers: response.headers(),
+        status: response.status(),
+      };
+      networkCache.set(url, entry);
+      await route.fulfill({
+        status: entry.status,
+        headers: entry.headers,
+        body: entry.body,
+      });
+    } catch {
+      await route.continue().catch(() => {});
+    }
+  });
+
+  return sharedContext;
+}
+
+async function createPage(): Promise<Page> {
+  const context = await ensureContext();
   return context.newPage();
 }
 
 async function warmPool(): Promise<void> {
   if (warmingUp) return;
   warmingUp = true;
-
   try {
-    const instance = await ensureBrowser();
-    while (pagePool.length < POOL_SIZE && instance.isConnected()) {
+    while (pagePool.length < POOL_SIZE) {
       const page = await createPage();
       pagePool.push(page);
     }
@@ -86,17 +150,12 @@ async function warmPool(): Promise<void> {
 }
 
 async function acquirePage(): Promise<Page> {
-  // Try to get a page from the pool
   const page = pagePool.shift();
   if (page && !page.isClosed()) {
-    // Refill pool in background
     warmPool().catch(() => {});
     return page;
   }
-
-  // No pooled page available, create one
   const newPage = await createPage();
-  // Start warming pool in background
   warmPool().catch(() => {});
   return newPage;
 }
@@ -104,62 +163,88 @@ async function acquirePage(): Promise<Page> {
 async function releasePage(page: Page): Promise<void> {
   try {
     if (page.isClosed()) return;
-
-    // Reset page state for reuse
+    // Navigate to blank to free rendered page resources (DOM, WebGL context)
+    // while keeping the page object alive for V8 code cache reuse
     await page.goto('about:blank', { timeout: 5000 }).catch(() => {});
-
     if (!page.isClosed() && pagePool.length < POOL_SIZE) {
       pagePool.push(page);
     } else {
-      await page.context().close().catch(() => {});
+      await page.close().catch(() => {});
     }
   } catch {
-    await page.context().close().catch(() => {});
+    await page.close().catch(() => {});
   }
 }
 
+/**
+ * Pre-warm the browser and populate the network cache by loading the app once.
+ * Subsequent screenshots benefit from cached JS/CSS bundles, map tiles,
+ * and V8 compiled bytecode — eliminating cold-start latency.
+ */
+export async function initialize(appUrl: string): Promise<void> {
+  console.log('Pre-warming browser and caches...');
+  const page = await createPage();
+  try {
+    await page.goto(`${appUrl}/?screenshot=1`, {
+      waitUntil: 'load',
+      timeout: 30_000,
+    });
+    // Wait for the app to fully load and cache all resources
+    try {
+      await page.waitForFunction('window.__screenshot_ready === true', {
+        timeout: READY_TIMEOUT,
+      });
+    } catch {
+      // Non-fatal — cache will still have JS/CSS/tiles from the partial load
+    }
+    console.log(`Pre-warm complete. Cache: ${networkCache.stats()}`);
+  } catch (err) {
+    console.warn('Pre-warm failed (non-fatal):', err);
+  } finally {
+    await page.close().catch(() => {});
+  }
+  await warmPool();
+}
+
 export async function takeScreenshot(url: string): Promise<Buffer> {
   const page = await acquirePage();
-
-  // Log browser console messages for diagnostics
-  page.on('console', (msg) => {
-    if (msg.type() === 'error' || msg.type() === 'warning') {
-      console.log(`[browser ${msg.type()}] ${msg.text()}`);
-    }
-  });
-  page.on('pageerror', (err) => {
-    console.log(`[browser exception] ${err.message}`);
-  });
+  const t0 = performance.now();
 
   try {
-    // Use domcontentloaded instead of networkidle - let __screenshot_ready handle readiness
     const response = await page.goto(url, {
       waitUntil: 'domcontentloaded',
       timeout: NAVIGATION_TIMEOUT,
     });
+    const t1 = performance.now();
     if (response) {
-      console.log(`Page loaded: ${response.status()} ${response.statusText()}`);
+      console.log(`  Navigate: ${(t1 - t0).toFixed(0)}ms (status ${response.status()})`);
     }
 
-    // Wait for the frontend to signal readiness
+    // Wait for the frontend to signal that data is loaded and layers created
     try {
       await page.waitForFunction('window.__screenshot_ready === true', {
-        timeout: NAVIGATION_TIMEOUT,
+        timeout: READY_TIMEOUT,
       });
-      console.log('Frontend signalled ready');
     } catch {
-      console.warn('Timed out waiting for __screenshot_ready, proceeding with partial screenshot');
+      console.warn('  Timed out waiting for __screenshot_ready');
     }
+    const t2 = performance.now();
+    console.log(`  Ready: ${(t2 - t1).toFixed(0)}ms`);
 
-    // Extra buffer for map tiles to finish rendering
-    await page.waitForTimeout(TILE_BUFFER_MS);
+    // Brief buffer for SwiftShader to finish rendering the WebGL frame.
+    // Reduced from 500ms → 200ms since tiles now load from the in-memory
+    // cache and don't need network round-trips.
+    await page.waitForTimeout(RENDER_BUFFER_MS);
+
+    // JPEG at quality 85: ~3-5x faster encoding than PNG with negligible
+    // visual difference for screenshot content (map + text overlay)
+    const screenshot = await page.screenshot({ type: 'jpeg', quality: 85 });
+    const t3 = performance.now();
+    console.log(`  Capture: ${(t3 - t2).toFixed(0)}ms | Total: ${(t3 - t0).toFixed(0)}ms`);
+    console.log(`  Cache: ${networkCache.stats()}`);
 
-    const screenshot = await page.screenshot({ type: 'png' });
     return Buffer.from(screenshot);
   } finally {
-    // Remove listeners before releasing page back to pool
-    page.removeAllListeners('console');
-    page.removeAllListeners('pageerror');
     await releasePage(page);
   }
 }
@@ -182,24 +267,25 @@ export async function checkWebGL(): Promise<Record<string, unknown>> {
         vendor: debugExt ? g.getParameter(debugExt.UNMASKED_VENDOR_WEBGL) : 'unknown',
       };
     });
-    return info;
+    return { ...info, cache: networkCache.stats() };
   } finally {
     await releasePage(page);
   }
 }
 
 export async function closeBrowser(): Promise<void> {
-  // Close all pooled pages
   for (const page of pagePool) {
-    await page.context().close().catch(() => {});
+    await page.close().catch(() => {});
   }
   pagePool.length = 0;
 
+  if (sharedContext) {
+    await sharedContext.close().catch(() => {});
+    sharedContext = null;
+  }
+
   if (browser) {
     await browser.close().catch(() => {});
     browser = null;
   }
 }
-
-// Pre-warm the pool on module load
-warmPool().catch(() => {});

screenshot/src/server.ts

@@ -1,6 +1,6 @@
 import express from 'express';
 import { ScreenshotCache } from './cache.js';
-import { takeScreenshot, checkWebGL, closeBrowser } from './screenshot.js';
+import { takeScreenshot, checkWebGL, closeBrowser, initialize } from './screenshot.js';
 
 const PORT = parseInt(process.env.PORT || '8002', 10);
 const APP_URL = process.env.APP_URL;
@@ -63,7 +63,7 @@ app.get('/screenshot', async (req, res) => {
     // Check cache first
     const cached = cache.get(cacheKey);
     if (cached) {
-      res.setHeader('Content-Type', 'image/png');
+      res.setHeader('Content-Type', 'image/jpeg');
       res.setHeader('Cache-Control', 'public, max-age=86400');
       res.setHeader('X-Cache', 'HIT');
       cached.pipe(res);
@@ -75,15 +75,15 @@ app.get('/screenshot', async (req, res) => {
     const url = `${APP_URL}${pagePath}?${qs}`;
 
     console.log(`Taking screenshot: ${url}`);
-    const png = await takeScreenshot(url);
+    const jpeg = await takeScreenshot(url);
 
     // Cache it
-    cache.set(cacheKey, png);
+    cache.set(cacheKey, jpeg);
 
-    res.setHeader('Content-Type', 'image/png');
+    res.setHeader('Content-Type', 'image/jpeg');
     res.setHeader('Cache-Control', 'public, max-age=86400');
     res.setHeader('X-Cache', 'MISS');
-    res.send(png);
+    res.send(jpeg);
   } catch (err) {
     console.error('Screenshot failed:', err);
     res.status(500).json({ error: 'Screenshot failed' });
@@ -94,6 +94,13 @@ const server = app.listen(PORT, () => {
   console.log(`Screenshot service listening on port ${PORT}`);
   console.log(`  APP_URL: ${APP_URL}`);
   console.log(`  CACHE_DIR: ${CACHE_DIR}`);
+
+  // Pre-warm browser and populate network cache in background.
+  // The health endpoint is available immediately; screenshot requests
+  // during warm-up will still work (just slower on the first call).
+  initialize(APP_URL).catch((err) => {
+    console.error('Initialization failed:', err);
+  });
 });
 
 // Graceful shutdown