autokap 1.0.7 → 1.0.8

package/dist/benchmark.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Capture Agent — Benchmark Harness
+ *
+ * Runs the same preset repeatedly, comparing:
+ * - Total LLM cost
+ * - Total wall-clock time
+ * - Success rate
+ * - Recovery rate (how often healing was needed)
+ *
+ * Useful for tracking determinism, recovery rate, and runtime cost over time.
+ */
+import type { ExecutionProgram, RunResult } from './execution-types.js';
+export interface BenchmarkPreset {
+    name: string;
+    presetId: string;
+    program: ExecutionProgram;
+    /** Expected behavior description for manual verification */
+    expectedBehavior: string;
+    /** Difficulty tier */
+    tier: 'simple' | 'multi_step' | 'auth_required' | 'clip' | 'video';
+}
+export interface BenchmarkRunResult {
+    presetName: string;
+    tier: string;
+    success: boolean;
+    totalDurationMs: number;
+    llmCostEur: number;
+    llmCallCount: number;
+    totalOpcodes: number;
+    recoveredOpcodes: number;
+    failedOpcodes: number;
+    healerInvocations: number;
+    circuitBreakerTrips: number;
+    variantCount: number;
+    successfulVariants: number;
+    error?: string;
+}
+export interface BenchmarkSummary {
+    totalPresets: number;
+    successCount: number;
+    failCount: number;
+    successRate: number;
+    averageDurationMs: number;
+    averageLlmCostEur: number;
+    totalLlmCostEur: number;
+    deterministicRate: number;
+    recoveryRate: number;
+    results: BenchmarkRunResult[];
+    byTier: Record<string, {
+        total: number;
+        success: number;
+        rate: number;
+    }>;
+}
+export type RunFn = (program: ExecutionProgram) => Promise<RunResult>;
+export declare function runBenchmark(presets: BenchmarkPreset[], runCapture: RunFn, options?: {
+    runs?: number;
+}): Promise<BenchmarkSummary>;
+export declare function formatBenchmarkSummary(summary: BenchmarkSummary): string;

package/dist/benchmark.js

