update-graph-ui - SKILL.md Agent Skill

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.