Skip to content

docs: landing scenario finder + mobile polish + CLS fixes#276

Merged
pratyush618 merged 22 commits into
masterfrom
docs/landing-polish
Jun 21, 2026
Merged

docs: landing scenario finder + mobile polish + CLS fixes#276
pratyush618 merged 22 commits into
masterfrom
docs/landing-polish

Conversation

@pratyush618

@pratyush618 pratyush618 commented Jun 21, 2026

Copy link
Copy Markdown
Collaborator

Highlights

  • Homepage scenario finder + vendored interactive demos for its modal.
  • Node examples section wired into the nav.
  • Mobile sidebar drawer with collapsible subsections; hero/finder overflow contained.
  • CLS fixesfont-display: optional, reserved height for lazy page chunks.

Verify

  • pnpm typecheck + pnpm build + pnpm lint (72 files) green.

Notes

  • docs-only PR. Completes the 9-PR split of the former feat/sdks-node branch.

Summary by CodeRabbit

Release Notes

  • New Features

    • Added a mobile docs navigation drawer with backdrop and close controls, and improved subsection expand/collapse behavior.
    • Added Scenario Finder with a live demo modal and stronger keyboard/focus support (with reduced-motion support).
    • Added an interactive demo suite with new in-browser visuals (rate limiting, failure recovery, worker scaling, workflow DAG, mesh, saga, work stealing).
  • Documentation

    • Added a new “Examples” index and new runnable Node example pages, including “more/examples” (benchmark, bulk emails, data pipeline, Express service, notifications, predicate-gated jobs, saga, web scraper, workflows).
    • Added “node/more/examples” to the navigation.
  • Improvements

    • Reduced layout shift during doc loading and improved responsiveness for the docs UI.

@github-actions github-actions Bot added the docs label Jun 21, 2026
@coderabbitai

coderabbitai Bot commented Jun 21, 2026

Copy link
Copy Markdown

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds a ScenarioFinder landing component with a DemoModal that embeds interactive demos via iframe; rewires the docs sidebar to a mobile off-canvas drawer controlled by DocsLayout; introduces a static docs/public/demos/ micro-app with seven SVG/Canvas browser demo scripts, a shared HTML shell, and CSS; and publishes nine end-to-end Node SDK example MDX pages under node/more/examples.

Changes

Docs App UI: Mobile Sidebar Drawer and ScenarioFinder

Layer / File(s) Summary
Mobile sidebar drawer: components, wiring, and styles
docs/app/components/docs/sidebar.tsx, docs/app/components/ui/site-nav.tsx, docs/app/routes/docs-layout.tsx, docs/app/styles/docs.css
NavSection subsection header becomes a single toggle <button> with active styling; Sidebar gains open/onClose props plus a backdrop element; SiteNav gains an onMenu prop for mobile menu trigger; DocsLayout adds navOpen state that auto-closes on pathname change; docs.css adds off-canvas drawer transform, blurred backdrop, and .nav-sub-toggle button reset styles.
Suspense fallback and doc-loading layout-shift fix
docs/app/routes/docs.$.tsx, docs/app/styles/docs.css
docs.$.tsx replaces null Suspense fallback with <div className="doc-loading" aria-hidden="true" />; docs.css adds min-height: 70vh on .doc-loading to reserve vertical space during hydration and prevent footer shift.
ScenarioFinder, DemoModal, and landing styles
docs/app/components/landing/scenario-finder.tsx, docs/app/components/landing/demo-modal.tsx, docs/app/components/landing/index.ts, docs/app/routes/home.tsx, docs/app/styles/landing.css
DemoModal implements focus trap, document scroll lock, Escape-to-close, iframe embed to demos/interactive.html, and deferred close animation; ScenarioFinder renders tabbed two-pane UI with keyboard navigation (arrow/Home/End), animated card enter via requestAnimationFrame, and dual CTAs (demo modal and guide link); home.tsx renders ScenarioFinder after Hero; landing.css adds .finder/.fd-*/.dm-* layout and animation styles plus hero grid shrink safeguards and code-block horizontal scrolling.
Font display, nav data, and linter config
docs/app/root.tsx, docs/app/lib/nav.ts, docs/biome.json
Google Fonts stylesheet URL updated from display=swap to display=optional; node/more/examples added to NODE_SECTIONS array feeding nav tree generation; biome.json excludes !public/demos from file linting scope.

Interactive Demos Micro-App

