feat(tour): added product tour

[waleedlatif1]

Summary

• added product tour

Type of Change

• New feature

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 24, 2026 7:30pm

[cursor]

PR Summary

Medium Risk
Adds a new guided-tour system that auto-runs and persists state in localStorage, plus a new third-party dependency (react-joyride) and popover rendering changes that could affect UI layering/scrolling.

Overview
Adds guided product tours for both workspace navigation and the workflow editor using react-joyride, including shared tour state/transition handling (useTour) and a custom TourTooltip UI.

Integrates the tours into workspace/workflow layouts (auto-start with completion persisted via localStorage) and adds a “Take a tour” entry under Help to manually retrigger the appropriate tour via custom window events.

Updates multiple UI components with data-tour/data-item-id/section class hooks for step targeting, and extends the shared PopoverContent to optionally render an arrow (showArrow, arrowClassName) plus adds a Tailwind tour-tooltip-in animation.

^{Written by Cursor Bugbot for commit d08805f. Configure here.}

[greptile-apps]

Greptile Summary

This PR introduces a guided product tour feature using react-joyride, covering both the workspace navigation sidebar (nav tour) and the workflow canvas (workflow tour). The implementation is well-architected: a shared useTour hook handles auto-start, localStorage persistence, manual re-trigger via custom events, and coordinated fade transitions between steps. Shared Joyride config, context, and the TourTooltipAdapter are extracted into tour-shared.tsx, avoiding duplication between the two tour components. A new TourTooltip EMCN component provides the card UI using Radix Popover for collision-aware positioning, and the existing Popover component gained opt-in arrow support used by the tooltip.

Key changes:

• New product-tour/ feature folder with use-tour.ts, tour-shared.tsx, product-tour.tsx, workflow-tour.tsx, and step-definition files
• NavTour mounted in the workspace layout (auto-disabled on workflow pages); WorkflowTour in the workflow layout
• Help sidebar item upgraded to a dropdown containing "Report an issue" and the new "Take a tour" entry
• Three data-tour anchor attributes added to home.tsx (home-greeting, home-chat-input, home-templates) are not referenced by any current tour step — likely dead code or placeholders for a future home-page tour
• react-joyride@2.9.3 declares peerDependencies: { "react": "15 - 18" } and doesn't include React 19; an override is present for react-floater but not for react-joyride itself, which may produce peer-dep warnings during install

Confidence Score: 5/5

• Safe to merge — the feature is self-contained, previous review concerns have been addressed, and the only remaining items are minor clean-ups.
• All prior review concerns (stale closure, code duplication, overflow wrapper, arrow border) have been resolved. The remaining two findings are non-blocking: unused data-tour attributes in home.tsx and a missing react-joyride peer-dep override that doesn't affect runtime behavior since the library was tested manually and works with React 19.
• No files require special attention beyond the two P2 suggestions noted above.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/components/product-tour/use-tour.ts	Core hook managing tour lifecycle, step transitions, localStorage persistence, auto-start, and manual trigger via custom events. Well-structured with proper cleanup of timers and event listeners.
apps/sim/app/workspace/[workspaceId]/components/product-tour/tour-shared.tsx	Shared TourState context, placement mapper, TourTooltipAdapter, and Joyride style config extracted into a single module. No duplication between nav and workflow tours.
apps/sim/components/emcn/components/tour-tooltip/tour-tooltip.tsx	New EMCN TourTooltip component using Radix Popover for collision-aware positioning. Handles both anchored and centered placements with portal rendering. Arrow border stroke added correctly.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx	Help item converted from a plain nav link to a dropdown with "Report an issue" and "Take a tour" options. handleStartTour correctly includes isOnWorkflowPage in its useCallback deps.
apps/sim/app/workspace/[workspaceId]/home/home.tsx	Three data-tour anchor attributes added (home-greeting, home-chat-input, home-templates) but none are referenced in any tour step definition — unused DOM attributes.
apps/sim/package.json	react-joyride@2.9.3 added as a dependency. react-floater's React peer dep is overridden to the workspace version; react-joyride itself still declares "react: 15 - 18" without a matching override entry.
apps/sim/components/emcn/components/popover/popover.tsx	showArrow and arrowClassName props added; overflow handling adjusted so arrow SVG isn't clipped; data-popover-scroll used to exempt the inner scroll container from truncation rules.

Sequence Diagram

sequenceDiagram
participant User
participant Sidebar
participant NavTour
participant WorkflowTour
participant useTour
participant TourTooltip
Note over NavTour,WorkflowTour: Mounted in workspace/workflow layouts
NavTour->>useTour: autoStartDelay=1200ms, disabled=isWorkflowPage
useTour->>useTour: check localStorage (sim-nav-tour-completed-v1)
useTour-->>NavTour: run=true, stepIndex=0
NavTour->>TourTooltip: render step via TourTooltipAdapter
TourTooltip->>TourTooltip: querySelector(step.target)
TourTooltip-->>User: Popover anchored to target element
User->>User: Navigate to workflow page
NavTour->>useTour: disabled=true
useTour-->>NavTour: run=false (paused, not completed)
WorkflowTour->>useTour: autoStartDelay=800ms
useTour->>useTour: check localStorage (sim-workflow-tour-completed-v1)
useTour-->>WorkflowTour: run=true, stepIndex=0
User->>Sidebar: Click "Take a tour"
Sidebar->>Sidebar: dispatch START_WORKFLOW_TOUR_EVENT (isOnWorkflowPage=true)
WorkflowTour->>useTour: handleTrigger (event listener)
useTour->>useTour: clearTourCompletion, setTourKey+1, reset state
useTour-->>WorkflowTour: run=true, stepIndex=0 (re-mounted)
User->>TourTooltip: Click Next/Back/Close
TourTooltip->>useTour: handleCallback(STEP_AFTER / CLOSE)
useTour->>useTour: transitionToStep (fade-out → rAF × 2 → fade-in)
useTour-->>TourTooltip: isTooltipVisible=true at new position

Loading

Comments Outside Diff (1)

1. apps/sim/package.json, line 157 (link)

   react-joyride peer dependency mismatch with React 19

   react-joyride@2.9.3 declares peerDependencies: { "react": "15 - 18" }, which excludes React 19. The overrides block already handles react-floater's peer dep by aliasing it to the workspace React, but there is no matching override entry for react-joyride itself. In practice this works because there is only one React instance in the bundle, but bun will emit a peer-dep warning on install and the mismatch could complicate future upgrades.

   Consider adding a parallel override entry:

   "react-joyride": {
   "react": "$react",
   "react-dom": "$react-dom"
   }

_{Reviews (8): Last reviewed commit: "refactor: move docs link from settings t..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR