[V0_FILE]typescriptreact:file="app/components/demo.tsx" "use client"; import { useState, useCallback, useRef, useEffect, type ReactNode } from "react"; type WorkflowStatus = "idle" | "waiting" | "approved" | "rejected" | "timeout"; interface WorkflowState { status: WorkflowStatus; runId: string | null; orderId: string; token: string | null; timeout: string; elapsed: number; timeoutMs: number; comment?: string; approvedBy?: string; error?: string; } const initialState: WorkflowState = { status: "idle", runId: null, orderId: "", token: null, timeout: "30s", elapsed: 0, timeoutMs: 30000, }; export function ApprovalDemo() { const [state, setState] = useState(initialState); const [orderId, setOrderId] = useState("order_123"); const [approvedBy] = useState("manager@example.com"); const pollingRef = useRef | null>(null); const abortRef = useRef(null); const startButtonRef = useRef(null); const stopPolling = useCallback(() => { if (pollingRef.current) { clearInterval(pollingRef.current); pollingRef.current = null; } }, []); const getAbortSignal = useCallback((): AbortSignal => { if (!abortRef.current || abortRef.current.signal.aborted) { abortRef.current = new AbortController(); } return abortRef.current.signal; }, []); useEffect(() => { return () => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; }; }, [stopPolling]); const pollStatus = useCallback( (token: string) => { stopPolling(); pollingRef.current = setInterval(async () => { try { const signal = getAbortSignal(); const res = await fetch( `/api/mock/approve?token=${encodeURIComponent(token)}`, { signal } ); if (signal.aborted || !res.ok) return; const data = await res.json(); if (signal.aborted) return; setState((prev) => ({ ...prev, status: data.status, elapsed: data.elapsed, comment: data.comment, approvedBy: data.approvedBy, })); if (data.status !== "waiting") { stopPolling(); } } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } // ignore polling errors } }, 500); }, [getAbortSignal, stopPolling] ); const handleStart = async () => { if (!orderId.trim()) return; setState((prev) => ({ ...prev, error: undefined })); stopPolling(); abortRef.current?.abort(); abortRef.current = null; const signal = getAbortSignal(); try { const res = await fetch("/api/mock/start", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ orderId, timeout: state.timeout }), signal, }); if (signal.aborted) return; const data = await res.json(); if (signal.aborted) return; if (!res.ok) { if (signal.aborted) return; setState((prev) => ({ ...prev, error: data.error })); return; } if (signal.aborted) return; setState({ status: "waiting", runId: data.runId, orderId: data.orderId, token: data.approvalToken, timeout: state.timeout, elapsed: 0, timeoutMs: parseTimeoutToMs(state.timeout), }); if (signal.aborted) { return; } pollStatus(data.approvalToken); } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } setState((prev) => ({ ...prev, error: "Failed to start workflow", })); } }; const handleDecision = async (approved: boolean) => { if (!state.token) return; const signal = getAbortSignal(); try { const res = await fetch("/api/mock/approve", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ token: state.token, approved, approvedBy: approvedBy || undefined, }), signal, }); if (signal.aborted) return; const data = await res.json(); if (signal.aborted) return; if (!res.ok) { if (signal.aborted) return; setState((prev) => ({ ...prev, error: data.error })); return; } stopPolling(); if (signal.aborted) return; setState((prev) => ({ ...prev, status: approved ? "approved" : "rejected", approvedBy: approvedBy || undefined, })); } catch (error) { if (error instanceof Error && error.name === "AbortError") { return; } setState((prev) => ({ ...prev, error: "Failed to send decision", })); } }; const handleReset = () => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; setState(initialState); setTimeout(() => { startButtonRef.current?.focus(); }, 0); }; const isIdle = state.status === "idle"; const isWaiting = state.status === "waiting"; const isDone = state.status === "approved" || state.status === "rejected" || state.status === "timeout"; const raceWinner = state.status === "timeout" ? "sleep(timeout)" : "approvalHook(token)"; const raceLoser = state.status === "timeout" ? "approvalHook(token)" : "sleep(timeout)"; return (

{state.error && (

{state.error}

)} {/* Step 1: Submit Order */} {isIdle ? (

Order ID setOrderId(e.target.value)} placeholder="order_123" className="w-full bg-background-100 border border-gray-400 rounded-md px-3 py-2 text-sm font-mono text-gray-1000 placeholder:text-gray-500 focus:border-gray-300 focus:outline-none transition-colors disabled:opacity-50" />

Timeout

) : (

Order{" "} {state.orderId}{" "} submitted for approval.

)} {/* Step 2: Workflow Suspends */} {isWaiting ? ( ) : isDone ? (

Workflow resumed because{" "} {raceWinner}{" "} won Promise.race().

{raceLoser}{" "} lost and was ignored. Final status:{" "} {state.status}.

) : (

The workflow will suspend here, using zero compute while it waits for a signal.

)} {/* Step 3: Approver Clicks the Link */} {isWaiting ? (

) : state.status === "approved" || state.status === "rejected" || state.status === "timeout" ? ( ) : (

An approval email will be sent with a link containing the hook token.

)} {isDone && ( )}

); } // --- Step Card --- type StepState = "active" | "done" | "default" | "pending"; function StepCard({ step, title, state, children, }: { step: number; title: string; state: StepState; children: ReactNode; }) { return (

