@ulpi/browse 0.10.0 → 1.0.0

package/src/har.ts

@@ -1,66 +0,0 @@
-/**
- * HAR 1.2 export — converts NetworkEntry[] to HTTP Archive format
- */
-
-import type { NetworkEntry } from './buffers';
-
-export interface HarRecording {
-  startTime: number;
-  active: boolean;
-}
-
-function parseQueryString(url: string): Array<{ name: string; value: string }> {
-  try {
-    const u = new URL(url);
-    return [...u.searchParams.entries()].map(([name, value]) => ({ name, value }));
-  } catch {
-    return [];
-  }
-}
-
-export function formatAsHar(entries: NetworkEntry[], startTime: number): object {
-  const harEntries = entries
-    .filter(e => e.timestamp >= startTime)
-    .map(e => ({
-      startedDateTime: new Date(e.timestamp).toISOString(),
-      time: e.duration || 0,
-      request: {
-        method: e.method,
-        url: e.url,
-        httpVersion: 'HTTP/1.1',
-        cookies: [],
-        headers: [],
-        queryString: parseQueryString(e.url),
-        headersSize: -1,
-        bodySize: -1,
-      },
-      response: {
-        status: e.status || 0,
-        statusText: '',
-        httpVersion: 'HTTP/1.1',
-        cookies: [],
-        headers: [],
-        content: {
-          size: e.size || 0,
-          mimeType: '',
-        },
-        redirectURL: '',
-        headersSize: -1,
-        bodySize: e.size || -1,
-      },
-      cache: {},
-      timings: {
-        send: 0,
-        wait: e.duration || 0,
-        receive: 0,
-      },
-    }));
-
-  return {
-    log: {
-      version: '1.2',
-      creator: { name: '@ulpi/browse', version: '0.2.0' },
-      entries: harEntries,
-    },
-  };
-}

package/src/install-skill.ts

