@alwaysmeticulous/cli 2.331.3 → 2.333.0

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 (61) hide show
  1. package/README.md +16 -0
  2. package/dist/commands/onboard/__tests__/print-next-steps.spec.d.ts +2 -0
  3. package/dist/commands/onboard/__tests__/print-next-steps.spec.d.ts.map +1 -0
  4. package/dist/commands/onboard/__tests__/print-next-steps.spec.js +67 -0
  5. package/dist/commands/onboard/__tests__/print-next-steps.spec.js.map +1 -0
  6. package/dist/commands/onboard/__tests__/resolve-project.spec.d.ts +2 -0
  7. package/dist/commands/onboard/__tests__/resolve-project.spec.d.ts.map +1 -0
  8. package/dist/commands/onboard/__tests__/resolve-project.spec.js +44 -0
  9. package/dist/commands/onboard/__tests__/resolve-project.spec.js.map +1 -0
  10. package/dist/commands/onboard/__tests__/skills-install-choice.spec.d.ts +2 -0
  11. package/dist/commands/onboard/__tests__/skills-install-choice.spec.d.ts.map +1 -0
  12. package/dist/commands/onboard/__tests__/skills-install-choice.spec.js +51 -0
  13. package/dist/commands/onboard/__tests__/skills-install-choice.spec.js.map +1 -0
  14. package/dist/commands/onboard/__tests__/validate-ci-yaml.spec.d.ts +2 -0
  15. package/dist/commands/onboard/__tests__/validate-ci-yaml.spec.d.ts.map +1 -0
  16. package/dist/commands/onboard/__tests__/validate-ci-yaml.spec.js +112 -0
  17. package/dist/commands/onboard/__tests__/validate-ci-yaml.spec.js.map +1 -0
  18. package/dist/commands/onboard/build-context.d.ts +1 -0
  19. package/dist/commands/onboard/build-context.d.ts.map +1 -1
  20. package/dist/commands/onboard/build-context.js +6 -6
  21. package/dist/commands/onboard/build-context.js.map +1 -1
  22. package/dist/commands/onboard/customer-agents.json +0 -1
  23. package/dist/commands/onboard/customer-docs.json +1 -0
  24. package/dist/commands/onboard/docs-urls.d.ts +2 -0
  25. package/dist/commands/onboard/docs-urls.d.ts.map +1 -1
  26. package/dist/commands/onboard/docs-urls.js +5 -3
  27. package/dist/commands/onboard/docs-urls.js.map +1 -1
  28. package/dist/commands/onboard/index.d.ts.map +1 -1
  29. package/dist/commands/onboard/index.js +8 -6
  30. package/dist/commands/onboard/index.js.map +1 -1
  31. package/dist/commands/onboard/launch-agent.d.ts +1 -0
  32. package/dist/commands/onboard/launch-agent.d.ts.map +1 -1
  33. package/dist/commands/onboard/launch-agent.js +26 -15
  34. package/dist/commands/onboard/launch-agent.js.map +1 -1
  35. package/dist/commands/onboard/resolve-project.d.ts +9 -1
  36. package/dist/commands/onboard/resolve-project.d.ts.map +1 -1
  37. package/dist/commands/onboard/resolve-project.js +26 -4
  38. package/dist/commands/onboard/resolve-project.js.map +1 -1
  39. package/dist/commands/onboard/setup-agent-integrations.d.ts +2 -1
  40. package/dist/commands/onboard/setup-agent-integrations.d.ts.map +1 -1
  41. package/dist/commands/onboard/setup-agent-integrations.js +32 -7
  42. package/dist/commands/onboard/setup-agent-integrations.js.map +1 -1
  43. package/dist/commands/onboard/templates/CLAUDE.md +22 -9
  44. package/dist/commands/onboard/templates/agents/ci-setup.md +28 -0
  45. package/dist/commands/onboard/templates/agents/recorder-installation.md +6 -0
  46. package/dist/commands/onboard/templates/docs/ci.ts +2 -6
  47. package/dist/commands/onboard/templates/docs/github-actions-v2.ts +43 -37
  48. package/dist/commands/onboard/templates/docs/how-to/connect-git-provider.ts +26 -0
  49. package/dist/commands/onboard/templates/docs/how-to/typescript-types.ts +1 -1
  50. package/dist/commands/onboard/templates/docs/onboarding-guide.ts +77 -356
  51. package/dist/commands/onboard/templates/docs/recorder-getting-started.ts +5 -2
  52. package/dist/commands/onboard/templates/docs/recorder-snippets/script-based-instructions/nuxtjs-instructions.ts +1 -1
  53. package/dist/commands/onboard/templates/docs/recorder-snippets/script-based-instructions/rsbuild-instructions.ts +1 -1
  54. package/dist/commands/onboard/templates/docs/recorder-snippets/script-based-instructions/vite-instructions.ts +1 -1
  55. package/dist/commands/onboard/templates/docs/reference/cli-commands.ts +37 -0
  56. package/dist/commands/onboard/validate-ci-yaml.d.ts +22 -0
  57. package/dist/commands/onboard/validate-ci-yaml.d.ts.map +1 -0
  58. package/dist/commands/onboard/validate-ci-yaml.js +113 -0
  59. package/dist/commands/onboard/validate-ci-yaml.js.map +1 -0
  60. package/package.json +14 -13
  61. package/dist/commands/onboard/templates/agents/local-simulation-verification.md +0 -96
