ugly-app 0.1.143 → 0.1.144

package/dist/cli/version.d.ts

@@ -1,2 +1,2 @@
-export declare const CLI_VERSION = "0.1.143";
+export declare const CLI_VERSION = "0.1.144";
 //# sourceMappingURL=version.d.ts.map

package/dist/cli/version.js

@@ -1,3 +1,3 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.143";
+export const CLI_VERSION = "0.1.144";
 //# sourceMappingURL=version.js.map

package/dist/client/Screenshot.d.ts

@@ -1,5 +1,7 @@
 /**
- * Captures a screenshot of the current viewport as a base64-encoded PNG.
+ * Captures a screenshot of the current tab as a base64-encoded PNG.
+ * Uses getDisplayMedia with preferCurrentTab for pixel-perfect capture.
+ * Falls back to html2canvas if getDisplayMedia is unavailable.
  * Returns null if capture fails.
  */
 export declare function captureScreenshot(): Promise<string | null>;

package/dist/client/Screenshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Screenshot.d.ts","sourceRoot":"","sources":["../../src/client/Screenshot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA0BhE"}
+{"version":3,"file":"Screenshot.d.ts","sourceRoot":"","sources":["../../src/client/Screenshot.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA+DhE"}

package/dist/client/Screenshot.js

@@ -1,8 +1,45 @@
 /**
- * Captures a screenshot of the current viewport as a base64-encoded PNG.
+ * Captures a screenshot of the current tab as a base64-encoded PNG.
+ * Uses getDisplayMedia with preferCurrentTab for pixel-perfect capture.
+ * Falls back to html2canvas if getDisplayMedia is unavailable.
  * Returns null if capture fails.
  */
 export async function captureScreenshot() {
+    // Try native screen capture first (Chrome 104+)
+    try {
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+            video: { displaySurface: 'browser' },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            preferCurrentTab: true,
+        });
+        const track = stream.getVideoTracks()[0];
+        if (track) {
+            // Use a video element to grab a single frame
+            const video = document.createElement('video');
+            video.srcObject = stream;
+            video.muted = true;
+            await video.play();
+            // Wait one frame for the video to render
+            await new Promise((r) => requestAnimationFrame(r));
+            const canvas = document.createElement('canvas');
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.drawImage(video, 0, 0);
+                track.stop();
+                video.srcObject = null;
+                return canvas.toDataURL('image/png').split(',')[1];
+            }
+            track.stop();
+            video.srcObject = null;
+        }
+        stream.getTracks().forEach((t) => t.stop());
+    }
+    catch {
+        // getDisplayMedia not available or user denied — fall back to html2canvas
+    }
+    // Fallback: html2canvas
     try {
         const html2canvas = (await import('html2canvas')).default;
         const canvas = await html2canvas(document.body, {
@@ -18,7 +55,7 @@ export async function captureScreenshot() {
             windowHeight: window.innerHeight,
             ignoreElements: (el) => el.getAttribute('data-id') === 'feedback-button',
         });
-        return canvas.toDataURL('image/png').split(',')[1]; // base64 only
+        return canvas.toDataURL('image/png').split(',')[1];
     }
     catch (err) {
         console.warn('[Screenshot] Capture failed:', err);

package/dist/client/Screenshot.js.map

@@ -1 +1 @@
-{"version":3,"file":"Screenshot.js","sourceRoot":"","sources":["../../src/client/Screenshot.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,KAAK,UAAU,iBAAiB;IACrC,IAAI,CAAC;QACH,MAAM,WAAW,GAAG,CAAC,MAAM,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,OAGnB,CAAC;QAEhC,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE;YAC9C,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC;YAC3C,OAAO,EAAE,KAAK;YACd,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,MAAM,EAAE,MAAM,CAAC,WAAW;YAC1B,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO;YACxB,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO;YACxB,WAAW,EAAE,MAAM,CAAC,UAAU;YAC9B,YAAY,EAAE,MAAM,CAAC,WAAW;YAChC,cAAc,EAAE,CAAC,EAAW,EAAE,EAAE,CAC9B,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,iBAAiB;SACnD,CAAC,CAAC;QACH,OAAO,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc;IACpE,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,IAAI,CAAC,8BAA8B,EAAE,GAAG,CAAC,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC"}
+{"version":3,"file":"Screenshot.js","sourceRoot":"","sources":["../../src/client/Screenshot.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugly-app",
-  "version": "0.1.143",
+  "version": "0.1.144",
   "type": "module",
   "main": "./dist/server/index.js",
   "exports": {

package/src/cli/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by prebuild — do not edit manually
-export const CLI_VERSION = "0.1.143";
+export const CLI_VERSION = "0.1.144";

package/src/client/Screenshot.ts

@@ -1,8 +1,47 @@
 /**
- * Captures a screenshot of the current viewport as a base64-encoded PNG.
+ * Captures a screenshot of the current tab as a base64-encoded PNG.
+ * Uses getDisplayMedia with preferCurrentTab for pixel-perfect capture.
+ * Falls back to html2canvas if getDisplayMedia is unavailable.
  * Returns null if capture fails.
  */
 export async function captureScreenshot(): Promise<string | null> {
+  // Try native screen capture first (Chrome 104+)
+  try {
+    const stream = await navigator.mediaDevices.getDisplayMedia({
+      video: { displaySurface: 'browser' },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      preferCurrentTab: true,
+    } as DisplayMediaStreamOptions & { preferCurrentTab: boolean });
+    const track = stream.getVideoTracks()[0];
+    if (track) {
+      // Use a video element to grab a single frame
+      const video = document.createElement('video');
+      video.srcObject = stream;
+      video.muted = true;
+      await video.play();
+
+      // Wait one frame for the video to render
+      await new Promise((r) => requestAnimationFrame(r));
+
+      const canvas = document.createElement('canvas');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.drawImage(video, 0, 0);
+        track.stop();
+        video.srcObject = null;
+        return canvas.toDataURL('image/png').split(',')[1];
+      }
+      track.stop();
+      video.srcObject = null;
+    }
+    stream.getTracks().forEach((t) => t.stop());
+  } catch {
+    // getDisplayMedia not available or user denied — fall back to html2canvas
+  }
+
+  // Fallback: html2canvas
   try {
     const html2canvas = (await import('html2canvas')).default as unknown as (
       element: HTMLElement,
@@ -23,7 +62,7 @@ export async function captureScreenshot(): Promise<string | null> {
       ignoreElements: (el: Element) =>
         el.getAttribute('data-id') === 'feedback-button',
     });
-    return canvas.toDataURL('image/png').split(',')[1]; // base64 only
+    return canvas.toDataURL('image/png').split(',')[1];
   } catch (err) {
     console.warn('[Screenshot] Capture failed:', err);
     return null;