Add Link to Open Original Image

Author: jrjohnson

templates/report.html

@@ -101,6 +101,26 @@
           sans-serif;
       }
 
+      .lightbox-link {
+        color: rgb(255 255 255 / 0.7);
+        font:
+          0.75rem/1 system-ui,
+          sans-serif;
+        text-decoration: none;
+        padding: 0.25rem 0.75rem;
+        border: 1px solid rgb(255 255 255 / 0.3);
+        border-radius: 4px;
+        transition:
+          color 0.15s,
+          border-color 0.15s;
+
+        &:hover,
+        &:focus-visible {
+          color: white;
+          border-color: white;
+        }
+      }
+
       .lightbox-btn {
         appearance: none;
         border: none;
@@ -259,6 +279,7 @@ <h2>Missing or New Files</h2>
         <img class="lightbox-image" src="" alt="" />
         <p class="lightbox-caption"></p>
         <span class="lightbox-counter"></span>
+        <a class="lightbox-link" href="" target="_blank" rel="noopener">Open image</a>
       </div>
     </dialog>
 
@@ -268,6 +289,7 @@ <h2>Missing or New Files</h2>
         const image = lightbox.querySelector('.lightbox-image');
         const caption = lightbox.querySelector('.lightbox-caption');
         const counter = lightbox.querySelector('.lightbox-counter');
+        const link = lightbox.querySelector('.lightbox-link');
         const prevBtn = lightbox.querySelector('.lightbox-prev');
         const nextBtn = lightbox.querySelector('.lightbox-next');
 
@@ -292,6 +314,7 @@ <h2>Missing or New Files</h2>
           image.alt = img.alt;
           caption.textContent = img.alt;
           counter.textContent = `${col + 1}\u2009/\u2009${grid[row].length}`;
+          link.href = img.src;
         };
 
         const open = (r, c) => {

test/report-generator.test.ts

@@ -158,14 +158,15 @@ describe('report-generator', () => {
       expect(html).toContain('aria-label="Next image"');
     });
 
-    it('should include lightbox panel with image, caption, and counter', () => {
+    it('should include lightbox panel with image, caption, counter, and open link', () => {
       const pair = testDir.createPngFilePair('a.png', 'red', 'blue');
       const html = generateAndRead([{ pair, hasDifference: true, diffPercentage: 10 }]);
 
       expect(html).toContain('class="lightbox-panel"');
       expect(html).toContain('class="lightbox-image"');
       expect(html).toContain('class="lightbox-caption"');
       expect(html).toContain('class="lightbox-counter"');
+      expect(html).toContain('class="lightbox-link"');
     });
 
     it('should wrap images in button triggers instead of anchor tags', () => {
@@ -235,6 +236,32 @@ describe('report-generator', () => {
       expect(html).toContain('ArrowDown');
     });
 
+    it('should render the open image link that opens in a new tab', () => {
+      const pair = testDir.createPngFilePair('a.png', 'red', 'blue');
+      const html = generateAndRead([{ pair, hasDifference: true, diffPercentage: 10 }]);
+
+      expect(html).toContain('<a class="lightbox-link"');
+      expect(html).toContain('target="_blank"');
+      expect(html).toContain('rel="noopener"');
+      expect(html).toContain('>Open image</a>');
+    });
+
+    it('should include script logic to update the open image link href', () => {
+      const pair = testDir.createPngFilePair('a.png', 'red', 'blue');
+      const html = generateAndRead([{ pair, hasDifference: true, diffPercentage: 10 }]);
+
+      expect(html).toContain('.lightbox-link');
+      expect(html).toContain('link.href = img.src');
+    });
+
+    it('should include CSS styles for the open image link', () => {
+      const pair = testDir.createPngFilePair('a.png', 'red', 'blue');
+      const html = generateAndRead([{ pair, hasDifference: true, diffPercentage: 10 }]);
+
+      expect(html).toContain('.lightbox-link');
+      expect(html).toContain('text-decoration: none');
+    });
+
     it('should include lightbox CSS with zoom-in cursor and dialog styles', () => {
       const pair = testDir.createPngFilePair('a.png', 'red', 'blue');
       const html = generateAndRead([{ pair, hasDifference: true, diffPercentage: 10 }]);