git-shots-cli 0.1.0

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,194 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/config.ts
+import { readFileSync, existsSync } from "fs";
+import { resolve } from "path";
+var DEFAULT_CONFIG = {
+  project: "",
+  server: "https://git-shots.rijid356.workers.dev",
+  directory: "docs/screenshots/current"
+};
+function loadConfig(cwd = process.cwd()) {
+  const configPath = resolve(cwd, ".git-shots.json");
+  if (!existsSync(configPath)) {
+    return DEFAULT_CONFIG;
+  }
+  try {
+    const raw = readFileSync(configPath, "utf-8");
+    const parsed = JSON.parse(raw);
+    return { ...DEFAULT_CONFIG, ...parsed };
+  } catch {
+    return DEFAULT_CONFIG;
+  }
+}
+
+// src/upload.ts
+import { readFileSync as readFileSync2, existsSync as existsSync2 } from "fs";
+import { resolve as resolve2, basename, dirname } from "path";
+import { execSync } from "child_process";
+import { glob } from "glob";
+import chalk from "chalk";
+async function upload(config, options) {
+  const dir = resolve2(process.cwd(), config.directory);
+  if (!existsSync2(dir)) {
+    console.error(chalk.red(`Directory not found: ${dir}`));
+    process.exit(1);
+  }
+  const branch = options.branch ?? execSync("git rev-parse --abbrev-ref HEAD", { encoding: "utf-8" }).trim();
+  const sha = options.sha ?? execSync("git rev-parse HEAD", { encoding: "utf-8" }).trim();
+  console.log(chalk.dim(`Project: ${config.project}`));
+  console.log(chalk.dim(`Branch:  ${branch}`));
+  console.log(chalk.dim(`SHA:     ${sha.slice(0, 7)}`));
+  console.log(chalk.dim(`Dir:     ${dir}`));
+  console.log();
+  const files = await glob("**/*.png", { cwd: dir });
+  if (files.length === 0) {
+    console.log(chalk.yellow("No PNG files found."));
+    return;
+  }
+  console.log(chalk.dim(`Found ${files.length} screenshots`));
+  const formData = new FormData();
+  formData.append("project", config.project);
+  formData.append("branch", branch);
+  formData.append("gitSha", sha);
+  for (const file of files) {
+    const fullPath = resolve2(dir, file);
+    const buffer = readFileSync2(fullPath);
+    const blob = new Blob([buffer], { type: "image/png" });
+    const dirName = dirname(file);
+    const fieldName = dirName !== "." ? `${dirName}/${basename(file)}` : basename(file);
+    formData.append(fieldName, blob, basename(file));
+  }
+  const url = `${config.server}/api/upload`;
+  console.log(chalk.dim(`Uploading to ${url}...`));
+  try {
+    const res = await fetch(url, {
+      method: "POST",
+      body: formData,
+      headers: { Origin: config.server }
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      console.error(chalk.red(`Upload failed: ${JSON.stringify(data)}`));
+      process.exit(1);
+    }
+    console.log(chalk.green(`Uploaded ${data.uploaded} screenshots`));
+  } catch (err) {
+    console.error(chalk.red(`Request failed: ${err}`));
+    process.exit(1);
+  }
+}
+
+// src/compare.ts
+import chalk2 from "chalk";
+async function compare(config, options) {
+  const url = `${config.server}/api/compare`;
+  const body = {
+    project: config.project,
+    base: options.base ?? "main",
+    head: options.head,
+    threshold: options.threshold ?? 0.1
+  };
+  console.log(chalk2.dim(`Comparing ${body.base} vs ${body.head} for ${config.project}...`));
+  try {
+    const res = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Origin: config.server },
+      body: JSON.stringify(body)
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      console.error(chalk2.red(`Compare failed: ${JSON.stringify(data)}`));
+      process.exit(1);
+    }
+    console.log();
+    console.log(`Compared ${chalk2.bold(data.compared)} screens`);
+    console.log();
+    if (data.diffs.length === 0) {
+      console.log(chalk2.green("No visual differences found!"));
+      return;
+    }
+    console.log(chalk2.dim("Screen".padEnd(30) + "Mismatch".padEnd(15) + "Pixels"));
+    console.log(chalk2.dim("-".repeat(55)));
+    for (const d of data.diffs) {
+      const pct = d.mismatchPercentage.toFixed(2) + "%";
+      const color = d.mismatchPercentage > 10 ? chalk2.red : d.mismatchPercentage > 1 ? chalk2.yellow : chalk2.green;
+      console.log(
+        d.screen.padEnd(30) + color(pct.padEnd(15)) + chalk2.dim(d.mismatchPixels.toLocaleString())
+      );
+    }
+  } catch (err) {
+    console.error(chalk2.red(`Request failed: ${err}`));
+    process.exit(1);
+  }
+}
+
+// src/status.ts
+import chalk3 from "chalk";
+async function status(config) {
+  const url = `${config.server}/api/diffs?project=${encodeURIComponent(config.project)}`;
+  try {
+    const res = await fetch(url);
+    const data = await res.json();
+    if (!res.ok) {
+      console.error(chalk3.red(`Status failed: ${JSON.stringify(data)}`));
+      process.exit(1);
+    }
+    if (data.length === 0) {
+      console.log(chalk3.dim("No diffs found for this project."));
+      return;
+    }
+    console.log(`${chalk3.bold(data.length)} diffs for ${config.project}`);
+    console.log();
+    console.log(chalk3.dim("ID".padEnd(8) + "Status".padEnd(12) + "Mismatch".padEnd(12) + "Date"));
+    console.log(chalk3.dim("-".repeat(50)));
+    for (const { diff } of data) {
+      const statusColor = diff.status === "approved" ? chalk3.green : diff.status === "rejected" ? chalk3.red : chalk3.yellow;
+      console.log(
+        String(diff.id).padEnd(8) + statusColor(diff.status.padEnd(12)) + (diff.mismatch_percentage.toFixed(2) + "%").padEnd(12) + chalk3.dim(new Date(diff.created_at * 1e3).toLocaleDateString())
+      );
+    }
+  } catch (err) {
+    console.error(chalk3.red(`Request failed: ${err}`));
+    process.exit(1);
+  }
+}
+
+// src/index.ts
+var program = new Command();
+program.name("git-shots").description("CLI for git-shots visual regression platform").version("0.1.0");
+program.command("upload").description("Upload screenshots to git-shots").option("-p, --project <slug>", "Project slug").option("-s, --server <url>", "Server URL").option("-d, --directory <path>", "Screenshots directory").option("-b, --branch <name>", "Git branch (auto-detected)").option("--sha <hash>", "Git SHA (auto-detected)").action(async (options) => {
+  const config = loadConfig();
+  if (options.project) config.project = options.project;
+  if (options.server) config.server = options.server;
+  if (options.directory) config.directory = options.directory;
+  if (!config.project) {
+    console.error("Error: project slug required. Use --project or .git-shots.json");
+    process.exit(1);
+  }
+  await upload(config, { branch: options.branch, sha: options.sha });
+});
+program.command("compare").description("Compare screenshots between branches").requiredOption("--head <branch>", "Head branch to compare").option("-p, --project <slug>", "Project slug").option("-s, --server <url>", "Server URL").option("--base <branch>", "Base branch (default: main)").option("-t, --threshold <number>", "Mismatch threshold 0-1", parseFloat).action(async (options) => {
+  const config = loadConfig();
+  if (options.project) config.project = options.project;
+  if (options.server) config.server = options.server;
+  if (!config.project) {
+    console.error("Error: project slug required. Use --project or .git-shots.json");
+    process.exit(1);
+  }
+  await compare(config, { base: options.base, head: options.head, threshold: options.threshold });
+});
+program.command("status").description("Show current diff status").option("-p, --project <slug>", "Project slug").option("-s, --server <url>", "Server URL").action(async (options) => {
+  const config = loadConfig();
+  if (options.project) config.project = options.project;
+  if (options.server) config.server = options.server;
+  if (!config.project) {
+    console.error("Error: project slug required. Use --project or .git-shots.json");
+    process.exit(1);
+  }
+  await status(config);
+});
+program.parse();

