[V0_FILE]typescriptreact:file="app/layout.tsx" import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Onboarding Drip Campaign", description: "Multi-day onboarding email drip campaign with Vercel Workflow", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescript:file="app/api/mock/api.ts" import { NextResponse } from "next/server"; type ApiError = { code: string; message: string; }; export function createApiSuccessResponse>( fields: T, init?: ResponseInit ) { return NextResponse.json( { ok: true, ...fields, }, init ); } export function createApiErrorResponse(error: ApiError, init?: ResponseInit) { return NextResponse.json( { ok: false, error, }, init ); } [V0_FILE]typescript:file="app/api/mock/onboarding/route.ts" import { createApiErrorResponse, createApiSuccessResponse, } from "../api"; export async function POST(request: Request) { let body: Record; try { body = await request.json(); } catch { return createApiErrorResponse( { code: "INVALID_REQUEST", message: "Invalid JSON body" }, { status: 400 } ); } const email = body.email; if (!email || typeof email !== "string") { return createApiErrorResponse( { code: "INVALID_REQUEST", message: "Email is required" }, { status: 400 } ); } const MS_PER_DAY = 86_400_000; const runId = `mock-${crypto.randomUUID().slice(0, 8)}`; const now = new Date(); return createApiSuccessResponse({ runId, status: "running" as const, email, schedule: [ { day: 0, label: "Welcome Email", sentAt: now.toISOString(), status: "sent", }, { day: 1, label: "Getting Started Tips", sentAt: new Date(now.getTime() + MS_PER_DAY).toISOString(), status: "scheduled", }, { day: 3, label: "Feature Highlights", sentAt: new Date(now.getTime() + MS_PER_DAY * 3).toISOString(), status: "scheduled", }, { day: 7, label: "Follow-up & Feedback", sentAt: new Date(now.getTime() + MS_PER_DAY * 7).toISOString(), status: "scheduled", }, ], _mock: true, }); } [V0_FILE]typescript:file="app/api/onboarding/route.ts" import { start } from "workflow/api"; import { runOnboardingDrip } from "@/workflows/onboarding-drip"; const NO_STORE_HEADERS = { "Cache-Control": "no-store", } as const; function createErrorResponse(status: number, code: string, message: string) { return Response.json( { ok: false, error: { code, message, }, }, { status, headers: NO_STORE_HEADERS, } ); } export async function POST(request: Request) { let body: Record; try { body = await request.json(); } catch { return createErrorResponse(400, "INVALID_JSON", "Invalid JSON body"); } const email = body?.email; if (!email || typeof email !== "string") { return createErrorResponse(400, "MISSING_EMAIL", "Email is required"); } let run: Awaited>; try { // Start the onboarding drip workflow // This executes asynchronously and doesn't block the request run = await start(runOnboardingDrip, [email]); } catch (error) { const message = error instanceof Error ? error.message : "Failed to start workflow"; return createErrorResponse(500, "START_FAILED", message); } return Response.json({ ok: true, message: "Onboarding drip campaign started", runId: run.runId, email, schedule: { day0: "Welcome email (immediate)", day1: "Getting started tips", day3: "Feature highlights", day7: "Follow-up and feedback request", }, }); } [V0_FILE]typescriptreact:file="app/page.tsx" import { highlightCodeToHtmlLines } from "@/components/code-highlight-server"; import { OnboardingDripDemoClient } from "@/components/onboarding-drip-demo-client"; const workflowCode = `import { sleep } from "workflow"; export async function runOnboardingDrip(email: string) { "use workflow"; // Day 0: Welcome email await sendWelcomeEmail(email); // Day 1: Getting started tips await sleep("1d"); await sendGettingStartedEmail(email); // Day 3: Feature highlights await sleep("2d"); await sendFeatureHighlightsEmail(email); // Day 7: Follow-up await sleep("4d"); await sendFollowUpEmail(email); }`; const stepCodes = [ `async function sendWelcomeEmail(email: string) { "use step"; // Day 0: Immediate welcome after signup await fetch("https://mail.example.com/send", { method: "POST", body: JSON.stringify({ to: email, template: "welcome", subject: "Welcome to Workflow DevKit", }), }); return { sent: true, day: 0 }; }`, `async function sendGettingStartedEmail(email: string) { "use step"; // Day 1: Practical tips after first 24 hours await fetch("https://mail.example.com/send", { method: "POST", body: JSON.stringify({ to: email, template: "getting-started", subject: "Getting started tips for your first workflow", }), }); return { sent: true, day: 1 }; }`, `async function sendFeatureHighlightsEmail(email: string) { "use step"; // Day 3: Showcase key features await fetch("https://mail.example.com/send", { method: "POST", body: JSON.stringify({ to: email, template: "feature-highlights", subject: "Feature highlights you should try next", }), }); return { sent: true, day: 3 }; }`, `async function sendFollowUpEmail(email: string) { "use step"; // Day 7: Request feedback await fetch("https://mail.example.com/send", { method: "POST", body: JSON.stringify({ to: email, template: "follow-up", subject: "How did your first workflow week go?", }), }); return { sent: true, day: 7 }; }`, ]; // Compute highlight ranges by scanning workflowCode for step call patterns. // This avoids hardcoded line numbers that break if the code string is edited. const STEP_PATTERNS = [ "sendWelcomeEmail", "sendGettingStartedEmail", "sendFeatureHighlightsEmail", "sendFollowUpEmail", ]; function buildStepHighlightPhases(code: string) { const lines = code.split("\n"); const sendLines: Record = {}; const sleepLines: Record = {}; for (let stepIdx = 0; stepIdx < STEP_PATTERNS.length; stepIdx++) { const pattern = STEP_PATTERNS[stepIdx]; const callLineIdx = lines.findIndex((l) => l.includes(`await ${pattern}(`)); if (callLineIdx === -1) continue; // Send line: the await call itself sendLines[stepIdx] = [callLineIdx + 1]; // 1-indexed // Sleep line: the await sleep() between this step's send and the next if (stepIdx < STEP_PATTERNS.length - 1) { const nextPattern = STEP_PATTERNS[stepIdx + 1]; const nextCallLineIdx = lines.findIndex((l) => l.includes(`await ${nextPattern}(`)); const searchEnd = nextCallLineIdx >= 0 ? nextCallLineIdx : lines.length; const found: number[] = []; for (let i = callLineIdx + 1; i < searchEnd; i++) { if (lines[i].trim().startsWith("await sleep(")) { found.push(i + 1); // 1-indexed } } sleepLines[stepIdx] = found; } else { sleepLines[stepIdx] = []; } } return { sendLines, sleepLines }; } const { sendLines: stepSendLines, sleepLines: stepSleepLines } = buildStepHighlightPhases(workflowCode); export default function Home() { return (

