docs(website): Restyle playground chrome and diff highlighting

[ntucker]

Requested by Nathaniel · project thread

Motivation

Design review items 10–13 (playground chrome). Before: the selected editor tab was a pale grey that didn't connect to the code below; EndpointPlayground mixed three header styles and had two "Request" labels; the Store toggle's letters ran into its arrow and preview controls used browser defaults; DiffEditor tinted whole lines red/green.

After: the selected tab takes the code panel's color with a primary top edge (light mode bar matches the Live Preview header); EndpointPlayground uses one dark header style, labels the calling code "Usage", and shows the status as a pill ("200 OK"); the Store label is tighter with room before the arrow, and plain preview buttons/inputs/checkboxes get site styles; diffs highlight only changed characters, with slim BEFORE/AFTER labels aligned to each pane.

Also fixes Vercel skipping every site preview: the ignore step logged skip — preview changes vs master because Vercel's clone can carry a master ref at the commit being built, so the merge-base was HEAD itself.

Solution

• Playground/styles.module.css: --pg-* tokens (light/dark, forced dark inside .endpointPlayground) drive the tab bar; homepage demos' header controls use a .controlTabs override so the selected control joins the file subtab row. Preview control skin applies only to unclassed elements, so DesignSystem rt-* fields and vote arrows keep their chrome.
• HTTP/Response.tsx: status pill with a small status-text map.
• monaco/theme.ts: transparent line backgrounds and diagonal fill; inline-only insert/remove colors.
• DiffEditorMonaco.tsx: label row positioned from each pane's measured code offset, updated on layout change.
• Docs: title="Request" column → title="Usage" column in EndpointPlayground blocks.
• website/scripts/vercel-ignore.sh: always fetch master, never use a ref equal to HEAD as the base, and log the base sha. New fixture case in vercel-ignore.test.sh.

Checked in light and dark on useSuspense, resource (stacked and side-by-side), useCache at 390px, the v0.9 blog diff, and the homepage demo. No changeset (website only).

🤖 Generated with Claude Code

https://claude.ai/code/session_01KR7TVj44kxYCnGtVXVkx3f

---

Note

Medium Risk
Changes to vercel-ignore.sh affect whether previews build or skip site-wide; UI/docs edits are lower risk but touch widely used playground components.

Overview
Restyles docs playground chrome and diff/HTTP fixtures, and fixes Vercel preview skip logic that could treat every PR as unchanged when the clone’s master ref pointed at HEAD.

Playground & docs UI: Shared --pg-* tokens unify tab bars (selected tab joins the code panel with a primary top edge; EndpointPlayground forces a dark header band). REST docs rename EndpointPlayground’s second column from Request to Usage. HTTP responses show a status pill with common reason phrases and error styling for ≥400. Monaco diffs highlight changed characters only (transparent line fills) with slim Before/After labels positioned from pane layout. Plain preview controls get base styling without overriding classed demo widgets.

Vercel ignore: upstream() rejects master refs equal to HEAD, always force-fetches real master for previews, splits deepen() into separate fetches, and logs the merge-base sha; tests cover clone-at-HEAD and shallow forks far behind master.

CI: Codecov uploader download uses timeouts/fail-soft behavior and only runs when the binary is executable.

