@vizzly-testing/cli 0.13.0 β†’ 0.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +552 -88
  2. package/claude-plugin/.claude-plugin/README.md +4 -0
  3. package/claude-plugin/.mcp.json +4 -0
  4. package/claude-plugin/CHANGELOG.md +27 -0
  5. package/claude-plugin/mcp/vizzly-docs-server/README.md +95 -0
  6. package/claude-plugin/mcp/vizzly-docs-server/docs-fetcher.js +110 -0
  7. package/claude-plugin/mcp/vizzly-docs-server/index.js +283 -0
  8. package/claude-plugin/mcp/vizzly-server/cloud-api-provider.js +26 -10
  9. package/claude-plugin/mcp/vizzly-server/index.js +14 -1
  10. package/claude-plugin/mcp/vizzly-server/local-tdd-provider.js +61 -28
  11. package/dist/cli.js +4 -4
  12. package/dist/commands/run.js +1 -1
  13. package/dist/commands/tdd-daemon.js +54 -8
  14. package/dist/commands/tdd.js +8 -8
  15. package/dist/container/index.js +34 -3
  16. package/dist/reporter/reporter-bundle.css +1 -1
  17. package/dist/reporter/reporter-bundle.iife.js +29 -59
  18. package/dist/server/handlers/tdd-handler.js +28 -63
  19. package/dist/server/http-server.js +473 -4
  20. package/dist/services/config-service.js +371 -0
  21. package/dist/services/project-service.js +245 -0
  22. package/dist/services/server-manager.js +4 -5
  23. package/dist/services/static-report-generator.js +208 -0
  24. package/dist/services/tdd-service.js +14 -6
  25. package/dist/types/reporter/src/components/ui/form-field.d.ts +16 -0
  26. package/dist/types/reporter/src/components/views/projects-view.d.ts +1 -0
  27. package/dist/types/reporter/src/components/views/settings-view.d.ts +1 -0
  28. package/dist/types/reporter/src/hooks/use-auth.d.ts +10 -0
  29. package/dist/types/reporter/src/hooks/use-config.d.ts +9 -0
  30. package/dist/types/reporter/src/hooks/use-projects.d.ts +10 -0
  31. package/dist/types/reporter/src/services/api-client.d.ts +7 -0
  32. package/dist/types/server/http-server.d.ts +1 -1
  33. package/dist/types/services/config-service.d.ts +98 -0
  34. package/dist/types/services/project-service.d.ts +103 -0
  35. package/dist/types/services/server-manager.d.ts +2 -1
  36. package/dist/types/services/static-report-generator.d.ts +25 -0
  37. package/dist/types/services/tdd-service.d.ts +2 -2
  38. package/dist/utils/console-ui.js +26 -2
  39. package/docs/tdd-mode.md +31 -15
  40. package/package.json +4 -4
package/README.md CHANGED
@@ -1,35 +1,32 @@
1
- # 🐻 Vizzly CLI
1
+ # Vizzly CLI
2
2
 
