feat(embed): Watch Me, embed-demo polish, and static RunBook demos

[dfed25]

• Extend runbook-embed.js (Watch Me / full setup, demo steps, UI).
• Embed demo page and EmbeddedRunbookAssistant updates; add FakeCursor and embedDemoWatchMe.
• Add runbook-demo static sites (demo-1–3); demo-2 tour/Watch steps aligned with TOUR_STEPS and launch-gate guard.
• Ignore demo-3 .server.pid; drop nested .git dirs so demos live in the monorepo.

Made-with: Cursor

Summary by CodeRabbit

Release Notes

New Features

• "Watch Me" guided automation system with animated visual demonstrations and interactive cursor feedback
• Multiple interactive demo environments showcasing various product workflows with onboarding guides
• Enhanced assistant with automated demo playback options for streamlined learning

Documentation

• Added comprehensive guides for new demo environments and guided tour features

[coderabbitai]

Warning

Rate limit exceeded

@dfed25 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 51 minutes and 31 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 51 minutes and 31 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7f18192c-e09e-4f82-a81d-81c26c76ab05

📥 Commits

Reviewing files that changed from the base of the PR and between 0c7d16d and b7aa3e5.

📒 Files selected for processing (4)

• eslint.config.mjs
• public/runbook-embed.js
• runbook-demo/RunBook-Demo/demo-1/app.js
• src/app/embed-demo/page.tsx

📝 Walkthrough

Walkthrough

This PR implements a complete client-side "Watch Me" guided tutorial system with animated cursor overlays, element targeting via polling, and scripted UI interactions. It introduces three new demo surfaces (SaaS, e-commerce, blog article) that showcase the Runbook widget with multi-step onboarding flows, persistent state management, and customizable demo steps via window.RUNBOOK_DEMO_STEPS.

Changes

Cohort / File(s)	Summary
Watch Me System Core public/runbook-embed.js	Adds complete "Watch Me" guided tour runner with overlay UI (ring/cursor/cancel), element targeting via polling with scroll correction, cursor animation, scripted effects (text/class/attribute/show/hide/fillinput/toast), and cancellation support. Includes UI chips for "Walkthrough", "Watch me", "Watch full setup", and intercepts data-rb-local-* clicks. Recognizes "What can I do here??" question to generate local demo step list without backend request.
Demo-1: SaaS Onboarding runbook-demo/RunBook-Demo/demo-1/.gitignore, README.md, index.html, app.js, styles.css	Creates complete "Northstar Workflow Builder" demo SaaS app with six product surfaces (Workflows, Integrations, API Keys, Deployments, Settings). Defines window.RUNBOOK_DEMO_STEPS tour config, implements onboarding checklist, tour coach panel, localStorage-based step completion, and simulated user actions (workflow creation, integration management, deployment controls). Includes dark-mode styling with responsive two-column layout.
Demo-2: E-commerce Ops Center runbook-demo/RunBook-Demo/demo-2/RunBook-Demo2/README.md, index.html, app.js, styles.css	Introduces e-commerce operations demo with 14-step onboarding journey across catalog, payments, shipping, returns, marketing, team, and launch modules. Implements launch readiness gating, guided flows, demo state persistence, and timed judge walkthrough. Exports window.RUNBOOK_DEMO_STEPS and emits custom events for tour coordination.
Demo-3: Blog Article runbook-demo/RunBook-Demo/demo-3/Demo-3/.gitignore, README.md, index.html, app.js, package.json, server.js, stop.js, styles.css	Adds standalone blog article demo with engagement tracking (like, save, highlights), persistent localStorage state, and guided tour. Includes Node.js HTTP server (port 8082) with PID-based lifecycle management (server.js, stop.js). Responsive styling with animated highlight/coach panel for tour UX.
Embed Demo Watch Me Integration src/app/embed-demo/page.tsx	Integrates "watch-me" guided mode with UI state tracking fake cursor position, highlight rectangle, progress text, and toast messages. Registers runbook-watch-me event listeners that run async operation sequences: locate target, scroll, highlight, animate cursor, invoke action handler, emit success events, poll for state milestones. Adds "Watch full setup" nudge option and "Watch me" tour footer buttons with data-runbook-action attributes.
Assistant UI Enhancements src/components/EmbeddedRunbookAssistant.tsx	Adds embedDemoState listener for window.__runbookAppState, updates "next action" suggestions to vary by completion state, and adds "Next: …" strip with "Guide me"/"Watch me" buttons. Extends suggestion click handler to dispatch CustomEvent("runbook-watch-me") for "Watch me"/"Watch full setup" interactions.
Demo Support Components src/components/FakeCursor.tsx, src/lib/embedDemoWatchMe.ts	Adds FakeCursor React component for fixed-position scripted pointer overlay with optional ping animation and caption. Introduces embedDemoWatchMe utility module exporting typed operation IDs, selector/success-label lookup tables, getNextWatchMeOperation(), and cancellable async helpers (waitMs(), animateCursorTo()) for cursor interpolation with easing.

Sequence Diagram

sequenceDiagram
    participant User
    participant Client as Client Page
    participant Embed as Embed Script
    participant Demo as Demo App
    participant Assistant as Assistant UI

    User->>Client: Click "Watch me" button
    Client->>Embed: Dispatch runbook-watch-me event
    activate Embed
    Embed->>Demo: Poll for target element selector
    Demo-->>Embed: Element found
    Embed->>Client: Scroll to element
    Embed->>Client: Show highlight ring & fake cursor
    Embed->>Client: Animate cursor to target
    Embed->>Client: Simulate click on target
    Embed->>Demo: Dispatch runbook-ui-action event
    activate Demo
    Demo->>Demo: Update internal state
    Demo->>Demo: Modify UI (show field, update value)
    Demo-->>Embed: Emit success status event
    deactivate Demo
    Embed->>Client: Show success toast
    Embed->>Client: Poll for state milestone reached
    Client-->>Embed: Milestone detected (e.g., API key created)
    Embed->>Client: Show progress update / next step
    Embed->>Assistant: Emit runbook-assistant-status event
    Assistant->>Assistant: Update suggestions
    Embed->>Client: Hide overlay on completion
    deactivate Embed
    User->>Client: View updated state & next action

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

• Feature/alive onboarding demo #23: Both PRs modify embed demo and assistant UI to add/enhance guided "watch-me" onboarding behaviors, with overlapping changes to src/app/embed-demo/page.tsx and src/components/EmbeddedRunbookAssistant.tsx.
• fix: improve embed location intent guidance and highlighting #18: Both PRs extend the client embed script (public/runbook-embed.js) to strengthen element highlighting, targeting, and location-intent detection for guided overlays.
• feat: ship Track B page-aware widget intelligence #21: Both PRs modify public/runbook-embed.js to extend handling of the "What can I do here??" quick action and local page-context demo steps.

Poem

🐰 A Watch Me dance, with cursors swift,
Three demos shine with onboarding gift,
Overlays guide the weary soul,
Each step a hop toward the goal, 🎯
LocalStorage remembers the way!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 1.83% 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 summarizes the primary changes: adding 'Watch Me' functionality to the embed system, polishing the embed-demo page, and introducing three static RunBook demo sites. It is specific and directly related to the main content of the changeset.
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 fix/demo-2-watch-embed-updates

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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