{/* Badge + title sitting on the top border */}

{title}

{children}

); } // --- Sub-components --- function WorkflowStatusPanel({ elapsed, timeoutMs, orderId, }: { elapsed: number; timeoutMs: number; orderId: string; }) { const progress = Math.min((elapsed / timeoutMs) * 100, 100); const remaining = Math.max(0, Math.ceil((timeoutMs - elapsed) / 1000)); return (

Order {orderId} · {remaining}s until sleep(timeout) can win

First branch to resolve wins and resumes the workflow. The other branch is ignored.

); } function MockApprovalEmail({ orderId, token, approvedBy, onDecision, }: { orderId: string; token: string; approvedBy: string; onDecision: (approved: boolean) => void; }) { const baseUrl = "https://acme.com/api/approve"; return (

{/* Email chrome */}

From: orders@acme.com

To: {approvedBy}

Subject: Approval required for {orderId}

{/* Email body — lighter background to feel like an email */}

Hi {approvedBy.split("@")[0]},

Order {orderId}{" "} ($2,340.00) has been submitted and needs your approval before it can be fulfilled.

Click here to approve:{" "}

Click here to reject:{" "}

Thanks,
The Acme Orders Team

); } function HookExplainer({ token }: { token: string }) { const baseUrl = "https://acme.com/api/approve"; return (

Notice the hook token {token}{" "} embedded in each URL. That's how the server knows which workflow to resume. Any system that can construct this token — a CLI script, a Slack bot, a cron job — can wake the workflow.

{`curl -X POST ${baseUrl} \\
  -H "Content-Type: application/json" \\
  -d '{"token":"${token}","approved":true}'`}

); } function ResultDisplay({ status, orderId, comment, approvedBy, }: { status: "approved" | "rejected" | "timeout"; orderId: string; comment?: string; approvedBy?: string; }) { const config = { approved: { label: "Approved", bg: "bg-green-700/10", border: "border-green-700/40", text: "text-green-700", raceSummary: "Race winner: approvalHook(token). sleep(timeout) was ignored.", icon: ( ), }, rejected: { label: "Rejected", bg: "bg-red-700/10", border: "border-red-700/40", text: "text-red-700", raceSummary: "Race winner: approvalHook(token). sleep(timeout) was ignored.", icon: ( ), }, timeout: { label: "Timed Out", bg: "bg-amber-700/10", border: "border-amber-700/40", text: "text-amber-700", raceSummary: "Race winner: sleep(timeout). approvalHook(token) was ignored.", icon: ( ), }, }; const c = config[status]; return (

{c.icon}

Order {orderId}: {c.label}

{c.raceSummary}

{status === "timeout" && (

No approval arrived before the deadline, so the order was automatically cancelled.

)} {comment && (

“{comment}”

)} {approvedBy && (

By {approvedBy}

)}

); } function parseTimeoutToMs(timeout: string): number { const match = timeout.match(/^(\d+)(ms|s|m|h|d)$/); if (!match) return 30000; const value = parseInt(match[1], 10); switch (match[2]) { case "ms": return value; case "s": return value * 1000; case "m": return value * 60 * 1000; case "h": return value * 60 * 60 * 1000; case "d": return value * 24 * 60 * 60 * 1000; default: return 30000; } } [V0_FILE]typescriptreact:file="app/components/code-block.tsx" "use client"; import { Highlight, type PrismTheme } from "prism-react-renderer"; // Empty theme — all token colors come from CSS classes const emptyTheme: PrismTheme = { plain: {}, styles: [], }; function parseHighlightLines(highlight?: string): Set { if (!highlight) return new Set(); const lines = new Set(); for (const part of highlight.split(",")) { const trimmed = part.trim(); if (trimmed.includes("-")) { const [start, end] = trimmed.split("-").map(Number); for (let i = start; i <= end; i++) lines.add(i); } else { lines.add(Number(trimmed)); } } return lines; } export function CodeBlock({ code, language = "tsx", highlight, }: { code: string; language?: string; highlight?: string; }) { const highlightedLines = parseHighlightLines(highlight); return ( {({ className, style, tokens, getLineProps, getTokenProps }) => (

          
            {tokens.map((line, i) => {
              const lineNumber = i + 1;
              const isHighlighted = highlightedLines.has(lineNumber);
              const lineProps = getLineProps({ line });
              return (
                
                  {line.map((token, key) => (
                    
                  ))}
                
              );
            })}

)} ); } [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: "Approval Gate \u2013 Workflow DevKit Example", description: "Demonstrates the \u201CSignal + timer\u201D pattern with Workflow DevKit", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( Skip to main content {children} ); } [V0_FILE]typescript:file="app/api/mock/start/route.ts" import { createApiErrorResponse, createApiSuccessResponse } from "../api"; // In-memory store for mock workflow runs const runs = globalThis as unknown as { __mockApprovalRuns?: Map< string, { runId: string; orderId: string; timeout: number; status: "waiting" | "approved" | "rejected" | "timeout"; createdAt: number; comment?: string; approvedBy?: string; } >; }; export function getRunStore() { if (!runs.__mockApprovalRuns) { runs.__mockApprovalRuns = new Map(); } return runs.__mockApprovalRuns; } export async function POST(request: Request) { let body: unknown; try { body = await request.json(); } catch { return createApiErrorResponse( { code: "INVALID_REQUEST", message: "Invalid JSON body", }, { status: 400 } ); } const { orderId, timeout = "30s" } = (body ?? {}) as { orderId?: unknown; timeout?: unknown; }; if (typeof orderId !== "string" || orderId.trim().length === 0) { return createApiErrorResponse( { code: "INVALID_REQUEST", message: "orderId is required", }, { status: 400 } ); } const normalizedOrderId = orderId.trim(); const normalizedTimeout = typeof timeout === "string" ? timeout : "30s"; const store = getRunStore(); const runId = `mock_run_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`; const token = `order_approval:${normalizedOrderId}`; // Parse timeout string to milliseconds const timeoutMs = parseTimeout(normalizedTimeout); store.set(token, { runId, orderId: normalizedOrderId, timeout: timeoutMs, status: "waiting", createdAt: Date.now(), }); // Set up auto-timeout — check runId so a restarted demo // with the same token doesn't get timed out by the old callback setTimeout(() => { const run = store.get(token); if (run && run.status === "waiting" && run.runId === runId) { run.status = "timeout"; } }, timeoutMs); return createApiSuccessResponse({ message: "Approval workflow started (mock)", runId, orderId: normalizedOrderId, timeout: normalizedTimeout, approvalToken: token, }); } function parseTimeout(timeout: string): number { const match = timeout.match(/^(\d+)(ms|s|m|h|d)$/); if (!match) return 30000; const value = parseInt(match[1], 10); switch (match[2]) { case "ms": return value; case "s": return value * 1000; case "m": return value * 60 * 1000; case "h": return value * 60 * 60 * 1000; case "d": return value * 24 * 60 * 60 * 1000; default: return 30000; } } [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/approve/route.ts" import { createApiErrorResponse, createApiSuccessResponse } from "../api"; // Import the shared run store const runs = globalThis as unknown as { __mockApprovalRuns?: Map< string, { runId: string; orderId: string; timeout: number; status: "waiting" | "approved" | "rejected" | "timeout"; createdAt: number; comment?: string; approvedBy?: string; } >; }; function getRunStore() { if (!runs.__mockApprovalRuns) { runs.__mockApprovalRuns = new Map(); } return runs.__mockApprovalRuns; } export async function POST(request: Request) { let body: unknown; try { body = await request.json(); } catch { return createApiErrorResponse( { code: "INVALID_JSON_BODY", message: "Invalid JSON body", }, { status: 400 } ); } const { token, approved, comment, approvedBy } = (body ?? {}) as { token?: unknown; approved?: unknown; comment?: unknown; approvedBy?: unknown; }; if (typeof token !== "string" || token.trim().length === 0) { return createApiErrorResponse( { code: "MISSING_TOKEN", message: "token is required", }, { status: 400 } ); } if (typeof approved !== "boolean") { return createApiErrorResponse( { code: "INVALID_APPROVAL_DECISION", message: "approved must be a boolean", }, { status: 400 } ); } const store = getRunStore(); const normalizedToken = token.trim(); const run = store.get(normalizedToken); if (!run) { return createApiErrorResponse( { code: "RUN_NOT_FOUND", message: "No workflow found for this token", }, { status: 404 } ); } if (run.status !== "waiting") { return createApiSuccessResponse({ message: `Workflow already resolved with status: ${run.status}`, runId: run.runId, token: normalizedToken, status: run.status, approved: run.status === "approved", comment: run.comment, approvedBy: run.approvedBy, alreadyResolved: true, }); } run.status = approved ? "approved" : "rejected"; run.comment = typeof comment === "string" ? comment : undefined; run.approvedBy = typeof approvedBy === "string" ? approvedBy : undefined; return createApiSuccessResponse({ message: approved ? "Order approved (mock)" : "Order rejected (mock)", runId: run.runId, token: normalizedToken, status: run.status, approved, comment: run.comment, approvedBy: run.approvedBy, }); } export async function GET(request: Request) { const { searchParams } = new URL(request.url); const token = searchParams.get("token"); if (!token) { return createApiErrorResponse( { code: "MISSING_TOKEN", message: "token query parameter is required", }, { status: 400 } ); } const store = getRunStore(); const run = store.get(token); if (!run) { return createApiErrorResponse( { code: "RUN_NOT_FOUND", message: "No workflow found for this token", }, { status: 404 } ); } // Check if it should have timed out const elapsed = Date.now() - run.createdAt; if (run.status === "waiting" && elapsed > run.timeout) { run.status = "timeout"; } return createApiSuccessResponse({ runId: run.runId, orderId: run.orderId, status: run.status, elapsed, timeout: run.timeout, comment: run.comment, approvedBy: run.approvedBy, }); } [V0_FILE]typescript:file="app/api/start/route.ts" import { start } from "workflow/api"; import { approvalGate } from "@/workflows/approval-gate"; import type { StringValue } from "ms"; 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 orderId = body.orderId; const timeout = body.timeout; if (typeof orderId !== "string" || orderId.trim().length === 0) { return createErrorResponse(400, "MISSING_ORDER_ID", "orderId is required"); } const normalizedOrderId = orderId.trim(); const normalizedTimeout: StringValue = typeof timeout === "string" ? (timeout as StringValue) : "30s"; let run: Awaited>; try { // Start the approval gate workflow run = await start(approvalGate, [normalizedOrderId, normalizedTimeout]); } catch (error) { const message = error instanceof Error ? error.message : "Failed to start workflow"; return createErrorResponse(500, "WORKFLOW_START_FAILED", message); } console.log(`Started approval gate workflow for order ${normalizedOrderId}`); console.log(`Run ID: ${run.runId}`); console.log(`Approval token: order_approval:${normalizedOrderId}`); return Response.json({ ok: true, message: "Approval workflow started", runId: run.runId, orderId: normalizedOrderId, timeout: normalizedTimeout, approvalToken: `order_approval:${normalizedOrderId}`, }); } [V0_FILE]typescript:file="app/api/approve/route.ts" import { orderApprovalHook, type ApprovalPayload } from "@/workflows/approval-gate"; 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 { token, approved, comment, approvedBy } = body; if (typeof token !== "string" || token.trim().length === 0) { return createErrorResponse(400, "MISSING_TOKEN", "token is required"); } if (typeof approved !== "boolean") { return createErrorResponse( 400, "INVALID_APPROVAL_DECISION", "approved must be a boolean" ); } const normalizedToken = token.trim(); const payload: ApprovalPayload = { approved, comment: typeof comment === "string" ? comment : undefined, approvedBy: typeof approvedBy === "string" ? approvedBy : undefined, }; let result: Awaited>; try { // Resume the hook with the approval decision result = await orderApprovalHook.resume(normalizedToken, payload); } catch (error) { const message = error instanceof Error ? error.message : "Failed to resume hook"; return createErrorResponse(500, "HOOK_RESUME_FAILED", message); } if (!result) { return createErrorResponse( 404, "HOOK_NOT_FOUND", "Hook not found or already resolved" ); } console.log(`Approval sent for token: ${normalizedToken}`); console.log(`Decision: ${approved ? "APPROVED" : "REJECTED"}`); return Response.json({ ok: true, message: approved ? "Order approved" : "Order rejected", runId: result.runId, token: normalizedToken, approved, comment: payload.comment, approvedBy: payload.approvedBy, }); } [V0_FILE]typescriptreact:file="app/page.tsx" import { ApprovalDemo } from "./components/demo"; import { CodeBlock } from "./components/code-block"; const workflowCode = `import { defineHook, sleep } from "workflow"; const orderApprovalHook = defineHook(); export async function approvalGate( orderId: string, timeout: string = "24h" ) { "use workflow"; // Step 1 — sends the email you saw above. await requestApproval(orderId); // This token is embedded in every URL in that email. const hook = orderApprovalHook.create({ token: \`order_approval:\${orderId}\`, }); // Step 2 — the workflow pauses here. That's the spinner. // Clicking a link in the email resolves the hook. // If nobody clicks, sleep() wins the race. const result = await Promise.race([ hook.then((payload) => ({ type: "approval", payload })), sleep(timeout).then(() => ({ type: "timeout", payload: null })), ]); if (result.type === "timeout") { await cancelOrder(orderId, "Approval timed out"); return { orderId, status: "timeout" }; } // Step 3 — the signal arrived. Fulfill or cancel. const { approved, comment } = result.payload!; if (approved) await fulfillOrder(orderId); else await cancelOrder(orderId, comment); return { orderId, status: approved ? "approved" : "rejected" }; } // Each step is cached and retryable. async function requestApproval(orderId: string) { "use step"; await sendEmail({ to: approver, token: \`order_approval:\${orderId}\` }); } async function fulfillOrder(orderId: string) { "use step"; await processPayment(orderId); await shipItems(orderId); } async function cancelOrder(orderId: string, reason: string) { "use step"; await releaseInventory(orderId); await notifyCustomer(orderId, reason); }`; export default function Home() { return (