3
- > Visual development workflow platform for UI teams
3
+ > Visual review platform for UI developers and designers
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/@vizzly-testing/cli.svg)](https://www.npmjs.com/package/@vizzly-testing/cli)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
7
 
8
8
  ## What is Vizzly?
9
9
 
10
- Vizzly makes visual quality part of your development process, not an afterthought. Iterate locally
11
- with `vizzly tdd`, collaborate on automatic CI/CD builds, and ship with visual confidence.
10
+ Vizzly is a visual review platform designed for how modern teams work. Instead of recreating your
11
+ components in a sandboxed environment, Vizzly captures screenshots directly from your functional
12
+ tests. This means you test the *real thing*, not a snapshot.
12
13
 
13
- Unlike tools that recreate your components in sandboxed environments, Vizzly works with screenshots
14
- from your *actual* tests - whether that's Playwright in CI, BrowserStack for cross-browser testing,
15
- or your local development environment. No rendering inconsistencies. No "it works in my app but not
16
- in the testing tool."
17
-
18
- The result? Visual quality integrated into development, not bolted on afterward.
14
+ It's fast because we don't render anythingβ€”we process the images you provide from any source. Bring
15
+ screenshots from web apps, mobile apps, or even design mockups, and use our collaborative dashboard
16
+ to streamline the review process between developers and designers.
19
17
 
20
18
  ## Features
21
19
 
22
- - πŸ”„ **Local TDD Workflow** - Iterate on visual changes instantly with `vizzly tdd`, see exactly what changed as you code
23
- - πŸ’¬ **Advanced Collaboration** - Position-based comments, review rules, mentions, and deep links for team coordination
24
- - 🍯 **Honeydiff Engine** - Purpose-built diffing with dynamic content detection, SSIM scoring, and smart AA filtering
25
- - πŸ“Έ **Flexible Screenshots** - Works with any screenshot source: Playwright, BrowserStack, Sauce Labs, local dev
26
- - βœ… **Seamless CI/CD** - Automatic builds from every commit, no manual steps
20
+ - πŸ“Έ **Smart Screenshots** - Automatic deduplication and intelligent diffing
21
+ - 🎨 **Any Screenshot** - Web, mobile, desktop, design mockups, or any visual content
22
+ - πŸƒ **TDD Mode** - Local visual testing with interactive dashboard, settings, and project tools
23
+ - πŸ“Š **Beautiful Dashboard** - Intuitive web interface for reviewing changes
24
+ - πŸ‘₯ **Team Collaboration** - Built for UI developers and designers to work together
25
+ - πŸ”„ **CI/CD Ready** - GitHub, GitLab, CircleCI, and more
27
26
 
28
27
  ## Quick Start
29
28
 
30
- **Requirements:** Node.js 22 or newer.
31
-
32
- > **Note:** Vizzly supports [active LTS versions](https://nodejs.org/en/about/previous-releases) of Node.js.
29
+ Requirements: Node.js 20 or newer.
33
30
 
34
31
  ```bash
35
32
  # Install globally
@@ -41,163 +38,630 @@ vizzly init
41
38
 
42
39
  ### Authentication
43
40
 
44
- **Local Development:**
41
+ Vizzly supports two authentication methods:
42
+
43
+ **Option 1: User Authentication (Recommended for local development)**
45
44
  ```bash
46
- vizzly login # OAuth login with your Vizzly account
47
- vizzly project:select # Optional: configure project token for this directory
45
+ # Authenticate with your Vizzly account
46
+ vizzly login
47
+
48
+ # Optional: Configure project-specific token
49
+ vizzly project:select
50
+
51
+ # Run tests
52
+ vizzly run "npm test"
48
53
  ```
49
54
 
50
- **CI/CD:**
55
+ **Option 2: API Token (Recommended for CI/CD)**
51
56
  ```bash
57
+ # Set via environment variable
52
58
  export VIZZLY_TOKEN=your-project-token
59
+
60
+ # Run tests
53
61
  vizzly run "npm test"
54
62
  ```
55
63
 
56
- See [authentication guide](./docs/authentication.md) for token priority and `.env` file setup.
64
+ For local development with `.env` files:
65
+ ```
66
+ VIZZLY_TOKEN=your-project-token
67
+ ```
68
+
69
+ Then add `.env` to your `.gitignore` file. For CI/CD, use your provider's secret management system.
57
70
 
58
- ### Basic Usage
71
+ **Token Priority:**
72
+ 1. CLI flag (`--token`)
73
+ 2. Environment variable (`VIZZLY_TOKEN`)
74
+ 3. Project mapping (configured via `vizzly project:select`)
75
+ 4. User access token (from `vizzly login`)
76
+
77
+ ### Upload existing screenshots
59
78
 
60
- **TDD Mode** (local development - the fast iteration loop):
61
79
  ```bash
62
- vizzly tdd start # Start server, see changes in real-time
63
- npm test -- --watch # Run your tests
64
- # Open dashboard at http://localhost:47392
80
+ vizzly upload ./screenshots --build-name "Release v1.2.3"
65
81
  ```
66
82
 
67
- **Run Mode** (CI/CD - for team collaboration):
83
+ ### Integrate with your tests
84
+
68
85
  ```bash
69
- vizzly run "npm test" # Run tests, upload to cloud
70
- vizzly run "npm test" --wait # Wait for results, fail on visual changes
86
+ # Run tests with cloud integration (CI/CD)
87
+ vizzly run "npm test"
88
+
89
+ # Use TDD mode for local development
90
+ vizzly tdd start # Start TDD server
91
+ npm test --watch # Run tests in watch mode
71
92
  ```
72
93
 
73
- **In your test code:**
94
+ ### In your test code
95
+
74
96
  ```javascript
75
97
  import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
76
98
 
99
+ // Option 1: Using a Buffer
77
100
  const screenshot = await page.screenshot();
78
101
  await vizzlyScreenshot('homepage', screenshot, {
79
102
  browser: 'chrome',
80
103
  viewport: '1920x1080'
81
104
  });
105
+
106
+ // Option 2: Using a file path
107
+ await page.screenshot({ path: './screenshots/homepage.png' });
108
+ await vizzlyScreenshot('homepage', './screenshots/homepage.png', {
109
+ browser: 'chrome',
110
+ viewport: '1920x1080'
111
+ });
82
112
  ```
83
113
 
84
- See [test integration guide](./docs/test-integration.md) for Playwright, Cypress, and other frameworks.
114
+ > **Multi-Language Support**: Currently available as a JavaScript/Node.js SDK with Python, Ruby, and
115
+ > other language bindings coming soon. The client SDK is lightweight and simply POSTs screenshot
116
+ > data to the CLI for processing.
85
117
 
86
- ## Client SDKs & Plugins
118
+ ## Commands
87
119
 
88
- Vizzly provides specialized clients and plugins for various frameworks and languages:
120
+ ### Authentication Commands
89
121
 
90
- ### Official Client SDKs
122
+ ```bash
123
+ vizzly login # Authenticate with your Vizzly account
124
+ vizzly logout # Clear stored authentication tokens
125
+ vizzly whoami # Show current user and authentication status
126
+ vizzly project:select # Configure project-specific token
127
+ vizzly project:list # Show all configured projects
128
+ vizzly project:token # Display project token for current directory
129
+ vizzly project:remove # Remove project configuration
130
+ ```
91
131
 
92
- - **[Ruby Client](./clients/ruby)** - Lightweight Ruby SDK for RSpec, Capybara, and other test frameworks
93
- - **[Vitest Plugin](./clients/vitest)** - Drop-in replacement for Vitest's native visual testing with `toMatchScreenshot`
94
- - **[Storybook Plugin](./clients/storybook)** - Capture screenshots from Storybook builds with interaction hooks
95
- - **[Static Site Plugin](./clients/static-site)** - Visual testing for static sites (Gatsby, Astro, Next.js, Jekyll, etc.)
132
+ #### Login Command
133
+ Authenticate using OAuth 2.0 device flow. Opens your browser to authorize the CLI with your Vizzly account.
96
134
 
97
- Each client is designed to integrate seamlessly with your existing workflow while providing the full
98
- power of Vizzly's visual testing platform.
135
+ ```bash
136
+ # Interactive browser-based login
137
+ vizzly login
99
138
 
100
- ## Commands
139
+ # JSON output for scripting
140
+ vizzly login --json
141
+ ```
101
142
 
102
- ### Core Commands
143
+ **Features:**
144
+ - Browser auto-opens with pre-filled device code
145
+ - Secure OAuth 2.0 device authorization flow
146
+ - 30-day token expiry with automatic refresh
147
+ - Tokens stored securely in `~/.vizzly/config.json` with 0600 permissions
148
+
149
+ #### Logout Command
150
+ Clear all stored authentication tokens from your machine.
103
151
 
104
152
  ```bash
105
- vizzly run "npm test" # Run tests and upload to cloud
106
- vizzly tdd start # Start local TDD server with dashboard
107
- vizzly upload ./screenshots # Upload existing screenshots
108
- vizzly status <build-id> # Check build status
109
- vizzly init # Create vizzly.config.js
153
+ # Clear all tokens
154
+ vizzly logout
155
+
156
+ # JSON output
157
+ vizzly logout --json
110
158
  ```
111
159
 
112
- See [API reference](./docs/api-reference.md) for all options.
160
+ Revokes tokens on the server and removes them from local storage.
113
161
 
114
- ### Authentication
162
+ #### Whoami Command
163
+ Display current authentication status, user information, and organizations.
164
+
165
+ ```bash
166
+ # Show user and authentication info
167
+ vizzly whoami
168
+
169
+ # JSON output for scripting
170
+ vizzly whoami --json
171
+ ```
172
+
173
+ Shows:
174
+ - Current user email and name
175
+ - Organizations you belong to
176
+ - Token status and expiry
177
+ - Project mappings (if any)
178
+
179
+ #### Project Commands
180
+ Configure directory-specific project tokens for multi-project workflows.
181
+
182
+ ```bash
183
+ # Select a project for current directory
184
+ vizzly project:select
185
+
186
+ # List all configured projects
187
+ vizzly project:list
188
+
189
+ # Show token for current directory
190
+ vizzly project:token
191
+
192
+ # Remove project configuration
193
+ vizzly project:remove
194
+ ```
195
+
196
+ **Use case:** Working on multiple Vizzly projects? Configure each project directory with its specific token. The CLI automatically uses the right token based on your current directory.
197
+
198
+ ### Upload Screenshots
199
+ ```bash
200
+ vizzly upload <directory> # Upload screenshots from directory
201
+ vizzly upload ./screenshots --wait # Wait for processing
202
+ vizzly upload ./screenshots --upload-all # Upload all without deduplication
203
+ vizzly upload ./screenshots --parallel-id "ci-run-123" # For parallel CI builds
204
+ ```
205
+
206
+ ### Run Tests with Integration
207
+ ```bash
208
+ vizzly run "npm test" # Run with Vizzly integration
209
+ vizzly run "pytest" --port 3002 # Custom port
210
+ vizzly run "npm test" --wait # Wait for build completion
211
+ vizzly run "npm test" --allow-no-token # Run without API token
212
+ vizzly run "npm test" --parallel-id "ci-run-123" # For parallel CI builds
213
+ ```
214
+
215
+ #### Run Command Options
216
+
217
+ **Server Configuration:**
218
+ - `--port <port>` - Port for screenshot server (default: 47392)
219
+ - `--timeout <ms>` - Server timeout in milliseconds (default: 30000)
220
+
221
+ **Build Configuration:**
222
+ - `-b, --build-name <name>` - Custom build name
223
+ - `--branch <branch>` - Git branch override
224
+ - `--commit <sha>` - Git commit SHA override
225
+ - `--message <msg>` - Commit message
226
+ - `--environment <env>` - Environment name (default: test)
227
+
228
+ **Processing Options:**
229
+ - `--wait` - Wait for build completion and exit with appropriate code
230
+ - `--threshold <number>` - Comparison threshold (0-1, default: 0.01)
231
+ - `--upload-timeout <ms>` - Upload wait timeout in ms
232
+ - `--upload-all` - Upload all screenshots without SHA deduplication
233
+
234
+ **Parallel Execution:**
235
+ - `--parallel-id <id>` - Unique identifier for parallel test execution (also via `VIZZLY_PARALLEL_ID`)
236
+
237
+ **Development & Testing:**
238
+ - `--allow-no-token` - Allow running without API token (useful for local development)
239
+ - `--token <token>` - API token override
240
+
241
+ ## Dev Command
242
+
243
+ For local development with visual testing, use the `dev` command:
115
244
 
116
245
  ```bash
117
- vizzly login # OAuth login
118
- vizzly logout # Clear tokens
119
- vizzly whoami # Show current user
120
- vizzly project:select # Configure project token for directory
246
+ # Start interactive dev server (runs in background)
247
+ vizzly dev start
248
+
249
+ # Run your tests in watch mode (same terminal or new one)
250
+ npm test -- --watch
251
+
252
+ # View the dashboard at http://localhost:47392
121
253
  ```
122
254
 
123
- See [authentication guide](./docs/authentication.md) for details.
255
+ **Interactive Dashboard:** The dev dashboard provides real-time feedback:
256
+ - **Visual Comparisons** - See diffs as tests run with multiple view modes
257
+ - **Baseline Management** - Accept/reject changes directly from the UI
258
+ - **Configuration Editor** - Edit settings without touching config files
259
+ - **Project Management** - Login, link directories to cloud projects
260
+ - **Test Statistics** - Real-time pass/fail metrics
261
+ - **Dark Theme** - Easy on the eyes during long sessions
262
+
263
+ **Dev Subcommands:**
264
+
265
+ ```bash
266
+ # Start the dev server (primary workflow)
267
+ vizzly dev start [options]
268
+
269
+ # Run tests once with ephemeral server (generates static report)
270
+ vizzly dev run "npm test" [options]
271
+
272
+ # Check dev server status
273
+ vizzly dev status
274
+
275
+ # Stop a running dev server
276
+ vizzly dev stop
277
+ ```
278
+
279
+ **Dev Command Options:**
280
+ - `--set-baseline` - Accept current screenshots as new baseline
281
+ - `--baseline-build <id>` - Use specific build as baseline (requires API token)
282
+ - `--threshold <number>` - Comparison threshold (0-1, default: 0.1)
283
+ - `--port <port>` - Server port (default: 47392)
284
+ - `--timeout <ms>` - Server timeout (default: 30000)
285
+ - `--open` - Auto-open dashboard in browser (start command only)
286
+
287
+ ### Setup and Status Commands
288
+ ```bash
289
+ vizzly init # Create vizzly.config.js with defaults
290
+ vizzly status <build-id> # Check build progress and results
291
+ vizzly status <build-id> --verbose # Detailed build information
292
+ vizzly status <build-id> --json # Machine-readable output
293
+ vizzly finalize <parallel-id> # Finalize parallel build after all shards complete
294
+ vizzly doctor # Fast local preflight (no network)
295
+ vizzly doctor --api # Include API connectivity checks
296
+ ```
297
+
298
+ #### Init Command
299
+ Creates a basic `vizzly.config.js` configuration file with sensible defaults. No interactive
300
+ prompts - just generates a clean config you can customize.
301
+
302
+ ```bash
303
+ vizzly init # Create config file
304
+ vizzly init --force # Overwrite existing config
305
+ ```
306
+
307
+ #### Status Command
308
+ Check the progress and results of your builds. Shows comprehensive information including:
309
+ - Build status and progress
310
+ - Screenshot and comparison counts (new, changed, identical)
311
+ - Git branch and commit details
312
+ - Direct web dashboard link
313
+ - Timing and execution information
314
+
315
+ ```bash
316
+ # Basic status check
317
+ vizzly status abc123-def456-build-id
318
+
319
+ # Detailed information for debugging
320
+ vizzly status abc123-def456-build-id --verbose
321
+
322
+ # JSON output for CI/CD integration
323
+ vizzly status abc123-def456-build-id --json
324
+ ```
325
+
326
+ ### Doctor
327
+ - Purpose: Quickly validate your local setup without network calls by default.
328
+ - Checks: Node.js version (>= 20), `apiUrl` format, comparison `threshold`, effective `port` (default 47392).
329
+ - Optional: Add `--api` to verify connectivity using your `VIZZLY_TOKEN`.
330
+
331
+ Examples:
332
+ ```bash
333
+ # Local-only checks
334
+ vizzly doctor
335
+
336
+ # Include API connectivity
337
+ VIZZLY_TOKEN=your-token vizzly doctor --api
338
+
339
+ # JSON output for tooling
340
+ vizzly doctor --json
341
+ ```
342
+
343
+ The `dev` command provides fast local development with immediate visual feedback. See the
344
+ [Dev Mode Guide](./docs/dev-mode.md) for complete details on local visual testing.
345
+
346
+ > **Note:** The `vizzly tdd` command is deprecated and will be removed in the next major version. Please use `vizzly dev` instead.
124
347
 
125
348
  ## Configuration
126
349
 
350
+ Create a `vizzly.config.js` file with `vizzly init` or manually:
351
+
127
352
  ```javascript
128
- // vizzly.config.js
129
353
  export default {
130
- server: { port: 47392 },
131
- comparison: { threshold: 0.1 },
132
- upload: { concurrency: 5 }
354
+ // Server configuration
355
+ server: {
356
+ port: 47392,
357
+ timeout: 30000
358
+ },
359
+
360
+ // Comparison configuration
361
+ comparison: {
362
+ threshold: 0.1,
363
+ ignoreAntialiasing: true
364
+ },
365
+
366
+ // Upload configuration
367
+ upload: {
368
+ concurrency: 5,
369
+ timeout: 30000
370
+ }
133
371
  };
134
372
  ```
135
373
 
136
- Run `vizzly init` to generate this file. See [API reference](./docs/api-reference.md) for all options.
374
+ Run `vizzly init` to generate this file automatically with sensible defaults.
375
+
376
+ ## Config Reference
377
+
378
+ For the full configuration schema and CLI options, see docs/api-reference.md.
379
+
380
+ ## Framework Examples
381
+
382
+ ### Playwright
383
+ ```javascript
384
+ import { vizzlyScreenshot } from '@vizzly-testing/cli/client';
385
+
386
+ test('homepage test', async ({ page }) => {
387
+ await page.goto('/');
388
+ const screenshot = await page.screenshot();
389
+ await vizzlyScreenshot('homepage', screenshot, {
390
+ browser: 'chrome',
391
+ viewport: '1920x1080'
392
+ });
393
+ });
394
+ ```
395
+
396
+ ### Cypress
397
+ ```javascript
398
+ // cypress/support/commands.js
399
+ Cypress.Commands.add('vizzlyScreenshot', (name, properties = {}) => {
400
+ cy.screenshot(name, { capture: 'viewport' });
401
+ cy.readFile(`cypress/screenshots/${name}.png`, 'base64').then((imageBase64) => {
402
+ const imageBuffer = Buffer.from(imageBase64, 'base64');
403
+ return vizzlyScreenshot(name, imageBuffer, {
404
+ browser: Cypress.browser.name,
405
+ ...properties
406
+ });
407
+ });
408
+ });
409
+ ```
137
410
 
138
411
  ## CI/CD Integration
139
412
 
140
- Every commit creates a team build automatically - your development workflow becomes your review workflow.
413
+ For CI/CD pipelines, use the `--wait` flag to wait for visual comparison results and get appropriate exit codes:
141
414
 
142
- **GitHub Actions:**
415
+ ### GitHub Actions
143
416
  ```yaml
144
417
  - name: Visual Tests
145
418
  run: npx vizzly run "npm test" --wait
146
419
  env:
147
420
  VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
421
+ # Optional: Provide correct git information from GitHub context
422
+ VIZZLY_COMMIT_MESSAGE: ${{ github.event.pull_request.head.commit.message || github.event.head_commit.message }}
423
+ VIZZLY_COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
424
+ VIZZLY_BRANCH: ${{ github.head_ref || github.ref_name }}
425
+ ```
426
+
427
+ ### Parallel Builds in CI
428
+
429
+ For parallel test execution, use `--parallel-id` to ensure all shards contribute to the same build:
430
+
431
+ ```yaml
432
+ # GitHub Actions with parallel matrix
433
+ jobs:
434
+ e2e-tests:
435
+ strategy:
436
+ matrix:
437
+ shard: [1/4, 2/4, 3/4, 4/4]
438
+ steps:
439
+ - name: Run tests with Vizzly
440
+ run: |
441
+ npx vizzly run "npm test -- --shard=${{ matrix.shard }}" \
442
+ --parallel-id="${{ github.run_id }}-${{ github.run_attempt }}"
443
+ env:
444
+ VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
445
+
446
+ finalize-e2e:
447
+ needs: e2e-tests
448
+ runs-on: ubuntu-latest
449
+ if: always() && needs.e2e-tests.result == 'success'
450
+ steps:
451
+ - name: Finalize parallel build
452
+ run: |
453
+ npx vizzly finalize "${{ github.run_id }}-${{ github.run_attempt }}"
454
+ env:
455
+ VIZZLY_TOKEN: ${{ secrets.VIZZLY_TOKEN }}
148
456
  ```
149
457
 
150
- **Parallel builds** (for faster test suites):
458
+ ### GitLab CI
151
459
  ```yaml
152
- - run: npx vizzly run "npm test -- --shard=${{ matrix.shard }}" --parallel-id="${{ github.run_id }}"
153
- - run: npx vizzly finalize "${{ github.run_id }}" # After all shards complete
460
+ visual-tests:
461
+ stage: test
462
+ image: node:20
463
+ script:
464
+ - npm ci
465
+ - npx vizzly run "npm test" --wait
466
+ variables:
467
+ VIZZLY_TOKEN: $VIZZLY_TOKEN
154
468
  ```
155
469
 
156
- The `--wait` flag exits non-zero on visual changes, so your CI fails appropriately. See [CI/CD
157
- examples](./docs/getting-started.md#cicd-integration) for GitLab, CircleCI, and more.
470
+ The `--wait` flag ensures the process:
471
+ - Waits for all screenshots to be processed
472
+ - Exits with code `1` if visual differences are detected
473
+ - Exits with code `0` if all comparisons pass
474
+ - Allows your CI to fail appropriately when visual regressions occur
475
+
476
+ ## API Reference
477
+
478
+ ### `vizzlyScreenshot(name, imageBuffer, properties)`
479
+ Send a screenshot to Vizzly.
480
+ - `name` (string): Screenshot identifier
481
+ - `imageBuffer` (Buffer | string): Image data as Buffer, or file path to an image
482
+ - `properties` (object): Metadata for organization
483
+
484
+ **File Path Support:**
485
+ - Accepts both absolute and relative paths
486
+ - Automatically reads the file and converts to Buffer internally
487
+ - Works with any PNG image file
488
+
489
+ ### `isVizzlyEnabled()`
490
+ Check if Vizzly is enabled in the current environment.
491
+
492
+ ## AI & Editor Integrations
493
+
494
+ ### Claude Code Plugin
495
+
496
+ Vizzly includes built-in support for [Claude Code](https://claude.com/code), Anthropic's official CLI tool. The integration brings AI-powered visual testing workflows directly into your development environment.
497
+
498
+ **Features:**
499
+ - πŸ€– **AI-assisted debugging** - Get intelligent analysis of visual regressions
500
+ - πŸ“Š **TDD status insights** - Check dashboard status with contextual suggestions
501
+ - πŸ” **Smart diff analysis** - AI helps determine if changes should be accepted or fixed
502
+ - ✨ **Test coverage suggestions** - Get framework-specific screenshot recommendations
503
+ - πŸ› οΈ **Interactive setup** - Guided configuration and CI/CD integration help
504
+
505
+ **Getting Started with Claude Code:**
506
+
507
+ 1. **Install Claude Code** (if you haven't already):
508
+ ```bash
509
+ npm install -g @anthropic-ai/claude-code
510
+ ```
511
+
512
+ 2. **Install the Vizzly plugin** via Claude Code marketplace:
513
+ ```
514
+ /plugin marketplace add vizzly-testing/cli
515
+ ```
516
+
517
+ 3. **Use AI-powered workflows** with slash commands:
518
+ ```
519
+ /vizzly:check-visual-tests # Check dev server status with AI insights
520
+ /vizzly:debug-visual-regression # Analyze visual failures with AI
521
+ /vizzly:suggest-screenshots # Find test coverage gaps
522
+ /vizzly:setup # Interactive setup wizard
523
+ ```
158
524
 
159
- ## Plugin System
525
+ The plugin works seamlessly with both local dev mode and cloud builds, providing contextual help based on your current workflow.
160
526
 
161
- Vizzly's plugin system allows extending the CLI with custom commands. Plugins under `@vizzly-testing/*` are auto-discovered:
527
+ ## Plugin Ecosystem
528
+
529
+ Vizzly supports a powerful plugin system that allows you to extend the CLI with custom
530
+ commands. Plugins are automatically discovered from `@vizzly-testing/*` packages or can be
531
+ explicitly configured.
532
+
533
+ ### Official Plugins
534
+
535
+ - **Claude Code Integration** *(built-in)* - AI-powered visual testing workflows for Claude Code
536
+ - **[@vizzly-testing/storybook](https://npmjs.com/package/@vizzly-testing/storybook)** *(coming
537
+ soon)* - Capture screenshots from Storybook builds
538
+
539
+ ### Using Plugins
540
+
541
+ Plugins under the `@vizzly-testing/*` scope are auto-discovered:
162
542
 
163
543
  ```bash
544
+ # Install plugin
164
545
  npm install @vizzly-testing/storybook
165
- vizzly storybook ./storybook-static # Command automatically available
546
+
547
+ # Use immediately - commands are automatically available!
548
+ vizzly storybook ./storybook-static
549
+
550
+ # Plugin commands show in help
551
+ vizzly --help
166
552
  ```
167
553
 
168
- **Official Plugins:**
169
- - **Claude Code** *(built-in)* - AI-powered debugging and test suggestions
170
- - **[@vizzly-testing/storybook](./clients/storybook)** - Storybook screenshot capture
171
- - **[@vizzly-testing/static-site](./clients/static-site)** - Static site testing
172
- - **[@vizzly-testing/vitest](./clients/vitest)** - Vitest integration
554
+ ### Creating Plugins
555
+
556
+ You can create your own plugins to add custom commands:
557
+
558
+ ```javascript
559
+ // plugin.js
560
+ export default {
561
+ name: 'my-plugin',
562
+ version: '1.0.0',
563
+ register(program, { config, logger, services }) {
564
+ program
565
+ .command('my-command')
566
+ .description('My custom command')
567
+ .action(async () => {
568
+ logger.info('Running my command!');
569
+ });
570
+ }
571
+ };
572
+ ```
573
+
574
+ Add to your `vizzly.config.js`:
575
+
576
+ ```javascript
577
+ export default {
578
+ plugins: ['./plugin.js']
579
+ };
580
+ ```
173
581
 
174
- See [plugin development guide](./docs/plugins.md) to create your own.
582
+ See the [Plugin Development Guide](./docs/plugins.md) for complete documentation and examples.
175
583
 
176
584
  ## Documentation
177
585
 
178
586
  - [Getting Started](./docs/getting-started.md)
179
587
  - [Authentication Guide](./docs/authentication.md)
588
+ - [Upload Command Guide](./docs/upload-command.md)
180
589
  - [Test Integration Guide](./docs/test-integration.md)
181
- - [TDD Mode Guide](./docs/tdd-mode.md)
182
- - [API Reference](./docs/api-reference.md)
590
+ - [Dev Mode Guide](./docs/dev-mode.md)
183
591
  - [Plugin Development](./docs/plugins.md)
592
+ - [API Reference](./docs/api-reference.md)
593
+ - [Doctor Command](./docs/doctor-command.md)
594
+
595
+ **AI & Editor Integrations:**
596
+ - Claude Code Plugin - Built-in support (see [AI & Editor Integrations](#ai--editor-integrations) above)
184
597
 
185
598
  ## Environment Variables
186
599
 
187
- **Common:**
188
- - `VIZZLY_TOKEN` - API authentication token (use `vizzly login` for local dev)
189
- - `VIZZLY_PARALLEL_ID` - Identifier for parallel CI builds
600
+ ### Authentication
601
+ - `VIZZLY_TOKEN`: API authentication token (project token or access token). Example: `export VIZZLY_TOKEN=your-token`.
602
+ - For local development: Use `vizzly login` instead of manually managing tokens
603
+ - For CI/CD: Use project tokens from environment variables
604
+
605
+ ### Core Configuration
606
+ - `VIZZLY_API_URL`: Override API base URL. Default: `https://app.vizzly.dev`.
607
+ - `VIZZLY_LOG_LEVEL`: Logger level. One of `debug`, `info`, `warn`, `error`. Example: `export VIZZLY_LOG_LEVEL=debug`.
190
608
 
191
- **Git Overrides (for CI):**
192
- - `VIZZLY_COMMIT_SHA`, `VIZZLY_COMMIT_MESSAGE`, `VIZZLY_BRANCH`, `VIZZLY_PR_NUMBER`
609
+ ### Parallel Builds
610
+ - `VIZZLY_PARALLEL_ID`: Unique identifier for parallel test execution. Example: `export VIZZLY_PARALLEL_ID=ci-run-123`.
611
+
612
+ ### Git Information Override
613
+ For enhanced CI/CD integration, you can override git detection with these environment variables:
614
+
615
+ - `VIZZLY_COMMIT_SHA`: Override detected commit SHA. Useful in CI environments.
616
+ - `VIZZLY_COMMIT_MESSAGE`: Override detected commit message. Useful in CI environments.
617
+ - `VIZZLY_BRANCH`: Override detected branch name. Useful in CI environments.
618
+ - `VIZZLY_PR_NUMBER`: Override detected pull request number. Useful for PR-specific builds.
619
+
620
+ **Example for GitHub Actions:**
621
+ ```yaml
622
+ env:
623
+ VIZZLY_COMMIT_MESSAGE: ${{ github.event.pull_request.head.commit.message || github.event.head_commit.message }}
624
+ VIZZLY_COMMIT_SHA: ${{ github.event.pull_request.head.sha || github.event.head_commit.id }}
625
+ VIZZLY_BRANCH: ${{ github.head_ref || github.ref_name }}
626
+ VIZZLY_PR_NUMBER: ${{ github.event.pull_request.number }}
627
+ ```
193
628
 
194
- See [API reference](./docs/api-reference.md) for complete list.
629
+ These variables take highest priority over both CLI arguments and automatic git detection.
195
630
 
196
631
  ## Contributing
197
632
 
198
- We'd love your help making Vizzly better! Whether you're fixing bugs, adding features, or improving
199
- docs - contributions are welcome. Check out the [GitHub repo](https://github.com/vizzly-testing/cli)
200
- to get started.
633
+ We welcome contributions! Whether you're fixing bugs, adding features, or improving documentation,
634
+ your help makes Vizzly better for everyone.
635
+
636
+ ### Getting Started
637
+
638
+ 1. Fork the repository on [GitHub](https://github.com/vizzly-testing/cli)
639
+ 2. Clone your fork locally: `git clone https://github.com/your-username/cli.git`
640
+ 3. Install dependencies: `npm install`
641
+ 4. Run tests to ensure everything works: `npm test`
642
+
643
+ ### Development Workflow
644
+
645
+ 1. Create a feature branch: `git checkout -b feature/your-feature-name`
646
+ 2. Make your changes and **add tests** for any new functionality
647
+ 3. Run the linter: `npm run lint`
648
+ 4. Run tests: `npm test`
649
+ 5. Commit your changes using [gitmoji](https://gitmoji.dev/) format: `git commit -m '✨ Add your feature'`
650
+ 6. Push to your fork: `git push origin feature/your-feature-name`
651
+ 7. Open a Pull Request
652
+
653
+ ### Reporting Issues
654
+
655
+ Found a bug or have a feature request? Please [open an issue](https://github.com/vizzly-testing/cli/issues) with:
656
+
657
+ - A clear description of the problem or request
658
+ - Steps to reproduce (for bugs)
659
+ - Your environment details (OS, Node.js version, etc.)
660
+
661
+ ### Development Setup
662
+
663
+ The CLI is built with modern JavaScript and requires Node.js 20+ (LTS). See the development scripts
664
+ in `package.json` for available commands.
201
665
 
202
666
  ## License
203
667