docs: Show the error, expiry and validation playgrounds' code and preview side by side by ntucker · Pull Request #4394 · reactive/data-client

ntucker · 2026-10-15T20:12:22Z

Requested by Nathaniel · project thread

Before: the playgrounds on Error Policy (1), Expiry Policy (5) and Validation (3) were stacked, so the preview sat a screen below the code. They stayed stacked because their fixtures carry the lesson.

After: all nine use row layout. Code and live preview sit side by side when the column is wide enough, and the fixtures open from the preview header's toggle (#4386). Phones still stack. On /vue the shared markup gives the static editor file tabs, the same as the existing row pages.

How: the row prop goes on each of these FrameworkPlaygrounds, and the row prop's doc comment no longer lists "fixtures are the lesson" as a reason to stay stacked.

Not converted: the Store-open-by-default schema demos (in row, the Store would cover the code), plus Endpoint usage and the Query groupBy demo, which were already looked at in #4372 and don't use fixtures.

🤖 Generated with Claude Code

https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

Generated by Claude Code

Note

Low Risk
Documentation and website playground UI only; no runtime library or API behavior changes.

Overview
Docs playgrounds for error policy, expiry policy, and validation now use row so code and live preview sit side by side on wide viewports (fixtures stay in the preview header toggle).

Expiry-policy examples (site docs and agent skill references) are reworked from in-component button/useState navigation to the playground router model: pages use route / start fences, and a layout Navigator wraps {children} with Link / RouterLink instead of AsyncBoundary + local state. Copy now explains route-mounted pages and that stale-data demos suspend on navigation (progress bar).

The preview router gains layout (persistent wrapper), start (initial path and Home target), aria-current on the active link, plus metaFlag parsing so words like “layout” in titles do not flip flags. Fixture rows show HTTP status codes on error fixtures (e.g. 404) and get clearer error styling; the Store badge z-index is adjusted so it does not sit above folded fixtures when closed.

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

…view side by side Row playgrounds now fold fixtures behind the preview header's toggle, so the concept pages whose fixtures carry the lesson can use row too. The playground's row guidance drops that exception. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

changeset-bot · 2026-10-15T20:12:29Z

⚠️ No Changeset found

Latest commit: 7948114

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

chatgpt-codex-connector · 2026-10-15T20:12:35Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-16T01:03:23.038981Z	`7948114`	New commits

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7d381bd4ce

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

github-actions · 2026-10-15T20:15:24Z

Docs preview: https://docs-site-pr-4394-data-client.vercel.app

Built from 7948114 merged into master (this build). English only: this PR doesn't touch translations.

codecov · 2026-10-15T20:15:42Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.37%. Comparing base (9bf8fc2) to head (7948114).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4394   +/-   ##
=======================================
  Coverage   98.37%   98.37%           
=======================================
  Files         161      161           
  Lines        3072     3072           
  Branches      604      604           
=======================================
  Hits         3022     3022           
  Misses         10       10           
  Partials       40       40

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

Row shows open files as tabs, so getUpdated and TimePage both started selected. defaultTab picks getUpdated, the file carrying the lesson (dataExpiryLength, invalidIfStale), as the StreamManager demo does. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

The badge sat at z-index 3 to stay over the Store as it slides in, so it also rose over the fixtures floating across the code. It now sits under them while the Store is closed, and rises above the Store only while the Store panel shows (data-visible, which holds through its slide out). Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

… and Store Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

The dataExpiryLength and invalidIfStale demos each carried a Navigator that held the id in state and swapped TimePage under its own boundary. Routed Home and TimePage pages replace it: going back to a page still fresh shows the cached time at once, while invalidIfStale makes the navigation wait on a new fetch once the data goes stale. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

Vue examples don't run, and the progress bar is the React playground router's, so only React readers get that aside. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

The routed expiry demos showed only two links on the first page, and the time pages lost the links and the clock beside the API time. The playground router now takes a layout fence that wraps every page and stays mounted, and a start path, so the Navigator keeps First and Second (the current one marked) above the API time and Current Time throughout. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