Drip Campaign Example

Onboarding Drip Campaign

A multi-day email campaign that uses durable sleeps between steps. The interactive timeline below visualizes how workflow compute bursts stay tiny while the campaign spans an entire week.

Try It Out

highlightCodeToHtmlLines(code))} stepSendLines={stepSendLines} stepSleepLines={stepSleepLines} />

); } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @theme { --color-background-100: #0a0a0a; --color-background-200: #171717; --color-gray-100: #1a1a1a; --color-gray-200: #1f1f1f; --color-gray-300: #292929; --color-gray-400: #737373; --color-gray-500: #525252; --color-gray-600: #404040; --color-gray-700: #262626; --color-gray-800: #171717; --color-gray-900: #a1a1a1; --color-gray-1000: #ededed; --color-blue-700: #0070F3; --color-red-700: #E5484D; --color-amber-700: #FFB224; --color-green-700: #46A758; --color-violet-700: #8B5CF6; --color-cyan-700: #06B6D4; --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } body { background: #0a0a0a; color: #ededed; font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif; } /* Prism token colors — Geist dark-mode palette Extracted from vercel.com/geist/code-block (dark theme) */ .token.keyword, .token.keyword.control-flow { color: #f75f8f; } /* pink — keywords */ .token.plain, .token.parameter, .token.punctuation, .token.plain-text, .token.property-access, .token.operator, .token.tag.punctuation { color: #ededed; } /* gray-1000 — plain text */ .token.function, .token.function.maybe-class-name { color: #bf7af0; } /* purple — functions */ .token.tag { color: #62c073; } /* green — JSX/HTML tags */ .token.literal-property.property { color: #ff6166; } /* red — properties */ .token.string, .token.boolean { color: #62c073; } /* green — strings, booleans */ .token.comment { color: #a1a1a1; } /* gray-900 — comments */ .token.class-name { color: #52a8ff; } /* blue — types */ .token.number { color: #62c073; } /* green — numbers */ .token.attr-name { color: #ff6166; } /* red — attribute names */ .token.attr-value { color: #62c073; } /* green — attribute values */ .token.builtin { color: #52a8ff; } /* blue — builtins */ .token.template-string { color: #62c073; } /* green — template literals */ .token.interpolation { color: #ededed; } /* gray-1000 — interpolation */ [V0_FILE]javascript:file="postcss.config.mjs" const config = { plugins: { "@tailwindcss/postcss": {}, }, }; export default config; [V0_FILE]typescript:file="workflows/onboarding-drip.ts" import { sleep } from "workflow"; export async function runOnboardingDrip(email: string) { "use workflow"; // Day 0: Send welcome email immediately await sendWelcomeEmail(email); // Day 1: Wait 1 day, then send getting started tips await sleep("1d"); await sendGettingStartedEmail(email); // Day 3: Wait 2 more days (total 3 days), then send feature highlights await sleep("2d"); await sendFeatureHighlightsEmail(email); // Day 7: Wait 4 more days (total 7 days), then send follow-up await sleep("4d"); await sendFollowUpEmail(email); return { email, status: "completed", totalDays: 7 }; } async function sendWelcomeEmail(email: string) { "use step"; console.log(`[Day 0] Sending welcome email to ${email}`); // In production, integrate with your email provider (Resend, SendGrid, etc.) // await resend.emails.send({ // from: 'onboarding@yourapp.com', // to: email, // subject: 'Welcome to Our App!', // html: '

Welcome!

We are excited to have you...

' // }); return { type: "welcome", sentAt: new Date().toISOString() }; } async function sendGettingStartedEmail(email: string) { "use step"; console.log(`[Day 1] Sending getting started tips to ${email}`); // In production, integrate with your email provider // await resend.emails.send({ // from: 'onboarding@yourapp.com', // to: email, // subject: 'Getting Started Tips', // html: '

Tips to get you started

...' // }); return { type: "getting_started", sentAt: new Date().toISOString() }; } async function sendFeatureHighlightsEmail(email: string) { "use step"; console.log(`[Day 3] Sending feature highlights to ${email}`); // In production, integrate with your email provider // await resend.emails.send({ // from: 'onboarding@yourapp.com', // to: email, // subject: 'Discover Powerful Features', // html: '

Feature Highlights

...' // }); return { type: "feature_highlights", sentAt: new Date().toISOString() }; } async function sendFollowUpEmail(email: string) { "use step"; console.log(`[Day 7] Sending follow-up email to ${email}`); // In production, integrate with your email provider // await resend.emails.send({ // from: 'onboarding@yourapp.com', // to: email, // subject: 'How is it going? We would love your feedback!', // html: '

We would love to hear from you

...' // }); return { type: "follow_up", sentAt: new Date().toISOString() }; } [V0_FILE]typescriptreact:file="components/onboarding-drip-demo-client.tsx" "use client"; import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react"; import { RUN_STORAGE_KEY, CAMPAIGN_COMPLETE_VIRTUAL_MS, CAMPAIGN_SEGMENTS, SleepProgress, STEP_START_TIMES_MS, clampVirtualTime, createRunState, formatVirtualClock, getSleepProgress, getTimelineSteps, getVirtualDelta, isRunComplete, parseRunState, serializeRunState, } from "./onboarding-drip-demo-state"; import { EMAIL_TEMPLATES } from "./email-templates"; import { OnboardingCodeWorkbench, SEND_CHECK_COLORS, SEND_BG_COLORS } from "./onboarding-code-workbench"; type DemoPhase = "idle" | "running" | "complete" | "error"; type RunState = { runId: string; email: string; startedAt: string; virtualTimeMs: number; }; type StepStatus = "sent" | "scheduled" | "sending"; type TimelineStep = { day: number; label: string; status: StepStatus; }; const REQUEST_FAILED_MESSAGE = "Request failed"; function extractErrorMessage(payload: unknown): string { if (!payload || typeof payload !== "object") { return REQUEST_FAILED_MESSAGE; } const maybePayload = payload as { error?: unknown; message?: unknown }; if (typeof maybePayload.error === "string") { return maybePayload.error; } if (maybePayload.error && typeof maybePayload.error === "object") { const maybeError = maybePayload.error as { message?: unknown }; if (typeof maybeError.message === "string") { return maybeError.message; } } if (typeof maybePayload.message === "string") { return maybePayload.message; } return REQUEST_FAILED_MESSAGE; } const STEP_COLORS = ["bg-green-700", "bg-blue-700", "bg-violet-700", "bg-amber-700"] as const; const SEND_TAB_BORDER_COLORS = [ "border-red-700/50", "border-cyan-700/50", "border-amber-700/50", "border-violet-700/50", ] as const; const TICK_INTERVAL_MS = 250; type CodeProps = { workflowCode: string; workflowLinesHtml: string[]; stepCodes: string[]; stepLinesHtml: string[][]; stepSendLines: Record; stepSleepLines: Record; }; export function OnboardingDripDemoClient({ workflowCode, workflowLinesHtml, stepCodes, stepLinesHtml, stepSendLines, stepSleepLines, }: CodeProps) { const [email, setEmail] = useState("user@example.com"); const [phase, setPhase] = useState("idle"); const [runState, setRunState] = useState(null); const [errorMessage, setErrorMessage] = useState(""); const [activeTab, setActiveTab] = useState(0); const [tabManuallySelected, setTabManuallySelected] = useState(false); const lastTickRef = useRef(null); const abortRef = useRef(null); const startButtonRef = useRef(null); const tabButtonRefs = useRef>([]); const timelineSteps = useMemo(() => { if (!runState) { return []; } return getTimelineSteps(runState.virtualTimeMs) as TimelineStep[]; }, [runState]); const sleepProgress = useMemo((): SleepProgress => { if (!runState) { return { isSleeping: false, durationLabel: null, wakeDay: null, percent: 0 }; } return getSleepProgress(runState.virtualTimeMs); }, [runState]); const currentSegmentIndex = useMemo(() => { if (!runState) return -1; const vt = runState.virtualTimeMs; return CAMPAIGN_SEGMENTS.findIndex((s) => vt >= s.startMs && vt < s.endMs); }, [runState]); const highlightLines = useMemo(() => { if (!runState) return []; if (tabManuallySelected) return stepSendLines[activeTab] ?? []; if (currentSegmentIndex < 0) return []; return stepSleepLines[currentSegmentIndex] ?? []; }, [activeTab, currentSegmentIndex, runState, stepSendLines, stepSleepLines, tabManuallySelected]); const highlightColorIndex = tabManuallySelected ? activeTab : (currentSegmentIndex >= 0 ? currentSegmentIndex : 0); const gutterMarks = useMemo(() => { const marks: Record = {}; for (let i = 0; i < STEP_START_TIMES_MS.length; i++) { for (const line of stepSendLines[i] ?? []) marks[line] = i; } return marks; }, [stepSendLines]); const activeSendSteps = useMemo(() => { const active = new Set(); if (!runState) return active; const vt = runState.virtualTimeMs; for (let i = 0; i < STEP_START_TIMES_MS.length; i++) { if (vt >= STEP_START_TIMES_MS[i]) active.add(i); } return active; }, [runState]); useEffect(() => { if (timelineSteps.length === 0) { return; } let latestSentIndex = -1; for (let i = timelineSteps.length - 1; i >= 0; i--) { if (timelineSteps[i].status === "sent" || timelineSteps[i].status === "sending") { latestSentIndex = i; break; } } if (latestSentIndex >= 0) { setActiveTab(latestSentIndex); setTabManuallySelected(false); } }, [timelineSteps]); const persistRunState = useCallback((nextRun: RunState | null) => { try { if (!nextRun) { localStorage.removeItem(RUN_STORAGE_KEY); return; } localStorage.setItem(RUN_STORAGE_KEY, serializeRunState(nextRun)); } catch { // localStorage may be unavailable } }, []); const getAbortSignal = useCallback((): AbortSignal => { if (!abortRef.current || abortRef.current.signal.aborted) { abortRef.current = new AbortController(); } return abortRef.current.signal; }, []); useEffect(() => { try { const stored = parseRunState(localStorage.getItem(RUN_STORAGE_KEY)); if (!stored) { return; } const normalized = createRunState(stored) as RunState; setRunState(normalized); setEmail(normalized.email); if (isRunComplete(normalized.virtualTimeMs)) { setPhase("complete"); localStorage.removeItem(RUN_STORAGE_KEY); } else { setPhase("running"); } } catch { localStorage.removeItem(RUN_STORAGE_KEY); } }, []); useEffect(() => { if (phase !== "running") { lastTickRef.current = null; return; } lastTickRef.current = Date.now(); const interval = window.setInterval(() => { const now = Date.now(); const previousTick = lastTickRef.current ?? now; lastTickRef.current = now; const virtualDelta = getVirtualDelta(now - previousTick); if (virtualDelta <= 0) { return; } setRunState((previousRun) => { if (!previousRun) { return previousRun; } const nextVirtualTimeMs = clampVirtualTime(previousRun.virtualTimeMs + virtualDelta); if (nextVirtualTimeMs <= previousRun.virtualTimeMs) { return previousRun; } const nextRun = { ...previousRun, virtualTimeMs: nextVirtualTimeMs, }; if (isRunComplete(nextVirtualTimeMs)) { setPhase("complete"); localStorage.removeItem(RUN_STORAGE_KEY); } else { persistRunState(nextRun); } return nextRun; }); }, TICK_INTERVAL_MS); return () => { window.clearInterval(interval); }; }, [persistRunState, phase]); useEffect(() => { return () => { abortRef.current?.abort(); abortRef.current = null; }; }, []); const startCampaign = useCallback(async () => { const normalizedEmail = email.trim(); if (!normalizedEmail) { return; } setErrorMessage(""); abortRef.current?.abort(); abortRef.current = null; const signal = getAbortSignal(); try { const response = await fetch("/api/mock/onboarding", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: normalizedEmail }), signal, }); if (signal.aborted) { return; } if (!response.ok) { let payload: unknown = null; try { payload = await response.json(); } catch { payload = null; } if (signal.aborted) { return; } setErrorMessage(extractErrorMessage(payload)); setPhase("error"); return; } const payload = await response.json(); if (signal.aborted) { return; } const nextRun = createRunState({ runId: payload.runId, email: payload.email, startedAt: new Date().toISOString(), virtualTimeMs: 0, }) as RunState; setRunState(nextRun); setPhase("running"); setEmail(payload.email); persistRunState(nextRun); } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } setErrorMessage("Failed to connect to server"); setPhase("error"); } }, [email, getAbortSignal, persistRunState]); const handleReset = useCallback(() => { abortRef.current?.abort(); abortRef.current = null; setRunState(null); setErrorMessage(""); setPhase("idle"); setActiveTab(0); setTabManuallySelected(false); localStorage.removeItem(RUN_STORAGE_KEY); setTimeout(() => { startButtonRef.current?.focus(); }, 0); }, []); const isRunning = phase === "running"; const focusTabByIndex = useCallback((index: number) => { const totalTabs = EMAIL_TEMPLATES.length; const nextIndex = (index + totalTabs) % totalTabs; setActiveTab(nextIndex); setTabManuallySelected(true); tabButtonRefs.current[nextIndex]?.focus(); }, []); const handleTabListKeyDown = useCallback((event: KeyboardEvent) => { if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") { return; } const target = event.target; if (!(target instanceof HTMLElement)) { return; } const focusedTab = target.closest("button[role='tab']"); if (!focusedTab) { return; } const currentIndex = tabButtonRefs.current.findIndex((button) => button === focusedTab); if (currentIndex < 0) { return; } event.preventDefault(); const direction = event.key === "ArrowRight" ? 1 : -1; focusTabByIndex(currentIndex + direction); }, [focusTabByIndex]); return (

Interactive Demo

Email address setEmail(event.target.value)} disabled={isRunning} onKeyDown={(event) => { if (event.key === "Enter" && !isRunning) { startCampaign(); } }} className="w-full flex-1 rounded-md border border-gray-400 bg-background-100 px-3 py-2 font-mono text-sm text-gray-1000 placeholder:text-gray-500 transition-colors focus:border-gray-300 focus:outline-none disabled:opacity-50" /> {phase === "complete" ? ( ) : ( )}

