[PULSE-49] Welcome flow, add-site step 2, shared ScriptSetupBlock, and dashboard empty state

[uz1mani]

Work Item

PULSE-49

Summary

• Align welcome and “add new site” flows with a shared script/framework block and add step 2 on /sites/new (script + verify + edit details).
• Remove duplicate “No sites yet” empty state on the dashboard; show a single “Add your first site” card when there are no sites.
• Add analytics for dashboard add-site flow and metadata for /welcome and /sites/new.

Changes

• New: components/sites/ScriptSetupBlock.tsx — Shared block: framework picker, script snippet with copy (always visible, aria-label), “View all integrations” and “See full [Framework] guide” links; used by welcome step 5, /sites/new step 2, and site settings.
• New: app/sites/new/layout.tsx — Metadata: title “Create site | Pulse”, description for new site page.
• New: app/welcome/layout.tsx — Metadata: title “Welcome | Pulse”, description for welcome page.
• lib/welcomeAnalytics.ts: New events and helpers: site_created_from_dashboard, site_created_script_copied; trackSiteCreatedFromDashboard(), trackSiteCreatedScriptCopied() (emit on pulse_welcome).
• app/sites/new/page.tsx: Two-step flow: after create, show step 2 (ScriptSetupBlock, Verify installation modal, Edit site details link). Persist step 2 in sessionStorage (pulse_last_created_site) and restore on refresh via getSite(id). “Back to dashboard” calls router.refresh() then router.push('/'). Solo plan at limit: atLimit state, disable Create Site, optional message. Track site_created_from_dashboard on create and site_created_script_copied via ScriptSetupBlock onScriptCopy.
• app/welcome/page.tsx: Step 5 uses ScriptSetupBlock; “View all integrations” and “See full [Framework] guide” open in new tab. Removed local script/framework UI and related imports/state.
• app/page.tsx: Render SiteList only when sitesLoading || sites.length > 0 so the duplicate “No sites yet” empty state is not shown when there are no sites.
• app/sites/[id]/settings/page.tsx: Tracking Script section replaced with ScriptSetupBlock (framework picker + script + copy). Removed local scriptCopied, copyScript, and API_URL import; copy button always visible with accessible label.

Test Plan

• Welcome step 5: “View all integrations” and “See full [Framework] guide” open in new tab; script copy works.
• /sites/new: Create site → step 2 shows (script + framework + verify); “Edit site details” returns to form with name/domain; “Verify installation” opens modal; refresh on step 2 keeps step 2; “Back to dashboard” shows new site in list.
• Dashboard with zero sites: only one “Add your first site” card visible.
• Site settings General: Tracking Script shows framework picker + script + copy; copy always visible; Verify Installation still works.
• Solo plan with 1 site: /sites/new redirects or form shows with Create Site disabled.
• Tab titles: “Welcome | Pulse” on /welcome, “Create site | Pulse” on /sites/new.
• Optional: Listen for pulse_welcome; confirm site_created_from_dashboard and site_created_script_copied when adding site from dashboard and copying script.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR successfully implements a unified welcome/onboarding flow with improved UX for site creation. The changes consolidate duplicate script setup UI into a shared ScriptSetupBlock component that's reused across welcome, site creation, and settings pages.

Key improvements:

• New 5-step welcome wizard (/welcome) with workspace setup, plan selection, and optional first site
• Two-step site creation flow (/sites/new) showing setup instructions after creation
• Shared ScriptSetupBlock component eliminates code duplication across 3 locations
• Analytics tracking via custom events for funnel measurement
• Better empty state handling on dashboard (single "Add your first site" card)
• Session/localStorage persistence for better UX on refresh

Architecture:

• Clean separation of concerns with reusable components
• Proper state management with URL synchronization
• Good error handling and user feedback via toasts
• Accessible UI with proper ARIA labels

The code is well-structured, follows React best practices, and maintains consistency with the existing codebase. No critical issues found.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Clean implementation with no logical errors, security issues, or breaking changes. Code follows best practices with proper error handling, accessibility, and TypeScript typing. The refactoring consolidates duplicate code into a reusable component without introducing technical debt.
• No files require special attention

Important Files Changed

Filename	Overview
components/sites/ScriptSetupBlock.tsx	New shared component for script setup UI with framework picker, clean implementation with good accessibility
app/sites/new/page.tsx	Two-step site creation flow with sessionStorage persistence, proper error handling and analytics tracking
app/welcome/page.tsx	Complete onboarding wizard with 5 steps, clean state management and proper URL state synchronization
lib/welcomeAnalytics.ts	Analytics tracking utility with custom events for welcome flow, proper error handling
app/page.tsx	Added finish setup banner and empty state for zero sites, conditional rendering of SiteList

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Welcome as /welcome
    participant SitesNew as /sites/new
    participant Dashboard as /page
    participant ScriptSetup as ScriptSetupBlock
    participant Analytics as welcomeAnalytics

    alt New User Flow (Welcome)
        User->>Welcome: Navigate to /welcome
        Welcome->>Browser: Check localStorage (pulse_pending_checkout)
        Welcome->>Analytics: trackWelcomeStepView(1)
        User->>Welcome: Create workspace (Step 2)
        Welcome->>Analytics: trackWelcomeWorkspaceCreated()
        User->>Welcome: Select plan (Step 3)
        Welcome->>Analytics: trackWelcomePlanContinue/Skip()
        User->>Welcome: Add first site (Step 4)
        Welcome->>Analytics: trackWelcomeSiteAdded()
        Welcome->>ScriptSetup: Show script with framework picker
        User->>ScriptSetup: Copy script
        Welcome->>Analytics: trackWelcomeCompleted()
        Welcome->>Dashboard: Redirect to dashboard
    end

    alt Dashboard Add Site Flow
        User->>Dashboard: Click "Add site"
        Dashboard->>SitesNew: Navigate to /sites/new
        User->>SitesNew: Submit site form (Step 1)
        SitesNew->>Analytics: trackSiteCreatedFromDashboard()
        SitesNew->>Browser: Store in sessionStorage (pulse_last_created_site)
        SitesNew->>ScriptSetup: Show Step 2 with script setup
        User->>ScriptSetup: Copy script
        ScriptSetup->>Analytics: trackSiteCreatedScriptCopied()
        User->>SitesNew: Click "Back to dashboard"
        SitesNew->>Browser: Clear sessionStorage
        SitesNew->>Dashboard: router.refresh() + push('/')
    end

    alt Session Restoration
        User->>Browser: Refresh page on /sites/new
        Browser->>SitesNew: Load with sessionStorage data
        SitesNew->>Browser: Check pulse_last_created_site
        Browser->>SitesNew: Return site ID
        SitesNew->>ScriptSetup: Restore Step 2 view
    end

Loading