🐛 Fix sha over deduplication (#22)

## What is this?

We now use the name + sha to consider what needs to be deduplicated. 

---
This pull request introduces signature-based deduplication for
screenshot uploads, improving how the system checks for existing
screenshots by considering metadata such as browser and viewport
dimensions. The main changes update the API service and uploader logic
to support this new format, ensure backward compatibility, and add
related test coverage.

**Signature-based deduplication and API changes:**

* Updated `ApiService.checkShas` to accept either an array of SHA
strings (legacy) or an array of screenshot objects with metadata, and
dynamically build the request body for the `/api/sdk/check-shas`
endpoint.
* Improved error handling in `ApiService.checkShas` to extract SHA
values from either format for consistent fallback behavior.
* Modified screenshot upload flow in `ApiService` to use the new
signature-based format when checking for existing screenshots, including
passing metadata such as browser and viewport.
[[1]](diffhunk://#diff-35db277c4b1bd7577c6a6ae77fcb683696b154b2a93f8c7394f0cf1432a24e29L175-R220)
[[2]](diffhunk://#diff-35db277c4b1bd7577c6a6ae77fcb683696b154b2a93f8c7394f0cf1432a24e29L195-R233)

**Uploader logic enhancements:**

* Refactored `checkExistingFiles` in `uploader.js` to batch and send
screenshot objects with signature data (including browser and viewport)
for deduplication, and added a helper to extract browser names from
filenames.
[[1]](diffhunk://#diff-8648aa90df287bc3a7eaf07f6f8d9a0243f8b46a9972bb94da8ee68258b6113dL301-R325)
[[2]](diffhunk://#diff-8648aa90df287bc3a7eaf07f6f8d9a0243f8b46a9972bb94da8ee68258b6113dR345-R362)

**Test updates for new format:**

* Updated tests in `api-service.spec.js` to verify that requests use the
new screenshot object format, including correct metadata extraction and
fallback to defaults where necessary.
[[1]](diffhunk://#diff-b42eca429b3d40549b6623640c048c1af75c9bd57e15acd0abfcceda1211fdb2L136-R144)
[[2]](diffhunk://#diff-b42eca429b3d40549b6623640c048c1af75c9bd57e15acd0abfcceda1211fdb2L188-R204)
[[3]](diffhunk://#diff-b42eca429b3d40549b6623640c048c1af75c9bd57e15acd0abfcceda1211fdb2L242-R266)

Author: Robdel12

src/services/api-service.js

@@ -126,16 +126,38 @@ export class ApiService {
 
   /**
    * Check if SHAs already exist on the server
-   * @param {string[]} shas - Array of SHA256 hashes to check
+   * @param {string[]|Object[]} shas - Array of SHA256 hashes to check, or array of screenshot objects with metadata
    * @param {string} buildId - Build ID for screenshot record creation
    * @returns {Promise<Object>} Response with existing SHAs and screenshot data
    */
   async checkShas(shas, buildId) {
     try {
+      let requestBody;
+
+      // Check if we're using the new signature-based format (array of objects) or legacy format (array of strings)
+      if (
+        Array.isArray(shas) &&
+        shas.length > 0 &&
+        typeof shas[0] === 'object' &&
+        shas[0].sha256
+      ) {
+        // New signature-based format
+        requestBody = {
+          buildId,
+          screenshots: shas,
+        };
+      } else {
+        // Legacy SHA-only format
+        requestBody = {
+          shas,
+          buildId,
+        };
+      }
+
       const response = await this.request('/api/sdk/check-shas', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ shas, buildId }),
+        body: JSON.stringify(requestBody),
       });
       return response;
     } catch (error) {
@@ -144,7 +166,12 @@ export class ApiService {
         'SHA check failed, continuing without deduplication:',
         error.message
       );
-      return { existing: [], missing: shas, screenshots: [] };
+      // Extract SHAs for fallback response regardless of format
+      const shaList =
+        Array.isArray(shas) && shas.length > 0 && typeof shas[0] === 'object'
+          ? shas.map(s => s.sha256)
+          : shas;
+      return { existing: [], missing: shaList, screenshots: [] };
     }
   }
 
@@ -172,14 +199,25 @@ export class ApiService {
       });
     }
 
-    // Normal flow with SHA deduplication
+    // Normal flow with SHA deduplication using signature-based format
     const sha256 = crypto.createHash('sha256').update(buffer).digest('hex');
 
-    // Check if this SHA already exists
-    const checkResult = await this.checkShas([sha256], buildId);
+    // Create screenshot object with signature data for checking
+    const screenshotCheck = [
+      {
+        sha256,
+        name,
+        browser: metadata?.browser || 'chrome',
+        viewport_width: metadata?.viewport?.width || 1920,
+        viewport_height: metadata?.viewport?.height || 1080,
+      },
+    ];
+
+    // Check if this SHA with signature already exists
+    const checkResult = await this.checkShas(screenshotCheck, buildId);
 
     if (checkResult.existing && checkResult.existing.includes(sha256)) {
-      // File already exists, screenshot record was automatically created
+      // File already exists with same signature, screenshot record was automatically created
       const screenshot = checkResult.screenshots?.find(
         s => s.sha256 === sha256
       );
@@ -192,7 +230,7 @@ export class ApiService {
       };
     }
 
-    // File doesn't exist, proceed with upload
+    // File doesn't exist or has different signature, proceed with upload
     return this.request(`/api/sdk/builds/${buildId}/screenshots`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },

src/services/uploader.js

@@ -298,26 +298,31 @@ async function processFiles(files, signal, onProgress) {
 }
 
 /**
- * Check which files already exist on the server
+ * Check which files already exist on the server using signature-based deduplication
  */
 async function checkExistingFiles(fileMetadata, api, signal, buildId) {
-  const allShas = fileMetadata.map(f => f.sha256);
   const existingShas = new Set();
   const allScreenshots = [];
 
-  // Check in batches
-  for (let i = 0; i < allShas.length; i += DEFAULT_SHA_CHECK_BATCH_SIZE) {
+  // Check in batches using the new signature-based format
+  for (let i = 0; i < fileMetadata.length; i += DEFAULT_SHA_CHECK_BATCH_SIZE) {
     if (signal.aborted) throw new UploadError('Operation cancelled');
 
-    const batch = allShas.slice(i, i + DEFAULT_SHA_CHECK_BATCH_SIZE);
+    const batch = fileMetadata.slice(i, i + DEFAULT_SHA_CHECK_BATCH_SIZE);
+
+    // Convert file metadata to screenshot objects with signature data
+    const screenshotBatch = batch.map(file => ({
+      sha256: file.sha256,
+      name: file.filename.replace(/\.png$/, ''), // Remove .png extension for name
+      // Extract browser from filename if available (e.g., "homepage-chrome.png" -> "chrome")
+      browser: extractBrowserFromFilename(file.filename) || 'chrome', // Default to chrome
+      // Default viewport dimensions (these could be extracted from filename or metadata if available)
+      viewport_width: 1920,
+      viewport_height: 1080,
+    }));
 
     try {
-      const res = await api.request('/api/sdk/check-shas', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ shas: batch, buildId }),
-        signal,
-      });
+      const res = await api.checkShas(screenshotBatch, buildId);
       const { existing = [], screenshots = [] } = res || {};
       existing.forEach(sha => existingShas.add(sha));
       allScreenshots.push(...screenshots);
@@ -337,6 +342,24 @@ async function checkExistingFiles(fileMetadata, api, signal, buildId) {
   };
 }
 
+/**
+ * Extract browser name from filename
+ * @param {string} filename - The screenshot filename
+ * @returns {string|null} Browser name or null if not found
+ */
+function extractBrowserFromFilename(filename) {
+  const browsers = ['chrome', 'firefox', 'safari', 'edge', 'webkit'];
+  const lowerFilename = filename.toLowerCase();
+
+  for (const browser of browsers) {
+    if (lowerFilename.includes(browser)) {
+      return browser;
+    }
+  }
+
+  return null;
+}
+
 /**
  * Upload files to Vizzly
  */

tests/services/api-service.spec.js

@@ -133,7 +133,15 @@ describe('ApiService', () => {
       expect(firstCall[1].method).toBe('POST');
       const firstRequestBody = JSON.parse(firstCall[1].body);
       expect(firstRequestBody.buildId).toBe(buildId);
-      expect(firstRequestBody.shas).toEqual([sha256]);
+      expect(firstRequestBody.screenshots).toEqual([
+        {
+          sha256,
+          name,
+          browser: metadata.browser || 'chrome',
+          viewport_width: metadata.viewport?.width || 1920,
+          viewport_height: metadata.viewport?.height || 1080,
+        },
+      ]);
 
       // Check that upload was called with correct data (second call)
       const secondCall = global.fetch.mock.calls[1];
@@ -185,7 +193,15 @@ describe('ApiService', () => {
       const firstCall = global.fetch.mock.calls[0];
       const firstRequestBody = JSON.parse(firstCall[1].body);
       expect(firstRequestBody.buildId).toBe(buildId);
-      expect(firstRequestBody.shas).toEqual([sha256]);
+      expect(firstRequestBody.screenshots).toEqual([
+        {
+          sha256,
+          name,
+          browser: 'chrome',
+          viewport_width: 1920,
+          viewport_height: 1080,
+        },
+      ]);
 
       // Check that upload was called with empty properties (second call)
       const secondCall = global.fetch.mock.calls[1];
@@ -239,7 +255,15 @@ describe('ApiService', () => {
       expect(firstCall[0]).toBe('https://vizzly.dev/api/sdk/check-shas');
       const requestBody = JSON.parse(firstCall[1].body);
       expect(requestBody.buildId).toBe(buildId);
-      expect(requestBody.shas).toEqual([sha256]);
+      expect(requestBody.screenshots).toEqual([
+        {
+          sha256,
+          name,
+          browser: 'chrome',
+          viewport_width: 1920,
+          viewport_height: 1080,
+        },
+      ]);
 
       expect(result).toEqual({
         message: 'Screenshot already exists, skipped upload',