Layer / File(s) Summary
Demo shell: HTML, theme, interactive CSS, and README
docs/public/demos/interactive.html, docs/public/demos/theme.css, docs/public/demos/interactive.css, docs/public/demos/README.md
interactive.html provides full page head/nav/hero/footer markup with embed-mode URL parameter handling (embed, theme, accent), Tweaks panel (accent/motion/density controls with postMessage parent-frame handshake), and WebGL capability probe; theme.css defines dark-first design tokens (colors, shadows, radii, font stacks) with light-mode [data-theme="light"] overrides and shared UI atoms (.btn, .eyebrow, .nav); interactive.css styles demo card frames, per-demo layout regions, embed-mode chrome hiding, and responsive breakpoints; README documents iframe embed contract and provenance of import-time edits.
demo-ratelimit.js: API rate-limit pipeline animation
docs/public/demos/demo-ratelimit.js
SVG + requestAnimationFrame demo: queue → worker pool → external API pipeline with 429 retry/exponential-backoff token visualization; supports burst control button, API mode toggle (200/429), per-phase token coloring/movement, reduced-motion staticRender(), and IntersectionObserver auto-start with window.__taskitoDemos.motion/recolor integration.
demo-recovery.js: job failure-recovery timeline
docs/public/demos/demo-recovery.js
Scrubbable/playable job lifecycle timeline with two outcome scenarios (recover vs. DLQ), colored rail segments/ticks, per-attempt outcome chips, scrolling event log, pointer scrubbing and Arrow/Home/End keyboard navigation, and window.__taskitoDemos.motion hook for playback control.
demo-playground.js: worker-pool stochastic simulation
docs/public/demos/demo-playground.js
Slider-driven M/M/c queue simulation (Poisson arrivals, token-bucket rate limiting) with three Canvas 2D charts (throughput, queue depth, latency) using EMA metrics, DPI-aware sizing, CSS-variable color extraction, MutationObserver on data-theme for live theme refresh, and reduced-motion staticEval() mode.
demo-workflow.js: DAG workflow execution animation
docs/public/demos/demo-workflow.js
SVG DAG execution demo: fixed NODES/EDGES topology, critical-path computation (published as window.__wfCrit), dependency-order task scheduling, animated green-dot edge traversal, side panel with per-node details and "Run from here" branch-mask selection, and instantFinish() for reduced-motion completion.
demo-mesh.js: worker-mesh scheduling animation
docs/public/demos/demo-mesh.js
SVG dispatcher + three worker-pool brokerless mesh: probabilistic token routing by pool weights, click/keyboard node online/offline toggling with reroute-on-eviction requeuing, reroute metrics tracking, reduced-motion seedStatic() mode, and window.__taskitoDemos.motion/recolor integration.
demo-saga.js: booking saga forward/compensate animation
docs/public/demos/demo-saga.js
SVG saga workflow: step cards with compensation chips, forward and reverse edge paths, failure-step selector, tick-based state machine advancing forward phase then reverse compensation unwind, per-step visual status transitions, instant() for reduced-motion, and IntersectionObserver auto-start.
demo-worksteal.js: global work-stealing map animation
docs/public/demos/demo-worksteal.js
SVG world-map with five region cards, gossip links with latency labels, Poisson-like queue arrival simulation, hot-region steal eligibility, batch-size computation, animated token transit with visual link state changes, Burst/Reset/Pause/Resume controls, and motion-aware loop management.

Node SDK Examples Documentation

Layer / File(s) Summary
Examples section: meta.json and index
docs/content/docs/node/more/examples/meta.json, docs/content/docs/node/more/examples/index.mdx
meta.json defines section title and ordered nine-page slug index; index.mdx introduces the Examples collection with a table of runnable, self-contained, copy-paste Node SDK projects.
Express image service example
docs/content/docs/node/more/examples/express-service.mdx
Full app.ts/worker.ts/client.html example: Express API enqueues image jobs returning 202 + jobId, SSE stream via queue.stream for partial updates, setProgress for dashboard, publish for stream partials, cooperative cancellation via signal.aborted, and running instructions with key-patterns table.
Notification service example
docs/content/docs/node/more/examples/notifications.mdx
tasks.ts/service.ts/worker.ts example: task channels for email/SMS with rate-limiting and retry, producer service layer exposing delayMs, uniqueKey idempotency, priority routing, cancelJob, periodic cron digest fan-out via enqueueMany, pending-job inspection, and key-patterns summary.
Web scraper pipeline example
docs/content/docs/node/more/examples/web-scraper.mdx
tasks.ts/run.ts/worker.ts example covering rate-limited network queue isolation, fan-out/fan-in multi-queue workflow with result aggregation, cross-cutting middleware logging, periodic cache cleanup via registerPeriodic, and key-patterns table.
ETL data pipeline example
docs/content/docs/node/more/examples/data-pipeline.mdx
pipeline.ts DAG declaring extract/clean/enrich/load tasks with staging storage and per-step queue/priority/retry tuning; monitor.ts for workflow structural analysis and critical-path computation; Mermaid dependency graph; skip-on-failure cascade callout; running instructions and key-patterns table.
DAG workflow recipes example
docs/content/docs/node/more/examples/workflows.mdx
Seven independent workflow-builder recipes: map-reduce fan-out/fan-in with Mermaid diagram, human approval gates with timeout and async actions, conditional error handling on upstream failure, sub-workflow composition, cacheable incremental steps with TTL, and pre/post-run DAG analysis including critical-path and status inspection.
Saga checkout example
docs/content/docs/node/more/examples/saga-checkout.mdx
Forward tasks (inventory reserve, payment charge, shipment create) paired with compensators (inventory release, refund, shipment cancel), workflow DAG with compensate step references, failure-triggered reverse-order compensation execution, compensated/compensation_failed outcomes, idempotency warning, run-states and key-patterns tables.
Bulk emails example
docs/content/docs/node/more/examples/bulk-emails.mdx
sendEmail task configured with rateLimit and maxConcurrent for pacing; sendCampaign chunking recipients and enqueueing via enqueueMany; deduplication warning (enqueueMany bypasses uniqueKey); monitoring via statsByQueue and deadLetters; running and key-patterns guidance.
Predicate-gated jobs example
docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
Predicate semantics (sync evaluation at enqueue time); example implementations (business-hours, feature flag, quota check); queue.gate wiring with predicate composition (allOf, not); synchronous PredicateRejectedError rejection handling; event-based observation for accepted jobs; side-effect-free reminder callout; key-patterns table.
Benchmark example
docs/content/docs/node/more/examples/benchmark.mdx
benchmark.ts script: batched N-job enqueue via enqueueMany, worker drain loop polling queue.stats().complete, p50/p99 latency percentile computation from listJobs timestamps, sample output, what-drives-the-numbers tuning table, and key-patterns summary.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant home.tsx as Home Page
  participant ScenarioFinder
  participant DemoModal
  participant iframe as interactive.html (iframe)

  User->>home.tsx: visits homepage
  home.tsx->>ScenarioFinder: renders component
  User->>ScenarioFinder: selects scenario via tab/keyboard
  ScenarioFinder->>ScenarioFinder: updates selected state, animates card
  User->>ScenarioFinder: clicks primary CTA (Live demo)
  ScenarioFinder->>DemoModal: setActiveDemo(scenario.demoTarget)
  DemoModal->>DemoModal: lock scroll, trap focus, start enter transition
  DemoModal->>iframe: src = BASE_URL/demos/interactive.html?embed=demoId&theme&accent
  iframe-->>DemoModal: onLoad → hide loading indicator
  User->>DemoModal: presses Escape or clicks backdrop
  DemoModal->>ScenarioFinder: onClose → setActiveDemo(null)
  DemoModal->>DemoModal: restore focus, unlock scroll
Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Poem

