Guard tour advance with expected tour and step IDs

Author: charlesvien

apps/code/src/renderer/components/MainLayout.tsx

@@ -18,6 +18,7 @@ import { TaskInput } from "@features/task-detail/components/TaskInput";
 import { useTasks } from "@features/tasks/hooks/useTasks";
 import { TourOverlay } from "@features/tour/components/TourOverlay";
 import { useTourStore } from "@features/tour/stores/tourStore";
+import { createFirstTaskTour } from "@features/tour/tours/createFirstTaskTour";
 import { useConnectivity } from "@hooks/useConnectivity";
 import { useIntegrations } from "@hooks/useIntegrations";
 import { Box, Flex } from "@radix-ui/themes";
@@ -45,7 +46,7 @@ export function MainLayout() {
 
   const startTour = useTourStore((s) => s.startTour);
   const isFirstTaskTourDone = useTourStore((s) =>
-    s.completedTourIds.includes("create-first-task"),
+    s.completedTourIds.includes(createFirstTaskTour.id),
   );
 
   useIntegrations();
@@ -67,7 +68,7 @@ export function MainLayout() {
 
   useEffect(() => {
     if (isFirstTaskTourDone || settingsOpen) return;
-    const timer = setTimeout(() => startTour("create-first-task"), 600);
+    const timer = setTimeout(() => startTour(createFirstTaskTour.id), 600);
     return () => clearTimeout(timer);
   }, [isFirstTaskTourDone, settingsOpen, startTour]);
 

apps/code/src/renderer/features/settings/components/sections/AdvancedSettings.tsx

@@ -1,5 +1,6 @@
 import { useOnboardingStore } from "@features/onboarding/stores/onboardingStore";
 import { SettingRow } from "@features/settings/components/SettingRow";
+import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
 import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { useTourStore } from "@features/tour/stores/tourStore";
 import { useFeatureFlag } from "@hooks/useFeatureFlag";
@@ -23,7 +24,10 @@ export function AdvancedSettings() {
         <Button
           variant="soft"
           size="1"
-          onClick={() => useOnboardingStore.getState().resetOnboarding()}
+          onClick={() => {
+            useOnboardingStore.getState().resetOnboarding();
+            useSettingsDialogStore.getState().close();
+          }}
         >
           Reset
         </Button>

apps/code/src/renderer/features/task-detail/hooks/useTaskCreation.ts

@@ -9,6 +9,7 @@ import {
 import { useSettingsStore } from "@features/settings/stores/settingsStore";
 import { useCreateTask } from "@features/tasks/hooks/useTasks";
 import { useTourStore } from "@features/tour/stores/tourStore";
+import { createFirstTaskTour } from "@features/tour/tours/createFirstTaskTour";
 import { useConnectivity } from "@hooks/useConnectivity";
 import type { WorkspaceMode } from "@main/services/workspace/schemas";
 import { get } from "@renderer/di/container";
@@ -173,7 +174,7 @@ export function useTaskCreation({
         } else {
           navigateToTask(output.task);
         }
-        useTourStore.getState().advance();
+        useTourStore.getState().completeTour(createFirstTaskTour.id);
         editor.clear();
         log.info("Task ready, navigated early", { taskId: output.task.id });
       });

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

@@ -61,25 +61,31 @@ export function TourOverlay() {
   }, [activeStepIndex]);
 
   useEffect(() => {
-    if (!step || step.advanceOn.type !== "click" || !selector) return;
+    if (!step || !activeTourId || step.advanceOn.type !== "click" || !selector)
+      return;
 
     const el = document.querySelector(selector);
     if (!el) return;
 
+    const tourId = activeTourId;
+    const stepId = step.id;
     const handler = () => {
       if (!advancedRef.current) {
         advancedRef.current = true;
-        setTimeout(advance, 0);
+        setTimeout(() => advance(tourId, stepId), 0);
       }
     };
 
     el.addEventListener("click", handler, { capture: true });
     return () => el.removeEventListener("click", handler, { capture: true });
-  }, [step, selector, advance]);
+  }, [step, selector, advance, activeTourId]);
 
   useEffect(() => {
-    if (!step || step.advanceOn.type !== "action" || !selector) return;
+    if (!step || !activeTourId || step.advanceOn.type !== "action" || !selector)
+      return;
 
+    const tourId = activeTourId;
+    const stepId = step.id;
     const SETTLE_MS = 2000;
     let settleTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -90,7 +96,7 @@ export function TourOverlay() {
         !advancedRef.current
       ) {
         advancedRef.current = true;
-        advance();
+        advance(tourId, stepId);
       }
     };
 
@@ -119,7 +125,7 @@ export function TourOverlay() {
       observer.disconnect();
       if (settleTimer) clearTimeout(settleTimer);
     };
-  }, [step, selector, advance]);
+  }, [step, selector, advance, activeTourId]);
 
   const settingsOpen = useSettingsDialogStore((s) => s.isOpen);
   const commandMenuOpen = useCommandMenuStore((s) => s.isOpen);

apps/code/src/renderer/features/tour/stores/tourStore.ts

@@ -10,7 +10,8 @@ interface TourStoreState {
 
 interface TourStoreActions {
   startTour: (tourId: string) => void;
-  advance: () => void;
+  advance: (tourId: string, stepId: string) => void;
+  completeTour: (tourId: string) => void;
   dismiss: () => void;
   resetTours: () => void;
 }
@@ -29,13 +30,16 @@ export const useTourStore = create<TourStore>()(
         set({ activeTourId: tourId, activeStepIndex: 0 });
       },
 
-      advance: () => {
+      advance: (tourId, stepId) => {
         const { activeTourId, activeStepIndex } = get();
-        if (!activeTourId) return;
+        if (activeTourId !== tourId) return;
 
         const tour = TOUR_REGISTRY[activeTourId];
         if (!tour) return;
 
+        const currentStep = tour.steps[activeStepIndex];
+        if (!currentStep || currentStep.id !== stepId) return;
+
         if (activeStepIndex >= tour.steps.length - 1) {
           set((state) => ({
             completedTourIds: [...state.completedTourIds, activeTourId],
@@ -47,6 +51,17 @@ export const useTourStore = create<TourStore>()(
         }
       },
 
+      completeTour: (tourId) => {
+        const { activeTourId, completedTourIds } = get();
+        if (activeTourId !== tourId) return;
+        if (completedTourIds.includes(tourId)) return;
+        set({
+          completedTourIds: [...completedTourIds, tourId],
+          activeTourId: null,
+          activeStepIndex: 0,
+        });
+      },
+
       dismiss: () => {
         const { activeTourId } = get();
         if (!activeTourId) return;