@@ -0,0 +1,135 @@
+/**
+ * Capture Agent — Benchmark Harness
+ *
+ * Runs the same preset repeatedly, comparing:
+ * - Total LLM cost
+ * - Total wall-clock time
+ * - Success rate
+ * - Recovery rate (how often healing was needed)
+ *
+ * Useful for tracking determinism, recovery rate, and runtime cost over time.
+ */
+import { logger } from './logger.js';
+export async function runBenchmark(presets, runCapture, options) {
+    const runsPerPreset = options?.runs ?? 1;
+    const results = [];
+    for (const preset of presets) {
+        logger.info(`[Benchmark] Running "${preset.name}" (${preset.tier}) — ${runsPerPreset} run(s)`);
+        for (let run = 0; run < runsPerPreset; run++) {
+            try {
+                const runResult = await runCapture(preset.program);
+                results.push({
+                    presetName: preset.name,
+                    tier: preset.tier,
+                    success: runResult.success,
+                    totalDurationMs: runResult.totalDurationMs,
+                    llmCostEur: runResult.telemetry.llmCostEur,
+                    llmCallCount: runResult.telemetry.llmCallCount,
+                    totalOpcodes: runResult.telemetry.totalOpcodes,
+                    recoveredOpcodes: runResult.telemetry.recoveredOpcodes,
+                    failedOpcodes: runResult.telemetry.failedOpcodes,
+                    healerInvocations: runResult.telemetry.healerInvocations,
+                    circuitBreakerTrips: runResult.telemetry.circuitBreakerTrips,
+                    variantCount: runResult.variantResults.length,
+                    successfulVariants: runResult.variantResults.filter(v => v.success).length,
+                    error: runResult.error,
+                });
+            }
+            catch (err) {
+                results.push({
+                    presetName: preset.name,
+                    tier: preset.tier,
+                    success: false,
+                    totalDurationMs: 0,
+                    llmCostEur: 0,
+                    llmCallCount: 0,
+                    totalOpcodes: 0,
+                    recoveredOpcodes: 0,
+                    failedOpcodes: 0,
+                    healerInvocations: 0,
+                    circuitBreakerTrips: 0,
+                    variantCount: 0,
+                    successfulVariants: 0,
+                    error: err instanceof Error ? err.message : String(err),
+                });
+            }
+        }
+    }
+    return computeSummary(results);
+}
+// ── Summary computation ─────────────────────────────────────────────
+function computeSummary(results) {
+    const total = results.length;
+    const successCount = results.filter(r => r.success).length;
+    const failCount = total - successCount;
+    const totalDuration = results.reduce((sum, r) => sum + r.totalDurationMs, 0);
+    const totalLlmCost = results.reduce((sum, r) => sum + r.llmCostEur, 0);
+    const totalOpcodes = results.reduce((sum, r) => sum + r.totalOpcodes, 0);
+    const totalRecovered = results.reduce((sum, r) => sum + r.recoveredOpcodes, 0);
+    const deterministicRuns = results.filter(r => r.llmCallCount === 0 && r.success).length;
+    // By tier
+    const byTier = {};
+    for (const result of results) {
+        if (!byTier[result.tier])
+            byTier[result.tier] = { total: 0, success: 0, rate: 0 };
+        byTier[result.tier].total++;
+        if (result.success)
+            byTier[result.tier].success++;
+    }
+    for (const tier of Object.values(byTier)) {
+        tier.rate = tier.total > 0 ? tier.success / tier.total : 0;
+    }
+    return {
+        totalPresets: total,
+        successCount,
+        failCount,
+        successRate: total > 0 ? successCount / total : 0,
+        averageDurationMs: total > 0 ? totalDuration / total : 0,
+        averageLlmCostEur: total > 0 ? totalLlmCost / total : 0,
+        totalLlmCostEur: totalLlmCost,
+        deterministicRate: total > 0 ? deterministicRuns / total : 0,
+        recoveryRate: totalOpcodes > 0 ? totalRecovered / totalOpcodes : 0,
+        results,
+        byTier,
+    };
+}
+// ── Pretty printer ──────────────────────────────────────────────────
+export function formatBenchmarkSummary(summary) {
+    const lines = [];
+    lines.push('═══════════════════════════════════════════════════');
+    lines.push('  Capture Benchmark Summary');
+    lines.push('═══════════════════════════════════════════════════');
+    lines.push(`  Total presets:       ${summary.totalPresets}`);
+    lines.push(`  Success:             ${summary.successCount}/${summary.totalPresets} (${(summary.successRate * 100).toFixed(1)}%)`);
+    lines.push(`  Deterministic rate:  ${(summary.deterministicRate * 100).toFixed(1)}% (no LLM needed)`);
+    lines.push(`  Recovery rate:       ${(summary.recoveryRate * 100).toFixed(1)}% of opcodes`);
+    lines.push(`  Avg duration:        ${(summary.averageDurationMs / 1000).toFixed(1)}s`);
+    lines.push(`  Avg LLM cost:        ${summary.averageLlmCostEur.toFixed(4)} EUR`);
+    lines.push(`  Total LLM cost:      ${summary.totalLlmCostEur.toFixed(4)} EUR`);
+    lines.push('───────────────────────────────────────────────────');
+    for (const [tier, stats] of Object.entries(summary.byTier)) {
+        lines.push(`  ${tier.padEnd(18)} ${stats.success}/${stats.total} (${(stats.rate * 100).toFixed(0)}%)`);
+    }
+    lines.push('───────────────────────────────────────────────────');
+    for (const result of summary.results) {
+        const status = result.success ? 'OK' : 'FAIL';
+        const duration = `${(result.totalDurationMs / 1000).toFixed(1)}s`;
+        const cost = result.llmCostEur > 0 ? `${result.llmCostEur.toFixed(4)}EUR` : 'free';
+        lines.push(`  [${status}] ${result.presetName.padEnd(30)} ${duration.padStart(6)} ${cost.padStart(10)}${result.error ? ` — ${result.error.slice(0, 50)}` : ''}`);
+    }
+    lines.push('═══════════════════════════════════════════════════');
+    // Health check
+    const simpleStats = summary.byTier['simple'];
+    const multiStats = summary.byTier['multi_step'];
+    const simpleOk = !simpleStats || simpleStats.rate >= 0.95;
+    const multiOk = !multiStats || multiStats.rate >= 0.80;
+    const costOk = summary.averageLlmCostEur < 0.05;
+    lines.push('');
+    lines.push('  Health Checklist:');
+    lines.push(`  ${simpleOk ? '[x]' : '[ ]'} Simple scenarios > 95% (${simpleStats ? (simpleStats.rate * 100).toFixed(0) : 'N/A'}%)`);
+    lines.push(`  ${multiOk ? '[x]' : '[ ]'} Multi-step > 80% (${multiStats ? (multiStats.rate * 100).toFixed(0) : 'N/A'}%)`);
+    lines.push(`  ${costOk ? '[x]' : '[ ]'} Avg cost < 0.05 EUR (${summary.averageLlmCostEur.toFixed(4)} EUR)`);
+    lines.push('');
+    return lines.join('\n');
+}
+//# sourceMappingURL=benchmark.js.map

