autokap 1.1.7 → 1.1.8

package/dist/browser-pool.js

@@ -6,6 +6,16 @@ export const CHROMIUM_ARGS = [
         '--no-sandbox',
         '--disable-setuid-sandbox',
         '--disable-dev-shm-usage',
+        // Disable font hinting to match macOS Core Text subpixel positioning.
+        // Linux Chromium defaults to "medium" hinting which pixel-snaps glyph
+        // advance widths — this widens text horizontally and shifts wrap points
+        // vs a Mac developer's local view. Validated via Docker repro on
+        // autokap.app: with default hinting "Vos screenshots en autopilote"
+        // wraps as "...screenshots en / autopilote", on Mac and with
+        // hinting=none it wraps as "...screenshots / en autopilote" (identical
+        // to local). Trade-off: minor blurriness at <12px sizes; acceptable for
+        // marketing screenshots where layout fidelity matters more.
+        '--font-render-hinting=none',
     ] : []),
     // No GPU on headless servers
     '--disable-gpu',

package/dist/browser.js

@@ -120,6 +120,40 @@ async function withHelperTimeout(label, timeoutMs, work) {
 function isLikelyFontUrl(url) {
     return /\.(?:woff2?|ttf|otf)(?:[?#]|$)/i.test(url);
 }
+/**
+ * Strip C0/C1 control characters (except TAB/LF/CR) and DEL from text nodes
+ * before screenshot. macOS Core Text renders these as zero-width/invisible by
+ * default; Linux Skia + most webfonts render them as `.notdef` tofu boxes
+ * because the font's unicode-range claims coverage of U+0000-007F but the
+ * actual font file has no glyph for control characters. Examples seen in
+ * customer sites: `\x1B[32m...\x1B[0m` ANSI escapes embedded in mock terminal
+ * output, BOM-like markers in CMS-pasted text, etc.
+ *
+ * This normalizes Linux capture output to match what a developer sees on
+ * their Mac. Idempotent — safe to run once per screenshot.
+ *
+ * Preserves: U+0009 TAB, U+000A LF, U+000D CR (semantic whitespace).
+ * Strips: U+0000-0008, U+000B, U+000C, U+000E-001F, U+007F (DEL), U+0080-009F.
+ */
+async function stripInvisibleControlChars(page) {
+    await page.evaluate(() => {
+        const RE = new RegExp('[\\u0000-\\u0008\\u000B\\u000C\\u000E-\\u001F\\u007F-\\u009F]', 'g');
+        const walk = (node) => {
+            if (node.nodeType === 3) {
+                const original = node.nodeValue ?? '';
+                if (original.length > 0 && RE.test(original)) {
+                    node.nodeValue = original.replace(RE, '');
+                }
+                return;
+            }
+            if (node.nodeType !== 1)
+                return;
+            for (const child of Array.from(node.childNodes))
+                walk(child);
+        };
+        walk(document.body);
+    }).catch(() => { });
+}
 /**
  * In-page metric probe gate: measure the width of a sample string rendered with
  * the inherited font-family vs a deliberately-divergent baseline (monospace by
@@ -327,45 +361,109 @@ async function logFontDiagnostics(page, stage) {
 }
 async function collectPlatformFontDiagnostics(page) {
     try {
+        // Step 1: in-page, find diverse visible text-bearing elements and compute
+        // a path-based CSS selector that uniquely identifies each. We sample
+        // across many tag types so badges/pills/labels (where font bugs hide) are
+        // covered — the previous version only captured h1/h2/p/button/a/body and
+        // missed all <span> content like the AssistantBadges in the hero.
+        const candidates = await page.evaluate(() => {
+            const computeSelector = (el) => {
+                const parts = [];
+                let cur = el;
+                let safety = 8;
+                while (cur && cur.tagName !== 'BODY' && cur.tagName !== 'HTML' && safety-- > 0) {
+                    const tag = cur.tagName.toLowerCase();
+                    const parent = cur.parentElement;
+                    if (!parent)
+                        break;
+                    const sameTagSiblings = Array.from(parent.children).filter((c) => c.tagName === cur.tagName);
+                    if (sameTagSiblings.length === 1) {
+                        parts.unshift(tag);
+                    }
+                    else {
+                        const idx = sameTagSiblings.indexOf(cur) + 1;
+                        parts.unshift(`${tag}:nth-of-type(${idx})`);
+                    }
+                    cur = parent;
+                }
+                return ['body', ...parts].join(' > ');
+            };
+            const TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'a', 'button', 'label', 'li', 'td', 'span', 'code', 'pre', 'kbd', 'small'];
+            const out = [];
+            const seen = new Set();
+            for (const tag of TAGS) {
+                if (out.length >= 25)
+                    break;
+                const elements = Array.from(document.querySelectorAll(tag));
+                let perTagCount = 0;
+                for (const el of elements) {
+                    if (perTagCount >= 3 || out.length >= 25)
+                        break;
+                    const text = (el.textContent ?? '').replace(/\s+/g, ' ').trim();
+                    if (text.length < 3)
+                        continue;
+                    const rect = el.getBoundingClientRect();
+                    if (rect.width < 4 || rect.height < 4)
+                        continue;
+                    const style = getComputedStyle(el);
+                    if (style.visibility === 'hidden' || style.display === 'none')
+                        continue;
+                    const selector = computeSelector(el);
+                    if (seen.has(selector))
+                        continue;
+                    seen.add(selector);
+                    out.push({
+                        selector,
+                        tag,
+                        classes: el.className.toString().slice(0, 120),
+                        text: text.slice(0, 60),
+                        fontFamily: style.fontFamily,
+                        fontSize: style.fontSize,
+                        fontWeight: style.fontWeight,
+                    });
+                    perTagCount++;
+                }
+            }
+            return out;
+        });
         const client = await page.context().newCDPSession(page);
         try {
             await client.send('DOM.enable');
             await client.send('CSS.enable');
-            const documentResponse = await client.send('DOM.getDocument', { depth: 1, pierce: true });
-            const selectors = [
-                'body',
-                'h1',
-                'h2',
-                'p',
-                'button',
-                'a',
-                '[data-ak]',
-                'span',
-            ];
+            const documentResponse = await client.send('DOM.getDocument', { depth: -1, pierce: true });
             const diagnostics = [];
-            for (const selector of selectors) {
-                const queryResponse = await client.send('DOM.querySelector', {
-                    nodeId: documentResponse.root.nodeId,
-                    selector,
-                });
-                if (!queryResponse.nodeId)
-                    continue;
-                const text = await page.locator(selector).first().evaluate((node) => (node.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 80)).catch(() => '');
-                const fontsResponse = await client.send('CSS.getPlatformFontsForNode', {
-                    nodeId: queryResponse.nodeId,
-                });
-                diagnostics.push({
-                    selector,
-                    text,
-                    fonts: (fontsResponse.fonts ?? []).map((font) => ({
-                        familyName: font.familyName,
-                        postScriptName: font.postScriptName,
-                        isCustomFont: font.isCustomFont,
-                        glyphCount: font.glyphCount,
-                    })),
-                });
-                if (diagnostics.length >= 6)
+            for (const candidate of candidates) {
+                if (diagnostics.length >= 20)
                     break;
+                try {
+                    const queryResponse = await client.send('DOM.querySelector', {
+                        nodeId: documentResponse.root.nodeId,
+                        selector: candidate.selector,
+                    });
+                    if (!queryResponse.nodeId)
+                        continue;
+                    const fontsResponse = await client.send('CSS.getPlatformFontsForNode', {
+                        nodeId: queryResponse.nodeId,
+                    });
+                    diagnostics.push({
+                        selector: candidate.selector,
+                        tag: candidate.tag,
+                        classes: candidate.classes,
+                        text: candidate.text,
+                        fontFamily: candidate.fontFamily,
+                        fontSize: candidate.fontSize,
+                        fontWeight: candidate.fontWeight,
+                        fonts: (fontsResponse.fonts ?? []).map((font) => ({
+                            familyName: font.familyName,
+                            postScriptName: font.postScriptName,
+                            isCustomFont: font.isCustomFont,
+                            glyphCount: font.glyphCount,
+                        })),
+                    });
+                }
+                catch {
+                    // Skip nodes that fail to resolve — page may be re-rendering.
+                }
             }
             return diagnostics;
         }
@@ -1086,6 +1184,11 @@ export class Browser {
         await page.mouse.move(0, 0);
         await ensureCaptureHideStyles(page);
         await this.waitForFontsBeforeScreenshot(page);
+        // Strip C0/C1 control chars from text nodes — Linux Skia renders them as
+        // .notdef tofu, macOS Core Text renders them invisibly. Normalize Linux
+        // capture to match Mac (validated via Docker repro on autokap.app's
+        // terminal block where ANSI escape literals were producing tofu boxes).
+        await stripInvisibleControlChars(page);
         await logFontDiagnostics(page, 'before screenshot');
         const screenshot = Buffer.from(await page.screenshot({ type: 'png', fullPage: false }));
         await logCaptureRenderDiagnostics(page, screenshot, this.options, 'after screenshot');

package/package.json

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