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

2026-02-08T14:26:41Z

uz1mani commented

2026-02-08 14:26:41 +00:00

(Migrated from github.com)

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.

## 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 - [x] Welcome step 5: “View all integrations” and “See full [Framework] guide” open in new tab; script copy works. - [x] `/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. - [x] Dashboard with zero sites: only one “Add your first site” card visible. - [x] Site settings General: Tracking Script shows framework picker + script + copy; copy always visible; Verify Installation still works. - [x] Solo plan with 1 site: `/sites/new` redirects or form shows with Create Site disabled. - [x] Tab titles: “Welcome | Pulse” on `/welcome`, “Create site | Pulse” on `/sites/new`. - [x] Optional: Listen for `pulse_welcome`; confirm `site_created_from_dashboard` and `site_created_script_copied` when adding site from dashboard and copying script.

👍 1

greptile-apps[bot] commented

2026-02-08 14:29:09 +00:00

(Migrated from github.com)

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

<h2>Greptile Overview</h2> <h3>Greptile Summary</h3> 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. <h3>Confidence Score: 5/5</h3> - 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 <details><summary><h3>Important Files Changed</h3></summary> | 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 | </details> </details> <h3>Sequence Diagram</h3> ```mermaid 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 ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ciphera-net/pulse#17