package/dist/browser-bar.d.ts

@@ -1,20 +1,20 @@
 /**
- * Chrome macOS browser bar — pixel-perfect from toolbar4.svg.
+ * Browser bar — dispatches between coded browser chrome styles (Chrome, Safari, …).
  *
- * Inlines the real Chrome SVG (cleaned), with dynamic width support:
- * right-anchored elements (tab overflow, star, profile, extensions)
- * and address bar width are computed from the target width.
+ * Chrome: pixel-perfect from toolbar4.svg (ref 2160×129, two-row layout).
+ * Safari: ref 1500×52, single-row toolbar with SF Pro Symbols icons.
  *
  * Dynamic content (page title, URL, favicon) overlaid as HTML.
  * SF Pro embedded fonts for cross-OS rendering.
- *
- * Reference: 2160×129 @ 1.5× (toolbar4.svg)
  */
+export type BrowserBarStyle = 'chrome' | 'safari';
 export interface BrowserBarConfig {
     url?: string;
     pageTitle?: string;
     tabIconUrl?: string;
     colorScheme?: 'light' | 'dark';
+    /** Which coded browser chrome to draw. Defaults to 'chrome' when unset. */
+    style?: BrowserBarStyle;
 }
 export interface BrowserBarZoneRect {
     x: number;
@@ -38,3 +38,11 @@ export interface BrowserBarRenderOptions {
     pixelScale?: number;
 }
 export declare function generateBrowserBarHtml(options: BrowserBarRenderOptions): string;
+export declare function generateBrowserBarSvg(options: BrowserBarRenderOptions): string;
+export declare function generateChromeBrowserBarHtml(options: BrowserBarRenderOptions): string;
+/**
+ * Generate a self-contained SVG string for the Chrome browser bar.
+ * Used by the sharp compositing pipeline (no Playwright).
+ * Returns an SVG at the target width×height with embedded fonts.
+ */
+export declare function generateChromeBrowserBarSvg(options: BrowserBarRenderOptions): string;

package/dist/browser-bar.js

@@ -1,16 +1,25 @@
 /**
- * Chrome macOS browser bar — pixel-perfect from toolbar4.svg.
+ * Browser bar — dispatches between coded browser chrome styles (Chrome, Safari, …).
  *
- * Inlines the real Chrome SVG (cleaned), with dynamic width support:
- * right-anchored elements (tab overflow, star, profile, extensions)
- * and address bar width are computed from the target width.
+ * Chrome: pixel-perfect from toolbar4.svg (ref 2160×129, two-row layout).
+ * Safari: ref 1500×52, single-row toolbar with SF Pro Symbols icons.
  *
  * Dynamic content (page title, URL, favicon) overlaid as HTML.
  * SF Pro embedded fonts for cross-OS rendering.
- *
- * Reference: 2160×129 @ 1.5× (toolbar4.svg)
  */
 import { SF_PRO_TEXT_REGULAR, SF_PRO_TEXT_SEMIBOLD, } from './sf-pro-fonts.js';
+import { generateSafariBrowserBarHtml, generateSafariBrowserBarSvg, } from './safari-browser-bar.js';
+// ── Dispatcher ───────────────────────────────────────────────────────────
+export function generateBrowserBarHtml(options) {
+    return options.config.style === 'safari'
+        ? generateSafariBrowserBarHtml(options)
+        : generateChromeBrowserBarHtml(options);
+}
+export function generateBrowserBarSvg(options) {
+    return options.config.style === 'safari'
+        ? generateSafariBrowserBarSvg(options)
+        : generateChromeBrowserBarSvg(options);
+}
 // ── SF Pro ───────────────────────────────────────────────────────────────
 const SF = `<style>
 @font-face{font-family:'SF Pro Text';src:local('SF Pro Text'),local('.SFNSText'),url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
@@ -26,8 +35,8 @@ const ADDR_BAR_ML = 174; // address bar left x (was 234 with home icon)
 const ADDR_BAR_MR = 126; // address bar right margin (2160-2034)
 const PROFILE_MR = 102; // profile rect x=2058 → margin 102
 const EAR_R_MR = 16.5; // right ear margin
-// ── Generator ────────────────────────────────────────────────────────────
-export function generateBrowserBarHtml(options) {
+// ── Chrome generator (HTML) ──────────────────────────────────────────────
+export function generateChromeBrowserBarHtml(options) {
     const { config, width, height, pixelScale = 1 } = options;
     const title = esc(config.pageTitle || 'New Tab');
     const rawUrl = config.url || 'example.com';
@@ -144,4 +153,132 @@ function esc(s) {
 function attr(s) {
     return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
 }
+// ── Chrome generator (SVG, for sharp compositing — no Playwright) ──────
+// Produces a self-contained SVG string rasterizable by @resvg/resvg-js.
+/** SF Pro font CSS for embedding inside SVG <defs><style>. No local() — resvg only supports url(). */
+const SVG_BB_FONT_CSS = `
+@font-face{font-family:'SF Pro Text';src:url('${SF_PRO_TEXT_REGULAR}') format('woff2');font-weight:400;font-style:normal}
+@font-face{font-family:'SF Pro Text';src:url('${SF_PRO_TEXT_SEMIBOLD}') format('woff2');font-weight:600;font-style:normal}
+`;
+const SVG_BB_FF = "'SF Pro Text',system-ui,sans-serif";
+/**
+ * Generate a self-contained SVG string for the Chrome browser bar.
+ * Used by the sharp compositing pipeline (no Playwright).
+ * Returns an SVG at the target width×height with embedded fonts.
+ */
+export function generateChromeBrowserBarSvg(options) {
+    const { config, width, height } = options;
+    const title = esc(config.pageTitle || 'New Tab');
+    const rawUrl = config.url || 'example.com';
+    const url = esc(rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, ''));
+    const icon = config.tabIconUrl;
+    const isDark = config.colorScheme === 'dark';
+    // Scale: fit reference height into target height
+    const s = height / REF_H;
+    const iw = Math.round(width / s);
+    // Dynamic right-anchored positions
+    const dx = iw - REF_W;
+    const tabOverflowX = iw - TAB_OVERFLOW_MR;
+    const addrBarW = iw - ADDR_BAR_ML - ADDR_BAR_MR;
+    const profileX = iw - PROFILE_MR;
+    const earRX = iw - EAR_R_MR;
+    // Color tokens
+    const tabStripBg = isDark ? '#1F2020' : '#DEDEDE';
+    const tabBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const toolbarBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const addrBarBg = isDark ? '#282828' : '#F1F1F1';
+    const addrIconBg = isDark ? '#3C3C3C' : '#FFFFFF';
+    const borderColor = isDark ? '#454746' : '#CFCFCF';
+    const textColor = isDark ? '#E3E3E3' : '#1D1D1D';
+    const textSec = isDark ? '#C7C7C7' : '#5F6368';
+    const iconActive = isDark ? '#C7C7C7' : '#5F6368';
+    const iconDis = isDark ? '#7B7B7B' : '#BBBFC4';
+    // Tab favicon — inline SVG globe fallback (no <img> in pure SVG)
+    const tabFavicon = icon
+        ? `<image href="${attr(icon)}" x="153.5" y="19.5" width="21" height="21" preserveAspectRatio="xMidYMid meet"/>`
+        : `<g transform="translate(152,18)"><svg width="24" height="24" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="${iconActive}" stroke-width="1.2"/><ellipse cx="8" cy="8" rx="3" ry="6.5" stroke="${iconActive}" stroke-width="1.2"/><line x1="1.5" y1="8" x2="14.5" y2="8" stroke="${iconActive}" stroke-width="1.2"/></svg></g>`;
+    // Page title — clipPath with gradient mask for fade-out
+    const titleClipId = 'bb_svg_title_clip';
+    const titleMaskId = 'bb_svg_title_mask';
+    const titleGradId = 'bb_svg_title_grad';
+    const titleX = 187;
+    const titleY = 15;
+    const titleW = 260;
+    const titleH = 30;
+    // URL in address bar
+    const urlX = ADDR_BAR_ML + 58;
+    const urlW = addrBarW - 58 - 18;
+    const urlClipId = 'bb_svg_url_clip';
+    // Build the full SVG at reference dimensions, then use viewBox to scale.
+    // fill="none" is critical — without it, elements that only define stroke
+    // (e.g. traffic light border circles) inherit the default fill="black"
+    // and hide the colored circles underneath.
+    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${iw} ${REF_H}" fill="none">
+<defs>
+<style>${SVG_BB_FONT_CSS}</style>
+<linearGradient id="bb_profile_grad" x1="${profileX + 15}" y1="109.5" x2="${profileX + 15}" y2="79.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5D8E4"/><stop offset="0.45" stop-color="#D1CAD6"/><stop offset="1" stop-color="#B7BAD1"/>
+</linearGradient>
+<mask id="bb_mask_toolbar" fill="white">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
+</mask>
+<clipPath id="bb_clip_toolbar">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z"/>
+</clipPath>
+<clipPath id="${titleClipId}"><rect x="${titleX}" y="${titleY}" width="${titleW}" height="${titleH}"/></clipPath>
+<linearGradient id="${titleGradId}" x1="${titleX}" y1="0" x2="${titleX + titleW}" y2="0" gradientUnits="userSpaceOnUse">
+<stop offset="0.85" stop-color="white"/><stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<mask id="${titleMaskId}"><rect x="${titleX}" y="${titleY}" width="${titleW}" height="${titleH}" fill="url(#${titleGradId})"/></mask>
+<clipPath id="${urlClipId}"><rect x="${urlX}" y="69" width="${urlW}" height="51"/></clipPath>
+</defs>
+<!-- TAB STRIP -->
+<g>
+<rect width="${iw}" height="60" fill="${tabStripBg}"/>
+<circle cx="40.5" cy="30.75" r="9" fill="#EC6A5E"/>
+<circle cx="40.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<circle cx="70.5" cy="30.75" r="9" fill="#F4BF4F"/>
+<circle cx="70.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<circle cx="100.5" cy="30.75" r="9" fill="#61C554"/>
+<circle cx="100.5" cy="30.75" r="8.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<path d="M120 60C129.941 60 138 51.9411 138 42V60H120Z" fill="${tabBg}"/>
+<path d="M138 24C138 15.7157 144.716 9 153 9H471C479.284 9 486 15.7157 486 24V60H138V24Z" fill="${tabBg}"/>
+<path d="M457.668 35.5689L456.431 34.3314L460.762 30.0001L456.431 25.6689L457.668 24.4314L461.999 28.7626L466.331 24.4314L467.568 25.6689L463.237 30.0001L467.568 34.3314L466.331 35.5689L461.999 31.2376L457.668 35.5689Z" fill="${textColor}"/>
+<path d="M504 60C494.059 60 486 51.9411 486 42V60H504Z" fill="${tabBg}"/>
+<path d="M513.327 31.1749H506.877V28.8249H513.327V22.3499H515.677V28.8249H522.152V31.1749H515.677V37.6249H513.327V31.1749Z" fill="${iconActive}"/>
+<rect x="${tabOverflowX}" y="9" width="42" height="42" rx="15" fill="${tabBg}"/>
+<path d="M${tabOverflowX + 21} 33.95L${tabOverflowX + 14.4} 27.35L${tabOverflowX + 16.07} 25.675L${tabOverflowX + 21} 30.625L${tabOverflowX + 25.92} 25.7L${tabOverflowX + 27.6} 27.375L${tabOverflowX + 21} 33.95Z" fill="${textColor}"/>
+</g>
+<!-- BOTTOM EARS -->
+<path d="M16.5 60C7.3873 60 0 67.3873 0 76.5V60H16.5Z" fill="${tabStripBg}"/>
+<path d="M${earRX} 60C${earRX + 9.11} 60 ${iw} 67.3873 ${iw} 76.5V60H${earRX}Z" fill="${tabStripBg}"/>
+<!-- TOOLBAR -->
+<g clip-path="url(#bb_clip_toolbar)">
+<path d="M0 76C0 67.1634 7.16344 60 16 60H${iw - 16}C${iw - 7.16} 60 ${iw} 67.1634 ${iw} 76V129H0V76Z" fill="${toolbarBg}"/>
+<path d="M28.3125 95.625L34.5938 101.906L33 103.5L24 94.5L33 85.5L34.5938 87.0938L28.3125 93.375H42V95.625H28.3125Z" fill="${iconDis}"/>
+<path d="M91.6875 95.625L85.4062 101.906L87 103.5L96 94.5L87 85.5L85.4062 87.0938L91.6875 93.375H78V95.625H91.6875Z" fill="${iconDis}"/>
+<path d="M141 103.5C138.5 103.5 136.375 102.625 134.625 100.875C132.875 99.125 132 97 132 94.5C132 92 132.875 89.875 134.625 88.125C136.375 86.375 138.5 85.5 141 85.5C142.354 85.5 143.609 85.7812 144.766 86.3438C145.922 86.9062 146.917 87.6562 147.75 88.5938V85.5H150V93H142.5V90.75H146.594C145.99 89.8333 145.198 89.1042 144.219 88.5625C143.24 88.0208 142.167 87.75 141 87.75C139.125 87.75 137.531 88.4062 136.219 89.7188C134.906 91.0312 134.25 92.625 134.25 94.5C134.25 96.375 134.906 97.9688 136.219 99.2812C137.531 100.594 139.125 101.25 141 101.25C142.75 101.25 144.25 100.672 145.5 99.5156C146.75 98.3594 147.469 96.9375 147.656 95.25H149.969C149.781 97.5833 148.833 99.5417 147.125 101.125C145.417 102.708 143.375 103.5 141 103.5Z" fill="${iconActive}"/>
+<rect x="${ADDR_BAR_ML}" y="69" width="${addrBarW}" height="51" rx="25.5" fill="${addrBarBg}"/>
+<rect x="${ADDR_BAR_ML + 7.5}" y="76.5" width="36" height="36" rx="18" fill="${addrIconBg}"/>
+<g transform="translate(${ADDR_BAR_ML + 16.5},${76.5 + 9}) scale(1.5)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 6.70898C10.8806 6.70898 11.9998 7.82848 12 9.20898C12 10.5897 10.8807 11.709 9.5 11.709C8.11929 11.709 7 10.5897 7 9.20898C7.00024 7.82848 8.11944 6.70898 9.5 6.70898ZM9.5 8.20898C8.94786 8.20898 8.50024 8.6569 8.5 9.20898C8.5 9.76127 8.94772 10.209 9.5 10.209C10.0523 10.209 10.5 9.76127 10.5 9.20898C10.4998 8.6569 10.0521 8.20898 9.5 8.20898Z" fill="${iconActive}"/>
+<path d="M6 10H0V8.5H6V10Z" fill="${iconActive}"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 0C3.88071 0 5 1.11929 5 2.5C5 3.88071 3.88071 5 2.5 5C1.11929 5 0 3.88071 0 2.5C0 1.11929 1.11929 0 2.5 0ZM2.5 1.5C1.94772 1.5 1.5 1.94772 1.5 2.5C1.5 3.05228 1.94772 3.5 2.5 3.5C3.05228 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.05228 1.5 2.5 1.5Z" fill="${iconActive}"/>
+<path d="M12 3.20898H6V1.70898H12V3.20898Z" fill="${iconActive}"/>
+</g>
+<path transform="translate(${dx},0)" d="M1994 100.344L1998 97.9688L2002.03 100.344L2000.97 95.8438L2004.44 92.875L1999.84 92.4688L1998 88.1875L1996.16 92.4688L1991.56 92.875L1995.06 95.8438L1994 100.344ZM1990.59 105L1992.56 96.6875L1986 91.0938L1994.62 90.3438L1998 82.5L2001.38 90.375L2010 91.0938L2003.44 96.6875L2005.41 105L1998 100.594L1990.59 105Z" fill="${iconActive}"/>
+<rect x="${profileX}" y="79.5" width="30" height="30" rx="15" fill="url(#bb_profile_grad)"/>
+<rect x="${profileX + 0.75}" y="80.25" width="28.5" height="28.5" rx="14.25" stroke="#1F1F1F" stroke-opacity="0.06" stroke-width="1.5"/>
+<path transform="translate(${dx},0)" d="M2127 105.404C2126.38 105.404 2125.85 105.183 2125.41 104.743C2124.97 104.302 2124.75 103.773 2124.75 103.154C2124.75 102.535 2124.97 102.005 2125.41 101.565C2125.85 101.124 2126.38 100.904 2127 100.904C2127.62 100.904 2128.15 101.124 2128.59 101.565C2129.03 102.005 2129.25 102.535 2129.25 103.154C2129.25 103.773 2129.03 104.302 2128.59 104.743C2128.15 105.183 2127.62 105.404 2127 105.404ZM2127 96.7499C2126.38 96.7499 2125.85 96.5296 2125.41 96.089C2124.97 95.6484 2124.75 95.1187 2124.75 94.5C2124.75 93.8812 2124.97 93.3516 2125.41 92.9109C2125.85 92.4703 2126.38 92.25 2127 92.25C2127.62 92.25 2128.15 92.4703 2128.59 92.9109C2129.03 93.3516 2129.25 93.8812 2129.25 94.5C2129.25 95.1187 2129.03 95.6484 2128.59 96.089C2128.15 96.5296 2127.62 96.7499 2127 96.7499ZM2127 88.0961C2126.38 88.0961 2125.85 87.8758 2125.41 87.4351C2124.97 86.9945 2124.75 86.4649 2124.75 85.8461C2124.75 85.2274 2124.97 84.6977 2125.41 84.2571C2125.85 83.8165 2126.38 83.5962 2127 83.5962C2127.62 83.5962 2128.15 83.8165 2128.59 84.2571C2129.03 84.6977 2129.25 85.2274 2129.25 85.8461C2129.25 86.4649 2129.03 86.9945 2128.59 87.4351C2128.15 87.8758 2127.62 88.0961 2127 88.0961Z" fill="${iconActive}"/>
+</g>
+<!-- TOOLBAR BORDER -->
+<path d="M0 60H${iw}H0M${iw} 130.5H0V127.5H${iw}V130.5ZM${iw} 127.5M0 129V60V129M0 129M${iw} 60V129V60" fill="${borderColor}" mask="url(#bb_mask_toolbar)"/>
+<!-- DYNAMIC TEXT OVERLAYS -->
+${tabFavicon}
+<text mask="url(#${titleMaskId})" x="${titleX}" y="${titleY + titleH / 2 + 1}" font-family="${SVG_BB_FF}" font-size="18" font-weight="400" fill="${textColor}" dominant-baseline="central">${title}</text>
+<g clip-path="url(#${urlClipId})">
+<text x="${urlX}" y="${69 + 51 / 2 + 1}" font-family="${SVG_BB_FF}" font-size="19.5" font-weight="400" fill="${textSec}" dominant-baseline="central">${url}</text>
+</g>
+</svg>`;
+}
 //# sourceMappingURL=browser-bar.js.map

