autokap 1.9.1 → 1.9.3

package/dist/cli-runner.js

@@ -217,12 +217,51 @@ export async function runCapture(options) {
     // badge on the preset while it captures. Best-effort + local-only: skip dry
     // runs and cloud runs (AUTOKAP_RUN_ID is set on cloud runners, which own
     // their own capture_runs row). A failure here must never block the capture.
-    if (!options.dryRun && !process.env.AUTOKAP_RUN_ID) {
+    const isLocalRegisteredRun = !options.dryRun && !process.env.AUTOKAP_RUN_ID;
+    if (isLocalRegisteredRun) {
         await postRunStart(config, runId, program.presetId, program.variants.length, options.env);
     }
+    // Ctrl-C handling: a local run that registered itself server-side must never
+    // leave the preset stuck on the "En cours" badge. On SIGINT/SIGTERM we abort
+    // the in-flight capture (so the finally-block cleanup runs) and best-effort
+    // tell the server the run was interrupted — otherwise the capture_runs row
+    // sits in `running` and the preset stays "capturing" until the 15-min stale
+    // cutoff. A caller-supplied abortSignal is forwarded into the same controller
+    // so both paths converge on one cancellation.
+    const abortController = new AbortController();
+    if (options.abortSignal) {
+        if (options.abortSignal.aborted) {
+            abortController.abort(options.abortSignal.reason);
+        }
+        else {
+            options.abortSignal.addEventListener('abort', () => abortController.abort(options.abortSignal.reason), { once: true });
+        }
+    }
+    let interrupted = false;
+    let abortNotified = false;
+    const notifyAborted = async () => {
+        if (abortNotified || !isLocalRegisteredRun)
+            return;
+        abortNotified = true;
+        await postRunAborted(config, runId, program.presetId, options.env);
+    };
+    const onInterrupt = (signal) => {
+        if (interrupted) {
+            // Second interrupt: the user wants out now. Hard-exit with the
+            // conventional 128+SIGINT(2) code; the best-effort notify already fired.
+            process.exit(130);
+        }
+        interrupted = true;
+        logger.warn(`[capture] ${signal} received — stopping the run and notifying AutoKap…`);
+        abortController.abort(new Error('User interrupted (Ctrl-C)'));
+    };
+    if (isLocalRegisteredRun) {
+        process.on('SIGINT', onInterrupt);
+        process.on('SIGTERM', onInterrupt);
+    }
     const runOptions = {
         recoveryChain,
-        abortSignal: options.abortSignal,
+        abortSignal: abortController.signal,
         maxParallelVariants,
         llmConfig,
         presetName: program.presetId,
@@ -292,15 +331,30 @@ export async function runCapture(options) {
     };
     let runResult;
     let cliResult;
+    let runAborted = false;
     try {
         runResult = await executeProgram(program, createAdapter, runOptions);
+        runAborted = interrupted || runResult.error === 'aborted';
         if (runResult.success) {
             logger.info(`[capture] Run completed successfully — ${runResult.telemetry.totalOpcodes} opcodes, ${runResult.telemetry.recoveredOpcodes} recovered, ${runResult.totalDurationMs}ms`);
         }
+        else if (runAborted) {
+            logger.warn('[capture] Run interrupted by the user — skipping artifact upload.');
+        }
         else {
             logger.error(`[capture] Run failed: ${runResult.error}`);
         }
-        if (options.dryRun) {
+        if (runAborted) {
+            // Don't upload partial artifacts for a cancelled run; the server is told
+            // separately (notifyAborted) so the preset leaves the "capturing" state.
+            cliResult = {
+                success: false,
+                runId,
+                runResult,
+                error: 'Capture interrupted (Ctrl-C)',
+            };
+        }
+        else if (options.dryRun) {
             logger.info(`[capture] DRY RUN complete — ${runResult.telemetry.totalOpcodes} opcodes executed, 0 captures, 0 credits charged`);
             cliResult = { success: runResult.success, runId, runResult };
         }
@@ -354,6 +408,16 @@ export async function runCapture(options) {
         }
     }
     finally {
+        if (isLocalRegisteredRun) {
+            process.off('SIGINT', onInterrupt);
+            process.off('SIGTERM', onInterrupt);
+        }
+        // On interruption, mark the run terminal server-side regardless of the
+        // user's debug-log preference, so the preset never stays stuck "capturing".
+        // Idempotent with the error-log flush below (same capture_failed dedupeKey).
+        if (runAborted) {
+            await notifyAborted();
+        }
         // AUT-149: export structured debug logs to AutoKap on capture failure.
         // Best-effort — the LogCollector swallows network errors.
         const shouldExport = options.exportDebugLogs !== false
@@ -693,6 +757,29 @@ async function postRunStart(config, runId, presetId, variantCount, env) {
         logger.warn(`[capture] Run registration error: ${message}`);
     }
 }
+// Best-effort terminal notification when a local run is interrupted (Ctrl-C).
+// Marks the run failed server-side and clears the preset's "capturing" badge,
+// so an aborted capture can't leave the preset stuck "En cours". Never throws.
+async function postRunAborted(config, runId, presetId, env) {
+    try {
+        const response = await fetch(`${config.apiBaseUrl}/api/cli/runs`, {
+            method: 'PATCH',
+            headers: {
+                'Authorization': `Bearer ${config.apiKey}`,
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ runId, presetId, status: 'aborted', env }),
+            signal: AbortSignal.timeout(10_000),
+        });
+        if (!response.ok) {
+            logger.warn(`[capture] Failed to report interruption (HTTP ${response.status}); the preset may show "in progress" until the stale cutoff`);
+        }
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        logger.warn(`[capture] Interruption report error: ${message}`);
+    }
+}
 async function uploadResults(config, program, result, runId, sessionId, provenance) {
     const artifactJobs = result.variantResults.flatMap((variant) => {
         const variantSpec = program.variants.find((entry) => entry.id === variant.variantId);

package/dist/execution-types.d.ts

@@ -600,10 +600,11 @@ export interface ExecutionProgram {
      */
     deviceConfigs?: Record<string, DeviceConfig>;
     /**
-     * Project-level public URL used to decorate browser mockups. The CLI
+     * Project-level decorative URL used to decorate browser mockups. The CLI
      * substitutes the captured origin (typically a local dev server) with this
      * value via `transformBrowserUrl` before baking it into the browser bar.
-     * Server-resolved from `projects.public_url`.
+     * AUT-269: derived automatically from the project's prod environment base
+     * URL (absent when no prod environment is configured), not a separate field.
      */
     publicUrl?: string;
     /**

package/dist/mockup.d.ts

@@ -204,18 +204,27 @@ export interface MockupOptions {
         height: number;
     };
 }
+/**
+ * Status bar default: shown only on phone mockups. Tablet, laptop, and browser
+ * categories default to off (browser is additionally excluded at render time).
+ * An explicit user choice (`mockupOptions.showStatusBar`) always overrides this.
+ */
+export declare function defaultShowStatusBar(category: DeviceCategory): boolean;
 /**
  * Resolve the two per-variant frame decisions shared by both render paths (CLI direct-upload
  * framing and the cloud legacy-multipart route): a variant's own `mockupOptions` wins, falling
  * back to the viewport-inferred orientation and the deprecated program-level `applyStatusBar`.
  * Pure + exported so the precedence is tested once instead of in two duplicated call sites.
+ *
+ * `showStatusBar` is left `undefined` when neither the variant nor the legacy fallback set it,
+ * so `applyDeviceFrame` can apply the category-aware default (phones on, everything else off).
  */
 export declare function resolveVariantFrameOptions(mockupOptions: MockupOptions | undefined, fallback: {
     orientation?: MockupOrientation;
     showStatusBar?: boolean;
 }): {
     orientation?: MockupOrientation;
-    showStatusBar: boolean;
+    showStatusBar?: boolean;
 };
 export interface ResolvedDeviceFrameDescriptor {
     id: string;

package/dist/mockup.js

@@ -17,21 +17,33 @@ function getSupabaseMockupConfig() {
         serviceKey: process.env.SUPABASE_SERVICE_ROLE_KEY,
     };
 }
+/**
+ * Status bar default: shown only on phone mockups. Tablet, laptop, and browser
+ * categories default to off (browser is additionally excluded at render time).
+ * An explicit user choice (`mockupOptions.showStatusBar`) always overrides this.
+ */
+export function defaultShowStatusBar(category) {
+    return category === 'phone';
+}
 /**
  * Resolve the two per-variant frame decisions shared by both render paths (CLI direct-upload
  * framing and the cloud legacy-multipart route): a variant's own `mockupOptions` wins, falling
  * back to the viewport-inferred orientation and the deprecated program-level `applyStatusBar`.
  * Pure + exported so the precedence is tested once instead of in two duplicated call sites.
+ *
+ * `showStatusBar` is left `undefined` when neither the variant nor the legacy fallback set it,
+ * so `applyDeviceFrame` can apply the category-aware default (phones on, everything else off).
  */
 export function resolveVariantFrameOptions(mockupOptions, fallback) {
     return {
         orientation: mockupOptions?.orientation ?? fallback.orientation,
-        showStatusBar: mockupOptions?.showStatusBar ?? fallback.showStatusBar ?? false,
+        showStatusBar: mockupOptions?.showStatusBar ?? fallback.showStatusBar,
     };
 }
 const DEFAULT_MOCKUP_OPTIONS = {
     orientation: 'portrait',
     outputScale: 2,
+    // Placeholder only — applyDeviceFrame re-resolves this per device category (see defaultShowStatusBar).
     showStatusBar: true,
     showSafeAreaTop: true,
     showSafeAreaBottom: true,
@@ -523,6 +535,9 @@ export async function applyDeviceFrame(screenshot, deviceId, options) {
     if (!config)
         throw new Error(`Unknown device frame: ${deviceId}`);
     const opts = { ...DEFAULT_MOCKUP_OPTIONS, ...options };
+    // Status bar defaults to on for phones only; tablet/laptop/browser default to off.
+    // An explicit user choice wins; browser is additionally excluded at render time below.
+    opts.showStatusBar = options?.showStatusBar ?? defaultShowStatusBar(config.category);
     const requestedOrientation = opts.orientation ?? 'portrait';
     // Normalize against supported orientations so stale extra configs in Supabase
     // do not override landscape-only desktop/tablet/browser frames.

package/dist/opcode-runner.js

@@ -156,8 +156,31 @@ export async function executeProgram(program, createAdapter, options = {}) {
     });
     await Promise.all(workers);
     const completedVariantResults = variantResults.filter((result) => Boolean(result));
-    const aborted = options.abortSignal?.aborted && completedVariantResults.length < program.variants.length;
-    const success = !aborted && completedVariantResults.length > 0 && completedVariantResults.every(v => v.success);
+    const aborted = Boolean(options.abortSignal?.aborted) && completedVariantResults.length < program.variants.length;
+    // Fail-closed on incomplete delivery. Previously `success` was computed purely
+    // from the SURVIVING variant results, so a run that silently dropped variants
+    // (a variant finishing "ok" while persisting no artifact) was recorded as a
+    // clean success — a 4-of-24 capture looked identical to a full run, got billed,
+    // was never retried, and surfaced nothing. Require that every variant ran,
+    // succeeded, AND produced its expected number of artifacts; name the deficient
+    // variants so the failure is actionable and the runtime cause is diagnosable
+    // straight from the run log. Dry runs intentionally skip capture opcodes (and
+    // programs with no capture points have nothing to enforce), so they are exempt
+    // from the artifact check but still require every variant to succeed.
+    const expectedArtifactsPerVariant = program.steps.filter((step) => isArtifactProducingOpcode(step.kind)).length;
+    const enforceArtifactCompleteness = !options.dryRun && expectedArtifactsPerVariant > 0;
+    const deficientVariants = program.variants
+        .map((variant, index) => ({ variant, result: variantResults[index] }))
+        .filter(({ result }) => !result
+        || !result.success
+        || (enforceArtifactCompleteness && result.artifacts.length < expectedArtifactsPerVariant))
+        .map(({ variant, result }) => !result
+        ? `${variant.id} (not executed)`
+        : !result.success
+            ? `${variant.id} (failed: ${result.error ?? 'unknown error'})`
+            : `${variant.id} (${result.artifacts.length}/${expectedArtifactsPerVariant} artifacts)`);
+    const incompleteDelivery = deficientVariants.length > 0;
+    const success = !aborted && completedVariantResults.length > 0 && !incompleteDelivery;
     const detectedAppVersion = completedVariantResults.reduce((acc, variantResult) => acc ?? (variantResult.detectedAppVersion ?? null), null);
     // AUT-241 — surface (don't mask) cuts: aggregate every recording warning from
     // each variant's clip/video artifacts. Diagnostic only; never affects success.
@@ -172,7 +195,11 @@ export async function executeProgram(program, createAdapter, options = {}) {
         totalDurationMs: Date.now() - startTime,
         detectedAppVersion,
         warnings: aggregatedWarnings.length ? aggregatedWarnings : undefined,
-        error: aborted ? 'aborted' : (success ? undefined : completedVariantResults.find(v => !v.success)?.error),
+        error: aborted
+            ? 'aborted'
+            : success
+                ? undefined
+                : `incomplete run: ${deficientVariants.length}/${program.variants.length} variant(s) did not deliver expected artifacts — ${deficientVariants.join('; ')}`,
         failureKind: success ? undefined : completedVariantResults.find(v => v.failureKind)?.failureKind,
     };
 }
@@ -320,6 +347,13 @@ function softSkipResult(opcode, index, startTime, reason, telemetry) {
         error: reason,
     };
 }
+/** Opcodes whose ACTION produces a persisted artifact (a screenshot or a finalized
+ * video clip). A passing postcondition does NOT imply the artifact exists, so these
+ * get special handling on the recovery path (executeOpcode → failWithRecovery) and
+ * in the run-level completeness gate (executeProgram). */
+function isArtifactProducingOpcode(kind) {
+    return kind === 'CAPTURE_SCREENSHOT' || kind === 'END_CLIP';
+}
 async function executeOpcode(opcode, index, adapter, verifier, breaker, recoveryChain, telemetry, healerPatches, opcodeTimings, artifacts, options, variantId, executionState, artifactPlan, mockDataGroups, currentVariant, credentials) {
     const startTime = Date.now();
     const effectiveTimeoutMs = resolveOpcodeTimeoutMs(opcode);
@@ -333,6 +367,47 @@ async function executeOpcode(opcode, index, adapter, verifier, breaker, recovery
     const getProgress = makeProgressGetter(adapter);
     const actionEffectPolicy = getOpcodeActionEffectPolicy(opcode);
     const isSoft = isSoftOpcodeKind(opcode.kind);
+    // Snapshot so we can tell whether THIS opcode produced its artifact. A recovered
+    // CAPTURE_SCREENSHOT must not pass as a phantom success when no screenshot was
+    // taken — the postcondition (e.g. element_visible) can pass without a capture.
+    const artifactCountAtStart = artifacts.length;
+    // Wraps handleFailure: when recovery succeeds for an artifact-producing opcode
+    // that pushed NO artifact for itself, re-run the capture once so the artifact
+    // truly exists; hard-fail if it still can't. END_CLIP finalization is stateful,
+    // so it hard-fails without re-running. Without this a "recovered"
+    // CAPTURE_SCREENSHOT finishes ok with no screenshot — the silent partial loss.
+    const failWithRecovery = async (reason) => {
+        const failureResult = await handleFailure(opcode, index, adapter, verifier, breaker, recoveryChain, telemetry, healerPatches, options, executionState, variantId, currentVariant, startTime, deadlineMs, globalDeadlineMs, effectiveTimeoutMs, reason);
+        if (failureResult.status !== 'recovered'
+            || !isArtifactProducingOpcode(opcode.kind)
+            || artifacts.length > artifactCountAtStart) {
+            return failureResult;
+        }
+        if (opcode.kind === 'CAPTURE_SCREENSHOT') {
+            const recaptureBudgetMs = getRemainingTimeMs(globalDeadlineMs);
+            if (recaptureBudgetMs > 0) {
+                let recapture;
+                try {
+                    recapture = await withTimeout(() => executeOpcodeAction(opcode, index, adapter, artifacts, telemetry, currentVariant, executionState, artifactPlan, mockDataGroups, options, credentials), recaptureBudgetMs);
+                }
+                catch (err) {
+                    recapture = { success: false, error: err instanceof Error ? err.message : String(err) };
+                }
+                if (recapture.success && artifacts.length > artifactCountAtStart) {
+                    logger.debug(`[opcode ${index}] re-captured screenshot after recovery (${reason})`);
+                    return failureResult;
+                }
+            }
+        }
+        return {
+            opcodeIndex: index,
+            kind: opcode.kind,
+            status: 'failed',
+            durationMs: Date.now() - startTime,
+            recoveryAttempts: failureResult.recoveryAttempts ?? 1,
+            error: `recovery succeeded but produced no ${opcode.kind === 'END_CLIP' ? 'clip' : 'screenshot'} artifact: ${reason}`,
+        };
+    };
     // Track page context for circuit breaker
     try {
         const url = await adapter.getCurrentUrl();
@@ -358,7 +433,7 @@ async function executeOpcode(opcode, index, adapter, verifier, breaker, recovery
             logger.debug(`[opcode ${index}] no budget left after captureBeforeState (deadline=${actionDeadlineMs}, now=${Date.now()})`);
             if (isSoft)
                 return softSkipResult(opcode, index, startTime, reason, telemetry);
-            return handleFailure(opcode, index, adapter, verifier, breaker, recoveryChain, telemetry, healerPatches, options, executionState, variantId, currentVariant, startTime, deadlineMs, globalDeadlineMs, effectiveTimeoutMs, reason);
+            return failWithRecovery(reason);
         }
         // For mediaMode='video', capture pre-action timing + bbox metadata inside
         // the active clip window only. Opcodes outside a clip are not part of the
@@ -407,7 +482,7 @@ async function executeOpcode(opcode, index, adapter, verifier, breaker, recovery
             const reason = result.error ?? 'action failed';
             if (isSoft)
                 return softSkipResult(opcode, index, startTime, reason, telemetry);
-            return handleFailure(opcode, index, adapter, verifier, breaker, recoveryChain, telemetry, healerPatches, options, executionState, variantId, currentVariant, startTime, deadlineMs, globalDeadlineMs, effectiveTimeoutMs, reason);
+            return failWithRecovery(reason);
         }
         // Verify postcondition — extend-on-progress up to the global deadline so a
         // slow action no longer starves it (failure mode #3: clamped to ~1ms).
@@ -417,7 +492,7 @@ async function executeOpcode(opcode, index, adapter, verifier, breaker, recovery
             logger.debug(`[opcode ${index}] no budget left for postcondition check`);
             if (isSoft)
                 return softSkipResult(opcode, index, startTime, reason, telemetry);
-            return handleFailure(opcode, index, adapter, verifier, breaker, recoveryChain, telemetry, healerPatches, options, executionState, variantId, currentVariant, startTime, deadlineMs, globalDeadlineMs, effectiveTimeoutMs, reason);
+            return failWithRecovery(reason);
         }
         const runtimePostcondition = resolveRuntimePostcondition(opcode);
         const postStart = Date.now();
@@ -430,7 +505,7 @@ async function executeOpcode(opcode, index, adapter, verifier, breaker, recovery
             const reason = `postcondition failed: ${postcondition.reason}`;
             if (isSoft)
                 return softSkipResult(opcode, index, startTime, reason, telemetry);
-            return handleFailure(opcode, index, adapter, verifier, breaker, recoveryChain, telemetry, healerPatches, options, executionState, variantId, currentVariant, startTime, deadlineMs, globalDeadlineMs, effectiveTimeoutMs, reason);
+            return failWithRecovery(reason);
         }
         // Verify action effects through the shared policy. Weak `any_change`
         // postconditions are only meaningful if this verifier observes a real
@@ -446,7 +521,7 @@ async function executeOpcode(opcode, index, adapter, verifier, breaker, recovery
                         `postcondition passed, treating as redundant-but-successful`);
                 }
                 else {
-                    return handleFailure(opcode, index, adapter, verifier, breaker, recoveryChain, telemetry, healerPatches, options, executionState, variantId, currentVariant, startTime, deadlineMs, globalDeadlineMs, effectiveTimeoutMs, `action had no effect: ${verification.summary}`);
+                    return failWithRecovery(`action had no effect: ${verification.summary}`);
                 }
             }
         }
@@ -480,7 +555,7 @@ async function executeOpcode(opcode, index, adapter, verifier, breaker, recovery
         const errorMsg = err instanceof Error ? err.message : String(err);
         if (isSoft)
             return softSkipResult(opcode, index, startTime, errorMsg, telemetry);
-        return handleFailure(opcode, index, adapter, verifier, breaker, recoveryChain, telemetry, healerPatches, options, executionState, variantId, currentVariant, startTime, deadlineMs, globalDeadlineMs, effectiveTimeoutMs, errorMsg);
+        return failWithRecovery(errorMsg);
     }
 }
 /** Post-action breathing room (ms) injected between visible interactions

package/dist/postcondition.js

@@ -100,8 +100,8 @@ function compileRoutePattern(pattern) {
     // Support glob-like patterns: ** matches anything (incl. slashes / empty),
     // * matches a single path segment, ? matches one non-slash char.
     // Tokenize in one pass so the `*` rewrite doesn't clobber the `*` produced
-    // by the `**` rewrite (e.g. `/home**` must compile to `^/home.*$`, not
-    // `^/home.[^/]*$` which would reject `/home` itself).
+    // by the `**` rewrite (e.g. `/home**` must compile to `/home.*`, not
+    // `/home.[^/]*` which would reject `/home` itself).
     let regexStr = '';
     for (let i = 0; i < pattern.length; i++) {
         const ch = pattern[i];
@@ -122,7 +122,14 @@ function compileRoutePattern(pattern) {
             regexStr += ch;
         }
     }
-    return new RegExp(`^${regexStr}$`);
+    // Substring (contains) match — NOT anchored. Generated programs author bare
+    // patterns that are either a prefix of the real path (`/projects/` ⊂
+    // `/projects/<id>`) or a nested segment (`/tracking` ⊂
+    // `/projects/<id>/tracking`). An anchored `^…$` could match neither, which
+    // surfaced as a misleading "page stuck, no progress" failure after the
+    // navigation had actually succeeded. Callers needing strict matching pass an
+    // anchored regex (handled above).
+    return new RegExp(regexStr);
 }
 async function checkElementVisible(adapter, selector) {
     // Primary check: use Playwright waitFor (fast, reliable)

package/dist/safari-browser-bar.d.ts

@@ -1,10 +1,18 @@
 /**
- * Safari macOS browser bar — uses the Figma-exported asset directly.
+ * Safari macOS browser bar — RECONSTRUCTED layout (not a stretched asset).
  *
- * Reference SVG: assets/frames/Safari tool bar.svg (1299×88, single-row toolbar).
- * The asset is embedded as a string constant via `safari-toolbar-asset.ts`
- * (auto-generated). All icons are baked as paths — only the URL inside
- * the address pill is dynamic.
+ * The Figma export (1280×52 visible toolbar) used to be drawn with
+ * `preserveAspectRatio="none"` on a FIXED viewBox, so any target width whose
+ * aspect ratio differed from 1280:52 horizontally squished every icon — worse
+ * the wider the mockup got. This now mirrors the Chrome generator
+ * (`browser-bar.ts`): a height-driven UNIFORM scale + a DYNAMIC-width viewBox,
+ * with the toolbar's icon GLYPHS reused verbatim from the asset but re-anchored
+ *   - left group  (traffic lights, sidebar, back/forward) pinned left,
+ *   - right group (share, open, new tab, tab overview) pinned right via `dx`,
+ *   - center address pill: dynamic width, centered, inner icons follow its edges.
+ * Only the container and pill backgrounds are redrawn; the Figma blur/blend
+ * layers are dropped (resvg ignores them anyway and they are invisible on the
+ * white/dark toolbar). Colors and glyph shapes are preserved from the asset.
  *
  * Two outputs:
  *  - HTML (Playwright preview / React) — inline SVG inside a scaled wrapper

package/dist/safari-browser-bar.js

@@ -1,17 +1,25 @@
 /**
- * Safari macOS browser bar — uses the Figma-exported asset directly.
+ * Safari macOS browser bar — RECONSTRUCTED layout (not a stretched asset).
  *
- * Reference SVG: assets/frames/Safari tool bar.svg (1299×88, single-row toolbar).
- * The asset is embedded as a string constant via `safari-toolbar-asset.ts`
- * (auto-generated). All icons are baked as paths — only the URL inside
- * the address pill is dynamic.
+ * The Figma export (1280×52 visible toolbar) used to be drawn with
+ * `preserveAspectRatio="none"` on a FIXED viewBox, so any target width whose
+ * aspect ratio differed from 1280:52 horizontally squished every icon — worse
+ * the wider the mockup got. This now mirrors the Chrome generator
+ * (`browser-bar.ts`): a height-driven UNIFORM scale + a DYNAMIC-width viewBox,
+ * with the toolbar's icon GLYPHS reused verbatim from the asset but re-anchored
+ *   - left group  (traffic lights, sidebar, back/forward) pinned left,
+ *   - right group (share, open, new tab, tab overview) pinned right via `dx`,
+ *   - center address pill: dynamic width, centered, inner icons follow its edges.
+ * Only the container and pill backgrounds are redrawn; the Figma blur/blend
+ * layers are dropped (resvg ignores them anyway and they are invisible on the
+ * white/dark toolbar). Colors and glyph shapes are preserved from the asset.
  *
  * Two outputs:
  *  - HTML (Playwright preview / React) — inline SVG inside a scaled wrapper
  *  - SVG (sharp / resvg server compositing)
  */
 import { SF_PRO_TEXT_REGULAR, SF_PRO_TEXT_SEMIBOLD, } from './sf-pro-fonts.js';
-import { SAFARI_TOOLBAR_SVG, SAFARI_TOOLBAR_VIEWBOX, SAFARI_URL_PILL, } from './safari-toolbar-asset.js';
+import { SAFARI_TOOLBAR_SVG, SAFARI_TOOLBAR_VIEWBOX, SAFARI_TOOLBAR_REF_W, SAFARI_TOOLBAR_REF_H, SAFARI_URL_PILL, } from './safari-toolbar-asset.js';
 // ── Fonts ────────────────────────────────────────────────────────────────
 const FONT_CSS_HTML = `<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}
@@ -19,12 +27,71 @@ const FONT_CSS_HTML = `<style>
 </style>`;
 // SVG output: fonts are NOT embedded inline. Resvg-js 2.6.2 does not honor
 // `@font-face url(data:font/woff2;base64,…)` declarations inside SVG style
-// blocks; fonts must instead be supplied via `font.fontFiles` to the Resvg
-// constructor. The browser-bar pipeline (mockup.ts::rasterizeSvg) loads SF
-// Pro Text from disk via `sf-pro-resvg-fonts.ts`. The `font-family` hint on
-// the URL <text> element below remains for any consumer that DOES honor
-// CSS @font-face (a future Resvg release, a different SVG renderer, etc.).
+// blocks; fonts are supplied via `font.fontFiles` to the Resvg constructor by
+// `mockup.ts::rasterizeSvg` (see `sf-pro-resvg-fonts.ts`). The `font-family`
+// hint on the URL <text> element remains for renderers that DO honor it.
 const FF = "'SF Pro Text',-apple-system,BlinkMacSystemFont,system-ui,sans-serif";
+// ── Reference geometry (asset coordinate space, original 88-tall viewBox) ──
+// The cropped viewBox is `0 18 1280 52`; pills/glyphs keep their native y so
+// the vertical layout is identical to the asset — only X is reflowed.
+const REF_W = SAFARI_TOOLBAR_REF_W; // 1280
+const REF_H = SAFARI_TOOLBAR_REF_H; // 52
+const VB_Y = SAFARI_TOOLBAR_VIEWBOX.y; // 18
+const PILL_Y = SAFARI_URL_PILL.y; // 26
+const PILL_H = SAFARI_URL_PILL.height; // 36
+const PILL_RX = 18;
+const SIDEBAR_PILL = { x: 95, w: 54 };
+const NAV_PILL = { x: 163, w: 67 };
+const RIGHT_PILL = { x: 1134, w: 139 };
+const REF_URL_PILL = { x: SAFARI_URL_PILL.x, w: SAFARI_URL_PILL.width }; // 447 / 385
+// macOS traffic lights (cx derived from x + r), y=37 d=14 → cy=44 r=7.
+const TRAFFIC = [
+    { x: 17, color: '#FF736A' },
+    { x: 40, color: '#FEBC2E' },
+    { x: 63, color: '#19C332' },
+];
+// End of the fixed left cluster (back/forward pill right edge).
+const LEFT_BOUND = NAV_PILL.x + NAV_PILL.w; // 230
+// Horizontal breathing room between the address pill and the side clusters.
+const PILL_GAP = 28;
+// ── Icon glyph extraction (reuse the asset's vector paths verbatim) ────────
+// We pull only the icon glyphs (specific fills) out of the baked asset and
+// drop the pill-background / blur / blend layers, which we redraw ourselves.
+const ICON_FILLS = new Set(['#4C4C4C', '#808080', '#C6C6C6', '#E6E6E6']);
+// Light → dark recolor for the reused glyphs (mirrors the asset's dark intent).
+const DARK_ICON = {
+    '#4C4C4C': '#E4E4E4',
+    '#808080': '#8E8E93',
+    '#C6C6C6': '#6E6E73',
+    '#E6E6E6': '#4A4A4C',
+};
+let cachedGlyphs = null;
+function assetGlyphs() {
+    if (cachedGlyphs)
+        return cachedGlyphs;
+    const glyphs = [];
+    const tagRe = /<path\b[^>]*?\/>/g;
+    let m;
+    while ((m = tagRe.exec(SAFARI_TOOLBAR_SVG)) !== null) {
+        const tag = m[0];
+        const dM = tag.match(/\sd="([^"]+)"/);
+        const fM = tag.match(/\sfill="([^"]+)"/);
+        if (!dM || !fM || !ICON_FILLS.has(fM[1]))
+            continue;
+        const xM = dM[1].match(/M\s*(-?[\d.]+)/);
+        glyphs.push({ d: dM[1], fill: fM[1], x0: xM ? parseFloat(xM[1]) : 0 });
+    }
+    cachedGlyphs = glyphs;
+    return glyphs;
+}
+const r = (n) => Math.round(n * 100) / 100;
+function emitGlyph(g, isDark, tx = 0) {
+    if (!g)
+        return '';
+    const fill = isDark ? (DARK_ICON[g.fill] ?? g.fill) : g.fill;
+    const t = tx ? ` transform="translate(${r(tx)} 0)"` : '';
+    return `<path d="${g.d}" fill="${fill}"${t}/>`;
+}
 // ── Helpers ──────────────────────────────────────────────────────────────
 function escText(s) {
     return s
@@ -36,62 +103,76 @@ function escText(s) {
 function cleanUrl(raw) {
     return (raw || 'apple.com').replace(/^https?:\/\//, '').replace(/\/$/, '');
 }
-/** Build the URL <text> overlay placed inside the address pill. */
-function urlTextSvg(url, color) {
-    const cx = SAFARI_URL_PILL.x + SAFARI_URL_PILL.width / 2;
-    const cy = SAFARI_URL_PILL.y + SAFARI_URL_PILL.height / 2;
-    return `<text x="${cx}" y="${cy}" font-family="${FF}" font-size="14" font-weight="510" fill="${color}" text-anchor="middle" dominant-baseline="central">${escText(url)}</text>`;
-}
-/**
- * Strip the asset's outer `<svg ...>` opening tag so we can re-emit it with
- * our own width/height/viewBox, then append a URL text element before `</svg>`.
- */
-function buildSafariSvgInner(url, isDark) {
-    // Asset begins with `<svg width="1299" height="88" viewBox="0 0 1299 88" fill="none" xmlns="...">`
-    // Drop everything up to the end of that opening tag.
-    const openEnd = SAFARI_TOOLBAR_SVG.indexOf('>');
-    const closeStart = SAFARI_TOOLBAR_SVG.lastIndexOf('</svg>');
-    let inner = SAFARI_TOOLBAR_SVG.slice(openEnd + 1, closeStart);
-    if (isDark) {
-        // Minimal dark-mode token swap — keeps the asset usable until a dedicated
-        // dark variant ships. Hardcoded colors map to Safari's dark palette.
-        inner = inner
-            .replace(/fill="white"/g, 'fill="#2C2C2E"')
-            .replace(/fill="#FFFFFF"/gi, 'fill="#2C2C2E"')
-            .replace(/fill="#F7F7F7"/gi, 'fill="#3A3A3C"')
-            .replace(/fill="#4C4C4C"/gi, 'fill="#E4E4E4"')
-            .replace(/fill="#808080"/gi, 'fill="#8E8E93"')
-            .replace(/fill="#C6C6C6"/gi, 'fill="#6E6E73"')
-            .replace(/fill="#E6E6E6"/gi, 'fill="#4A4A4C"');
-    }
+// ── Core: reflowed toolbar SVG at the requested pixel dimensions ───────────
+function buildSafariBarSvg(svgW, svgH, isDark, url) {
+    // Uniform scale driven by height; the viewBox width grows with the target so
+    // icons never stretch — only spacing and the address pill width adapt.
+    const s = svgH / REF_H;
+    const iw = Math.max(REF_W, Math.round(svgW / s));
+    const dx = iw - REF_W; // right-cluster shift
+    // Address pill: centered, dynamic width, clamped so it never collides with
+    // the fixed side clusters.
+    const rightBound = RIGHT_PILL.x + dx; // left edge of the right cluster
+    const maxPillW = Math.max(120, (rightBound - PILL_GAP) - (LEFT_BOUND + PILL_GAP));
+    let pillW = Math.min(720, Math.max(360, Math.round(iw * 0.36)));
+    pillW = Math.min(pillW, maxPillW);
+    let pillX = Math.round(iw / 2 - pillW / 2);
+    pillX = Math.max(LEFT_BOUND + PILL_GAP, Math.min(pillX, rightBound - PILL_GAP - pillW));
+    const pillRight = pillX + pillW;
+    // Tokens
+    const barBg = isDark ? '#2C2C2E' : '#FFFFFF';
+    const pillBg = isDark ? '#3A3A3C' : '#F0F0F0';
+    const border = isDark ? '#1F1F22' : '#E4E4E4';
     const urlColor = isDark ? '#E4E4E4' : '#4C4C4C';
-    return inner + urlTextSvg(url, urlColor);
+    const gl = assetGlyphs();
+    const leftGlyphs = gl.filter(g => g.x0 < 240);
+    const readerGlyph = gl.find(g => g.fill === '#808080' && g.x0 < 640);
+    const reloadGlyph = gl.find(g => g.fill === '#808080' && g.x0 >= 640);
+    const rightGlyphs = gl.filter(g => g.x0 >= 1000);
+    const cy = PILL_Y + PILL_H / 2; // 44
+    const trafficLights = TRAFFIC.map(t => `<circle cx="${t.x + 7}" cy="${cy}" r="7" fill="${t.color}"/>`
+        + `<circle cx="${t.x + 7}" cy="${cy}" r="6.75" fill="none" stroke="#000000" stroke-opacity="0.1" stroke-width="0.5"/>`).join('');
+    const pill = (x, w) => `<rect x="${r(x)}" y="${PILL_Y}" width="${r(w)}" height="${PILL_H}" rx="${PILL_RX}" fill="${pillBg}"/>`;
+    const leftLayer = leftGlyphs.map(g => emitGlyph(g, isDark)).join('');
+    const rightLayer = rightGlyphs.map(g => emitGlyph(g, isDark, dx)).join('');
+    const body = [
+        // Toolbar background (top corners are rounded by the wrapper's clip).
+        `<rect x="0" y="${VB_Y}" width="${iw}" height="${REF_H + 1}" fill="${barBg}"/>`,
+        // Bottom hairline separator.
+        `<rect x="0" y="${VB_Y + REF_H - 0.5}" width="${iw}" height="0.5" fill="${border}"/>`,
+        // Pill backgrounds
+        pill(SIDEBAR_PILL.x, SIDEBAR_PILL.w),
+        pill(NAV_PILL.x, NAV_PILL.w),
+        pill(pillX, pillW),
+        pill(RIGHT_PILL.x + dx, RIGHT_PILL.w),
+        // Glyphs
+        trafficLights,
+        leftLayer,
+        emitGlyph(readerGlyph, isDark, pillX - REF_URL_PILL.x),
+        emitGlyph(reloadGlyph, isDark, pillRight - (REF_URL_PILL.x + REF_URL_PILL.w)),
+        rightLayer,
+        // URL text (centered in the address pill)
+        `<text x="${r(pillX + pillW / 2)}" y="${cy}" font-family="${FF}" font-size="14" font-weight="510" fill="${urlColor}" text-anchor="middle" dominant-baseline="central">${escText(url)}</text>`,
+    ].join('\n');
+    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${svgW}" height="${svgH}" viewBox="0 ${VB_Y} ${iw} ${REF_H}" preserveAspectRatio="none" fill="none">
+${body}
+</svg>`;
 }
 // ── Generator (HTML, for Playwright client preview) ──────────────────────
 export function generateSafariBrowserBarHtml(options) {
     const { config, width, height, pixelScale = 1 } = options;
     const url = cleanUrl(config.url);
     const isDark = config.colorScheme === 'dark';
-    const inner = buildSafariSvgInner(url, isDark);
-    // The asset's reference is 1299×88. We render it at the target width×height
-    // by setting the SVG width/height directly — viewBox handles the scaling.
-    // pixelScale lets the server multiply for high-DPI raster output.
     const w = width * pixelScale;
     const h = height * pixelScale;
-    const vb = SAFARI_TOOLBAR_VIEWBOX;
-    return `${FONT_CSS_HTML}<div style="width:${w}px;height:${h}px;position:relative;overflow:hidden;line-height:0;font-size:0">
-<svg width="${w}" height="${h}" viewBox="${vb.x} ${vb.y} ${vb.width} ${vb.height}" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" fill="none" style="display:block">${inner}</svg>
-</div>`;
+    const svg = buildSafariBarSvg(w, h, isDark, url);
+    return `${FONT_CSS_HTML}<div style="width:${w}px;height:${h}px;position:relative;overflow:hidden;line-height:0;font-size:0">${svg}</div>`;
 }
 // ── Generator (SVG, for sharp / resvg server compositing) ────────────────
 export function generateSafariBrowserBarSvg(options) {
     const { config, width, height } = options;
     const url = cleanUrl(config.url);
     const isDark = config.colorScheme === 'dark';
-    const inner = buildSafariSvgInner(url, isDark);
-    const vb = SAFARI_TOOLBAR_VIEWBOX;
-    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="${vb.x} ${vb.y} ${vb.width} ${vb.height}" preserveAspectRatio="none" fill="none">
-${inner}
-</svg>`;
+    return buildSafariBarSvg(width, height, isDark, url);
 }
 //# sourceMappingURL=safari-browser-bar.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autokap",
-  "version": "1.9.1",
+  "version": "1.9.3",
   "description": "AI-powered CLI tool for capturing clean screenshots of websites",
   "type": "module",
   "main": "./dist/index.js",