@@ -1,98 +0,0 @@
-/**
- * browse install-skill — install the browse Claude Code skill into a project
- *
- * Copies SKILL.md to .claude/skills/browse/SKILL.md
- * and adds browse permission rules to .claude/settings.json
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-
-const PERMISSIONS = [
-  'Bash(browse:*)',
-  'Bash(browse goto:*)', 'Bash(browse back:*)', 'Bash(browse forward:*)',
-  'Bash(browse reload:*)', 'Bash(browse url:*)', 'Bash(browse text:*)',
-  'Bash(browse html:*)', 'Bash(browse links:*)', 'Bash(browse forms:*)',
-  'Bash(browse accessibility:*)', 'Bash(browse snapshot:*)',
-  'Bash(browse snapshot-diff:*)', 'Bash(browse click:*)',
-  'Bash(browse fill:*)', 'Bash(browse select:*)', 'Bash(browse hover:*)',
-  'Bash(browse type:*)', 'Bash(browse press:*)', 'Bash(browse scroll:*)',
-  'Bash(browse wait:*)', 'Bash(browse viewport:*)', 'Bash(browse upload:*)',
-  'Bash(browse dialog-accept:*)', 'Bash(browse dialog-dismiss:*)',
-  'Bash(browse js:*)', 'Bash(browse eval:*)', 'Bash(browse css:*)',
-  'Bash(browse attrs:*)', 'Bash(browse state:*)', 'Bash(browse dialog:*)',
-  'Bash(browse console:*)', 'Bash(browse network:*)',
-  'Bash(browse cookies:*)', 'Bash(browse storage:*)', 'Bash(browse perf:*)',
-  'Bash(browse devices:*)', 'Bash(browse emulate:*)',
-  'Bash(browse screenshot:*)', 'Bash(browse pdf:*)',
-  'Bash(browse responsive:*)', 'Bash(browse diff:*)',
-  'Bash(browse chain:*)', 'Bash(browse tabs:*)', 'Bash(browse tab:*)',
-  'Bash(browse newtab:*)', 'Bash(browse closetab:*)',
-  'Bash(browse sessions:*)', 'Bash(browse session-close:*)',
-  'Bash(browse status:*)', 'Bash(browse stop:*)', 'Bash(browse restart:*)',
-  'Bash(browse cookie:*)', 'Bash(browse header:*)',
-  'Bash(browse useragent:*)',
-];
-
-export function installSkill(targetDir?: string) {
-  const dir = targetDir || process.cwd();
-
-  const hasGit = fs.existsSync(path.join(dir, '.git'));
-  const hasClaude = fs.existsSync(path.join(dir, '.claude'));
-  if (!hasGit && !hasClaude) {
-    console.error(`Not a project root: ${dir}`);
-    console.error('Run from a directory with .git or .claude, or pass the path as an argument.');
-    process.exit(1);
-  }
-
-  // 1. Copy SKILL.md
-  const skillDir = path.join(dir, '.claude', 'skills', 'browse');
-  fs.mkdirSync(skillDir, { recursive: true });
-
-  const skillSource = path.resolve(import.meta.dir, '..', 'skill', 'SKILL.md');
-  const skillDest = path.join(skillDir, 'SKILL.md');
-
-  if (!fs.existsSync(skillSource)) {
-    console.error(`SKILL.md not found at ${skillSource}`);
-    console.error('Is @ulpi/browse installed correctly?');
-    process.exit(1);
-  }
-
-  fs.copyFileSync(skillSource, skillDest);
-  console.log(`Skill installed: ${path.relative(dir, skillDest)}`);
-
-  // 2. Update .claude/settings.json with permissions
-  const settingsPath = path.join(dir, '.claude', 'settings.json');
-  let settings: any = {};
-
-  if (fs.existsSync(settingsPath)) {
-    try {
-      settings = JSON.parse(fs.readFileSync(settingsPath, 'utf-8'));
-    } catch {
-      console.error(`Warning: could not parse ${settingsPath}, creating fresh`);
-      settings = {};
-    }
-  }
-
-  if (!settings.permissions) settings.permissions = {};
-  if (!Array.isArray(settings.permissions.allow)) settings.permissions.allow = [];
-
-  const existing = new Set(settings.permissions.allow);
-  let added = 0;
-  for (const perm of PERMISSIONS) {
-    if (!existing.has(perm)) {
-      settings.permissions.allow.push(perm);
-      added++;
-    }
-  }
-
-  fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n');
-
-  if (added > 0) {
-    console.log(`Permissions: ${added} rules added to ${path.relative(dir, settingsPath)}`);
-  } else {
-    console.log(`Permissions: already configured`);
-  }
-
-  console.log('\nDone. Claude Code will now use browse for web tasks automatically.');
-}

package/src/png-compare.ts

@@ -1,247 +0,0 @@
-/**
- * Self-contained PNG decoder, encoder + pixel comparator.
- * No external deps — uses only zlib (Node/Bun built-in).
- * Works in both dev mode (bun run) and compiled binary ($bunfs).
- *
- * Decoder supports: 8-bit RGB (color type 2) and RGBA (color type 6).
- * Handles all 5 PNG scanline filter types (None/Sub/Up/Average/Paeth).
- * Encoder outputs: 8-bit RGBA (color type 6), filter None, zlib-compressed.
- */
-
-import * as zlib from 'zlib';
-
-const PNG_MAGIC = [137, 80, 78, 71, 13, 10, 26, 10];
-
-export interface DecodedImage {
-  width: number;
-  height: number;
-  data: Buffer; // RGBA pixels
-}
-
-export interface CompareResult {
-  totalPixels: number;
-  diffPixels: number;
-  mismatchPct: number;
-  passed: boolean;
-  diffImage?: Buffer;
-}
-
-export function decodePNG(buf: Buffer): DecodedImage {
-  for (let i = 0; i < 8; i++) {
-    if (buf[i] !== PNG_MAGIC[i]) throw new Error('Not a valid PNG file');
-  }
-
-  const width = buf.readUInt32BE(16);
-  const height = buf.readUInt32BE(20);
-  const bitDepth = buf[24];
-  const colorType = buf[25];
-  const interlace = buf[28];
-
-  if (bitDepth !== 8) throw new Error(`Unsupported PNG bit depth: ${bitDepth} (only 8-bit supported)`);
-  if (colorType !== 2 && colorType !== 6) throw new Error(`Unsupported PNG color type: ${colorType} (only RGB=2 and RGBA=6 supported)`);
-  if (interlace !== 0) throw new Error('Interlaced PNGs are not supported');
-
-  const channels = colorType === 6 ? 4 : 3;
-  const stride = width * channels;
-
-  // Collect IDAT chunks
-  const idats: Buffer[] = [];
-  let off = 8;
-  while (off < buf.length) {
-    const len = buf.readUInt32BE(off);
-    const type = buf.toString('ascii', off + 4, off + 8);
-    if (type === 'IDAT') idats.push(buf.slice(off + 8, off + 8 + len));
-    if (type === 'IEND') break;
-    off += 12 + len;
-  }
-
-  const raw = zlib.inflateSync(Buffer.concat(idats));
-  const pixels = Buffer.alloc(width * height * 4);
-  const prev = Buffer.alloc(stride);
-
-  for (let y = 0; y < height; y++) {
-    const filterType = raw[y * (stride + 1)];
-    const scanline = Buffer.from(raw.slice(y * (stride + 1) + 1, (y + 1) * (stride + 1)));
-
-    for (let x = 0; x < stride; x++) {
-      const a = x >= channels ? scanline[x - channels] : 0;
-      const b = prev[x];
-      const c = x >= channels ? prev[x - channels] : 0;
-
-      switch (filterType) {
-        case 0: break;
-        case 1: scanline[x] = (scanline[x] + a) & 0xff; break;
-        case 2: scanline[x] = (scanline[x] + b) & 0xff; break;
-        case 3: scanline[x] = (scanline[x] + ((a + b) >> 1)) & 0xff; break;
-        case 4: {
-          const p = a + b - c;
-          const pa = Math.abs(p - a), pb = Math.abs(p - b), pc = Math.abs(p - c);
-          scanline[x] = (scanline[x] + (pa <= pb && pa <= pc ? a : pb <= pc ? b : c)) & 0xff;
-          break;
-        }
-        default: throw new Error(`Unknown PNG filter type: ${filterType}`);
-      }
-    }
-
-    for (let x = 0; x < width; x++) {
-      const si = x * channels;
-      const di = (y * width + x) * 4;
-      pixels[di] = scanline[si];
-      pixels[di + 1] = scanline[si + 1];
-      pixels[di + 2] = scanline[si + 2];
-      pixels[di + 3] = channels === 4 ? scanline[si + 3] : 255;
-    }
-
-    scanline.copy(prev);
-  }
-
-  return { width, height, data: pixels };
-}
-
-/**
- * Encode a DecodedImage (RGBA pixels) into a PNG buffer.
- * Uses filter type None (0) for simplicity — zlib handles compression.
- */
-export function encodePNG(img: DecodedImage): Buffer {
-  // Helper: write a PNG chunk (length + type + data + CRC32)
-  function writeChunk(type: string, data: Buffer): Buffer {
-    const chunk = Buffer.alloc(12 + data.length);
-    chunk.writeUInt32BE(data.length, 0);
-    chunk.write(type, 4, 4, 'ascii');
-    data.copy(chunk, 8);
-    // CRC32 covers type + data
-    const crcData = chunk.slice(4, 8 + data.length);
-    chunk.writeUInt32BE(zlib.crc32(crcData) >>> 0, 8 + data.length);
-    return chunk;
-  }
-
-  // PNG signature
-  const signature = Buffer.from(PNG_MAGIC);
-
-  // IHDR: width(4) + height(4) + bitDepth(1) + colorType(1) + compression(1) + filter(1) + interlace(1)
-  const ihdr = Buffer.alloc(13);
-  ihdr.writeUInt32BE(img.width, 0);
-  ihdr.writeUInt32BE(img.height, 4);
-  ihdr[8] = 8;   // bit depth
-  ihdr[9] = 6;   // color type: RGBA
-  ihdr[10] = 0;  // compression method
-  ihdr[11] = 0;  // filter method
-  ihdr[12] = 0;  // no interlace
-
-  // IDAT: for each scanline, prepend filter byte 0 (None), then raw RGBA pixels
-  const rawStride = img.width * 4;
-  const rawData = Buffer.alloc(img.height * (1 + rawStride));
-  for (let y = 0; y < img.height; y++) {
-    const outOff = y * (1 + rawStride);
-    rawData[outOff] = 0; // filter type: None
-    img.data.copy(rawData, outOff + 1, y * rawStride, (y + 1) * rawStride);
-  }
-  const compressed = zlib.deflateSync(rawData);
-
-  // IEND: empty chunk
-  const iend = Buffer.alloc(0);
-
-  return Buffer.concat([
-    signature,
-    writeChunk('IHDR', ihdr),
-    writeChunk('IDAT', compressed),
-    writeChunk('IEND', iend),
-  ]);
-}
-
-/**
- * Generate a visual diff image highlighting pixel differences.
- * - Pixels only in one image (size mismatch): bright red (255,0,0,255)
- * - Pixels differing beyond threshold: red-tinted (255, g/3, b/3, 255)
- * - Pixels matching: dimmed (r/3, g/3, b/3, 128)
- */
-export function generateDiffImage(base: DecodedImage, curr: DecodedImage, colorThreshold: number): Buffer {
-  const w = Math.max(base.width, curr.width);
-  const h = Math.max(base.height, curr.height);
-  const diffData = Buffer.alloc(w * h * 4);
-  const colorThreshSq = colorThreshold * colorThreshold * 3;
-
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      const di = (y * w + x) * 4;
-      const inBase = x < base.width && y < base.height;
-      const inCurr = x < curr.width && y < curr.height;
-
-      if (!inBase || !inCurr) {
-        // Size mismatch — bright red
-        diffData[di] = 255;
-        diffData[di + 1] = 0;
-        diffData[di + 2] = 0;
-        diffData[di + 3] = 255;
-        continue;
-      }
-
-      const bi = (y * base.width + x) * 4;
-      const ci = (y * curr.width + x) * 4;
-      const dr = base.data[bi] - curr.data[ci];
-      const dg = base.data[bi + 1] - curr.data[ci + 1];
-      const db = base.data[bi + 2] - curr.data[ci + 2];
-      const distSq = dr * dr + dg * dg + db * db;
-      const isDiff = colorThreshold === 0 ? distSq > 0 : distSq > colorThreshSq;
-
-      if (isDiff) {
-        // Different — red-tinted using current image colors
-        diffData[di] = 255;
-        diffData[di + 1] = (curr.data[ci + 1] / 3) | 0;
-        diffData[di + 2] = (curr.data[ci + 2] / 3) | 0;
-        diffData[di + 3] = 255;
-      } else {
-        // Matching — dimmed
-        diffData[di] = (curr.data[ci] / 3) | 0;
-        diffData[di + 1] = (curr.data[ci + 1] / 3) | 0;
-        diffData[di + 2] = (curr.data[ci + 2] / 3) | 0;
-        diffData[di + 3] = 128;
-      }
-    }
-  }
-
-  return encodePNG({ width: w, height: h, data: diffData });
-}
-
-export function compareScreenshots(
-  baselineBuf: Buffer,
-  currentBuf: Buffer,
-  thresholdPct: number = 0.1,
-  colorThreshold: number = 30,
-): CompareResult {
-  const base = decodePNG(baselineBuf);
-  const curr = decodePNG(currentBuf);
-
-  const w = Math.max(base.width, curr.width);
-  const h = Math.max(base.height, curr.height);
-  const totalPixels = w * h;
-  let diffPixels = 0;
-  // Squared color distance threshold. 0 = exact match (any difference counts).
-  const colorThreshSq = colorThreshold * colorThreshold * 3; // across R,G,B channels
-
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      const inBase = x < base.width && y < base.height;
-      const inCurr = x < curr.width && y < curr.height;
-      if (!inBase || !inCurr) { diffPixels++; continue; }
-
-      const bi = (y * base.width + x) * 4;
-      const ci = (y * curr.width + x) * 4;
-      const dr = base.data[bi] - curr.data[ci];
-      const dg = base.data[bi + 1] - curr.data[ci + 1];
-      const db = base.data[bi + 2] - curr.data[ci + 2];
-      const distSq = dr * dr + dg * dg + db * db;
-      if (colorThreshold === 0 ? distSq > 0 : distSq > colorThreshSq) diffPixels++;
-    }
-  }
-
-  const mismatchPct = totalPixels > 0 ? (diffPixels / totalPixels) * 100 : 0;
-  const passed = mismatchPct <= thresholdPct;
-  const result: CompareResult = { totalPixels, diffPixels, mismatchPct, passed };
-
-  if (!passed) {
-    result.diffImage = generateDiffImage(base, curr, colorThreshold);
-  }
-
-  return result;
-}