package/dist/browser-pool.d.ts

@@ -27,6 +27,13 @@ declare class BrowserPool {
     releaseContext(context: BrowserContext): Promise<void>;
     private ensureBrowser;
     private launchBrowser;
+    /** Read-only snapshot of pool state for monitoring. */
+    getStats(): {
+        activeContexts: number;
+        queueLength: number;
+        captureCount: number;
+        maxConcurrent: number;
+    };
     private restartBrowser;
 }
 /** Shared browser pool for server-side (web API) captures. */

package/dist/browser-pool.js

@@ -1,11 +1,12 @@
 import { chromium } from 'playwright';
 /** Chromium flags for server-side headless operation (used by pool and standalone launches). */
 export const CHROMIUM_ARGS = [
-    // Required on VPS/Docker (Chromium won't run as root without this)
-    '--no-sandbox',
-    '--disable-setuid-sandbox',
-    // Use /tmp instead of /dev/shm — critical on VPS with limited shared memory
-    '--disable-dev-shm-usage',
+    // Linux/Docker-only: required when running Chromium as root or with limited /dev/shm
+    ...(process.platform === 'linux' ? [
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+        '--disable-dev-shm-usage',
+    ] : []),
     // No GPU on headless servers
     '--disable-gpu',
     '--disable-gpu-sandbox',
@@ -107,6 +108,15 @@ class BrowserPool {
             this.browser = null;
         });
     }
