Add editor v2 welcome spotlight and default path routing

src/components/Home/PipelineSection/PipelineRow.tsx

@@ -30,7 +30,7 @@ import {
 import { Paragraph } from "@/components/ui/typography";
 import { cn } from "@/lib/utils";
 import { useAnalytics } from "@/providers/AnalyticsProvider";
-import { EDITOR_PATH } from "@/routes/router";
+import { getDefaultEditorPath } from "@/routes/editorRoutes";
 import { deletePipeline } from "@/services/pipelineService";
 import { getPipelineTagsFromSpec } from "@/utils/annotations";
 import type { ComponentReferenceWithSpec } from "@/utils/componentStore";
@@ -107,17 +107,15 @@ const PipelineRow = withSuspenseWrapper(
         return;
       }
 
+      if (!name) return;
+
       if (e.ctrlKey || e.metaKey) {
-        if (name) {
-          rowTrack("pipeline_opened", { open_mode: "editor_new_tab" });
-        }
-        window.open(`${EDITOR_PATH}/${name}`, "_blank");
+        rowTrack("pipeline_opened", { open_mode: "editor_new_tab" });
+        window.open(getDefaultEditorPath(name), "_blank");
         return;
       }
-      if (name) {
-        rowTrack("pipeline_opened", { open_mode: "editor_same_tab" });
-      }
-      navigate({ to: `${EDITOR_PATH}/${name}` });
+      rowTrack("pipeline_opened", { open_mode: "editor_same_tab" });
+      navigate({ to: getDefaultEditorPath(name) });
     };
 
     const handleCheckboxChange = (checked: boolean | "indeterminate") => {

src/components/Learn/useImportPipeline.ts

@@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 
 import useToastNotification from "@/hooks/useToastNotification";
-import { EDITOR_PATH } from "@/routes/router";
+import { getDefaultEditorPath } from "@/routes/editorRoutes";
 
 import { importPipelineFromUrl } from "./importPipelineFromUrl";
 
@@ -15,7 +15,7 @@ export function useImportPipeline() {
     onSuccess: (result) => {
       notify(`Pipeline "${result.name}" created successfully`, "success");
       navigate({
-        to: `${EDITOR_PATH}/${encodeURIComponent(result.name)}`,
+        to: getDefaultEditorPath(result.name),
       });
     },
   });

src/components/PipelineRun/RunToolbar.tsx

@@ -5,6 +5,7 @@ import { useUserDetails } from "@/hooks/useUserDetails";
 import { cn } from "@/lib/utils";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useExecutionData } from "@/providers/ExecutionDataProvider";