🐇 Hop hop! New demos glow bright,
The sidebar drawer slides smooth and tight.
Scenarios dance in a two-pane show,
Seven SVG worlds steal the flow.
Nine examples light the Node SDK's way—
A warren of docs shining today! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 11.81% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main changes: landing page scenario finder, mobile sidebar improvements, and CLS fixes through font-display and height reservation.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/landing-polish

Comment @coderabbitai help to get the list of available commands and usage tips.

Comment thread docs/public/demos/demo-mesh.js Fixed
Comment thread docs/public/demos/interactive.html Fixed
@pratyush618
pratyush618 force-pushed the docs/landing-polish branch from 68cc639 to 0988680 Compare June 21, 2026 07:41

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 9

🧹 Nitpick comments (3)
docs/public/demos/demo-ratelimit.js (1)

286-289: ⚡ Quick win

Make lazy-start actually lazy (and pause offscreen).

Line 288 starts the RAF loop unconditionally, so the IntersectionObserver does not gate work. This undermines the “start when visible” behavior and adds avoidable background animation cost.

Suggested fix
-    var io=new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ start(); } else { /* keep running */ } }); },{threshold:0.05});
+    var io=new IntersectionObserver(function(es){
+      es.forEach(function(e){
+        if(e.isIntersecting) start();
+        else stop();
+      });
+    },{threshold:0.05});
     io.observe(root);
-    start();
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/public/demos/demo-ratelimit.js` around lines 286 - 289, The `start()`
function call on line 288 executes unconditionally immediately after the
IntersectionObserver is set up, which defeats the lazy-start behavior intended
by the observer. Move the `start()` call from outside the observer callback to
inside the callback, executing it only when `e.isIntersecting` is true so that
the RAF loop only begins when the observed root element becomes visible.
Consider also pausing or stopping the animation in the else branch when the
element is no longer visible to avoid unnecessary background work.
docs/app/components/ui/site-nav.tsx (1)

41-46: ⚡ Quick win

Expose drawer state semantics on the menu button.

The menu trigger would be more accessible if it also announces state (aria-expanded) and target (aria-controls). That likely means passing navOpen down and wiring it here.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/app/components/ui/site-nav.tsx` around lines 41 - 46, The menu button in
the site-nav component lacks proper ARIA attributes for accessibility. Add the
aria-expanded attribute to the button element to reflect the menu's open/closed
state (it should be true when the menu is open and false when closed), and add
the aria-controls attribute to associate the button with the navigation drawer
it controls by referencing the drawer's id. You will need to ensure the navOpen
state is passed as a prop to this component and use it to set the aria-expanded
value dynamically.
docs/content/docs/node/more/examples/bulk-emails.mdx (1)

39-39: 💤 Low value

Consider removing weak intensifier "very".

Line 39 uses "very large list" which is stylistically weak. Alternatives: "Chunk a large list" or "Chunk the list into smaller batches" convey the same meaning more directly.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/content/docs/node/more/examples/bulk-emails.mdx` at line 39, The
sentence describing the enqueueMany function contains the weak intensifier
"very" in the phrase "very large list". Remove the word "very" from the
description and use more direct language such as "Chunk a large list" or
restructure it to "Chunk the list into smaller batches" to make the sentence
more concise and impactful while maintaining the same meaning.

Source: Linters/SAST tools

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/app/components/landing/demo-modal.tsx`:
- Around line 89-113: The modal is missing a focus trap for keyboard navigation,
which allows Tab/Shift+Tab to move focus into background content despite
aria-modal="true" being declared. Add focus trapping logic to the existing
keydown event handler in the first useEffect: when Tab is pressed on the last
focusable element within the `.dm-dialog` element, move focus to the first
focusable element, and when Shift+Tab is pressed on the first focusable element,
move focus to the last focusable element. This ensures keyboard users remain
within the modal when using Tab navigation while the dialog is open (when
current is truthy).

In `@docs/app/styles/docs.css`:
- Around line 1113-1133: The sidebar is currently translated off-screen when
closed but remains keyboard-focusable because CSS alone cannot prevent keyboard
focus. Add `pointer-events: none;` to the `.sidebar` rule (the default closed
state) to prevent interaction with off-canvas sidebar elements, then add
`pointer-events: auto;` to the `.sidebar.open` rule to re-enable interactions
when the sidebar is open. This ensures keyboard users cannot tab into hidden
sidebar links and buttons.

