@petukhovart/agent-view 0.11.0 → 0.12.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.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "agent-view",
3
- "description": "Visual verification CLI for desktop apps (Electron/Tauri/Browser) via Chrome DevTools Protocol. Ships two skills: verify (run DOM, screenshot, eval, watch, console and log-feed checks against a live app) and verify-recipe (author a reusable verification plan as a .md file).",
4
- "version": "0.11.0",
3
+ "description": "Visual verification CLI for desktop apps (Electron/Tauri/Browser) via Chrome DevTools Protocol. Ships the verify skill: run DOM, screenshot, eval, watch, console and log-feed checks against a live app.",
4
+ "version": "0.12.0",
5
5
  "keywords": [
6
6
  "cdp",
7
7
  "electron",
package/README.md CHANGED
@@ -51,9 +51,9 @@ cd your-project
51
51
  agent-view init # writes agent-view.config.json (runtime, port, launch script)
52
52
  ```
53
53
 
54
- `init` auto-detects most projects. Review the generated `launch` field if your dev command is non-standard, and set `"allowEval": true` if you want recipes to use `eval`/`watch`. Prefer to write the config by hand? See [Config](#config) for the field list.
54
+ `init` auto-detects most projects. Review the generated `launch` field if your dev command is non-standard, and set `"allowEval": true` if you want verification to use `eval`/`watch`. Prefer to write the config by hand? See [Config](#config) for the field list.
55
55
 
56
- **2. Install the Claude Code plugin** (adds the `verify` and `verify-recipe` skills):
56
+ **2. Install the Claude Code plugin** (adds the `verify` skill):
57
57
 
58
58
  ```text
59
59
  /plugin marketplace add PetukhovArt/agent-view
@@ -104,7 +104,7 @@ Verify: after clicking Save, the button must be disabled until network completes
104
104
  No console errors.
105
105
  ```
106
106
 
107
- The `verify` skill starts your app via `agent-view launch`, runs the cheapest checks first (`eval` before `dom` before `screenshot`), and reports pass/fail. For repeatable checks, ask it to author a recipe first; see [Workflow with Claude Code](#workflow-with-claude-code).
107
+ The `verify` skill starts your app via `agent-view launch`, runs the cheapest checks first (`eval` before `dom` before `screenshot`), and reports pass/fail. See [Workflow with Claude Code](#workflow-with-claude-code) for driving it from a plan or a diff.
108
108
 
109
109
  ---
110
110
 
@@ -138,7 +138,7 @@ Full command surface in [Commands](#commands). For non-Claude-Code agents, see a
138
138
  │ reuses one CDP socket across commands
139
139
  ```
140
140
 
141
- The daemon is why `dom → click → dom` runs in ~17ms total: one persistent CDP socket, a 300ms AX-tree cache, parallel CDP calls inside `click`. CLI commands themselves are stateless. Each one is a single shell call you can drop into a script or a recipe.
141
+ The daemon is why `dom → click → dom` runs in ~17ms total: one persistent CDP socket, a 300ms AX-tree cache, parallel CDP calls inside `click`. CLI commands themselves are stateless. Each one is a single shell call you can drop into a script.
142
142
 
143
143
  ---
144
144
 
@@ -166,64 +166,44 @@ Full flag reference in [Commands](#commands).
166
166
 
167
167
  ## Workflow with Claude Code
168
168
 
169
- The plugin adds two skills built around an author-once / re-run loop:
170
-
171
- - `verify-recipe` interviews you about a feature or fix, then writes `.claude/verify-recipes/<slug>.md` with Repro Steps, Evidence Commands (cheapest first: `eval` before `dom` before `screenshot`), and an optional Design Conformance table mapping screenshots to local reference images.
172
- - `verify` reads a recipe (or runs ad-hoc), executes the commands against the live app, and reports pass/fail.
169
+ The plugin adds the `verify` skill: it launches the app, picks the cheapest tool that can answer each question (`eval` before `dom` before `screenshot`), executes the checks against the live app, and reports pass / fail / requires-visual-review per step.
173
170
 
174
171
  ```mermaid
175
172
  flowchart LR
176
- subgraph Author["Phase 1 — author once"]
177
- direction TB
178
- Dev1["Developer"] -->|prompt + plan/commits| Recipe["verify-recipe<br/>skill"]
179
- Recipe -->|writes| File[".claude/verify-recipes/<br/>&lt;slug&gt;.md"]
180
- end
173
+ Dev["Developer"] -->|"what must be true"| Verify["verify skill"]
174
+ Verify -->|"dom / eval / click /<br/>screenshot / watch / logs"| CLI["agent-view CLI"]
175
+ CLI -->|CDP| App["Live app"]
176
+ App -->|results| Verify
177
+ Verify -->|pass/fail + design verdict| Dev
178
+ ```
181
179
 
182
- subgraph Run["Phase 2 — run after every iteration"]
183
- direction TB
184
- Dev2["Developer"] -->|"run the recipe"| Verify["verify skill"]
185
- File -.->|read| Verify
186
- Verify -->|"dom / eval / click /<br/>screenshot / watch"| CLI["agent-view CLI"]
187
- CLI -->|CDP| App["Live app"]
188
- App -->|results| Verify
189
- Verify -->|pass/fail + design verdict| Dev2
190
- end
180
+ ### Ad-hoc
181
+
182
+ ```text
183
+ Verify: after clicking Save, the button must be disabled until network completes. No console errors.
191
184
  ```
192
185
 
193
- ### Phase 1: author
186
+ ### From a plan or a diff
194
187
 
195
188
  ```text
196
- Generate a verify-recipe for commits <hash1>..<hash2>.
197
- Source plan: .claude/plans/2026-04-27-login-redirect.md
189
+ Verify the scenarios in .claude/plans/2026-04-27-login-redirect.md for commits <hash1>..<hash2>.
198
190
  Symptom: after login, redirect went to /home instead of /dashboard.
199
191
 
200
192
  Design references (optional):
201
193
  - /abs/path/figma-exports/post-login.png → "post-login dashboard"
202
194
  ```
203
195
 
204
- ### Phase 2: run
205
-
206
- ```text
207
- Run the verify-recipe at .claude/verify-recipes/login-redirect.md.
208
- ```
209
-
210
196
  When something fails:
211
197
 
212
198
  ```text
213
199
  Step 4 failed (zone filter not mutating store). Fix and re-run that step plus step 7.
214
200
  ```
215
201
 
216
- ### One-shot (no plan, no persistent recipe)
217
-
218
- ```text
219
- Verify: after clicking Save, the button must be disabled until network completes. No console errors.
220
- ```
221
-
222
202
  ### Anti-patterns
223
203
 
224
- - "Just verify the feature" with no symptom. The recipe author can't pick the cheapest signal without knowing what "works" means.
204
+ - "Just verify the feature" with no symptom. Without knowing what "works" means, the skill can't pick the cheapest signal.
225
205
  - Pasting Figma URLs. agent-view doesn't fetch from Figma; export to PNG and pass the local path.
226
- - 50 assertions in one recipe. Split per-feature; a recipe should run in under 2 minutes.
206
+ - 50 assertions in one run. Split per-feature; a verification pass should finish in under 2 minutes.
227
207
 
228
208
  ---
229
209
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@petukhovart/agent-view",
3
- "version": "0.11.0",
3
+ "version": "0.12.0",
4
4
  "description": "CLI tool for visual verification of desktop apps (Electron/Tauri) via Chrome DevTools Protocol",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -256,9 +256,9 @@ When two tools could answer the same question, prefer the one higher up the tabl
256
256
 
257
257
  A run can produce one of three outcomes per step: **pass**, **fail**, **requires_visual_review**. There is no fourth bucket called "actually fine, here's why". A failed `Expected:` line is FAIL.
258
258
 
259
- These heuristics catch real bugs. Skipping them is how recipes silently pass while bugs sit in plain sight in the same data:
259
+ These heuristics catch real bugs. Skipping them is how a run silently passes while the bug sits in plain sight in the same data:
260
260
 
261
- 1. **A failed `Expected:` is FAIL.** If output disagrees with the expected line, mark `fail` and continue. Do not edit the expected line. Do not invent prose explanations inline ("label reuse", "convention", "recipe arithmetic off"). Justifications belong in the bug report after the run, never in the per-step log.
261
+ 1. **A failed expectation is FAIL.** If output disagrees with what the step expected, mark `fail` and continue. Do not soften the expectation. Do not invent prose explanations inline ("label reuse", "convention", "arithmetic off"). Justifications belong in the bug report after the run, never in the per-step log.
262
262
 
263
263
  2. **UI-vs-model mismatch is the bug, not noise.** When a count or hierarchy check returns `match: false`:
264
264
  - Default hypothesis: the UI renderer is wrong.
@@ -267,29 +267,14 @@ These heuristics catch real bugs. Skipping them is how recipes silently pass whi
267
267
 
268
268
  3. **Defensive eval reads.** Every `node.field` read (e.g. `transform.x`, `transform.width`) must be sentinel-checked before being used in arithmetic. A renamed field silently returns `NaN`/`null`, which fail-passes downstream comparisons. Add `isFinite(value)` / `value !== undefined` guards inline.
269
269
 
270
- 4. **No hardcoded literal IDs.** If a recipe contains hardcoded node-ID prefixes that don't match the current scene, the entire recipe degrades to no-op without errors. Verify at least one expected ID exists; if not, derive IDs by role at runtime and proceed with the corrected lookup. Flag the recipe as needing an ID-refresh fix.
270
+ 4. **No hardcoded literal IDs.** A hardcoded node-ID prefix that no longer matches the current scene degrades the whole check to a silent no-op. Verify at least one expected ID exists; if not, derive IDs by role at runtime and proceed with the corrected lookup, and say the plan needs an ID refresh.
271
271
 
272
- 5. **Reload checkpoint is not optional.** If the recipe has a `## Round-Trip Checkpoint` or `## Invariants` section mentioning reload/save/persistence — run it. If it does not, but the feature mutated persisted structure — run one anyway: `agent-view eval "location.reload()"`, wait for the app to come back, re-read the structural signature, diff. Drift is a real bug, not a "fixed-up on save".
272
+ 5. **Reload checkpoint is not optional.** If the feature mutated persisted structure, run one: `agent-view eval "location.reload()"`, wait for the app to come back, re-read the structural signature, diff. Drift is a real bug, not a "fixed-up on save".
273
273
 
274
- 6. **Recipe-stated invariants run first or fail closed.** If the recipe has an `## Invariants` section, execute those steps before the action-specific evidence commands. A failed invariant is FAIL for that invariant *and* a flag on the rest of the run — keep running the remaining steps, tag them as "trust-impaired until invariant restored".
274
+ 6. **Invariants run first or fail closed.** When the plan states invariants, execute those steps before the action-specific checks. A failed invariant is FAIL for that invariant *and* a flag on the rest of the run — keep running the remaining steps, tag them as "trust-impaired until invariant restored".
275
275
 
276
276
  7. **Never claim a `window.*` API is missing without `eval`.** Before reporting "API not exposed" / "global X doesn't exist" / "the host doesn't expose Y", you MUST run `agent-view eval "typeof window.X"` and report the literal result (`"undefined"` / `"object"` / `"function"`). DOM scraping cannot answer this question — globals are not in the AX tree. If `eval` returns `"undefined"`, the API really is absent from the main world; if it returns anything else, the API is reachable and your earlier conclusion was wrong. No exceptions, no "I checked the source code instead".
277
277
 
278
- ### Recipe Execution Mode (when a recipe file exists)
279
-
280
- If the developer points you at a `.claude/verify-recipes/<slug>.md` file, or one is discoverable via `ls .claude/verify-recipes/`, execute it inline yourself — **no subagent**.
281
-
282
- 1. `Read` the recipe.
283
- 2. If it has a `## Repro Steps` section, follow them — log in, navigate, set up data — using `agent-view` commands. Modern recipes (0.6+) may have `## Manual Preconditions` / `## Bringup` / `## Machine Preconditions` instead; treat those as documentation describing the expected state and execute the actions inline. There is no formal DSL — read what the section says and do it.
284
- 3. Resolve the window id once with `agent-view discover` if you need `--window`.
285
- 4. **If the recipe has an `## Invariants` section, run those steps first.** A failed invariant is FAIL — record it, then continue to evidence commands but tag subsequent results as "trust-impaired" until the invariant is restored.
286
- 5. Run each `## Evidence Commands` subsection in order. Compare output to its `Expected:` line. Mark each as `pass` / `fail` / `requires_visual_review`. **Follow the Execution discipline above** — particularly rules 1 and 2.
287
- 6. After 2–3 consecutive failures, stop and flag the recipe as likely stale. Distinguish "recipe stale" (hardcoded IDs no longer match) from "feature broken" (invariants violated on a current scene).
288
- 7. Run `## Regression Checks`.
289
- 8. **Run the round-trip checkpoint** (discipline rule 5) — either the recipe's section or, if absent and the feature is persistent, an ad-hoc reload check.
290
- 9. If a `## Design Conformance` section is present, run the inline workflow below.
291
- 10. Report a tight summary: passed / failed / visual-review counts plus one-liner per failure, and **any invariant violations called out separately**. Don't paste raw stdout unless asked.
292
-
293
278
  ### Ad-hoc Mode (standalone)
294
279
 
295
280
  After making code changes:
@@ -315,9 +300,15 @@ When UI scenarios are pre-generated (e.g., from a plan file with `## UI Scenario
315
300
 
316
301
  This mode works with any workflow that generates plan files with UI scenarios.
317
302
 
303
+ ### Reporting
304
+
305
+ Run the whole thing inline — **no subagent**. Resolve the window id once with `agent-view discover` if you need `--window`.
306
+
307
+ Report a tight summary: passed / failed / visual-review counts, one line per failure, invariant violations called out separately. Don't paste raw stdout unless asked. After 2–3 consecutive failures, stop and distinguish "the plan is stale" (hardcoded IDs no longer match the current UI) from "the feature is broken" (invariants violated on a current scene) — they need opposite fixes.
308
+
318
309
  ### Design Conformance (inline)
319
310
 
320
- When a recipe contains a `## Design Conformance` table — `(label, screenshot command, expected reference path)` rows — execute it yourself, no subagent.
311
+ When you are given `(label, screenshot command, expected reference path)` rows — from a plan, or from the developer directly — execute them yourself, no subagent.
321
312
 
322
313
  For each row:
323
314
  1. Run the screenshot command (capture the saved file path from stdout).
@@ -1,286 +0,0 @@
1
- ---
2
- name: verify-recipe
3
- description: "Generates a concrete, command-by-command agent-view recipe for verifying a feature or bugfix. Use when the developer wants to write a verify-recipe.md, create a verification plan, build an agent-view recipe, or produce a verify checklist for a change they shipped. Triggers on: write a verify-recipe, write verification steps, generate verify steps for the feature/bug I just shipped/fixed, make a verify-recipe.md, what should I run to verify X, create a verification plan, agent-view recipe for this fix, verify checklist for this feature. Does NOT execute the checks — it authors the plan. For running checks against a live app, use the verify skill instead."
4
- allowed-tools: Read, Write, Bash(agent-view *)
5
- ---
6
-
7
- # Verification Recipe Generator (rigor edition)
8
-
9
- You help the developer author a disciplined, cheapest-first verification recipe for a feature they shipped or a bug they fixed. You do not run the checks — you produce a `.claude/verify-recipes/<slug>.md` file that any AI coding agent can execute later.
10
-
11
- This edition is hardened against the failure mode of "construction-validated only" recipes that pass while real bugs sit in plain sight in the same data. See `## Bug-class invariants` and `## Discipline rules`.
12
-
13
- ## What this produces
14
-
15
- A file at `.claude/verify-recipes/<kebab-slug>.md` containing:
16
-
17
- - **REPRO STEPS** — exact state the app must be in before checks run.
18
- - **NARROWED SIGNAL** — the measurable indicator that proves success or failure.
19
- - **EVIDENCE COMMANDS** — ordered `agent-view` calls, cheapest first.
20
- - **POSITIVE-CASE ASSERTIONS** — what "pass" looks like for each command.
21
- - **BUG-CLASS INVARIANTS** *(required)* — properties that must hold across all states the recipe touches, not just the action-result state.
22
- - **ROUND-TRIP CHECKPOINT** *(required when the feature touches persistence or mutable structure)* — a save-and-reload (or equivalent) comparison.
23
- - **REGRESSION CHECKS** — adjacent paths that must not have broken.
24
- - **DESIGN CONFORMANCE** *(optional)* — reference image comparisons.
25
-
26
- Create the directory if missing: `mkdir -p .claude/verify-recipes`
27
-
28
- ## Methodology
29
-
30
- Frame the recipe with **hard-debug** discipline: REPRO → narrowed signal → minimize scope → root-cause check → fix verification.
31
-
32
- 1. Start from a reproducible starting state, not "open the app and poke around".
33
- 2. Convert vague expectations ("looks right") into measurable signals (`store.user.role === 'admin'`).
34
- 3. Prefer the cheapest tool that can answer the question — a value check costs ~50 tokens, a screenshot costs ~6 000.
35
- 4. Include at least one negative-case check (the old symptom must no longer appear).
36
- 5. Include at least one regression check (an adjacent flow must still work).
37
- 6. **Construction-only verification is not enough.** For any non-trivial feature, add invariant checks (see next section) and a round-trip checkpoint.
38
-
39
- ## Bug-class invariants (required section in every recipe)
40
-
41
- The recipe must include an `## Invariants` section listing properties that hold *regardless of how state was reached*. These catch bugs that construction-only tests cannot see, because the bug lives in the gap between what the model says and what the user sees / what persistence preserves.
42
-
43
- Pick at least one invariant from each applicable class. Skip a class only if it provably cannot apply to the feature.
44
-
45
- ### Class A — UI ≡ Model
46
- For every visible representation of state (tree, list, panel, breadcrumb, overlay, badge, count):
47
- - **Count parity:** `count(DOM rows of kind X) === count(model nodes of kind X)`.
48
- - **Hierarchy parity:** for any parent/child relationship the model expresses, the DOM must mirror it. A flat-rendered DOM of a nested model is a UI bug, not a model bug.
49
- - **Text parity:** the label shown in the UI for a node must equal `model.get(nodeId).name` (or whichever field the UI claims to display).
50
-
51
- Encode this as a single `eval` that returns a JSON struct so a single failed comparison is unambiguous:
52
-
53
- ```bash
54
- agent-view eval "var model=<source-of-truth>;var dom=<measurement>;JSON.stringify({modelCount:model.size, domCount:dom.length, match:model.size===dom.length})"
55
- ```
56
-
57
- If `match: false` — that is a FAIL. Do not rationalize a DOM/model count mismatch as "label reuse" or "the breadcrumb counts too" without confirming the matched elements' bounding boxes and DOM ancestry first.
58
-
59
- ### Class B — Round-trip
60
- For any feature that creates / mutates persisted structure:
61
- - `state ≡ deserialize(serialize(state))` (model survives save→load with bit-identical structure for the projected fields).
62
- - `world(child) === origWorld(child)` immediately after a wrap/unwrap action (the wrapping must not silently shift the wrapped element).
63
- - Reloading the page (`agent-view eval "location.reload()"`) and re-reading the same state must produce an identical signature.
64
-
65
- A round-trip discrepancy that the save serializer silently "fixes" is a model bug, not a save-format bug. Live-vs-persisted divergence between actions and reloads is a class-B failure even if save/load round-trips cleanly with itself.
66
-
67
- ### Class C — Reversibility & identity
68
- - Every user-facing command produces exactly one `commandHistory` entry (`canUndo→true`; one `undo()` fully reverses).
69
- - `undo` then `redo` produces an identical state to "do once".
70
- - The set of nodes after `do → undo → redo` equals the set after one `do`. Compare full IDs, not counts — a swap of one node for another with the same name is a real bug.
71
-
72
- ### Class D — No phantom state
73
- - For each visible entity the user can interact with, there exists exactly one corresponding model node.
74
- - For each model node, there exists at most one corresponding UI entity in each view.
75
- - An entity that appears in two views (e.g. tree and canvas) must have the same identity in both (the same `nodeId` resolves both).
76
-
77
- This class is the one most often missed. Verify it explicitly when the feature changes structure.
78
-
79
- ### Class E — Config conformance (rendering vs. configured constraint)
80
-
81
- Class A compares model to DOM. Class E compares the **rendered output** (DOM bounds, canvas geometry, computed styles, layout sizes) to an **explicit configuration value** the system declares it must respect. This is the home for invariants that have no DOM counterpart to diff against — they assert against a config the user (or product) chose.
82
-
83
- Typical examples — adapt names to the project:
84
-
85
- - **Snap/grid:** every shape's bounding box must satisfy `x % gridSize === 0` (and same for `y / width / height`). Read `gridSize` from the live config (`store.gridSettings.gridSize`, `theme.grid.size`, `viewport.snap`, …); do not hardcode.
86
- - **Viewport bounds:** elements declared "viewport-contained" must have `getBoundingClientRect()` within the viewport rect.
87
- - **Z-order / layering:** elements declared "above modals" must have computed `z-index` above the modal's. Compare against the configured layer table, not a literal number.
88
- - **Spacing / density tokens:** if the design system declares a spacing scale, computed `margin` / `padding` must be a multiple of the base token.
89
- - **Theme tokens:** computed colors / fonts must match the active theme's declared values, not literal hex codes.
90
-
91
- Generic helper shape:
92
-
93
- ```bash
94
- agent-view eval "var cfg=<read live config value>; var items=<measure rendered items>; var off=items.filter(function(it){return !<conforms(it, cfg)>}); JSON.stringify({cfg:cfg, total:items.length, offCount:off.length, sample:off.slice(0,3)})"
95
- ```
96
-
97
- Expected: `offCount: 0`. A non-zero count means the renderer ignored a config the system promised to honor — that is a real bug class, even if the model is internally consistent and round-trips cleanly. Bugs of the form "element is half a pixel off the grid", "modal renders behind the toast", "freshly-created group is not snapped" all live here and fall between the other classes.
98
-
99
- When generating recipes, ask: *what config values does this feature claim to respect?* Each one is one Class-E invariant. If the answer is "none" — say so explicitly in the recipe, so a future reader doesn't wonder why the class is absent.
100
-
101
- ## Discipline rules
102
-
103
- These rules govern how the recipe is *executed* — they must appear verbatim in the recipe's `## Discipline` section so the executor cannot forget them.
104
-
105
- 1. **A failed `Expected:` line is FAIL, not "actually fine".** Rationalizations belong in the bug report after the run, not inline in the run log. If the actual output disagrees with the expected line, mark `FAIL` and continue to the next step; do not edit the expected line, do not invent a "label reuse" or "convention" explanation that makes the discrepancy disappear from the count.
106
-
107
- 2. **Prefer model-vs-DOM mismatches as the bug, not as noise.** When a Class-A invariant fails, the default hypothesis is "the UI renderer is wrong", not "the DOM filter matched something extra". To rule out the latter, query bounding boxes and ancestor chains for every match; if the matches turn out to be sibling rows in the same list, the renderer is the bug.
108
-
109
- 3. **Defensive eval reads.** Every read of `node.transform.x` (or any model field) must include a sentinel: `isFinite(value)` or `value !== undefined`. A silent `NaN`/`null` from a renamed field looks like a real `0` in arithmetic and will fail-pass the assertion.
110
-
111
- 4. **No hardcoded literal IDs.** All node IDs in evals must be resolved by role at runtime (e.g. "the first group at root", "the line at root not inside any group"). Hardcoded prefixes silently degrade the recipe to no-op when the scene differs.
112
-
113
- 5. **The reload checkpoint is not optional.** For any recipe that touches mutable structure, include at least one `location.reload()` between an action and a re-measurement. Compare the projected signature before and after; differences are real bugs, not "fixed-up on save".
114
-
115
- 6. **Compose, do not narrate.** Final report is `pass / fail / requires_visual_review` counts plus one-line failure reasons. Do not paste raw stdout. Do not include prose justifications in the per-step output.
116
-
117
- 7. **`requires_visual_review` is an executor verdict, not an authoring shortcut.** When generating the recipe, draft every step so it executes through `agent-view`. Do not write `requires_visual_review` as the planned status of a step just because the path looks tricky (event delegation, canvas hit-test, file dialog, etc.) — first encode the cheapest sub-check that *can* run programmatically (e.g. "no console error during the action", "model state changed", "command history advanced by one"). The `requires_visual_review` label is set by the *executor* at run time, only after at least one genuine attempt to drive the action via agent-view failed for a reason they record. Authoring the recipe with `requires_visual_review` prebaked is what lets real regressions sit unobserved.
118
-
119
- ## Tool-cost decision tree
120
-
121
- Pick the first row that can answer the question. Only go lower when the row above can't:
122
-
123
- | Question | Command | Why it's cheapest |
124
- |---|---|---|
125
- | Element exists / has specific text / role | `agent-view dom --filter "<text>" --depth 2` | Structured text, zero vision tokens |
126
- | Count of matching elements | `agent-view dom --filter X --count` | Single integer, zero tree tokens |
127
- | App state, store value, computed flag | `agent-view eval "<expr>"` | Returns the value directly; DOM inference is wasteful and fragile |
128
- | What changed between action and final state | `agent-view watch "<expr>" --until "<condition>"` or `--max-changes 1` | `eval` shows the snapshot; `watch` shows the trajectory |
129
- | SharedWorker / ServiceWorker internal state | `agent-view eval --target <name> "<expr>"` | Workers have no DOM |
130
- | Did this action throw or warn silently? | `agent-view console --clear` before, `agent-view console --level error,warn` after | Catches uncaught exceptions invisible to DOM |
131
- | Layout, spacing, visual regression | `agent-view screenshot --scale 0.5` | Last resort — only tool that sees pixels (~6 000 tokens) |
132
- | Canvas / WebGL scene state | `agent-view scene --diff` | DOM is empty for canvas apps |
133
-
134
- **Anti-patterns to reject:**
135
- - Opening with a screenshot to "see the state" — use `dom --filter` or `eval` first.
136
- - Using `eval` when `dom --filter` answers the question.
137
- - Assertions that depend on transient state without `watch --until` to stabilize first.
138
- - "Check that it looks right" — every assertion must be a concrete pass/fail criterion. Single legitimate exception: `## Design Conformance`.
139
- - Inventing design reference paths (`.figma-refs/...`) when the developer did not provide them.
140
- - **Treating SG (or any model layer) as the sole source of truth.** Model is one of several representations; the bug may live in the gap between model and UI. The recipe must check the gap explicitly.
141
-
142
- ## Workflow
143
-
144
- ### Step 1 — gather context
145
-
146
- Ask in plain text (no tool calls yet):
147
-
148
- 1. What was shipped or fixed?
149
- 2. What was the original symptom or expected behavior?
150
- 3. Any known failure mode or edge case to cover?
151
- 4. Does this feature touch persisted structure (YAML, IndexedDB, server)? If yes → mandatory round-trip section.
152
- 5. Which views render this state (tree, panel, list, canvas, breadcrumb)? Each named view → one UI-≡-Model invariant in Class A.
153
- 6. Which **configured constraints** does this feature claim to respect (grid/snap, viewport, z-order/layer table, spacing tokens, theme tokens, density)? Each named constraint → one Class-E invariant. If none — say so explicitly.
154
- 7. *(Optional)* Local design reference images? Local files only.
155
-
156
- Wait for the response before continuing.
157
-
158
- ### Step 2 — derive invariants before drafting commands
159
-
160
- Before writing any `agent-view` call, list the invariants the feature must satisfy. For each, write one sentence in the form:
161
- > "After any sequence of allowed actions, `<measurable property>` must hold."
162
-
163
- This list seeds the `## Invariants` section. If you cannot articulate three invariants for a non-trivial feature, the feature is under-specified — ask the developer for clarification.
164
-
165
- ### Step 3 — draft the recipe
166
-
167
- ```markdown
168
- # Verify: <feature or fix name>
169
-
170
- Generated: <date>
171
- Scope: <one sentence>
172
-
173
- ## Repro Steps
174
- 1. <Exact starting state>
175
- 2. <Action(s) that trigger the behavior under test>
176
-
177
- ## Narrowed Signal
178
- `<agent-view command>` must return `<expected value>`.
179
-
180
- ## Invariants
181
- <!-- Required. List each invariant the feature must maintain. -->
182
-
183
- - **A1 (UI≡Model — <view name>):** `<eval expression that returns {model: N, dom: M, match: bool}>` must return `match: true`.
184
- - **A2 (Hierarchy):** For each model node with `parentId === X`, its UI row must be a DOM-descendant of the UI row of `X`.
185
- - **B1 (Round-trip):** After `location.reload()`, the projected signature `<projection>` is identical to the pre-reload signature.
186
- - **B2 (No silent wrap-shift):** After `<wrap-creating action>`, `getWorldTransform(child).x === origWorldX(child)` for every wrapped child.
187
- - **C1 (Single undo):** After `<action>`, `commandHistory.canUndo === true` and one `undo()` produces a signature identical to the pre-action signature.
188
- - **D1 (No phantoms):** For each visible UI row of kind `<X>`, there exists exactly one model node it resolves to via its `nodeId` data-attribute (or the equivalent identifier).
189
- - **E1 (Config conformance — <constraint name>):** Every rendered `<entity>` must satisfy `<conforms(rendered, configValue)>`, where `<configValue>` is read live from `<config source>` (do not hardcode). `offCount: 0` is required.
190
-
191
- ## Discipline
192
-
193
- 1. A failed `Expected:` line is FAIL, not "actually fine".
194
- 2. UI-vs-model mismatches are the bug; confirm by ancestry/bbox before dismissing.
195
- 3. Every `node.field` read in eval must be sentinel-checked (`isFinite` / `!== undefined`).
196
- 4. No hardcoded literal IDs; resolve by role at runtime.
197
- 5. Reload checkpoint is mandatory when the feature touches mutable structure.
198
- 6. Report `pass / fail / requires_visual_review` per step; failure prose belongs in the bug report only.
199
- 7. Do not pre-bake `requires_visual_review` as the planned status of a step. Every step ships with an executable `agent-view` path (at minimum a console-error gate around the action). The executor sets `requires_visual_review` only after a real attempt fails for a recorded reason.
200
-
201
- ## Evidence Commands
202
-
203
- ### 0. Setup — capture baseline signature
204
- ```bash
205
- agent-view eval "<signature expression — projection of all structural fields>"
206
- ```
207
- Stash the output as `BASELINE_SIG`.
208
-
209
- ### 1. <What this proves>
210
- ```bash
211
- agent-view <command>
212
- ```
213
- Expected: <concrete criterion>
214
- Cost: ~<N> tokens
215
-
216
- ### 2. ... (one per action / invariant pair)
217
-
218
- ### N. Round-trip checkpoint (if applicable)
219
- ```bash
220
- agent-view eval "location.reload()"
221
- # wait for app to come back
222
- agent-view eval "<same signature expression as step 0>"
223
- ```
224
- Expected: identical to `BASELINE_SIG` after the action's expected effect is accounted for. Diff any drift.
225
-
226
- ## Positive-Case Assertions
227
- - [ ] <criterion>
228
-
229
- ## Regression Checks
230
- - [ ] <adjacent flow> — `agent-view <command>` → `<expected>`
231
-
232
- ## Design Conformance
233
- <!-- Optional. Include ONLY if developer provided design refs. -->
234
-
235
- | Step Label | Screenshot Command | Expected Reference |
236
- |---|---|---|
237
- | <area name> | `agent-view screenshot --crop "<area>" --scale 0.5` | `<absolute path>` |
238
-
239
- Tolerance: `normal`.
240
-
241
- ## Anti-patterns avoided
242
- - <recipe-specific traps>
243
- ```
244
-
245
- ### Step 4 — save the file
246
-
247
- Determine a kebab-slug. Save to `.claude/verify-recipes/<slug>.md`. Create the directory first.
248
-
249
- Confirm the path to the developer.
250
-
251
- ## Worked example: "added group component to scene editor"
252
-
253
- **Developer input:**
254
- > Added a group component that wraps multiple scene elements. Ctrl+G groups selected elements; Ctrl+Shift+G ungroups. Groups appear in the left tree panel as collapsible nodes. Groups are persisted in YAML.
255
-
256
- **Recipe excerpt (Invariants + Round-trip — the parts that catch the bugs construction-only recipes miss):**
257
-
258
- ```markdown
259
- ## Invariants
260
-
261
- - **A1 (UI≡Model, tree count):**
262
- ```
263
- agent-view eval "var sg=window.__editorCore.sceneGraph;var modelCount=0;sg.nodes.forEach(function(n){if(n.componentType==='group')modelCount++});var domCount=[...document.querySelectorAll('[role=treeitem]')].filter(function(e){return e.textContent.includes('Группа')}).length;JSON.stringify({modelCount:modelCount, domCount:domCount, match:modelCount===domCount})"
264
- ```
265
- must return `match: true`.
266
-
267
- - **A2 (Tree hierarchy):**
268
- ```
269
- agent-view eval "var sg=window.__editorCore.sceneGraph;var violations=[];sg.nodes.forEach(function(n,id){if(n.componentType==='group'){n.childrenIds.forEach(function(cid){var domChild=document.querySelector('[data-node-id=\"'+cid+'\"]');var domParent=document.querySelector('[data-node-id=\"'+id+'\"]');if(domChild&&domParent&&!domParent.contains(domChild))violations.push({c:cid,p:id})})}});JSON.stringify({violations:violations.length})"
270
- ```
271
- must return `violations: 0`.
272
-
273
- - **B1 (Round-trip after Ctrl+G + reload):**
274
- Capture signature, dispatch Ctrl+G, capture signature, reload, capture signature. The post-reload signature must equal the post-Ctrl+G signature *projected to the persisted fields*. Drift in `transform.x` of any wrapped child means the wrap path did not normalize coords.
275
-
276
- - **B2 (No silent wrap-shift):**
277
- Before Ctrl+G: capture `getWorldTransform(child).x` for each leaf. After Ctrl+G: re-capture. Difference must be 0 (within float epsilon). Non-zero means the wrap action shifted the child in world space — a regression.
278
-
279
- - **C1 (Single undo):**
280
- After Ctrl+G, `commandHistory.canUndo === true`. After one `undo()`, signature equals pre-Ctrl+G signature exactly.
281
-
282
- - **D1 (No phantom group rows):**
283
- Same eval as A1; if the result is `modelCount: 1, domCount: 2`, that is a phantom-row bug. Confirm by `agent-view eval "[...document.querySelectorAll('span')].filter(e=>e.textContent==='Группа'&&e.children.length===0).map(e=>{var r=e.getBoundingClientRect();return{x:r.x,y:r.y}})"` — two adjacent rows in the same column = phantom.
284
- ```
285
-
286
- This single example pair (A1 + D1 + B1 + B2) catches the three bugs from the 4.7 grouping session that the construction-only recipes missed.