autokap 1.1.0 → 1.1.3

package/assets/skill/OPCODE-REFERENCE.md

@@ -1,6 +1,6 @@
 # AutoKap Opcode Reference
 
-Detailed parameter documentation for all 25 opcodes. For workflow, rules, and examples, see [SKILL.md](SKILL.md).
+Detailed parameter documentation for all 23 opcodes. For workflow, rules, and examples, see [SKILL.md](SKILL.md).
 
 ## Common Fields (all opcodes)
 
@@ -375,46 +375,6 @@ Capture a screenshot of the viewport or a specific element.
 { "kind": "CAPTURE_SCREENSHOT", "captureId": "dashboard-main", "captureName": "Dashboard", "elementSelector": "[data-ak=\"main-content\"]", "postcondition": { "type": "always" } }
 ```
 
-## CAPTURE_DOM
-
-Capture a DOM snapshot for an interactive demo state.
-
-| Param | Type | Required | Description |
-|-------|------|----------|-------------|
-| `stateName` | string | yes | Stable state identifier used by the interactive demo player |
-| `selector` | string | no | CSS selector of a focused subtree to serialize instead of the whole page |
-
-**Can:** Capture the full page DOM for a state, or a focused subtree when only part of the page matters. Feed the interactive demo player with a state that can later host fragments and transitions.
-**Cannot:** Produce screenshots or clips. Use only when `mediaMode` is `dom`.
-
-**Tip:** Omit `selector` for page-level states. Add it when the interactive demo should ignore surrounding chrome and serialize only a mounted area.
-
-```json
-{ "kind": "CAPTURE_DOM", "stateName": "dashboard-default", "selector": "[data-ak=\"dashboard-shell\"]", "postcondition": { "type": "always" } }
-```
-
-## CAPTURE_FRAGMENT
-
-Capture a local DOM fragment that mounts on top of a previously captured state.
-
-| Param | Type | Required | Description |
-|-------|------|----------|-------------|
-| `fragmentName` | string | yes | Stable fragment identifier |
-| `parentState` | string | yes | Name of the CAPTURE_DOM state this fragment belongs to |
-| `selector` | string | yes | CSS selector of the fragment root to serialize |
-| `variantName` | string | no | Optional named fragment variant for in-place swaps |
-| `triggerSelector` | string | no | Selector of the element that should trigger this fragment in the player |
-| `mountStrategy` | `"replace"` \| `"append"` | no | How the player should mount the fragment relative to the parent state |
-
-**Can:** Capture modals, popovers, dropdowns, drawers, or any local subtree that should be replayed on top of a parent state. Capture multiple variants of the same fragment to enable in-place swaps in the player.
-**Cannot:** Stand alone without a `parentState`. Replace full-page routing states; use CAPTURE_DOM for those.
-
-**Tip:** Use `variantName` when the same fragment can appear in multiple visual forms, such as color/theme swaps or alternate content blocks on the same background state.
-
-```json
-{ "kind": "CAPTURE_FRAGMENT", "fragmentName": "pricing-modal", "parentState": "dashboard-default", "selector": "[data-ak=\"pricing-modal\"]", "triggerSelector": "[data-ak=\"open-pricing\"]", "mountStrategy": "append", "postcondition": { "type": "always" } }
-```
-
 ## BEGIN_CLIP
 
 Start recording a clip. All interactions between BEGIN_CLIP and END_CLIP are recorded.

package/assets/skill/README.md

@@ -8,7 +8,6 @@ Edit files here first.
 - `SKILL.md` is the core preset contract and must stay short enough to remain
   readable.
 - `references/*.md` holds longer mode-specific guidance and examples.
-- `STUDIO-SKILL.md` is the separate studio/composition skill.
 - `src/skill-packaging.ts` compiles these sources into the outputs each agent
   expects.
 

package/assets/skill/SKILL.md

@@ -2,7 +2,7 @@
 name: autokap-preset
 description: >
   Generate AutoKap capture programs — deterministic opcode sequences for automated
-  screenshot, clip, and interactive demo capture of web apps. Use when: creating or updating presets,
+  screenshot and clip capture of web apps. Use when: creating or updating presets,
   adding data-ak attributes for capture automation, or debugging failed capture programs.
 metadata:
   author: AutoKap
@@ -21,7 +21,7 @@ This installed skill is the **source of truth** for the AutoKap contract: opcode
 
 ## When To Use This Skill
 
-- User wants to capture screenshots, clips, or interactive demos of their web app
+- User wants to capture screenshots or clips of their web app
 - User asks to create or update an AutoKap preset
 - User needs `data-ak` attributes added to UI elements for capture
 - User is debugging a failed capture program
@@ -38,7 +38,7 @@ This installed skill is the **source of truth** for the AutoKap contract: opcode
 
 ## Quick Workflow
 
-1. **Understand the capture goal** — What pages/states should be captured? Screenshot, clip, or interactive demo? Which viewports, locales, themes, and mockups matter?
+1. **Understand the capture goal** — What pages/states should be captured? Screenshot or clip? Which viewports, locales, themes, and mockups matter?
 2. **Inspect the implementation** — Confirm routes, auth, theme, locale, and any dynamic UI state in the codebase.
 3. **Add `data-ak` attributes** — Tag every element the opcodes must interact with using stable selectors.
 4. **Choose media mode and variants** — Set `mediaMode` and define the exact viewport/locale/theme combinations.
@@ -52,7 +52,6 @@ This installed skill is the **source of truth** for the AutoKap contract: opcode
 Load these only when the request actually needs them:
 
 - **Opcode parameters** — [OPCODE-REFERENCE.md](OPCODE-REFERENCE.md)
-- **Interactive demos** — [references/interactive-demo.md](references/interactive-demo.md)
 - **Mock data** — [references/mock-data.md](references/mock-data.md)
 - **Complete examples** — [references/examples.md](references/examples.md)
 
@@ -91,7 +90,7 @@ For every element you interact with in the opcodes, add a `data-ak="descriptive-
 interface ExecutionProgram {
   presetId: string;         // Unique slug (e.g. "homepage-hero")
   programVersion: number;   // Always 1 for new programs
-  mediaMode: 'screenshot' | 'clip' | 'dom';
+  mediaMode: 'screenshot' | 'clip';
   baseUrl: string;          // Root URL of the application
   variants: VariantSpec[];  // Viewport/locale/theme combinations
   preconditions: {
@@ -105,7 +104,7 @@ interface ExecutionProgram {
   };
   steps: ExecutionOpcode[];
   artifactPlan: {
-    mediaMode: 'screenshot' | 'clip' | 'dom';
+    mediaMode: 'screenshot' | 'clip';
     cursorTheme?: 'minimal' | 'macos' | 'windows'; // Clip only. Default: 'minimal'
     format?: {
       clipFormat?: 'gif' | 'mp4' | 'both';      // Default: 'gif'
@@ -134,7 +133,7 @@ interface VariantSpec {
 
 ## Opcode Quick Reference
 
-25 opcodes available. For full parameter documentation, see [OPCODE-REFERENCE.md](OPCODE-REFERENCE.md).
+23 opcodes available. For full parameter documentation, see [OPCODE-REFERENCE.md](OPCODE-REFERENCE.md).
 
 | Kind | Selector? | Key Params | Typical Postcondition | Notes |
 |------|-----------|-----------|----------------------|-------|
@@ -155,8 +154,6 @@ interface VariantSpec {
 | `ASSERT_ROUTE` | no | `urlPattern` | `route_matches` | Validation checkpoint |
 | `ASSERT_SURFACE` | no | `selectors[]`, `matchAll` | `always` | Validation checkpoint |
 | `CAPTURE_SCREENSHOT` | no | `captureId`, `captureName`, `elementSelector?` | `always` | `elementSelector` for element-level crop |
-| `CAPTURE_DOM` | no | `stateName`, `selector?` | `always` | Interactive Demo state — see [Interactive Demo Workflow](#interactive-demo-workflow). `mediaMode: "dom"` only. Add `selector` to capture a focused subtree instead of the whole page. |
-| `CAPTURE_FRAGMENT` | yes | `fragmentName`, `parentState`, `selector`, `variantName?`, `triggerSelector?`, `mountStrategy?` | `always` | Interactive Demo fragment (modal/popover/dropdown/local subtree) — see [Fragments](#fragments-and-local-interactions). Mounted on top of `parentState` by the player. Capture the same fragment under multiple `variantName`s to enable in-place swap (e.g. background colour change). |
 | `BEGIN_CLIP` | no | `clipId`, `clipName` | `always` | Start recording |
 | `END_CLIP` | no | `clipId`, `clipName` | `always` | Stop recording. Same `clipId` as BEGIN_CLIP |
 | `CLONE_ELEMENT` | yes | `sourceSelector`, `containerSelector`, `count` | `always` | **Non-blocking.** Duplicate a template element N times |
@@ -284,25 +281,6 @@ Place this step **after** DISMISS_OVERLAYS + any content WAIT_FOR, and **immedia
 }
 ```
 
-## Interactive Demo Workflow
-
-Interactive demos are advanced and should only be used when the user wants a
-clickable DOM-based experience, not static screenshots or a clip.
-
-Key rules:
-
-- center the capture around the feature loop, not the whole app
-- use `CAPTURE_DOM` for base states
-- use `CAPTURE_FRAGMENT` for local overlays and subtree swaps
-- add authored markers such as `data-ak-interact`, `data-ak-fragment`,
-  `data-ak-model`, and `data-ak-template`
-- prefer fragments / bindings / model-driven reconstruction before custom
-  interaction `code`
-
-Read the full reference before generating an interactive demo:
-
-- [references/interactive-demo.md](references/interactive-demo.md)
-
 ## Recovery System Overview
 
 When an opcode fails, AutoKap tries 5 recovery strategies in order:
@@ -358,7 +336,7 @@ Read the full reference before adding mock data:
 4. **CLICK postconditions describe the result**, not the action (what changed, not what was clicked)
 5. **Add `WAIT_FOR` after page transitions** (login, route change, modal open)
 6. **Set `waitMs: 10000`** on postconditions involving async transitions
-7. **Persist the preset via the CLI — the program lives INSIDE `config.program`**, not in a separate file. After generating the program JSON, write the full config to a temp file and run `autokap preset create` or `autokap preset update` so the saved preset contains `program: { ...the full ExecutionProgram... }` plus any `interactiveDemo` / `mockDataInjection` blocks. The user MUST be able to run `autokap run <preset-id>` afterwards with no `--program` flag and no extra files. **Never tell the user to save the JSON to a local file**, never suggest `--program <file>` as the normal run path. The CLI fetches the program from the server.
+7. **Persist the preset via the CLI — the program lives INSIDE `config.program`**, not in a separate file. After generating the program JSON, write the full config to a temp file and run `autokap preset create` or `autokap preset update` so the saved preset contains `program: { ...the full ExecutionProgram... }` plus any `mockDataInjection` blocks. The user MUST be able to run `autokap run <preset-id>` afterwards with no `--program` flag and no extra files. **Never tell the user to save the JSON to a local file**, never suggest `--program <file>` as the normal run path. The CLI fetches the program from the server.
 8. **Use `captureId`/`clipId`** on CAPTURE_SCREENSHOT/BEGIN_CLIP for Studio and dev links to work. Always set `"devLinksEnabled": true` in the preset config when creating via API so endpoints are visible on the dashboard
 9. **Mock data opcodes are non-blocking** — they log a warning and continue if selectors miss; always pair them with `recovery: { retries: 0, ... }` and `postcondition: { type: "always" }`
 10. **Hardcode the login URL — never use `{{loginUrl}}`.** The login URL is just another navigation. You generate the entire program, so you know which path the app's login lives at — write it directly (`https://app.example.com/login`, `http://localhost:3000/login`, etc.). The `{{loginUrl}}` placeholder is **deprecated** and produces broken navigations when the user hasn't filled the optional `loginUrl` credential field. `{{email}}` and `{{password}}` placeholders for `TYPE` opcodes are still correct and required (those are sensitive secrets the user fills in).
@@ -408,7 +386,7 @@ Use the AutoKap CLI commands to create, update, and query presets. The CLI reads
 
 ### Step 1: Write the config JSON to a temp file
 
-Build the full config object (with `program`, `pages`, and optionally `interactiveDemo`/`mockDataInjection`) and write it to a temporary file:
+Build the full config object (with `program`, `pages`, and optionally `mockDataInjection`) and write it to a temporary file:
 
 ```bash
 cat > /tmp/autokap-preset.json << 'EOF'
@@ -441,7 +419,7 @@ EOF
 - **`pages`** — one entry per `CAPTURE_SCREENSHOT` opcode (`{ "id": "<captureId>", "name": "<captureName>" }`). Drives endpoint (dev link) creation. **Screenshot presets only.**
 - **`clips`** — one entry per `BEGIN_CLIP`/`END_CLIP` pair (`{ "id": "<clipId>", "name": "<clipName>" }`). Drives endpoint and Studio slot creation. **Clip presets only.** Do NOT put clip entries in `pages` — the server treats `pages` as screenshots.
 - **`program`** — the full `ExecutionProgram` with `steps`, `variants`, `artifactPlan`, etc.
-- **`captureMode`** — `"screenshot"`, `"clip"`, or `"interactive_demo"`.
+- **`captureMode`** — `"screenshot"` or `"clip"`.
 - **`devLinksEnabled: true`** — enables endpoints on the dashboard.
 
 The server auto-syncs `langs`, `themes`, `targets`, and `viewports` from `program.variants` — you do NOT need to set these manually.
@@ -553,7 +531,6 @@ Use the examples reference for ready-made shapes of:
 - anonymous screenshot presets
 - authenticated screenshot presets
 - clip presets
-- interactive demo presets
 - mock-data-enabled presets
 
 Read:

package/assets/skill/references/examples.md

@@ -59,23 +59,7 @@ Pattern:
 
 Prefer short, deterministic flows.
 
-## Example 4 — Interactive demo preset
-
-Good for:
-
-- embeddable product demos
-- focused feature loops
-- local UI swaps and fragment-driven demos
-
-Pattern:
-
-1. `mediaMode: "dom"`
-2. capture a small number of base states with `CAPTURE_DOM`
-3. capture overlays/local subtrees with `CAPTURE_FRAGMENT`
-4. wire `interactiveDemo.script`
-5. use fragments, model bindings, and small `code` blocks for reconstruction
-
-## Example 5 — Mock data preset
+## Example 4 — Mock data preset
 
 Good for:
 

package/dist/billing-operation-logging.d.ts

@@ -1,6 +1,6 @@
 import type { SupabaseClient } from '@supabase/supabase-js';
 import type { StepUsage } from './types.js';
-export type BillingOperationType = 'screenshot' | 'clip' | 'interactive_demo';
+export type BillingOperationType = 'screenshot' | 'clip';
 type BillingOperationOutcome = 'succeeded' | 'failed' | 'cancelled';
 interface BillingOperationContext {
     runId: string;
@@ -10,7 +10,6 @@ interface BillingOperationContext {
     captureId?: string | null;
     videoId?: string | null;
     clipRecordId?: string | null;
-    interactiveDemoStateId?: string | null;
     operationType: BillingOperationType;
     captureType?: 'fullpage' | 'element' | null;
     lang?: string | null;
@@ -33,7 +32,6 @@ interface BillingOperationParams {
 export declare function insertBillingOperationLog(supabase: SupabaseClient, ctx: BillingOperationContext, params: BillingOperationParams): Promise<string | null>;
 export declare function insertScreenshotOperationLog(supabase: SupabaseClient, ctx: Omit<BillingOperationContext, 'operationType'>, params: BillingOperationParams): Promise<string | null>;
 export declare function insertClipOperationLog(supabase: SupabaseClient, ctx: Omit<BillingOperationContext, 'operationType'>, params: BillingOperationParams): Promise<string | null>;
-export declare function insertInteractiveDemoOperationLog(supabase: SupabaseClient, ctx: Omit<BillingOperationContext, 'operationType'>, params: BillingOperationParams): Promise<string | null>;
 export declare function cancelScreenshotOperationLogsForCapture(supabase: SupabaseClient, captureId: string, reason: string): Promise<void>;
 export declare function reconcilePendingBillingOperationCosts(supabase: SupabaseClient, operationIds?: string[]): Promise<void>;
 export {};

package/dist/billing-operation-logging.js

@@ -131,7 +131,6 @@ export async function insertBillingOperationLog(supabase, ctx, params) {
         capture_id: ctx.captureId ?? null,
         video_id: ctx.videoId ?? null,
         clip_record_id: ctx.clipRecordId ?? null,
-        interactive_demo_state_id: ctx.interactiveDemoStateId ?? null,
         operation_type: ctx.operationType,
         operation_outcome: params.outcome,
         outcome_reason: params.outcomeReason ?? null,
@@ -178,9 +177,6 @@ export async function insertScreenshotOperationLog(supabase, ctx, params) {
 export async function insertClipOperationLog(supabase, ctx, params) {
     return insertBillingOperationLog(supabase, { ...ctx, operationType: 'clip' }, params);
 }
-export async function insertInteractiveDemoOperationLog(supabase, ctx, params) {
-    return insertBillingOperationLog(supabase, { ...ctx, operationType: 'interactive_demo' }, params);
-}
 export async function cancelScreenshotOperationLogsForCapture(supabase, captureId, reason) {
     try {
         const { error } = await supabase

package/dist/browser.js

@@ -98,7 +98,7 @@ function resolveEffectivePadding(config, bbox) {
 }
 import { dismissCookiesAndWidgets, ensureCaptureHideStyles } from './cookie-dismiss.js';
 import { CHROMIUM_ARGS, browserPool } from './browser-pool.js';
-import { logger } from './logger.js';
+import { isDebugEnabled, logger } from './logger.js';
 async function withHelperTimeout(label, timeoutMs, work) {
     if (!timeoutMs || timeoutMs <= 0) {
         return work();
@@ -117,6 +117,82 @@ async function withHelperTimeout(label, timeoutMs, work) {
             clearTimeout(timer);
     }
 }
+function isLikelyFontUrl(url) {
+    return /\.(?:woff2?|ttf|otf)(?:[?#]|$)/i.test(url);
+}
+async function logFontDiagnostics(page, stage) {
+    if (!isDebugEnabled())
+        return;
+    try {
+        const diagnostics = await page.evaluate(async () => {
+            const fontPreloads = Array.from(document.querySelectorAll('link[rel="preload"][as="font"], link[as="font"]')).map((link) => ({
+                href: link.href,
+                type: link.type || null,
+                crossOrigin: link.crossOrigin || null,
+            }));
+            const fetches = [];
+            for (const preload of fontPreloads) {
+                const startedAt = performance.now();
+                try {
+                    const response = await fetch(preload.href, {
+                        cache: 'no-store',
+                        credentials: 'include',
+                    });
+                    fetches.push({
+                        url: preload.href,
+                        ok: response.ok,
+                        status: response.status,
+                        contentType: response.headers.get('content-type'),
+                        contentLength: response.headers.get('content-length'),
+                        durationMs: Math.round(performance.now() - startedAt),
+                    });
+                }
+                catch (error) {
+                    fetches.push({
+                        url: preload.href,
+                        durationMs: Math.round(performance.now() - startedAt),
+                        error: error instanceof Error ? error.message : String(error),
+                    });
+                }
+            }
+            const normalizeFamily = (family) => family.trim().replace(/^['"]|['"]$/g, '');
+            const computedFamilies = Array.from(new Set([document.body, ...Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,label,span,[data-ak]')).slice(0, 40)]
+                .filter(Boolean)
+                .flatMap((node) => getComputedStyle(node).fontFamily
+                .split(',')
+                .map(normalizeFamily)
+                .filter(Boolean))));
+            const fontChecks = computedFamilies.map((family) => ({
+                family,
+                weight400: document.fonts.check(`400 16px "${family}"`, 'AutoKap Aa 0123456789'),
+                weight600: document.fonts.check(`600 16px "${family}"`, 'AutoKap Aa 0123456789'),
+            }));
+            return {
+                url: location.href,
+                count: document.fonts.size,
+                status: document.fonts.status,
+                faces: Array.from(document.fonts).map((font) => ({
+                    family: font.family,
+                    weight: font.weight,
+                    style: font.style,
+                    stretch: font.stretch,
+                    status: font.status,
+                })),
+                bodyComputed: getComputedStyle(document.body).fontFamily,
+                documentElementClass: document.documentElement.className,
+                bodyClass: document.body.className,
+                computedFamilies,
+                fontChecks,
+                preloads: fontPreloads,
+                fetches,
+            };
+        });
+        logger.debug(`[capture] font diagnostics ${stage}: ${JSON.stringify(diagnostics)}`);
+    }
+    catch (error) {
+        logger.debug(`[capture] font diagnostics ${stage} failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
 /**
  * Map a BCP-47 language tag to a Playwright-compatible locale string.
  * Playwright accepts both "fr" and "fr-FR". We normalize 2-char codes to their
@@ -401,6 +477,8 @@ export class Browser {
     attachDebugLifecycleListeners() {
         if (!this.page || !this.context)
             return;
+        if (!isDebugEnabled())
+            return;
         const page = this.page;
         const context = this.context;
         page.on('crash', () => {
@@ -423,6 +501,21 @@ export class Browser {
                 logger.debug(`[page] console.${type}: ${msg.text().slice(0, 200)}`);
             }
         });
+        page.on('requestfailed', (request) => {
+            const url = request.url();
+            if (request.resourceType() !== 'font' && !isLikelyFontUrl(url))
+                return;
+            logger.debug(`[page] font request failed: ${url} — ${request.failure()?.errorText ?? 'unknown error'}`);
+        });
+        page.on('response', (response) => {
+            const request = response.request();
+            const url = response.url();
+            if (request.resourceType() !== 'font' && !isLikelyFontUrl(url))
+                return;
+            const headers = response.headers();
+            logger.debug(`[page] font response: status=${response.status()} type=${headers['content-type'] ?? 'unknown'} ` +
+                `length=${headers['content-length'] ?? 'unknown'} url=${url}`);
+        });
         context.on('close', () => {
             logger.debug(`[context] CLOSE event`);
         });
@@ -466,6 +559,7 @@ export class Browser {
         this.context = await this.browser.newContext(this.buildContextOptions());
         this.page = await this.context.newPage();
         this.elementMap.clear();
+        this.attachDebugLifecycleListeners();
     }
     async setDeviceScaleFactor(deviceScaleFactor) {
         const normalizedScale = normalizeDeviceScaleFactor(deviceScaleFactor);
@@ -600,6 +694,75 @@ export class Browser {
         // Move cursor off-screen to avoid hover effects in screenshots
         await page.mouse.move(0, 0);
         await ensureCaptureHideStyles(page);
+        // Wait for web fonts to be loaded AND applied to the rendered page.
+        // next/font and other `font-display: swap` setups can report the
+        // FontFaceSet as "ready" while visible text is still painted with fallback.
+        // We force-load declared and currently computed families, verify the
+        // primary rendered families with document.fonts.check(), then wait for a
+        // committed repaint.
+        await page.evaluate(() => Promise.race([
+            (async () => {
+                const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+                const nextPaint = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+                const normalizeFamily = (family) => family.trim().replace(/^['"]|['"]$/g, '');
+                const computedFamilies = () => {
+                    const families = new Set();
+                    const nodes = [
+                        document.body,
+                        ...Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,label,span,[data-ak]')).slice(0, 80),
+                    ].filter(Boolean);
+                    for (const node of nodes) {
+                        const stack = getComputedStyle(node).fontFamily;
+                        for (const family of stack.split(',')) {
+                            const normalized = normalizeFamily(family);
+                            if (normalized
+                                && !/^(serif|sans-serif|monospace|system-ui|ui-sans-serif|ui-monospace)$/i.test(normalized)) {
+                                families.add(normalized);
+                            }
+                        }
+                    }
+                    return families;
+                };
+                const allFamilies = () => new Set([
+                    ...Array.from(document.fonts).map((font) => font.family),
+                    ...computedFamilies(),
+                ]);
+                const probe = document.createElement('div');
+                probe.setAttribute('aria-hidden', 'true');
+                probe.style.cssText = 'position:fixed;left:-9999px;top:-9999px;visibility:hidden;pointer-events:none;';
+                for (const family of allFamilies()) {
+                    const span = document.createElement('span');
+                    span.style.fontFamily = `"${family}"`;
+                    span.textContent = 'AutoKap Aa 0123456789';
+                    probe.appendChild(span);
+                }
+                document.body.appendChild(probe);
+                void probe.offsetHeight;
+                const sample = 'AutoKap Aa 0123456789';
+                await Promise.all([
+                    ...Array.from(document.fonts).map((font) => font.load().catch(() => null)),
+                    ...Array.from(allFamilies()).flatMap((family) => [
+                        document.fonts.load(`400 16px "${family}"`, sample).catch(() => null),
+                        document.fonts.load(`600 16px "${family}"`, sample).catch(() => null),
+                    ]),
+                ]);
+                await document.fonts.ready;
+                const deadline = performance.now() + 7000;
+                while (performance.now() < deadline) {
+                    const renderedFamilies = Array.from(computedFamilies()).filter((family) => !/\bFallback\b/i.test(family));
+                    const loaded = renderedFamilies.length === 0
+                        || renderedFamilies.every((family) => document.fonts.check(`400 16px "${family}"`, sample)
+                            || document.fonts.check(`600 16px "${family}"`, sample));
+                    if (document.fonts.status === 'loaded' && loaded)
+                        break;
+                    await sleep(100);
+                }
+                probe.remove();
+                await nextPaint();
+            })(),
+            new Promise((resolve) => setTimeout(resolve, 8000)),
+        ])).catch(() => { });
+        await logFontDiagnostics(page, 'before screenshot');
         return Buffer.from(await page.screenshot({ type: 'png', fullPage: false }));
     }
     async takeScreenshotForAI(options = {}) {

package/dist/capture-strategy.d.ts

@@ -2,8 +2,8 @@
  * Capture Agent — Capture Strategy
  *
  * Abstraction over the supported media modes: screenshot and clip.
- * The opcode runner is identical for all three — only the capture
- * opcodes dispatch to different strategies.
+ * The opcode runner is identical for both — only the capture opcodes dispatch
+ * to different strategies.
  */
 import type { ArtifactSpec, ArtifactResult, RuntimeAdapter, MediaMode } from './execution-types.js';
 export interface CaptureStrategy {
@@ -27,10 +27,4 @@ export declare class ClipStrategy implements CaptureStrategy {
     capture(adapter: RuntimeAdapter, _spec: ArtifactSpec): Promise<ArtifactResult>;
     postProcess(artifact: ArtifactResult, spec: ArtifactSpec): Promise<ArtifactResult>;
 }
-export declare class DomStrategy implements CaptureStrategy {
-    readonly mediaMode: "dom";
-    prepare(_adapter: RuntimeAdapter, _spec: ArtifactSpec): Promise<void>;
-    capture(adapter: RuntimeAdapter, _spec: ArtifactSpec): Promise<ArtifactResult>;
-    postProcess(artifact: ArtifactResult, _spec: ArtifactSpec): Promise<ArtifactResult>;
-}
 export declare function createCaptureStrategy(mediaMode: MediaMode): CaptureStrategy;

package/dist/capture-strategy.js

@@ -2,8 +2,8 @@
  * Capture Agent — Capture Strategy
  *
  * Abstraction over the supported media modes: screenshot and clip.
- * The opcode runner is identical for all three — only the capture
- * opcodes dispatch to different strategies.
+ * The opcode runner is identical for both — only the capture opcodes dispatch
+ * to different strategies.
  */
 // ── Screenshot strategy ─────────────────────────────────────────────
 export class ScreenshotStrategy {
@@ -58,39 +58,11 @@ export class ClipStrategy {
         return artifact;
     }
 }
-// ── DOM strategy (Interactive Demos — AUT-121) ──────────────────────
-export class DomStrategy {
-    mediaMode = 'dom';
-    async prepare(_adapter, _spec) {
-        // Nothing to prepare — DOM serialization happens inline in the
-        // CAPTURE_DOM opcode handler in opcode-runner.ts.
-    }
-    async capture(adapter, _spec) {
-        if (!adapter.serializeDom) {
-            throw new Error('DOM capture requires an adapter that implements serializeDom()');
-        }
-        const result = await adapter.serializeDom();
-        return {
-            mediaMode: 'dom',
-            buffer: Buffer.from(result.html, 'utf8'),
-            mimeType: 'text/html; charset=utf-8',
-            domHtml: result.html,
-            domAssetUrls: result.assetUrls,
-            domHtmlBytes: result.html.length,
-            dimensions: result.viewport,
-        };
-    }
-    async postProcess(artifact, _spec) {
-        // Phase 3 will add asset extraction (CAS), PurgeCSS and Brotli here.
-        return artifact;
-    }
-}
 // ── Factory ─────────────────────────────────────────────────────────
 export function createCaptureStrategy(mediaMode) {
     switch (mediaMode) {
         case 'screenshot': return new ScreenshotStrategy();
         case 'clip': return new ClipStrategy();
-        case 'dom': return new DomStrategy();
     }
 }
 //# sourceMappingURL=capture-strategy.js.map

package/dist/cli-config.d.ts

@@ -7,6 +7,7 @@ declare const DEFAULT_API_BASE_URL = "https://autokap.app";
 declare const DEFAULT_WS_URL = "wss://autokap.app/ws";
 declare const LOCAL_API_BASE_URL = "http://localhost:3000";
 declare const LOCAL_WS_URL = "ws://localhost:3000/ws";
+declare const API_KEY_ENV_VAR = "AUTOKAP_API_KEY";
 declare const API_BASE_URL_ENV_VAR = "AUTOKAP_API_BASE_URL";
 declare const WS_URL_ENV_VAR = "AUTOKAP_WS_URL";
 declare const ALLOW_UNSAFE_SERVER_ORIGIN_ENV_VAR = "AUTOKAP_ALLOW_UNSAFE_SERVER_ORIGIN";
@@ -18,4 +19,4 @@ export declare function readConfig(): Promise<AutokapConfig | null>;
 export declare function writeConfig(config: AutokapConfig): Promise<void>;
 export declare function deleteConfig(): Promise<void>;
 export declare function requireConfig(): Promise<AutokapConfig>;
-export { DEFAULT_API_BASE_URL, DEFAULT_WS_URL, LOCAL_API_BASE_URL, LOCAL_WS_URL, API_BASE_URL_ENV_VAR, WS_URL_ENV_VAR, ALLOW_UNSAFE_SERVER_ORIGIN_ENV_VAR, };
+export { DEFAULT_API_BASE_URL, DEFAULT_WS_URL, LOCAL_API_BASE_URL, LOCAL_WS_URL, API_KEY_ENV_VAR, API_BASE_URL_ENV_VAR, WS_URL_ENV_VAR, ALLOW_UNSAFE_SERVER_ORIGIN_ENV_VAR, };

package/dist/cli-config.js

@@ -6,6 +6,7 @@ const DEFAULT_API_BASE_URL = 'https://autokap.app';
 const DEFAULT_WS_URL = 'wss://autokap.app/ws';
 const LOCAL_API_BASE_URL = 'http://localhost:3000';
 const LOCAL_WS_URL = 'ws://localhost:3000/ws';
+const API_KEY_ENV_VAR = 'AUTOKAP_API_KEY';
 const API_BASE_URL_ENV_VAR = 'AUTOKAP_API_BASE_URL';
 const WS_URL_ENV_VAR = 'AUTOKAP_WS_URL';
 const ALLOW_UNSAFE_SERVER_ORIGIN_ENV_VAR = 'AUTOKAP_ALLOW_UNSAFE_SERVER_ORIGIN';
@@ -22,6 +23,17 @@ export function getDefaultWsUrl(apiBaseUrl = getDefaultApiBaseUrl()) {
     return normalizeUrl(process.env[WS_URL_ENV_VAR]) ?? deriveWsUrl(apiBaseUrl);
 }
 export async function readConfig() {
+    const envApiKey = normalizeApiKey(process.env[API_KEY_ENV_VAR]);
+    if (envApiKey) {
+        const apiBaseUrl = getDefaultApiBaseUrl();
+        const wsUrl = getDefaultWsUrl(apiBaseUrl);
+        assertAllowedApiOrigin(apiBaseUrl, DEFAULT_API_BASE_URL, API_BASE_URL_ENV_VAR);
+        return {
+            apiKey: envApiKey,
+            apiBaseUrl,
+            wsUrl,
+        };
+    }
     try {
         const raw = await fs.readFile(getConfigPath(), 'utf-8');
         const parsed = JSON.parse(raw);
@@ -81,11 +93,15 @@ export async function requireConfig() {
         process.exit(1);
     }
     if (!config) {
-        logger.error('Not authenticated. Run `npx autokap@latest init --cli-key <key>` first.');
+        logger.error(`Not authenticated. Run \`npx autokap@latest init --cli-key <key>\` first, or set ${API_KEY_ENV_VAR} in CI.`);
         process.exit(1);
     }
     return config;
 }
+function normalizeApiKey(value) {
+    const trimmed = value?.trim();
+    return trimmed || null;
+}
 function normalizeUrl(value) {
     const trimmed = value?.trim();
     if (!trimmed)
@@ -143,5 +159,5 @@ function assertAllowedApiOrigin(candidateUrl, baselineUrl, envVar) {
     }
     throw new Error(`Refusing unsafe server override to ${candidateOrigin}. Set ${ALLOW_UNSAFE_SERVER_ORIGIN_ENV_VAR}=1 to allow ${envVar ?? 'this override'} explicitly.`);
 }
-export { DEFAULT_API_BASE_URL, DEFAULT_WS_URL, LOCAL_API_BASE_URL, LOCAL_WS_URL, API_BASE_URL_ENV_VAR, WS_URL_ENV_VAR, ALLOW_UNSAFE_SERVER_ORIGIN_ENV_VAR, };
+export { DEFAULT_API_BASE_URL, DEFAULT_WS_URL, LOCAL_API_BASE_URL, LOCAL_WS_URL, API_KEY_ENV_VAR, API_BASE_URL_ENV_VAR, WS_URL_ENV_VAR, ALLOW_UNSAFE_SERVER_ORIGIN_ENV_VAR, };
 //# sourceMappingURL=cli-config.js.map

package/dist/cli-contract.d.ts

@@ -14,6 +14,7 @@ export declare const CLI_ADVANCED_SKILL_COMMAND = "autokap skill --agent <agent>
 export declare const CLI_FALLBACK_PROGRAM_COMMAND = "autokap run <preset-id> --program <file>";
 export declare function buildCliRunCommand(presetId: string, options?: {
     local?: boolean;
+    env?: string;
 }): string;
 export declare function buildCliInstalledSetupCommand(cliKey: string): string;
 export declare const CLI_PUBLIC_COMMANDS: CliPublicCommandDescriptor[];

package/dist/cli-contract.js

@@ -7,7 +7,7 @@ export const CLI_DEFAULT_SETUP_COMMAND = "npx autokap@latest init --cli-key <you
 export const CLI_ADVANCED_SKILL_COMMAND = "autokap skill --agent <agent>";
 export const CLI_FALLBACK_PROGRAM_COMMAND = "autokap run <preset-id> --program <file>";
 export function buildCliRunCommand(presetId, options = {}) {
-    return `autokap run${options.local ? " --local" : ""} ${presetId}`;
+    return `autokap run${options.local ? " --local" : ""}${options.env ? ` --env ${options.env}` : ""} ${presetId}`;
 }
 export function buildCliInstalledSetupCommand(cliKey) {
     return `autokap init --cli-key ${cliKey}`;
@@ -45,10 +45,16 @@ export const CLI_PUBLIC_COMMANDS = [
     },
     {
         id: "run",
-        command: "autokap run <preset-id>",
+        command: "autokap run <preset-id> --env local",
         summary: "Run a preset capture using local Playwright",
         docsDescriptionKey: "cliCmdRun",
     },
+    {
+        id: "auto-recapture",
+        command: "autokap auto-recapture --project <project-id> --env local",
+        summary: "Run every preset enabled for CI auto-recapture in a project",
+        docsDescriptionKey: "cliCmdAutoRecapture",
+    },
     {
         id: "run-headed",
         command: "autokap run <preset-id> --headed",

package/dist/cli-runner-local.d.ts

@@ -9,4 +9,6 @@ export declare function runLocal(presetId: string, opts: {
     output?: string;
     program?: string;
     debug?: boolean;
+    env?: string;
+    allowUploadFailure?: boolean;
 }): Promise<void>;