package/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "git-shots-cli",
+	"version": "0.1.0",
+	"description": "CLI for git-shots visual regression platform",
+	"type": "module",
+	"bin": {
+		"git-shots": "dist/index.js"
+	},
+	"scripts": {
+		"build": "tsup src/index.ts --format esm --dts",
+		"dev": "tsup src/index.ts --format esm --watch"
+	},
+	"dependencies": {
+		"commander": "^12.0.0",
+		"chalk": "^5.3.0",
+		"glob": "^11.0.0"
+	},
+	"devDependencies": {
+		"tsup": "^8.0.0",
+		"typescript": "^5.0.0",
+		"@types/node": "^22.0.0"
+	}
+}

package/src/compare.ts

@@ -0,0 +1,57 @@
+import chalk from 'chalk';
+import type { GitShotsConfig } from './config.js';
+
+export async function compare(
+	config: GitShotsConfig,
+	options: { base?: string; head: string; threshold?: number }
+) {
+	const url = `${config.server}/api/compare`;
+	const body = {
+		project: config.project,
+		base: options.base ?? 'main',
+		head: options.head,
+		threshold: options.threshold ?? 0.1
+	};
+
+	console.log(chalk.dim(`Comparing ${body.base} vs ${body.head} for ${config.project}...`));
+
+	try {
+		const res = await fetch(url, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json', Origin: config.server },
+			body: JSON.stringify(body)
+		});
+		const data = await res.json();
+
+		if (!res.ok) {
+			console.error(chalk.red(`Compare failed: ${JSON.stringify(data)}`));
+			process.exit(1);
+		}
+
+		console.log();
+		console.log(`Compared ${chalk.bold(data.compared)} screens`);
+		console.log();
+
+		if (data.diffs.length === 0) {
+			console.log(chalk.green('No visual differences found!'));
+			return;
+		}
+
+		// Print table
+		console.log(chalk.dim('Screen'.padEnd(30) + 'Mismatch'.padEnd(15) + 'Pixels'));
+		console.log(chalk.dim('-'.repeat(55)));
+
+		for (const d of data.diffs) {
+			const pct = d.mismatchPercentage.toFixed(2) + '%';
+			const color = d.mismatchPercentage > 10 ? chalk.red : d.mismatchPercentage > 1 ? chalk.yellow : chalk.green;
+			console.log(
+				d.screen.padEnd(30) +
+				color(pct.padEnd(15)) +
+				chalk.dim(d.mismatchPixels.toLocaleString())
+			);
+		}
+	} catch (err) {
+		console.error(chalk.red(`Request failed: ${err}`));
+		process.exit(1);
+	}
+}

