my-frontend-observer 0.1.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 (69) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +69 -0
  3. package/dist/application/browserCaptureService.d.ts +11 -0
  4. package/dist/application/browserCaptureService.js +12 -0
  5. package/dist/application/browserCaptureService.js.map +1 -0
  6. package/dist/application/observationPersistence.d.ts +59 -0
  7. package/dist/application/observationPersistence.js +78 -0
  8. package/dist/application/observationPersistence.js.map +1 -0
  9. package/dist/artifacts/artifactWriter.d.ts +25 -0
  10. package/dist/artifacts/artifactWriter.js +68 -0
  11. package/dist/artifacts/artifactWriter.js.map +1 -0
  12. package/dist/artifacts/types.d.ts +17 -0
  13. package/dist/artifacts/types.js +2 -0
  14. package/dist/artifacts/types.js.map +1 -0
  15. package/dist/browser/chromiumAdapter.d.ts +21 -0
  16. package/dist/browser/chromiumAdapter.js +150 -0
  17. package/dist/browser/chromiumAdapter.js.map +1 -0
  18. package/dist/browser/evidenceCapture.d.ts +19 -0
  19. package/dist/browser/evidenceCapture.js +201 -0
  20. package/dist/browser/evidenceCapture.js.map +1 -0
  21. package/dist/browser/types.d.ts +22 -0
  22. package/dist/browser/types.js +2 -0
  23. package/dist/browser/types.js.map +1 -0
  24. package/dist/cli.d.ts +7 -0
  25. package/dist/cli.js +216 -0
  26. package/dist/cli.js.map +1 -0
  27. package/dist/domain/completion.d.ts +30 -0
  28. package/dist/domain/completion.js +22 -0
  29. package/dist/domain/completion.js.map +1 -0
  30. package/dist/domain/diagnostics.d.ts +17 -0
  31. package/dist/domain/diagnostics.js +55 -0
  32. package/dist/domain/diagnostics.js.map +1 -0
  33. package/dist/domain/evidence.d.ts +27 -0
  34. package/dist/domain/evidence.js +55 -0
  35. package/dist/domain/evidence.js.map +1 -0
  36. package/dist/domain/identity.d.ts +13 -0
  37. package/dist/domain/identity.js +37 -0
  38. package/dist/domain/identity.js.map +1 -0
  39. package/dist/domain/schema.d.ts +111 -0
  40. package/dist/domain/schema.js +126 -0
  41. package/dist/domain/schema.js.map +1 -0
  42. package/dist/index.d.ts +21 -0
  43. package/dist/index.js +12 -0
  44. package/dist/index.js.map +1 -0
  45. package/dist/request/paths.d.ts +14 -0
  46. package/dist/request/paths.js +33 -0
  47. package/dist/request/paths.js.map +1 -0
  48. package/dist/request/request.d.ts +43 -0
  49. package/dist/request/request.js +174 -0
  50. package/dist/request/request.js.map +1 -0
  51. package/dist/safety/policy.d.ts +14 -0
  52. package/dist/safety/policy.js +81 -0
  53. package/dist/safety/policy.js.map +1 -0
  54. package/docs/ARCHITECTURE.md +85 -0
  55. package/docs/CI_CD.md +28 -0
  56. package/docs/COMMANDS.md +82 -0
  57. package/docs/CONTRACTS.md +54 -0
  58. package/docs/CURRENT_STATE.md +113 -0
  59. package/docs/DEVELOPMENT.md +65 -0
  60. package/docs/DOCUMENTATION_PRESERVATION_POLICY.md +33 -0
  61. package/docs/PROJECT_DESCRIPTION.md +1770 -0
  62. package/docs/PROJECT_MILESTONES.md +2073 -0
  63. package/docs/PROJECT_OVERVIEW.md +53 -0
  64. package/docs/QUICKSTART.md +35 -0
  65. package/docs/RELEASE.md +9 -0
  66. package/docs/ROADMAP.md +352 -0
  67. package/docs/SECURITY.md +33 -0
  68. package/docs/WORKFLOWS.md +51 -0
  69. package/package.json +46 -0