@@ -1,22 +1,16 @@
1
1
  import {
2
- ANGULAR_CLI_URL,
3
- CLOUD_REPLAY_URL,
4
- ENSURE_RECORDER_CAPTURES_ALL_REQUESTS_URL,
2
+ CI_SETUP_URL,
3
+ DETECT_DIFFS_LOCALLY_URL,
5
4
  FAQ_AND_TROUBLESHOOTING_URL,
6
5
  FIX_FALSE_POSITIVES_URL,
7
6
  GITHUB_ACTIONS_SETUP_URL,
7
+ INSTALL_RECORDER_URL,
8
8
  MAKE_CHECK_BLOCKING_URL,
9
- NETWORK_STUBBING_EXPLANATION_URL,
10
- NEXTJS_APP_ROUTER_ADDITIONAL_SETUP_URL,
11
- REACT_VITE_URL,
12
9
  RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL,
13
- TESTING_FEATURE_FLAGS,
14
10
  TROUBLESHOOT_AUTH_URL,
15
11
  TROUBLESHOOT_RECORDER_URL,
16
- VUE_VITE_URL,
17
12
  } from "src/lib/utils/internal-urls/docs-urls.utils";
18
- import { SIMULATION_TAB_NAMES } from "./constants";
19
- import { EXPLANATION_OF_METHODS_TO_ADD_RECORDER } from "./recorder-snippets/explanation-of-methods-to-add-recorder";
13
+ import { connectGitProviderInstructions } from "./how-to/connect-git-provider";
20
14
 
21
15
  export const document = `---
22
16
  {
@@ -26,390 +20,117 @@ export const document = `---
26
20
 
27
21
  # {% $frontmatter.title %}
28
22
 
29
- Welcome to Meticulous! This guide will help you set up automated visual testing for your web application in 3 main steps.
23
+ Set up Meticulous in this order:
30
24
 