In `@docs/content/docs/node/more/examples/index.mdx`:
- Line 19: In the Benchmark row of the table in this documentation file, the
phrase "latency throughput" reads as unclear. Add a conjunction to separate
these two metrics so they parse as distinct items in the measurement list.
Change the description in the Benchmark row to clarify that both latency and
throughput are being measured as separate metrics by inserting "and" between
them.

In `@docs/content/docs/node/more/examples/notifications.mdx`:
- Around line 84-91: The documentation text states the periodic digest runs at
"08:00 UTC" but the code configuration explicitly sets timezone to
"America/New_York", which means the digest actually runs at 08:00 New York time,
not UTC. Update the text in the paragraph before the code block to reflect the
correct timezone, changing "08:00 UTC" to "08:00 America/New_York" to match the
timezone parameter in the registerPeriodic call.

In `@docs/content/docs/node/more/examples/web-scraper.mdx`:
- Around line 47-50: The aggregate task definition expects pages as a string[][]
parameter, but the chord workflow primitive being used does not pass child
results to callback functions, creating a type mismatch that will cause
pages.flat() to fail at runtime. Either refactor the example to use a
fan-out/fan-in pattern (such as map/reduce) that actually collects and passes
child results to the aggregate task, ensuring it receives the expected
string[][] data structure, or redefine the aggregate task to accept only
explicit callback parameters without expecting child results and update the
documentation accordingly. This issue appears in multiple locations in the file
(including the section at lines 82-97), so ensure the fix is applied
consistently throughout.

In `@docs/public/demos/demo-worksteal.js`:
- Around line 249-252: The motion function wrapper does not update the pause
button label when resuming animation. When off is false, the code sets
paused=false and calls start() to resume the animation loop, but the `#ws-pause`
button label can remain as "Resume" from a previous pause state, leaving the UI
out of sync with the actual animation state. After the paused=false and start()
calls in the else branch, add code to update the `#ws-pause` button label to
"Pause" to reflect that the animation is now actively running.

In `@docs/public/demos/interactive.html`:
- Line 7: Update the user-facing copy to accurately reflect the number of demos
on the page. In the meta description content attribute on line 7, change "Three
runnable simulations" to "Seven runnable simulations" to match the actual number
of demos available. Additionally, update the similar text on line 46 that
currently says "Four runnable simulations" to also say "Seven runnable
simulations" to ensure consistency across both locations.
- Around line 336-344: The code uses postMessage with origin wildcard '*' for
all cross-window communications and accepts incoming messages without validating
their origin or source. Replace the '*' wildcard in all postMessage calls (in
the persist function, the close button handler, and the initial availability
message) with a specific trusted origin. Additionally, add origin validation to
the window.addEventListener('message') handler that processes
'__activate_edit_mode' and '__deactivate_edit_mode' messages by checking the
event.origin property against an expected trusted origin before executing show()
or hide() based on the message type.

In `@docs/public/demos/README.md`:
- Around line 8-10: The fenced code block containing the interactive.html URL
pattern is missing a language identifier, which violates the MD040 linting rule.
Add `text` as the language identifier to the opening triple backticks of the
fenced code block that contains the
`/demos/interactive.html?embed=<demoId>&theme=<light|dark>&accent=brand#<demoId>`
URL pattern. This will satisfy the linting requirements and ensure consistency
with documentation standards.

---

Nitpick comments:
In `@docs/app/components/ui/site-nav.tsx`:
- Around line 41-46: The menu button in the site-nav component lacks proper ARIA
attributes for accessibility. Add the aria-expanded attribute to the button
element to reflect the menu's open/closed state (it should be true when the menu
is open and false when closed), and add the aria-controls attribute to associate
the button with the navigation drawer it controls by referencing the drawer's
id. You will need to ensure the navOpen state is passed as a prop to this
component and use it to set the aria-expanded value dynamically.

In `@docs/content/docs/node/more/examples/bulk-emails.mdx`:
- Line 39: The sentence describing the enqueueMany function contains the weak
intensifier "very" in the phrase "very large list". Remove the word "very" from
the description and use more direct language such as "Chunk a large list" or
restructure it to "Chunk the list into smaller batches" to make the sentence
more concise and impactful while maintaining the same meaning.

In `@docs/public/demos/demo-ratelimit.js`:
- Around line 286-289: The `start()` function call on line 288 executes
unconditionally immediately after the IntersectionObserver is set up, which
defeats the lazy-start behavior intended by the observer. Move the `start()`
call from outside the observer callback to inside the callback, executing it
only when `e.isIntersecting` is true so that the RAF loop only begins when the
observed root element becomes visible. Consider also pausing or stopping the
animation in the else branch when the element is no longer visible to avoid
unnecessary background work.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0099a2df-da3b-4870-9df0-166bc1f84e26

📥 Commits

Reviewing files that changed from the base of the PR and between d8b3a72 and 68cc639.