+    /** Read-only snapshot of pool state for monitoring. */
+    getStats() {
+        return {
+            activeContexts: this.activeContexts,
+            queueLength: this.queue.length,
+            captureCount: this.captureCount,
+            maxConcurrent: MAX_CONCURRENT,
+        };
+    }
     async restartBrowser() {
         const old = this.browser;
         this.browser = null;

package/dist/browser-utils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Standalone utility functions extracted from browser.ts.
+ * These have no class dependencies and can be safely imported anywhere.
+ */
+import type { OutscaleConfig } from './types.js';
+export declare function normalizeViewportDimension(value: number): number;
+export declare function normalizeDeviceScaleFactor(value?: number): number;
+export declare function resolveRecordedVideoSize(viewport: {
+    width: number;
+    height: number;
+}): {
+    width: number;
+    height: number;
+};
+/**
+ * Map a BCP-47 language tag to a Playwright-compatible locale string.
+ */
+export declare function langToLocale(lang: string): string;
+export declare function escapeCssAttributeValue(value: string): string;
+export declare function escapeCssIdentifier(value: string): string;
+export declare function withHelperTimeout<T>(label: string, timeoutMs: number | undefined, work: () => Promise<T>): Promise<T>;
+export declare function formatUrlForSummary(rawUrl: string): string;
+export declare function resolveEffectivePadding(config: OutscaleConfig, bbox: {
+    width: number;
+    height: number;
+}): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};

