@dailephd/my-frontend-observer 0.10.0 → 0.10.1

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 (75) hide show
  1. package/CHANGELOG.md +490 -479
  2. package/LICENSE +21 -21
  3. package/README.md +375 -365
  4. package/dist/application/projectCheckService.d.ts +6 -0
  5. package/dist/application/projectCheckService.js +8 -1
  6. package/dist/application/projectCheckService.js.map +1 -1
  7. package/dist/application/projectWorkflowService.d.ts +7 -2
  8. package/dist/application/projectWorkflowService.js +10 -3
  9. package/dist/application/projectWorkflowService.js.map +1 -1
  10. package/dist/cli.js +510 -510
  11. package/dist/viewer/index.html +13 -13
  12. package/dist/viewer/sw.js +1 -1
  13. package/docs/ARCHITECTURE.md +1394 -1385
  14. package/docs/CI_CD.md +349 -338
  15. package/docs/COMMANDS.md +1035 -1026
  16. package/docs/CONTRACTS.md +1971 -1960
  17. package/docs/CURRENT_STATE.md +1277 -1252
  18. package/docs/DEVELOPMENT.md +240 -237
  19. package/docs/DOCUMENTATION_PRESERVATION_POLICY.md +50 -50
  20. package/docs/PROJECT_DESCRIPTION.md +2248 -2224
  21. package/docs/PROJECT_MILESTONES.md +2681 -2558
  22. package/docs/PROJECT_OVERVIEW.md +200 -196
  23. package/docs/QUICKSTART.md +100 -100
  24. package/docs/RELEASE.md +37 -36
  25. package/docs/ROADMAP.md +1105 -1034
  26. package/docs/SECURITY.md +297 -297
  27. package/docs/WORKFLOWS.md +806 -796
  28. package/docs/plans/v0.10-implementation-plan.md +1509 -1509
  29. package/docs/plans/v0.8-implementation-plan.md +655 -655
  30. package/docs/plans/v0.8.1-cli-usability-patch-plan.md +505 -505
  31. package/docs/plans/v0.9-implementation-plan.md +1529 -1529
  32. package/docs/plans/v0.9.1-implementation-plan.md +468 -468
  33. package/docs/reports/v0.10-batch1-visual-change-workflow-foundation.md +102 -102
  34. package/docs/reports/v0.10-batch2-project-composition-check-recording.md +103 -103
  35. package/docs/reports/v0.10-batch3-viewer-visual-change-workspace.md +93 -93
  36. package/docs/reports/v0.10-batch4-actual-frontend-entry.md +59 -59
  37. package/docs/reports/v0.10-batch5-reference-driven-entry.md +238 -238
  38. package/docs/reports/v0.10-batch6-coding-agent-handoff.md +85 -85
  39. package/docs/reports/v0.10-batch7-correction-review-acceptance.md +145 -145
  40. package/docs/reports/v0.10-batch8-integrated-acceptance.md +109 -109
  41. package/docs/reports/v0.10-implementation-completeness-documentation-reconciliation.md +344 -344
  42. package/docs/reports/v0.10-pre-release-readiness.md +120 -120
  43. package/docs/reports/v0.10-release-preparation.md +70 -70
  44. package/docs/reports/v0.10.1-project-check-baseline-context-implementation.md +86 -0
  45. package/docs/reports/v0.7-bounded-fidelity-context-prompt7.md +243 -243
  46. package/docs/reports/v0.7-implementation-completeness-documentation-reconciliation.md +497 -497
  47. package/docs/reports/v0.7-pre-release-readiness.md +337 -337
  48. package/docs/reports/v0.7-reference-binding-prompt5.md +223 -223
  49. package/docs/reports/v0.7-reference-compatibility-prompt4.md +234 -234
  50. package/docs/reports/v0.7-reference-correction-workflow-prompt8.md +222 -222
  51. package/docs/reports/v0.7-reference-fidelity-prompt6.md +216 -216
  52. package/docs/reports/v0.7-reference-foundation-prompt1.md +151 -151
  53. package/docs/reports/v0.7-reference-regions-prompt2.md +195 -195
  54. package/docs/reports/v0.7-reference-requirements-prompt3.md +217 -217
  55. package/docs/reports/v0.7-release-prep.md +423 -423
  56. package/docs/reports/v0.8-binding-fidelity-interaction-batch6.md +279 -279
  57. package/docs/reports/v0.8-bounded-context-correlation-batch7.md +233 -233
  58. package/docs/reports/v0.8-comparison-contract-inspection-batch4.md +279 -279
  59. package/docs/reports/v0.8-evidence-index-readers-batch2.md +247 -247
  60. package/docs/reports/v0.8-implementation-completeness-documentation-reconciliation.md +741 -741
  61. package/docs/reports/v0.8-integrated-viewer-acceptance-batch8.md +128 -128
  62. package/docs/reports/v0.8-observation-svg-inspection-batch3.md +223 -223
  63. package/docs/reports/v0.8-prerelease-readiness-cross-platform-security-code-rot.md +687 -687
  64. package/docs/reports/v0.8-reference-candidate-inspection-batch5.md +232 -232
  65. package/docs/reports/v0.8-viewer-runtime-pwa-batch1.md +278 -278
  66. package/docs/reports/v0.8.1-implementation-completeness-documentation-reconciliation.md +114 -114
  67. package/docs/reports/v0.8.1-prerelease-readiness-cross-platform-security-code-rot.md +170 -170
  68. package/docs/reports/v0.9-architecture-retrieval.md +14 -37
  69. package/docs/reports/v0.9-final-pre-release-readiness.md +209 -209
  70. package/docs/reports/v0.9-final-readiness-corrections.md +530 -530
  71. package/docs/reports/v0.9-pre-release-readiness.md +169 -169
  72. package/docs/reports/v0.9.1-batch1-pwa-hard-gate-isolation.md +359 -359
  73. package/docs/reports/v0.9.1-batch2-hard-gate-validation-integration.md +262 -262
  74. package/docs/reports/v0.9.1-pre-release-readiness.md +206 -206
  75. package/package.json +59 -59