⛔ Files ignored due to path filters (1)
  • docs/public/demos/favicon.svg is excluded by !**/*.svg
📒 Files selected for processing (35)
  • docs/app/components/docs/sidebar.tsx
  • docs/app/components/landing/demo-modal.tsx
  • docs/app/components/landing/index.ts
  • docs/app/components/landing/scenario-finder.tsx
  • docs/app/components/ui/site-nav.tsx
  • docs/app/lib/nav.ts
  • docs/app/root.tsx
  • docs/app/routes/docs-layout.tsx
  • docs/app/routes/docs.$.tsx
  • docs/app/routes/home.tsx
  • docs/app/styles/docs.css
  • docs/app/styles/landing.css
  • docs/biome.json
  • docs/content/docs/node/more/examples/benchmark.mdx
  • docs/content/docs/node/more/examples/bulk-emails.mdx
  • docs/content/docs/node/more/examples/data-pipeline.mdx
  • docs/content/docs/node/more/examples/express-service.mdx
  • docs/content/docs/node/more/examples/index.mdx
  • docs/content/docs/node/more/examples/meta.json
  • docs/content/docs/node/more/examples/notifications.mdx
  • docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
  • docs/content/docs/node/more/examples/saga-checkout.mdx
  • docs/content/docs/node/more/examples/web-scraper.mdx
  • docs/content/docs/node/more/examples/workflows.mdx
  • docs/public/demos/README.md
  • docs/public/demos/demo-mesh.js
  • docs/public/demos/demo-playground.js
  • docs/public/demos/demo-ratelimit.js
  • docs/public/demos/demo-recovery.js
  • docs/public/demos/demo-saga.js
  • docs/public/demos/demo-workflow.js
  • docs/public/demos/demo-worksteal.js
  • docs/public/demos/interactive.css
  • docs/public/demos/interactive.html
  • docs/public/demos/theme.css

Comment thread docs/app/components/landing/demo-modal.tsx Outdated
Comment thread docs/app/styles/docs.css
Comment thread docs/content/docs/node/more/examples/index.mdx Outdated
Comment thread docs/content/docs/node/more/examples/notifications.mdx Outdated
Comment thread docs/content/docs/node/more/examples/web-scraper.mdx Outdated
Comment thread docs/public/demos/demo-worksteal.js
Comment thread docs/public/demos/interactive.html Outdated
Comment thread docs/public/demos/interactive.html Outdated
Comment thread docs/public/demos/README.md Outdated
@pratyush618
pratyush618 force-pushed the docs/landing-polish branch from 0988680 to a79bfdc Compare June 21, 2026 07:54

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

♻️ Duplicate comments (1)
docs/public/demos/README.md (1)

8-10: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add a language identifier to the fenced code block.

Line 8 should specify a fence language (e.g., text) to satisfy markdownlint MD040.

Suggested fix
-```
+```text
 /demos/interactive.html?embed=<demoId>&theme=<light|dark>&accent=brand#<demoId>
</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @docs/public/demos/README.md around lines 8 - 10, The fenced code block
starting at line 8 is missing a language identifier after the opening triple
backticks, which violates markdownlint rule MD040. Add a language identifier
like "text" to the opening fence by changing the opening triple backticks from
totext to properly declare the code block language and satisfy the
linter requirement.


</details>

<!-- cr-comment:v1:a5050d54bec50231479b8df1 -->

_Source: Linters/SAST tools_

</blockquote></details>

</blockquote></details>

<details>
<summary>🤖 Prompt for all review comments with AI agents</summary>

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @docs/public/demos/demo-ratelimit.js:

  • Around line 258-264: The staticRender() function only lays out tokens from
    queuedList() but does not process new burst tokens that were added to toqueue by
    spawn(8), causing them to remain invisible in the queue visualization until
    animation resumes. Before the forEach loop that positions queued tokens, ensure
    that any pending tokens in toqueue are moved into the queued state (likely by
    iterating through toqueue and calling queueToken() or similar function for each
    pending token) so that all burst tokens are included in the layout calculation
    and display in the static frame.

In @docs/public/demos/demo-workflow.js:

  • Around line 162-168: The raf variable maintains stale state from previous
    animation frames, causing the motion hook to incorrectly detect an active run
    even after animations complete or are cancelled. In the start function, after
    calling reset(false) and before requesting the new animation frame with
    requestAnimationFrame(tick), explicitly set raf to null or 0 to clear any
    previous stale value. This ensures raf is properly reset before beginning a new
    animation cycle. Apply the same fix to the other locations mentioned (around
    lines 184-185, 210-214, and 264-269) where similar state clearing is needed.

In @docs/public/demos/interactive.html:

  • Around line 31-34: The theme toggle button with id "theme" is not wired with
    an event handler, making it non-functional. Add a click event listener to the
    button element with id "theme" that toggles the theme between light and dark
    modes by updating the appropriate CSS class or data attribute on the document
    root or body element. Also apply the same handler logic to any other theme
    toggle buttons in the file (around lines 165-174) to ensure all instances are
    properly functional.
  • Line 10: The Google Fonts link element loading multiple font families (IBM
    Plex Sans, IBM Plex Mono, JetBrains Mono, Fira Code, and Shantell Sans)
    currently uses the display=swap parameter at the end of the href URL, which
    causes layout shift when fonts load. Change the display parameter from swap to
    optional in the Google Fonts URL to prevent Cumulative Layout Shift (CLS) in the
    standalone iframe shell, ensuring consistent visual stability when fonts are
    loaded.

In @docs/public/demos/theme.css:

  • Around line 33-34: The font family names SFMono-Regular in both the --mono and
    --code CSS custom property definitions are unquoted, which triggers Stylelint's
    value-keyword-case linting error for mixed-case family names. Fix this by adding
    single quotes around 'SFMono-Regular' in both the --mono and --code variable
    declarations to ensure the font fallback chain is preserved while satisfying the
    linter rules.

Duplicate comments:
In @docs/public/demos/README.md:

  • Around line 8-10: The fenced code block starting at line 8 is missing a
    language identifier after the opening triple backticks, which violates
    markdownlint rule MD040. Add a language identifier like "text" to the opening
    fence by changing the opening triple backticks from totext to properly
    declare the code block language and satisfy the linter requirement.

</details>

<details>
<summary>🪄 Autofix (Beta)</summary>

Fix all unresolved CodeRabbit comments on this PR:

- [ ] <!-- {"checkboxId": "4b0d0e0a-96d7-4f10-b296-3a18ea78f0b9"} --> Push a commit to this branch (recommended)
- [ ] <!-- {"checkboxId": "ff5b1114-7d8c-49e6-8ac1-43f82af23a33"} --> Create a new PR with the fixes

</details>

---

<details>
<summary>ℹ️ Review info</summary>

<details>
<summary>⚙️ Run configuration</summary>

**Configuration used**: defaults

**Review profile**: CHILL

**Plan**: Pro

**Run ID**: `2c92cdd8-1be3-4ffb-9f49-b608bc892be1`

</details>

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 68cc6394609cbf0139593cc66cee0fd83eaa3e44 and 09886801854ca89960c4dd3d48a3ac141192dfaa.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `docs/public/demos/favicon.svg` is excluded by `!**/*.svg`

</details>

<details>
<summary>📒 Files selected for processing (35)</summary>

* `docs/app/components/docs/sidebar.tsx`
* `docs/app/components/landing/demo-modal.tsx`
* `docs/app/components/landing/index.ts`
* `docs/app/components/landing/scenario-finder.tsx`
* `docs/app/components/ui/site-nav.tsx`
* `docs/app/lib/nav.ts`
* `docs/app/root.tsx`
* `docs/app/routes/docs-layout.tsx`
* `docs/app/routes/docs.$.tsx`
* `docs/app/routes/home.tsx`
* `docs/app/styles/docs.css`
* `docs/app/styles/landing.css`
* `docs/biome.json`
* `docs/content/docs/node/more/examples/benchmark.mdx`
* `docs/content/docs/node/more/examples/bulk-emails.mdx`
* `docs/content/docs/node/more/examples/data-pipeline.mdx`
* `docs/content/docs/node/more/examples/express-service.mdx`
* `docs/content/docs/node/more/examples/index.mdx`
* `docs/content/docs/node/more/examples/meta.json`
* `docs/content/docs/node/more/examples/notifications.mdx`
* `docs/content/docs/node/more/examples/predicate-gated-jobs.mdx`
* `docs/content/docs/node/more/examples/saga-checkout.mdx`
* `docs/content/docs/node/more/examples/web-scraper.mdx`
* `docs/content/docs/node/more/examples/workflows.mdx`
* `docs/public/demos/README.md`
* `docs/public/demos/demo-mesh.js`
* `docs/public/demos/demo-playground.js`
* `docs/public/demos/demo-ratelimit.js`
* `docs/public/demos/demo-recovery.js`
* `docs/public/demos/demo-saga.js`
* `docs/public/demos/demo-workflow.js`
* `docs/public/demos/demo-worksteal.js`
* `docs/public/demos/interactive.css`
* `docs/public/demos/interactive.html`
* `docs/public/demos/theme.css`

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (10)</summary>

* docs/app/components/landing/index.ts
* docs/biome.json
* docs/content/docs/node/more/examples/meta.json
* docs/content/docs/node/more/examples/index.mdx
* docs/content/docs/node/more/examples/web-scraper.mdx
* docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
* docs/app/root.tsx
* docs/content/docs/node/more/examples/saga-checkout.mdx
* docs/content/docs/node/more/examples/express-service.mdx
* docs/content/docs/node/more/examples/workflows.mdx

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (12)</summary>

* docs/app/routes/docs.$.tsx
* docs/app/routes/home.tsx
* docs/content/docs/node/more/examples/benchmark.mdx
* docs/app/components/landing/demo-modal.tsx
* docs/app/lib/nav.ts
* docs/app/routes/docs-layout.tsx
* docs/content/docs/node/more/examples/notifications.mdx
* docs/content/docs/node/more/examples/data-pipeline.mdx
* docs/app/components/docs/sidebar.tsx
* docs/app/styles/docs.css
* docs/app/styles/landing.css
* docs/public/demos/interactive.css

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->

Comment thread docs/public/demos/demo-ratelimit.js
Comment thread docs/public/demos/demo-workflow.js
Comment thread docs/public/demos/interactive.html Outdated
Comment thread docs/public/demos/interactive.html Outdated
Comment thread docs/public/demos/theme.css Outdated
@pratyush618
pratyush618 force-pushed the docs/landing-polish branch from a79bfdc to ac45fe8 Compare June 21, 2026 07:59

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (1)
docs/public/demos/demo-worksteal.js (1)

229-234: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Make Burst rebalance in static mode too.

When motionOff() is true, Line 234 only repaints after increasing the hot queue; trySteal() and moveTokens() never run, so Burst does not show any work-stealing response for reduced-motion users.

Proposed static-mode settlement
-  function staticRender(){ var now=performance.now(); REG.forEach(function(r){ r.busy=[now+1,0]; }); paint(now); }
+  function finishStaticTokens(){
+    tokens.forEach(function(t){
+      if(!t.done){
+        t.done=true;
+        t.dst.q+=t.batch;
+        moved+=t.batch;
+      }
+      if(t.g.parentNode) t.g.parentNode.removeChild(t.g);
+    });
+    tokens=[];
+  }
+
+  function staticRender(){
+    var now=performance.now();
+    REG.forEach(function(r){ r.busy=[now+1,0]; });
+    trySteal(now, STEAL_INT/1000);
+    finishStaticTokens();
+    paint(now);
+  }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/public/demos/demo-worksteal.js` around lines 229 - 234, The Burst button
click handler does not trigger work-stealing rebalancing in static mode. When
motionOff() is true and the hot queue is increased by 7, the code calls
staticRender() which only repaints without running the trySteal() and
moveTokens() functions that perform the actual load rebalancing. Modify the
staticRender function to include the work-stealing logic (calling trySteal() and
moveTokens()) so that work-stealing rebalancing occurs in both animation and
static modes after the burst queue manipulation.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In `@docs/public/demos/demo-worksteal.js`:
- Around line 229-234: The Burst button click handler does not trigger
work-stealing rebalancing in static mode. When motionOff() is true and the hot
queue is increased by 7, the code calls staticRender() which only repaints
without running the trySteal() and moveTokens() functions that perform the
actual load rebalancing. Modify the staticRender function to include the
work-stealing logic (calling trySteal() and moveTokens()) so that work-stealing
rebalancing occurs in both animation and static modes after the burst queue
manipulation.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 39034808-3f9f-459f-8379-e2d77cd6bedf