package/src/config.ts

@@ -0,0 +1,28 @@
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+export interface GitShotsConfig {
+	project: string;
+	server: string;
+	directory: string;
+}
+
+const DEFAULT_CONFIG: GitShotsConfig = {
+	project: '',
+	server: 'https://git-shots.rijid356.workers.dev',
+	directory: 'docs/screenshots/current'
+};
+
+export function loadConfig(cwd: string = process.cwd()): GitShotsConfig {
+	const configPath = resolve(cwd, '.git-shots.json');
+	if (!existsSync(configPath)) {
+		return DEFAULT_CONFIG;
+	}
+	try {
+		const raw = readFileSync(configPath, 'utf-8');
+		const parsed = JSON.parse(raw);
+		return { ...DEFAULT_CONFIG, ...parsed };
+	} catch {
+		return DEFAULT_CONFIG;
+	}
+}

package/src/index.ts

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { loadConfig } from './config.js';
+import { upload } from './upload.js';
+import { compare } from './compare.js';
+import { status } from './status.js';
+
+const program = new Command();
+
+program
+	.name('git-shots')
+	.description('CLI for git-shots visual regression platform')
+	.version('0.1.0');
+
+program
+	.command('upload')
+	.description('Upload screenshots to git-shots')
+	.option('-p, --project <slug>', 'Project slug')
+	.option('-s, --server <url>', 'Server URL')
+	.option('-d, --directory <path>', 'Screenshots directory')
+	.option('-b, --branch <name>', 'Git branch (auto-detected)')
+	.option('--sha <hash>', 'Git SHA (auto-detected)')
+	.action(async (options) => {
+		const config = loadConfig();
+		if (options.project) config.project = options.project;
+		if (options.server) config.server = options.server;
+		if (options.directory) config.directory = options.directory;
+		if (!config.project) {
+			console.error('Error: project slug required. Use --project or .git-shots.json');
+			process.exit(1);
+		}
+		await upload(config, { branch: options.branch, sha: options.sha });
+	});
+
+program
+	.command('compare')
+	.description('Compare screenshots between branches')
+	.requiredOption('--head <branch>', 'Head branch to compare')
+	.option('-p, --project <slug>', 'Project slug')
+	.option('-s, --server <url>', 'Server URL')
+	.option('--base <branch>', 'Base branch (default: main)')
+	.option('-t, --threshold <number>', 'Mismatch threshold 0-1', parseFloat)
+	.action(async (options) => {
+		const config = loadConfig();
+		if (options.project) config.project = options.project;
+		if (options.server) config.server = options.server;
+		if (!config.project) {
+			console.error('Error: project slug required. Use --project or .git-shots.json');
+			process.exit(1);
+		}
+		await compare(config, { base: options.base, head: options.head, threshold: options.threshold });
+	});
+
+program
+	.command('status')
+	.description('Show current diff status')
+	.option('-p, --project <slug>', 'Project slug')
+	.option('-s, --server <url>', 'Server URL')
+	.action(async (options) => {
+		const config = loadConfig();
+		if (options.project) config.project = options.project;
+		if (options.server) config.server = options.server;
+		if (!config.project) {
+			console.error('Error: project slug required. Use --project or .git-shots.json');
+			process.exit(1);
+		}
+		await status(config);
+	});
+
+program.parse();