An error fixture's row looked like any other but for a small pill at its end. It now carries a red edge and wash, and its pill names the HTTP status when the response gives one (404, 500), so failures stand out in the fixtures panel on desktop and phone. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

…arsing Reverts the formatter's rewrap of untouched expiry-policy code (Vue <time> lines, imports, buttons) so the page only changes the demos. The layout flag now ignores the word inside quoted titles, paths and routes; an error fixture's pill names only an HTTP error status (400-599); and the error wash tints --store-null instead of repeating it. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 446cc1e668

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

…yout collapsed, column and layout now go through one metaFlag helper that ignores the words inside quoted titles and paths, and the router's layout defaults to Fragment so pages render through one path. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

… only The Vue Navigator now hands TimePage its id (route.params.id), as Vue Router doesn't without props: true. Fence flags like layout are read as standalone tokens, never from inside an unquoted value such as path=src/layout.tsx. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bfa3fcca4d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

A layout fence whose default export has no name now shows an error in the preview, as a route's does, instead of silently rendering no layout. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

ntucker self-assigned this Oct 15, 2026

ntucker deployed to docs-preview October 15, 2026 20:14 — with GitHub Actions

View deployment

chatgpt-codex-connector Bot reviewed Oct 15, 2026

View reviewed changes

Comment thread docs/core/concepts/expiry-policy.md Outdated

ntucker deployed to docs-preview October 15, 2026 20:18 — with GitHub Actions

View deployment

ntucker had a problem deploying to docs-preview October 15, 2026 21:03 — with GitHub Actions Error

docs(playground): Say how the Store badge stacks against the fixtures…

b444397

… and Store Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

ntucker deployed to docs-preview October 15, 2026 21:06 — with GitHub Actions

View deployment

claude added 3 commits October 15, 2026 21:45

docs(skills): Regenerate expiry-policy references for the routed demos

f44d0c8

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016p6cSc9eX8eeud332Upv5b

ntucker deployed to docs-preview October 15, 2026 21:52 — with GitHub Actions

View deployment

claude added 2 commits October 16, 2026 00:37

ntucker deployed to docs-preview October 16, 2026 00:39 — with GitHub Actions

View deployment

ntucker deployed to docs-preview October 16, 2026 00:45 — with GitHub Actions

View deployment

chatgpt-codex-connector Bot reviewed Oct 16, 2026

View reviewed changes

Comment thread website/src/components/Playground/editor/codeModel.ts Outdated

Comment thread docs/core/concepts/expiry-policy.md Outdated

claude added 2 commits October 16, 2026 00:51

ntucker deployed to docs-preview October 16, 2026 00:55 — with GitHub Actions

View deployment

chatgpt-codex-connector Bot reviewed Oct 16, 2026

View reviewed changes

Comment thread website/src/components/Playground/preview/router.tsx Outdated

ntucker deployed to docs-preview October 16, 2026 01:02 — with GitHub Actions

View deployment

ntucker added this pull request to the merge queue Oct 16, 2026

Merged via the queue into master with commit 3790e4f Oct 16, 2026
30 checks passed

ntucker deleted the claude/project-thread-vad8rv branch October 16, 2026 01:27

Navigation Menu

Repository navigation

docs: Show the error, expiry and validation playgrounds' code and preview side by side - #4394

docs: Show the error, expiry and validation playgrounds' code and preview side by side#4394
ntucker merged 13 commits into
masterfrom
claude/project-thread-vad8rv

ntucker commented Oct 15, 2026 •

edited by cursor Bot

Loading

Uh oh!

changeset-bot Bot commented Oct 15, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented Oct 15, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 15, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Oct 15, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ntucker commented Oct 15, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

chatgpt-codex-connector Bot commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

github-actions Bot commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ntucker commented Oct 15, 2026 •

edited by cursor Bot

Loading

changeset-bot Bot commented Oct 15, 2026 •

edited

Loading

chatgpt-codex-connector Bot commented Oct 15, 2026 •

edited

Loading

github-actions Bot commented Oct 15, 2026 •

edited

Loading

codecov Bot commented Oct 15, 2026 •

edited

Loading