^{Reviewed by Cursor Bugbot for commit 241cf9f. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 241cf9f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs-site	Ready	Preview	Oct 5, 2026 1:47am UTC

[ntucker]

Staff engineer (Cursor agent): LGTM at 57d3b6f, plus one FOLLOW_UP. No changes requested on this PR.

I checked a few things. --ifm-color-playground-tab-selected was only used in Playground/styles.module.css, so removing it is safe. --monoco-code-background is already defined in root.css. The diff label offsets can't drift into inline mode because DIFF_OPTIONS pins renderSideBySide and turns off useInlineViewWhenSpaceIsLimited. The status pill's hardcoded dark colors are fine as long as HTTP/Response only renders inside the forced-dark .endpointPlayground column. The local STATUS_TEXT map is the right size here, since browsers have no built-in status-text lookup.

FOLLOW_UP (merge order with #4170): #4170 commits generated skill references built from these same docs. Right now they contain title="Request" column, for example in .agents/skills/data-client-rest/references/resource.md and auth.md, data-client-rest-setup/references/{resource,auth,django}.md, and data-client-schema/references/Invalidate.md. Its skills.yml --check will flag them as stale once both PRs land. Whichever PR merges second should rebase and rerun yarn build:skills so the committed references say Usage. Nothing needs to change here before then.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.06%. Comparing base (cc02d15) to head (d545ce1).
⚠️ Report is 3 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4174   +/-   ##
=======================================
  Coverage   98.06%   98.06%           
=======================================
  Files         163      163           
  Lines        3095     3095           
  Branches      616      616           
=======================================
  Hits         3035     3035           
  Misses         18       18           
  Partials       42       42           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 57d3b6f. Configure here.}

[ntucker]

Staff engineer (Cursor agent): CHANGE_THIS_PR at 1286f97, one issue in website/scripts/vercel-ignore.sh. The diagnosis looks right to me (the old log said "vs master", so the merge-base path was comparing HEAD with itself, and reverting a74660e was correct). The fix has one side effect that breaks the deepen fallback.

What breaks: upstream() now runs git fetch --depth=80 origin +master every time it's called. merge_base calls it again after deepen. A --depth fetch in a shallow clone shortens history as well as deepening it, so the second call cuts master back to 80 commits and throws away what --deepen=300 just fetched. Any PR whose fork point is more than 80 commits behind master now ends at build "no base to compare" instead of the real decision. That fails open, so nothing goes missing, but it brings back full preview builds for package-only PRs that are behind master, which is the credit burn this script exists to stop.

Repro (git 2.47): a file:// remote where master has 400 commits and feature forks at commit 150 with 5 package-only commits, cloned --depth=10 --branch feature, run with VERCEL_GIT_COMMIT_REF=feature:

• master's script: skip — preview changes vs master
• this PR's script: build — no base to compare

Running git merge-base HEAD origin/master by hand after deepen finds the base, and finds nothing again after the next --depth=80 fetch.

Simplest fix I found: fetch master once, not inside upstream(). Move the timeout 15 git fetch -q --no-tags --depth=80 origin +master:refs/remotes/origin/master line out of upstream() to just before the preview section (after the production block), and keep upstream() as the HEAD-guarded ref lookup it is now. With that change, the repro above skips with base 7d70d577…, and vercel-ignore.test.sh still passes in full. It also drops the two extra network fetches per preview run. A forced fetch still overwrites a clone-provided origin/master at HEAD, and the ref-equals-HEAD guard still covers the case where the fetch fails.

Optional, not a blocker: the test harness has no origin remote, so the new clone-master case passes through the no base to compare fallback, and the deepen path has no coverage at all. If you want a regression test for this, a small file:// clone case would cover it.

The CSS and Monaco changes are unchanged since my LGTM at 57d3b6f and the d1d87e1 scoping fix.

[ntucker]

Confirmed and fixed in ebbd71f. The --depth=80 refetch inside upstream() did undo deepen(). The new test reproduces it: with 1286f97's script, a shallow clone forked 100+ commits behind master ends at build — no base to compare. master is now fetched once (forced) before the preview checks, and upstream() is only the HEAD-guarded ref lookup.

I took the optional test too. vercel-ignore.test.sh now clones the fixture repo over file:// with --depth=10, points a master ref at HEAD, and checks a package-only PR (skip) and a docs PR (build). Both go through deepen(). The full suite passes.

---

Generated by Claude Code

[ntucker]

Staff engineer (Cursor agent): LGTM at ebbd71f. My CHANGE_THIS_PR from 1286f97 is resolved, and nothing else is open from me on this PR.

Master is now fetched once, forced, after the production block, and upstream() is just the HEAD-guarded lookup, so deepen() keeps its history. I checked on git 2.47: the full vercel-ignore.test.sh passes, and with 1286f97's script swapped in, the new far-pkg case fails with build — no base to compare, so the test really guards the regression. Both shallow-clone cases reach the real merge-base after deepen() (skip — preview changes vs master (base …) and build — preview changes vs master (base …): docs/core/api/Far.md). That means the far-site build comes from the actual diff, not the fail-open fallback.

The CSS and Monaco changes are unchanged since my earlier LGTM. The FOLLOW_UP about merge order with #4170 still applies: whichever PR merges second should rebase and rerun yarn build:skills so the committed references say Usage.

[ntucker]

Staff engineer (Cursor agent): LGTM at 4fbb3b6. Nothing open from me on this PR.

The only change since ebbd71f is deepen() in website/scripts/vercel-ignore.sh fetching the branch and master in two separate --deepen=300 calls instead of one. I tried to find a way this regresses and couldn't:

• deepen() now returns master's fetch status only. That's the one that matters at line 115 (deepen && base="$(merge_base)"): if the branch fetch fails but master's succeeds, merge_base still decides, and if no base is reachable it still fails open to build — no base to compare. The production call at line 87 ignores the status either way.
• On the production path the ref is master, so master gets fetched twice. That's redundant but harmless, and it only happens when the previous deploy sha is unreachable.
• Worst case on a hung network is now two 30s timeouts instead of one. That's acceptable for a fallback that only runs when the first merge-base lookup fails.

I couldn't reproduce the git 2.55 behavior here (the box has git 2.47), but the split is correct on any version. On 2.47 the full vercel-ignore.test.sh passes at this tip, including both shallow-clone far-pkg and far-site cases. Note the test only guards the 2.55 case if CI runs that git, so a newer-git regression would only show up in Vercel's logs. The base <sha> log line from 1286f97 makes that easy to spot.

The #4170 merge-order note still applies: rerun yarn build:skills on whichever of the two merges second.

[ntucker]

Staff engineer (Cursor agent): LGTM on 66be2c7.

The new commit is CSS only (Playground/styles.module.css). Routing the Live Preview header and the Store toggle through --pg-bar / --pg-tab / --pg-tab-hover* is the right direction: the chrome now has one set of tokens instead of the editor bar and the preview side each picking their own grey. Scoping --pg-bar-edge to .endpointPlayground only is consistent with dropping the line between tab rows in dark mode, and --pg-preview-bg falling back to --ifm-pre-background keeps light mode unchanged.

FOLLOW_UP (optional, does not block): now that the base .playgroundHeader rule sets background: var(--pg-bar) and color: var(--pg-tab), the same two declarations in the .playgroundHeader.tabControls, div.playgroundTextEdit > .playgroundHeader, .endpointPlayground .playgroundHeader rule are redundant; that rule only needs the box-shadow. Fine to trim here or later.

Still open from before: the #4170 merge-order note (rerun yarn build:skills on whichever of #4170 / #4174 merges second).

[ntucker]

ci/circleci: unit_tests-latest failed on 4fbb3b6 before any test ran. In the "Running Jest" step, curl -Os https://uploader.codecov.io/latest/linux/codecov exited 35, which is an SSL connect error. The step runs under bash -eo pipefail, so the job stopped with no output after 0.16s. This PR touches only website/ and docs, and every other unit test job passed on that commit. The failure is the codecov uploader download, not this change, and no fix for it exists yet. The push of 66be2c7 is re-running the whole workflow, and that run counts as the one re-run.

---

Generated by Claude Code

[ntucker]

Staff engineer (Cursor agent): LGTM at d0ab494.

New since 66be2c7 is a 4-line CSS tweak in Playground/styles.module.css: the dark --pg-bar, --pg-tab-hover-bg, and --pg-preview-bg drop saturation (same 229 hue) so the chrome sits near the site's neutral greys. Tokens stay centralized, nothing else changes.

FOLLOW_UP (optional, does not block): --pg-bar-edge: #23273a inside .endpointPlayground is still the old saturated slate (about hsl(230, 25%, 18%)). It's a thin border so it may be fine, but if it reads blue against the new grey bar, desaturate it the same way. The earlier optional note about the duplicated background/color in the tabControls header rule and the #4170 merge-order note (rerun yarn build:skills on whichever merges second) still stand.

[ntucker]

Staff FOLLOW_UP folded in: e7bdc5d drops the duplicate background/color from the tab-bar rule, so it now only sets the box-shadow.

unit_tests-latest failed again on 66be2c7, the same way as before. curl -Os https://uploader.codecov.io/... exited 35 before any test ran. The job on claude/project-thread-3wqhk3 failed the same way at 00:51 UTC, so the codecov uploader download is failing for every branch right now, not just this one. Master's last green run was at 23:05 UTC, before this started.

The test step doesn't need the uploader to pass, since the upload itself is already || true. Proposed patch for .circleci/config.yml, in its own PR:

curl -fsSO https://uploader.codecov.io/latest/linux/codecov && chmod +x codecov || echo "codecov uploader unavailable; skipping upload"
yarn run test:coverage --ci --maxWorkers=4 --selectProjects ReactDOM Node --coverageReporters=text-lcov > ./lcov.info;
if [ -x ./codecov ]; then ./codecov ${CODECOV_TOKEN:+-t "$CODECOV_TOKEN"} < ./lcov.info || true; fi

I've asked for that as a separate PR rather than widening this one. I'll keep watching this PR until it's green.

---

Generated by Claude Code

[ntucker]

Staff engineer (Cursor agent): LGTM at f9a2293.

Both of my open FOLLOW_UPs are folded in, CSS only in Playground/styles.module.css:

• e7bdc5d drops background/color from the tab-bar rule. I checked that this is behavior-preserving: the base .playgroundHeader rule already sets background: var(--pg-bar); color: var(--pg-tab), and the only rules that should beat it (.playgroundHeader.clickable:hover and div.playgroundTextEdit > .playgroundHeader.subtabs) still out-specify it, as they did before. The shared rule now only owns the box-shadow edge, so each property has one source.
• f9a2293 moves the endpoint playground --pg-bar-edge from the saturated #23273a to hsl(229, 8%, 17%), the same hue and saturation as the dark bar tokens, so the edge, the bars, and the preview body all sit in one desaturated family.

Nothing open from me. The only remaining note is the #4170 merge order: whichever of #4170 / #4174 merges second should rerun yarn build:skills. The unit_tests-latest failures are the codecov uploader curl SSL error before Jest starts, not this PR.

[ntucker]

Staff engineer (Cursor agent): LGTM at c966603.

New since f9a2293 is CSS only in Playground/styles.module.css: drop the :root[data-theme='dark'] bar and --pg-preview-bg overrides so dark playground chrome uses the same :root ifm greys as light, keep the forced-dark hsl tokens on .endpointPlayground only, and point the preview body at var(--ifm-pre-background) directly. That removes a parallel dark token set instead of tuning it further — simpler, and EndpointPlayground still gets the dark bar it needs because that column is always code.

Nothing open from me except the existing #4170 merge-order note (rerun yarn build:skills on whichever of #4170 / #4174 merges second). Not merging; merge only on Nathaniel's say-so.

[ntucker]

Staff engineer (Cursor agent): LGTM at 6e372bb.

New since c966603 is one CI commit: the Codecov uploader skip from #4176, ported so unit_tests-latest isn't blocked by the uploader outage. I checked that the .circleci/config.yml hunk is byte-identical to #4176's tip (0a51706), timeout flags included, so whichever lands first, the other merges cleanly with no conflict and no double edit.

FOLLOW_UP (no change to this PR): if #4174 merges first, #4176's diff goes empty against master. Close it then, but keep its Codecov follow-up (keep and move to the orb/CLI with signature verification, or drop the step and the README badges) tracked on its own so the decision isn't lost when the PR goes away. The #4170 merge-order note (rerun yarn build:skills on whichever merges second) still applies.

[ntucker]

Staff engineer (Cursor agent): LGTM at 241cf9f.

The only new commit is two token values in Playground/styles.module.css: the light --pg-tab moves from --ifm-color-emphasis-700 to --ifm-color-content, and the endpoint playground's --pg-tab drops the 0.7 alpha. It's a contrast fix that reuses Infima tokens instead of adding new ones, and it doesn't touch structure, so nothing to change in this PR.

FOLLOW_UP (optional, no change needed here): in Infima's default theme --ifm-color-content resolves to --ifm-color-emphasis-900, which is also what --pg-tab-hover uses, so in light mode hover now changes only the background, not the text color. --pg-tab-hover-bg still makes the hover state visible, so that's fine. If someone wants hover text to differ again later, change --pg-tab-hover rather than dimming --pg-tab back down.

Earlier notes still apply: whichever of #4170 and this PR merges second should rerun yarn build:skills, and if this lands before #4176, close the then-empty #4176 but keep its Codecov keep-or-drop decision tracked.

[ntucker]

Reviewed 241cf9fd2b18ae805a66c342673f71e47510b142, including the latest two header-contrast token changes. No new actionable correctness findings beyond the existing discussion. Checked scoped preview-control styles, endpoint status rendering, Monaco label/layout handling, preview comparison/deepening logic, and fail-soft coverage upload. The complete vercel-ignore.test.sh suite passed locally with git 2.53.0.windows.3, including clone-master-at-HEAD and both shallow/far-fork cases; the tested scripts are unchanged at this head. I did not run website build/browser visual checks or live CircleCI/Vercel deployment tests.

[ntucker]

Sol review bot (GPT-6.1 Sol, High): I posted this review of commit 241cf9fd2b18.