Fix tour stuck on step 1 and add Next button

Author: charlesvien

apps/code/src/renderer/features/tour/components/TourOverlay.tsx

@@ -112,13 +112,17 @@ export function TourOverlay() {
 
     const el = document.querySelector(selector);
     if (el) {
+      if (el.getAttribute("data-tour-ready") === "true") {
+        tryAdvance();
+        return;
+      }
+
       observer.observe(el, {
         subtree: true,
         childList: true,
         characterData: true,
         attributes: true,
       });
-      resetTimer();
     }
 
     return () => {
@@ -132,6 +136,13 @@ export function TourOverlay() {
   const overlayBlocked = settingsOpen || commandMenuOpen;
   const isActive = !!(tour && step && targetRect && !overlayBlocked);
 
+  const handleNext = () => {
+    if (activeTourId && step) {
+      advancedRef.current = true;
+      advance(activeTourId, step.id);
+    }
+  };
+
   return (
     <>
       <SpotlightOverlay targetRect={isActive ? targetRect : null} />
@@ -141,6 +152,7 @@ export function TourOverlay() {
           stepNumber={activeStepIndex + 1}
           totalSteps={tour.steps.length}
           onDismiss={dismiss}
+          onNext={handleNext}
           targetRect={targetRect}
         />
       )}

apps/code/src/renderer/features/tour/components/TourTooltip.tsx

@@ -11,6 +11,7 @@ interface TourTooltipProps {
   stepNumber: number;
   totalSteps: number;
   onDismiss: () => void;
+  onNext: () => void;
   targetRect: DOMRect;
 }
 
@@ -150,6 +151,7 @@ export function TourTooltip({
   stepNumber,
   totalSteps,
   onDismiss,
+  onNext,
   targetRect,
 }: TourTooltipProps) {
   const isDarkMode = useThemeStore((s) => s.isDarkMode);
@@ -259,15 +261,20 @@ export function TourTooltip({
                 <Text size="1" style={{ color: "var(--gray-9)" }}>
                   {stepNumber}/{totalSteps}
                 </Text>
-                <Button
-                  size="1"
-                  variant="ghost"
-                  color="gray"
-                  onClick={onDismiss}
-                  style={{ opacity: 0.5 }}
-                >
-                  Skip tour
-                </Button>
+                <Flex align="center" gap="2">
+                  <Button
+                    size="1"
+                    variant="ghost"
+                    color="gray"
+                    onClick={onDismiss}
+                    style={{ opacity: 0.5 }}
+                  >
+                    Skip tour
+                  </Button>
+                  <Button size="1" variant="ghost" onClick={onNext}>
+                    Next
+                  </Button>
+                </Flex>
               </Flex>
             </Flex>
           </motion.div>