31
- ---
32
-
33
- ## Quick Start - Choose Your Path
34
-
35
- Answer 3 questions to get a customized setup guide:
36
-
37
- **Question 1: What framework are you using?**
38
- - **Next.js** → See [Next.js Setup Guide](${NEXTJS_APP_ROUTER_ADDITIONAL_SETUP_URL})
39
- - **React (Vite/CRA)** → See [React Setup Guide](${REACT_VITE_URL})
40
- - **Vue** → See [Vue Setup Guide](${VUE_VITE_URL})
41
- - **Angular** → See [Angular Setup Guide](${ANGULAR_CLI_URL})
42
- - **Other** → Continue with general guide below
43
-
44
- **Question 2: What are you testing?**
45
- - **Static site (HTML/JS/CSS, no SSR)** → Use \`upload-assets\` action (simplest and most reliable)
46
- - **Server-rendered app (Next.js, Nuxt, etc.)** → Use \`upload-container\` action (Docker)
47
- - **Not sure?** → Continue reading below
48
-
49
- **Question 3: How do you deploy?**
50
- - **Vercel Preview URLs** → Use [Cloud Replay](${CLOUD_REPLAY_URL}) (no CI workflow needed)
51
- - **Netlify/Other preview URLs** → Use [Cloud Replay](${CLOUD_REPLAY_URL})
52
- - **GitHub Actions CI** → Use [GitHub Actions Setup](${GITHUB_ACTIONS_SETUP_URL})
53
- - **Other CI** → Continue with general guide below
54
-
55
- ---
56
-
57
- ## Overview - 3 Steps to Get Started
58
-
59
- 1. **[5 minutes]** Install recorder and test locally
60
- 2. **[15 minutes]** Set up CI/CD workflow
61
- 3. **[Ongoing]** Record sessions and review diffs
62
-
63
- **Total setup time**: ~20 minutes for basic setup
64
-
65
- ---
66
-
67
- ## Step 1: Install Recorder and Test Locally (5 minutes)
68
-
69
- Before setting up CI, let's verify Meticulous works on your local machine.
70
-
71
- ### 1.1 Add Recorder Script
72
-
73
- {% callout type="info" title="Choose Your Environment" %}
74
- - **Always install on localhost** (for local development)
75
- - **Recommended**: Install on staging/preview environments
76
- - **Production**: Contact support for guidance
77
- {% /callout %}
78
-
79
- Add the Meticulous recorder script to your HTML \`<head>\`:
80
-
81
- \`\`\`html
82
- <script
83
- data-project-id="YOUR_PROJECT_ID"
84
- src="https://snippet.meticulous.ai/v1/meticulous.js"
85
- ></script>
86
- \`\`\`
87
-
88
- **Get your project ID**: [Meticulous Dashboard](https://app.meticulous.ai) → Project Settings
89
-
90
- **Where to add it**:
91
- - **Next.js App Router**: \`app/layout.tsx\` in \`<head>\`
92
- - **Next.js Pages**: \`pages/_document.tsx\` in \`<Head>\`
93
- - **React/Vue/Angular**: \`index.html\` or \`src/index.html\` in \`<head>\`
94
-
95
- ### 1.2 Verify Recorder Works
96
-
97
- 1. **Start your dev server**: \`npm run dev\`
98
- 2. **Open browser DevTools Console**
99
- 3. **Check for**: "Meticulous recorder initialized" message
100
- 4. **Verify**: \`window.Meticulous\` object exists
101
-
102
- If recorder doesn't load, see [Troubleshoot Recorder](${TROUBLESHOOT_RECORDER_URL}).
103
-
104
- ### 1.3 Test Local Simulation
105
-
106
- Let's verify Meticulous can replay a session on your local machine:
107
-
108
- {% command_card %}
109
- \`\`\`shell
110
- # Get a session ID from the dashboard first
111
- npx @alwaysmeticulous/cli simulate \\
112
- --apiToken="{% api_token /%}" \\
113
- --sessionId="<SESSION_ID>" \\
114
- --appUrl="http://localhost:3000"
115
- \`\`\`
116
- {% /command_card %}
117
-
118
- **Where to get session ID**:
119
- 1. Use your app normally with recorder installed
120
- 2. Go to [Meticulous Dashboard](https://app.meticulous.ai)
121
- 3. Find a recent session and copy its ID
122
-
123
- **Success criteria**:
124
- - Command completes without errors
125
- - You can view the simulation in the dashboard
126
- - Screenshots look correct
127
-
128
- **Common issues**:
129
- - **Authentication blocks simulation?** → See [Troubleshoot Auth](${TROUBLESHOOT_AUTH_URL})
130
- - **Different environment errors?** → See [Cross-Environment Guide](${RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL})
131
- - **Need to debug?** → Add \`--debugger --devTools\` flags
132
-
133
- **Debug tools**:
134
- - View simulation events: Dashboard → Simulation → *${SIMULATION_TAB_NAMES.TIMELINE_AND_LOGS}* tab
135
- - Step through replay: Add \`--debugger --devTools\` to simulate command
136
-
137
- {% callout type="warning" title="Test Local Simulation Before CI" %}
138
- Debugging simulation issues on your local machine is **much easier** than debugging in CI.
139
- Don't proceed to Step 2 until local simulation works!
140
- {% /callout %}
141
-
142
- ---
143
-
144
- ## Step 2: Set Up CI/CD Workflow (15 minutes)
145
-
146
- Now that local simulation works, let's run tests in CI on every pull request.
147
-
148
- ### 2.1 Choose Your CI Approach
149
-
150
- **Option A: Upload static assets (Recommended for static sites)**
151
- - If your app can be served as static HTML/JS/CSS without server-side rendering
152
- - Simplest and most reliable approach
153
- - Not recommended for typical Next.js apps
154
- - Guide: [GitHub Actions Setup](${GITHUB_ACTIONS_SETUP_URL})
155
-
156
- **Option B: Upload a Docker container (Recommended for server-rendered apps)**
157
- - For Next.js, Nuxt, and other SSR frameworks
158
- - You build a Docker image, Meticulous hosts it
159
- - Guide: [GitHub Actions Setup](${GITHUB_ACTIONS_SETUP_URL})
160
-
161
- **Option C: Preview URL integration**
162
- - Works with Vercel, Netlify, and other preview URL providers
163
- - No CI workflow needed (Vercel has a direct integration)
164
- - Guide: [Cloud Replay Setup](${CLOUD_REPLAY_URL})
165
-
166
- ### 2.2 Add API Token to CI
167
-
168
- 1. **Get API token**: [Dashboard](https://app.meticulous.ai) → Project Settings
169
- 2. **Add to GitHub**: Repo Settings → Secrets → Actions
170
- 3. **Create secret**: Name it \`METICULOUS_API_TOKEN\`
171
-
172
- ### 2.3 Create Workflow File
173
-
174
- Follow the [CI Setup Guide](${GITHUB_ACTIONS_SETUP_URL}) for step-by-step instructions and example workflow files for your chosen approach (upload static assets or upload a Docker container).
25
+ 1. Connect the repository to Meticulous.
26
+ 2. Choose automated CLI onboarding or manual setup.
27
+ 3. Record sessions and confirm Meticulous runs on pull requests.
175
28
 
176
- If using preview URLs, follow the [Cloud Replay Setup Guide](${CLOUD_REPLAY_URL}) instead.
177
-
178
- ### 2.4 Verify Workflow Runs
179
-
180
- 1. **Commit and push** the workflow file
181
- 2. **Create a test PR** with a small change
182
- 3. **Check Actions tab** for workflow run
183
- 4. **Expected first PR**: "No base test run found" (this is normal!)
184
-
185
- ### 2.5 Establish Base Run
186
-
187
- For the first PR to work, Meticulous needs a base run on your main branch:
188
-
189
- 1. **Merge the PR** that adds Meticulous workflow
190
- 2. **Wait** for workflow to run on main branch
191
- 3. **Verify** in Actions tab: main branch run succeeded
192
- 4. **Check dashboard**: You should see sessions and test runs
193
-
194
- ### 2.6 Test with Second PR
195
-
196
- 1. **Make a small UI change**
197
- 2. **Create another PR**
198
- 3. **Expected**: Meticulous comment with test results
199
- 4. **If you changed UI**: Diffs are detected
200
- 5. **If no changes**: "No diffs detected"
201
-
202
- {% callout type="success" title="Success!" %}
203
- If you see a Meticulous comment on your PR, congratulations! You're now running automated visual tests.
204
- {% /callout %}
205
-
206
- ---
207
-
208
- ## Checklist: Is Everything Working?
209
-
210
- Use this checklist to verify your setup:
211
-
212
- ### Recorder Installation
213
- - Recorder script added to HTML \`<head>\`
214
- - Project ID is correct
215
- - Console shows "Meticulous recorder initialized"
216
- - \`window.Meticulous\` object exists
217
- - Sessions appear in dashboard after using app
218
-
219
- ### Local Simulation
220
- - \`npx @alwaysmeticulous/cli simulate\` completes successfully
221
- - Can simulate authenticated pages
222
- - Can simulate different environments (if needed)
223
- - Simulation screenshots look correct
224
-
225
- ### CI Setup
226
- - API token added as repository secret
227
- - Workflow file created and pushed
228
- - Workflow runs on PRs
229
- - Base run exists on main branch
230
- - Meticulous comments on PRs
231
-
232
- ### Ready for Production
233
- - No false positive diffs
234
- - Auth works in tests
235
- - All critical user flows are recorded
236
- - Team knows how to review diffs
29
+ Connecting the repository first lets Meticulous identify the base and head
30
+ versions of each pull request or merge request and publish its test result in
31
+ the right place.
237
32
 
238
33
  ---
239
34
 
240
- ## Step 3: Record Sessions and Review Diffs (Ongoing)
241
-
242
- ### 3.1 Record Real User Sessions
243
-
244
- The more sessions you record, the better your test coverage:
245
-
246
- **Where to record**:
247
- - **Development**: Engineers testing locally
248
- - **Staging**: QA and product testing
249
- - **Preview URLs**: Testing on PRs
250
- - **Production**: Contact support for guidance
251
-
252
- **What gets recorded**:
253
- - User clicks, typing, scrolling
254
- - Network requests and responses
255
- - DOM changes and state
256
-
257
- ### 3.2 Curate Your Golden Set
258
-
259
- Meticulous automatically selects sessions that maximize coverage:
260
-
261
- 1. **View selected sessions**: Dashboard → Selected Sessions tab
262
- 2. **Increase count if needed**: Configure → Number of Sessions
263
- 3. **Manually add important flows**: Select specific sessions
264
-
265
- ### 3.3 Review Diffs on Pull Requests
35
+ ## 1. Connect your repository
266
36
 
267
- When Meticulous detects visual differences:
37
+ Create your Meticulous organization and project, then connect the Git provider
38
+ that hosts the repository. Do this before installing the recorder or configuring
39
+ CI.
268
40
 
269
- 1. **Review diff screenshots** in PR comment
270
- 2. **Determine if change is**:
271
- - **Expected**: Click "Approve" to mark as intentional
272
- - **Bug**: Fix the code
273
- - **False positive**: See [Fix False Positives](${FIX_FALSE_POSITIVES_URL})
41
+ ${connectGitProviderInstructions}
274
42
 
275
- ### 3.4 Make CI Check Blocking (Optional)
276
-
277
- Prevent merging PRs with unacknowledged diffs:
278
-
279
- 1. Go to repository settings
280
- 2. Add Meticulous check as required status
281
- 3. Now PRs can't merge with pending diffs
282
-
283
- See: [Make CI Check Blocking Guide](${MAKE_CHECK_BLOCKING_URL})
43
+ Once the linked project exists, choose how you want to install Meticulous.
284
44
 
285
45
  ---
286
46
 
287
- ## Original Setup Details
47
+ ## 2. Choose your setup path
288
48
 
289
- Below are the detailed instructions from the original onboarding guide.
49
+ {% tabs tabNameSpace="setup-path" %}
50
+ {% tab label="Meticulous CLI (recommended)" %}
290
51
 
291
- ## 1. Installing the session recorder
52
+ ## Automated setup with meticulous onboard
292
53
 
293
- Before installing the Meticulous session recorder, you should decide which environments are a good fit for recording user sessions:
54
+ \`meticulous onboard\` uses Claude Code or Codex on your machine to inspect the
55
+ application and prepare a pull request containing the recorder and CI
56
+ configuration. Meticulous does not host the model inference; the command uses
57
+ your existing Claude Code or Codex account.
294
58
 
295
- - The session recorder should always be installed on localhost to ensure that all sessions generated by engineers developing and testing your application locally are captured.
296
- - We also recommend installing it on other internal environments, like staging stacks or preview URLs.
297
- - If you are interested in recording production sessions, please reach out to Meticulous support for additional details.
59
+ ### Prerequisites
298
60
 
299
- ${EXPLANATION_OF_METHODS_TO_ADD_RECORDER}
61
+ - Run the command from a clone of the connected Git repository.
62
+ - Install and authenticate [Claude Code](https://docs.anthropic.com/en/docs/claude-code) or [Codex](https://developers.openai.com/codex/cli/).
63
+ - Use Node.js 20 or newer.
300
64
 
301
- More information on troubleshooting recorder problems can be found [here](${TROUBLESHOOT_RECORDER_URL}) and [here](${ENSURE_RECORDER_CAPTURES_ALL_REQUESTS_URL}).
65
+ ### Run onboarding
302
66
 
303
- ## 2. Setting up tests to run in CI
304
-
305
- ### Validating that sessions can be simulated
306
-
307
- Before setting up tests to run in CI, you should ensure that sessions can be simulated on your local machine. Debugging any issues on your
308
- local machine is much easier than debugging any issues that occur in CI. You can replay locally using the following CLI command:
67
+ From the application repository. If you are not logged in, the command opens a
68
+ browser to sign in, then continues:
309
69
 
310
70
  {% command_card %}
311
- \`\`\`shell
312
- npx @alwaysmeticulous/cli simulate
313
- --apiToken="{% api_token /%}"
314
- --sessionId="<SESSION_ID>"
315
- --appUrl="<URL_WHERE_APP_IS_RUNNING_LOCALLY>"
71
+ \`\`\`bash
72
+ npx @alwaysmeticulous/cli onboard --project="{% project_slug /%}"
316
73
  \`\`\`
317
74
  {% /command_card %}
318
75
 
319
- Important session simulation scenarios to check:
320
-
321
- - Can you simulate sessions on authenticated pages? If not, see [this doc](${TROUBLESHOOT_AUTH_URL}) on troubleshooting authentication & authorization issues.
322
- - Can you simulate sessions on a different environment from where they were recorded (e.g. can you simulate a session recorded on sandbox against
323
- your localhost environment)? If not, see [this doc](${RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL}) on troubleshooting cross-environment issues.
324
-
325
- Two tools to debug simulation issues:
326
-
327
- - Once a simulation has completed and been uploaded to Meticulous, you can view all the events that happened during the simulation on the
328
- *${SIMULATION_TAB_NAMES.TIMELINE_AND_LOGS}* tab of the simulation’s page in the Meticulous UI
329
- - Simulating a session with the flags \`--debugger --devTools\` will let you step through the simulation one user event at a time and pinpoint exactly where the issue is occurring
330
-
331
- ### Running tests in CI
332
-
333
- For test runs to be executed in CI, Meticulous needs to be able to simulate sessions in 3 different contexts:
334
-
335
- 1. **PR test runs**: whenever a new commit is pushed to a PR branch, Meticulous kicks off a test run where it simulates user sessions against the app running that commit.
336
- Ideally, this version of the app would be hosted on a commit-specific URL, but Meticulous can also run against the app if it's spun up in CI.
337
- 2. **New-commit-on-main test runs:** whenever a new commit is pushed to the main branch, Meticulous kicks off a test run to take new baseline screenshots.
338
- Ideally, Meticulous would run against a commit-specific URL here as well, but running the app in CI also works.
339
- 3. **Session selection test runs:** each night, Meticulous simulates every new session from the last 24 hours to determine if any of them add new coverage and should be
340
- included in the *selected set*. In this context, we want to test against the latest version of your app, so usually a publicly accessible staging URL works best.
341
-
342
- How to get Meticulous to trigger test runs across these contexts depends on how you build and serve your app:
76
+ On a remote machine where a browser cannot reach this terminal, sign in first
77
+ with device login, then re-run onboard:
343
78
 
344
- - **[Recommended] Upload static assets.** If your app can be served as a folder of static assets (HTML/JS/CSS) without server-side rendering, this is the simplest and most reliable approach. Follow the guide [here](${GITHUB_ACTIONS_SETUP_URL}) to set up the \`upload-assets\` action. This approach is not recommended for typical Next.js apps.
345
- - **Upload a Docker container.** For server-rendered apps (Next.js, Nuxt, etc.), you can build a Docker image and have Meticulous host it. Follow the guide [here](${GITHUB_ACTIONS_SETUP_URL}) to set up the \`upload-container\` action.
346
- - **Vercel preview URLs.** If you use Vercel preview URLs, the complexity of dealing with three different environments is completely abstracted.
347
- You can add Meticulous’ Vercel integration [here](https://vercel.com/integrations/meticulous) and then follow the guide [here](${CLOUD_REPLAY_URL}) to complete installation.
348
- - **Other preview URL providers (e.g. Netlify).** If you deploy your app to a preview URL without Vercel, you can follow the doc [here](${CLOUD_REPLAY_URL}) to set up Meticulous.
349
-
350
- Almost any app can be containerized, so if neither static assets nor preview URLs fit your app, uploading a Docker container is the universal fallback.
351
-
352
- {% callout type="info" title="GitHub Action Configuration" %}
353
- For a comprehensive list of all GitHub Action options and configuration parameters, see the [report-diffs-action README](https://github.com/alwaysmeticulous/report-diffs-action#readme).
354
- {% /callout %}
355
-
356
- ## Common Gotchas
357
-
358
- Before diving into performance tuning, be aware of these common issues that can cause test failures:
359
-
360
- ### Static Assets with Absolute URLs
361
-
362
- Meticulous automatically swaps the base URL for page navigation and API requests, but **static assets (CSS, JS, images) referenced with absolute URLs in your HTML are NOT rewritten**.
363
-
364
- If your HTML contains:
365
- \`\`\`html
366
- <script src="https://production.example.com/dist/app.js"></script>
367
- \`\`\`
368
-
369
- Change it to a relative URL:
370
- \`\`\`html
371
- <script src="/dist/app.js"></script>
79
+ {% command_card hideProjectSelector=true %}
80
+ \`\`\`bash
81
+ npx @alwaysmeticulous/cli auth login --device
372
82
  \`\`\`
83
+ {% /command_card %}
373
84
 
374
- See [Troubleshooting Cross-Environment Issues](${RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL}) for more details.
375
-
376
- ### Understanding Network Mocking
85
+ It asks you to choose the frontend application in a monorepo and the local
86
+ coding agent, reviews the repository, proposes a plan for approval, and then
87
+ opens a setup pull request.
377
88
 
378
- Meticulous automatically mocks XHR, Fetch, and WebSocket requests, but does NOT mock static assets loaded via HTML tags. For a complete explanation of what is and isn't mocked, see [How Meticulous Handles Network Requests](${NETWORK_STUBBING_EXPLANATION_URL}).
89
+ After the pull request is ready:
379
90
 
380
- ### Cross-Environment Configuration
91
+ 1. Review and merge the recorder and CI changes.
92
+ 2. Add any requested API token to your CI provider&apos;s secret store.
93
+ 3. Record a representative session.
94
+ 4. Open a pull request and confirm that Meticulous reports a result.
381
95
 
382
- If you're recording sessions in one environment (e.g., production) and simulating against another (e.g., localhost or preview URLs), ensure your environments have consistent:
383
- - Authentication configuration
384
- - URL routing patterns
385
- - Environment variables
96
+ {% /tab %}
97
+ {% tab label="Manual setup" %}
386
98
 
387
- See our [FAQ & Troubleshooting](${FAQ_AND_TROUBLESHOOTING_URL}) guide for more details.
99
+ ## Manual recorder and CI setup
388
100
 
389
- ## 3. Tuning Performance
101
+ Use the guided setup in the Meticulous app or follow these docs:
390
102
 
391
- Once Meticulous is set up to run in CI, there is usually a tuning period (~1-2 weeks) required to get Meticulous working at full capacity.
392
- A variety of features that can be used to tune Meticulous are described below.
103
+ 1. [Install the recorder](${INSTALL_RECORDER_URL}) for localhost and your
104
+ trusted internal or preview environments.
105
+ 2. Exercise a representative user flow and confirm the session appears in the
106
+ Meticulous project.
107
+ 3. [Replay the session locally](${DETECT_DIFFS_LOCALLY_URL}) before moving to
108
+ CI. Debugging locally is faster than debugging a CI-only failure.
109
+ 4. [Choose a CI approach](${CI_SETUP_URL}):
110
+ [upload static assets or a container](${GITHUB_ACTIONS_SETUP_URL}).
393
111
 
394
- ### Testing feature flags
112
+ For authenticated applications, make sure the recorded flow can sign in and
113
+ replay reliably. See [Troubleshooting authentication](${TROUBLESHOOT_AUTH_URL})
114
+ and [recording and replaying across environments](${RECORD_AND_REPLAY_ON_DIFFERENT_ENVIRONMENTS_URL}).
395
115
 
396
- If you make heavy use of feature flags we recommend configuring Meticulous to support using old sessions to test new features that are
397
- gated behind feature flags. Get started [here](${TESTING_FEATURE_FLAGS}).
116
+ {% /tab %}
117
+ {% /tabs %}
398
118
 
399
- ### Coverage
119
+ ---
400
120
 
401
- If you feel that coverage is insufficient, you can try to address it in a couple different ways:
121
+ ## 3. Verify the complete setup
402
122
 
403
- - **Increase the number of selected sessions**. When you click the *Configure* button in the *Selected Session* tab of your project dashboard in the Meticulous UI,
404
- you will see a *Number of Sessions to Auto Select* section. Below this, Meticulous will recommend increasing the number of selected sessions if it will add more coverage.
405
- - **Enable the session recorder on production.** Increasing the number of sessions being ingested by Meticulous should increase the level of
406
- coverage that Meticulous is able to provide. If you are interested in this option, please reach out to Meticulous support for more information.
123
+ Setup is complete when:
407
124
 
408
- ### Flakes & false diffs
125
+ - The project is linked to the correct GitHub, GitLab, or Bitbucket repository.
126
+ - At least one representative session reaches Meticulous.
127
+ - A session replays successfully against your application.
128
+ - The default branch has a baseline test run.
129
+ - A pull request or merge request produces a Meticulous result.
409
130
 
410
- You may run into a flake or false diff during the tuning period — below are some strategies to manage them:
131
+ If something fails, start with [recorder troubleshooting](${TROUBLESHOOT_RECORDER_URL})
132
+ or the [FAQ and troubleshooting guide](${FAQ_AND_TROUBLESHOOTING_URL}).
411
133
 
412
- - If the flake is not too frequent or problematic, you can click on the screenshot of the diff and then click *Flag as Unexpected*.
413
- This sends a bug report to the Meticulous team so that the flake can be prioritized and fixed.
414
- - If the flake is problematic, you can use the techniques described in [this doc](${FIX_FALSE_POSITIVES_URL}) to debug or ignore the problematic element.
134
+ After the first successful run, [make the Meticulous check blocking](${MAKE_CHECK_BLOCKING_URL})
135
+ and [reduce false-positive diffs](${FIX_FALSE_POSITIVES_URL}).
415
136
  `;