{phase === "error" && (

{errorMessage}

)}

{sleepProgress.isSleeping ? `sleep("${sleepProgress.durationLabel}") in progress` : phase === "idle" ? "Waiting to start..." : phase === "complete" ? "Campaign complete" : "Running step..."} {runState ? formatVirtualClock(runState.virtualTimeMs) : "Day 0 — Day 7"}

{CAMPAIGN_SEGMENTS.map((segment, index) => { const segmentDuration = segment.endMs - segment.startMs; const widthPercent = (segmentDuration / CAMPAIGN_COMPLETE_VIRTUAL_MS) * 100; const virtualTime = runState?.virtualTimeMs ?? 0; let fillPercent = 0; if (virtualTime >= segment.endMs) { fillPercent = 100; } else if (virtualTime > segment.startMs) { fillPercent = ((virtualTime - segment.startMs) / segmentDuration) * 100; } return (

{index === CAMPAIGN_SEGMENTS.length - 1 && ( )}

); })}

{EMAIL_TEMPLATES.map((template, index) => { const step = timelineSteps[index]; const status = step?.status ?? "scheduled"; return ( ); })}

{EMAIL_TEMPLATES[activeTab] && (

team@useworkflow.dev {EMAIL_TEMPLATES[activeTab].scheduleLabel}

{EMAIL_TEMPLATES[activeTab].subject}

{EMAIL_TEMPLATES[activeTab].previewText}

{/* Static HTML from email-templates.ts — no user input */}

{(timelineSteps[activeTab]?.status ?? "scheduled") === "scheduled" && (

This email has not been sent yet.

)}

); } [V0_FILE]typescript:file="components/code-highlight-server.ts" import { highlight } from 'sugar-high'; export function highlightCodeToHtmlLines(code: string): string[] { return highlight(code).split("\n"); } [V0_FILE]typescript:file="components/onboarding-drip-demo-state.ts" export const RUN_STORAGE_KEY = "onboarding-drip-demo:run-state"; export const DAY_MS = 86_400_000; const SEND_DURATION_MS = 8_640_000; // 0.1d const VIRTUAL_DAY_REAL_MS = 1_500; const STEP_DEFINITIONS = [ { day: 0, label: "Welcome Email" }, { day: 1, label: "Getting Started Tips" }, { day: 3, label: "Feature Highlights" }, { day: 7, label: "Follow-up & Feedback" }, ]; export const STEP_START_TIMES_MS = STEP_DEFINITIONS.map((s) => s.day * DAY_MS); const SLEEP_SEGMENTS = [ { day: 0, durationLabel: "1d", wakeDay: 1 }, { day: 1, durationLabel: "2d", wakeDay: 3 }, { day: 3, durationLabel: "4d", wakeDay: 7 }, ]; const LAST_STEP_DAY = STEP_DEFINITIONS[STEP_DEFINITIONS.length - 1].day; export const CAMPAIGN_COMPLETE_VIRTUAL_MS = LAST_STEP_DAY * DAY_MS + SEND_DURATION_MS; export const CAMPAIGN_SEGMENTS = [ { startMs: 0, endMs: DAY_MS }, { startMs: DAY_MS, endMs: 3 * DAY_MS }, { startMs: 3 * DAY_MS, endMs: CAMPAIGN_COMPLETE_VIRTUAL_MS }, ]; type RunStateInput = { runId: string; email: string; startedAt: string; virtualTimeMs?: number; }; function asNumber(value: unknown): number | null { if (typeof value !== "number" || Number.isNaN(value) || !Number.isFinite(value)) { return null; } return value; } export function clampVirtualTime(virtualTimeMs: number): number { const normalized = asNumber(virtualTimeMs); if (normalized === null) { return 0; } return Math.max(0, Math.min(CAMPAIGN_COMPLETE_VIRTUAL_MS, normalized)); } export function getVirtualDelta(realDeltaMs: number): number { const normalized = asNumber(realDeltaMs); if (normalized === null || normalized <= 0) { return 0; } return (normalized / VIRTUAL_DAY_REAL_MS) * DAY_MS; } export function createRunState({ runId, email, startedAt, virtualTimeMs = 0 }: RunStateInput) { const runStartedAt = typeof startedAt === "string" && !Number.isNaN(Date.parse(startedAt)) ? startedAt : new Date().toISOString(); return { runId, email, startedAt: runStartedAt, virtualTimeMs: clampVirtualTime(virtualTimeMs), }; } export function parseRunState(rawValue: string | null) { if (!rawValue) { return null; } try { const parsed = JSON.parse(rawValue); if (!parsed || typeof parsed !== "object") { return null; } if (typeof parsed.runId !== "string" || parsed.runId.length === 0) { return null; } if (typeof parsed.email !== "string" || parsed.email.length === 0) { return null; } if (typeof parsed.startedAt !== "string" || Number.isNaN(Date.parse(parsed.startedAt))) { return null; } if (asNumber(parsed.virtualTimeMs) === null) { return null; } return createRunState(parsed); } catch { return null; } } export function serializeRunState(runState: RunStateInput) { return JSON.stringify(createRunState(runState)); } export function isRunComplete(virtualTimeMs: number) { return clampVirtualTime(virtualTimeMs) >= CAMPAIGN_COMPLETE_VIRTUAL_MS; } export function getTimelineSteps(virtualTimeMs: number) { const currentVirtual = clampVirtualTime(virtualTimeMs); return STEP_DEFINITIONS.map((step) => { const stepStartMs = step.day * DAY_MS; if (currentVirtual < stepStartMs) { return { day: step.day, label: step.label, status: "scheduled" }; } if (currentVirtual < stepStartMs + SEND_DURATION_MS) { return { day: step.day, label: step.label, status: "sending" }; } return { day: step.day, label: step.label, status: "sent" }; }); } export type SleepProgress = | { isSleeping: true; durationLabel: string; wakeDay: number; percent: number } | { isSleeping: false; durationLabel: null; wakeDay: null; percent: 0 }; export function getSleepProgress(virtualTimeMs: number): SleepProgress { const currentVirtual = clampVirtualTime(virtualTimeMs); for (const segment of SLEEP_SEGMENTS) { const sleepStartMs = segment.day * DAY_MS + SEND_DURATION_MS; const wakeTimeMs = segment.wakeDay * DAY_MS; if (currentVirtual < sleepStartMs) { continue; } if (currentVirtual < wakeTimeMs) { const elapsed = currentVirtual - sleepStartMs; const total = wakeTimeMs - sleepStartMs; if (total <= 0) continue; return { isSleeping: true, durationLabel: segment.durationLabel, wakeDay: segment.wakeDay, percent: Math.min(100, Math.max(0, Math.round((elapsed / total) * 100))), }; } } return { isSleeping: false, durationLabel: null, wakeDay: null, percent: 0, }; } export function formatVirtualClock(virtualTimeMs: number) { const { day, hours } = getVirtualClockParts(virtualTimeMs); return `Day ${day}, ${hours.toString().padStart(2, "0")}:00`; } function getVirtualClockParts(virtualTimeMs: number) { const normalized = clampVirtualTime(virtualTimeMs); const day = Math.floor(normalized / DAY_MS); const remainder = normalized % DAY_MS; const totalMinutes = Math.floor((remainder / DAY_MS) * 24 * 60); const hours = Math.floor(totalMinutes / 60); return { day, hours, }; } [V0_FILE]typescriptreact:file="components/onboarding-code-workbench.tsx" "use client"; import { useState } from "react"; const EMPTY_HIGHLIGHT_SET = new Set(); type HighlightStyle = { border: string; bg: string; text: string; }; const HIGHLIGHT_STYLES: HighlightStyle[] = [ { border: "border-green-700", bg: "bg-green-700/15", text: "text-green-700" }, { border: "border-blue-700", bg: "bg-blue-700/15", text: "text-blue-700" }, { border: "border-violet-700", bg: "bg-violet-700/15", text: "text-violet-700" }, { border: "border-amber-700", bg: "bg-amber-700/15", text: "text-amber-700" }, ]; export const SEND_CHECK_COLORS = ["text-rose-500", "text-cyan-500", "text-amber-500", "text-fuchsia-500"]; export const SEND_BG_COLORS = ["bg-rose-500", "bg-cyan-500", "bg-amber-500", "bg-fuchsia-500"]; const STEP_HEADER_BG = ["bg-rose-500/10", "bg-cyan-500/10", "bg-amber-500/10", "bg-fuchsia-500/10"]; const CHECK_POINTS = "3,8.5 7,12.5 14,4.5"; const COPY_FEEDBACK_MS = 1400; type OnboardingCodeWorkbenchProps = { workflowCode: string; workflowLinesHtml: string[]; stepCodes: string[]; stepLinesHtml: string[][]; activeStepIndex: number; highlightLines: number[]; highlightColorIndex: number; gutterMarks: Record; activeSendSteps: Set; }; type CopyState = "idle" | "copied" | "failed"; function CodePane({ linesHtml, highlightLines, highlightStyle, gutterMarks, activeSendSteps, filename, code, headerBgClass, }: { linesHtml: string[]; highlightLines: Set; highlightStyle: HighlightStyle; gutterMarks?: Record; activeSendSteps?: Set; filename: string; code: string; headerBgClass?: string; }) { const [copyState, setCopyState] = useState("idle"); const handleCopy = async () => { try { await navigator.clipboard.writeText(code); setCopyState("copied"); window.setTimeout(() => setCopyState("idle"), COPY_FEEDBACK_MS); } catch { setCopyState("failed"); window.setTimeout(() => setCopyState("idle"), COPY_FEEDBACK_MS); } }; return (