+import { getDefaultEditorPath } from "@/routes/editorRoutes";
 import { extractCanonicalName } from "@/utils/canonicalPipelineName";
 import {
   countInProgressFromStats,
@@ -30,7 +31,7 @@ export const RunToolbar = () => {
   const { data: currentUserDetails } = useUserDetails();
 
   const editorRoute = componentSpec.name
-    ? `/editor/${encodeURIComponent(componentSpec.name)}`
+    ? getDefaultEditorPath(componentSpec.name)
     : "";
 
   const canAccessEditorSpec = useCheckComponentSpecFromPath(

src/components/PipelineRun/components/InspectPipelineButton.test.tsx

@@ -16,6 +16,6 @@ describe("<InspectPipelineButton/>", () => {
     render(<InspectPipelineButton pipelineName="foo" />);
     const inspectButton = screen.getByTestId("inspect-pipeline-button");
     act(() => fireEvent.click(inspectButton));
-    expect(mockNavigate).toHaveBeenCalledWith({ to: "/editor/foo" });
+    expect(mockNavigate).toHaveBeenCalledWith({ to: "/editor-v2/foo" });
   });
 });

src/components/PipelineRun/components/InspectPipelineButton.tsx

@@ -7,6 +7,7 @@ import {
 
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
 import { Icon } from "@/components/ui/icon";
+import { getDefaultEditorPath } from "@/routes/editorRoutes";
 
 type InspectPipelineButtonProps = {
   pipelineName: string;
@@ -25,7 +26,7 @@ export const InspectPipelineButton = ({
 
   const handleInspect = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
-      const clickThroughUrl = `/editor/${encodeURIComponent(pipelineName)}`;
+      const clickThroughUrl = getDefaultEditorPath(pipelineName);
 
       if (e.ctrlKey || e.metaKey) {
         window.open(clickThroughUrl, "_blank");

src/components/layout/AiModelQuickSelect.test.tsx

@@ -30,6 +30,7 @@ describe("AiModelQuickSelect", () => {
   });
 
   it("does not render when both AI features are disabled", () => {
+    enableFlags({ "ai-assistant": false, "component-search-v2": false });
     window.localStorage.setItem(
       STORAGE_KEY,
       JSON.stringify({

src/components/shared/EditorV2WelcomeSpotlight.tsx

@@ -0,0 +1,210 @@
+import {
+  type RefObject,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { Button } from "@/components/ui/button";
+import { BlockStack } from "@/components/ui/layout";
+import { Paragraph, Text } from "@/components/ui/typography";
+import { getStorage } from "@/utils/typedStorage";
+
+interface EditorV2WelcomeStorage {
+  "seen-editor-v2-welcome": boolean;
+}
+
+const storage = getStorage<
+  keyof EditorV2WelcomeStorage,
+  EditorV2WelcomeStorage
+>();
+const STORAGE_KEY = "seen-editor-v2-welcome";
+const SPOTLIGHT_PADDING = 16;
+const CARD_WIDTH = 320;
+const SPOTLIGHT_COLOR = "#5B35F5";
+const SPOTLIGHT_HALO_COLOR = "rgba(91, 53, 245, 0.35)";
+
+interface SpotlightRect {
+  centerX: number;
+  centerY: number;
+  radius: number;
+}
+
+export function hasSeenEditorV2Welcome(): boolean {
+  return storage.getItem(STORAGE_KEY) === true;
+}
+
+export function markEditorV2WelcomeSeen() {
+  storage.setItem(STORAGE_KEY, true);
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+function getSpotlightRect(target: HTMLElement): SpotlightRect {
+  const rect = target.getBoundingClientRect();
+  return {
+    centerX: rect.left + rect.width / 2,
+    centerY: rect.top + rect.height / 2,
+    radius: Math.max(rect.width, rect.height) / 2 + SPOTLIGHT_PADDING,
+  };
+}
+
+interface ClickBlockersProps {
+  spotlight: SpotlightRect;
+  onDismiss: () => void;
+}
+
+function ClickBlockers({ spotlight, onDismiss }: ClickBlockersProps) {
+  const { centerX, centerY, radius } = spotlight;
+  const top = Math.max(centerY - radius, 0);
+  const bottom = Math.min(centerY + radius, window.innerHeight);
+  const left = Math.max(centerX - radius, 0);
+  const right = Math.min(centerX + radius, window.innerWidth);
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Dismiss new editor welcome"
+        className="fixed left-0 right-0 top-0 z-[1000] cursor-default bg-transparent"
+        style={{ height: top }}
+        onClick={onDismiss}
+      />
+      <button
+        type="button"
+        aria-label="Dismiss new editor welcome"
+        className="fixed bottom-0 left-0 right-0 z-[1000] cursor-default bg-transparent"
+        style={{ top: bottom }}
+        onClick={onDismiss}
+      />
+      <button
+        type="button"
+        aria-label="Dismiss new editor welcome"
+        className="fixed z-[1000] cursor-default bg-transparent"
+        style={{ top, left: 0, width: left, height: bottom - top }}
+        onClick={onDismiss}
+      />
+      <button
+        type="button"
+        aria-label="Dismiss new editor welcome"
+        className="fixed z-[1000] cursor-default bg-transparent"
+        style={{ top, left: right, right: 0, height: bottom - top }}
+        onClick={onDismiss}
+      />
+    </>
+  );
+}
+
+interface EditorV2WelcomeSpotlightProps {
+  targetRef: RefObject<HTMLElement | null>;
+  onDismiss: () => void;
+}
+
+export function EditorV2WelcomeSpotlight({
+  targetRef,
+  onDismiss,
+}: EditorV2WelcomeSpotlightProps) {
+  const [spotlight, setSpotlight] = useState<SpotlightRect | null>(null);
+  const gotItRef = useRef<HTMLButtonElement>(null);
+
+  useLayoutEffect(() => {
+    const update = () => {
+      if (!targetRef.current) return;
+      setSpotlight(getSpotlightRect(targetRef.current));
+    };
+
+    update();
+    const animationFrame = window.requestAnimationFrame(update);
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [targetRef]);
+
+  useEffect(() => {
+    gotItRef.current?.focus();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onDismiss();
+        return;
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        gotItRef.current?.focus();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onDismiss]);
+
+  if (!spotlight) return null;
+
+  const cardTop = clamp(
+    spotlight.centerY + spotlight.radius + 16,
+    16,
+    window.innerHeight - 180,
+  );
+  const cardLeft = clamp(
+    spotlight.centerX - CARD_WIDTH / 2,
+    16,
+    window.innerWidth - CARD_WIDTH - 16,
+  );
+
+  return createPortal(
+    <>
+      <div
+        aria-hidden="true"
+        className="fixed inset-0 z-[999] bg-black/75 pointer-events-none"
+        style={{
+          WebkitMaskImage: `radial-gradient(circle ${spotlight.radius}px at ${spotlight.centerX}px ${spotlight.centerY}px, transparent 0, transparent ${spotlight.radius}px, black ${spotlight.radius + 1}px)`,
+          maskImage: `radial-gradient(circle ${spotlight.radius}px at ${spotlight.centerX}px ${spotlight.centerY}px, transparent 0, transparent ${spotlight.radius}px, black ${spotlight.radius + 1}px)`,
+        }}
+      />
+      <div
+        aria-hidden="true"
+        className="fixed z-[1001] rounded-full border-2 pointer-events-none"
+        style={{
+          left: spotlight.centerX - spotlight.radius,
+          top: spotlight.centerY - spotlight.radius,
+          width: spotlight.radius * 2,
+          height: spotlight.radius * 2,
+          borderColor: SPOTLIGHT_COLOR,
+          boxShadow: `0 0 0 4px ${SPOTLIGHT_HALO_COLOR}`,
+        }}
+      />
+      <ClickBlockers spotlight={spotlight} onDismiss={onDismiss} />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="editor-v2-welcome-title"
+        className="fixed z-[1002] rounded-lg border border-border bg-card p-4 text-card-foreground shadow-lg"
+        style={{ top: cardTop, left: cardLeft, width: CARD_WIDTH }}
+      >
+        <BlockStack gap="3">
+          <BlockStack gap="1">
+            <Text id="editor-v2-welcome-title" weight="semibold">
+              Welcome to the new editor
+            </Text>
+            <Paragraph size="sm" tone="subdued">
+              You can easily switch between the new and old editor here.
+            </Paragraph>
+          </BlockStack>
+          <Button ref={gotItRef} size="sm" onClick={onDismiss}>
+            Got it
+          </Button>
+        </BlockStack>
+      </div>
+    </>,
+    document.body,
+  );
+}

src/components/shared/EditorVersionToggle.tsx

@@ -1,7 +1,14 @@
 import { useLocation, useNavigate } from "@tanstack/react-router";
+import { useCallback, useRef, useState } from "react";
 
 import TooltipButton from "@/components/shared/Buttons/TooltipButton";
+import {
+  EditorV2WelcomeSpotlight,
+  hasSeenEditorV2Welcome,
+  markEditorV2WelcomeSeen,
+} from "@/components/shared/EditorV2WelcomeSpotlight";
 import { Icon } from "@/components/ui/icon";
+import { cn } from "@/lib/utils";
 import { APP_ROUTES, EDITOR_PATH } from "@/routes/router";
 
 import { useFlagValue } from "./Settings/useFlags";
@@ -18,6 +25,13 @@ export const EditorVersionToggle = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const isEnabled = useFlagValue("v2_editor");
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const [welcomeSeen, setWelcomeSeen] = useState(hasSeenEditorV2Welcome);
+
+  const dismissWelcome = useCallback(() => {
+    markEditorV2WelcomeSeen();
+    setWelcomeSeen(true);
+  }, []);
 
   if (!isEnabled) return null;
 
@@ -35,14 +49,28 @@ export const EditorVersionToggle = () => {
       : `${EDITOR_PATH}/${encodeURIComponent(pipelineName)}`;
   const tooltip =
     targetVersion === "v2" ? "Switch to new editor" : "Switch to legacy editor";
+  const showWelcome = version === "v2" && !welcomeSeen;
 
   return (
-    <TooltipButton
-      tooltip={tooltip}
-      onClick={() => navigate({ to: targetPath })}
-      aria-label={tooltip}
-    >
-      <Icon name={targetVersion === "v2" ? "Sparkles" : "History"} />
-    </TooltipButton>
+    <>
+      <TooltipButton
+        ref={toggleRef}
+        tooltip={tooltip}
+        className={cn(showWelcome && "relative z-[1001]")}
+        onClick={() => {
+          if (showWelcome) dismissWelcome();
+          navigate({ to: targetPath });
+        }}
+        aria-label={tooltip}
+      >
+        <Icon name={targetVersion === "v2" ? "Zap" : "Snail"} />
+      </TooltipButton>
+      {showWelcome && (
+        <EditorV2WelcomeSpotlight
+          targetRef={toggleRef}
+          onDismiss={dismissWelcome}
+        />
+      )}
+    </>
   );
 };

src/components/shared/ImportPipeline.tsx

@@ -19,7 +19,7 @@ import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 import { useAnalytics } from "@/providers/AnalyticsProvider";
-import { EDITOR_PATH } from "@/routes/router";
+import { getDefaultEditorPath } from "@/routes/editorRoutes";
 import {
   importPipelineFromFile,
   importPipelineFromYaml,
@@ -63,7 +63,7 @@ const ImportPipeline = ({
       onImportComplete(importedPipeline);
     } else {
       navigate({
-        to: `${EDITOR_PATH}/${encodeURIComponent(importedPipeline.name)}`,
+        to: getDefaultEditorPath(importedPipeline.name),
       });
     }
   };