@@ -0,0 +1,2073 @@
1
+ # my-frontend-observer — Project Milestones
2
+
3
+ ## Purpose
4
+
5
+ This document defines the ordered development milestones for `my-frontend-observer`.
6
+
7
+ `my-frontend-observer` is a separate, local-first runtime/browser evidence producer within the broader `my-dev-kit` ecosystem.
8
+
9
+ Its purpose is to observe what a browser actually renders and convert that runtime frontend state into structured evidence that humans, large language models (LLMs), coding agents, automated regression checks, and later ecosystem consumers can inspect.
10
+
11
+ The milestone order is intentional.
12
+
13
+ Later capabilities must extend the observation model established by earlier milestones rather than creating parallel browser-control, artifact, comparison, contract, annotation, or integration systems.
14
+
15
+ The project must preserve the core evidence flow:
16
+
17
+ ```text
18
+ browser observation
19
+ → structured runtime evidence
20
+ → relationships and behavior
21
+ → comparison
22
+ → contracts and change scope
23
+ → bounded agent context plus static/runtime integration
24
+ → text/config-driven coding-agent change review
25
+ → human graphical inspection
26
+ → structured visual annotation
27
+ → full visual human–LLM frontend change workflow
28
+ ```
29
+
30
+ The project must not become a source-analysis replacement for `my-dev-kit`.
31
+
32
+ ## Long-term responsibility model
33
+
34
+ The intended ecosystem responsibility split is:
35
+
36
+ ```text
37
+ my-dev-kit
38
+ → static repository/source evidence
39
+ → files
40
+ → symbols
41
+ → architecture
42
+ → dependencies
43
+ → source ownership
44
+ → bounded source retrieval
45
+
46
+ my-frontend-observer
47
+ → rendered browser/runtime evidence
48
+ → screenshots
49
+ → stable rendered-region identities
50
+ → geometry
51
+ → scrolling and overflow
52
+ → visibility
53
+ → layout relationships
54
+ → comparisons
55
+ → runtime contracts
56
+ → human visual intent
57
+
58
+ my-dev-kit-orchestrator
59
+ → workflow coordination
60
+ → bounded evidence consumption
61
+ → implementation and verification flow
62
+
63
+ my-dev-kit-lab
64
+ → compatibility
65
+ → experiments
66
+ → fixtures
67
+ → ecosystem evaluation
68
+ → evidence-quality validation
69
+ ```
70
+
71
+ These responsibilities must remain distinct even when the projects become deeply integrated.
72
+
73
+ Deep integration means explicit contracts, evidence references, adapters, exact readers, and coordinated workflows.
74
+
75
+ It does not mean merging all four projects into one implementation.
76
+
77
+ ## Product development model
78
+
79
+ The project develops through four broad phases.
80
+
81
+ ### Phase A — Runtime evidence foundation
82
+
83
+ ```text
84
+ Milestones 1–3
85
+ ```
86
+
87
+ Establish trustworthy browser observation, stable runtime targets, and runtime behavior evidence.
88
+
89
+ ### Phase B — Safe-change reasoning
90
+
91
+ ```text
92
+ Milestones 4–5
93
+ ```
94
+
95
+ Add comparison, relationship/dependency reasoning, executable contracts, and explicit requested/dependent/protected/preserved/unexpected change scope.
96
+
97
+ ### Phase C — Coding-agent and ecosystem workflow
98
+
99
+ ```text
100
+ Milestones 6–7
101
+ ```
102
+
103
+ Combine bounded runtime and static evidence through explicit ecosystem contracts, then prove a text/config-driven coding-agent change-review workflow before graphical interaction becomes a dependency.
104
+
105
+ ### Phase D — Human visual interaction
106
+
107
+ ```text
108
+ Milestones 8–10
109
+ ```
110
+
111
+ Add graphical inspection, structured visual annotation, and the complete visual human–LLM frontend change workflow on top of the already proven coding-agent path.
112
+
113
+ ## Milestone 1 — Runtime Observation Foundation
114
+
115
+ ### Objective
116
+
117
+ Establish `my-frontend-observer` as an independently executable runtime-evidence producer and prove the smallest complete browser-observation workflow against a deterministic local target.
118
+
119
+ This milestone establishes the foundational evidence model that every later capability must reuse.
120
+
121
+ ### Required capability
122
+
123
+ The first vertical slice must be able to:
124
+
125
+ 1. launch or connect to Chromium through the selected browser automation mechanism;
126
+ 2. navigate to a supplied local URL;
127
+ 3. apply a supplied viewport width and height;
128
+ 4. accept one or more explicitly configured observation targets;
129
+ 5. capture a screenshot;
130
+ 6. capture required page-level browser evidence;
131
+ 7. capture required target-level rendered evidence;
132
+ 8. write one cohesive versioned observation artifact set;
133
+ 9. return a concise machine-usable and human-understandable success, partial, warning, or failure result.
134
+
135
+ ### Initial public interface
136
+
137
+ The initial public interface should be command-line first.
138
+
139
+ It should accept at minimum:
140
+
141
+ ```text
142
+ target URL
143
+ viewport width
144
+ viewport height
145
+ observation targets
146
+ output location
147
+ ```
148
+
149
+ and produce:
150
+
151
+ ```text
152
+ screenshot
153
+ structured page evidence
154
+ structured target evidence
155
+ versioned observation artifact
156
+ concise execution result
157
+ ```
158
+
159
+ The command-line interface must not own browser-control logic directly.
160
+
161
+ The observation engine must remain reusable independently of command-line presentation.
162
+
163
+ ### Minimum page evidence
164
+
165
+ Capture at least:
166
+
167
+ ```text
168
+ requested URL
169
+ final URL
170
+ document title
171
+
172
+ viewport width
173
+ viewport height
174
+ device pixel ratio where available
175
+
176
+ document width
177
+ document height
178
+ document scroll width
179
+ document scroll height
180
+ document client width
181
+ document client height
182
+
183
+ window scroll X
184
+ window scroll Y
185
+ ```
186
+
187
+ ### Minimum target evidence
188
+
189
+ For each explicitly observed target, capture at least:
190
+
191
+ ```text
192
+ stable observer target identifier
193
+ selection method
194
+ selection result/status
195
+ tag
196
+
197
+ semantic role when available
198
+ accessible name when available
199
+
200
+ x
201
+ y
202
+ width
203
+ height
204
+ right
205
+ bottom
206
+
207
+ visibility
208
+ display
209
+ position
210
+ overflow-x
211
+ overflow-y
212
+
213
+ scroll width
214
+ scroll height
215
+ client width
216
+ client height
217
+ scroll top
218
+ scroll left where applicable
219
+ ```
220
+
221
+ ### Observation artifact foundation
222
+
223
+ The first milestone must establish an observer-owned artifact contract.
224
+
225
+ The exact schema and filenames must be decided during architecture/schema design, but the artifact model must include:
226
+
227
+ ```text
228
+ artifact kind
229
+ schema version
230
+ observation identity
231
+ producer/package version
232
+ browser identity
233
+ request/configuration identity
234
+ provenance
235
+ page evidence
236
+ target evidence
237
+ screenshot reference
238
+ completion state
239
+ diagnostics
240
+ limits and omissions
241
+ artifact references
242
+ ```
243
+
244
+ Artifact paths should be relative to the observation root where practical.
245
+
246
+ The artifact model must distinguish:
247
+
248
+ ```text
249
+ direct browser observation
250
+ derived interpretation
251
+ unavailable evidence
252
+ not-applicable evidence
253
+ partial evidence
254
+ ```
255
+
256
+ Package version and observation schema version must remain separate concepts.
257
+
258
+ ### Evidence boundedness
259
+
260
+ The first version must not collect an unrestricted browser dump.
261
+
262
+ Observation must be explicitly scoped.
263
+
264
+ Do not capture by default:
265
+
266
+ - the entire raw Document Object Model;
267
+ - every computed style property;
268
+ - a complete accessibility tree;
269
+ - arbitrary numbers of targets;
270
+ - redundant browser evidence.
271
+
272
+ When evidence is omitted or truncated because of a limit, the artifact must make that visible.
273
+
274
+ ### Completion semantics
275
+
276
+ The system must distinguish:
277
+
278
+ ```text
279
+ complete observation
280
+ partial observation
281
+ observation with warnings
282
+ invalid request
283
+ fatal observation failure
284
+ ```
285
+
286
+ Missing required evidence must not silently appear as a valid zero, false, empty string, or successful result.
287
+
288
+ ### Diagnostics
289
+
290
+ Establish a small stable diagnostic model for cases such as:
291
+
292
+ - invalid request;
293
+ - unsupported configuration;
294
+ - navigation failure;
295
+ - target missing;
296
+ - target ambiguous;
297
+ - target hidden or unavailable;
298
+ - browser evidence unavailable;
299
+ - evidence truncated;
300
+ - artifact write failure;
301
+ - browser/runtime failure.
302
+
303
+ Diagnostic ordering should be deterministic where practical.
304
+
305
+ ### Browser and network safety
306
+
307
+ Before broad navigation support is added, define the browser/network safety boundary.
308
+
309
+ The initial milestone should remain conservative and local-first.
310
+
311
+ The design must explicitly address, as appropriate:
312
+
313
+ - allowed URL schemes;
314
+ - local versus remote targets;
315
+ - redirects;
316
+ - timeouts;
317
+ - certificate failure behavior;
318
+ - downloads;
319
+ - popups;
320
+ - browser permissions;
321
+ - unexpected navigation;
322
+ - sensitive rendered data;
323
+ - secret-bearing URLs or output;
324
+ - browser-process cleanup.
325
+
326
+ ### Deterministic fixture requirement
327
+
328
+ Create deterministic local fixture content for development and browser-level automated tests.
329
+
330
+ The first fixture should contain enough structure to observe at least:
331
+
332
+ ```text
333
+ header
334
+ navigation
335
+ main/workspace
336
+ footer
337
+ ```
338
+
339
+ The fixture exists to validate the observer, not to imitate a production product.
340
+
341
+ ### Architecture requirements
342
+
343
+ The first milestone must establish clean ownership boundaries for at least:
344
+
345
+ ```text
346
+ command-line interface
347
+ observation engine/application service
348
+ browser adapter
349
+ observation domain/schema
350
+ target/selector configuration
351
+ artifact writer
352
+ fixture/test infrastructure
353
+ ```
354
+
355
+ Do not put browser automation directly inside future React presentation components.
356
+
357
+ Do not create speculative plugin systems, event buses, generic dependency containers, or multi-browser registries before they are justified.
358
+
359
+ ### Ecosystem requirements
360
+
361
+ Milestone 1 must establish the observer as a future ecosystem evidence producer without creating cross-project runtime coupling.
362
+
363
+ The observer must not yet require:
364
+
365
+ ```text
366
+ my-dev-kit
367
+ my-dev-kit-orchestrator
368
+ my-dev-kit-lab
369
+ ```
370
+
371
+ as runtime dependencies.
372
+
373
+ The first artifact must nevertheless be designed so that future exact readers/adapters can consume it without scraping console text or depending on internal browser-library objects.
374
+
375
+ ### Acceptance criteria
376
+
377
+ Milestone 1 is complete when:
378
+
379
+ - a clean installation can run the observation workflow;
380
+ - Chromium launches successfully;
381
+ - a supplied deterministic local page loads;
382
+ - viewport configuration is honored;
383
+ - explicitly configured targets are evaluated;
384
+ - screenshot generation succeeds;
385
+ - structured page evidence is written;
386
+ - structured target evidence is written;
387
+ - artifact identity and schema version are explicit;
388
+ - provenance is recorded;
389
+ - observed and derived evidence are distinguishable;
390
+ - missing/partial evidence is represented honestly;
391
+ - output paths are portable and bounded;
392
+ - browser/network safety rules are documented;
393
+ - deterministic fixture tests exist;
394
+ - target application files remain untouched;
395
+ - typecheck passes;
396
+ - lint passes;
397
+ - unit/integration tests pass;
398
+ - browser-level tests pass;
399
+ - applicable build/package validation passes;
400
+ - project documentation explains how the first observation works.
401
+
402
+ ### Explicit exclusions
403
+
404
+ Do not include yet:
405
+
406
+ - automatic route discovery;
407
+ - comparison between observations;
408
+ - persistent regression contracts;
409
+ - requested/dependent/protected change contracts;
410
+ - rich LLM context packaging;
411
+ - graphical observation viewer;
412
+ - visual annotation;
413
+ - static source ownership;
414
+ - `my-dev-kit` integration;
415
+ - orchestrator integration;
416
+ - lab integration;
417
+ - external LLM APIs;
418
+ - cloud browsers;
419
+ - authentication workflows;
420
+ - collaboration;
421
+ - cross-browser support beyond the selected initial Chromium implementation.
422
+
423
+ ## Milestone 2 — Stable Semantic Targets and Region Identity
424
+
425
+ ### Objective
426
+
427
+ Make meaningful frontend regions reliably observable and referable across repeated observations without depending entirely on brittle CSS selectors.
428
+
429
+ ### Required capability
430
+
431
+ Establish an explicit observation-target model supporting appropriate forms such as:
432
+
433
+ - stable element `id`;
434
+ - accessibility role;
435
+ - accessible name;
436
+ - stable `data-*` attribute;
437
+ - semantic HTML element;
438
+ - bounded CSS selector fallback;
439
+ - text-based selection only when needed and explicitly constrained.
440
+
441
+ The exact public target configuration model must be defined before implementation.
442
+
443
+ ### Stable runtime identity
444
+
445
+ Every configured observation target must have a stable observer-level identifier independent of its browser locator.
446
+
447
+ Example:
448
+
449
+ ```text
450
+ target id:
451
+ primary-navigation
452
+
453
+ locator:
454
+ role=navigation
455
+ accessible name=Primary navigation
456
+ ```
457
+
458
+ The stable observer identity should remain usable by:
459
+
460
+ - observations;
461
+ - comparisons;
462
+ - contracts;
463
+ - annotations;
464
+ - future ecosystem correlation.
465
+
466
+ A stable runtime identity must not be treated as proof of source ownership.
467
+
468
+ ### Multiple targets
469
+
470
+ One observation must support multiple explicitly configured targets.
471
+
472
+ Logical target examples may include:
473
+
474
+ ```text
475
+ app-shell
476
+ header
477
+ primary-navigation
478
+ main-content
479
+ tool-workspace
480
+ left-ad-rail
481
+ right-ad-rail
482
+ footer-ad
483
+ footer
484
+ theme-control
485
+ ```
486
+
487
+ These names are examples only.
488
+
489
+ The observer must not assume every target project has these regions.
490
+
491
+ ### Semantic evidence
492
+
493
+ Where the browser exposes it reliably, enrich target observations with:
494
+
495
+ - accessibility role;
496
+ - accessible name;
497
+ - landmark identity;
498
+ - relevant state;
499
+ - containment relationships useful for layout reasoning.
500
+
501
+ ### Cardinality and selection behavior
502
+
503
+ Target selection must define expected cardinality.
504
+
505
+ The observer must report explicitly when:
506
+
507
+ - no match exists;
508
+ - more than one element matches unexpectedly;
509
+ - the selected target is hidden;
510
+ - a target cannot be observed reliably;
511
+ - the selection mechanism is unsupported.
512
+
513
+ Do not silently choose an arbitrary match.
514
+
515
+ ### Identity stability
516
+
517
+ Observation artifacts must preserve:
518
+
519
+ ```text
520
+ stable target id
521
+ locator definition
522
+ selection method
523
+ actual selection status
524
+ ```
525
+
526
+ so a future comparison can distinguish:
527
+
528
+ ```text
529
+ target disappeared
530
+ ```
531
+
532
+ from:
533
+
534
+ ```text
535
+ target configuration changed
536
+ ```
537
+
538
+ ### Acceptance criteria
539
+
540
+ Milestone 2 is complete when:
541
+
542
+ - multiple targets can be captured in one observation;
543
+ - stable observer target IDs survive repeated observations;
544
+ - semantic selection works against deterministic fixtures;
545
+ - stable IDs/data attributes work where configured;
546
+ - CSS fallback remains available;
547
+ - ambiguous selection produces an explicit diagnostic;
548
+ - missing targets are represented explicitly;
549
+ - hidden/unavailable targets are not misrepresented as valid visible targets;
550
+ - semantic evidence is included where supported;
551
+ - observation artifacts remain bounded;
552
+ - deterministic fixtures yield deterministic semantic observations;
553
+ - Milestone 1 workflows remain valid.
554
+
555
+ ### Explicit exclusions
556
+
557
+ Do not add yet:
558
+
559
+ - automatic source-file lookup;
560
+ - automatic target discovery through static analysis;
561
+ - LLM-driven target discovery;
562
+ - source ownership inference;
563
+ - visual annotation;
564
+ - full accessibility auditing.
565
+
566
+ ## Milestone 3 — Runtime Scrolling, Overflow, and Visibility Behavior
567
+
568
+ ### Objective
569
+
570
+ Make runtime layout behavior observable instead of inferring scrolling, overflow, or viewport behavior solely from source code.
571
+
572
+ ### Required capability
573
+
574
+ Capture scroll-related state for:
575
+
576
+ - document/root;
577
+ - body where relevant;
578
+ - explicitly observed targets.
579
+
580
+ Evidence should include, where applicable:
581
+
582
+ ```text
583
+ scrollTop
584
+ scrollLeft
585
+ scrollWidth
586
+ scrollHeight
587
+ clientWidth
588
+ clientHeight
589
+ computed overflow-x
590
+ computed overflow-y
591
+ position
592
+ bounding rectangle
593
+ visibility relative to viewport
594
+ ```
595
+
596
+ ### Controlled scroll scenarios
597
+
598
+ Support a bounded observation scenario that can:
599
+
600
+ 1. capture initial state;
601
+ 2. request a controlled page scroll;
602
+ 3. capture resulting state;
603
+ 4. compare document scroll position;
604
+ 5. compare observed target scroll positions;
605
+ 6. identify measured values that changed;
606
+ 7. identify targets entering or leaving the viewport where applicable.
607
+
608
+ This capability is bounded runtime-behavior evidence for defined observation
609
+ scenarios. It is not a generic browser interaction recorder, automation
610
+ framework, or replacement for Playwright.
611
+
612
+ ### Required runtime questions
613
+
614
+ The system must be able to provide browser evidence for questions such as:
615
+
616
+ - Did `window.scrollY` change?
617
+ - Did an observed container's `scrollTop` change?
618
+ - Which observed container appears to own requested page scrolling?
619
+ - Is there horizontal document overflow?
620
+ - Is an element initially below the viewport?
621
+ - Does an element enter the viewport after scrolling?
622
+ - Is a footer region positioned after the main workspace?
623
+ - Did scroll ownership evidence change after a frontend modification?
624
+
625
+ ### Claim-strength rule
626
+
627
+ The observer must preserve a strict distinction between:
628
+
629
+ ```text
630
+ browser-observed fact
631
+ ```
632
+
633
+ and:
634
+
635
+ ```text
636
+ derived interpretation
637
+ ```
638
+
639
+ Example direct evidence:
640
+
641
+ ```text
642
+ window.scrollY changed from 0 to 500
643
+ main.scrollTop remained 0
644
+ ```
645
+
646
+ Possible derived statement:
647
+
648
+ ```text
649
+ document appears to own primary vertical scrolling
650
+ ```
651
+
652
+ The interpretation must remain traceable to the measurements supporting it.
653
+
654
+ ### Behavior relationships
655
+
656
+ This milestone should establish the foundation for runtime behavior relationships such as:
657
+
658
+ ```text
659
+ target moves with document scroll
660
+ target remains fixed
661
+ container owns nested scrolling
662
+ element begins below viewport
663
+ element enters viewport after page scroll
664
+ ```
665
+
666
+ These relationships are runtime evidence and must not be inferred from stylesheet declarations alone.
667
+
668
+ ### Acceptance criteria
669
+
670
+ Milestone 3 is complete when deterministic fixtures prove:
671
+
672
+ - document scrolling;
673
+ - nested element scrolling;
674
+ - horizontal document overflow detection;
675
+ - nested overflow evidence;
676
+ - below-viewport detection;
677
+ - movement into viewport after scrolling;
678
+ - explicit reporting of changed scroll measurements;
679
+ - observed-versus-derived claim separation;
680
+ - stable artifact representation of runtime behavior;
681
+ - earlier observation artifacts remain compatible or are migrated deliberately.
682
+
683
+ ## Milestone 4 — Layout Relationships, Dependency Evidence, and Before/After Comparison
684
+
685
+ ### Objective
686
+
687
+ Compare two comparable observations and explain meaningful rendered-layout differences while establishing an explicit model for spatial relationships and potential layout dependencies.
688
+
689
+ ### Comparison eligibility
690
+
691
+ Before comparing two observations, determine whether they are sufficiently comparable.
692
+
693
+ Relevant evidence may include:
694
+
695
+ ```text
696
+ target identity
697
+ target configuration
698
+ route/page identity
699
+ viewport
700
+ browser/runtime identity
701
+ observation scenario
702
+ relevant state/theme
703
+ ```
704
+
705
+ The comparison engine must not silently compare fundamentally incompatible observations as if they represented the same frontend state.
706
+
707
+ ### Required difference categories
708
+
709
+ The comparison engine should support, as evidence permits:
710
+
711
+ - appeared target;
712
+ - disappeared target;
713
+ - moved target;
714
+ - resized target;
715
+ - visibility change;
716
+ - clipping/containment change;
717
+ - horizontal-overflow change;
718
+ - vertical-overflow change;
719
+ - page-size change;
720
+ - scroll-owner evidence change;
721
+ - relative-position change;
722
+ - relationship change.
723
+
724
+ ### Structured before/after evidence
725
+
726
+ For each difference report:
727
+
728
+ ```text
729
+ target
730
+ property or relationship
731
+ before value
732
+ after value
733
+ difference
734
+ classification
735
+ supporting observation identities
736
+ ```
737
+
738
+ Example:
739
+
740
+ ```text
741
+ Target: primary-navigation
742
+ Property: width
743
+ Before: 176px
744
+ After: 97px
745
+ Difference: -79px
746
+ ```
747
+
748
+ ### Layout relationships
749
+
750
+ Support runtime relationships such as:
751
+
752
+ ```text
753
+ A is left of B
754
+ A is above B
755
+ A contains B
756
+ A does not overlap B
757
+ A is wider than B
758
+ A follows B vertically
759
+ A fits inside B
760
+ document width does not exceed viewport width
761
+ footer follows main content
762
+ workspace lies between navigation and right rail
763
+ ```
764
+
765
+ These relationships should be computed from browser-observed geometry where possible.
766
+
767
+ ### Layout relationship graph
768
+
769
+ The system should support a structured representation of meaningful region relationships.
770
+
771
+ Conceptual example:
772
+
773
+ ```text
774
+ Viewport
775
+
776
+ AppShell
777
+ ├── LeftAd
778
+ ├── Navigation
779
+ ├── Workspace
780
+ └── RightAd
781
+ ```
782
+
783
+ This representation should support later reasoning about which relationships changed.
784
+
785
+ Do not require every target project to have the same graph structure.
786
+
787
+ ### Dependency evidence
788
+
789
+ The system should leave room to represent expected layout dependencies such as:
790
+
791
+ ```text
792
+ Navigation width decreases
793
+
794
+ Workspace width increases
795
+ Workspace x-position changes
796
+ ```
797
+
798
+ However, the observer must not infer causation merely because two values changed together.
799
+
800
+ A dependency claim must eventually come from:
801
+
802
+ - explicit user intent;
803
+ - a change contract;
804
+ - an approved relationship specification;
805
+ - another supported evidence source.
806
+
807
+ Milestone 4 establishes the representation and comparison foundation.
808
+
809
+ Milestone 5 establishes executable change-scope semantics.
810
+
811
+ ### Relationship comparison
812
+
813
+ Support comparisons such as:
814
+
815
+ ```text
816
+ workspace width changed relative to navigation
817
+ advertising rail width changed
818
+ footer moved relative to workspace
819
+ navigation overlap appeared
820
+ page horizontal overflow appeared
821
+ scroll-owner relationship changed
822
+ ```
823
+
824
+ ### Screenshot association
825
+
826
+ Comparison must retain references to corresponding before/after screenshots and underlying observations.
827
+
828
+ ### Acceptance criteria
829
+
830
+ Milestone 4 is complete when:
831
+
832
+ - comparable observations can be compared deterministically;
833
+ - incomparable observations are rejected or clearly marked;
834
+ - deterministic fixture changes produce deterministic structured differences;
835
+ - unchanged fixtures do not produce false meaningful regressions;
836
+ - moved and resized targets are detected;
837
+ - relationship changes are detected;
838
+ - overlap and overflow changes are represented;
839
+ - before/after screenshot references remain available;
840
+ - layout relationship evidence is traceable to underlying geometry;
841
+ - causation is not invented from correlation.
842
+
843
+ ### Explicit exclusions
844
+
845
+ Do not yet decide automatically:
846
+
847
+ ```text
848
+ looks better
849
+ looks worse
850
+ modern
851
+ ugly
852
+ ```
853
+
854
+ The tool reports observable change.
855
+
856
+ Do not yet treat every difference as a failure.
857
+
858
+ Milestone 5 defines which changes are allowed, required, or protected.
859
+
860
+ ## Milestone 5 — Executable Frontend Contracts and Explicit Change Scope
861
+
862
+ ### Objective
863
+
864
+ Turn approved frontend behavior and user-requested change intent into persistent, executable runtime contracts.
865
+
866
+ This milestone establishes the mechanism that prevents:
867
+
868
+ ```text
869
+ fix one frontend problem
870
+ → accidentally break another
871
+ ```
872
+
873
+ ### Two contract classes
874
+
875
+ The system should distinguish two related forms of contract:
876
+
877
+ ```text
878
+ persistent baseline contract
879
+ ```
880
+
881
+ and:
882
+
883
+ ```text
884
+ per-change contract
885
+ ```
886
+
887
+ ### Persistent baseline contracts
888
+
889
+ Persistent baseline contracts describe previously approved frontend behavior that should remain valid across future changes unless explicitly superseded.
890
+
891
+ Examples:
892
+
893
+ ```text
894
+ navigation contents are not clipped
895
+ navigation does not overlap workspace
896
+ workspace does not overlap advertising rails
897
+ document does not horizontally overflow
898
+ document owns primary vertical scrolling
899
+ footer appears after main content
900
+ mobile workspace remains usable
901
+ ```
902
+
903
+ ### Per-change contract
904
+
905
+ A per-change contract describes the allowed scope of one requested frontend modification.
906
+
907
+ It should support four explicit categories.
908
+
909
+ #### Requested changes
910
+
911
+ Properties or relationships explicitly intended to change.
912
+
913
+ Example:
914
+
915
+ ```text
916
+ primary-navigation.width
917
+ → decrease significantly
918
+ ```
919
+
920
+ #### Expected dependent changes
921
+
922
+ Properties expected to change as a legitimate consequence.
923
+
924
+ Example:
925
+
926
+ ```text
927
+ tool-workspace.width
928
+ → increase using released horizontal space
929
+
930
+ tool-workspace.x
931
+ → may move left
932
+ ```
933
+
934
+ #### Protected properties or regions
935
+
936
+ Properties expected to remain unchanged.
937
+
938
+ Example:
939
+
940
+ ```text
941
+ left-ad-rail.width
942
+ right-ad-rail.width
943
+ header.height
944
+ ```
945
+
946
+ #### Preserved invariants and behaviors
947
+
948
+ Previously correct relationships or behaviors that must remain valid.
949
+
950
+ Example:
951
+
952
+ ```text
953
+ navigation remains unclipped
954
+ navigation does not overlap workspace
955
+ workspace does not overlap ads
956
+ no horizontal document overflow
957
+ scroll ownership remains unchanged
958
+ ```
959
+
960
+ #### Unexpected changes
961
+
962
+ Observed properties or relationships that changed outside the requested,
963
+ expected-dependent, protected, or explicitly preserved scope must remain
964
+ visible and classified as unexpected rather than being silently ignored.
965
+
966
+ Together these five categories define the allowed frontend change scope.
967
+
968
+ ### Relationship-first design
969
+
970
+ Prefer relational constraints when they more accurately represent the user's intent.
971
+
972
+ Example:
973
+
974
+ Prefer:
975
+
976
+ ```text
977
+ workspace width increases when navigation width decreases
978
+ ```
979
+
980
+ over:
981
+
982
+ ```text
983
+ workspace width must equal 1039px
984
+ ```
985
+
986
+ when the actual requirement is redistribution of available space rather than one fixed measurement.
987
+
988
+ Fixed-pixel constraints remain valid when explicitly required.
989
+
990
+ ### Required contract primitives
991
+
992
+ The first contract model should support high-value conditions such as:
993
+
994
+ ```text
995
+ target is visible
996
+ target is not clipped
997
+ target width is within a bound
998
+ target A does not overlap target B
999
+ target A is wider than target B
1000
+ target A follows target B vertically
1001
+ target is fully contained inside another target
1002
+ document width does not exceed viewport width
1003
+ window owns requested page scrolling
1004
+ specified element does not own primary scrolling
1005
+ element begins below initial viewport
1006
+ relationship remains unchanged
1007
+ property remains unchanged within an allowed tolerance
1008
+ property increases/decreases as requested
1009
+ ```
1010
+
1011
+ Do not create a general-purpose programming language.
1012
+
1013
+ ### Change evaluation
1014
+
1015
+ After implementation, comparison results should be evaluated against the change contract.
1016
+
1017
+ Conceptual result:
1018
+
1019
+ ```text
1020
+ REQUESTED CHANGE
1021
+ Navigation.width
1022
+ 176 → 97
1023
+ PASS
1024
+
1025
+ EXPECTED DEPENDENT CHANGE
1026
+ Workspace.width
1027
+ 960 → 1039
1028
+ PASS
1029
+
1030
+ PROTECTED PROPERTY
1031
+ RightAd.width
1032
+ 112 → 154
1033
+ FAIL
1034
+
1035
+ PRESERVED INVARIANT
1036
+ Navigation content became clipped
1037
+ FAIL
1038
+
1039
+ OVERALL
1040
+ FAIL
1041
+ ```
1042
+
1043
+ A requested local success must not hide a protected-region regression.
1044
+
1045
+ ### Existing contracts remain active
1046
+
1047
+ A new requested change does not erase previously approved frontend contracts.
1048
+
1049
+ Unless the user explicitly supersedes a prior invariant:
1050
+
1051
+ ```text
1052
+ existing approved contracts
1053
+ +
1054
+ new per-change contract
1055
+ ```
1056
+
1057
+ must both be evaluated.
1058
+
1059
+ ### Contract result requirements
1060
+
1061
+ Every contract result must explain:
1062
+
1063
+ ```text
1064
+ contract identity
1065
+ contract category
1066
+ PASS or FAIL
1067
+ observed values
1068
+ expected condition
1069
+ observation identity
1070
+ relevant targets
1071
+ supporting evidence
1072
+ ```
1073
+
1074
+ Do not return only a score.
1075
+
1076
+ ### Fixture coverage
1077
+
1078
+ Controlled fixtures should demonstrate at least:
1079
+
1080
+ - passing layout;
1081
+ - clipped navigation content;
1082
+ - overlapping regions;
1083
+ - horizontal document overflow;
1084
+ - document scrolling;
1085
+ - nested scrolling;
1086
+ - footer after workspace;
1087
+ - relative-width relationship;
1088
+ - requested resize;
1089
+ - expected dependent resize;
1090
+ - unexpected protected-region resize;
1091
+ - preserved-invariant failure.
1092
+
1093
+ ### Acceptance criteria
1094
+
1095
+ Milestone 5 is complete when:
1096
+
1097
+ - baseline contracts can be persisted;
1098
+ - per-change contracts can be represented;
1099
+ - requested/dependent/protected/preserved categories are explicit;
1100
+ - contracts execute against fresh observations;
1101
+ - previously approved contracts can be rerun after frontend changes;
1102
+ - unexpected protected changes are distinguishable from legitimate dependent changes;
1103
+ - contract failures return actionable evidence;
1104
+ - relationship-oriented contracts work against deterministic fixtures;
1105
+ - failing required contracts produce nonzero validation status where configured;
1106
+ - contract evaluation does not mutate the target application.
1107
+
1108
+ ## Milestone 6 — Bounded Agent Context and Native my-dev-kit Ecosystem Integration
1109
+
1110
+ ### Objective
1111
+
1112
+ Make the runtime observer useful to an actual coding-agent workflow by combining bounded observer evidence with relevant bounded static/source evidence without merging producer responsibilities.
1113
+
1114
+ The core question is:
1115
+
1116
+ ```text
1117
+ What is the smallest trustworthy runtime + static context
1118
+ the coding agent needs to understand and safely modify this frontend?
1119
+ ```
1120
+
1121
+ This milestone moves the minimum required ecosystem integration onto the critical path before viewer and annotation work.
1122
+
1123
+ ### Runtime context requirements
1124
+
1125
+ Produce bounded runtime projections containing only task-relevant information such as:
1126
+
1127
+ - page identity;
1128
+ - viewport;
1129
+ - stable target identities;
1130
+ - important geometry;
1131
+ - runtime behavior;
1132
+ - layout and behavior relationships;
1133
+ - before/after differences;
1134
+ - contract results;
1135
+ - requested/dependent/protected/preserved scope;
1136
+ - important diagnostics;
1137
+ - screenshot and artifact references;
1138
+ - provenance;
1139
+ - truncation and omission metadata.
1140
+
1141
+ The runtime projection must remain traceable to authoritative observation, comparison, relationship, and contract evidence.
1142
+
1143
+ ### Boundedness and adequacy
1144
+
1145
+ Do not dump by default:
1146
+
1147
+ - the full raw Document Object Model;
1148
+ - every computed style property;
1149
+ - complete accessibility trees;
1150
+ - unrelated observations or targets;
1151
+ - repeated unchanged measurements;
1152
+ - unbounded diagnostics;
1153
+ - embedded screenshots or other heavy assets when references are sufficient.
1154
+
1155
+ The context builder must report omissions, truncation, and whether evidence required for the agent task is adequate. Some evidence existing is not equivalent to adequate task context.
1156
+
1157
+ ### Static/runtime correlation
1158
+
1159
+ Support explicit correlation between observer runtime identities and bounded static evidence where reliable.
1160
+
1161
+ Desired chain:
1162
+
1163
+ ```text
1164
+ rendered region
1165
+ → stable observer target
1166
+ → correlation evidence
1167
+ → my-dev-kit static identity / bounded evidence
1168
+ → relevant source retrieval
1169
+ ```
1170
+
1171
+ Runtime target identity must never silently become source ownership. Correlation confidence, ambiguity, competing candidates, and missing evidence must remain explicit.
1172
+
1173
+ ### my-dev-kit relationship
1174
+
1175
+ Determine whether current `my-dev-kit` identities and retrieval contracts already support the required correlation.
1176
+
1177
+ Modify `my-dev-kit` only if evidence proves that a generic static-side capability is actually missing. Do not add browser concepts, runtime observation semantics, or Playwright dependencies to `my-dev-kit`.
1178
+
1179
+ `my-dev-kit` remains the owner of static repository/source evidence, indexing, architecture, dependency evidence, probable ownership evidence, and bounded source retrieval.
1180
+
1181
+ ### Observer relationship
1182
+
1183
+ `my-frontend-observer` owns:
1184
+
1185
+ - browser/runtime evidence;
1186
+ - bounded runtime projection;
1187
+ - stable runtime identity;
1188
+ - correlation evidence it can support;
1189
+ - the correlation/export boundary;
1190
+ - references back to authoritative observer artifacts.
1191
+
1192
+ It does not become a static analyzer and must remain independently executable outside the ecosystem.
1193
+
1194
+ ### Orchestrator relationship
1195
+
1196
+ Add bounded observer-evidence consumption to `my-dev-kit-orchestrator` so a workflow can coordinate or reference:
1197
+
1198
+ ```text
1199
+ bounded runtime evidence
1200
+ +
1201
+ bounded static evidence
1202
+ ```
1203
+
1204
+ for the coding agent.
1205
+
1206
+ The orchestrator must not:
1207
+
1208
+ - run the browser as its native responsibility;
1209
+ - redefine observer evidence or artifact semantics;
1210
+ - copy enormous raw browser artifacts into prompts by default;
1211
+ - duplicate `my-dev-kit` retrieval;
1212
+ - become the canonical owner of runtime/static correlation evidence.
1213
+
1214
+ ### Lab relationship
1215
+
1216
+ Add only the `my-dev-kit-lab` exact readers, pinned fixtures, compatibility checks, and evidence-quality evaluation needed to prove the observer/orchestrator/static-evidence contract.
1217
+
1218
+ The lab remains downstream evaluation. It must not reimplement capture, retrieval, correlation, orchestration, or become part of every normal frontend edit.
1219
+
1220
+ ### Cross-repository dependency direction
1221
+
1222
+ When Milestone 6 implementation begins, preserve this high-level dependency direction:
1223
+
1224
+ ```text
1225
+ freeze bounded-agent-context and integration contract
1226
+ → determine whether my-dev-kit requires a static-side change
1227
+ → implement observer bounded projection/correlation/export
1228
+ → implement orchestrator bounded runtime-evidence consumption
1229
+ → add lab exact readers/fixtures/evaluation needed for compatibility
1230
+ → run individual repository readiness
1231
+ → run coordinated exact-version validation
1232
+ ```
1233
+
1234
+ This is dependency direction, not an implementation batch plan. Concrete steps and batches must be designed only when this milestone begins and the actual repository/package states can be inspected.
1235
+
1236
+ ### Compatibility requirements
1237
+
1238
+ Cross-repository validation must pin and record:
1239
+
1240
+ - package versions or candidate identities;
1241
+ - observer artifact/schema versions;
1242
+ - bounded-context contract version;
1243
+ - static identity/evidence contract version;
1244
+ - orchestrator consumer compatibility;
1245
+ - lab reader/fixture compatibility.
1246
+
1247
+ Do not validate downstream consumers accidentally against stale published upstream packages when coordinated candidates are intended.
1248
+
1249
+ Do not create a shared schema package merely for symmetry; require demonstrated cross-repository ownership and release need.
1250
+
1251
+ ### Acceptance criteria
1252
+
1253
+ Milestone 6 is complete when:
1254
+
1255
+ - a coding agent or LLM can receive bounded, traceable runtime problem evidence;
1256
+ - requested/dependent/protected/preserved scope and contract results are included where relevant;
1257
+ - relevant bounded static/source evidence can be retrieved and correlated where reliable;
1258
+ - ambiguous runtime/static correlation remains explicit;
1259
+ - task adequacy, omission, and truncation are reported;
1260
+ - the observer remains independently usable and does not duplicate static analysis;
1261
+ - the orchestrator consumes bounded references/projections without becoming a browser runner;
1262
+ - the lab reads exact supported contracts and validates required compatibility;
1263
+ - every affected repository passes individual readiness;
1264
+ - coordinated exact-version validation passes;
1265
+ - no viewer or visual-annotation dependency is required.
1266
+
1267
+ ## Milestone 7 — End-to-End Coding-Agent Frontend Change Review
1268
+
1269
+ ### Objective
1270
+
1271
+ Prove that the system solves the core practical problem through a text/config-driven workflow before investing in graphical interaction.
1272
+
1273
+ This is the first milestone where the complete coding-agent correction loop is operational.
1274
+
1275
+ ### Required workflow
1276
+
1277
+ Demonstrate:
1278
+
1279
+ ```text
1280
+ capture approved baseline
1281
+ → preserve baseline contracts
1282
+ → human expresses requested change in text/config
1283
+ → construct requested/dependent/protected/preserved scope
1284
+ → generate bounded runtime evidence
1285
+ → obtain relevant bounded static evidence
1286
+ → assemble coding-agent context
1287
+ → external coding agent modifies target source
1288
+ → observer captures new state
1289
+ → compare before/after
1290
+ → evaluate requested changes
1291
+ → evaluate expected dependent changes
1292
+ → verify protected properties
1293
+ → rerun baseline contracts
1294
+ → PASS or actionable regression failure
1295
+ ```
1296
+
1297
+ Unexpected changes must remain visible and classified rather than disappearing outside the requested scope.
1298
+
1299
+ ### No viewer dependency
1300
+
1301
+ The workflow must work without requiring:
1302
+
1303
+ - an interactive graphical viewer;
1304
+ - visual drawing;
1305
+ - visual annotation authoring.
1306
+
1307
+ A human may express the requested change, expected dependents, protected regions/properties, and preserved invariants through text or structured configuration.
1308
+
1309
+ ### Required proof cases
1310
+
1311
+ Controlled targets must demonstrate both:
1312
+
1313
+ 1. a successful requested change whose dependent changes and preserved contracts pass; and
1314
+ 2. a requested change that succeeds locally while a protected property or preserved invariant fails.
1315
+
1316
+ The second case must produce an overall failure with actionable evidence. This proves the system prevents:
1317
+
1318
+ ```text
1319
+ fix one frontend problem
1320
+ → silently break another
1321
+ ```
1322
+
1323
+ ### Coding-agent boundary
1324
+
1325
+ The observer does not edit source.
1326
+
1327
+ A coding agent or another external implementation tool performs the edit against the target project. The observer and ecosystem provide bounded evidence before and after that edit. Source changes and evidence-producer responsibilities remain independently traceable.
1328
+
1329
+ ### Baseline and contract behavior
1330
+
1331
+ Existing approved baseline contracts remain active unless explicitly superseded.
1332
+
1333
+ ```text
1334
+ existing approved baseline contracts
1335
+ +
1336
+ new per-change contract
1337
+ ```
1338
+
1339
+ must both pass. Successful results may be proposed as a new baseline, but baseline approval and history must remain explicit.
1340
+
1341
+ ### Acceptance criteria
1342
+
1343
+ Milestone 7 is complete when:
1344
+
1345
+ - the end-to-end text/config-driven coding-agent workflow runs against a controlled external target;
1346
+ - bounded runtime plus relevant static evidence reaches the agent without full-repository or unbounded browser dumps;
1347
+ - the agent changes source outside the observer;
1348
+ - the observer recaptures and compares the result;
1349
+ - requested and expected dependent changes are evaluated;
1350
+ - protected properties and preserved invariants are evaluated;
1351
+ - existing baseline contracts are rerun;
1352
+ - successful and failing cases produce traceable actionable results;
1353
+ - a locally successful requested change with a protected/invariant regression fails overall;
1354
+ - viewer and annotation systems are not required.
1355
+
1356
+ ## Milestone 8 — Interactive Local Observation Viewer
1357
+
1358
+ ### Objective
1359
+
1360
+ Add a human graphical inspection surface over the already working observation, comparison, contract, correlation, and coding-agent-context system.
1361
+
1362
+ The viewer enhances a proven core workflow; it is not a prerequisite for Milestones 6 or 7.
1363
+
1364
+ ### Required interface capabilities
1365
+
1366
+ The viewer should show, as applicable:
1367
+
1368
+ - screenshots;
1369
+ - stable observed targets;
1370
+ - geometry and semantic information;
1371
+ - scrolling, overflow, and visibility evidence;
1372
+ - layout and behavior relationships;
1373
+ - before/after changes;
1374
+ - diagnostics and evidence-state distinctions;
1375
+ - requested/dependent/protected/preserved/unexpected classifications;
1376
+ - baseline and per-change contract results;
1377
+ - source-correlation evidence and uncertainty where available;
1378
+ - bounded agent-context references.
1379
+
1380
+ ### Element/screenshot association
1381
+
1382
+ Where practical:
1383
+
1384
+ ```text
1385
+ structured target selection
1386
+ → corresponding screenshot region
1387
+ ```
1388
+
1389
+ and:
1390
+
1391
+ ```text
1392
+ screenshot region
1393
+ → associated known target
1394
+ ```
1395
+
1396
+ should be supported without inventing identity when evidence is insufficient.
1397
+
1398
+ ### Architecture constraint
1399
+
1400
+ The viewer consumes existing canonical engines, contracts, and artifacts.
1401
+
1402
+ It must not create:
1403
+
1404
+ - a second observer;
1405
+ - a second relationship engine;
1406
+ - a second comparison engine;
1407
+ - a second contract/change-scope engine;
1408
+ - a second static/runtime correlation engine;
1409
+ - a second bounded-context builder.
1410
+
1411
+ CLI and programmatic paths remain first-class. Viewer state must not mutate target applications.
1412
+
1413
+ ### Acceptance criteria
1414
+
1415
+ Milestone 8 is complete when:
1416
+
1417
+ - a developer can inspect observations and screenshots without opening raw files;
1418
+ - geometry, runtime behavior, relationships, and comparisons are understandable;
1419
+ - contract/change-scope results identify relevant regions;
1420
+ - source-correlation evidence displays uncertainty rather than false ownership;
1421
+ - the evidence shown is the same canonical evidence used by the coding-agent workflow;
1422
+ - command-line/programmatic workflows remain independently functional.
1423
+
1424
+ ## Milestone 9 — Human Visual Annotation and Design-Intent Capture
1425
+
1426
+ ### Objective
1427
+
1428
+ Add visual human intent to the already working Milestone 7 coding-agent workflow through the Milestone 8 viewer.
1429
+
1430
+ ### Required annotation capabilities
1431
+
1432
+ Support a deliberately bounded first annotation set selected during milestone planning, such as:
1433
+
1434
+ - point/select;
1435
+ - rectangle or area;
1436
+ - arrow;
1437
+ - line or boundary;
1438
+ - textual note;
1439
+ - preserve;
1440
+ - resize;
1441
+ - move;
1442
+ - remove;
1443
+ - inspect.
1444
+
1445
+ ### Structured annotation artifact
1446
+
1447
+ Annotations must preserve:
1448
+
1449
+ - observation identity;
1450
+ - screenshot identity;
1451
+ - annotation geometry;
1452
+ - annotation type;
1453
+ - textual instruction where supplied;
1454
+ - associated stable runtime target or relationship where reliable;
1455
+ - provenance and interpretation/confirmation state.
1456
+
1457
+ Do not store annotation intent only as flattened pixels. Preserve structured data in addition to any annotated screenshot.
1458
+
1459
+ ### Canonical intent and change-scope model
1460
+
1461
+ Annotations must feed the existing canonical change-scope and contract model:
1462
+
1463
+ ```text
1464
+ visual annotation
1465
+ → target/relationship binding
1466
+ → candidate requested/dependent/protected/preserved intent
1467
+ → explicit confirmation or interpretation where necessary
1468
+ → canonical per-change contract
1469
+ ```
1470
+
1471
+ Do not create annotation-only change semantics or different PASS/FAIL rules. Ambiguous drawings must not silently become strong requirements.
1472
+
1473
+ ### LLM and coding-agent consumption
1474
+
1475
+ The existing bounded agent-context system may include:
1476
+
1477
+ - original and annotated screenshot references;
1478
+ - structured observation evidence;
1479
+ - structured annotations;
1480
+ - current relationships;
1481
+ - baseline contracts;
1482
+ - confirmed per-change scope;
1483
+ - relevant bounded static evidence.
1484
+
1485
+ Annotation adds an input mode to the proven workflow; it does not replace text/config requests or bypass contracts.
1486
+
1487
+ ### Acceptance criteria
1488
+
1489
+ Milestone 9 is complete when:
1490
+
1491
+ - a user can annotate an existing observation in the viewer;
1492
+ - annotations survive save/reload;
1493
+ - structured annotations remain associated with their observation;
1494
+ - target/relationship associations remain available where reliable;
1495
+ - preserve/resize/move/remove/inspect intent can be represented where supported;
1496
+ - ambiguous intent requires explicit interpretation or confirmation;
1497
+ - annotations can drive the existing coding-agent change-review workflow through the canonical contract model;
1498
+ - the original raw observation remains unchanged.
1499
+
1500
+ ## Milestone 10 — Full Visual Human–LLM Frontend Change Workflow
1501
+
1502
+ ### Objective
1503
+
1504
+ Complete the visual communication version of the already operational coding-agent workflow.
1505
+
1506
+ This milestone combines the proven Milestone 7 correction loop with the Milestone 8 viewer and Milestone 9 structured annotation.
1507
+
1508
+ ### Intended visual workflow
1509
+
1510
+ ```text
1511
+ human views actual captured frontend
1512
+ → points/draws/annotates requested design change
1513
+ → observer binds intent to stable runtime regions
1514
+ → change scope is constructed and confirmed
1515
+ → bounded runtime evidence is produced
1516
+ → bounded static evidence is obtained
1517
+ → coding-agent context is assembled
1518
+ → external coding agent modifies source
1519
+ → observer rerenders
1520
+ → requested/dependent/protected/preserved behavior is evaluated
1521
+ → viewer shows PASS or actionable failure evidence
1522
+ → human approves or requests correction
1523
+ → successful state may become the new approved baseline
1524
+ ```
1525
+
1526
+ ### Critical invariant
1527
+
1528
+ A visual request does not erase existing baseline contracts.
1529
+
1530
+ Unless explicitly superseded:
1531
+
1532
+ ```text
1533
+ existing approved contracts
1534
+ +
1535
+ new visual/requested change contract
1536
+ ```
1537
+
1538
+ must both pass.
1539
+
1540
+ The system must preserve unexpected-change evidence and cannot treat visual intent as authorization for unrelated rendered changes.
1541
+
1542
+ ### Evidence and ownership model
1543
+
1544
+ The full workflow may combine:
1545
+
1546
+ ```text
1547
+ human visual intent
1548
+
1549
+ runtime evidence
1550
+ → screenshot
1551
+ → target identity
1552
+ → geometry and behavior
1553
+ → relationships
1554
+ → comparison
1555
+ → contracts
1556
+
1557
+ static evidence
1558
+ → probable ownership
1559
+ → architecture and dependencies
1560
+ → bounded source retrieval
1561
+
1562
+ workflow evidence
1563
+ → request and confirmed scope
1564
+ → coding-agent context
1565
+ → implementation identity
1566
+ → verification
1567
+ → approval or correction
1568
+ ```
1569
+
1570
+ These domains remain separate and traceable. The observer remains non-mutating, the external coding agent edits source, the orchestrator coordinates bounded evidence, and the lab remains optional for normal edits outside compatibility/evaluation workflows.
1571
+
1572
+ ### Required demonstration
1573
+
1574
+ Demonstrate:
1575
+
1576
+ - a successful visual change;
1577
+ - a requested visual change that introduces a protected-property or preserved-invariant regression;
1578
+ - actionable failure evidence shown through the viewer;
1579
+ - a correction cycle;
1580
+ - human approval and new-baseline handling;
1581
+ - compatible integrated ecosystem evidence using exact supported versions.
1582
+
1583
+ ### Acceptance criteria
1584
+
1585
+ Milestone 10 is complete when:
1586
+
1587
+ - a human can inspect the actual captured frontend and express structured visual intent;
1588
+ - annotation binds to stable runtime evidence where reliable;
1589
+ - requested/dependent/protected/preserved scope is confirmed;
1590
+ - bounded runtime and static evidence form traceable coding-agent context;
1591
+ - an external coding agent changes the target;
1592
+ - the observer rerenders, compares, and evaluates all active contracts;
1593
+ - a protected/invariant regression fails despite local requested-change success;
1594
+ - the viewer presents actionable evidence;
1595
+ - the human can request correction and approve a successful new baseline;
1596
+ - all affected ecosystem contracts remain compatible;
1597
+ - no evidence producer's responsibility is merged into another project.
1598
+
1599
+ ## Cross-Milestone Architecture Rules
1600
+
1601
+ Every milestone must preserve these boundaries.
1602
+
1603
+ ### Observation engine ownership
1604
+
1605
+ One reusable observation engine owns browser capture.
1606
+
1607
+ Do not create separate browser-observation implementations for:
1608
+
1609
+ - command-line interface;
1610
+ - graphical viewer;
1611
+ - regression tests;
1612
+ - annotation viewer;
1613
+ - orchestrator adapter.
1614
+
1615
+ ### Browser adapter ownership
1616
+
1617
+ Browser-specific automation must remain behind a clear browser boundary.
1618
+
1619
+ Initial Chromium support must not require the entire domain model to depend directly on Playwright-specific objects.
1620
+
1621
+ Avoid speculative multi-browser abstraction before another browser is actually planned.
1622
+
1623
+ ### Runtime target identity ownership
1624
+
1625
+ The observer owns stable runtime target identities.
1626
+
1627
+ Runtime target IDs must remain distinct from:
1628
+
1629
+ - source-file paths;
1630
+ - static symbol IDs;
1631
+ - `my-dev-kit` graph-node IDs;
1632
+ - orchestrator stage IDs;
1633
+ - lab fixture IDs.
1634
+
1635
+ Future correlation may connect these identities explicitly.
1636
+
1637
+ Do not silently collapse them.
1638
+
1639
+ ### Artifact ownership
1640
+
1641
+ Observation artifacts must have one canonical schema/versioning owner.
1642
+
1643
+ Do not create incompatible output structures for:
1644
+
1645
+ - command-line use;
1646
+ - graphical viewer;
1647
+ - comparison;
1648
+ - contracts;
1649
+ - LLM packaging;
1650
+ - ecosystem adapters.
1651
+
1652
+ Derived artifacts may have their own contracts, but they must refer back to authoritative observation evidence.
1653
+
1654
+ ### Evidence hierarchy
1655
+
1656
+ Preserve the distinction between:
1657
+
1658
+ ```text
1659
+ direct observation
1660
+ normalized evidence
1661
+ derived relationship
1662
+ comparison result
1663
+ contract interpretation
1664
+ bounded agent context or summary
1665
+ human visual interpretation
1666
+ ```
1667
+
1668
+ Do not flatten these into one unexplained result.
1669
+
1670
+ ### Relationship ownership
1671
+
1672
+ Layout and behavior relationships must have one canonical interpretation layer.
1673
+
1674
+ Do not duplicate relationship logic in:
1675
+
1676
+ - viewer;
1677
+ - command-line interface;
1678
+ - comparison engine;
1679
+ - orchestrator adapter.
1680
+
1681
+ ### Comparison ownership
1682
+
1683
+ Before/after comparison must have one canonical implementation.
1684
+
1685
+ Do not duplicate comparison logic in the viewer and command-line interface.
1686
+
1687
+ ### Contract ownership
1688
+
1689
+ Frontend baseline contracts and per-change contract evaluation must have one canonical engine.
1690
+
1691
+ Do not implement different PASS/FAIL semantics in:
1692
+
1693
+ - command-line validation;
1694
+ - viewer;
1695
+ - automated tests;
1696
+ - orchestrator integration.
1697
+
1698
+ ### Change-scope ownership
1699
+
1700
+ Requested, expected-dependent, protected, preserved, and unexpected classifications must use one canonical semantic model.
1701
+
1702
+ A protected-region failure cannot become a warning merely because one consumer prefers a looser interpretation.
1703
+
1704
+ ### Target separation
1705
+
1706
+ Observed applications remain external targets.
1707
+
1708
+ Do not install observer dependencies into target applications merely to perform ordinary observation.
1709
+
1710
+ Optional future instrumentation may exist only when explicitly designed and must not become a hidden requirement for ordinary observation.
1711
+
1712
+ ### my-dev-kit boundary
1713
+
1714
+ Do not duplicate:
1715
+
1716
+ - source indexing;
1717
+ - symbol graphs;
1718
+ - dependency graphs;
1719
+ - architecture analysis;
1720
+ - bounded source retrieval;
1721
+ - source ownership inference;
1722
+
1723
+ inside `my-frontend-observer`.
1724
+
1725
+ Any source association must use an explicit static/runtime integration boundary.
1726
+
1727
+ ### Orchestrator boundary
1728
+
1729
+ Do not duplicate:
1730
+
1731
+ - workflow catalogs;
1732
+ - stage lifecycle;
1733
+ - readiness gates;
1734
+ - correction routing;
1735
+ - prompt orchestration;
1736
+
1737
+ inside `my-frontend-observer`.
1738
+
1739
+ The observer produces evidence.
1740
+
1741
+ The orchestrator coordinates workflows.
1742
+
1743
+ ### Lab boundary
1744
+
1745
+ Do not duplicate:
1746
+
1747
+ - ecosystem evaluation;
1748
+ - comparative experiment ownership;
1749
+ - compatibility verdicts;
1750
+ - release evaluation;
1751
+
1752
+ inside `my-frontend-observer`.
1753
+
1754
+ The observer owns production runtime evidence.
1755
+
1756
+ The lab evaluates supported ecosystem behavior.
1757
+
1758
+ ### Shared-package restraint
1759
+
1760
+ Do not create a shared ecosystem abstraction merely because multiple projects contain similarly shaped metadata.
1761
+
1762
+ A shared package must have a concrete, justified owner and compatibility need.
1763
+
1764
+ ## Cross-Milestone Evidence Rules
1765
+
1766
+ ### Observed versus derived
1767
+
1768
+ Every milestone must preserve:
1769
+
1770
+ ```text
1771
+ observed fact
1772
+
1773
+ derived interpretation
1774
+ ```
1775
+
1776
+ Example:
1777
+
1778
+ Observed:
1779
+
1780
+ ```text
1781
+ window.scrollY changed from 0 to 500
1782
+ ```
1783
+
1784
+ Derived:
1785
+
1786
+ ```text
1787
+ document appears to own page scrolling
1788
+ ```
1789
+
1790
+ Example:
1791
+
1792
+ Observed:
1793
+
1794
+ ```text
1795
+ navigation.width decreased
1796
+ workspace.width increased
1797
+ ```
1798
+
1799
+ Not automatically proven:
1800
+
1801
+ ```text
1802
+ navigation shrink caused workspace expansion
1803
+ ```
1804
+
1805
+ Expected dependency requires explicit contract or supported intent evidence.
1806
+
1807
+ ### Missing evidence
1808
+
1809
+ Do not treat:
1810
+
1811
+ ```text
1812
+ unavailable
1813
+ not observed
1814
+ not applicable
1815
+ truncated
1816
+ ```
1817
+
1818
+ as interchangeable.
1819
+
1820
+ Do not substitute false, zero, or empty values for unavailable evidence.
1821
+
1822
+ ### Boundedness
1823
+
1824
+ Every evidence-producing milestone must define appropriate limits.
1825
+
1826
+ Bounded lists should expose enough metadata to distinguish:
1827
+
1828
+ ```text
1829
+ no items existed
1830
+ ```
1831
+
1832
+ from:
1833
+
1834
+ ```text
1835
+ items existed but were omitted
1836
+ ```
1837
+
1838
+ ### Provenance
1839
+
1840
+ Every persistent evidence artifact must retain enough provenance to determine:
1841
+
1842
+ - which tool produced it;
1843
+ - which version produced it;
1844
+ - which schema applies;
1845
+ - what target/configuration was used;
1846
+ - what browser/environment matters;
1847
+ - what evidence was omitted;
1848
+ - what derived interpretation used which supporting facts.
1849
+
1850
+ ## Cross-Milestone Testing Rules
1851
+
1852
+ Every implemented capability must receive the narrowest meaningful automated coverage.
1853
+
1854
+ The project should progressively maintain:
1855
+
1856
+ ```text
1857
+ unit tests
1858
+ → schema/serialization tests
1859
+ → observation integration tests
1860
+ → browser fixture tests
1861
+ → runtime behavior tests
1862
+ → comparison tests
1863
+ → relationship tests
1864
+ → contract tests
1865
+ → bounded agent-context tests
1866
+ → static/runtime correlation tests
1867
+ → ecosystem compatibility fixtures
1868
+ → text/config-driven coding-agent workflow tests
1869
+ → graphical-interface tests
1870
+ → annotation tests
1871
+ → full visual workflow tests
1872
+ ```
1873
+
1874
+ Every previously passing milestone remains part of regression validation for later milestones.
1875
+
1876
+ Do not weaken earlier tests merely to accommodate a later implementation.
1877
+
1878
+ ### Browser-level evidence rule
1879
+
1880
+ Any browser/runtime feature requires browser-level validation.
1881
+
1882
+ Passing static typecheck or unit tests alone is not sufficient.
1883
+
1884
+ ### Fixture rule
1885
+
1886
+ Use deterministic local fixtures for canonical behavior.
1887
+
1888
+ Do not make public internet pages the authoritative test environment.
1889
+
1890
+ ### Cross-platform rule
1891
+
1892
+ Structured semantic evidence should be the primary portable contract.
1893
+
1894
+ Do not assume screenshot byte identity across operating systems unless explicitly established.
1895
+
1896
+ Later ecosystem releases should satisfy the cross-platform validation expectations adopted by the ecosystem.
1897
+
1898
+ ## Cross-Milestone Documentation Rules
1899
+
1900
+ Documentation must remain synchronized with implementation.
1901
+
1902
+ At minimum, as capabilities become real, maintain appropriate documentation for:
1903
+
1904
+ - project overview;
1905
+ - architecture;
1906
+ - observation artifact/schema;
1907
+ - command interface;
1908
+ - workflows;
1909
+ - development/testing;
1910
+ - limitations;
1911
+ - browser/network safety;
1912
+ - roadmap;
1913
+ - ecosystem integration when implemented.
1914
+
1915
+ Do not document future milestone behavior as if it already exists.
1916
+
1917
+ ### Forward-looking document rule
1918
+
1919
+ Forward-looking planning documents should be sufficiently self-contained for future LLM planning.
1920
+
1921
+ Important future design constraints should not exist only in scattered bookkeeping/reference documents.
1922
+
1923
+ The planning hierarchy is:
1924
+
1925
+ ```text
1926
+ Project Description
1927
+ → durable product intent
1928
+
1929
+ Project Milestones
1930
+ → ordered capability development
1931
+ → major design requirements
1932
+ → acceptance expectations
1933
+
1934
+ ROADMAP.md
1935
+ → version-level implementation direction
1936
+ → required capabilities
1937
+ → architectural constraints
1938
+ → dependencies
1939
+ → exclusions
1940
+ → acceptance expectations
1941
+ ```
1942
+
1943
+ `ROADMAP.md` must not contain prewritten implementation batches.
1944
+
1945
+ When implementation of a roadmap version begins, the implementation planner should:
1946
+
1947
+ ```text
1948
+ read relevant roadmap version
1949
+ → inspect current repository state
1950
+ → perform required my-dev-kit retrieval/architecture work
1951
+ → design implementation steps
1952
+ → divide those steps into batches
1953
+ → execute and validate
1954
+ ```
1955
+
1956
+ ## Cross-Milestone Validation Rules
1957
+
1958
+ Once established, every milestone must preserve the trusted validation chain:
1959
+
1960
+ ```text
1961
+ typecheck
1962
+ lint
1963
+ unit/integration tests
1964
+ browser tests
1965
+ applicable build/package validation
1966
+ documentation checks when implemented
1967
+ ```
1968
+
1969
+ Later ecosystem-integrated versions must additionally preserve:
1970
+
1971
+ ```text
1972
+ individual repository readiness
1973
+ → exact candidate identity verification
1974
+ → coordinated cross-repository compatibility validation
1975
+ ```
1976
+
1977
+ A coordinated ecosystem release must not validate downstream consumers against stale upstream versions when coordinated candidate versions are intended.
1978
+
1979
+ ## Milestone Ordering
1980
+
1981
+ The intended development sequence is:
1982
+
1983
+ ```text
1984
+ Milestone 1
1985
+ Runtime Observation Foundation
1986
+
1987
+ Milestone 2
1988
+ Stable Semantic Targets and Region Identity
1989
+
1990
+ Milestone 3
1991
+ Runtime Scrolling, Overflow, and Visibility Behavior
1992
+
1993
+ Milestone 4
1994
+ Layout Relationships, Dependency Evidence,
1995
+ and Before/After Comparison
1996
+
1997
+ Milestone 5
1998
+ Executable Frontend Contracts
1999
+ and Explicit Change Scope
2000
+
2001
+ Milestone 6
2002
+ Bounded Agent Context
2003
+ and Native my-dev-kit Ecosystem Integration
2004
+
2005
+ Milestone 7
2006
+ End-to-End Coding-Agent Frontend Change Review
2007
+
2008
+ Milestone 8
2009
+ Interactive Local Observation Viewer
2010
+
2011
+ Milestone 9
2012
+ Human Visual Annotation
2013
+ and Design-Intent Capture
2014
+
2015
+ Milestone 10
2016
+ Full Visual Human–LLM Frontend Change Workflow
2017
+ ```
2018
+
2019
+ The critical path through Milestone 7 proves that browser/runtime evidence,
2020
+ safe-change contracts, bounded static/runtime context, and an external coding
2021
+ agent can complete a regression-aware frontend correction without a graphical
2022
+ viewer or annotation authoring.
2023
+
2024
+ Milestones 8–10 form the human visual branch. The viewer and annotation system
2025
+ enhance the proven coding-agent workflow; they are not prerequisites for it.
2026
+
2027
+ Do not reorder these milestones merely for implementation convenience.
2028
+
2029
+ A milestone may span more than one package version if necessary. Multiple
2030
+ milestones may be combined into one implementation version only when doing so
2031
+ preserves dependency order and does not create unnecessary coupling.
2032
+
2033
+ Version boundaries belong in `ROADMAP.md`. Concrete implementation steps and
2034
+ batches do not belong in this milestone document.
2035
+
2036
+ ## Initial bootstrap target
2037
+
2038
+ The greenfield bootstrap establishes the standardized project foundation and
2039
+ forward-looking documents. Milestone 1 remains the first roadmap implementation
2040
+ target after bootstrap; it must be planned from the then-current repository
2041
+ state before product code is written.
2042
+
2043
+ The eventual v0.1 vertical slice should remain intentionally small:
2044
+
2045
+ ```text
2046
+ target URL
2047
+ + viewport
2048
+ + explicitly configured targets
2049
+
2050
+ Chromium observation
2051
+
2052
+ screenshot
2053
+ + structured page evidence
2054
+ + structured target evidence
2055
+
2056
+ versioned local observation artifact
2057
+ ```
2058
+
2059
+ The bootstrap must preserve architecture and documentation for future milestones without implementing roadmap v0.1 or later capabilities prematurely.
2060
+
2061
+ Do not bootstrap:
2062
+
2063
+ - comparison;
2064
+ - regression contracts;
2065
+ - per-change contracts;
2066
+ - LLM context packaging;
2067
+ - graphical viewing;
2068
+ - annotation;
2069
+ - static/runtime source correlation;
2070
+ - orchestrator adapters;
2071
+ - lab adapters.
2072
+
2073
+ The purpose of the first milestone is to establish a clean, bounded, versioned, trustworthy runtime-evidence foundation from which every later capability can grow.