📥 Commits

Reviewing files that changed from the base of the PR and between 0988680 and a79bfdc.

⛔ Files ignored due to path filters (1)
  • docs/public/demos/favicon.svg is excluded by !**/*.svg
📒 Files selected for processing (35)
  • docs/app/components/docs/sidebar.tsx
  • docs/app/components/landing/demo-modal.tsx
  • docs/app/components/landing/index.ts
  • docs/app/components/landing/scenario-finder.tsx
  • docs/app/components/ui/site-nav.tsx
  • docs/app/lib/nav.ts
  • docs/app/root.tsx
  • docs/app/routes/docs-layout.tsx
  • docs/app/routes/docs.$.tsx
  • docs/app/routes/home.tsx
  • docs/app/styles/docs.css
  • docs/app/styles/landing.css
  • docs/biome.json
  • docs/content/docs/node/more/examples/benchmark.mdx
  • docs/content/docs/node/more/examples/bulk-emails.mdx
  • docs/content/docs/node/more/examples/data-pipeline.mdx
  • docs/content/docs/node/more/examples/express-service.mdx
  • docs/content/docs/node/more/examples/index.mdx
  • docs/content/docs/node/more/examples/meta.json
  • docs/content/docs/node/more/examples/notifications.mdx
  • docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
  • docs/content/docs/node/more/examples/saga-checkout.mdx
  • docs/content/docs/node/more/examples/web-scraper.mdx
  • docs/content/docs/node/more/examples/workflows.mdx
  • docs/public/demos/README.md
  • docs/public/demos/demo-mesh.js
  • docs/public/demos/demo-playground.js
  • docs/public/demos/demo-ratelimit.js
  • docs/public/demos/demo-recovery.js
  • docs/public/demos/demo-saga.js
  • docs/public/demos/demo-workflow.js
  • docs/public/demos/demo-worksteal.js
  • docs/public/demos/interactive.css
  • docs/public/demos/interactive.html
  • docs/public/demos/theme.css
✅ Files skipped from review due to trivial changes (9)
  • docs/app/components/landing/index.ts
  • docs/content/docs/node/more/examples/index.mdx
  • docs/content/docs/node/more/examples/meta.json
  • docs/content/docs/node/more/examples/web-scraper.mdx
  • docs/content/docs/node/more/examples/saga-checkout.mdx
  • docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
  • docs/content/docs/node/more/examples/workflows.mdx
  • docs/content/docs/node/more/examples/data-pipeline.mdx
  • docs/content/docs/node/more/examples/notifications.mdx
🚧 Files skipped from review as they are similar to previous changes (16)
  • docs/app/lib/nav.ts
  • docs/app/components/ui/site-nav.tsx
  • docs/app/root.tsx
  • docs/biome.json
  • docs/app/routes/docs.$.tsx
  • docs/app/routes/home.tsx
  • docs/app/routes/docs-layout.tsx
  • docs/public/demos/README.md
  • docs/app/components/docs/sidebar.tsx
  • docs/public/demos/interactive.css
  • docs/app/styles/docs.css
  • docs/app/styles/landing.css
  • docs/app/components/landing/scenario-finder.tsx
  • docs/app/components/landing/demo-modal.tsx
  • docs/content/docs/node/more/examples/benchmark.mdx
  • docs/content/docs/node/more/examples/express-service.mdx

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/content/docs/node/more/examples/bulk-emails.mdx`:
- Line 90: The node command in the Terminal 2 Send section references the
undefined variable `list` in the sendCampaign call, which will throw an error
before the function executes. Fix this by either defining the `list` variable
within the -e command string (importing it from the send.ts module or loading it
from the email list source) before calling sendCampaign, or by modifying the
command to properly initialize the list variable so it is available when the
sendCampaign function is invoked.

In `@docs/public/demos/demo-mesh.js`:
- Line 82: The worker toggle button element g lacks the aria-pressed attribute
needed to communicate its online/offline state to assistive technology users.
Add an aria-pressed attribute to the setAttribute calls for element g, setting
its value based on whether the worker is currently online (aria-pressed='false'
for offline, aria-pressed='true' for online) to accurately reflect the toggle
state. Update this aria-pressed value whenever the worker state changes, and
consider updating the aria-label to be more dynamic by including the current
state (online or offline) rather than only saying 'click to toggle offline'.
Apply this fix to all locations where worker nodes are rendered, including both
the initial setAttribute calls and any state update handlers.

In `@docs/public/demos/demo-recovery.js`:
- Around line 49-50: The buttons with data-v="recover" and data-v="dlq" track
their selected state using the custom data-on attribute, but assistive
technologies cannot detect this state. Add the standard aria-pressed attribute
to both button elements to properly communicate the selection state to
accessibility tools: set aria-pressed to "true" for the recover button (which
has data-on="1") and aria-pressed to "false" for the dlq button (which has
data-on="0"). Apply this same fix to both button occurrences in the file
(including the instance at line 225).

In `@docs/public/demos/demo-saga.js`:
- Around line 29-31: The fail-mode toggle buttons are missing the `aria-pressed`
attribute which is needed for proper accessibility announcements of the selected
state. Add `aria-pressed` attribute to all three buttons (the ones with data-on
attributes for "charge fails", "hotel fails", and "all succeed") and ensure that
whenever the `data-on` attribute is updated to reflect the active fail-mode, the
corresponding button's `aria-pressed` is also set to "true" for the active
option and "false" for inactive options. This applies to both the initial button
markup and any event handler that changes the selected fail-mode state.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a61cdcc0-0d19-4d77-8d75-9d025db612e7

📥 Commits

Reviewing files that changed from the base of the PR and between a79bfdc and ac45fe8.

⛔ Files ignored due to path filters (1)
  • docs/public/demos/favicon.svg is excluded by !**/*.svg
