| name | update-graph-ui |
| description | Bump the pinned `@pipelex/mthds-ui` (and `elkjs`) version that the generated ReactFlow HTML loads from jsDelivr. Re-fetches the bundle, recomputes SRI hashes, and updates the Python constants in `standalone_assets.py`. Use when user says "update graph ui", "bump mthds-ui", "update graph viewer", "new version of mthds-ui", or any variation of updating the CDN-pinned graph viewer assets.
|
| user_invocable | true |
Update Graph UI Assets (CDN + SRI)
Bump the pinned @pipelex/mthds-ui version that the generated ReactFlow HTML
loads from cdn.jsdelivr.net, refresh the Subresource Integrity hashes, and
verify everything still renders.
There is no vendored bundle anymore. Assets are loaded from jsDelivr at view
time; the only things stored in this repo are the version strings and the
matching sha384 SRI hashes in
pipelex/graph/reactflow/standalone_assets.py.
Prerequisites
curl, openssl, and npm on PATH (used by the refresh command, npm
version lookup, and the sanity checks below).- The target
@pipelex/mthds-ui version must already be published on npm
with dist/standalone/graph-viewer.{js,css} in the tarball. If it
isn't, jsDelivr will 404 — fix the publish in the mthds-ui repo first.
Workflow
1. Check current pin
grep -E 'MTHDS_UI_VERSION|ELKJS_VERSION' pipelex/graph/reactflow/standalone_assets.py
Report the currently pinned versions.
2. Pick the target version
Latest published version on npm:
npm view @pipelex/mthds-ui version
Confirm with the user.
3. Verify the target is reachable on jsDelivr
curl -fsI https://cdn.jsdelivr.net/npm/@pipelex/mthds-ui@<NEW_VERSION>/dist/standalone/graph-viewer.js
curl -fsI https://cdn.jsdelivr.net/npm/@pipelex/mthds-ui@<NEW_VERSION>/dist/standalone/graph-viewer.css
Both must return HTTP/2 200. If either 404s, the npm publish for that
version did not include the standalone bundle — stop and ask the maintainer
to re-publish properly before proceeding.
4. Refresh the SRI hashes
.venv/bin/pipelex-dev refresh-graph-ui-sri --mthds-ui-version <NEW_VERSION>
This re-fetches each URL, computes sha384, and rewrites the constants in
pipelex/graph/reactflow/standalone_assets.py.
To rotate elkjs at the same time, pass --elkjs-version <NEW_ELKJS_VERSION>.
5. Run graph tests
.venv/bin/pytest tests/unit/pipelex/graph/reactflow tests/unit/pipelex/graph/test_reactflow_html.py -q
All tests must pass. These verify:
- CDN constants are well-formed (
sha384-… decoding to 48 bytes, URLs pinned to declared versions).
- Generated HTML references
cdn.jsdelivr.net with the new integrity hashes.
- HTML structure (DOCTYPE, root div, embedded JSON data scripts) is intact.
6. Run full quality checks
make agent-check
7. Smoke test the rendered HTML (recommended)
Generate one graph and open it in a browser:
make serve-graph
In DevTools → Network, confirm three external requests to cdn.jsdelivr.net
succeed with no Failed to find a valid digest in the 'integrity' attribute
errors in the console.
8. Report
Tell the user:
- Previous and new versions for
mthds-ui (and elkjs if bumped).
- New SRI hashes.
- Test results.
- Remind to commit
pipelex/graph/reactflow/standalone_assets.py and any
CHANGELOG entry.