Workflow DevKit Example

Approval Gate

Your workflow needs a human to say {"\u201C"}yes.{"\u201D"} It pauses durably until a signal arrives. No polling, no cron, no database. One Promise.race().

How It Works

Order comes in

The workflow starts and sends a notification with a deterministic token {"\u2014"}{" "} order_approval:{"{"}orderId{"}"} . Put it in an email, wire it to a Slack action, call it from a CLI. If you know the order ID, you know the token.
Approval vs timeout race starts

One{" "} Promise.race() {" "}{"\u2014"} two durable branches run in parallel: approval hook vs timeout timer. The hook resolves when someone approves,{" "} sleep("24h") {" "}resolves after 24 hours. Whichever resolves first wins. The losing branch is discarded for this run.
Winner locks the outcome

If approval arrives first, the workflow resumes and fulfills or rejects. If timeout fires first, it cancels as timed out. A late approval after timeout will not change the result {"\u2014"} and a timeout firing after approval is ignored too.

Try It

Submit an order, watch the workflow pause, then send the signal {"\u2014"} click a link or copy the curl command.

Why Hooks

No polling, no cron, no database {"\u2013"} The workflow doesn't know who or what will resume it. Any system that can POST with the token works.
Pauses durably {"\u2013"} The workflow suspends with zero compute. It can wait for seconds or weeks. The sleep survives deploys, restarts, everything.
Deterministic tokens {"\u2013"} Stable across restarts. Derived from your data (e.g. order ID), so external systems can construct them without storing state.
Typed payloads {"\u2013"} The data sent back to the workflow is typed end-to-end with{" "} defineHook<T>() .