📒 Files selected for processing (35)
  • docs/app/components/docs/sidebar.tsx
  • docs/app/components/landing/demo-modal.tsx
  • docs/app/components/landing/index.ts
  • docs/app/components/landing/scenario-finder.tsx
  • docs/app/components/ui/site-nav.tsx
  • docs/app/lib/nav.ts
  • docs/app/root.tsx
  • docs/app/routes/docs-layout.tsx
  • docs/app/routes/docs.$.tsx
  • docs/app/routes/home.tsx
  • docs/app/styles/docs.css
  • docs/app/styles/landing.css
  • docs/biome.json
  • docs/content/docs/node/more/examples/benchmark.mdx
  • docs/content/docs/node/more/examples/bulk-emails.mdx
  • docs/content/docs/node/more/examples/data-pipeline.mdx
  • docs/content/docs/node/more/examples/express-service.mdx
  • docs/content/docs/node/more/examples/index.mdx
  • docs/content/docs/node/more/examples/meta.json
  • docs/content/docs/node/more/examples/notifications.mdx
  • docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
  • docs/content/docs/node/more/examples/saga-checkout.mdx
  • docs/content/docs/node/more/examples/web-scraper.mdx
  • docs/content/docs/node/more/examples/workflows.mdx
  • docs/public/demos/README.md
  • docs/public/demos/demo-mesh.js
  • docs/public/demos/demo-playground.js
  • docs/public/demos/demo-ratelimit.js
  • docs/public/demos/demo-recovery.js
  • docs/public/demos/demo-saga.js
  • docs/public/demos/demo-workflow.js
  • docs/public/demos/demo-worksteal.js
  • docs/public/demos/interactive.css
  • docs/public/demos/interactive.html
  • docs/public/demos/theme.css
