Bundle of follow-ups to the HTML/SVG fence renderer landed earlier in
this PR. Each item came out of either the parallel reviewer pass or a
manual Playwright probe against the live Studio with an Anthropic
provider attached.
Sanitizer:
- filter, mask, and clip-path are now in FORBID_ATTR. They accept
url(https://...) values and the CSS engine still fetches that URL
when the SVG renders, which previously slipped past the FORBID
list.
- href and xlink:href are no longer blanket-forbidden; they survive
only when the value is a same-document fragment (href="#id"),
which is what textPath, gradient, and use refs need. External
schemes are dropped via a uponSanitizeAttribute hook so a beacon
href cannot make it through.
- The hook approach replaces DOMPurify's ALLOWED_URI_REGEXP, which
also filtered presentation attrs (cx, cy, r, fill, width, height)
and rendered circles with r=0.
SVG preview:
- Inner stylesheet caps both max-width AND max-height so a square
viewBox (200x200) scaled to the container width no longer
overflows the fixed-height iframe and clips at the bottom.
HTML preview:
- srcdoc carries a defense-in-depth meta-CSP (default-src 'none',
connect-src 'none', frame-src 'none', img-src data: blob:,
script-src 'self' 'unsafe-inline', style-src 'self' 'unsafe-inline').
The host CSP already blocks inline scripts; this layer also blocks
network egress, nested iframes, and form submission so a future
host-CSP relaxation does not silently turn the preview into an
exfiltration channel.
- Sandbox grows allow-modals so alert/confirm/prompt are not
silently no-oped if the host CSP ever permits inline scripts.
- Pop-out spacer now uses the live HTML iframe height instead of
hardcoded DEFAULT_PREVIEW_HEIGHT, so popping out a short preview
does not leave a 500px hole in the chat bubble.
- autoHeight resets on source change so a long-running session that
swaps from a tall demo to a short one no longer keeps the previous
iframe size during the gap before the new doc posts its height.
Streaming and a11y:
- parseIncompleteCodeFence parses an in-flight open fence (no closing
backticks yet). markdown-text falls back to it when streaming is
incomplete, so the advertised isIncomplete -> Code-tab-lock path
actually runs.
- Tab buttons gain aria-controls / aria-labelledby wiring and a
roving tabindex so the WAI-ARIA tab pattern is complete.
- Pop-out modal gets role="dialog" and aria-modal.
Tooling:
- vitest now runs in the Studio Frontend CI workflow so sanitizer or
renderer regressions block the gate.
- test-setup shims URL.createObjectURL / revokeObjectURL for jsdom in
case future iframe work needs it.
- frame-src in the host CSP is now declared explicitly as 'self' so
a future change that loosens it leaves a visible diff for review.
Tests added: ARIA wiring, SVG height fit, srcdoc meta-CSP shape,
incomplete-fence helper, filter/mask/clip-path attr stripping, safe
fragment-href survival, external-href rejection. Vitest passes 21/21,
tsc -b and vite build are clean.
158 lines
6.6 KiB
YAML
158 lines
6.6 KiB
YAML
# SPDX-License-Identifier: AGPL-3.0-only
|
|
# Copyright 2026-present the Unsloth AI Inc. team. All rights reserved.
|
|
|
|
# Frontend PR gate: lockfile freshness, typecheck, build, and a bundle grep
|
|
# that catches the 2026.5.1 chat-history regression at the JS level.
|
|
#
|
|
# biome runs as non-blocking for now: the codebase currently has accumulated
|
|
# ~470 errors and ~1650 warnings against the existing biome config. Surfacing
|
|
# the count in CI lets us drive it down without forcing a fleet-wide cleanup
|
|
# in the same PR. Drop `continue-on-error` once that number is zero.
|
|
|
|
name: Frontend CI
|
|
|
|
on:
|
|
pull_request:
|
|
paths:
|
|
- 'studio/frontend/**'
|
|
- 'scripts/check_frontend_dep_removal.py'
|
|
- 'tests/studio/test_frontend_dep_removal.py'
|
|
- '.github/workflows/studio-frontend-ci.yml'
|
|
push:
|
|
branches: [main, pip]
|
|
|
|
concurrency:
|
|
group: ${{ github.workflow }}-${{ github.ref }}
|
|
cancel-in-progress: true
|
|
|
|
permissions:
|
|
contents: read
|
|
|
|
jobs:
|
|
build:
|
|
name: Frontend build + bundle sanity
|
|
runs-on: ubuntu-latest
|
|
timeout-minutes: 10
|
|
defaults:
|
|
run:
|
|
working-directory: studio/frontend
|
|
steps:
|
|
- uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
|
|
with:
|
|
persist-credentials: false
|
|
|
|
# FIXME: drop this step once @assistant-ui/* and assistant-stream
|
|
# leave 0.x -- on 1.x, caret ranges are conventional. Until then,
|
|
# every 0.minor on this surface is a SemVer-major (this is exactly
|
|
# how 2026.5.1 shipped a broken chat runtime: ^0.12.19 quietly
|
|
# resolved to 0.12.28).
|
|
- name: '@assistant-ui must be pinned exactly (no caret/tilde)'
|
|
working-directory: ${{ github.workspace }}
|
|
run: |
|
|
set -e
|
|
if grep -nE '"(@assistant-ui/[a-z-]+|assistant-stream)":[[:space:]]*"[\^~]' studio/frontend/package.json; then
|
|
echo "::error file=studio/frontend/package.json::These packages must be pinned to exact versions until they leave 0.x. Drop the leading ^ or ~."
|
|
exit 1
|
|
fi
|
|
echo "All assistant-ui packages are pinned exactly."
|
|
|
|
- uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
|
|
with:
|
|
node-version: '22'
|
|
|
|
# Run the structural lockfile scan BEFORE npm ci. A compromised
|
|
# tarball runs its `prepare` / `postinstall` during `npm ci`,
|
|
# so any catch has to fire upstream of that. The scanner is
|
|
# pure-Python read-only; safe to call ahead of every install.
|
|
- name: Lockfile supply-chain audit (pre-install scan)
|
|
working-directory: ${{ github.workspace }}
|
|
run: python3 scripts/lockfile_supply_chain_audit.py
|
|
|
|
- name: Lockfile must agree with package.json (npm ci is strict)
|
|
# Lifecycle scripts (esbuild native-binary postinstall, etc.) are
|
|
# required for `vite build`. The pre-install lockfile structural
|
|
# audit (lockfile_supply_chain_audit.py) is the practical defence
|
|
# against the npm postinstall-dropper class -- it fires BEFORE any
|
|
# tarball runs, on the injection pattern itself rather than an
|
|
# advisory-DB lookup.
|
|
run: npm ci --no-fund --no-audit
|
|
|
|
- name: npm ci must not have modified the working tree
|
|
working-directory: ${{ github.workspace }}
|
|
run: |
|
|
if ! git diff --quiet -- studio/frontend; then
|
|
echo "::error::npm ci modified files; commit the updated lockfile"
|
|
git status -- studio/frontend
|
|
exit 1
|
|
fi
|
|
|
|
# Catch the common foot-gun: a dep dropped from package.json that is
|
|
# still imported somewhere. The script walks the lockfile dep graph
|
|
# from the new top-level deps and only counts top-level node_modules
|
|
# paths as valid resolution targets for bare src/ imports.
|
|
#
|
|
# actions/checkout uses fetch-depth: 1 by default, so the base branch
|
|
# is not available locally. Fetch the single base commit with an
|
|
# explicit refspec so origin/<base> is reliably created (a bare
|
|
# `git fetch origin <ref>` only updates FETCH_HEAD in some configs).
|
|
- name: Dependency removal safety check
|
|
if: github.event_name == 'pull_request'
|
|
working-directory: ${{ github.workspace }}
|
|
run: |
|
|
git fetch --no-tags --depth=1 origin \
|
|
"${{ github.base_ref }}:refs/remotes/origin/${{ github.base_ref }}"
|
|
python3 scripts/check_frontend_dep_removal.py \
|
|
--base "origin/${{ github.base_ref }}" \
|
|
--enumerate-dead
|
|
python3 tests/studio/test_frontend_dep_removal.py
|
|
|
|
- name: Typecheck
|
|
run: npm run typecheck
|
|
|
|
- name: Frontend unit tests (vitest)
|
|
# New vitest suite covers the HtmlSvgRenderer iframe sandbox /
|
|
# CSP / sanitizer contract. Run it before the build so a
|
|
# sanitizer regression fails the gate even if the bundle still
|
|
# builds clean.
|
|
run: npm run test
|
|
|
|
- name: Build
|
|
run: npm run build
|
|
|
|
- name: Built bundle must not contain Studio's unstable_Provider call site
|
|
run: |
|
|
set -e
|
|
JS=$(ls dist/assets/index-*.js | head -1)
|
|
HITS=$(grep -c 'unstable_Provider:' "$JS" || echo 0)
|
|
echo "main bundle: $JS"
|
|
echo "unstable_Provider: hits=$HITS (assistant-ui internals contribute up to 3)"
|
|
if [ "$HITS" -gt 3 ]; then
|
|
echo "::error file=studio/frontend/src/features/chat/runtime-provider.tsx::Studio bundle still passes unstable_Provider through useRemoteThreadListRuntime; this is the 2026.5.1 chat-history regression. Pass adapters directly into useLocalRuntime instead."
|
|
exit 1
|
|
fi
|
|
|
|
- name: Bundle size budget (75 MB)
|
|
run: |
|
|
SIZE=$(du -sb dist | cut -f1)
|
|
BUDGET=$((75 * 1024 * 1024))
|
|
echo "dist size: $SIZE bytes ($((SIZE/1024/1024)) MB), budget: $BUDGET bytes (75 MB)"
|
|
if [ "$SIZE" -gt "$BUDGET" ]; then
|
|
echo "::error::studio/frontend/dist/ exceeded the 75 MB budget. Drop dead deps (e.g. the unused next dep) or split chunks."
|
|
exit 1
|
|
fi
|
|
|
|
- name: Biome (non-blocking until accumulated drift is cleared)
|
|
continue-on-error: true
|
|
run: npm run biome:check
|
|
|
|
- name: Upload built dist
|
|
# Always upload so a green run is reviewable too -- the dist
|
|
# output catches "tests passed but bundle changed unexpectedly"
|
|
# regressions that would be invisible if we only kept artifacts
|
|
# on failure.
|
|
if: always()
|
|
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
|
|
with:
|
|
name: studio-frontend-dist
|
|
path: studio/frontend/dist
|
|
retention-days: 3
|