Skip to main content
ClaudeWave
Skill909 estrellas del repoactualizado today

update-graph-ui

>

Instalar en Claude Code
Copiar
git clone --depth 1 https://github.com/Pipelex/pipelex /tmp/update-graph-ui && cp -r /tmp/update-graph-ui/.claude/skills/update-graph-ui ~/.claude/skills/update-graph-ui
Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

SKILL.md

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