|
| 1 | +#!/usr/bin/env node |
| 2 | +import { program } from 'commander'; |
| 3 | +import { loadConfig, runPipeline } from '@git-glimpse/core'; |
| 4 | +import { execSync, execFile } from 'node:child_process'; |
| 5 | +import { readFileSync, existsSync, writeFileSync } from 'node:fs'; |
| 6 | +import { createRequire } from 'node:module'; |
| 7 | +import { resolve } from 'node:path'; |
| 8 | + |
| 9 | +const require = createRequire(import.meta.url); |
| 10 | +const pkg = require('../../package.json') as { version: string }; |
| 11 | + |
| 12 | +program |
| 13 | + .name('git-glimpse') |
| 14 | + .description('Auto-generate visual demo clips of UI changes') |
| 15 | + .version(pkg.version); |
| 16 | + |
| 17 | +program |
| 18 | + .command('run') |
| 19 | + .description('Generate a demo clip for the current working tree changes') |
| 20 | + .option('-d, --diff <diff>', 'Git ref or diff (e.g. HEAD~1, main..HEAD)') |
| 21 | + .option('-u, --url <url>', 'Base URL of the running app') |
| 22 | + .option('-c, --config <path>', 'Path to git-glimpse.config.ts') |
| 23 | + .option('-o, --output <dir>', 'Output directory for recordings', './recordings') |
| 24 | + .option('--open', 'Open the recording after generation') |
| 25 | + .action(async (options) => { |
| 26 | + try { |
| 27 | + const config = await loadConfig(options.config); |
| 28 | + |
| 29 | + // Get diff |
| 30 | + const diffRef = options.diff ?? 'HEAD~1'; |
| 31 | + let diff: string; |
| 32 | + if (existsSync(diffRef)) { |
| 33 | + diff = readFileSync(diffRef, 'utf-8'); |
| 34 | + } else { |
| 35 | + // diffRef is a git ref like HEAD~1, safe to pass as argument |
| 36 | + diff = execSync(`git diff ${diffRef}`, { encoding: 'utf-8' }); |
| 37 | + } |
| 38 | + |
| 39 | + if (!diff.trim()) { |
| 40 | + console.error('No diff found. Did you forget to commit? Try: git-glimpse run --diff HEAD~1'); |
| 41 | + process.exit(1); |
| 42 | + } |
| 43 | + |
| 44 | + const baseUrl = |
| 45 | + options.url ?? |
| 46 | + config.app.readyWhen?.url?.replace(/\/[^/]*$/, '') ?? |
| 47 | + 'http://localhost:3000'; |
| 48 | + |
| 49 | + console.log(`Running git-glimpse...`); |
| 50 | + console.log(` Base URL: ${baseUrl}`); |
| 51 | + console.log(` Diff: ${diffRef}`); |
| 52 | + console.log(` Output: ${options.output}`); |
| 53 | + |
| 54 | + const result = await runPipeline({ |
| 55 | + diff, |
| 56 | + baseUrl, |
| 57 | + outputDir: options.output, |
| 58 | + config, |
| 59 | + }); |
| 60 | + |
| 61 | + if (result.success && result.recording) { |
| 62 | + console.log(`\n✓ Demo recorded: ${result.recording.path}`); |
| 63 | + console.log(` Duration: ${result.recording.duration.toFixed(1)}s`); |
| 64 | + console.log(` Size: ${result.recording.sizeMB.toFixed(1)} MB`); |
| 65 | + console.log(`\nWhat changed: ${result.analysis.changeDescription}`); |
| 66 | + |
| 67 | + if (options.open) { |
| 68 | + openFile(result.recording.path); |
| 69 | + } |
| 70 | + } else { |
| 71 | + console.warn('\n⚠ Recording failed, screenshots taken as fallback.'); |
| 72 | + if (result.screenshots?.length) { |
| 73 | + console.log('Screenshots:', result.screenshots.join(', ')); |
| 74 | + } |
| 75 | + if (result.errors.length) { |
| 76 | + console.error('Errors:', result.errors.join('\n')); |
| 77 | + } |
| 78 | + } |
| 79 | + } catch (err) { |
| 80 | + console.error('Error:', err instanceof Error ? err.message : String(err)); |
| 81 | + process.exit(1); |
| 82 | + } |
| 83 | + }); |
| 84 | + |
| 85 | +program |
| 86 | + .command('init') |
| 87 | + .description('Create a git-glimpse.config.ts in the current directory') |
| 88 | + .action(async () => { |
| 89 | + const configPath = resolve(process.cwd(), 'git-glimpse.config.ts'); |
| 90 | + if (existsSync(configPath)) { |
| 91 | + console.error('git-glimpse.config.ts already exists.'); |
| 92 | + process.exit(1); |
| 93 | + } |
| 94 | + |
| 95 | + const template = `import type { GitGlimpseConfig } from '@git-glimpse/core'; |
| 96 | +
|
| 97 | +export default { |
| 98 | + app: { |
| 99 | + startCommand: 'npm run dev', |
| 100 | + readyWhen: { url: 'http://localhost:3000' }, |
| 101 | + }, |
| 102 | + recording: { |
| 103 | + format: 'gif', |
| 104 | + maxDuration: 30, |
| 105 | + }, |
| 106 | + llm: { |
| 107 | + provider: 'anthropic', |
| 108 | + model: 'claude-sonnet-4-6', |
| 109 | + }, |
| 110 | +} satisfies GitGlimpseConfig; |
| 111 | +`; |
| 112 | + |
| 113 | + writeFileSync(configPath, template, 'utf-8'); |
| 114 | + console.log('Created git-glimpse.config.ts'); |
| 115 | + console.log('Next: set ANTHROPIC_API_KEY and run: npx git-glimpse run --diff HEAD~1'); |
| 116 | + }); |
| 117 | + |
| 118 | +program.parse(); |
| 119 | + |
| 120 | +function openFile(filePath: string): void { |
| 121 | + const openCmd = |
| 122 | + process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'explorer' : 'xdg-open'; |
| 123 | + execFile(openCmd, [filePath], (err) => { |
| 124 | + if (err) console.warn(`Could not open file: ${err.message}`); |
| 125 | + }); |
| 126 | +} |
0 commit comments