@zenuml/core 3.46.0 → 3.46.2
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/.claude/skills/dia-scoring/SKILL.md +139 -0
- package/.claude/skills/dia-scoring/agents/openai.yaml +7 -0
- package/.claude/skills/dia-scoring/references/selectors-and-keys.md +253 -0
- package/.claude/skills/land-pr/SKILL.md +98 -0
- package/.claude/skills/ship-branch/SKILL.md +81 -0
- package/.claude/skills/submit-branch/SKILL.md +76 -0
- package/.claude/skills/validate-branch/SKILL.md +54 -0
- package/CLAUDE.md +1 -1
- package/bun.lock +25 -11
- package/cy/canonical-history.html +908 -0
- package/cy/compare-case.html +357 -0
- package/cy/compare-cases.js +824 -0
- package/cy/compare.html +35 -0
- package/cy/diff-algorithm.js +199 -0
- package/cy/element-report.html +705 -0
- package/cy/icons-test.html +29 -0
- package/cy/legacy-vs-html.html +291 -0
- package/cy/native-diff-ext/background.js +60 -0
- package/cy/native-diff-ext/bridge.js +26 -0
- package/cy/native-diff-ext/content.js +194 -0
- package/cy/parity-test.html +122 -0
- package/cy/return-in-nested-if.html +29 -0
- package/cy/svg-preview.html +56 -0
- package/cy/svg-test.html +21 -0
- package/cy/theme-default-test.html +28 -0
- package/dist/stats.html +1 -1
- package/dist/zenuml.esm.mjs +16352 -15223
- package/dist/zenuml.js +701 -575
- package/docs/ship-branch-skill-plan.md +134 -0
- package/docs/superpowers/plans/2026-03-23-svg-parity-features.md +283 -0
- package/index.html +568 -73
- package/package.json +15 -4
- package/scripts/analyze-compare-case/collect-data.mjs +991 -0
- package/scripts/analyze-compare-case/config.mjs +102 -0
- package/scripts/analyze-compare-case/geometry.mjs +101 -0
- package/scripts/analyze-compare-case/native-diff.mjs +224 -0
- package/scripts/analyze-compare-case/output.mjs +74 -0
- package/scripts/analyze-compare-case/panel-diff.mjs +114 -0
- package/scripts/analyze-compare-case/report.mjs +157 -0
- package/scripts/analyze-compare-case/residual-scopes.mjs +325 -0
- package/scripts/analyze-compare-case/scoring.mjs +816 -0
- package/scripts/analyze-compare-case.mjs +149 -0
- package/scripts/snapshot-dual.js +34 -34
- package/skills/dia-scoring/SKILL.md +129 -0
- package/skills/dia-scoring/agents/openai.yaml +7 -0
- package/skills/dia-scoring/references/selectors-and-keys.md +253 -0
- package/test-setup.ts +8 -0
- package/types/index.d.ts +56 -0
- package/vite.config.ts +4 -0
- package/dist/10029-icon-service-Function-Apps-ObflOLuF.js +0 -5
- package/dist/Res_AWS-Identity-Access-Management_IAM-Access-Analyzer_48-BPq60XMY.js +0 -11
- package/dist/Res_AWS-Lambda_Lambda-Function_48-Co38UB_2.js +0 -12
- package/dist/Res_Amazon-EC2_Instance_48-CRaqbNUl.js +0 -12
- package/dist/Res_Amazon-Simple-Notification-Service_Topic_48-q13mxUeM.js +0 -11
- package/dist/Res_Amazon-Simple-Queue-Service_Queue_48-D2-8gbFw.js +0 -11
- package/dist/Robustness_Diagram_Boundary-nYnmTPs8.js +0 -10
- package/dist/Robustness_Diagram_Control-DLNLoMxd.js +0 -11
- package/dist/Robustness_Diagram_Entity-Be3kcbIE.js +0 -11
- package/dist/actor-BMj_HFpo.js +0 -11
- package/dist/database-BKHQQWQK.js +0 -8
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: dia-scoring
|
|
3
|
+
description: Score HTML-vs-SVG diagram parity in compare-case pages, including message labels, fragment labels, sequence numbers, arrows, participant headers, icons, stereotypes, participant colors, participant groups, comments, and residual diff scopes. Use Playwright for page inspection and semantic attribution.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Dia Scoring
|
|
7
|
+
|
|
8
|
+
Use this skill when the task is to measure **message labels, fragment labels, sequence numbers, message arrows, participant labels, participant boxes, participant icons, stereotypes, participant colors, participant groups, inline comments, and residual diff hotspots** between the HTML renderer and the native SVG renderer on `compare-case.html`.
|
|
9
|
+
|
|
10
|
+
## Diff Source of Truth
|
|
11
|
+
|
|
12
|
+
The `native-diff-ext` Chrome extension is the absolute source of truth for pixel diff. The analyzer script (`scripts/analyze-compare-case.mjs`) uses the same CDP screenshot capture method and the same diff algorithm (`cy/diff-algorithm.js`), producing identical results when run against the same viewport.
|
|
13
|
+
|
|
14
|
+
- Use the **analyzer script** as the primary scoring tool (automated, reproducible, CLI-driven)
|
|
15
|
+
- Use the **extension** for live interactive inspection in the browser
|
|
16
|
+
- Both use CDP `Page.captureScreenshot` with `DOM.getBoxModel` border-box clip
|
|
17
|
+
- When calibrating the skill, verify against the extension's live `#diff-panel canvas`
|
|
18
|
+
|
|
19
|
+
The workflow:
|
|
20
|
+
|
|
21
|
+
1. Run `node scripts/analyze-compare-case.mjs --case <name> --json` for structured data.
|
|
22
|
+
2. Use `--output-dir <dir>` when you need saved `html.png`, `svg.png`, `diff.png`, and `report.json`.
|
|
23
|
+
3. For live browser inspection, navigate to `http://localhost:8080/cy/compare-case.html?case=<name>` and use the extension's `#diff-panel canvas`.
|
|
24
|
+
4. Use Playwright page inspection for semantic attribution (element positions, font metrics, DOM structure).
|
|
25
|
+
|
|
26
|
+
## Offset Anchor
|
|
27
|
+
|
|
28
|
+
All reported offsets must use the **outermost frame's top-left corner** as the anchor.
|
|
29
|
+
|
|
30
|
+
- HTML anchor: the compare-case HTML frame root
|
|
31
|
+
- SVG anchor: the compare-case SVG root / outer frame root
|
|
32
|
+
- Do not report alternate offset systems
|
|
33
|
+
- Do not anchor offsets to participant boxes, label boxes, stereotype boxes, or local containers
|
|
34
|
+
- If a local-container-relative reading differs from the frame-anchor reading, prefer the frame-anchor reading in all reporting
|
|
35
|
+
|
|
36
|
+
## Browser Requirement
|
|
37
|
+
|
|
38
|
+
Use **Playwright browser tools only** for browser interaction in this workflow.
|
|
39
|
+
|
|
40
|
+
- Preferred tools: `browser_navigate`, `browser_snapshot`, `browser_evaluate`, `browser_take_screenshot`, `browser_click`, `browser_wait_for`
|
|
41
|
+
- Do not use Chrome DevTools browser tools for scoring, DOM inspection, screenshot capture, or residual validation
|
|
42
|
+
- Do not build your own pixel diff from HTML/SVG screenshots. For pixel comparison, use only the extension-rendered `#diff-panel canvas`
|
|
43
|
+
|
|
44
|
+
## Rules
|
|
45
|
+
|
|
46
|
+
- Do not use `html-to-image` for capture.
|
|
47
|
+
- Use browser-native screenshots only.
|
|
48
|
+
- Use Playwright for browser-native screenshots and page inspection.
|
|
49
|
+
- All offset calculations must be anchored to the outermost frame's top-left corner.
|
|
50
|
+
- When recalibrating the skill itself, verify against the extension's live `#diff-panel canvas`.
|
|
51
|
+
- Do not use Chrome DevTools browser tools for this workflow.
|
|
52
|
+
- Scope:
|
|
53
|
+
- normal messages
|
|
54
|
+
- self messages
|
|
55
|
+
- returns
|
|
56
|
+
- creation messages (e.g., `«payload»`, `new Order()`)
|
|
57
|
+
- fragment conditions such as `[cond]`, `[else]`
|
|
58
|
+
- fragment section labels such as `catch`, `finally`
|
|
59
|
+
- participant label text and participant box geometry
|
|
60
|
+
- participant icons (actor, database, ec2, lambda, azurefunction, sqs, sns, iam, boundary, control, entity)
|
|
61
|
+
- participant stereotypes such as `«BFF»`, `«Interface»`
|
|
62
|
+
- participant background colors (`#FFEBE6`, `#0747A6`, etc.) and computed text contrast
|
|
63
|
+
- participant groups (dashed outline containers with title bar)
|
|
64
|
+
- inline comments (`// text`) above messages and fragments, including styled comments (`// [red] text`)
|
|
65
|
+
- residual `html-only` and `svg-only` diff clusters scoped back to nearby elements
|
|
66
|
+
- For each supported message, include:
|
|
67
|
+
- label text
|
|
68
|
+
- fragment condition / section label text when present
|
|
69
|
+
- sequence number text, including fragment sequence numbers when present
|
|
70
|
+
- arrow geometry keyed by sequence number
|
|
71
|
+
- normal/return arrow endpoint deltas: `left_dx`, `right_dx`, `width_dx`
|
|
72
|
+
- self-arrow loop geometry from the painted loop path plus arrowhead, not the outer `svg` viewport
|
|
73
|
+
- self-arrow vertical deltas: `top_dy`, `bottom_dy`, `height_dy`
|
|
74
|
+
- For participant icons, include:
|
|
75
|
+
- icon presence (HTML vs SVG)
|
|
76
|
+
- participant label text when the participant has an icon
|
|
77
|
+
- icon position relative to participant label
|
|
78
|
+
- icon visual match confirmation from diff image
|
|
79
|
+
- For participant stereotypes, include:
|
|
80
|
+
- stereotype text presence (HTML vs SVG), e.g. `«BFF»`
|
|
81
|
+
- stereotype position relative to participant label (above label, smaller font)
|
|
82
|
+
- stereotype offset must be measured with per-letter glyph-box comparison relative to the outermost frame anchor
|
|
83
|
+
- do not use participant-box-relative or other local-container-relative deltas in final reporting
|
|
84
|
+
- do not mark a stereotype as clean from glyph boxes alone; also check the live `#diff-panel canvas` in the stereotype row
|
|
85
|
+
- if glyph-box deltas are `0/0` but the panel still shows localized red/blue pixels overlapping the stereotype glyph union, report the stereotype as `ambiguous` or `paint-level residual`, not clean
|
|
86
|
+
- stereotype text color matching participant background contrast
|
|
87
|
+
- For participant colors, include:
|
|
88
|
+
- background fill color (hex value) on participant rect
|
|
89
|
+
- text color contrast (dark text on light bg, white text on dark bg)
|
|
90
|
+
- color application to both top and bottom participant boxes
|
|
91
|
+
- For participant groups, include:
|
|
92
|
+
- group name text presence and position (centered title bar)
|
|
93
|
+
- dashed outline rect enclosing grouped participants
|
|
94
|
+
- group bounds: leftmost to rightmost participant with margin
|
|
95
|
+
- group height extending to diagram bottom
|
|
96
|
+
- For inline comments, include:
|
|
97
|
+
- comment text presence and position (above the associated statement)
|
|
98
|
+
- comment Y offset from the message/fragment it belongs to
|
|
99
|
+
- fragment-level comments (e.g. `// comment 4` before `if(...)`) positioned above fragment header
|
|
100
|
+
- when all letters are `ambiguous` due to large positional offset (e.g. fragment comments at wrong X), the analyzer reports `box_dx` / `box_dy` from the bounding boxes instead of suppressing the measurement
|
|
101
|
+
- styled comment color application (e.g. `// [red] text`)
|
|
102
|
+
- For participant boxes, use the analyzer script output directly:
|
|
103
|
+
- Report `html_box`, `svg_box`, `dx`, `dy`, `dw`, `dh` from the script's `participant_boxes` section
|
|
104
|
+
- The script already applies stroke correction (`strokedElementOuterRect`) — do not re-measure with `browser_evaluate`
|
|
105
|
+
- For residual scopes, include:
|
|
106
|
+
- connected `html-only` and `svg-only` diff clusters from `#diff-panel canvas`
|
|
107
|
+
- cluster `size`, `bbox`, and `centroid`
|
|
108
|
+
- nearest scoped HTML and SVG targets at that position
|
|
109
|
+
- summaries that explain which element a remaining positional diff most likely belongs to
|
|
110
|
+
- live native diff panel confirmation before claiming a hotspot is real
|
|
111
|
+
- the largest confirmed live-panel `html-only` and `svg-only` clusters with approximate positions
|
|
112
|
+
- grouped summaries of where the panel's red and blue pixels are concentrated
|
|
113
|
+
- Do not report a residual hotspot as real if it is absent from the live `#diff-panel canvas`.
|
|
114
|
+
- Do not stop at totals like `HTML-only (44)` or `SVG-only (55)` when residuals matter; report where those pixels are.
|
|
115
|
+
- Each reported letter must be backed by:
|
|
116
|
+
- direct HTML-vs-SVG browser layout positions
|
|
117
|
+
- pixel-panel confirmation from `#diff-panel canvas`
|
|
118
|
+
- Participant stereotypes are first-class targets, not just part of `participant-box` or `participant-label`.
|
|
119
|
+
- If the evidence is weak or contradictory, keep the letter `ambiguous`.
|
|
120
|
+
|
|
121
|
+
## Known Analyzer Internals
|
|
122
|
+
|
|
123
|
+
### Arrow pairing by sequence number
|
|
124
|
+
|
|
125
|
+
The analyzer pairs arrows by sequence number (`text` field), not by label text (`pairText`). Calibrated on `repro-creation-return-arrow` (2026-03-24).
|
|
126
|
+
|
|
127
|
+
## Commands
|
|
128
|
+
|
|
129
|
+
Run from [../..](../..):
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
node scripts/analyze-compare-case.mjs --case async-2a
|
|
133
|
+
node scripts/analyze-compare-case.mjs --case async-2a --json
|
|
134
|
+
node scripts/analyze-compare-case.mjs --case async-2a --output-dir tmp/message-elements/async-2a
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## References
|
|
138
|
+
|
|
139
|
+
- Selector and pairing details: [references/selectors-and-keys.md](references/selectors-and-keys.md)
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface:
|
|
2
|
+
display_name: "Dia Scoring"
|
|
3
|
+
short_description: "Diagram label, number, and arrow offsets"
|
|
4
|
+
default_prompt: "Use $dia-scoring to measure message label, sequence-number, and arrow parity for a compare-case page."
|
|
5
|
+
|
|
6
|
+
policy:
|
|
7
|
+
allow_implicit_invocation: true
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
# Selectors And Keys
|
|
2
|
+
|
|
3
|
+
The analyzer uses these roots:
|
|
4
|
+
|
|
5
|
+
- HTML root: `#html-output .frame`, fallback `#html-output .sequence-diagram`
|
|
6
|
+
- SVG root: `#svg-output > svg`
|
|
7
|
+
|
|
8
|
+
Offset anchor:
|
|
9
|
+
|
|
10
|
+
- All reported offsets use the outermost frame root's top-left corner
|
|
11
|
+
- HTML side: `#html-output .frame`, fallback `#html-output .sequence-diagram`
|
|
12
|
+
- SVG side: `#svg-output > svg`
|
|
13
|
+
- Do not emit final `dx` / `dy` values from participant-local or other nested-container anchors
|
|
14
|
+
|
|
15
|
+
HTML label extraction:
|
|
16
|
+
|
|
17
|
+
- Normal messages: iterate `.interaction`, skip `.return`, `.creation`, and self interactions, then read `.message .editable-span-base`
|
|
18
|
+
- Self messages: `.self-invocation .label .editable-span-base`
|
|
19
|
+
- Returns: `.interaction.return .message .editable-span-base`, fallback `.interaction.return .name`
|
|
20
|
+
- Fragment conditions: `.fragment .segment > .text-skin-fragment:not(.finally)`, using only visible child spans when conditional branches are stacked
|
|
21
|
+
- Fragment sections:
|
|
22
|
+
- `.fragment.fragment-tcf .segment > .header.inline-block.bg-skin-frame.opacity-65`
|
|
23
|
+
- `.fragment.fragment-tcf .segment > .header.finally`
|
|
24
|
+
|
|
25
|
+
SVG label extraction:
|
|
26
|
+
|
|
27
|
+
- Normal messages: `g.message:not(.self-call) > text.message-label`
|
|
28
|
+
- Self messages: `g.message.self-call > text.message-label`
|
|
29
|
+
- Returns: `g.return > text.return-label`
|
|
30
|
+
- Fragment conditions: `g.fragment > text.fragment-condition`
|
|
31
|
+
- Fragment condition / section groups: `g.fragment > g` containing `text.fragment-section-label`
|
|
32
|
+
- texts starting with `[` are treated as `fragment-condition`
|
|
33
|
+
- other texts are treated as `fragment-section`
|
|
34
|
+
|
|
35
|
+
Pairing key:
|
|
36
|
+
|
|
37
|
+
- Semantic grouping is by `kind + text`
|
|
38
|
+
- Duplicate labels are paired by top-to-bottom order within that group
|
|
39
|
+
- Output key is:
|
|
40
|
+
- `kind`
|
|
41
|
+
- `text`
|
|
42
|
+
- `y_order`
|
|
43
|
+
- Fragment labels also include `owner=<fragment header>` in the human-readable summary when available
|
|
44
|
+
|
|
45
|
+
Per-letter scoring:
|
|
46
|
+
|
|
47
|
+
- Grapheme segmentation uses `Intl.Segmenter`, fallback `Array.from`
|
|
48
|
+
- Glyph boxes come from browser layout ranges, not whole-word centroids
|
|
49
|
+
- Numeric `dx` and `dy` are only emitted when direct layout evidence and diff-image evidence agree
|
|
50
|
+
|
|
51
|
+
Arrow extraction:
|
|
52
|
+
|
|
53
|
+
- HTML normal/return messages:
|
|
54
|
+
- line: direct child `svg` line strip inside `.message`
|
|
55
|
+
- head: direct child arrowhead `svg` inside `.message`
|
|
56
|
+
- HTML self messages:
|
|
57
|
+
- loop: painted geometry inside `svg.arrow`
|
|
58
|
+
- parts: outer loop path plus nested arrowhead path
|
|
59
|
+
- SVG normal messages:
|
|
60
|
+
- line: `line.message-line`
|
|
61
|
+
- head: `svg.arrow-head`
|
|
62
|
+
- SVG returns:
|
|
63
|
+
- line: `line.return-line`
|
|
64
|
+
- head: `polyline.return-arrow`
|
|
65
|
+
- SVG self messages:
|
|
66
|
+
- loop: painted geometry inside the outer `svg` under `g.message.self-call`
|
|
67
|
+
- parts: outer loop path plus nested arrowhead path
|
|
68
|
+
|
|
69
|
+
Arrow scoring:
|
|
70
|
+
|
|
71
|
+
- Arrows are keyed by sequence number when numbering is available, for example `arrow:1.2.3`
|
|
72
|
+
- Normal and return arrows are measured as one combined geometry item:
|
|
73
|
+
- line + arrow head together
|
|
74
|
+
- Self arrows are measured as one loop geometry item
|
|
75
|
+
- Self arrows use the union of the painted loop path and arrowhead path, not the outer viewport box
|
|
76
|
+
- Arrow output is endpoint-based, not box-centroid-based
|
|
77
|
+
- For normal and return arrows, report:
|
|
78
|
+
- `left_dx`
|
|
79
|
+
- `right_dx`
|
|
80
|
+
- `width_dx`
|
|
81
|
+
- For self arrows, also report:
|
|
82
|
+
- `top_dy`
|
|
83
|
+
- `bottom_dy`
|
|
84
|
+
- `height_dy`
|
|
85
|
+
- Do not report `dy` for horizontal message arrows
|
|
86
|
+
|
|
87
|
+
HTML sequence number extraction:
|
|
88
|
+
|
|
89
|
+
- Normal messages: `.interaction:not(.return):not(.creation):not(.self-invocation):not(.self) > .message > .absolute.text-xs`
|
|
90
|
+
- Self messages: `.interaction.self-invocation > .message .absolute.text-xs`
|
|
91
|
+
- Returns: `.interaction.return > .message > .absolute.text-xs`
|
|
92
|
+
- Fragments: `.fragment > .header > .absolute.text-xs`
|
|
93
|
+
|
|
94
|
+
SVG sequence number extraction:
|
|
95
|
+
|
|
96
|
+
- Normal messages: `g.message:not(.self-call) > text.seq-number`
|
|
97
|
+
- Self messages: `g.message.self-call > text.seq-number`
|
|
98
|
+
- Returns: `g.return > text.seq-number`
|
|
99
|
+
- Fragments: `g.fragment > text.seq-number`
|
|
100
|
+
|
|
101
|
+
## Participant Icon Extraction
|
|
102
|
+
|
|
103
|
+
## Participant Header Extraction
|
|
104
|
+
|
|
105
|
+
HTML participant header extraction:
|
|
106
|
+
|
|
107
|
+
- Participant root: `.participant[data-participant-id]`
|
|
108
|
+
- Participant box: outer border box from the participant root element
|
|
109
|
+
- Participant stereotype: `label.interface`, when present
|
|
110
|
+
- Participant label: last `.name` descendant, measured by glyph boxes
|
|
111
|
+
|
|
112
|
+
SVG participant header extraction:
|
|
113
|
+
|
|
114
|
+
- Participant root: `g.participant[data-participant]`
|
|
115
|
+
- Skip `g.participant-bottom`
|
|
116
|
+
- Participant box element: `:scope > rect.participant-box`
|
|
117
|
+
- Participant box measurement must use the painted outer bounds of the stroked rect, not the inset rect geometry
|
|
118
|
+
- Participant stereotype:
|
|
119
|
+
- prefer `:scope > text.stereotype-label`
|
|
120
|
+
- fallback: top-most direct `text` child above `text.participant-label`
|
|
121
|
+
- Participant label: `:scope > text.participant-label`
|
|
122
|
+
|
|
123
|
+
Participant stereotype pairing and scoring:
|
|
124
|
+
|
|
125
|
+
- Pair by participant name
|
|
126
|
+
- Validate text equality, for example `«BFF»`
|
|
127
|
+
- Measure stereotype offset by per-letter glyph boxes relative to the outermost frame root, not by participant-local anchors or whole-word box centroids
|
|
128
|
+
- Report:
|
|
129
|
+
- `letter_deltas`
|
|
130
|
+
- concise aggregate only when the per-letter evidence agrees
|
|
131
|
+
- Do not mark the stereotype clean from glyph boxes alone
|
|
132
|
+
- Also check the live `#diff-panel canvas` over the union of the HTML and SVG stereotype glyph boxes
|
|
133
|
+
- If localized red or blue pixels persist in that stereotype region while glyph-box deltas are `0/0`, classify it as `ambiguous` or `paint-level residual`
|
|
134
|
+
|
|
135
|
+
Participant box pairing and scoring:
|
|
136
|
+
|
|
137
|
+
- Pair by participant name
|
|
138
|
+
- Report `html_box` and `svg_box` with `x`, `y`, `w`, `h`
|
|
139
|
+
- Box `x` / `y` values are frame-anchor-relative
|
|
140
|
+
- Report box deltas:
|
|
141
|
+
- `dx`
|
|
142
|
+
- `dy`
|
|
143
|
+
- `dw`
|
|
144
|
+
- `dh`
|
|
145
|
+
|
|
146
|
+
HTML icon extraction:
|
|
147
|
+
|
|
148
|
+
- Participant root: `.participant[data-participant-id]`
|
|
149
|
+
- Top-row participant only: keep the top-most entry for each participant id
|
|
150
|
+
- Icon host: first child inside the centered participant row when it is an async icon host
|
|
151
|
+
- `[aria-description]`
|
|
152
|
+
- or contains `svg`
|
|
153
|
+
- or has `h-6` sizing class from `AsyncIcon`
|
|
154
|
+
- Icon box: union of painted SVG shapes when available, fallback to the host box
|
|
155
|
+
- Participant label: last `.name` descendant, measured by glyph boxes
|
|
156
|
+
|
|
157
|
+
SVG icon extraction:
|
|
158
|
+
|
|
159
|
+
- Participant root: `g.participant[data-participant]`
|
|
160
|
+
- Skip `g.participant-bottom`
|
|
161
|
+
- Icon element: `:scope > g[transform]`
|
|
162
|
+
- Icon box: union of painted shapes within that transformed group
|
|
163
|
+
- Participant label: `:scope > text.participant-label`
|
|
164
|
+
|
|
165
|
+
Icon pairing:
|
|
166
|
+
|
|
167
|
+
- Pair by participant name
|
|
168
|
+
- Only report participant icon rows for participants where at least one side has an icon
|
|
169
|
+
- Participant labels for icon-bearing participants are paired by participant name, not raw label text
|
|
170
|
+
|
|
171
|
+
Icon scoring:
|
|
172
|
+
|
|
173
|
+
- Absolute icon drift:
|
|
174
|
+
- `icon_dx`
|
|
175
|
+
- `icon_dy`
|
|
176
|
+
- Absolute icon drift is measured from the outermost frame anchor
|
|
177
|
+
- Relative icon drift against the participant label anchor:
|
|
178
|
+
- `relative_dx`
|
|
179
|
+
- `relative_dy`
|
|
180
|
+
- If there is no participant label on one side, use the participant box center as the anchor
|
|
181
|
+
- Report presence mismatch if one renderer has an icon and the other does not
|
|
182
|
+
- Diff confirmation is taken from `#diff-panel canvas`, scoped to the union of the HTML and SVG icon boxes
|
|
183
|
+
|
|
184
|
+
## Residual Scope Attribution
|
|
185
|
+
|
|
186
|
+
Residual scope extraction:
|
|
187
|
+
|
|
188
|
+
- Build connected clusters from the live `#diff-panel canvas` colors:
|
|
189
|
+
- red = `html-only`
|
|
190
|
+
- blue = `svg-only`
|
|
191
|
+
- Ignore green `match` and magenta `color diff` pixels for positional scoping
|
|
192
|
+
- Each cluster reports:
|
|
193
|
+
- `size`
|
|
194
|
+
- `bbox`
|
|
195
|
+
- `centroid`
|
|
196
|
+
- These panel-derived clusters are the source of truth for residual hotspots.
|
|
197
|
+
|
|
198
|
+
Residual scope candidates:
|
|
199
|
+
|
|
200
|
+
- HTML side:
|
|
201
|
+
- labels
|
|
202
|
+
- numbers
|
|
203
|
+
- arrows
|
|
204
|
+
- participant stereotypes
|
|
205
|
+
- participant labels
|
|
206
|
+
- participant icons
|
|
207
|
+
- participant boxes
|
|
208
|
+
- diagram root fallback
|
|
209
|
+
- SVG side:
|
|
210
|
+
- labels
|
|
211
|
+
- numbers
|
|
212
|
+
- arrows
|
|
213
|
+
- participant stereotypes
|
|
214
|
+
- participant labels
|
|
215
|
+
- participant icons
|
|
216
|
+
- participant boxes
|
|
217
|
+
- `rect.frame-border-inner`, fallback `rect.frame-border` / `rect.frame-box`
|
|
218
|
+
- diagram root fallback
|
|
219
|
+
|
|
220
|
+
Residual scope attribution:
|
|
221
|
+
|
|
222
|
+
- Pick the closest candidate to the cluster centroid on each side
|
|
223
|
+
- Prefer targets that contain the centroid
|
|
224
|
+
- Prefer more specific categories over large containers:
|
|
225
|
+
- `participant-icon`
|
|
226
|
+
- `participant-stereotype`
|
|
227
|
+
- `label`, `number`, `participant-label`
|
|
228
|
+
- `arrow`
|
|
229
|
+
- `participant-box`
|
|
230
|
+
- `frame-border`
|
|
231
|
+
- `diagram-root`
|
|
232
|
+
- Use cluster/target overlap and centroid distance as tie-breakers
|
|
233
|
+
|
|
234
|
+
Residual scope output:
|
|
235
|
+
|
|
236
|
+
- `residual_scopes`: all attributed clusters
|
|
237
|
+
- `residual_scope_summary`: top 20 concise lines for terminal use
|
|
238
|
+
- `residual_scope_html_only_top`: top 10 `html-only` clusters
|
|
239
|
+
- `residual_scope_svg_only_top`: top 10 `svg-only` clusters
|
|
240
|
+
- When answering from the live panel, also report:
|
|
241
|
+
- the largest red clusters from `#diff-panel canvas`
|
|
242
|
+
- the largest blue clusters from `#diff-panel canvas`
|
|
243
|
+
- approximate diagram-space positions or bounding boxes
|
|
244
|
+
- attributed HTML and SVG targets for those clusters
|
|
245
|
+
- a short grouped summary of where the red and blue pixels are concentrated
|
|
246
|
+
|
|
247
|
+
Live panel validation:
|
|
248
|
+
|
|
249
|
+
- Source of truth for residual hotspots is `#diff-panel canvas`
|
|
250
|
+
- Confirm the hotspot by reading the panel's actual red and blue pixels at that area
|
|
251
|
+
- If the panel shows no red or blue pixels there, do not report that hotspot as a real residual diff
|
|
252
|
+
- If the panel shows non-zero red or blue totals, do not stop at the totals alone; locate the dominant clusters and report them
|
|
253
|
+
- Do not build or rely on a separate screenshot-to-screenshot diff for pixel comparison when `#diff-panel canvas` is available on the page
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: land-pr
|
|
3
|
+
description: Merge a green PR and verify the npm release succeeds. Use when the user says "merge", "land", "land PR", "merge this", "ship to npm", "merge and release", or when a PR has passed CI and is ready to merge. This is a high-stakes action — merging to main triggers an automatic npm publish, so this skill verifies everything before and after merge.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Land PR
|
|
7
|
+
|
|
8
|
+
Merge a green PR to `main` and verify the npm release. In this repo, **merge = release** — every merge to main triggers automatic npm publish via GitHub Actions. Treat this as a production deployment, not a casual merge.
|
|
9
|
+
|
|
10
|
+
## Preconditions
|
|
11
|
+
|
|
12
|
+
Before merging, verify ALL of these:
|
|
13
|
+
|
|
14
|
+
1. **All CI checks green** — no pending or failed checks
|
|
15
|
+
2. **No pending reviews** — no requested changes outstanding
|
|
16
|
+
3. **Branch is up to date** — no merge conflicts with main
|
|
17
|
+
4. **PR is the right one** — confirm PR number with the user if ambiguous
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
gh pr view <PR_NUMBER> --json state,mergeable,statusCheckRollup,reviewDecision
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
If any precondition fails, report which one and stop. Do not attempt to fix — that's `babysit-pr`'s job.
|
|
24
|
+
|
|
25
|
+
## Steps
|
|
26
|
+
|
|
27
|
+
### 1. Verify readiness
|
|
28
|
+
|
|
29
|
+
Run the precondition checks above. If anything is not green, stop and report.
|
|
30
|
+
|
|
31
|
+
### 2. Squash merge
|
|
32
|
+
|
|
33
|
+
This repo uses squash merges. The merge commit message should summarize the PR.
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
gh pr merge <PR_NUMBER> --squash --auto
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Using `--auto` arms auto-merge so GitHub merges when all checks pass. If checks are already green, it merges immediately.
|
|
40
|
+
|
|
41
|
+
### 3. Wait for merge
|
|
42
|
+
|
|
43
|
+
If auto-merge was armed, wait for it:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
gh pr view <PR_NUMBER> --json state
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Poll until state is `MERGED`. Timeout after 5 minutes — if not merged by then, report and stop.
|
|
50
|
+
|
|
51
|
+
### 4. Monitor npm publish
|
|
52
|
+
|
|
53
|
+
After merge, the `Build, Test, npm Publish, and Deploy` workflow runs on `main`. Watch it:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
gh run list --repo mermaid-js/zenuml-core --branch main --limit 1 --json databaseId,status,conclusion
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Wait for the run to complete:
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
gh run watch <RUN_ID> --repo mermaid-js/zenuml-core
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 5. Verify npm publish
|
|
66
|
+
|
|
67
|
+
Check that the new version appeared on npm:
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
npm view @zenuml/core version
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Compare with the version before merge. If it didn't bump, check the `npm-publish` job logs for errors.
|
|
74
|
+
|
|
75
|
+
## Output
|
|
76
|
+
|
|
77
|
+
Report one of:
|
|
78
|
+
|
|
79
|
+
- **LANDED** — merged, published to npm as `@zenuml/core@<version>`
|
|
80
|
+
- **MERGE BLOCKED** — which precondition failed
|
|
81
|
+
- **PUBLISH FAILED** — merged but npm publish failed, with error details
|
|
82
|
+
|
|
83
|
+
## On publish failure
|
|
84
|
+
|
|
85
|
+
**Do NOT auto-rollback.** A failed npm publish after merge is a serious situation that needs human judgment. Report:
|
|
86
|
+
|
|
87
|
+
1. The merge commit SHA
|
|
88
|
+
2. The failing workflow run URL
|
|
89
|
+
3. The npm-publish job error output
|
|
90
|
+
4. Whether the version was partially published
|
|
91
|
+
|
|
92
|
+
The user decides whether to hotfix, revert, or investigate.
|
|
93
|
+
|
|
94
|
+
## Does NOT
|
|
95
|
+
|
|
96
|
+
- Fix CI (use `/babysit-pr`)
|
|
97
|
+
- Create PRs (use `/submit-branch`)
|
|
98
|
+
- Run local tests (use `/validate-branch`)
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: ship-branch
|
|
3
|
+
description: Ship the current branch from local validation through to npm release. Orchestrates validate-branch, submit-branch, babysit-pr, and land-pr in sequence. Use when the user says "ship", "ship it", "ship this branch", "ship to production", "release this", "get this to npm", or wants to go from local branch to published npm package in one command. Stops at the first failure with a clear report.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Ship Branch
|
|
7
|
+
|
|
8
|
+
Orchestrate the full path from local branch to npm release. This skill composes four sub-skills in sequence, stopping at the first failure.
|
|
9
|
+
|
|
10
|
+
## Flow
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
validate-branch → FAIL → stop, report
|
|
14
|
+
| PASS
|
|
15
|
+
submit-branch → FAIL → stop, report
|
|
16
|
+
| PR ready
|
|
17
|
+
babysit-pr → EXHAUSTED → stop, "CI blocked"
|
|
18
|
+
| GREEN
|
|
19
|
+
land-pr → BLOCKED → stop, report
|
|
20
|
+
| MERGED
|
|
21
|
+
land-pr → PUBLISH FAIL → alert, stop
|
|
22
|
+
| PUBLISHED
|
|
23
|
+
done
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Steps
|
|
27
|
+
|
|
28
|
+
### Step 1: Validate locally
|
|
29
|
+
|
|
30
|
+
Invoke `/validate-branch`. If it reports FAIL, stop and show the failure. The developer needs to fix locally before shipping.
|
|
31
|
+
|
|
32
|
+
### Step 2: Submit as PR
|
|
33
|
+
|
|
34
|
+
Invoke `/submit-branch`. If it reports FAILED, stop and show what went wrong (dirty worktree, push conflict, etc.).
|
|
35
|
+
|
|
36
|
+
On success, note the PR number and URL.
|
|
37
|
+
|
|
38
|
+
### Step 3: Get CI green
|
|
39
|
+
|
|
40
|
+
Invoke `/babysit-pr` with the PR number from Step 2. If it exhausts all 3 retry attempts, stop and report "CI blocked" with the babysit report.
|
|
41
|
+
|
|
42
|
+
On success, the PR is green and ready to merge.
|
|
43
|
+
|
|
44
|
+
### Step 4: Land and verify release
|
|
45
|
+
|
|
46
|
+
Invoke `/land-pr` with the PR number. If merge is blocked (pending reviews, failed checks), stop and report.
|
|
47
|
+
|
|
48
|
+
If merge succeeds but npm publish fails, alert immediately with the failure details. Do NOT auto-rollback.
|
|
49
|
+
|
|
50
|
+
On full success, report the new npm version.
|
|
51
|
+
|
|
52
|
+
## Rules
|
|
53
|
+
|
|
54
|
+
- **Each step is a hard boundary.** No step reaches back to retry a previous step.
|
|
55
|
+
- **No auto-rollback.** Stop and report on any failure. The developer decides next steps.
|
|
56
|
+
- **Only this skill calls babysit-pr.** Sub-skills never cross-call each other.
|
|
57
|
+
- **Confirm before merge.** Since merge = npm release, pause and confirm with the user before Step 4 unless they explicitly said "ship it" (indicating full automation is intended).
|
|
58
|
+
|
|
59
|
+
## Output
|
|
60
|
+
|
|
61
|
+
Final report:
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
## Ship Report: <branch-name>
|
|
65
|
+
- Validation: PASS
|
|
66
|
+
- PR: #<number> (<url>)
|
|
67
|
+
- CI: GREEN (attempt <N>)
|
|
68
|
+
- Merge: SQUASHED into main (<sha>)
|
|
69
|
+
- npm: @zenuml/core@<version> published
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Or on failure:
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
## Ship Report: <branch-name>
|
|
76
|
+
- Validation: PASS
|
|
77
|
+
- PR: #<number>
|
|
78
|
+
- CI: BLOCKED after 3 attempts
|
|
79
|
+
- Stopped at: babysit-pr
|
|
80
|
+
- Details: <failure summary>
|
|
81
|
+
```
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: submit-branch
|
|
3
|
+
description: Push the current branch and create or reuse a PR on mermaid-js/zenuml-core. Use when the user says "submit", "create PR", "push and PR", "open a pull request", "submit branch", or wants to publish their work as a PR without merging. Does not fix CI or merge — those are separate skills.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Submit Branch
|
|
7
|
+
|
|
8
|
+
Publish the current branch as a pull request on `mermaid-js/zenuml-core`. Reuses an existing PR if one already exists for this branch.
|
|
9
|
+
|
|
10
|
+
## Preconditions
|
|
11
|
+
|
|
12
|
+
The worktree must be in a committable state:
|
|
13
|
+
|
|
14
|
+
- **Clean worktree** — nothing to commit, just push. This is the ideal case.
|
|
15
|
+
- **Scoped changes** — all modified files relate to the current work. Stage and commit them.
|
|
16
|
+
- **Mixed/unrelated changes** — modified files include unrelated work. **Stop and ask the user** which files to include. Never auto-commit a mixed worktree.
|
|
17
|
+
|
|
18
|
+
To check: `git status` and review the file list. If in doubt, ask.
|
|
19
|
+
|
|
20
|
+
## Steps
|
|
21
|
+
|
|
22
|
+
### 1. Check worktree state
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
git status
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
If dirty, evaluate whether changes are scoped (all related to the branch's purpose) or mixed. If mixed, stop and ask.
|
|
29
|
+
|
|
30
|
+
If scoped, stage the relevant files and commit with a descriptive message. Follow the repo's commit conventions (one-line message, Co-Authored-By trailer).
|
|
31
|
+
|
|
32
|
+
### 2. Push
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
git push -u origin <branch-name>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Use regular push — never force-push. If push fails due to upstream changes, report the conflict and stop.
|
|
39
|
+
|
|
40
|
+
### 3. Create or reuse PR
|
|
41
|
+
|
|
42
|
+
Check if a PR already exists:
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
gh pr view --json number,title,url 2>/dev/null
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
If a PR exists, report its URL and stop — nothing more to do.
|
|
49
|
+
|
|
50
|
+
If no PR exists, create one:
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
gh pr create --title "<concise title>" --body "$(cat <<'EOF'
|
|
54
|
+
## Summary
|
|
55
|
+
<bullet points>
|
|
56
|
+
|
|
57
|
+
## Test plan
|
|
58
|
+
<what was tested>
|
|
59
|
+
EOF
|
|
60
|
+
)"
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
The PR targets `main` on `mermaid-js/zenuml-core`.
|
|
64
|
+
|
|
65
|
+
## Output
|
|
66
|
+
|
|
67
|
+
Report:
|
|
68
|
+
|
|
69
|
+
- **SUBMITTED** — PR number, URL, and branch name
|
|
70
|
+
- **FAILED** — what went wrong (dirty worktree, push conflict, gh error)
|
|
71
|
+
|
|
72
|
+
## Does NOT
|
|
73
|
+
|
|
74
|
+
- Run tests or lint (use `/validate-branch` for that)
|
|
75
|
+
- Fix CI failures (use `/babysit-pr` for that)
|
|
76
|
+
- Merge the PR (use `/land-pr` for that)
|