pieceboard 0.0.0-stage → 0.1.0-alpha.3
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.
- package/CHANGELOG.md +74 -0
- package/CONTRIBUTING.md +32 -0
- package/LICENSE +21 -0
- package/PROJECT_PLAN.md +190 -0
- package/README.md +612 -2
- package/SECURITY.md +27 -0
- package/bin/ui-sheet.js +579 -0
- package/docs/data-format.md +67 -0
- package/docs/element-groups.md +19 -0
- package/docs/images/approve-appearance.png +0 -0
- package/docs/images/button-review.png +0 -0
- package/docs/images/button-zoom.png +0 -0
- package/docs/images/cross-page.png +0 -0
- package/docs/images/pieceboard-logo.png +0 -0
- package/docs/images/pieceboard-mark.svg +7 -0
- package/docs/images/ui-groups.png +0 -0
- package/docs/layout-checks.md +96 -0
- package/docs/privacy.md +17 -0
- package/docs/schema.md +87 -0
- package/docs/token-contracts.md +64 -0
- package/evaluation/README.md +29 -0
- package/evaluation/accessibility-review.md +71 -0
- package/evaluation/agent-usability.md +142 -0
- package/evaluation/browser-evaluate.js +57 -0
- package/evaluation/browser-holdout.json +31 -0
- package/evaluation/button-cases.json +84 -0
- package/evaluation/evaluate.js +46 -0
- package/evaluation/field-notes.md +35 -0
- package/evaluation/independent-button-cases.json +1823 -0
- package/evaluation/independent-evaluate.js +151 -0
- package/evaluation/independent-review.md +40 -0
- package/evaluation/results/browser-fe560ff.json +521 -0
- package/evaluation/results/independent-149ba97.json +6221 -0
- package/evaluation/results/regression-6acfb2c.json +6334 -0
- package/examples/button-review/index.html +30 -0
- package/examples/cross-page/alerts.html +3 -0
- package/examples/cross-page/email.html +3 -0
- package/examples/cross-page/profile.html +3 -0
- package/examples/cross-page/styles.css +4 -0
- package/examples/harbor/previews/avatar.svg +6 -0
- package/examples/harbor/previews/badge.svg +7 -0
- package/examples/harbor/previews/button.svg +6 -0
- package/examples/harbor/previews/field.svg +6 -0
- package/examples/harbor/previews/notice.svg +6 -0
- package/examples/harbor/public/harbor-mark.svg +5 -0
- package/examples/harbor/src/App.jsx +18 -0
- package/examples/harbor/src/Settings.jsx +13 -0
- package/examples/harbor/src/components.jsx +21 -0
- package/examples/harbor/src/styles.css +21 -0
- package/examples/harbor/ui-sheet.config.json +25 -0
- package/examples/layout-review/approved-mark.svg +5 -0
- package/examples/layout-review/index.html +43 -0
- package/examples/layout-review/ui-sheet.config.json +11 -0
- package/examples/ui-groups/index.html +47 -0
- package/examples/ui-groups/mark.svg +1 -0
- package/examples/ui-groups/ui-sheet.config.json +10 -0
- package/package.json +83 -4
- package/schemas/appearances-v1.schema.json +45 -0
- package/schemas/baselines-v3.schema.json +232 -0
- package/schemas/baselines-v4.schema.json +54 -0
- package/schemas/catalog-v1.schema.json +107 -0
- package/schemas/check-v1.schema.json +430 -0
- package/schemas/common-v1.schema.json +1627 -0
- package/schemas/decisions-v1.schema.json +42 -0
- package/schemas/element-appearances-v1.schema.json +88 -0
- package/schemas/element-baselines-v1.schema.json +232 -0
- package/schemas/element-baselines-v2.schema.json +54 -0
- package/schemas/element-locations-v1.schema.json +144 -0
- package/schemas/element-pages-v1.schema.json +23 -0
- package/schemas/elements-v1.schema.json +170 -0
- package/schemas/error-v1.schema.json +36 -0
- package/schemas/finding-locations-v1.schema.json +113 -0
- package/schemas/layout-check-v1.schema.json +115 -0
- package/schemas/layout-pages-v1.schema.json +24 -0
- package/schemas/layout-v1.schema.json +1748 -0
- package/schemas/locations-v1.schema.json +97 -0
- package/schemas/report-v1.schema.json +854 -0
- package/schemas/responsive-audit-v1.schema.json +69 -0
- package/schemas/scan-status-v1.schema.json +108 -0
- package/schemas/token-baselines-v1.schema.json +66 -0
- package/schemas/token-check-v1.schema.json +151 -0
- package/schemas/token-source-v1.schema.json +176 -0
- package/schemas/tokens-v1.schema.json +92 -0
- package/scripts/demo-consistency.js +33 -0
- package/scripts/demo-cross-page.js +41 -0
- package/scripts/demo-elements.js +36 -0
- package/scripts/demo-layout.js +47 -0
- package/scripts/evaluate-browser.js +57 -0
- package/scripts/evaluate-buttons.js +12 -0
- package/scripts/evaluate-independent.js +200 -0
- package/scripts/evaluate-public-source.js +90 -0
- package/scripts/export-demo-image.js +24 -0
- package/scripts/verify-package.js +64 -0
- package/skills/ui-consistency/SKILL.md +39 -0
- package/src/appearances.js +27 -0
- package/src/auth.js +66 -0
- package/src/baselines.js +121 -0
- package/src/capture-deadline.js +101 -0
- package/src/capture.js +602 -0
- package/src/catalog.js +33 -0
- package/src/check.js +92 -0
- package/src/config.js +57 -0
- package/src/consistency.js +257 -0
- package/src/context.js +77 -0
- package/src/cross-page.js +77 -0
- package/src/decisions.js +74 -0
- package/src/element-baselines.js +108 -0
- package/src/element-capture.js +111 -0
- package/src/element-check.js +26 -0
- package/src/element-consistency.js +154 -0
- package/src/element-queries.js +140 -0
- package/src/finding-locations.js +183 -0
- package/src/install-skill.js +33 -0
- package/src/instrumented-sources.js +29 -0
- package/src/layout-audit.js +272 -0
- package/src/layout-check.js +146 -0
- package/src/locations.js +25 -0
- package/src/manual-previews.js +119 -0
- package/src/observe.js +82 -0
- package/src/provenance.js +32 -0
- package/src/report.js +81 -0
- package/src/responsive-audit.js +330 -0
- package/src/scan-status.js +218 -0
- package/src/scan.js +521 -0
- package/src/token-baselines.js +244 -0
- package/src/viewer.css +1397 -0
- package/src/viewer.js +1066 -0
- package/src/vite-source.js +57 -0
- package/vite.js +1 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 0.1.0-alpha.3 — 2026-11-07
|
|
4
|
+
|
|
5
|
+
- Connect the lower-left and upper-right blue pieces in the logo and small vector mark for clearer recognition at header size.
|
|
6
|
+
- Point npm README images and source links to this immutable release tag.
|
|
7
|
+
|
|
8
|
+
## 0.1.0-alpha.2 — 2026-11-07
|
|
9
|
+
|
|
10
|
+
- Unpublished staged candidate superseded by alpha.3 before npm approval.
|
|
11
|
+
|
|
12
|
+
## 0.1.0-alpha.1 — 2026-11-07
|
|
13
|
+
|
|
14
|
+
- Rename the public package and primary CLI to Pieceboard, retain the `ui-sheet` command and serialized format for existing projects, and ship the owner-selected connected-piece logo.
|
|
15
|
+
- Frame visual review as a clear this-or-that choice between observed versions; keep source revision and reported served revision separate in supplied capture context.
|
|
16
|
+
- Validate optional role, school, viewport, timestamp, served revision, and image hash for manually supplied screenshots; show the context beside the image without treating it as deployment proof.
|
|
17
|
+
- Expand installation, safe sharing, and alpha publication instructions; verify the packed package from a fresh consumer.
|
|
18
|
+
- Add explicit layout checks for text clearance, signed element gaps, computed spacing, approved logo source paths, and distortion, with separate screen/print-preview context.
|
|
19
|
+
- Show measured layout findings and real previews in the report; add an image-free CI check and a reproducible synthetic demo.
|
|
20
|
+
- Treat missing, unsupported, hidden, or unstable layout evidence as incomplete rather than clean.
|
|
21
|
+
- Audit selected pages at multiple browser widths in one run, with width-specific overflow, clipped-text, and overlap evidence, privacy-masked screenshots, and reviewable CSS suggestions.
|
|
22
|
+
|
|
23
|
+
## 0.1.0-alpha.0 — 2026-11-04
|
|
24
|
+
|
|
25
|
+
- Record scoped CSS custom-property declarations and approve/check source token values without a browser; preserve theme, media, and layer contexts and distinguish missing, ambiguous, and unscanned evidence.
|
|
26
|
+
- Improve token value/label contrast and check token cards and scoped details with automated accessibility rules at desktop and narrow widths.
|
|
27
|
+
- Include the owner-approved security policy in the repository and package.
|
|
28
|
+
|
|
29
|
+
- Add opacity and safe CSS filter comparison, repeated-deviation findings, strict-majority ambiguity, and explicit migration to button baseline v4/element baseline v2.
|
|
30
|
+
- List every observed source occurrence for a selected finding, with a bounded CLI query and expandable report lists.
|
|
31
|
+
- Add configured-family appearance/location queries and visual approval import/export.
|
|
32
|
+
- Track per-page scan phases without retaining URLs or secrets in completion markers; reject completion with unvisited planned pages.
|
|
33
|
+
- Preserve the first separately authored evaluation result, including its misses, and add a reproducible multi-control demo and privacy-canary checks.
|
|
34
|
+
|
|
35
|
+
- Compare explicitly configured inputs, dropdowns, selectors, tabs, headers, sidebars, navigation, headings and text with state separation, source evidence and real previews; keep these new families experimental.
|
|
36
|
+
- Approve configured-family references separately from button baselines, with page/state/context scope and optional cross-page authority.
|
|
37
|
+
- Bound capture and browser cleanup, publish evidence transactionally, and support explicit verified focus/hover setup per page.
|
|
38
|
+
- Ship JSON schemas and compatibility documentation; return structured errors from `check --json`.
|
|
39
|
+
- Record separate coding-agent and accessibility exercises; fix count contrast and light/dark/mobile focus indicators found during review.
|
|
40
|
+
|
|
41
|
+
- Scan supported source files into an offline UI inventory with searchable source references and category filters.
|
|
42
|
+
- Capture real rendered controls and identify possible differences between comparable native buttons.
|
|
43
|
+
- Show high-density examples, measured differences, coverage, and source-confidence information.
|
|
44
|
+
- Record findings through the report or CLI, preserve existing decisions during export, and approve observed button appearances for a specific page, viewport, and theme.
|
|
45
|
+
- Define comparable button groups with project-specific CSS selectors and omit selected source paths or mask screenshot regions.
|
|
46
|
+
- Configure multiple routes and capture a selected viewport and browser color preference, with optional user-provided demo authentication state.
|
|
47
|
+
- Provide image-free CLI summaries, comparison with compatible prior reports, and installable Codex and Claude Code skills.
|
|
48
|
+
- List observed button-family occurrences across selected routes, with source-confidence clues.
|
|
49
|
+
- Optionally compare explicitly grouped button appearances across selected pages, counting a style once per page.
|
|
50
|
+
- Approve a cross-page button reference so a widespread drift can be detected even when the approved style is no longer visible.
|
|
51
|
+
- Distinguish source-linked inventory preview counts from comparison-preview counts in scan output.
|
|
52
|
+
- Allow explicitly configured, clearly labeled source links when automatic matching is ambiguous.
|
|
53
|
+
- Let projects classify exact CSS classes as UI types to include custom controls in the visual inventory without broadening the native-button comparison.
|
|
54
|
+
- Keep reviewed findings stable across line moves for unique static element IDs; regenerate older comparison reports and review decisions whose IDs become stale.
|
|
55
|
+
- Treat source-scan warnings or missing warning metadata as incomplete coverage in checks.
|
|
56
|
+
- Exclude possibly blocked buttons and report offscreen or otherwise unverified visibility as incomplete coverage.
|
|
57
|
+
- Improve report keyboard navigation, focus visibility, and reduced-motion behavior.
|
|
58
|
+
- Increase the size and contrast of key report labels and source paths.
|
|
59
|
+
- Add a repeatable, explicitly limited public-source association spot check.
|
|
60
|
+
- Queue and export approved appearances from the visual report, preserving imported baseline rules.
|
|
61
|
+
- Verify that a source-only CLI scan works with network calls blocked and AI credentials absent.
|
|
62
|
+
- Warn and leave package imports unresolved when selected projects contain duplicate workspace package names.
|
|
63
|
+
- Compare each border side's width, style, and color. Regenerate older comparisons and reapprove appearances into a new v2 baseline file; missing measurements cannot be safely inferred.
|
|
64
|
+
- Track CLI scan completion and prevent checks from treating a failed, interrupted, concurrent, or mismatched run as a fresh report.
|
|
65
|
+
- Improve contrast and text sizes across report navigation, summaries, and details; add automated accessibility checks for selected desktop, mobile, review, and dialog states.
|
|
66
|
+
- Show the source scan time in the report footer.
|
|
67
|
+
- Add an opt-in Vite development plugin that links supported JSX/TSX controls using source locations and file fingerprints, with incomplete-coverage reporting for missing or invalid markers.
|
|
68
|
+
- Add a separate, labeled browser evaluation with recorded false positives and misses.
|
|
69
|
+
- Compare supported gradients, font style, text transform, and decoration; exclude unsupported image backgrounds from comparison. Reapprove older baselines with the new measurements.
|
|
70
|
+
- Capture at configurable 1×–4× density and inspect original pixels with a resolution-aware zoom control; keep comparisons scoped to the capture density.
|
|
71
|
+
- Record browser version and local source-revision context when available.
|
|
72
|
+
- Avoid attributing entirely untracked or ignored source files to an enclosing Git revision, and report tracked-source coverage for mixed scans.
|
|
73
|
+
|
|
74
|
+
This is an unreleased prototype. See [the project plan](PROJECT_PLAN.md) for outstanding work and [the README](README.md) for supported behavior.
|
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# Contributing
|
|
2
|
+
|
|
3
|
+
Pieceboard is an early prototype. Small, well-scoped changes with evidence are especially helpful. Please read [the project plan](PROJECT_PLAN.md) for the current goals and limitations before starting substantial work.
|
|
4
|
+
|
|
5
|
+
## Development setup
|
|
6
|
+
|
|
7
|
+
Use Node.js 22 or newer and a recent npm:
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm ci
|
|
11
|
+
npx playwright install chromium
|
|
12
|
+
npm test
|
|
13
|
+
npm run test:package
|
|
14
|
+
npm run evaluate:buttons
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The test suite uses a local synthetic web server and closes it when the test finishes. Set `UI_SHEET_TEST_BROWSER` to a compatible Chromium-based browser executable if you prefer an already installed browser. Browser tests are skipped when neither that variable nor Playwright Chromium is available; install a browser before considering the full suite verified.
|
|
18
|
+
|
|
19
|
+
Routine GitHub Actions pushes and pull requests run the full browser suite and package check once on Ubuntu/Node 24, plus a short Windows/Node 24 scan-status and Vite capture smoke. To qualify a release across Node 22, 24 and 26 on both systems, start the CI workflow manually with **full_matrix** enabled. The full Windows suite runs serially to avoid unrelated browser processes competing on a runner. CI only tests Pieceboard; it does not deploy a website.
|
|
20
|
+
|
|
21
|
+
Run `npm run demo` for real captures of synthetic fields, tabs, dropdowns, selectors and actions, or `npm run demo:consistency` for the smaller button report. `npm run demo:inventory` is the source-only example with supplied SVG illustrations. Generated reports are ignored by Git. Use `npm run screenshot:demo` after the button demo, or `node scripts/export-demo-image.js --elements` after the default demo, to refresh the corresponding synthetic README images.
|
|
22
|
+
|
|
23
|
+
## Making a change
|
|
24
|
+
|
|
25
|
+
- Explain the user-facing problem, the expected behavior, and any important tradeoffs.
|
|
26
|
+
- Add a focused fixture or test when behavior changes, including intentional variants or incomplete evidence where relevant.
|
|
27
|
+
- Preserve the distinction between measured values, inferred grouping, possible source matches, and approved conventions.
|
|
28
|
+
- Keep browser interaction opt-in. Do not submit forms, collect private browser state, or upload project data as part of a scan.
|
|
29
|
+
- Update the README and project plan when supported behavior or limitations change.
|
|
30
|
+
- Run the relevant tests and report any skipped browser checks or remaining limitations in the pull request.
|
|
31
|
+
|
|
32
|
+
Use synthetic data in fixtures, screenshots, issues, and pull requests. Do not include credentials, browser state files, or real user records.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 UI Sheet contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/PROJECT_PLAN.md
ADDED
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
# Pieceboard: project plan
|
|
2
|
+
|
|
3
|
+
## Product goal
|
|
4
|
+
|
|
5
|
+
Help people and coding agents keep an application's UI consistent. Pieceboard should discover relevant interface elements, show clear images of comparable examples, identify possible inconsistencies, and provide evidence about where to investigate the code.
|
|
6
|
+
|
|
7
|
+
For example, if comparable Save buttons usually have an 8 px border radius and one has a 3 px radius, the report should show both appearances, explain the difference and their observed frequency, and link to the relevant source when that link can be established. A rare appearance is a suggestion for review, not automatically an error.
|
|
8
|
+
|
|
9
|
+
The package should be useful without an AI provider. Optional Codex and Claude Code skills should enable agents to consult existing UI patterns before making changes and review findings afterward.
|
|
10
|
+
|
|
11
|
+
## Principles
|
|
12
|
+
|
|
13
|
+
- Focus on interface controls and design foundations, not ordinary page content or unrelated data.
|
|
14
|
+
- Capture genuine, readable examples; never invent what a component looks like.
|
|
15
|
+
- Compare like with like: component family, purpose, state, theme, and viewport matter.
|
|
16
|
+
- Count occurrences before selecting or deduplicating preview images.
|
|
17
|
+
- Separate measured facts, inferred relationships, manually supplied information, and unknowns.
|
|
18
|
+
- Prefer approved project conventions over an assumption that the most common appearance is correct.
|
|
19
|
+
- Operate locally by default and make rendering, authentication, and page interactions explicit.
|
|
20
|
+
- Keep findings useful without requiring an AI service or an API key.
|
|
21
|
+
|
|
22
|
+
## Current status
|
|
23
|
+
|
|
24
|
+
The alpha scans JSX/TSX, static HTML and PHP template markup, CSS custom properties, fonts and image assets. It generates an offline visual inventory with real high-density captures, compares native buttons and explicitly configured UI groups, and supports approved references and source-anchored review decisions. It can inspect selected pages at multiple browser widths for possible overflow, clipping, and text overlap. It ships JSON schemas, coding-agent instructions and report-only CI checks. A second coding agent exercised the documented workflow, and a separately authored accessibility review found and verified fixes for three issues. Configured non-button families remain experimental; representative accuracy, real screen-reader/native-zoom review, and Claude execution remain open. The checklist records those limits rather than treating an alpha as the entire roadmap.
|
|
25
|
+
|
|
26
|
+
## Milestone 1: protect the prototype and establish the baseline
|
|
27
|
+
|
|
28
|
+
- [x] Review and preserve the existing prototype and its tests; keep local reports and screenshots out of the public repository.
|
|
29
|
+
- [x] Document the supported environments, the actual current commands, and the distinction between source scanning and opt-in page rendering.
|
|
30
|
+
- [x] Establish the automated test and package-verification baseline.
|
|
31
|
+
- [x] Define versioned current-producer schemas, compact public interchange contracts, and a clear regeneration path for older reports.
|
|
32
|
+
|
|
33
|
+
**Acceptance:** the existing prototype runs from a clean checkout, reports are not accidentally committed, and changes begin from a tested baseline.
|
|
34
|
+
|
|
35
|
+
## Milestone 2: make the first button comparison work
|
|
36
|
+
|
|
37
|
+
- [x] Start with native buttons on one accessible page in a desktop viewport, excluding disabled controls and common toggle/disclosure states.
|
|
38
|
+
- [ ] Track focus, hover, occlusion and other inherited states before claiming complete default-state coverage.
|
|
39
|
+
- [x] Document source definitions/usages, rendered observations, groups/variants/states, appearances and findings as separate evidence in the schemas.
|
|
40
|
+
- [x] Record eligible rendered occurrences independently of preview capture limits and count excluded controls.
|
|
41
|
+
- [ ] Account for inaccessible, covered and changing controls in coverage and sample confidence.
|
|
42
|
+
- [x] Count representative button previews that were captured, unavailable, or omitted by the per-page limit, and mark incomplete preview evidence as partial coverage.
|
|
43
|
+
- [x] Exclude buttons with failed in-viewport hit tests and report offscreen or unverified visibility as incomplete coverage.
|
|
44
|
+
- [x] Measure normalized rendered properties such as background and text colors, typography, border, radius, padding and shadow.
|
|
45
|
+
- [x] Measure border width, style and color on each side, and require old approvals to be recaptured when those measurements are absent.
|
|
46
|
+
- [x] Measure supported gradients and additional text styling; exclude unsupported image backgrounds and report incomplete coverage.
|
|
47
|
+
- [x] Measure opacity and supported resource-free filters, require a genuine majority, and report repeated minority deviations.
|
|
48
|
+
- [x] Group comparable controls conservatively and identify rare or unexpected appearances with an explanation and sample counts.
|
|
49
|
+
- [x] Show a side-by-side comparison with the precise values that differ, page context, and source evidence when available.
|
|
50
|
+
- [x] Retain existing inventory functionality and label uncertain or undersampled comparisons clearly.
|
|
51
|
+
|
|
52
|
+
**Acceptance:** a seeded inconsistent button is reported, an intentionally different destructive button is not presented as a definite error, and a reviewer can see why the finding was made.
|
|
53
|
+
|
|
54
|
+
## Milestone 3: readable visuals and trustworthy evidence
|
|
55
|
+
|
|
56
|
+
- [x] Capture actual component images at high pixel density, after fonts and layout have settled, with suitable size limits and honest fallback behavior.
|
|
57
|
+
- [x] Provide readable comparison previews, original-size viewing and zoom without stretching low-resolution images.
|
|
58
|
+
- [ ] Test image clarity on standard- and high-density displays and recapture low-resolution examples where possible.
|
|
59
|
+
- [x] Record viewport, detected theme and route for comparisons.
|
|
60
|
+
- [x] Record Chromium version and local Git revision/working-tree status when available; label this as local context rather than proof of deployment.
|
|
61
|
+
- [x] Report how many scanned source files are tracked in the enclosing checkout and omit Git context when none are tracked.
|
|
62
|
+
- [x] Allow a user-supplied selector and recorded source location to supplement ambiguous automatic matches; label this evidence as manual.
|
|
63
|
+
- [x] Allow explicitly classified static CSS classes to add custom elements to the visual inventory and type filters, without treating them as native buttons.
|
|
64
|
+
- [x] Label source evidence as instrumented, likely, manually linked or unresolved; do not present an inferred match as verified.
|
|
65
|
+
- [x] Add opt-in Vite development instrumentation for selected JSX/TSX controls, with file-fingerprint matching and explicit coverage limits.
|
|
66
|
+
- [x] Exercise instrumented captures on a standalone component from a local project using sample data, without modifying its repository.
|
|
67
|
+
|
|
68
|
+
**Acceptance:** comparison labels and details are readable, genuine screenshots are used, and no finding fabricates a source location.
|
|
69
|
+
|
|
70
|
+
## Milestone 4: review and approved patterns
|
|
71
|
+
|
|
72
|
+
- [x] Let reviewers record intentional, needs-fix, deferred and false-positive decisions through the CLI.
|
|
73
|
+
- [x] Store source-anchored decisions that become stale when their appearance, group, page or source identity changes.
|
|
74
|
+
- [x] Preserve a finding identity across a line move when a static element ID is unique in selected source and the rendered page.
|
|
75
|
+
- [x] Add in-report review controls with import and export of source-anchored decisions.
|
|
76
|
+
- [ ] Support reliable decisions for more kinds of source evidence.
|
|
77
|
+
- [x] Allow an explicitly approved button appearance to take precedence over frequency-based suggestions for a page, viewport, theme and stable group.
|
|
78
|
+
- [x] Support approving observed button appearances without an existing finding.
|
|
79
|
+
- [x] Allow captured appearances to be approved and exported from the visual report, with an import path for existing baselines.
|
|
80
|
+
- [x] Add separate approved references for explicitly configured UI families, scoped to observed state and rendering context.
|
|
81
|
+
- [x] Approve exact source CSS token declarations by file, selector and complete at-rule context; check changed, missing, ambiguous and unscanned declarations without a browser.
|
|
82
|
+
- [ ] Evaluate token contracts and each added component family beyond synthetic fixtures; runtime token cascade/value enforcement remains outside the source contract.
|
|
83
|
+
- [ ] Separate light and dark themes, responsive breakpoints, and normal, disabled, selected, focused and hover states.
|
|
84
|
+
- [x] Allow project-specific button group and variant definitions using non-overlapping CSS selectors.
|
|
85
|
+
|
|
86
|
+
**Acceptance:** intentional variations can be accepted without suppressing unrelated issues, and approved patterns are honored on subsequent runs.
|
|
87
|
+
|
|
88
|
+
## Milestone 5: realistic capture coverage
|
|
89
|
+
|
|
90
|
+
- [x] Configure or explicitly select multiple routes and source scopes; analyze each route separately.
|
|
91
|
+
- [x] Scan selected UI paths from multiple local projects under a common parent, and warn when workspace package names are ambiguous.
|
|
92
|
+
- [x] List observed occurrences of a button family across the selected routes, with available source clues.
|
|
93
|
+
- [x] Offer compact configured-family queries and finding-specific lookup for every matching observed occurrence, including unresolved sources and truncation.
|
|
94
|
+
- [x] Offer opt-in cross-page comparison for explicitly named button groups and variants, with page-frequency evidence and representative captures.
|
|
95
|
+
- [x] Support an explicitly approved cross-page button reference that takes precedence over frequency for the same group, viewport and theme.
|
|
96
|
+
- [x] Configure one viewport and browser light/dark color preference per captured scan; keep their baselines and decisions separate.
|
|
97
|
+
- [ ] Broaden cross-page comparison to additional well-evaluated component families and application-specific theme switches.
|
|
98
|
+
- [x] Track requested pages, completed observation/capture phases and failed page indexes; report observed controls, omissions and incomplete evidence separately.
|
|
99
|
+
- [x] Keep focus/hover actions opt-in per exact page, verify their setup, record their context, and provide no automatic clicks or form submission.
|
|
100
|
+
- [x] Bound capture and browser cleanup time and publish evidence only after a successful capture.
|
|
101
|
+
- [x] Support a dedicated demo/test account through a user-led authentication flow or explicitly provided local browser state.
|
|
102
|
+
- [x] Keep authentication material out of generated reports and provide an ignored local state directory for this repository.
|
|
103
|
+
- [x] Allow configurable CSS-selector masks in automatically captured screenshots.
|
|
104
|
+
- [x] Allow configured and CLI source-path exclusions, including paths nested inside selected source directories.
|
|
105
|
+
- [x] Document data boundaries and exercise synthetic privacy canaries for browser state, resource URLs, field values and matching screenshot masks.
|
|
106
|
+
- [x] Exercise isolated selected UI components from two local projects with synthetic content; do not claim full application or deployment coverage.
|
|
107
|
+
|
|
108
|
+
**Acceptance:** several chosen demo pages can be examined, coverage limitations are visible, and private authentication data is not embedded in reports.
|
|
109
|
+
|
|
110
|
+
## Milestone 6: coding-agent integration
|
|
111
|
+
|
|
112
|
+
- [x] Document the prototype's versioned, provider-neutral JSON outputs and regeneration behavior.
|
|
113
|
+
- [x] Ship schemas and compatibility rules for current alpha reports, compact queries/checks, baselines, decisions, source evidence and coverage.
|
|
114
|
+
- [ ] Stabilize the complete interface for a production release after external integration feedback.
|
|
115
|
+
- [x] Provide installable Codex and Claude Code skill instructions for consulting existing patterns and reviewing a fresh report.
|
|
116
|
+
- [x] Explain uncertain findings, deliberate variants, authorization boundaries and coverage to coding agents.
|
|
117
|
+
- [x] Exercise the agent-facing CLI workflow on a small project with both a consistent change and a seeded regression.
|
|
118
|
+
- [x] Have a fresh second Codex agent exercise the documented workflow without implementation knowledge; fix its structured-error finding.
|
|
119
|
+
- [x] Have another fresh Codex agent exercise source token approvals against stale and incomplete reports without implementation knowledge, preserving current source and approval files.
|
|
120
|
+
- [ ] Evaluate actual Codex and Claude behavior independently, including cases where the tool is incomplete or stale.
|
|
121
|
+
- [x] Keep source-only scanning functional without AI access, model training, or network access.
|
|
122
|
+
|
|
123
|
+
**Acceptance:** a coding agent can consult an existing button pattern, make a UI change, run a check, and report a known inconsistency with useful evidence.
|
|
124
|
+
|
|
125
|
+
## Milestone 7: evaluate accuracy and broaden support
|
|
126
|
+
|
|
127
|
+
- [x] Add a labeled synthetic button development set that reports false positives and false negatives without claiming representative accuracy.
|
|
128
|
+
- [x] Prepare a separate set of labeled synthetic browser scenarios before scoring them, with authorship and sampling limitations documented.
|
|
129
|
+
- [x] Record an initial precision, recall, preview-count, and source-association result on those frozen scenarios without claiming representative accuracy.
|
|
130
|
+
- [x] Record an exploratory public-site check with intentional variations and explicitly unresolved source links.
|
|
131
|
+
- [x] Exercise a second public application against selected upstream source files and document an unsupported custom-control case.
|
|
132
|
+
- [x] Make the six selected public source-link spot checks repeatable, with pinned source and an HTML hash comparison.
|
|
133
|
+
- [x] Build synthetic fixtures with known differences and intentional variants across configured families, observed states, browser themes and selected viewports.
|
|
134
|
+
- [x] Freeze separately authored labels before scoring and preserve the first runtime's precision, recall, errors, source associations and preview counts.
|
|
135
|
+
- [ ] Evaluate the revised detector against fresh labels after tuning; the preserved first score remains below the provisional targets.
|
|
136
|
+
- [ ] Measure coverage, screenshot readability, source-link accuracy and reviewer false-positive feedback.
|
|
137
|
+
- [ ] Treat 90% precision and 80% recall on the early evaluation set as provisional goals, not claims; document sample size and limitations.
|
|
138
|
+
- [x] Add opt-in experimental comparisons for configured inputs, dropdowns, selectors, tabs, headers, sidebars, navigation, headings and text, with state separation and genuine previews.
|
|
139
|
+
- [ ] Promote additional families beyond experimental support only after their own labeled evaluation meets acceptance criteria.
|
|
140
|
+
- [x] Retain tested static HTML/PHP inventory and capture support, with the separate PHP component sample's manual/likely evidence clearly labeled.
|
|
141
|
+
|
|
142
|
+
**Acceptance:** tests demonstrate useful detection without overwhelming reviewers, and supported component families have documented limits.
|
|
143
|
+
|
|
144
|
+
## Milestone 8: package, CI and release
|
|
145
|
+
|
|
146
|
+
- [x] Provide non-overwriting init, documented source/route/group configuration, reproducible demos and packed-install verification.
|
|
147
|
+
- [x] Add a report-only CLI check with image-free JSON, optional failure for all actionable findings, and explicit incomplete-coverage handling.
|
|
148
|
+
- [x] Compare compatible reports and optionally fail for new, source-anchored actionable findings; treat incomplete evidence as inconclusive.
|
|
149
|
+
- [x] Mark scans with source warnings or missing warning metadata as incomplete in CI checks.
|
|
150
|
+
- [x] Record failed or interrupted CLI scans and make checks require a matching completed record for full coverage.
|
|
151
|
+
- [ ] Detect introduced findings reliably when source locations move or cannot be linked confidently.
|
|
152
|
+
- [x] Reject failed/interrupted/mismatched scans and expose incomplete evidence; strict coverage checks exit unsuccessfully.
|
|
153
|
+
- [x] Test a packed installation and move the Node support policy to maintained releases.
|
|
154
|
+
- [x] Prepare alpha package metadata and verify that the current npm name was not published when checked; availability is not reserved.
|
|
155
|
+
- [x] Confirm the initial CI matrix across Windows and Linux on Node 22, 24 and 26.
|
|
156
|
+
- [x] Prepare a README with a real synthetic-demo capture, examples, contribution guide, changelog and issue templates.
|
|
157
|
+
- [x] Exercise keyboard navigation, focus visibility, dialogs and reduced motion in a browser smoke test.
|
|
158
|
+
- [x] Check the contrast of key report labels and source paths in a browser smoke test.
|
|
159
|
+
- [x] Run automated accessibility rules on selected desktop, mobile, review, and dialog states, and address the issues found in the synthetic report.
|
|
160
|
+
- [x] Complete a separately authored agent accessibility review of the synthetic report and verify fixes for its three findings.
|
|
161
|
+
- [ ] Complete external human accessibility review, including screen-reader output and native browser zoom.
|
|
162
|
+
- [x] Establish an owner-approved security reporting policy, verify its application to the source tree, and include it in the package. The policy provides a fallback when private reporting is unavailable.
|
|
163
|
+
- [ ] Recheck package name availability, review release contents, and publish an alpha before considering a stable release.
|
|
164
|
+
- [x] Compare and document how UI Sheet complements Storybook and visual regression testing.
|
|
165
|
+
|
|
166
|
+
**Acceptance:** an independent developer can install the package, configure a small project, review a meaningful finding, and understand its limitations without help.
|
|
167
|
+
|
|
168
|
+
## Layout, typography, and brand anomaly extension
|
|
169
|
+
|
|
170
|
+
- [x] Add opt-in rules for actual text/container clearance, signed gaps between elements, computed margin/padding/word-spacing values, and approved logo image sources/aspect ratio.
|
|
171
|
+
- [x] Separate these explicit layout rules from existing frequency-based appearance identities and approvals.
|
|
172
|
+
- [x] Keep missing, hidden, unsupported, bounded, and unstable evidence incomplete; show measured requirements, manual source links, and real previews in the report.
|
|
173
|
+
- [x] Support separate screen/print-preview layout contexts and a compact CI check with strict incomplete-evidence handling.
|
|
174
|
+
- [x] Add synthetic wordmark-overlap, crowded-callout, spacing, and approved-image fixtures; keep uploaded PDFs and private brand assets out of tracked examples.
|
|
175
|
+
- [ ] Evaluate against separately authored real-world layout cases, responsive states, and deliberate overlaps; this first version is experimental.
|
|
176
|
+
- [ ] Add direct PDF glyph/container geometry and embedded-logo checks with honest source-provenance limits.
|
|
177
|
+
- [ ] Add exact approved asset-byte verification and additional rendered-content checks beyond descendant text rectangles.
|
|
178
|
+
|
|
179
|
+
## Initial delivery order
|
|
180
|
+
|
|
181
|
+
1. Preserve the prototype and create focused test fixtures.
|
|
182
|
+
2. Record rendered button occurrences and normalized style evidence.
|
|
183
|
+
3. Compare similar button occurrences and explain candidate differences.
|
|
184
|
+
4. Show crisp side-by-side previews with source-confidence labels.
|
|
185
|
+
5. Test against known positive and intentional-variant examples.
|
|
186
|
+
6. Add multiple routes, approved patterns, agent integration and CI incrementally.
|
|
187
|
+
|
|
188
|
+
## Planning estimates
|
|
189
|
+
|
|
190
|
+
For one full-time developer, the rough target is 2–3 weeks for a focused proof of concept, 5–8 weeks for a private alpha, 10–14 weeks for a public beta, and 4–6 months for a stable release. These are estimates, not guarantees. Grouping, source mapping, authenticated capture, and reducing false positives are the largest unknowns.
|