feat: Guided Tours End Screen

react-compiler.config.js

@@ -64,6 +64,7 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/components/shared/ReactFlow/FlowCanvas/Multiselect",
   "src/components/shared/CodeViewer/CodeEditor.tsx",
   "src/components/shared/Dialogs/MultilineTextInputDialog.tsx",
+  "src/components/shared/Dialogs/PipelineNameDialog.tsx",
   "src/components/shared/HighlightText.tsx",
   "src/components/shared/AnnouncementBanners.tsx",
   "src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection",

src/components/shared/Dialogs/PipelineNameDialog.tsx

@@ -1,11 +1,4 @@
-import {
-  Activity,
-  type ChangeEvent,
-  type ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-} from "react";
+import { Activity, type ChangeEvent, type ReactNode, useState } from "react";
 
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -52,9 +45,6 @@ const PipelineNameDialog = ({
   onOpenChange,
 }: PipelineNameDialogProps) => {
   const [name, setName] = useState(initialName);
-  // Gate the destructive Alert on interaction so dialogs opened with an empty
-  // initialName don't flash "Name cannot be empty" before the user types. The
-  // submit guard below still uses `error` directly, so empty submits stay blocked.
   const [touched, setTouched] = useState(false);
 
   const {
@@ -63,7 +53,7 @@ const PipelineNameDialog = ({
     refetch: refetchUserPipelines,
   } = useLoadUserPipelines();
 
-  const error = useMemo(() => {
+  const computeError = () => {
     if (isLoadingUserPipelines) return null;
     const normalized = name.trim().toLowerCase();
     if (normalized === "") return "Name cannot be empty";
@@ -77,28 +67,27 @@ const PipelineNameDialog = ({
     );
     if (existing.has(normalized)) return "Name already exists";
     return null;
-  }, [name, userPipelines, isLoadingUserPipelines, excludeNames]);
+  };
+
+  const error = computeError();
 
-  const handleOnChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
     setName(e.target.value);
     setTouched(true);
-  }, []);
+  };
 
-  const handleDialogOpenChange = useCallback(
-    (open: boolean) => {
-      if (open) {
-        setName(initialName);
-        setTouched(false);
-        refetchUserPipelines();
-      }
-      onOpenChange?.(open);
-    },
-    [initialName, onOpenChange, refetchUserPipelines],
-  );
+  const handleDialogOpenChange = (open: boolean) => {
+    if (open) {
+      setName(initialName);
+      setTouched(false);
+      refetchUserPipelines();
+    }
+    onOpenChange?.(open);
+  };
 
-  const handleSubmit = useCallback(() => {
+  const handleSubmit = () => {
     onSubmit(name.trim());
-  }, [name, onSubmit]);
+  };
 
   const isDisabled =
     isLoadingUserPipelines ||

src/providers/TourProvider/TourModeContext.tsx

@@ -5,6 +5,7 @@ import type { TourDefinition } from "@/components/Learn/tours/registry";
 export interface TourModeValue {
   tour: TourDefinition;
   tempPipelineName: string;
+  promoteToPipeline: (newName: string, yamlContent: string) => Promise<void>;
 }
 
 const TourModeContext = createContext<TourModeValue | null>(null);

src/providers/TourProvider/TourPopover.tsx

@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
 import { APP_ROUTES } from "@/routes/router";
 import { setTourActive } from "@/utils/tourActive";
 import { tracking } from "@/utils/tracking";
@@ -96,6 +97,19 @@ export function computeDefaultPopoverPosition(
   return "bottom";
 }
 
+let saveExploreHandler: (() => void) | null = null;
+
+export function registerSaveExploreHandler(
+  handler: (() => void) | null,
+): () => void {
+  saveExploreHandler = handler;
+  return () => {
+    if (saveExploreHandler === handler) {
+      saveExploreHandler = null;
+    }
+  };
+}
+
 export function TourCompletionActions() {
   const navigate = useNavigate();
   const { setIsOpen } = useTour();
@@ -105,6 +119,11 @@ export function TourCompletionActions() {
     void navigate({ to: APP_ROUTES.LEARN_TOURS });
   };
 
+  const onSavePipeline = () => {
+    setIsOpen(false);
+    saveExploreHandler?.();
+  };
+
   return (
     <BlockStack gap="3" align="center">
       <Button
@@ -116,6 +135,22 @@ export function TourCompletionActions() {
         <Icon name="Check" size="sm" />
         Finish Tour
       </Button>
+      {saveExploreHandler && (
+        <BlockStack align="center">
+          <Text size="xs" tone="subdued">
+            Continue exploring:
+          </Text>
+          <Button
+            size="xs"
+            variant="link"
+            onClick={onSavePipeline}
+            {...tracking("v2.pipeline_editor.tour.save_as_pipeline")}
+          >
+            <Icon name="SaveAll" size="xs" />
+            Save demo pipeline
+          </Button>
+        </BlockStack>
+      )}
     </BlockStack>
   );
 }

src/providers/TourProvider/TourSaveExploreDialog.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+
+import { PipelineNameDialog } from "@/components/shared/Dialogs";
+import useToastNotification from "@/hooks/useToastNotification";
+import { serializeComponentSpecToText } from "@/models/componentSpec";
+import { useTourMode } from "@/providers/TourProvider/TourModeContext";
+import { registerSaveExploreHandler } from "@/providers/TourProvider/TourPopover";
+import { usePipelineActions } from "@/routes/v2/pages/Editor/store/actions/usePipelineActions";
+import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
+
+export function TourSaveExploreDialog() {
+  const tourMode = useTourMode();
+  const { navigation } = useSharedStores();
+  const { renamePipeline } = usePipelineActions();
+  const notify = useToastNotification();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!tourMode) return;
+    return registerSaveExploreHandler(() => setOpen(true));
+  }, [tourMode]);
+
+  if (!tourMode) return null;
+
+  const onSubmit = async (name: string) => {
+    const rootSpec = navigation.rootSpec;
+    if (!rootSpec) {
+      notify(
+        "Pipeline isn't ready to save yet — try again in a moment.",
+        "error",
+      );
+      return;
+    }
+
+    try {
+      renamePipeline(rootSpec, name);
+      const yamlContent = serializeComponentSpecToText(rootSpec);
+      await tourMode.promoteToPipeline(name, yamlContent);
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to save pipeline";
+      notify(message, "error");
+    }
+  };
+
+  return (
+    <PipelineNameDialog
+      open={open}
+      onOpenChange={setOpen}
+      title="Save pipeline"
+      description="Convert this demo pipeline into a regular pipeline you can keep editing."
+      initialName={tourMode.tour.displayName ?? tourMode.tour.id}
+      onSubmit={onSubmit}
+      submitButtonText="Save"
+    />
+  );
+}

