Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryMedium Risk Overview Introduces shared tour infrastructure ( Updates UI to support targeting and entry points: adds Written by Cursor Bugbot for commit 9078913. Configure here. |
Greptile SummaryThis PR introduces a guided product tour feature for the Sim workspace, comprising two separate tours: a nav tour (highlighting sidebar sections on home/nav pages) and a workflow tour (highlighting canvas, panel tabs, deploy controls, and workflow controls). Both tours are built on top of Key implementation notes:
Confidence Score: 3/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant Sidebar
participant NavTour
participant WorkflowTour
participant useTour
participant Joyride
participant localStorage
User->>Sidebar: Visits home page (first time)
NavTour->>useTour: mount (disabled=false)
useTour->>useTour: setTimeout(1200ms)
useTour->>localStorage: isTourCompleted?
localStorage-->>useTour: false
useTour->>Joyride: setRun(true)
Joyride-->>User: Nav tour starts (sidebar highlights)
User->>Sidebar: Clicks "Take a tour"
Sidebar->>Sidebar: handleStartTour()
alt On workflow page
Sidebar->>WorkflowTour: dispatchEvent(START_WORKFLOW_TOUR_EVENT)
WorkflowTour->>useTour: handleTrigger()
useTour->>Joyride: setRun(true) + setTourKey(k+1)
Joyride-->>User: Workflow tour starts
else On home/nav page
Sidebar->>NavTour: dispatchEvent(START_NAV_TOUR_EVENT)
NavTour->>useTour: handleTrigger()
useTour->>Joyride: setRun(true) + setTourKey(k+1)
Joyride-->>User: Nav tour restarts
end
User->>Joyride: Completes tour (Done / X)
Joyride->>useTour: callback(STATUS.FINISHED)
useTour->>useTour: stopTour()
useTour->>localStorage: markTourCompleted(storageKey)
|
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
Outdated
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx
Outdated
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/components/product-tour/product-tour.tsx
Outdated
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
Outdated
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/components/product-tour/workflow-tour.tsx
Outdated
Show resolved
Hide resolved
- Extract shared TourState, TourStateContext, mapPlacement, and TourTooltipAdapter into tour-shared.tsx, eliminating ~100 lines of duplication between product-tour.tsx and workflow-tour.tsx - Fix stale closure in handleStartTour — add isOnWorkflowPage to useCallback deps so Take a tour dispatches the correct event after navigation
|
@greptile |
|
@cursor review |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| } from '@/app/workspace/[workspaceId]/components/product-tour/tour-shared' | ||
| import { useTour } from '@/app/workspace/[workspaceId]/components/product-tour/use-tour' | ||
|
|
||
| const logger = createLogger('NavTour') |
There was a problem hiding this comment.
Unused logger variable creates dead code
Low Severity
createLogger is imported and logger is created at module scope on line 15, but logger is never referenced anywhere in the file. The useTour hook already creates its own internal logger, making this one entirely dead code.
| 'slide-in-right': 'slide-in-right 350ms ease-out forwards', | ||
| 'slide-in-bottom': 'slide-in-bottom 400ms cubic-bezier(0.16, 1, 0.3, 1)', | ||
| 'tour-tooltip-in': 'tour-tooltip-in 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', | ||
| 'tour-tooltip-fade': 'tour-tooltip-fade 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94)', |
There was a problem hiding this comment.
Unused tour-tooltip-fade animation defined but never referenced
Low Severity
The tour-tooltip-fade keyframe and its corresponding animate-tour-tooltip-fade animation are defined in the Tailwind config but the class animate-tour-tooltip-fade is never used anywhere in the codebase. Only animate-tour-tooltip-in is actually referenced (in tour-tooltip.tsx).
| <WorkflowTour /> | ||
| </div> | ||
| </main> |
There was a problem hiding this comment.
overflow-hidden wrapper around WorkflowTour
Joyride portals its overlay and spotlight directly to document.body, so the h-0 w-0 overflow-hidden wrapper has no effect on what the user sees. However, Joyride does render a small internal container node as a child of its React parent. With overflow: hidden on a 0×0 div, any non-portaled DOM that Joyride injects (e.g. a __joyride container) could be silently clipped. Compare with how NavTour is placed in the workspace layout—directly as a sibling with no wrapper at all.
Consider matching that pattern for consistency and to avoid any future surprises with Joyride internal DOM:
| <WorkflowTour /> | |
| </div> | |
| </main> | |
| <WorkflowTour /> |
| * totalSteps={5} | ||
| * placement="bottom" | ||
| * targetEl={document.querySelector('[data-tour="home"]')} | ||
| * onNext={handleNext} | ||
| * onClose={handleClose} | ||
| * /> |
There was a problem hiding this comment.
The centered-placement card explicitly adds border border-[var(--border)]. The popover-based (non-centered) variant relies on a drop-shadow filter to simulate a border, which works for the card itself. But the PopoverPrimitive.Arrow SVG only has className='-mt-px fill-[var(--bg)]' — no stroke — so the arrow edge that points toward the target element has no visible border line, creating a small visual inconsistency where the arrow appears to float without a matching outline.
You can add a stroke to the polyline so the arrow's outline matches the card:
| * totalSteps={5} | |
| * placement="bottom" | |
| * targetEl={document.querySelector('[data-tour="home"]')} | |
| * onNext={handleNext} | |
| * onClose={handleClose} | |
| * /> | |
| className='-mt-px fill-[var(--bg)] stroke-[var(--border)]' | |
| > | |
| <polygon points='0,0 14,0 7,7' className='stroke-none' /> | |
| <polyline points='0,0 7,7 14,0' fill='none' strokeWidth={1} /> |
Summary
Type of Change
Testing
Tested manually
Checklist