package/src/policy.ts

@@ -1,94 +0,0 @@
-/**
- * Action policy — gate commands via JSON config
- *
- * File: browse-policy.json (project root) or BROWSE_POLICY env var
- * Format: { default: "allow"|"deny", deny?: string[], confirm?: string[], allow?: string[] }
- * Precedence: deny > confirm > allow whitelist > default
- * Hot-reloads on mtime change.
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-
-interface ActionPolicy {
-  default?: 'allow' | 'deny';
-  deny?: string[];
-  confirm?: string[];
-  allow?: string[];
-}
-
-export type PolicyResult = 'allow' | 'deny' | 'confirm';
-
-/**
- * Walk up from cwd looking for a file by name.
- * Returns the full path if found, or null.
- */
-function findFileUpward(filename: string): string | null {
-  let dir = process.cwd();
-  for (let i = 0; i < 20; i++) {
-    const candidate = path.join(dir, filename);
-    if (fs.existsSync(candidate)) return candidate;
-    const parent = path.dirname(dir);
-    if (parent === dir) break;
-    dir = parent;
-  }
-  return null;
-}
-
-export class PolicyChecker {
-  private filePath: string | null = null;
-  private lastMtime: number = 0;
-  private policy: ActionPolicy | null = null;
-  private confirmOverrides: Set<string> | null = null;
-
-  constructor(filePath?: string) {
-    // Explicit path from env or argument, or walk up from cwd to find browse-policy.json.
-    this.filePath = filePath || process.env.BROWSE_POLICY || findFileUpward('browse-policy.json') || 'browse-policy.json';
-
-    // Parse BROWSE_CONFIRM_ACTIONS env var
-    const confirmEnv = process.env.BROWSE_CONFIRM_ACTIONS;
-    if (confirmEnv) {
-      this.confirmOverrides = new Set(
-        confirmEnv.split(',').map(s => s.trim()).filter(Boolean)
-      );
-    }
-
-    this.reload();
-  }
-
-  private reload(): void {
-    if (!this.filePath) return;
-    try {
-      const stat = fs.statSync(this.filePath);
-      if (stat.mtimeMs === this.lastMtime) return;
-      this.lastMtime = stat.mtimeMs;
-
-      const raw = fs.readFileSync(this.filePath, 'utf-8');
-      this.policy = JSON.parse(raw);
-    } catch {
-      // File missing or invalid — if it was loaded before, keep last-known-good.
-      // If it never existed, policy stays null (everything allowed).
-    }
-  }
-
-  check(command: string): PolicyResult {
-    this.reload();
-
-    // Env var overrides take priority for confirm
-    if (this.confirmOverrides?.has(command)) return 'confirm';
-
-    if (!this.policy) return 'allow';
-
-    // Precedence: deny > confirm > allow whitelist > default
-    if (this.policy.deny?.includes(command)) return 'deny';
-    if (this.policy.confirm?.includes(command)) return 'confirm';
-    if (this.policy.allow) {
-      return this.policy.allow.includes(command) ? 'allow' : 'deny';
-    }
-    return this.policy.default || 'allow';
-  }
-
-  isActive(): boolean {
-    return this.policy !== null || this.confirmOverrides !== null;
-  }
-}

package/src/rebrowser.d.ts

@@ -1,7 +0,0 @@
-/**
- * rebrowser-playwright is a drop-in fork of playwright with stealth patches.
- * Re-export playwright's types so tsc passes without the package installed.
- */
-declare module 'rebrowser-playwright' {
-  export * from 'playwright';
-}

package/src/record-export.ts

@@ -1,98 +0,0 @@
-/**
- * Record export — converts recorded browse commands into replayable formats.
- * - browse: chain-compatible JSON (replay with `browse chain`)
- * - replay: Chrome DevTools Recorder format (replay with `npx @puppeteer/replay` or Playwright)
- */
-
-export interface RecordedStep {
-  command: string;
-  args: string[];
-  timestamp: number;
-}
-
-// ─── Helpers ──────────────────────────────────────────
-
-function escapeJS(s: string): string {
-  return s.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\n/g, '\\n').replace(/\r/g, '\\r');
-}
-
-function parseViewport(sizeArg: string): { width: number; height: number } | null {
-  const match = sizeArg.match(/^(\d+)x(\d+)$/i);
-  if (!match) return null;
-  return { width: parseInt(match[1], 10), height: parseInt(match[2], 10) };
-}
-
-// ─── Browse JSON (chain-compatible) ──────────────────
-
-export function exportBrowse(steps: RecordedStep[]): string {
-  const commands = steps.map(step => [step.command, ...step.args]);
-  return JSON.stringify(commands);
-}
-
-// ─── Chrome DevTools Recorder (replay format) ────────
-
-function replayStep(step: RecordedStep): object | null {
-  const { command, args } = step;
-  const selector = args[0] || '';
-
-  switch (command) {
-    case 'goto':
-      return { type: 'navigate', url: args[0] || '', assertedEvents: [{ type: 'navigation', url: args[0] || '', title: '' }] };
-    case 'click':
-      return { type: 'click', selectors: [[selector]], offsetX: 1, offsetY: 1 };
-    case 'dblclick':
-      return { type: 'doubleClick', selectors: [[selector]], offsetX: 1, offsetY: 1 };
-    case 'fill':
-      return { type: 'change', selectors: [[selector]], value: args.slice(1).join(' ') };
-    case 'type':
-      return null; // handled as individual key events in exportReplay
-    case 'press':
-      return { type: 'keyDown', key: args[0] || '' };
-    case 'select':
-      return { type: 'change', selectors: [[selector]], value: args.slice(1).join(' ') };
-    case 'scroll':
-      if (args[0] === 'down') return { type: 'scroll', x: 0, y: 500 };
-      if (args[0] === 'up') return { type: 'scroll', x: 0, y: -500 };
-      return { type: 'scroll', selectors: [[selector]], x: 0, y: 200 };
-    case 'hover':
-      return { type: 'hover', selectors: [[selector]] };
-    case 'viewport': {
-      const vp = parseViewport(args[0] || '');
-      if (!vp) return null;
-      return { type: 'setViewport', width: vp.width, height: vp.height, deviceScaleFactor: 1, isMobile: false, hasTouch: false, isLandscape: false };
-    }
-    case 'wait':
-      if (args[0] === '--network-idle') return { type: 'waitForExpression', expression: 'new Promise(r => setTimeout(r, 2000))' };
-      if (args[0] === '--url') return { type: 'waitForExpression', expression: `location.href.includes('${escapeJS(args[1] || '')}')` };
-      return { type: 'waitForElement', selectors: [[selector]] };
-    case 'back':
-      return { type: 'waitForExpression', expression: '(window.history.back(), true)' };
-    case 'forward':
-      return { type: 'waitForExpression', expression: '(window.history.forward(), true)' };
-    default:
-      return null;
-  }
-}
-
-export function exportReplay(steps: RecordedStep[]): string {
-  const replaySteps: object[] = [
-    { type: 'setViewport', width: 1920, height: 1080, deviceScaleFactor: 1, isMobile: false, hasTouch: false, isLandscape: false },
-  ];
-
-  for (const step of steps) {
-    if (step.command === 'type') {
-      const text = step.args.join(' ');
-      for (const char of text) {
-        replaySteps.push({ type: 'keyDown', key: char });
-        replaySteps.push({ type: 'keyUp', key: char });
-      }
-      continue;
-    }
-    const converted = replayStep(step);
-    if (converted) {
-      replaySteps.push(converted);
-    }
-  }
-
-  return JSON.stringify({ title: 'browse recording', steps: replaySteps }, null, 2);
-}