package/dist/browser-utils.js

@@ -0,0 +1,97 @@
+/**
+ * Standalone utility functions extracted from browser.ts.
+ * These have no class dependencies and can be safely imported anywhere.
+ */
+// -- Viewport & device utilities --
+export function normalizeViewportDimension(value) {
+    if (!Number.isFinite(value))
+        return 1;
+    return Math.max(1, Math.round(value));
+}
+export function normalizeDeviceScaleFactor(value) {
+    if (!Number.isFinite(value))
+        return 2;
+    return Math.max(0.5, Math.min(4, Number(value)));
+}
+export function resolveRecordedVideoSize(viewport) {
+    const width = Math.max(2, Math.round(viewport.width)) & ~1;
+    const height = Math.max(2, Math.round(viewport.height)) & ~1;
+    return { width, height };
+}
+// -- Locale --
+/**
+ * Map a BCP-47 language tag to a Playwright-compatible locale string.
+ */
+export function langToLocale(lang) {
+    if (!lang)
+        return 'en-US';
+    if (lang.includes('-') || lang.includes('_'))
+        return lang;
+    const map = {
+        en: 'en-US', fr: 'fr-FR', de: 'de-DE', es: 'es-ES',
+        it: 'it-IT', pt: 'pt-PT', nl: 'nl-NL', ja: 'ja-JP',
+        zh: 'zh-CN', ko: 'ko-KR', ar: 'ar-SA', ru: 'ru-RU',
+        pl: 'pl-PL', sv: 'sv-SE', da: 'da-DK', fi: 'fi-FI',
+        no: 'nb-NO', tr: 'tr-TR', cs: 'cs-CZ', hu: 'hu-HU',
+    };
+    return map[lang] ?? lang;
+}
+// -- CSS utilities --
+export function escapeCssAttributeValue(value) {
+    return value
+        .replace(/\\/g, '\\\\')
+        .replace(/"/g, '\\"');
+}
+export function escapeCssIdentifier(value) {
+    return value.replace(/(^-?\d)|[^a-zA-Z0-9_-]/g, (match) => `\\${match}`);
+}
+// -- Timeout utility --
+export async function withHelperTimeout(label, timeoutMs, work) {
+    if (!timeoutMs || timeoutMs <= 0) {
+        return work();
+    }
+    let timer = null;
+    try {
+        return await Promise.race([
+            work(),
+            new Promise((_, reject) => {
+                timer = setTimeout(() => reject(new Error(`${label} timed out after ${timeoutMs}ms`)), timeoutMs);
+            }),
+        ]);
+    }
+    finally {
+        if (timer)
+            clearTimeout(timer);
+    }
+}
+// -- URL formatting --
+export function formatUrlForSummary(rawUrl) {
+    try {
+        const url = new URL(rawUrl);
+        return `${url.pathname || '/'}${url.search}${url.hash}` || rawUrl;
+    }
+    catch {
+        return rawUrl;
+    }
+}
+// -- Padding resolution --
+export function resolveEffectivePadding(config, bbox) {
+    let top = 0, right = 0, bottom = 0, left = 0;
+    if (config.paddingPercent != null) {
+        top = bottom = (config.paddingPercent / 100) * bbox.height;
+        left = right = (config.paddingPercent / 100) * bbox.width;
+    }
+    if (config.padding != null) {
+        top = right = bottom = left = config.padding;
+    }
+    if (config.paddingTop != null)
+        top = config.paddingTop;
+    if (config.paddingRight != null)
+        right = config.paddingRight;
+    if (config.paddingBottom != null)
+        bottom = config.paddingBottom;
+    if (config.paddingLeft != null)
+        left = config.paddingLeft;
+    return { top, right, bottom, left };
+}
+//# sourceMappingURL=browser-utils.js.map