src/routes/Dashboard/Learn/Tour.tsx

@@ -11,8 +11,12 @@ import {
   getTour,
   type TourDefinition,
 } from "@/components/Learn/tours/registry";
+import useToastNotification from "@/hooks/useToastNotification";
 import { TourContent } from "@/providers/TourProvider/TourContent";
-import { TourModeProvider } from "@/providers/TourProvider/TourModeContext";
+import {
+  TourModeProvider,
+  type TourModeValue,
+} from "@/providers/TourProvider/TourModeContext";
 import {
   buildTourPipelineYaml,
   TOUR_PIPELINE_PREFIX,
@@ -148,24 +152,48 @@ export function TourPage() {
       ? params.tourId
       : "";
   const tour = getTour(tourId);
+  const navigate = useNavigate();
+  const storage = usePipelineStorage();
+  const notify = useToastNotification();
+
+  const promoteToPipeline = async (newName: string, yamlContent: string) => {
+    try {
+      const file = await storage.rootFolder.addFile(newName, yamlContent);
+      await navigate({
+        to: APP_ROUTES.EDITOR_V2_PIPELINE,
+        params: { pipelineName: newName },
+        search: { fileId: file.id },
+      });
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Failed to save pipeline";
+      notify(message, "error");
+    }
+  };
 
   if (!tour) {
     return <Navigate to={APP_ROUTES.LEARN_TOURS} replace />;
   }
 
   return (
     <TourPipelineStorageProvider>
-      <TourPageBody tour={tour} tourId={tourId} />
+      <TourPageBody
+        tour={tour}
+        tourId={tourId}
+        promoteToPipeline={promoteToPipeline}
+      />
     </TourPipelineStorageProvider>
   );
 }
 
 function TourPageBody({
   tour,
   tourId,
+  promoteToPipeline,
 }: {
   tour: TourDefinition;
   tourId: string;
+  promoteToPipeline: TourModeValue["promoteToPipeline"];
 }) {
   const search = useSearch({ strict: false });
   const navigate = useNavigate();
@@ -219,6 +247,7 @@ function TourPageBody({
       value={{
         tour,
         tempPipelineName: resolved?.name ?? tourPipelineName(tour),
+        promoteToPipeline,
       }}
     >
       {resolved && (

src/routes/v2/pages/Editor/EditorV2.tsx

@@ -15,6 +15,7 @@ import { ComponentLibraryProvider } from "@/providers/ComponentLibraryProvider";
 import { ForcedSearchProvider } from "@/providers/ComponentLibraryProvider/ForcedSearchProvider";
 import { DialogProvider } from "@/providers/DialogProvider/DialogProvider";
 import { useTourMode } from "@/providers/TourProvider/TourModeContext";
+import { TourSaveExploreDialog } from "@/providers/TourProvider/TourSaveExploreDialog";
 import { AiChatStoreProvider } from "@/routes/v2/shared/components/AiChat/AiChatStoreContext";
 import { useDockAreaAccordion } from "@/routes/v2/shared/hooks/useDockAreaAccordion";
 import { useFocusMode } from "@/routes/v2/shared/hooks/useFocusMode";
@@ -164,6 +165,7 @@ function EditorV2Content({ pipelineRef }: { pipelineRef: PipelineRef | null }) {
       <ReactFlowProvider>
         <EditorMenuBar />
         <EditorTourBridge />
+        <TourSaveExploreDialog />
         <ForcedSearchProvider>{body}</ForcedSearchProvider>
       </ReactFlowProvider>
     </ComponentLibraryProvider>