docs: Make the Managers page's toast and refresh-on-focus examples live by ntucker · Pull Request #4444 · reactive/data-client

ntucker · 2026-10-21T03:43:33Z

Requested by Nathaniel · project thread

Stacked on #4423, the demo design system. It now also carries the list rows, round checkboxes, Toaster/toast and row-end meta that these demos use. This PR is docs only.

Motivation

The Managers page's examples were static code, except the data-stream demo from #4267. Two more become live playgrounds that declare getManagers(), so readers can edit the manager and watch it work:

Notifications (toasts): a task list whose ToastManager toasts each mutation. The archived task's PATCH fails, so its optimistic check rolls back with an error toast.
Refresh on focus or reconnect: two rates fetched from a simulated server. Switching tabs or apps and back fires focus, RefreshManager calls expireAll(), and each rate refetches without a loading state.

The manager code is the same as the static examples, except ToastManager now uses toast from the design system instead of importing ./toast. The demo code does no styling of its own (appHeader, list, listItem, meta, Toaster). Vue pages show the same files with Vue components (FrameworkPlayground).

Not made live: middleware logging (its output goes to the browser console, and the Store's Actions tab already is that log), error reporting and metrics (need Sentry or analytics), cross-tab sync and offline persistence (need a second tab or IndexedDB).

Testing

yarn check:doc-examples (React and Vue), yarn build:skills (references regenerated) and the website typecheck pass.
I ran yarn workspace rdc-website build --locale en, then Playwright on desktop (1280) in light and dark, and on phone (iPhone 13). It showed a success toast, then an error toast with the checkbox rolled back for the archived task. After a focus event, the rates refetched with a new fetch time.
The preview link updates only once this PR targets master (the preview workflow runs for master-based PRs).

🤖 Generated with Claude Code

https://claude.ai/code/session_01C8xTb3f4ys9x7gfbwPacsx

changeset-bot · 2026-10-21T03:43:39Z

⚠️ No Changeset found

Latest commit: 1ea64fb

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-21T03:43:43Z

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-21T09:29:22.775516Z	`1ea64fb`	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.

ntucker · 2026-10-21T03:44:31Z

Staff engineer (Cursor agent): LGTM, plus one follow-up idea for after this lands. Nothing to change in this PR.

The manager code stays as it was, and the new toast module makes the toast example complete. Before, it imported a ./toast that the page never showed. Routing the toast through a DOM event, with the Playground README explaining why, is the honest fix for kept managers holding on to old closures.

Follow-up (after merge, not this PR): the generated skill references now inline every playground file, including UI glue. data-client-manager/references/managers.md goes from 568 to about 756 lines, and the Vue copy grows by a similar amount. Much of the new text is Toaster, TodoList and Rates/NumberFlow rendering code. That code teaches nothing about managers, but agents still pay for it in context. The data-stream demo from #4267 already works this way, so this PR follows the existing convention. Each new live demo just widens the gap. Once a third manager demo lands, or another reference page gets one, consider a small fence marker (for example docs-only) that docsToMarkdown.mjs drops. It already strips collapsed, nocheck and similar meta. Then the references would keep TodoResource, toast, ToastManager, getManagers, getRate and RefreshManager, and leave out the preview UI. I'd hold off until there's a third case rather than add the marker now.

What I checked: I read the full diff at e6dd7c8. I read website/framework-docs/docsToMarkdown.mjs and skillReferences.mjs at this SHA to confirm that playground files get inlined and that only collapsed, showLineNumbers, nocheck and framed are stripped. I also compared master's managers.md reference (568 lines, with the data-stream demo already inlined). I did not run the site, the playgrounds, check:doc-examples or build:skills. The playground behavior described above comes from the PR body's testing notes, not from me.

ntucker · 2026-10-21T03:45:36Z

Thanks. The docs-only fence marker for skill references is tracked as a follow-up for after this merges. With this PR the page has three live manager demos (stream, toast, refresh), which meets the threshold you suggested.

Generated by Claude Code

codecov · 2026-10-21T03:46:06Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.37%. Comparing base (c968df1) to head (1ea64fb).

Additional details and impacted files

@@                            Coverage Diff                            @@
##           claude/project-thread-hzrdo5-demo-layout    #4444   +/-   ##
=========================================================================
  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.

github-actions · 2026-10-21T03:46:25Z

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

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

chatgpt-codex-connector · 2026-10-21T03:58:38Z