✅ Files skipped from review due to trivial changes (10)
  • docs/content/docs/node/more/examples/predicate-gated-jobs.mdx
  • docs/content/docs/node/more/examples/index.mdx
  • docs/app/root.tsx
  • docs/content/docs/node/more/examples/meta.json
  • docs/content/docs/node/more/examples/data-pipeline.mdx
  • docs/content/docs/node/more/examples/saga-checkout.mdx
  • docs/content/docs/node/more/examples/benchmark.mdx
  • docs/public/demos/README.md
  • docs/content/docs/node/more/examples/workflows.mdx
  • docs/app/lib/nav.ts
🚧 Files skipped from review as they are similar to previous changes (15)
  • docs/app/routes/docs.$.tsx
  • docs/biome.json
  • docs/app/routes/docs-layout.tsx
  • docs/app/components/ui/site-nav.tsx
  • docs/content/docs/node/more/examples/express-service.mdx
  • docs/app/styles/docs.css
  • docs/content/docs/node/more/examples/notifications.mdx
  • docs/app/components/landing/scenario-finder.tsx
  • docs/app/components/docs/sidebar.tsx
  • docs/content/docs/node/more/examples/web-scraper.mdx
  • docs/app/routes/home.tsx
  • docs/app/components/landing/demo-modal.tsx
  • docs/public/demos/interactive.css
  • docs/app/styles/landing.css
  • docs/public/demos/theme.css

Comment thread docs/content/docs/node/more/examples/bulk-emails.mdx Outdated
Comment thread docs/public/demos/demo-mesh.js Outdated
Comment thread docs/public/demos/demo-recovery.js Outdated
Comment thread docs/public/demos/demo-saga.js Outdated
@pratyush618
pratyush618 force-pushed the docs/landing-polish branch from ac45fe8 to 6f42dd5 Compare June 21, 2026 08:15
Static demo micro-app served in embed mode by the homepage finder. Adapted on import: dropped chrome scripts, reveal in embed, polished ratelimit/workflow/worksteal rendering.
Two-pane problem-picker with a live-demo modal, ported to React over the existing design tokens.
@pratyush618
pratyush618 force-pushed the docs/landing-polish branch from 6f42dd5 to 7141ce4 Compare June 21, 2026 08:20
@pratyush618
pratyush618 merged commit d52cc6b into master Jun 21, 2026
17 checks passed
@pratyush618
pratyush618 deleted the docs/landing-polish branch June 21, 2026 08:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants