# Update Graph UI

> 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.

- Skill: `pipelex/update-graph-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add pipelex/update-graph-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pipelex/update-graph-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: pipelex (https://skillmd.com/u/pipelex)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/pipelex/update-graph-ui

---


# 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

```bash
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:

```bash
npm view @pipelex/mthds-ui version
```

Confirm with the user.

### 3. Verify the target is reachable on jsDelivr

```bash
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

```bash
.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

```bash
.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

```bash
make agent-check
```

### 7. Smoke test the rendered HTML (recommended)

Generate one graph and open it in a browser:

```bash
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.