Remove sharp dependency

[kamath]

Summary

Eliminates the sharp native dependency by replacing it with browser-native alternatives for image processing. The screenshot tool now uses PNG header parsing for dimension extraction and OffscreenCanvas with createImageBitmap for GPU-accelerated resizing, working with raw binary data to bypass CSP restrictions.

Changes

• PNG parsing: Extract image dimensions from PNG IHDR chunk (no dependency needed)
• Canvas resize: Use OffscreenCanvas and createImageBitmap for GPU-accelerated resizing
• CSP-safe: Binary data operations bypass img-src CSP restrictions
• Dimensions in output: Screenshot response now includes final image dimensions

Testing

• Build succeeds with no TypeScript errors
• Screenshot tool resizes images for Claude vision API constraints (1568px max edge, 1.15MP max)
• Tested on Chromium (OffscreenCanvas supported since v69)

🤖 Generated with Claude Code

[greptile-apps]

Greptile Overview

Greptile Summary

This PR removes the sharp native dependency and replaces it with browser-native image processing. The implementation adds custom PNG header parsing to extract dimensions and uses OffscreenCanvas with createImageBitmap for GPU-accelerated resizing.

Key changes:

• PNG dimension extraction using Buffer operations on the IHDR chunk
• Browser-based image resizing via page.evaluate() with OffscreenCanvas APIs
• Binary data handling using atob/btoa for base64 conversions
• Added dimension output in screenshot response text

Approach: The resizing now executes in the browser context rather than in Node.js, which aligns with the CSP-safe design goal. The PNG parsing correctly reads the first 24 bytes to extract width/height from the IHDR chunk structure.

Confidence Score: 4/5

• Safe to merge with minor performance considerations for large screenshots
• The implementation correctly replaces sharp with browser-native alternatives. PNG parsing logic is accurate (24 bytes for signature + IHDR dimensions). Binary data handling with atob/btoa and charCodeAt/fromCharCode follows JavaScript standards. The main consideration is that string concatenation in loops (lines 57-59, 81-84) is O(n) per iteration for building strings, which could be slower for very large screenshots (MB+), but will work correctly. The approach is architecturally sound and removes the problematic native dependency.
• src/tools/screenshot.ts - while functionally correct, the string building approach could be optimized for better performance with large images

Important Files Changed

File Analysis

Filename	Score	Overview
package.json	5/5	Removed sharp dependency from dependencies list - straightforward removal
pnpm-lock.yaml	5/5	Lock file updated to reflect sharp removal and transitive dependency cleanup
src/tools/screenshot.ts	2/5	Replaced sharp with custom PNG parsing and browser-based resizing; contains critical logic bug in string concatenation for binary data

Sequence Diagram

sequenceDiagram
    participant Client as MCP Client
    participant Handler as handleScreenshot
    participant CDP as Chrome DevTools Protocol
    participant Parser as parsePngDimensions
    participant Browser as resizeImageInBrowser
    participant Canvas as OffscreenCanvas

    Client->>Handler: screenshot request
    Handler->>CDP: Page.captureScreenshot (PNG, base64)
    CDP-->>Handler: base64 screenshot data
    Handler->>Parser: parse PNG dimensions
    Parser->>Parser: decode first 24 bytes
    Parser->>Parser: validate PNG signature
    Parser->>Parser: extract width/height from IHDR
    Parser-->>Handler: {width, height}
    Handler->>Handler: calculate shrink factor
    alt shrink < 1 (needs resize)
        Handler->>Browser: page.evaluate with base64 data
        Browser->>Browser: atob to decode base64
        Browser->>Browser: create Blob from bytes
        Browser->>Canvas: createImageBitmap from Blob
        Canvas-->>Browser: ImageBitmap
        Browser->>Canvas: OffscreenCanvas.drawImage
        Browser->>Canvas: convertToBlob (PNG)
        Browser->>Browser: btoa to encode as base64
        Browser-->>Handler: resized base64 data
    end
    Handler->>Handler: register screenshot resource
    Handler->>Client: return screenshot with dimensions

Loading

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

[P0] String concatenation for binary data will corrupt the image. In JavaScript, strings are UTF-16 encoded and string concatenation with String.fromCharCode() can mangle bytes > 127. Large images (hundreds of KB) will trigger this, resulting in corrupted/invalid PNG data returned to the caller.

Use TextDecoder and proper binary handling instead:

Suggested change

	let binary = "";
	for (let i = 0; i < resultBytes.length; i++) {
	binary += String.fromCharCode(resultBytes[i]);
	}
	const resultBytes = new Uint8Array(arrayBuffer);
	return btoa(String.fromCharCode(...resultBytes));

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/tools/screenshot.ts
Line: 81:84

Comment:
[P0] String concatenation for binary data will corrupt the image. In JavaScript, strings are UTF-16 encoded and string concatenation with `String.fromCharCode()` can mangle bytes > 127. Large images (hundreds of KB) will trigger this, resulting in corrupted/invalid PNG data returned to the caller.

Use `TextDecoder` and proper binary handling instead:
```suggestion
      const resultBytes = new Uint8Array(arrayBuffer);
      return btoa(String.fromCharCode(...resultBytes));
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

[P0] Same binary corruption issue. String concatenation in a loop will corrupt bytes > 127 when decoding base64. For screenshots that are several hundred KB or more, this loop builds corrupted binary data that will fail bitmap creation or produce incorrect images.

Fix with spread operator:

Suggested change

	const binaryString = atob(data);
	const bytes = new Uint8Array(binaryString.length);
	for (let i = 0; i < binaryString.length; i++) {
	bytes[i] = binaryString.charCodeAt(i);
	}
	const binaryString = atob(data);
	const bytes = new Uint8Array(binaryString.length);
	for (let i = 0; i < binaryString.length; i++) {
	bytes[i] = binaryString.charCodeAt(i);
	}

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/tools/screenshot.ts
Line: 55:59

Comment:
[P0] Same binary corruption issue. String concatenation in a loop will corrupt bytes > 127 when decoding base64. For screenshots that are several hundred KB or more, this loop builds corrupted binary data that will fail bitmap creation or produce incorrect images.

Fix with spread operator:
```suggestion
      const binaryString = atob(data);
      const bytes = new Uint8Array(binaryString.length);
      for (let i = 0; i < binaryString.length; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
```

How can I resolve this? If you propose a fix, please make it concise.