feat(Walkthrough #2)[AGE-3596]: Deploy Prompt

web/oss/src/components/EvalRunDetails/components/views/SingleScenarioViewerPOC/ScenarioAnnotationPanel/AnnotationInputs.tsx

@@ -42,6 +42,7 @@ export const BooleanGroupTab = memo(function BooleanGroupTab({
 
     // Check if value is set (not null/undefined)
     const hasValue = value !== null && value !== undefined
+    const isRatingField = typeof label === "string" && /rating|thumb/i.test(label)
 
     return (
         <div className="flex flex-col gap-0 mb-0 playground-property-control">
@@ -56,6 +57,7 @@ export const BooleanGroupTab = memo(function BooleanGroupTab({
                             onChange={(e) => handleChange(e.target.value)}
                             value={value}
                             disabled={disabled}
+                            data-tour={isRatingField ? "annotation-rating" : undefined}
                         >
                             {options?.map((option) => (
                                 <Radio.Button key={String(option.value)} value={option.value}>

web/oss/src/components/EvalRunDetails/test.tsx

@@ -31,7 +31,7 @@ const EvalRunTestPage = ({type = "auto"}: {type?: EvalRunKind}) => {
     }
 
     return (
-        <div className="w-full h-full overflow-hidden flex flex-col">
+        <div className="w-full h-full overflow-hidden flex flex-col" data-tour="eval-results">
             <EvalResultsOnboarding isReady={!!runId} />
             <EvalRunPreviewPage
                 evaluationType={evaluationType}

web/oss/src/components/Onboarding/OnboardingProvider.tsx

@@ -5,6 +5,8 @@ import {useCallback, useEffect, useState} from "react"
 import {NextStep, NextStepProvider} from "@agentaai/nextstepjs"
 import {useSetAtom} from "jotai"
 
+import {ANNOTATE_TRACES_TOUR_ID} from "@/oss/components/Onboarding/tours/annotateTracesTour"
+import {DEPLOY_PROMPT_TOUR_ID} from "@/oss/components/Onboarding/tours/deployPromptTour"
 import {EXPLORE_PLAYGROUND_TOUR_ID} from "@/oss/components/Onboarding/tours/explorePlaygroundTour"
 import {
     tourRegistry,
@@ -47,6 +49,12 @@ const OnboardingInner = ({children}: {children: React.ReactNode}) => {
                 if (tourName === EXPLORE_PLAYGROUND_TOUR_ID) {
                     recordWidgetEvent("playground_explored")
                 }
+                if (tourName === DEPLOY_PROMPT_TOUR_ID) {
+                    recordWidgetEvent("variant_deployed")
+                }
+                if (tourName === ANNOTATE_TRACES_TOUR_ID) {
+                    recordWidgetEvent("trace_annotated")
+                }
             }
             setActiveTourId(null)
         },
@@ -57,10 +65,19 @@ const OnboardingInner = ({children}: {children: React.ReactNode}) => {
         (_step: number, tourName: string | null) => {
             if (tourName) {
                 markTourSeen(tourName)
+                if (tourName === EXPLORE_PLAYGROUND_TOUR_ID) {
+                    recordWidgetEvent("playground_explored")
+                }
+                if (tourName === DEPLOY_PROMPT_TOUR_ID) {
+                    recordWidgetEvent("variant_deployed")
+                }
+                if (tourName === ANNOTATE_TRACES_TOUR_ID) {
+                    recordWidgetEvent("trace_annotated")
+                }
             }
             setActiveTourId(null)
         },
-        [markTourSeen, setActiveTourId],
+        [markTourSeen, recordWidgetEvent, setActiveTourId],
     )
 
     return (

web/oss/src/components/Onboarding/Widget/OnboardingWidget.tsx

@@ -1,15 +1,18 @@
 "use client"
 
-import {useCallback, useEffect, useMemo, useRef} from "react"
+import {useCallback, useEffect, useMemo, useRef, useState} from "react"
 
 import {useNextStep} from "@agentaai/nextstepjs"
 import {CaretDown, CaretUp, RocketLaunch, X} from "@phosphor-icons/react"
-import {Button, Typography} from "antd"
+import {Button, Typography, message} from "antd"
 import clsx from "clsx"
 import {useAtomValue, useSetAtom} from "jotai"
 import {useRouter} from "next/router"
 
+import {openDeploymentsDrawerAtom} from "@/oss/components/DeploymentsDashboard/modals/store/deploymentDrawerStore"
+import {usePlaygroundNavigation} from "@/oss/hooks/usePlaygroundNavigation"
 import {useSession} from "@/oss/hooks/useSession"
+import useURL from "@/oss/hooks/useURL"
 import {
     activeTourIdAtom,
     hasSeenCloseTooltipAtom,
@@ -21,12 +24,20 @@ import {
     onboardingWidgetStatusAtom,
     onboardingWidgetUIStateAtom,
     recordWidgetEventAtom,
+    setOnboardingWidgetActivationAtom,
     setOnboardingWidgetConfigAtom,
     setWidgetSectionExpandedAtom,
     tourRegistry,
     type OnboardingWidgetItem,
 } from "@/oss/lib/onboarding"
+import {traceCountAtom, tracesQueryAtom} from "@/oss/state/newObservability/atoms/queries"
 
+import {ANNOTATE_TRACES_TOUR_ID, registerAnnotateTracesTour} from "../tours/annotateTracesTour"
+import {DEPLOY_PROMPT_TOUR_ID, registerDeployPromptTour} from "../tours/deployPromptTour"
+import {
+    registerTestsetFromTracesTour,
+    TESTSET_FROM_TRACES_TOUR_ID,
+} from "../tours/testsetFromTracesTour"
 import {registerWidgetClosedTour} from "../tours/widgetClosedTour"
 
 import {
@@ -44,23 +55,42 @@ const {Text} = Typography
 const OnboardingWidget = () => {
     const router = useRouter()
     const {doesSessionExist} = useSession()
+    const {appURL, recentlyVisitedAppURL, baseAppURL} = useURL()
     const config = useAtomValue(onboardingWidgetConfigAtom)
     const widgetStatus = useAtomValue(onboardingWidgetStatusAtom)
     const setWidgetStatus = useSetAtom(onboardingWidgetStatusAtom)
     const widgetUIState = useAtomValue(onboardingWidgetUIStateAtom)
     const setWidgetConfig = useSetAtom(setOnboardingWidgetConfigAtom)
     const setWidgetUIState = useSetAtom(onboardingWidgetUIStateAtom)
+    const setWidgetActivation = useSetAtom(setOnboardingWidgetActivationAtom)
     const expandedSections = useAtomValue(onboardingWidgetExpandedSectionsAtom)
     const setSectionExpanded = useSetAtom(setWidgetSectionExpandedAtom)
     const completionMap = useAtomValue(onboardingWidgetCompletionAtom)
     const widgetEvents = useAtomValue(onboardingWidgetEventsAtom)
     const recordWidgetEvent = useSetAtom(recordWidgetEventAtom)
+    const openDeploymentsDrawer = useSetAtom(openDeploymentsDrawerAtom)
     const isNewUser = useAtomValue(isNewUserAtom)
     const hasSeenCloseTooltip = useAtomValue(hasSeenCloseTooltipAtom)
     const setHasSeenCloseTooltip = useSetAtom(hasSeenCloseTooltipAtom)
     const activeTourId = useAtomValue(activeTourIdAtom)
     const setActiveTourId = useSetAtom(activeTourIdAtom)
     const {startNextStep, isNextStepVisible} = useNextStep()
+    const {goToPlayground} = usePlaygroundNavigation()
+    const traceCount = useAtomValue(traceCountAtom)
+    const tracesQuery = useAtomValue(tracesQueryAtom)
+    const [pendingTraceTourId, setPendingTraceTourId] = useState<string | null>(null)
+
+    const registryUrl = useMemo(() => {
+        const base = appURL || recentlyVisitedAppURL || baseAppURL
+        if (!base) return null
+        return `${base}/variants`
+    }, [appURL, recentlyVisitedAppURL, baseAppURL])
+    const observabilityUrl = useMemo(() => {
+        const base = appURL || recentlyVisitedAppURL
+        if (!base) return null
+        return `${base}/traces`
+    }, [appURL, recentlyVisitedAppURL])
+    const isOnTracesRoute = useMemo(() => router.asPath.includes("/traces"), [router.asPath])
 
     const allItems = useMemo(
         () => config.sections.flatMap((section) => section.items),
@@ -74,20 +104,14 @@ const OnboardingWidget = () => {
 
     const completedEventCount = useMemo(() => Object.keys(widgetEvents).length, [widgetEvents])
 
-    // Widget only renders for authenticated new users who haven't dismissed it
+    // Widget renders for authenticated users when opened and not dismissed
     const shouldRender =
-        doesSessionExist &&
-        isNewUser &&
-        widgetStatus !== "dismissed" &&
-        widgetUIState.isOpen &&
-        totalTasks > 0
-
-    const hasTrackedOpenRef = useRef(false)
+        doesSessionExist && widgetStatus !== "dismissed" && widgetUIState.isOpen && totalTasks > 0
 
     const startTour = useCallback(
         (tourId: string) => {
-            if (!tourRegistry.has(tourId)) {
-                console.warn(`[Onboarding] Tour "${tourId}" not found in registry`)
+            if (!tourRegistry.get(tourId)) {
+                console.warn(`[Onboarding] Tour "${tourId}" not found or disabled`)
                 return
             }
 
@@ -102,6 +126,33 @@ const OnboardingWidget = () => {
         [activeTourId, isNextStepVisible, setActiveTourId, startNextStep],
     )
 
+    useEffect(() => {
+        if (!pendingTraceTourId || !router.isReady || !isOnTracesRoute) return
+        if (tracesQuery.isPending || tracesQuery.isLoading || tracesQuery.isFetching) return
+
+        if (traceCount > 0) {
+            startTour(pendingTraceTourId)
+            setPendingTraceTourId(null)
+            return
+        }
+
+        message.info(
+            "No traces yet. Set up tracing first, then return here to start the walkthrough.",
+        )
+        setPendingTraceTourId(null)
+    }, [
+        isOnTracesRoute,
+        pendingTraceTourId,
+        router.isReady,
+        startTour,
+        traceCount,
+        tracesQuery.isFetching,
+        tracesQuery.isPending,
+        tracesQuery.isLoading,
+    ])
+
+    const hasTrackedOpenRef = useRef(false)
+
     const handleItemClick = useCallback(
         async (item: OnboardingWidgetItem) => {
             if (item.disabled) return
@@ -110,22 +161,96 @@ const OnboardingWidget = () => {
 
             if (item.activationHint) {
                 recordWidgetEvent(`activation:${item.activationHint}`)
+                setWidgetActivation(item.activationHint)
             }
 
-            if (item.href) {
+            if (item.activationHint === "open-create-prompt" && baseAppURL) {
+                try {
+                    await router.push(baseAppURL)
+                } catch (error) {
+                    console.error("Failed to navigate to onboarding target", error)
+                    return
+                }
+            } else if (item.activationHint === "open-registry" && registryUrl) {
+                try {
+                    await router.push(registryUrl)
+                    recordWidgetEvent("registry_page_viewed")
+                } catch (error) {
+                    console.error("Failed to navigate to onboarding target", error)
+                    return
+                }
+            } else if (item.activationHint === "integration-snippet") {
+                try {
+                    if (registryUrl) {
+                        await router.push(registryUrl)
+                    }
+                    openDeploymentsDrawer({initialWidth: 1200, mode: "variant"})
+                    recordWidgetEvent("integration_snippet_viewed")
+                } catch (error) {
+                    console.error("Failed to open integration snippet", error)
+                    return
+                }
+            } else if (item.activationHint === "deploy-variant") {
+                startTour(item.tourId || DEPLOY_PROMPT_TOUR_ID)
+                return
+            } else if (item.activationHint === "tracing-snippet" && baseAppURL) {
+                try {
+                    await router.push(baseAppURL)
+                } catch (error) {
+                    console.error("Failed to navigate to tracing setup", error)
+                    return
+                }
+            } else if (item.activationHint === "trace-annotations") {
+                try {
+                    if (observabilityUrl) {
+                        await router.push(observabilityUrl)
+                    }
+                    setPendingTraceTourId(item.tourId || ANNOTATE_TRACES_TOUR_ID)
+                    return
+                } catch (error) {
+                    console.error("Failed to navigate to observability", error)
+                    return
+                }
+            } else if (item.activationHint === "trace-to-testset") {
+                try {
+                    if (observabilityUrl) {
+                        await router.push(observabilityUrl)
+                    }
+                    setPendingTraceTourId(item.tourId || TESTSET_FROM_TRACES_TOUR_ID)
+                    return
+                } catch (error) {
+                    console.error("Failed to navigate to observability", error)
+                    return
+                }
+            } else if (item.activationHint === "run-first-evaluation") {
+                goToPlayground()
+            } else if (item.href) {
                 try {
                     await router.push(item.href)
                 } catch (error) {
                     console.error("Failed to navigate to onboarding target", error)
                     return
                 }
+            } else if (item.activationHint === "playground-walkthrough") {
+                goToPlayground()
             }
 
             if (item.tourId) {
                 startTour(item.tourId)
             }
         },
-        [recordWidgetEvent, router, startTour],
+        [
+            recordWidgetEvent,
+            baseAppURL,
+            observabilityUrl,
+            registryUrl,
+            router,
+            startTour,
+            openDeploymentsDrawer,
+            setWidgetActivation,
+            goToPlayground,
+            setPendingTraceTourId,
+        ],
     )
 
     const toggleSection = useCallback(
@@ -172,6 +297,9 @@ const OnboardingWidget = () => {
     // Register the widget closed tour
     useEffect(() => {
         registerWidgetClosedTour()
+        registerDeployPromptTour()
+        registerAnnotateTracesTour()
+        registerTestsetFromTracesTour()
     }, [])
 
     useEffect(() => {
@@ -201,10 +329,10 @@ const OnboardingWidget = () => {
 
     useEffect(() => {
         const shouldComplete = totalTasks > 0 && completedTasks >= totalTasks
-        if (!shouldComplete) return
+        if (!shouldComplete || widgetStatus === "completed") return
         setWidgetStatus("completed")
         trackWidgetTaskCompleted({totalTasks, completedTasks})
-    }, [totalTasks, completedTasks, setWidgetStatus])
+    }, [totalTasks, completedTasks, widgetStatus, setWidgetStatus])
 
     if (!shouldRender) {
         return null

web/oss/src/components/Onboarding/hooks/useOnboardingTour.ts

@@ -53,14 +53,15 @@ export function useOnboardingTour({
 
     const hasBeenSeen = Boolean(seenTours[tourId])
     const isActive = activeTourId === tourId && isNextStepVisible
-    const canAutoStart = isNewUser && !hasBeenSeen && autoStartCondition && tourRegistry.has(tourId)
+    const isTourAvailable = Boolean(tourRegistry.get(tourId))
+    const canAutoStart = isNewUser && !hasBeenSeen && autoStartCondition && isTourAvailable
 
     // Manual start function
     const startTour = useCallback(
         (options?: TriggerTourOptions) => {
             const {force = false} = options ?? {}
 
-            if (!tourRegistry.has(tourId)) {
+            if (!tourRegistry.get(tourId)) {
                 console.warn(`[Onboarding] Tour "${tourId}" not found in registry`)
                 dispatch({type: "CHECK_FAILURE", error: "Tour not found"})
                 return

web/oss/src/components/Onboarding/index.ts

@@ -14,3 +14,13 @@ export {
     unregisterExplorePlaygroundTour,
     EXPLORE_PLAYGROUND_TOUR_ID,
 } from "./tours/explorePlaygroundTour"
+export {
+    registerDeployPromptTour,
+    unregisterDeployPromptTour,
+    DEPLOY_PROMPT_TOUR_ID,
+} from "./tours/deployPromptTour"
+export {
+    registerFirstEvaluationTour,
+    unregisterFirstEvaluationTour,
+    FIRST_EVALUATION_TOUR_ID,
+} from "./tours/firstEvaluationTour"