{filename}

          
            {linesHtml.map((lineHtml, index) => {
              const lineNumber = index + 1;
              const isHighlighted = highlightLines.has(lineNumber);

              return (
                
                  
                    {gutterMarks?.[lineNumber] !== undefined && (
                      
                    )}
                  
                  
                    {lineNumber}
                  
                   0 ? lineHtml : " ",
                    }}
                  />
                
              );
            })}

); } export function OnboardingCodeWorkbench({ workflowCode, workflowLinesHtml, stepCodes, stepLinesHtml, activeStepIndex, highlightLines, highlightColorIndex, gutterMarks, activeSendSteps, }: OnboardingCodeWorkbenchProps) { const workflowHighlightLineSet = new Set(highlightLines); const activeHighlightStyle = HIGHLIGHT_STYLES[highlightColorIndex] ?? HIGHLIGHT_STYLES[0]; const stepIndex = activeStepIndex >= 0 ? activeStepIndex : 0; const currentStepLinesHtml = stepLinesHtml[stepIndex] ?? []; const currentStepCode = stepCodes[stepIndex] ?? ""; return (

); } [V0_FILE]typescript:file="components/email-templates.ts" type EmailTemplate = { id: string; day: number; label: string; scheduleLabel: string; subject: string; previewText: string; bodyHtml: string; }; export const EMAIL_TEMPLATES: EmailTemplate[] = [ { id: "welcome", day: 0, label: "Welcome", scheduleLabel: "Immediately after signup", subject: "Welcome to Workflow DevKit", previewText: "Your first run is minutes away. Here is what to expect in your first week.", bodyHtml: `

Welcome to Workflow DevKit

Hi there,

Great to have you onboard. Over the next seven days, we will share practical examples to help you ship durable workflows with confidence.

Start by launching your first onboarding run. You can follow each step, pause safely, and resume without losing state.

Open Workflow DevKit

Thanks,
Workflow Team

`.trim(), }, { id: "getting-started-tips", day: 1, label: "Getting Started Tips", scheduleLabel: "After 1 day", subject: "Getting started tips for your first workflow", previewText: "Use durable sleep, deterministic steps, and safe retries from day one.", bodyHtml: `

Three tips for a smoother launch

Wrap side effects in steps so retries are isolated.
Use durable sleep() instead of cron for delayed work.
Store deterministic identifiers for external callbacks.

These patterns keep your workflows simple while still handling failures and restarts.

Browse the docs

`.trim(), }, { id: "feature-highlights", day: 3, label: "Feature Highlights", scheduleLabel: "After 3 days", subject: "Feature highlights you should try next", previewText: "Live streams, manual webhooks, and workflow signals in one developer-friendly toolkit.", bodyHtml: `

What users explore most in week one

Teams usually start with three features:

Streaming run updates to show live progress
Webhook waits for human-in-the-loop approval steps
Durable retries with clear execution logs

You can combine all three without introducing a queue stack.

`.trim(), }, { id: "follow-up-feedback", day: 7, label: "Follow-up & Feedback", scheduleLabel: "After 7 days", subject: "How did your first workflow week go?", previewText: "Reply with feedback and tell us what examples you want to see next.", bodyHtml: `

Thanks for trying Workflow DevKit

You made it through the first week. We would love to hear what worked, what felt confusing, and what you want us to build next.

Hit reply with your feedback or share your workflow on X so we can amplify it.

We read every response.

Team Workflow

`.trim(), }, ]; [V0_FILE]json:file="package.json" { "name": "onboarding-drip", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "16.0.10", "react": "19.2.3", "react-dom": "19.2.3", "sugar-high": "^0.9.5", "workflow": "4.0.1-beta.44" }, "devDependencies": { "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "tailwindcss": "^4", "typescript": "^5" } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "react-jsx", "incremental": true, "plugins": [ { "name": "next" }, { "name": "workflow" } ], "paths": { "@/*": ["./*"] } }, "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", ".next/dev/types/**/*.ts", "**/*.mts" ], "exclude": ["node_modules"] } [V0_FILE]typescript:file="next.config.ts" import { withWorkflow } from "workflow/next"; import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { unoptimized: true, }, }; export default withWorkflow(nextConfig);