package/README.md CHANGED
@@ -1,365 +1,375 @@
1
- # my-frontend-observer
2
-
3
- ## Common project workflow (v0.10.0)
4
-
5
- ```powershell
6
- my-frontend-observer init --url http://127.0.0.1:3000 --target app=#app
7
- my-frontend-observer capture baseline
8
-
9
- # make a frontend change
10
- my-frontend-observer check baseline
11
-
12
- # inspect canonical evidence and provenance
13
- my-frontend-observer view
14
- ```
15
-
16
- `check baseline --json` returns bounded coding-agent evidence and exits `0`,
17
- `1`, `2`, or `3` for `PASS`, `FAIL`, `REVIEW_REQUIRED`, or `BLOCKED`.
18
- Canonical hashes remain available in viewer details and persisted provenance,
19
- but are not normal workflow command inputs. The existing low-level commands
20
- remain supported. v0.10.0 is the current release.
21
-
22
- v0.10.0 completes the Visual Change workflow described below.
23
-
24
- `my-frontend-observer` is the local-first rendered browser/runtime evidence
25
- producer in the my-dev-kit ecosystem. Its durable product purpose is defined
26
- in [docs/PROJECT_DESCRIPTION.md](docs/PROJECT_DESCRIPTION.md). Whole-ecosystem
27
- composition is documented in the [my-dev-kit ecosystem guide](https://github.com/dailephd/my-dev-kit/blob/main/docs/ECOSYSTEM_DEVELOPMENT_WORKFLOWS.md), including the [command-surface compatibility map](https://github.com/dailephd/my-dev-kit/blob/main/docs/ECOSYSTEM_DEVELOPMENT_WORKFLOWS.md#915-command-surface-compatibility-map).
28
-
29
- From a project-aware `view` session, a human can begin from an actual runtime
30
- capture
31
- or an approved reference, explicitly confirm structured visual intent, create
32
- and activate a frozen workflow, prepare a bounded handoff, let an external
33
- actor edit source, run the canonical `check <baseline> --json`, request another
34
- correction or accept the latest PASS, and optionally record separately created
35
- governance results. Observer never edits source, and acceptance never silently
36
- approves a baseline or reference.
37
-
38
- ## Current status
39
-
40
- `v0.10.0`, Full Visual Human–LLM Frontend Change Workflow, is the current
41
- release. It preserves the `v0.9.1` PWA hard-gate isolation and the `v0.9.0`
42
- Human Visual Annotation and Design-Intent Capture releases and builds on `v0.8.1`, Project Workflow CLI and
43
- Human-Readable Evidence Aliases, `v0.8.0`, Interactive Local Observation
44
- Viewer, and `v0.7.0`, End-to-End Coding-Agent Frontend Change
45
- Review, `v0.6.0`, Bounded Agent Context and Native my-dev-kit Ecosystem
46
- Integration, and `v0.5.0`, Executable Frontend Contracts and Explicit Change
47
- Scope: `my-frontend-observer observe` launches a real,
48
- sandboxed Chromium browser, enforces a loopback-only safety policy, captures
49
- a viewport screenshot plus bounded page/target evidence, and persists it as
50
- one portable `manifest.json` + `screenshot.png` artifact (observation schema
51
- `1.2.0`). `my-frontend-observer compare` reads two already-persisted
52
- observation artifacts and derives before/after evidence purely from their
53
- existing content, persisting a comparison artifact (comparison schema
54
- `1.0.0`). `my-frontend-observer approve-baseline`, `save-change-contract`,
55
- and `evaluate-contract` turn that evidence into an executable frontend
56
- contract: an explicitly approved baseline plus a per-change contract
57
- (requested/expected-dependent/protected/preserved scope) are evaluated
58
- together into one `PASS`/`FAIL` verdict, so a locally successful requested
59
- change can never silently hide a protected-region regression (frontend
60
- contract schema `1.0.0`; evaluation artifact schema `1.0.0`).
61
-
62
- Install:
63
-
64
- ```powershell
65
- npm install --save-dev @dailephd/my-frontend-observer
66
- npx playwright install chromium
67
- ```
68
-
69
- Setup for working from a source checkout instead:
70
-
71
- ```powershell
72
- npm install
73
- npx playwright install chromium
74
- npm run build
75
- ```
76
-
77
- Example use, against your own locally running frontend:
78
-
79
- ```powershell
80
- my-frontend-observer observe `
81
- --url http://localhost:3000/ `
82
- --viewport 1280x720 `
83
- --target header=header `
84
- --target main-content=main `
85
- --output observations
86
- ```
87
-
88
- (From a source checkout, use `node dist/cli.js observe ...` instead.)
89
-
90
- This prints a concise result (`Observation:`/`State:`/`Artifact:`/`Targets:`/
91
- `Diagnostics:`) and exits `0` on a successfully persisted observation. See
92
- [docs/COMMANDS.md](docs/COMMANDS.md) for the full flag reference.
93
-
94
- `--target <id=css-selector>` remains the simple CSS shorthand. A structured
95
- `--targets-file <json-file>` input mode - supporting a role and accessible
96
- name, a stable `id`, a `data-*` attribute, a semantic landmark element,
97
- exact text, or an ordered fallback between several of those - ships
98
- alongside it. See "Structured semantic targets" in
99
- [docs/COMMANDS.md](docs/COMMANDS.md#structured-semantic-targets-targets-file)
100
- for the exact JSON format.
101
-
102
- ### Runtime scroll scenarios
103
-
104
- `--scroll-scenario-file <json-file>` ships in this release: a real, bounded
105
- `window-scroll-by` or `target-scroll-by` action performs one immediate,
106
- non-smooth scroll and captures initial/final runtime evidence - window and
107
- configured-target scroll position, actual overflow, viewport relation,
108
- entered/left-viewport transitions, and a derived scroll-owner
109
- interpretation (`document`, `target:<stable-target-name>`, `none`, or
110
- `indeterminate`), all persisted in the same `manifest.json`. It may be
111
- combined with either `--target` or `--targets-file`. See "Scroll scenario"
112
- in
113
- [docs/COMMANDS.md](docs/COMMANDS.md#scroll-scenario---scroll-scenario-file)
114
- for the exact JSON format and flag reference.
115
-
116
- ### Comparison
117
-
118
- `my-frontend-observer compare` reads two already-persisted observation
119
- artifacts and derives before/after evidence purely from their existing
120
- content - it never launches a browser:
121
-
122
- ```powershell
123
- my-frontend-observer compare `
124
- --before observations/<before-observation-id> `
125
- --after observations/<after-observation-id> `
126
- --output comparisons
127
- ```
128
-
129
- (From a source checkout, use `node dist/cli.js compare ...` instead.)
130
-
131
- This prints a concise result (`Comparison:`/`State:`/`Artifact:`/
132
- `Differences:`/`Relationship changes:`/`Diagnostics:`) and exits `0` -
133
- including when the two observations turn out to be `incomparable`, which is
134
- itself a successful comparison outcome. See
135
- [docs/COMMANDS.md](docs/COMMANDS.md) for the full flag reference.
136
-
137
- ### Frontend contracts
138
-
139
- `v0.5.0` ships a text/config-driven frontend contract and evaluation
140
- workflow: approve a baseline against an observation, save a per-change
141
- contract, then evaluate a candidate change against them plus existing
142
- before/after/comparison evidence, deriving one `PASS`/`FAIL` verdict:
143
-
144
- ```powershell
145
- my-frontend-observer approve-baseline --observation observations/<id> --contract-file baseline.json --output baselines
146
- my-frontend-observer save-change-contract --contract-file change.json --output contracts
147
- my-frontend-observer evaluate-contract --before observations/<before-id> --after observations/<after-id> --comparison comparisons/<id> --baseline baselines/<baseline-id> --change contracts/<contract-id> --output evaluations [--enforce]
148
- ```
149
-
150
- (From a source checkout, use `node dist/cli.js approve-baseline ...` etc.
151
- instead.)
152
-
153
- `evaluate-contract` never launches a browser or recomputes comparison
154
- evidence. `--enforce` only changes the process exit status for a `FAIL`
155
- verdict; the verdict itself, and its persisted evidence, are unaffected. See
156
- [docs/COMMANDS.md](docs/COMMANDS.md) for the full flag reference and
157
- [docs/WORKFLOWS.md](docs/WORKFLOWS.md) for the end-to-end flow.
158
-
159
- ### Bounded agent context (v0.6.0)
160
-
161
- `src/domain/boundedAgentContext.ts`, `boundedAgentContextProjection.ts`,
162
- `boundedAgentContextCorrelation.ts`, and `boundedAgentContextIdentity.ts`
163
- ship a programmatic (library-only, no CLI command) bounded runtime
164
- projection and an explicit runtime/static correlation boundary
165
- (`correlated`/`ambiguous`/`unavailable`, never inferred source ownership),
166
- exported from `src/index.ts` (bounded-agent-context schema `1.0.0`). See
167
- [docs/CONTRACTS.md](docs/CONTRACTS.md) for the exact contract and
168
- [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) for how it fits the existing
169
- pipeline.
170
-
171
- ### External-reference correction workflow (v0.7.0)
172
-
173
- `import-reference` and
174
- `approve-reference` persist an externally supplied design-reference image
175
- (with optional regions, selected requirements/tolerances, and applicability
176
- state); `evaluate-reference-fidelity --reference --candidate
177
- [--bindings-file] [--enforce]` compares an already-persisted candidate
178
- observation against it, gated by reference adequacy, reference/candidate
179
- compatibility, and explicit region-to-target bindings:
180
-
181
- ```powershell
182
- my-frontend-observer import-reference design.png --output references --regions-file regions.json --requirements-file requirements.json --applicability-file applicability.json
183
- my-frontend-observer approve-reference --reference references/<id> --output references
184
- my-frontend-observer evaluate-reference-fidelity --reference references/<approved-id> --candidate observations/<id> --bindings-file bindings.json
185
- ```
186
-
187
- (From a source checkout, use `node dist/cli.js import-reference ...` etc.
188
- instead.)
189
-
190
- `import-reference`/`approve-reference`/`evaluate-reference-fidelity` never
191
- launch a browser or edit any file outside their own declared output
192
- location; `evaluate-reference-fidelity` persists nothing. A programmatic,
193
- library-only correction-workflow coordinator
194
- (`prepareReferenceCorrection`/`reviewReferenceCorrectionAttempt`, exported
195
- from `src/index.ts`, no CLI command) composes the full cycle - reference
196
- fidelity (reused unchanged) plus canonical v0.4 comparison and v0.5 contract
197
- evaluation - into one overall result: matching the reference is necessary
198
- but never sufficient, so a candidate that visually satisfies the reference
199
- while regressing an active protected/preserved contract clause still
200
- resolves to overall `FAIL`. my-frontend-observer never edits target source
201
- itself; an external implementation actor (a human or a coding agent, never
202
- this package) makes the actual source change between review attempts. See
203
- [docs/CONTRACTS.md](docs/CONTRACTS.md) and
204
- [docs/WORKFLOWS.md](docs/WORKFLOWS.md) for the exact contract and workflow,
205
- and [docs/CURRENT_STATE.md](docs/CURRENT_STATE.md) for the full
206
- implementation record.
207
-
208
- ### Interactive local viewer (v0.8.0)
209
-
210
- `my-frontend-observer view [--root <evidence-root>] [--bindings-file <json-file>] [--context-file <json-file>] [--port <n>] [--no-open]`
211
- starts a loopback-only (`127.0.0.1`) Node server that serves a React +
212
- TypeScript + Vite viewer application - usable in a normal browser or as an
213
- installed Progressive Web App - over the same evidence root used by every
214
- other command above. It never edits target source, never mutates any
215
- evidence artifact, and never runs `@dailephd/my-dev-kit`:
216
-
217
- ```powershell
218
- # In an initialized project, use managed evidence and aliases.
219
- my-frontend-observer view --port 4319 --no-open
220
-
221
- # `--root` remains the standalone/advanced form.
222
- my-frontend-observer view --root observations --port 4319 --no-open
223
- ```
224
-
225
- (From a source checkout, use `node dist/cli.js view ...` instead.)
226
-
227
- ### Visual annotation (v0.9.0)
228
-
229
- v0.9.0 adds structured visual annotation to the project-aware viewer. The
230
- model rests on a few deliberate separations:
231
-
232
- - Drawing is evidence, not meaning. A mark on its own says nothing about what
233
- should change.
234
- - Association is explicit. You choose what a mark is about.
235
- - Confirmation is explicit. A candidate meaning is only a proposal until you
236
- confirm it.
237
- - Promotion and materialization are selected actions. Nothing is promoted or
238
- materialized just because it was confirmed.
239
- - Promotion does not activate a contract, and materialization does not approve
240
- a reference. Those remain separate, explicit decisions.
241
-
242
- The capabilities:
243
-
244
- - **Runtime screenshot annotation**: draw points, rectangles, lines, arrows,
245
- and notes on an observation screenshot. Geometry is stored in runtime CSS
246
- pixels.
247
- - **External-reference annotation**: draw the same marks on an imported or
248
- approved design reference. Geometry is stored in reference-image pixels.
249
- - **Explicit association**: a mark is linked to a runtime target, a runtime
250
- relationship, a reference region, or a reference relationship only when you
251
- choose it. Drawing over something never creates an association.
252
- - **Candidate and confirmed intent**: you choose a structured intent (for
253
- example "move header right" or "create region hero"), review the exact
254
- candidate structure, and confirm it explicitly. Editing a confirmed item
255
- withdraws the confirmation.
256
- - **Immutable saves**: each save writes a new `VisualAnnotationArtifact`
257
- (schema `1.0.0`). A revision supersedes its parent and never rewrites it.
258
- - **Runtime contract promotion**: selected confirmed runtime intent can be
259
- promoted into a normal per-change frontend contract. Activating that
260
- contract for `check` is a separate explicit choice.
261
- - **Reference materialization**: selected confirmed reference regions and
262
- requirements can be materialized into a new imported external-reference
263
- revision that supersedes the source. The source reference is never changed,
264
- and the new revision is not approved automatically.
265
-
266
- Authoring is available only in the project-aware viewer:
267
-
268
- ```powershell
269
- # Project-aware: annotation authoring enabled for this project.
270
- my-frontend-observer view
271
-
272
- # Standalone: always read-only, even for annotation evidence.
273
- my-frontend-observer view --root .frontend-observer/evidence
274
- ```
275
-
276
- There is no separate annotation command. Observer still never edits target
277
- source, never approves a baseline or reference on its own, and never adds a
278
- new PASS/FAIL rule for annotations. The existing contract and reference
279
- evaluators remain the only source of verdicts. See
280
- [docs/WORKFLOWS.md](docs/WORKFLOWS.md) and
281
- [docs/SECURITY.md](docs/SECURITY.md) for the full workflow and the local write
282
- boundary.
283
-
284
- ## Demo and tutorials
285
-
286
- Explaining annotation, contracts, and references against a real application is
287
- hard, because a real application changes for reasons unrelated to the lesson.
288
- The repository therefore keeps a small deterministic demo application in
289
- [examples/v09-demo/](examples/v09-demo/README.md). Every region is named and
290
- every state difference is deliberate, so the same state always renders the
291
- same geometry at the canonical 1440x900 viewport.
292
-
293
- Four v0.9 tutorial scenarios live in `examples/v09-demo/tutorials/`. They are
294
- recorded by the external tool `@dailephd/my-dev-kit-lab@0.4.9`, which drives
295
- the real Observer viewer in Chromium against a disposable project built from
296
- the demo. Observer itself has no tutorial command and does not depend on the
297
- lab.
298
-
299
- A contributor builds Observer, generates a per-run target contract, then
300
- validates and runs a scenario:
301
-
302
- ```powershell
303
- npm run build
304
- node examples/v09-demo/scripts/generate-tutorial-target.mjs `
305
- --scenario observer-v09-annotation-basics `
306
- --out .my-dev-kit-workflow/adhoc/target-contract.json
307
- npx --yes @dailephd/my-dev-kit-lab@0.4.9 tutorial validate `
308
- --scenario examples/v09-demo/tutorials/01-annotation-basics.json `
309
- --target-contract .my-dev-kit-workflow/adhoc/target-contract.json --json
310
- npx --yes @dailephd/my-dev-kit-lab@0.4.9 tutorial run `
311
- --scenario examples/v09-demo/tutorials/01-annotation-basics.json `
312
- --target-contract .my-dev-kit-workflow/adhoc/target-contract.json `
313
- --out <an output directory you choose outside the repository> --json
314
- ```
315
-
316
- A run writes a WebM video, screenshots, SRT and VTT subtitles, a Markdown
317
- tutorial, and a manifest into the output directory you choose. None of that is
318
- committed. The demo and tutorial sources are repository examples only. They
319
- are not included in the npm package. See
320
- [examples/v09-demo/README.md](examples/v09-demo/README.md) for the full
321
- contributor workflow.
322
-
323
- ## License
324
-
325
- MIT. See [LICENSE](LICENSE).
326
-
327
- The viewer shows observation screenshots and SVG target overlays,
328
- before/after comparisons and contract/change-scope results, approved
329
- external references beside candidate observations with explicit binding
330
- cross-selection and on-demand fidelity evaluation, and - when
331
- `--context-file` supplies one - a read-only inspection of a bounded agent
332
- context's adequacy, omissions/truncations, and runtime/static correlation.
333
- Both `--bindings-file` and `--context-file` are explicit, session-only
334
- input: read once at startup, held only in server memory, never persisted,
335
- and never exposed as a filesystem path to the browser. See
336
- [docs/COMMANDS.md](docs/COMMANDS.md#view) for the full flag reference and
337
- [docs/WORKFLOWS.md](docs/WORKFLOWS.md) for the viewer workflow.
338
-
339
- See [docs/CURRENT_STATE.md](docs/CURRENT_STATE.md) for the exact current
340
- implementation and release state.
341
-
342
- Validation:
343
-
344
- ```powershell
345
- npm run typecheck
346
- npm run lint
347
- npm test
348
- npm run test:browser
349
- npm run test:security
350
- npm run build
351
- npm run check:docs
352
- ```
353
-
354
- Planning authorities:
355
-
356
- - [Project Description](docs/PROJECT_DESCRIPTION.md): complete durable product
357
- intent and responsibility boundaries.
358
- - [Project Milestones](docs/PROJECT_MILESTONES.md): complete ordered capability
359
- design and cross-milestone rules.
360
- - [ROADMAP](docs/ROADMAP.md): version-level requirements; v0.1-v0.10 are
361
- released.
362
- - [Current State](docs/CURRENT_STATE.md): retained scaffold and release state.
363
-
364
- No sibling ecosystem repository is a runtime dependency of the retained
365
- foundation.
1
+ # my-frontend-observer
2
+
3
+ ## Common project workflow (v0.10.1)
4
+
5
+ ```powershell
6
+ my-frontend-observer init --url http://127.0.0.1:3000 --target app=#app
7
+ my-frontend-observer capture baseline
8
+
9
+ # make a frontend change
10
+ my-frontend-observer check baseline
11
+
12
+ # inspect canonical evidence and provenance
13
+ my-frontend-observer view
14
+ ```
15
+
16
+ `check baseline --json` returns bounded coding-agent evidence and exits `0`,
17
+ `1`, `2`, or `3` for `PASS`, `FAIL`, `REVIEW_REQUIRED`, or `BLOCKED`.
18
+ Canonical hashes remain available in viewer details and persisted provenance,
19
+ but are not normal workflow command inputs. The existing low-level commands
20
+ remain supported. v0.10.1 is the current release.
21
+
22
+ Project `check` validates the chosen baseline before capturing a new candidate.
23
+ It uses the current project URL, viewport, targets, and normal capture defaults,
24
+ then replays only the baseline's optional scroll scenario and caller-declared
25
+ explicit-state identity. Project config, `init`, and ordinary `capture` do not
26
+ accept those low-level fields. Explicit-state replay does not establish
27
+ browser or session state.
28
+
29
+ v0.10.0 introduced the Visual Change workflow described below. v0.10.1 ships
30
+ automatic baseline-context replay for project checks without changing the
31
+ project-config schema or CLI; explicit-state replay remains declarative metadata.
32
+
33
+ `my-frontend-observer` is the local-first rendered browser/runtime evidence
34
+ producer in the my-dev-kit ecosystem. Its durable product purpose is defined
35
+ in [docs/PROJECT_DESCRIPTION.md](docs/PROJECT_DESCRIPTION.md). Whole-ecosystem
36
+ composition is documented in the [my-dev-kit ecosystem guide](https://github.com/dailephd/my-dev-kit/blob/main/docs/ECOSYSTEM_DEVELOPMENT_WORKFLOWS.md), including the [command-surface compatibility map](https://github.com/dailephd/my-dev-kit/blob/main/docs/ECOSYSTEM_DEVELOPMENT_WORKFLOWS.md#915-command-surface-compatibility-map).
37
+
38
+ From a project-aware `view` session, a human can begin from an actual runtime
39
+ capture
40
+ or an approved reference, explicitly confirm structured visual intent, create
41
+ and activate a frozen workflow, prepare a bounded handoff, let an external
42
+ actor edit source, run the canonical `check <baseline> --json`, request another
43
+ correction or accept the latest PASS, and optionally record separately created
44
+ governance results. Observer never edits source, and acceptance never silently
45
+ approves a baseline or reference.
46
+
47
+ ## Current status
48
+
49
+ `v0.10.1`, Project Check Baseline Context Replay, is the current release. It
50
+ builds on the `v0.10.0` Full Visual Human–LLM Frontend Change Workflow and
51
+ preserves the `v0.9.1` PWA hard-gate isolation and `v0.9.0` Human Visual
52
+ Annotation and Design-Intent Capture releases, as well as `v0.8.1`, Project Workflow CLI and
53
+ Human-Readable Evidence Aliases, `v0.8.0`, Interactive Local Observation
54
+ Viewer, and `v0.7.0`, End-to-End Coding-Agent Frontend Change
55
+ Review, `v0.6.0`, Bounded Agent Context and Native my-dev-kit Ecosystem
56
+ Integration, and `v0.5.0`, Executable Frontend Contracts and Explicit Change
57
+ Scope: `my-frontend-observer observe` launches a real,
58
+ sandboxed Chromium browser, enforces a loopback-only safety policy, captures
59
+ a viewport screenshot plus bounded page/target evidence, and persists it as
60
+ one portable `manifest.json` + `screenshot.png` artifact (observation schema
61
+ `1.2.0`). `my-frontend-observer compare` reads two already-persisted
62
+ observation artifacts and derives before/after evidence purely from their
63
+ existing content, persisting a comparison artifact (comparison schema
64
+ `1.0.0`). `my-frontend-observer approve-baseline`, `save-change-contract`,
65
+ and `evaluate-contract` turn that evidence into an executable frontend
66
+ contract: an explicitly approved baseline plus a per-change contract
67
+ (requested/expected-dependent/protected/preserved scope) are evaluated
68
+ together into one `PASS`/`FAIL` verdict, so a locally successful requested
69
+ change can never silently hide a protected-region regression (frontend
70
+ contract schema `1.0.0`; evaluation artifact schema `1.0.0`).
71
+
72
+ Install:
73
+
74
+ ```powershell
75
+ npm install --save-dev @dailephd/my-frontend-observer
76
+ npx playwright install chromium
77
+ ```
78
+
79
+ Setup for working from a source checkout instead:
80
+
81
+ ```powershell
82
+ npm install
83
+ npx playwright install chromium
84
+ npm run build
85
+ ```
86
+
87
+ Example use, against your own locally running frontend:
88
+
89
+ ```powershell
90
+ my-frontend-observer observe `
91
+ --url http://localhost:3000/ `
92
+ --viewport 1280x720 `
93
+ --target header=header `
94
+ --target main-content=main `
95
+ --output observations
96
+ ```
97
+
98
+ (From a source checkout, use `node dist/cli.js observe ...` instead.)
99
+
100
+ This prints a concise result (`Observation:`/`State:`/`Artifact:`/`Targets:`/
101
+ `Diagnostics:`) and exits `0` on a successfully persisted observation. See
102
+ [docs/COMMANDS.md](docs/COMMANDS.md) for the full flag reference.
103
+
104
+ `--target <id=css-selector>` remains the simple CSS shorthand. A structured
105
+ `--targets-file <json-file>` input mode - supporting a role and accessible
106
+ name, a stable `id`, a `data-*` attribute, a semantic landmark element,
107
+ exact text, or an ordered fallback between several of those - ships
108
+ alongside it. See "Structured semantic targets" in
109
+ [docs/COMMANDS.md](docs/COMMANDS.md#structured-semantic-targets-targets-file)
110
+ for the exact JSON format.
111
+
112
+ ### Runtime scroll scenarios
113
+
114
+ `--scroll-scenario-file <json-file>` ships in this release: a real, bounded
115
+ `window-scroll-by` or `target-scroll-by` action performs one immediate,
116
+ non-smooth scroll and captures initial/final runtime evidence - window and
117
+ configured-target scroll position, actual overflow, viewport relation,
118
+ entered/left-viewport transitions, and a derived scroll-owner
119
+ interpretation (`document`, `target:<stable-target-name>`, `none`, or
120
+ `indeterminate`), all persisted in the same `manifest.json`. It may be
121
+ combined with either `--target` or `--targets-file`. See "Scroll scenario"
122
+ in
123
+ [docs/COMMANDS.md](docs/COMMANDS.md#scroll-scenario---scroll-scenario-file)
124
+ for the exact JSON format and flag reference.
125
+
126
+ ### Comparison
127
+
128
+ `my-frontend-observer compare` reads two already-persisted observation
129
+ artifacts and derives before/after evidence purely from their existing
130
+ content - it never launches a browser:
131
+
132
+ ```powershell
133
+ my-frontend-observer compare `
134
+ --before observations/<before-observation-id> `
135
+ --after observations/<after-observation-id> `
136
+ --output comparisons
137
+ ```
138
+
139
+ (From a source checkout, use `node dist/cli.js compare ...` instead.)
140
+
141
+ This prints a concise result (`Comparison:`/`State:`/`Artifact:`/
142
+ `Differences:`/`Relationship changes:`/`Diagnostics:`) and exits `0` -
143
+ including when the two observations turn out to be `incomparable`, which is
144
+ itself a successful comparison outcome. See
145
+ [docs/COMMANDS.md](docs/COMMANDS.md) for the full flag reference.
146
+
147
+ ### Frontend contracts
148
+
149
+ `v0.5.0` ships a text/config-driven frontend contract and evaluation
150
+ workflow: approve a baseline against an observation, save a per-change
151
+ contract, then evaluate a candidate change against them plus existing
152
+ before/after/comparison evidence, deriving one `PASS`/`FAIL` verdict:
153
+
154
+ ```powershell
155
+ my-frontend-observer approve-baseline --observation observations/<id> --contract-file baseline.json --output baselines
156
+ my-frontend-observer save-change-contract --contract-file change.json --output contracts
157
+ my-frontend-observer evaluate-contract --before observations/<before-id> --after observations/<after-id> --comparison comparisons/<id> --baseline baselines/<baseline-id> --change contracts/<contract-id> --output evaluations [--enforce]
158
+ ```
159
+
160
+ (From a source checkout, use `node dist/cli.js approve-baseline ...` etc.
161
+ instead.)
162
+
163
+ `evaluate-contract` never launches a browser or recomputes comparison
164
+ evidence. `--enforce` only changes the process exit status for a `FAIL`
165
+ verdict; the verdict itself, and its persisted evidence, are unaffected. See
166
+ [docs/COMMANDS.md](docs/COMMANDS.md) for the full flag reference and
167
+ [docs/WORKFLOWS.md](docs/WORKFLOWS.md) for the end-to-end flow.
168
+
169
+ ### Bounded agent context (v0.6.0)
170
+
171
+ `src/domain/boundedAgentContext.ts`, `boundedAgentContextProjection.ts`,
172
+ `boundedAgentContextCorrelation.ts`, and `boundedAgentContextIdentity.ts`
173
+ ship a programmatic (library-only, no CLI command) bounded runtime
174
+ projection and an explicit runtime/static correlation boundary
175
+ (`correlated`/`ambiguous`/`unavailable`, never inferred source ownership),
176
+ exported from `src/index.ts` (bounded-agent-context schema `1.0.0`). See
177
+ [docs/CONTRACTS.md](docs/CONTRACTS.md) for the exact contract and
178
+ [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md) for how it fits the existing
179
+ pipeline.
180
+
181
+ ### External-reference correction workflow (v0.7.0)
182
+
183
+ `import-reference` and
184
+ `approve-reference` persist an externally supplied design-reference image
185
+ (with optional regions, selected requirements/tolerances, and applicability
186
+ state); `evaluate-reference-fidelity --reference --candidate
187
+ [--bindings-file] [--enforce]` compares an already-persisted candidate
188
+ observation against it, gated by reference adequacy, reference/candidate
189
+ compatibility, and explicit region-to-target bindings:
190
+
191
+ ```powershell
192
+ my-frontend-observer import-reference design.png --output references --regions-file regions.json --requirements-file requirements.json --applicability-file applicability.json
193
+ my-frontend-observer approve-reference --reference references/<id> --output references
194
+ my-frontend-observer evaluate-reference-fidelity --reference references/<approved-id> --candidate observations/<id> --bindings-file bindings.json
195
+ ```
196
+
197
+ (From a source checkout, use `node dist/cli.js import-reference ...` etc.
198
+ instead.)
199
+
200
+ `import-reference`/`approve-reference`/`evaluate-reference-fidelity` never
201
+ launch a browser or edit any file outside their own declared output
202
+ location; `evaluate-reference-fidelity` persists nothing. A programmatic,
203
+ library-only correction-workflow coordinator
204
+ (`prepareReferenceCorrection`/`reviewReferenceCorrectionAttempt`, exported
205
+ from `src/index.ts`, no CLI command) composes the full cycle - reference
206
+ fidelity (reused unchanged) plus canonical v0.4 comparison and v0.5 contract
207
+ evaluation - into one overall result: matching the reference is necessary
208
+ but never sufficient, so a candidate that visually satisfies the reference
209
+ while regressing an active protected/preserved contract clause still
210
+ resolves to overall `FAIL`. my-frontend-observer never edits target source
211
+ itself; an external implementation actor (a human or a coding agent, never
212
+ this package) makes the actual source change between review attempts. See
213
+ [docs/CONTRACTS.md](docs/CONTRACTS.md) and
214
+ [docs/WORKFLOWS.md](docs/WORKFLOWS.md) for the exact contract and workflow,
215
+ and [docs/CURRENT_STATE.md](docs/CURRENT_STATE.md) for the full
216
+ implementation record.
217
+
218
+ ### Interactive local viewer (v0.8.0)
219
+
220
+ `my-frontend-observer view [--root <evidence-root>] [--bindings-file <json-file>] [--context-file <json-file>] [--port <n>] [--no-open]`
221
+ starts a loopback-only (`127.0.0.1`) Node server that serves a React +
222
+ TypeScript + Vite viewer application - usable in a normal browser or as an
223
+ installed Progressive Web App - over the same evidence root used by every
224
+ other command above. It never edits target source, never mutates any
225
+ evidence artifact, and never runs `@dailephd/my-dev-kit`:
226
+
227
+ ```powershell
228
+ # In an initialized project, use managed evidence and aliases.
229
+ my-frontend-observer view --port 4319 --no-open
230
+
231
+ # `--root` remains the standalone/advanced form.
232
+ my-frontend-observer view --root observations --port 4319 --no-open
233
+ ```
234
+
235
+ (From a source checkout, use `node dist/cli.js view ...` instead.)
236
+
237
+ ### Visual annotation (v0.9.0)
238
+
239
+ v0.9.0 adds structured visual annotation to the project-aware viewer. The
240
+ model rests on a few deliberate separations:
241
+
242
+ - Drawing is evidence, not meaning. A mark on its own says nothing about what
243
+ should change.
244
+ - Association is explicit. You choose what a mark is about.
245
+ - Confirmation is explicit. A candidate meaning is only a proposal until you
246
+ confirm it.
247
+ - Promotion and materialization are selected actions. Nothing is promoted or
248
+ materialized just because it was confirmed.
249
+ - Promotion does not activate a contract, and materialization does not approve
250
+ a reference. Those remain separate, explicit decisions.
251
+
252
+ The capabilities:
253
+
254
+ - **Runtime screenshot annotation**: draw points, rectangles, lines, arrows,
255
+ and notes on an observation screenshot. Geometry is stored in runtime CSS
256
+ pixels.
257
+ - **External-reference annotation**: draw the same marks on an imported or
258
+ approved design reference. Geometry is stored in reference-image pixels.
259
+ - **Explicit association**: a mark is linked to a runtime target, a runtime
260
+ relationship, a reference region, or a reference relationship only when you
261
+ choose it. Drawing over something never creates an association.
262
+ - **Candidate and confirmed intent**: you choose a structured intent (for
263
+ example "move header right" or "create region hero"), review the exact
264
+ candidate structure, and confirm it explicitly. Editing a confirmed item
265
+ withdraws the confirmation.
266
+ - **Immutable saves**: each save writes a new `VisualAnnotationArtifact`
267
+ (schema `1.0.0`). A revision supersedes its parent and never rewrites it.
268
+ - **Runtime contract promotion**: selected confirmed runtime intent can be
269
+ promoted into a normal per-change frontend contract. Activating that
270
+ contract for `check` is a separate explicit choice.
271
+ - **Reference materialization**: selected confirmed reference regions and
272
+ requirements can be materialized into a new imported external-reference
273
+ revision that supersedes the source. The source reference is never changed,
274
+ and the new revision is not approved automatically.
275
+
276
+ Authoring is available only in the project-aware viewer:
277
+
278
+ ```powershell
279
+ # Project-aware: annotation authoring enabled for this project.
280
+ my-frontend-observer view
281
+
282
+ # Standalone: always read-only, even for annotation evidence.
283
+ my-frontend-observer view --root .frontend-observer/evidence
284
+ ```
285
+
286
+ There is no separate annotation command. Observer still never edits target
287
+ source, never approves a baseline or reference on its own, and never adds a
288
+ new PASS/FAIL rule for annotations. The existing contract and reference
289
+ evaluators remain the only source of verdicts. See
290
+ [docs/WORKFLOWS.md](docs/WORKFLOWS.md) and
291
+ [docs/SECURITY.md](docs/SECURITY.md) for the full workflow and the local write
292
+ boundary.
293
+
294
+ ## Demo and tutorials
295
+
296
+ Explaining annotation, contracts, and references against a real application is
297
+ hard, because a real application changes for reasons unrelated to the lesson.
298
+ The repository therefore keeps a small deterministic demo application in
299
+ [examples/v09-demo/](examples/v09-demo/README.md). Every region is named and
300
+ every state difference is deliberate, so the same state always renders the
301
+ same geometry at the canonical 1440x900 viewport.
302
+
303
+ Four v0.9 tutorial scenarios live in `examples/v09-demo/tutorials/`. They are
304
+ recorded by the external tool `@dailephd/my-dev-kit-lab@0.4.9`, which drives
305
+ the real Observer viewer in Chromium against a disposable project built from
306
+ the demo. Observer itself has no tutorial command and does not depend on the
307
+ lab.
308
+
309
+ A contributor builds Observer, generates a per-run target contract, then
310
+ validates and runs a scenario:
311
+
312
+ ```powershell
313
+ npm run build
314
+ node examples/v09-demo/scripts/generate-tutorial-target.mjs `
315
+ --scenario observer-v09-annotation-basics `
316
+ --out .my-dev-kit-workflow/adhoc/target-contract.json
317
+ npx --yes @dailephd/my-dev-kit-lab@0.4.9 tutorial validate `
318
+ --scenario examples/v09-demo/tutorials/01-annotation-basics.json `
319
+ --target-contract .my-dev-kit-workflow/adhoc/target-contract.json --json
320
+ npx --yes @dailephd/my-dev-kit-lab@0.4.9 tutorial run `
321
+ --scenario examples/v09-demo/tutorials/01-annotation-basics.json `
322
+ --target-contract .my-dev-kit-workflow/adhoc/target-contract.json `
323
+ --out <an output directory you choose outside the repository> --json
324
+ ```
325
+
326
+ A run writes a WebM video, screenshots, SRT and VTT subtitles, a Markdown
327
+ tutorial, and a manifest into the output directory you choose. None of that is
328
+ committed. The demo and tutorial sources are repository examples only. They
329
+ are not included in the npm package. See
330
+ [examples/v09-demo/README.md](examples/v09-demo/README.md) for the full
331
+ contributor workflow.
332
+
333
+ ## License
334
+
335
+ MIT. See [LICENSE](LICENSE).
336
+
337
+ The viewer shows observation screenshots and SVG target overlays,
338
+ before/after comparisons and contract/change-scope results, approved
339
+ external references beside candidate observations with explicit binding
340
+ cross-selection and on-demand fidelity evaluation, and - when
341
+ `--context-file` supplies one - a read-only inspection of a bounded agent
342
+ context's adequacy, omissions/truncations, and runtime/static correlation.
343
+ Both `--bindings-file` and `--context-file` are explicit, session-only
344
+ input: read once at startup, held only in server memory, never persisted,
345
+ and never exposed as a filesystem path to the browser. See
346
+ [docs/COMMANDS.md](docs/COMMANDS.md#view) for the full flag reference and
347
+ [docs/WORKFLOWS.md](docs/WORKFLOWS.md) for the viewer workflow.
348
+
349
+ See [docs/CURRENT_STATE.md](docs/CURRENT_STATE.md) for the exact current
350
+ implementation and release state.
351
+
352
+ Validation:
353
+
354
+ ```powershell
355
+ npm run typecheck
356
+ npm run lint
357
+ npm test
358
+ npm run test:browser
359
+ npm run test:security
360
+ npm run build
361
+ npm run check:docs
362
+ ```
363
+
364
+ Planning authorities:
365
+
366
+ - [Project Description](docs/PROJECT_DESCRIPTION.md): complete durable product
367
+ intent and responsibility boundaries.
368
+ - [Project Milestones](docs/PROJECT_MILESTONES.md): complete ordered capability
369
+ design and cross-milestone rules.
370
+ - [ROADMAP](docs/ROADMAP.md): version-level requirements; v0.1-v0.10 are
371
+ released.
372
+ - [Current State](docs/CURRENT_STATE.md): retained scaffold and release state.
373
+
374
+ No sibling ecosystem repository is a runtime dependency of the retained
375
+ foundation.