package/src/status.ts

@@ -0,0 +1,42 @@
+import chalk from 'chalk';
+import type { GitShotsConfig } from './config.js';
+
+export async function status(config: GitShotsConfig) {
+	const url = `${config.server}/api/diffs?project=${encodeURIComponent(config.project)}`;
+
+	try {
+		const res = await fetch(url);
+		const data = await res.json();
+
+		if (!res.ok) {
+			console.error(chalk.red(`Status failed: ${JSON.stringify(data)}`));
+			process.exit(1);
+		}
+
+		if (data.length === 0) {
+			console.log(chalk.dim('No diffs found for this project.'));
+			return;
+		}
+
+		console.log(`${chalk.bold(data.length)} diffs for ${config.project}`);
+		console.log();
+		console.log(chalk.dim('ID'.padEnd(8) + 'Status'.padEnd(12) + 'Mismatch'.padEnd(12) + 'Date'));
+		console.log(chalk.dim('-'.repeat(50)));
+
+		for (const { diff } of data) {
+			const statusColor =
+				diff.status === 'approved' ? chalk.green :
+				diff.status === 'rejected' ? chalk.red :
+				chalk.yellow;
+			console.log(
+				String(diff.id).padEnd(8) +
+				statusColor(diff.status.padEnd(12)) +
+				(diff.mismatch_percentage.toFixed(2) + '%').padEnd(12) +
+				chalk.dim(new Date(diff.created_at * 1000).toLocaleDateString())
+			);
+		}
+	} catch (err) {
+		console.error(chalk.red(`Request failed: ${err}`));
+		process.exit(1);
+	}
+}

package/src/upload.ts

@@ -0,0 +1,74 @@
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve, basename, relative, dirname } from 'node:path';
+import { execSync } from 'node:child_process';
+import { glob } from 'glob';
+import chalk from 'chalk';
+import type { GitShotsConfig } from './config.js';
+
+export async function upload(config: GitShotsConfig, options: { branch?: string; sha?: string }) {
+	const dir = resolve(process.cwd(), config.directory);
+	if (!existsSync(dir)) {
+		console.error(chalk.red(`Directory not found: ${dir}`));
+		process.exit(1);
+	}
+
+	// Get git info
+	const branch = options.branch ?? execSync('git rev-parse --abbrev-ref HEAD', { encoding: 'utf-8' }).trim();
+	const sha = options.sha ?? execSync('git rev-parse HEAD', { encoding: 'utf-8' }).trim();
+
+	console.log(chalk.dim(`Project: ${config.project}`));
+	console.log(chalk.dim(`Branch:  ${branch}`));
+	console.log(chalk.dim(`SHA:     ${sha.slice(0, 7)}`));
+	console.log(chalk.dim(`Dir:     ${dir}`));
+	console.log();
+
+	// Find all PNGs
+	const files = await glob('**/*.png', { cwd: dir });
+	if (files.length === 0) {
+		console.log(chalk.yellow('No PNG files found.'));
+		return;
+	}
+
+	console.log(chalk.dim(`Found ${files.length} screenshots`));
+
+	// Build multipart form
+	const formData = new FormData();
+	formData.append('project', config.project);
+	formData.append('branch', branch);
+	formData.append('gitSha', sha);
+
+	for (const file of files) {
+		const fullPath = resolve(dir, file);
+		const buffer = readFileSync(fullPath);
+		const blob = new Blob([buffer], { type: 'image/png' });
+
+		// Use directory as field name for category derivation
+		const dirName = dirname(file);
+		const fieldName = dirName !== '.' ? `${dirName}/${basename(file)}` : basename(file);
+
+		formData.append(fieldName, blob, basename(file));
+	}
+
+	// Upload
+	const url = `${config.server}/api/upload`;
+	console.log(chalk.dim(`Uploading to ${url}...`));
+
+	try {
+		const res = await fetch(url, {
+			method: 'POST',
+			body: formData,
+			headers: { Origin: config.server },
+		});
+		const data = await res.json();
+
+		if (!res.ok) {
+			console.error(chalk.red(`Upload failed: ${JSON.stringify(data)}`));
+			process.exit(1);
+		}
+
+		console.log(chalk.green(`Uploaded ${data.uploaded} screenshots`));
+	} catch (err) {
+		console.error(chalk.red(`Request failed: ${err}`));
+		process.exit(1);
+	}
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"esModuleInterop": true,
+		"strict": true,
+		"outDir": "dist",
+		"rootDir": "src",
+		"declaration": true,
+		"skipLibCheck": true
+	},
+	"include": ["src"]
+}