refactor: vendor png codec

package.json

@@ -204,14 +204,12 @@
     "detox"
   ],
   "dependencies": {
-    "pngjs": "^7.0.0",
     "yaml": "^2.9.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.58.7",
     "@rslib/core": "0.20.1",
     "@types/node": "^22.0.0",
-    "@types/pngjs": "^6.0.5",
     "@vitest/coverage-v8": "4.1.2",
     "fallow": "^2.52.0",
     "oxfmt": "^0.42.0",

src/__tests__/cli-client-commands.test.ts

@@ -3,7 +3,7 @@ import os from 'node:os';
 import path from 'node:path';
 import { test } from 'vitest';
 import assert from 'node:assert/strict';
-import { PNG } from 'pngjs';
+import { PNG } from '../utils/png.ts';
 import { tryRunClientBackedCommand } from '../cli/commands/router.ts';
 import type {
   AgentDeviceClient,

src/__tests__/cli-diff.test.ts

@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { PNG } from 'pngjs';
+import { PNG } from '../utils/png.ts';
 import type { DaemonResponse } from '../daemon-client.ts';
 import {
   runCliCapture as captureCli,

src/__tests__/runtime-diff-screenshot.test.ts

@@ -2,7 +2,7 @@ import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { PNG } from 'pngjs';
+import { PNG } from '../utils/png.ts';
 import { test } from 'vitest';
 import type {
   AgentDeviceBackend,

src/daemon/__tests__/request-router-screenshot.test.ts

@@ -22,7 +22,7 @@ import { dispatchScreenshotViaRuntime } from '../screenshot-runtime.ts';
 import type { SessionState } from '../types.ts';
 import { LeaseRegistry } from '../lease-registry.ts';
 import { attachRefs } from '../../utils/snapshot.ts';
-import { PNG } from 'pngjs';
+import { PNG } from '../../utils/png.ts';
 import { ANDROID_EMULATOR, IOS_SIMULATOR } from '../../__tests__/test-utils/device-fixtures.ts';
 import { makeSessionStore } from '../../__tests__/test-utils/store-factory.ts';
 import { makeSession as makeBaseSession } from '../../__tests__/test-utils/session-factories.ts';

src/daemon/__tests__/screenshot-overlay.test.ts

@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { PNG } from 'pngjs';
+import { PNG } from '../../utils/png.ts';
 import { annotateScreenshotWithRefs, buildScreenshotOverlayRefs } from '../screenshot-overlay.ts';
 import { makeSnapshotState } from '../../__tests__/test-utils/snapshot-builders.ts';
 

src/daemon/handlers/__tests__/snapshot-handler.test.ts

@@ -2,7 +2,7 @@ import { test, expect, vi, beforeEach } from 'vitest';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { PNG } from 'pngjs';
+import { PNG } from '../../../utils/png.ts';
 import { handleSnapshotCommands } from '../snapshot.ts';
 import { captureSnapshot } from '../snapshot-capture.ts';
 import { SessionStore } from '../../session-store.ts';

src/daemon/screenshot-overlay.ts

@@ -1,13 +1,12 @@
 import { promises as fs } from 'node:fs';
-import { PNG } from 'pngjs';
 import {
   centerOfRect,
   type Rect,
   type ScreenshotOverlayRef,
   type SnapshotNode,
   type SnapshotState,
 } from '../utils/snapshot.ts';
-import { decodePng } from '../utils/png.ts';
+import { decodePng, PNG } from '../utils/png.ts';
 import { findNearestAncestor, normalizeType } from './snapshot-processing.ts';
 import { resolveAndroidOverlaySourceRect } from './screenshot-overlay-android.ts';
 import { hasPositiveRect, rectArea, rectContains } from './screenshot-overlay-rects.ts';

src/utils/__tests__/png.test.ts

@@ -3,8 +3,8 @@ import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { PNG } from 'pngjs';
-import { resizePngFileToMaxSize } from '../png.ts';
+import { deflateSync } from 'node:zlib';
+import { PNG, resizePngFileToMaxSize } from '../png.ts';
 
 test('resizePngFileToMaxSize leaves smaller images unchanged', async () => {
   const filePath = tmpPngPath('unchanged');
@@ -20,6 +20,153 @@ test('resizePngFileToMaxSize leaves smaller images unchanged', async () => {
   assert.deepEqual(readPngPixel(unchanged, 3, 1), [45, 90, 135, 255]);
 });
 
+test('PNG sync reader decodes filtered RGB image data', () => {
+  const png = PNG.sync.read(
+    encodeTestPng({
+      width: 2,
+      height: 1,
+      bitDepth: 8,
+      colorType: 2,
+      rawScanlines: Buffer.from([1, 10, 20, 30, 40, 60, 100]),
+    }),
+  );
+
+  assert.equal(png.width, 2);
+  assert.equal(png.height, 1);
+  assert.deepEqual(readPngPixel(png, 0, 0), [10, 20, 30, 255]);
+  assert.deepEqual(readPngPixel(png, 1, 0), [50, 80, 130, 255]);
+});
+
+test('PNG sync reader decodes indexed color and transparency', () => {
+  const png = PNG.sync.read(
+    encodeTestPng({
+      width: 4,
+      height: 1,
+      bitDepth: 2,
+      colorType: 3,
+      palette: Buffer.from([255, 0, 0, 0, 255, 0, 0, 0, 255, 20, 30, 40]),
+      transparency: Buffer.from([255, 200, 80, 255]),
+      rawScanlines: Buffer.from([0, 0b00011011]),
+    }),
+  );
+
+  assert.deepEqual(readPngPixel(png, 0, 0), [255, 0, 0, 255]);
+  assert.deepEqual(readPngPixel(png, 1, 0), [0, 255, 0, 200]);
+  assert.deepEqual(readPngPixel(png, 2, 0), [0, 0, 255, 80]);
+  assert.deepEqual(readPngPixel(png, 3, 0), [20, 30, 40, 255]);
+});
+
+test('PNG sync reader decodes RGBA alpha', () => {
+  const png = PNG.sync.read(
+    encodeTestPng({
+      width: 1,
+      height: 1,
+      bitDepth: 8,
+      colorType: 6,
+      rawScanlines: Buffer.from([0, 10, 20, 30, 40]),
+    }),
+  );
+
+  assert.deepEqual(readPngPixel(png, 0, 0), [10, 20, 30, 40]);
+});
+
+test('PNG sync reader scales 16-bit samples to 8-bit output', () => {
+  const rawScanlines = Buffer.alloc(7);
+  rawScanlines[0] = 0;
+  rawScanlines.writeUInt16BE(0x00ff, 1);
+  rawScanlines.writeUInt16BE(0x0100, 3);
+  rawScanlines.writeUInt16BE(0xffff, 5);
+
+  const png = PNG.sync.read(
+    encodeTestPng({
+      width: 1,
+      height: 1,
+      bitDepth: 16,
+      colorType: 2,
+      rawScanlines,
+    }),
+  );
+
+  assert.deepEqual(readPngPixel(png, 0, 0), [1, 1, 255, 255]);
+});
+
+test('PNG sync reader applies packed grayscale transparency', () => {
+  const png = PNG.sync.read(
+    encodeTestPng({
+      width: 2,
+      height: 1,
+      bitDepth: 4,
+      colorType: 0,
+      transparency: Buffer.from([0, 2]),
+      rawScanlines: Buffer.from([0, 0x25]),
+    }),
+  );
+
+  assert.deepEqual(readPngPixel(png, 0, 0), [34, 34, 34, 0]);
+  assert.deepEqual(readPngPixel(png, 1, 0), [85, 85, 85, 255]);
+});
+
+test('PNG sync reader decodes Adam7 interlaced RGB image data', () => {
+  const png = PNG.sync.read(
+    encodeTestPng({
+      width: 3,
+      height: 3,
+      bitDepth: 8,
+      colorType: 2,
+      interlace: 1,
+      rawScanlines: Buffer.from([
+        0,
+        ...rgb(0, 0),
+        0,
+        ...rgb(2, 0),
+        0,
+        ...rgb(0, 2),
+        ...rgb(2, 2),
+        0,
+        ...rgb(1, 0),
+        0,
+        ...rgb(1, 2),
+        0,
+        ...rgb(0, 1),
+        ...rgb(1, 1),
+        ...rgb(2, 1),
+      ]),
+    }),
+  );
+
+  for (let y = 0; y < 3; y += 1) {
+    for (let x = 0; x < 3; x += 1) {
+      assert.deepEqual(readPngPixel(png, x, y), [...rgb(x, y), 255]);
+    }
+  }
+});
+
+test('PNG sync reader rejects invalid chunk CRCs', () => {
+  const bytes = encodeTestPng({
+    width: 1,
+    height: 1,
+    bitDepth: 8,
+    colorType: 2,
+    rawScanlines: Buffer.from([0, ...rgb(0, 0)]),
+  });
+  const lastByte = bytes.length - 1;
+  bytes[lastByte] = (bytes[lastByte] ?? 0) ^ 0xff;
+
+  assert.throws(() => PNG.sync.read(bytes), /Invalid PNG .* chunk CRC/);
+});
+
+test('PNG sync reader rejects inflated data larger than IHDR scanlines', () => {
+  const bytes = encodeTestPng({
+    width: 1,
+    height: 1,
+    bitDepth: 8,
+    colorType: 6,
+    rawScanlines: Buffer.from([0, 1, 2, 3, 4, 5]),
+  });
+
+  assert.throws(() => PNG.sync.read(bytes), /PNG pixel data exceeds expected length 5/);
+});
+
 function tmpPngPath(prefix: string): string {
   return path.join(
     fs.mkdtempSync(path.join(os.tmpdir(), `agent-device-png-${prefix}-`)),
@@ -56,3 +203,57 @@ function readPngPixel(png: PNG, x: number, y: number): number[] {
     png.data[offset + 3] ?? 0,
   ];
 }
+
+function encodeTestPng(params: {
+  width: number;
+  height: number;
+  bitDepth: number;
+  colorType: number;
+  rawScanlines: Buffer;
+  interlace?: 0 | 1;
+  palette?: Buffer;
+  transparency?: Buffer;
+}): Buffer {
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(params.width, 0);
+  ihdr.writeUInt32BE(params.height, 4);
+  ihdr[8] = params.bitDepth;
+  ihdr[9] = params.colorType;
+  ihdr[10] = 0;
+  ihdr[11] = 0;
+  ihdr[12] = params.interlace ?? 0;
+
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    encodeTestChunk('IHDR', ihdr),
+    ...(params.palette ? [encodeTestChunk('PLTE', params.palette)] : []),
+    ...(params.transparency ? [encodeTestChunk('tRNS', params.transparency)] : []),
+    encodeTestChunk('IDAT', deflateSync(params.rawScanlines)),
+    encodeTestChunk('IEND', Buffer.alloc(0)),
+  ]);
+}
+
+function rgb(x: number, y: number): [number, number, number] {
+  return [x * 40 + 10, y * 50 + 20, x * 30 + y * 20 + 30];
+}
+
+function encodeTestChunk(type: string, data: Buffer): Buffer {
+  const typeBuffer = Buffer.from(type, 'ascii');
+  const chunk = Buffer.alloc(8 + data.length + 4);
+  chunk.writeUInt32BE(data.length, 0);
+  typeBuffer.copy(chunk, 4);
+  data.copy(chunk, 8);
+  chunk.writeUInt32BE(crc32(Buffer.concat([typeBuffer, data])), 8 + data.length);
+  return chunk;
+}
+
+function crc32(buffer: Buffer): number {
+  let crc = 0xffffffff;
+  for (const byte of buffer) {
+    crc ^= byte;
+    for (let bit = 0; bit < 8; bit += 1) {
+      crc = crc & 1 ? 0xedb88320 ^ (crc >>> 1) : crc >>> 1;
+    }
+  }
+  return (crc ^ 0xffffffff) >>> 0;
+}

src/utils/__tests__/screenshot-diff.test.ts

@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
-import { PNG } from 'pngjs';
+import { PNG } from '../png.ts';
 import { compareScreenshots } from '../screenshot-diff.ts';
 
 function tmpDir(): string {