@@ -13,12 +13,15 @@ Meticulous recorder is a tool for recording real user sessions. The recorder cap
13
13
  include authorization tokens and other headers -- you should therefore only add trusted users to your Meticulous organization.
14
14
  You can either add the recorder to all environments or just internal non-production environments.
15
15
 
16
- ## 1. Sign up
16
+ ## 1. Create and connect your project
17
17
 
18
18
  Sign up at [https://app.meticulous.ai/signup](https://app.meticulous.ai/signup). You will be prompted to create an organization and
19
- project.
19
+ project. Connect the project to its GitHub, GitLab, or Bitbucket repository before installing the recorder.
20
20
 
21
21
  ## 2. Install the Meticulous recorder
22
22
 
23
+ You can run \`npx @alwaysmeticulous/cli onboard --project="<ORGANIZATION>/<PROJECT>"\` from the connected repository to have
24
+ Claude Code or Codex prepare the recorder and CI changes, or install the recorder manually:
25
+
23
26
  ${EXPLANATION_OF_METHODS_TO_ADD_RECORDER}
24
27
  `;
@@ -11,7 +11,7 @@ export const nuxtJsInstructions = (
11
11
 
12
12
  {% code %}
13
13
  \`\`\`shell
14
- npm install @alwaysmeticulous/recorder-plugin --save-dev
14
+ npm install @alwaysmeticulous/recorder-plugin@latest --save-dev
15
15
  \`\`\`
16
16
  {% /code %}
17
17
 
@@ -6,7 +6,7 @@ export const rsbuildInstructions = (
6
6
 
7
7
  {% code %}
8
8
  \`\`\`shell
9
- npm install @alwaysmeticulous/recorder-plugin --save-dev
9
+ npm install @alwaysmeticulous/recorder-plugin@latest --save-dev
10
10
  \`\`\`
11
11
  {% /code %}
12
12
 
@@ -6,7 +6,7 @@ export const viteInstructions = (
6
6
 
7
7
  {% code %}
8
8
  \`\`\`shell
9
- npm install @alwaysmeticulous/recorder-plugin --save-dev
9
+ npm install @alwaysmeticulous/recorder-plugin@latest --save-dev
10
10
  \`\`\`
11
11
  {% /code %}
12
12
 
@@ -37,6 +37,7 @@ meticulous [command]
37
37
 
38
38
  | Command | Purpose | Use Case |
39
39
  |---------|---------|----------|
40
+ | \`onboard\` | Install Meticulous using local Claude Code or Codex | Initial recorder and CI setup |
40
41
  | \`ci run-with-tunnel\` | Run tests in cloud via tunnel | CI testing with local app |
41
42
  | \`ci upload-assets\` | Upload and test static assets | CI testing for static sites |
42
43
  | \`ci upload-asset-chunk\` | Upload one named, versioned asset chunk | Multi-bundle deployments |
@@ -93,6 +94,42 @@ For a closer look at the \`agent\` and \`auth\` commands — including their fla
93
94
 
94
95
  ---
95
96
 
97
+ ## onboard
98
+
99
+ Install Meticulous in the current Git repository using your local Claude Code
100
+ or Codex. The command reviews the frontend application and prepares a pull
101
+ request with recorder and CI configuration. Model inference runs through your
102
+ own coding-agent account, not Meticulous-hosted inference.
103
+
104
+ ### Authentication
105
+
106
+ If you are not already logged in, \`onboard\` opens a browser to sign in and
107
+ then selects the Meticulous project. On a remote or sandboxed machine, run
108
+ \`npx @alwaysmeticulous/cli auth login --device\` first. Alternatively, pass
109
+ \`--apiToken\`.
110
+
111
+ ### Examples
112
+
113
+ \`\`\`bash
114
+ # Interactive setup from the connected application repository
115
+ npx @alwaysmeticulous/cli onboard --project="<ORGANIZATION>/<PROJECT>"
116
+
117
+ # Choose an app in a monorepo and use Claude Code
118
+ npx @alwaysmeticulous/cli onboard \\
119
+ --project="<ORGANIZATION>/<PROJECT>" \\
120
+ --app="apps/web" \\
121
+ --agent=claude
122
+
123
+ # Prepare the workspace without launching an agent
124
+ npx @alwaysmeticulous/cli onboard --printOnly
125
+ \`\`\`
126
+
127
+ Key options include \`--cwd\`, \`--project\`, \`--app\`, \`--agent\`,
128
+ \`--model\`, \`--headless\`, \`--auto\`, \`--printOnly\`, and
129
+ \`--apiToken\`.
130
+
131
+ ---
132
+
96
133
  ## ci run-with-tunnel
97
134
 
98
135
  Run Meticulous tests in the cloud against a locally-running application.
@@ -0,0 +1,22 @@
1
+ export interface InvalidCiYamlFile {
2
+ /** Path relative to the repository root, for display. */
3
+ relativePath: string;
4
+ /** First parse error, already including a line/column when the parser knew one. */
5
+ problem: string;
6
+ }
7
+ /**
8
+ * Parses the CI files that mention Meticulous and reports the ones a CI
9
+ * provider would reject. The install agent writes this YAML by hand, and a
10
+ * syntax slip there only shows up as a failed pipeline after the PR is open.
11
+ */
12
+ export declare const findInvalidCiYaml: (options: {
13
+ projectRoot: string;
14
+ }) => InvalidCiYamlFile[];
15
+ /**
16
+ * Prints a warning for CI files the agent left unparseable, so the user hears
17
+ * it here rather than from a red pipeline on the onboarding PR.
18
+ */
19
+ export declare const warnAboutInvalidCiYaml: (options: {
20
+ projectRoot: string;
21
+ }) => void;
22
+ //# sourceMappingURL=validate-ci-yaml.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"validate-ci-yaml.d.ts","sourceRoot":"","sources":["../../../src/commands/onboard/validate-ci-yaml.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,mFAAmF;IACnF,OAAO,EAAE,MAAM,CAAC;CACjB;AAWD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,YAAa;IACzC,WAAW,EAAE,MAAM,CAAC;CACrB,KAAG,iBAAiB,EAgBpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,YAAa;IAC9C,WAAW,EAAE,MAAM,CAAC;CACrB,KAAG,IAsBH,CAAC"}