The Code

workflows/approval-gate.ts

); } [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" export default { plugins: { "@tailwindcss/postcss": {}, }, }; [V0_FILE]typescript:file="workflows/approval-gate.ts" import { defineHook, sleep } from "workflow"; import type { StringValue } from "ms"; // Define the approval payload type export interface ApprovalPayload { approved: boolean; comment?: string; approvedBy?: string; } // Define the hook for type-safe approval handling export const orderApprovalHook = defineHook(); // Result type for the workflow export interface ApprovalResult { orderId: string; status: "approved" | "rejected" | "timeout"; comment?: string; approvedBy?: string; } /** * Approval Gate Workflow * * Demonstrates the "Signal + timer" pattern: * - Creates a deterministic hook token for external systems to resume * - Uses Promise.race to implement timeout behavior * - Waits for human approval or times out after specified duration */ export async function approvalGate( orderId: string, timeout: StringValue = "24h" ): Promise { "use workflow"; // Request approval (e.g., send email, create ticket, notify Slack) await requestApproval(orderId); // Create hook with deterministic token based on orderId // This allows external systems to construct the token and resume the workflow const hook = orderApprovalHook.create({ token: `order_approval:${orderId}`, }); console.log(`[Order ${orderId}] Waiting for approval with token: ${hook.token}`); console.log(`[Order ${orderId}] Timeout set to: ${timeout}`); // Race between approval hook and timeout // Signal + timer pattern: race between hook and timeout const result = await Promise.race([ // Wait for external approval via hook hook.then((payload) => ({ type: "approval" as const, payload, })), // Timeout after specified duration sleep(timeout).then(() => ({ type: "timeout" as const, payload: null, })), ]); if (result.type === "timeout") { // Handle timeout - order was not approved in time console.log(`[Order ${orderId}] Approval timed out after ${timeout}`); await cancelOrder(orderId, "Approval timed out"); return { orderId, status: "timeout", }; } // Handle approval response const { approved, comment, approvedBy } = result.payload!; if (approved) { console.log(`[Order ${orderId}] Approved by ${approvedBy || "unknown"}`); await fulfillOrder(orderId); return { orderId, status: "approved", comment, approvedBy, }; } else { console.log(`[Order ${orderId}] Rejected by ${approvedBy || "unknown"}`); await cancelOrder(orderId, comment || "Rejected by approver"); return { orderId, status: "rejected", comment, approvedBy, }; } } /** * Step: Request approval from external system * In a real app, this might send an email, create a ticket, or notify Slack */ async function requestApproval(orderId: string): Promise { "use step"; console.log(`[Order ${orderId}] Sending approval request...`); // Simulate sending approval request // In production, you might: // - Send an email with approve/reject links containing the token // - Create a ticket in a ticketing system // - Post to Slack with action buttons // - Call an external approval API console.log(`[Order ${orderId}] Approval request sent`); console.log(`[Order ${orderId}] Token: order_approval:${orderId}`); } /** * Step: Fulfill the order after approval */ async function fulfillOrder(orderId: string): Promise { "use step"; console.log(`[Order ${orderId}] Fulfilling order...`); // Simulate order fulfillment // In production: process payment, ship items, etc. console.log(`[Order ${orderId}] Order fulfilled successfully`); } /** * Step: Cancel the order (on rejection or timeout) */ async function cancelOrder(orderId: string, reason: string): Promise { "use step"; console.log(`[Order ${orderId}] Cancelling order...`); console.log(`[Order ${orderId}] Reason: ${reason}`); // Simulate order cancellation // In production: release inventory, refund if needed, notify customer console.log(`[Order ${orderId}] Order cancelled`); } [V0_FILE]json:file="package.json" { "name": "approval-gate", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "16.0.10", "prism-react-renderer": "^2.4.1", "react": "19.2.3", "react-dom": "19.2.3", "workflow": "4.1.0-beta.53" }, "devDependencies": { "@tailwindcss/postcss": "^4", "@types/ms": "^2.1.0", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "ms": "^2.1.3", "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 = {}; export default withWorkflow(nextConfig);

How It Works

Order comes in

Approval vs timeout race starts

Winner locks the outcome

Try It

Why Hooks

The Code