streamline screenshot process, add pnpm claude to start (#3)

Author: miguelg719

browser-utils.ts

@@ -1,3 +1,4 @@
+import { Page } from '@browserbasehq/stagehand';
 import { existsSync, cpSync, mkdirSync } from 'fs';
 import { platform } from 'os';
 import { join } from 'path';
@@ -101,3 +102,44 @@ export function prepareChromeProfile() {
     }
   }
 }
+
+ // Use CDP to take screenshot directly
+export async function takeScreenshot(page: Page) {
+  const currentPath = process.cwd();
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const screenshotPath = `${currentPath}/agent/browser_screenshots/screenshot-${timestamp}.png`;
+
+ const context = page.context();
+ const client = await context.newCDPSession(page);
+ const screenshotResult = await client.send('Page.captureScreenshot', {
+   format: 'png',
+   quality: 100,
+   fromSurface: false
+ });
+
+ // Save the base64 screenshot data to file with resizing if needed
+ const fs = await import('fs');
+ const sharp = (await import('sharp')).default;
+ const buffer = Buffer.from(screenshotResult.data, 'base64');
+
+ // Check image dimensions
+ const image = sharp(buffer);
+ const metadata = await image.metadata();
+ const { width, height } = metadata;
+
+ let finalBuffer: Buffer = buffer;
+
+ // Only resize if image exceeds 2000x2000
+ if (width && height && (width > 2000 || height > 2000)) {
+   finalBuffer = await sharp(buffer)
+     .resize(2000, 2000, {
+       fit: 'inside',
+       withoutEnlargement: true
+     })
+     .png()
+     .toBuffer();
+ }
+
+ fs.writeFileSync(screenshotPath, finalBuffer);
+ return screenshotPath;
+}

package.json

@@ -1,4 +1,7 @@
 {
+  "scripts": {
+    "claude": "tsx agent-browse.ts"
+  },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.1.14",
     "@browserbasehq/stagehand": "^2.5.2",
@@ -10,5 +13,6 @@
     "@types/node": "^24.7.2",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3"
-  }
+  },
+  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
 }