[V0_FILE]typescriptreact:file="app/components/demo.tsx" "use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { GatewayLogEvent, GatewaySignalKind, MockGatewaySnapshot, SignalSnapshot, } from "@/app/api/mock/store"; import { GatewayCodeWorkbench } from "@/components/gateway-code-workbench"; type HighlightTone = "amber" | "cyan" | "green" | "red"; type GutterMarkKind = "success" | "fail"; type StartResponse = { runId: string; status: MockGatewaySnapshot["status"]; snapshot: MockGatewaySnapshot; }; type SignalResponse = StartResponse; type GatewayWorkflowLineMap = { createTokens: number[]; race: number[]; ship: number[]; returnShipped: number[]; returnTimeout: number[]; }; type GatewayStepLineMap = { shipFetch: number[]; }; type Props = { workflowCode: string; workflowHtmlLines: string[]; workflowLineMap: GatewayWorkflowLineMap; stepCode: string; stepHtmlLines: string[]; stepLineMap: GatewayStepLineMap; }; const POLL_INTERVAL_MS = 120; async function postJson(url: string, body: Record, signal: AbortSignal): Promise { const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), signal, }); const payload = (await res.json().catch(() => ({ error: "Failed to parse JSON response" }))) as | T | { error?: string }; if (signal.aborted) throw new DOMException("Request aborted", "AbortError"); if (!res.ok) { const msg = typeof payload === "object" && payload && "error" in payload ? payload.error ?? `Request failed (${res.status})` : `Request failed (${res.status})`; throw new Error(msg); } return payload as T; } export function EventGatewayDemo({ workflowCode, workflowHtmlLines, workflowLineMap, stepCode, stepHtmlLines, stepLineMap, }: Props) { const [runId, setRunId] = useState(null); const [snapshot, setSnapshot] = useState(null); const [error, setError] = useState(null); const pollTimerRef = useRef | null>(null); const inFlightRef = useRef(false); const abortRef = useRef(null); const stopPolling = useCallback(() => { if (pollTimerRef.current) { clearInterval(pollTimerRef.current); pollTimerRef.current = null; } inFlightRef.current = false; }, []); const ensureAbortController = useCallback(() => { if (!abortRef.current || abortRef.current.signal.aborted) { abortRef.current = new AbortController(); } return abortRef.current; }, []); useEffect(() => { return () => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; }; }, [stopPolling]); const fetchStatus = useCallback(async (targetRunId: string, signal: AbortSignal) => { const res = await fetch(`/api/mock/status?runId=${encodeURIComponent(targetRunId)}`, { cache: "no-store", signal, }); const payload = (await res.json().catch(() => ({ error: "Failed to parse status response" }))) as | MockGatewaySnapshot | { error?: string }; if (signal.aborted) throw new DOMException("Request aborted", "AbortError"); if (!res.ok) { const msg = typeof payload === "object" && payload && "error" in payload ? payload.error ?? `Status request failed (${res.status})` : `Status request failed (${res.status})`; throw new Error(msg); } return payload as MockGatewaySnapshot; }, []); const beginPolling = useCallback( (targetRunId: string) => { stopPolling(); const poll = async () => { if (inFlightRef.current) return; inFlightRef.current = true; let signal: AbortSignal | null = null; try { const controller = ensureAbortController(); signal = controller.signal; const next = await fetchStatus(targetRunId, signal); if (signal.aborted) return; setSnapshot(next); if (next.status === "shipped" || next.status === "timeout") { stopPolling(); } } catch (err) { if ((signal && signal.aborted) || (err instanceof Error && err.name === "AbortError")) return; stopPolling(); setError(err instanceof Error ? err.message : "Failed to read status"); } finally { inFlightRef.current = false; } }; void poll(); pollTimerRef.current = setInterval(() => void poll(), POLL_INTERVAL_MS); }, [ensureAbortController, fetchStatus, stopPolling] ); const handleStart = useCallback(async () => { setError(null); stopPolling(); abortRef.current?.abort(); abortRef.current = null; const controller = ensureAbortController(); const signal = controller.signal; try { const payload = await postJson("/api/mock/start", { timeoutMs: 6500 }, signal); if (signal.aborted) return; setRunId(payload.runId); setSnapshot(payload.snapshot); beginPolling(payload.runId); } catch (err) { if (signal.aborted || (err instanceof Error && err.name === "AbortError")) return; setError(err instanceof Error ? err.message : "Failed to start gateway"); } }, [beginPolling, ensureAbortController, stopPolling]); const handleReset = useCallback(() => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; setRunId(null); setSnapshot(null); setError(null); }, [stopPolling]); const sendSignal = useCallback( async (kind: GatewaySignalKind) => { if (!runId) return; setError(null); const controller = ensureAbortController(); const signal = controller.signal; try { const payload = await postJson("/api/mock/signal", { runId, kind }, signal); if (signal.aborted) return; setSnapshot(payload.snapshot); } catch (err) { if (signal.aborted || (err instanceof Error && err.name === "AbortError")) return; setError(err instanceof Error ? err.message : "Failed to send signal"); } }, [ensureAbortController, runId] ); const statusLabel = snapshot?.status ?? "idle"; const phaseExplainer = useMemo(() => { if (!snapshot) return "Start a run to generate 3 tokens and wait for signals."; if (snapshot.status === "waiting") return `Waiting for payment + inventory + fraud. Deadline in ${(snapshot.remainingMs / 1000).toFixed(2)}s.`; if (snapshot.status === "shipping") return "All signals received. Shipping step is executing."; if (snapshot.status === "shipped") return "Shipped."; if (snapshot.status === "timeout") return "Timed out waiting for signals."; return "Run active."; }, [snapshot]); const canSignal = Boolean(runId && snapshot && snapshot.status === "waiting"); const codeState = useMemo(() => { const wfMarks: Record = {}; const stepMarks: Record = {}; if (!snapshot) { return { tone: "amber" as HighlightTone, workflowActiveLines: [] as number[], workflowGutterMarks: wfMarks, stepActiveLines: [] as number[], stepGutterMarks: stepMarks, }; } if (snapshot.status === "waiting") { return { tone: "amber" as HighlightTone, workflowActiveLines: workflowLineMap.race, workflowGutterMarks: wfMarks, stepActiveLines: [], stepGutterMarks: stepMarks, }; } if (snapshot.status === "shipping") { return { tone: "amber" as HighlightTone, workflowActiveLines: workflowLineMap.ship, workflowGutterMarks: wfMarks, stepActiveLines: stepLineMap.shipFetch, stepGutterMarks: stepMarks, }; } if (snapshot.status === "timeout") { wfMarks[workflowLineMap.race[0] ?? 1] = "fail"; return { tone: "red" as HighlightTone, workflowActiveLines: workflowLineMap.returnTimeout, workflowGutterMarks: wfMarks, stepActiveLines: [], stepGutterMarks: stepMarks, }; } // shipped wfMarks[workflowLineMap.ship[0] ?? 1] = "success"; stepMarks[stepLineMap.shipFetch[0] ?? 1] = "success"; return { tone: "green" as HighlightTone, workflowActiveLines: workflowLineMap.returnShipped, workflowGutterMarks: wfMarks, stepActiveLines: [], stepGutterMarks: stepMarks, }; }, [snapshot, stepLineMap.shipFetch, workflowLineMap.race, workflowLineMap.returnShipped, workflowLineMap.returnTimeout, workflowLineMap.ship]); return (

{error && (

{error}

)}

{runId && ( )}

status: {statusLabel} {runId && ( run: {runId} )}

{phaseExplainer}

Promise.all + hooks + deadline → converge signals without cron jobs or queues

); } function SignalGrid({ signals }: { signals: SignalSnapshot[] }) { if (signals.length === 0) { return (

No signals yet.

); } return (

{signals.map((signal) => { const tone = signalTone(signal.state); return (

); })}

); } function ExecutionLog({ events, elapsedMs }: { events: GatewayLogEvent[]; elapsedMs: number }) { const scrollRef = useRef(null); useEffect(() => { const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [events.length]); return (

Execution log

{(elapsedMs / 1000).toFixed(2)}s

{events.length === 0 &&

No events yet.

} {events.map((event, idx) => { const tone = logTone(event.kind); return (

); })}

); } function signalTone(state: SignalSnapshot["state"]) { switch (state) { case "delivering": return { dotClass: "bg-amber-700 animate-pulse", badgeClass: "border-amber-700/40 bg-amber-700/10 text-amber-700", cardClass: "border-amber-700/40 bg-amber-700/10", }; case "received": return { dotClass: "bg-green-700", badgeClass: "border-green-700/40 bg-green-700/10 text-green-700", cardClass: "border-green-700/40 bg-green-700/10", }; case "pending": default: return { dotClass: "bg-gray-500", badgeClass: "border-gray-400/70 bg-background-100 text-gray-900", cardClass: "border-gray-400/40 bg-background-100", }; } } function logTone(kind: GatewayLogEvent["kind"]) { switch (kind) { case "signal_sent": return { dotClass: "bg-blue-700", labelClass: "text-blue-700" }; case "signal_received": return { dotClass: "bg-green-700", labelClass: "text-green-700" }; case "shipping": return { dotClass: "bg-amber-700", labelClass: "text-amber-700" }; case "shipped": return { dotClass: "bg-green-700", labelClass: "text-green-700" }; case "timeout": return { dotClass: "bg-red-700", labelClass: "text-red-700" }; default: return { dotClass: "bg-cyan-700", labelClass: "text-cyan-700" }; } } [V0_FILE]typescript:file="app/components/code-highlight-server.ts" import { highlight } from "sugar-high"; export function highlightCodeToHtmlLines(code: string): string[] { const html = highlight(code); return html.split("\n").map((line) => (line.length === 0 ? " " : line)); } [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: "Event Gateway - Workflow DevKit Example", description: "Demonstrates converging external signals with hooks + Promise.race in 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 { NextResponse } from "next/server"; import { getGatewaySnapshot, startGatewayRun } from "../store"; export async function POST(request: Request) { const body = await request.json().catch(() => ({})); const run = startGatewayRun({ timeoutMs: (body as any).timeoutMs, }); const snapshot = getGatewaySnapshot(run.runId); return NextResponse.json({ runId: run.runId, status: snapshot.status, snapshot, }); } [V0_FILE]typescript:file="app/api/mock/status/route.ts" import { NextResponse } from "next/server"; import { getGatewaySnapshot } from "../store"; export async function GET(request: Request) { const { searchParams } = new URL(request.url); const runId = searchParams.get("runId"); if (!runId) { return NextResponse.json({ error: "runId is required" }, { status: 400 }); } try { const snapshot = getGatewaySnapshot(runId); return NextResponse.json(snapshot, { headers: { "cache-control": "no-store" } }); } catch (error) { const message = error instanceof Error ? error.message : "Unknown error"; return NextResponse.json({ error: message }, { status: 404 }); } } [V0_FILE]typescript:file="app/api/mock/signal/route.ts" import { NextResponse } from "next/server"; import { getGatewaySnapshot, sendGatewaySignal } from "../store"; const ALLOWED = new Set(["payment", "inventory", "fraud"]); export async function POST(request: Request) { const body = await request.json().catch(() => ({})); const runId = typeof (body as any).runId === "string" ? (body as any).runId : null; const kind = typeof (body as any).kind === "string" ? (body as any).kind : null; if (!runId || !kind) { return NextResponse.json({ error: "runId and kind are required" }, { status: 400 }); } if (!ALLOWED.has(kind)) { return NextResponse.json({ error: "Invalid signal kind" }, { status: 400 }); } try { sendGatewaySignal(runId, kind as any); const snapshot = getGatewaySnapshot(runId); return NextResponse.json({ runId, status: snapshot.status, snapshot }); } catch (error) { const message = error instanceof Error ? error.message : "Unknown error"; return NextResponse.json({ error: message }, { status: 404 }); } } [V0_FILE]typescript:file="app/api/mock/store.ts" export type GatewaySignalKind = "payment" | "inventory" | "fraud"; export type SignalState = "pending" | "delivering" | "received"; export type GatewayStatus = "waiting" | "shipping" | "shipped" | "timeout"; export type SignalSnapshot = { kind: GatewaySignalKind; token: string; state: SignalState; receivedAtMs: number | null; }; export type GatewayLogEventKind = | "start" | "signal_sent" | "signal_received" | "shipping" | "shipped" | "timeout"; export type GatewayLogEvent = { kind: GatewayLogEventKind; message: string; atMs: number; }; export type MockGatewaySnapshot = { runId: string; status: GatewayStatus; timeoutMs: number; elapsedMs: number; remainingMs: number; signals: SignalSnapshot[]; executionLog: GatewayLogEvent[]; }; type GatewayRun = { runId: string; startedAtMs: number; timeoutMs: number; signalRequests: Partial>; }; type GatewayStore = { runs: Record; }; const GLOBAL_KEY = "__wfdk_event_gateway_store__"; // >= 500ms per mock step (rule) const SIGNAL_DELIVERY_MS = 600; const SHIP_STEP_MS = 700; const SIGNALS: GatewaySignalKind[] = ["payment", "inventory", "fraud"]; function getStore(): GatewayStore { const root = globalThis as unknown as Record; const existing = root[GLOBAL_KEY]; if (existing && typeof existing === "object") return existing as GatewayStore; const next: GatewayStore = { runs: {} }; root[GLOBAL_KEY] = next; return next; } function createRunId(): string { if (typeof crypto !== "undefined" && "randomUUID" in crypto) { return crypto.randomUUID(); } return `run_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`; } function clampInt( value: unknown, min: number, max: number, fallback: number ): number { if (typeof value !== "number" || !Number.isFinite(value)) return fallback; const n = Math.trunc(value); return Math.max(min, Math.min(max, n)); } export function startGatewayRun({ timeoutMs, nowMs, }: { timeoutMs?: unknown; nowMs?: number; }): GatewayRun { const normalizedTimeout = clampInt(timeoutMs, 3_000, 15_000, 6_500); const run: GatewayRun = { runId: createRunId(), startedAtMs: nowMs ?? Date.now(), timeoutMs: normalizedTimeout, signalRequests: {}, }; getStore().runs[run.runId] = run; return run; } export function sendGatewaySignal( runId: string, kind: GatewaySignalKind, nowMs: number = Date.now() ) { const store = getStore(); const run = store.runs[runId]; if (!run) throw new Error("Unknown runId"); if (!run.signalRequests[kind]) { run.signalRequests[kind] = nowMs; } } export function getGatewaySnapshot(runId: string, nowMs: number = Date.now()): MockGatewaySnapshot { const run = getStore().runs[runId]; if (!run) throw new Error("Unknown runId"); const startedAt = run.startedAtMs; const deadlineAt = startedAt + run.timeoutMs; const signalSnapshots: SignalSnapshot[] = []; const deliveredAbs: number[] = []; const events: GatewayLogEvent[] = [ { kind: "start", message: "Gateway started. Waiting for 3 signals.", atMs: 0 }, ]; for (const kind of SIGNALS) { const token = `${kind}:${runId}`; const requestedAt = run.signalRequests[kind]; if (!requestedAt) { signalSnapshots.push({ kind, token, state: "pending", receivedAtMs: null }); continue; } const sentAtMs = requestedAt - startedAt; events.push({ kind: "signal_sent", message: `Signal sent: ${kind}`, atMs: Math.max(0, sentAtMs), }); const deliveredAt = requestedAt + SIGNAL_DELIVERY_MS; if (nowMs < deliveredAt) { signalSnapshots.push({ kind, token, state: "delivering", receivedAtMs: null }); continue; } deliveredAbs.push(deliveredAt); signalSnapshots.push({ kind, token, state: "received", receivedAtMs: deliveredAt - startedAt, }); events.push({ kind: "signal_received", message: `Signal received: ${kind}`, atMs: Math.max(0, deliveredAt - startedAt), }); } const allReceived = deliveredAbs.length === SIGNALS.length; const allReceivedAt = allReceived ? Math.max(...deliveredAbs) : null; const allReceivedByDeadline = Boolean(allReceivedAt) && allReceivedAt! <= deadlineAt; let status: GatewayStatus = "waiting"; let elapsedMs = Math.max(0, nowMs - startedAt); if (!allReceivedByDeadline && nowMs >= deadlineAt) { status = "timeout"; elapsedMs = run.timeoutMs; events.push({ kind: "timeout", message: "Timed out waiting for signals.", atMs: run.timeoutMs, }); } else if (allReceivedByDeadline && allReceivedAt) { const shipStartAt = allReceivedAt; const shipDoneAt = shipStartAt + SHIP_STEP_MS; events.push({ kind: "shipping", message: "All signals received. Shipping…", atMs: shipStartAt - startedAt, }); if (nowMs < shipDoneAt) { status = "shipping"; elapsedMs = Math.max(0, nowMs - startedAt); } else { status = "shipped"; elapsedMs = shipDoneAt - startedAt; events.push({ kind: "shipped", message: "Order shipped.", atMs: shipDoneAt - startedAt, }); } } const remainingMs = status === "waiting" ? Math.max(0, deadlineAt - nowMs) : 0; return { runId, status, timeoutMs: run.timeoutMs, elapsedMs, remainingMs, signals: signalSnapshots, executionLog: events.sort((a, b) => a.atMs - b.atMs), }; } [V0_FILE]typescriptreact:file="app/page.tsx" import { highlightCodeToHtmlLines } from "./components/code-highlight-server"; import { EventGatewayDemo } from "./components/demo"; const directiveUseWorkflow = `"use ${"workflow"}"`; const directiveUseStep = `"use ${"step"}"`; type GatewayWorkflowLineMap = { createTokens: number[]; race: number[]; ship: number[]; returnShipped: number[]; returnTimeout: number[]; }; type GatewayStepLineMap = { shipFetch: number[]; }; const workflowCode = `import { defineHook, sleep } from "workflow"; const signal = defineHook<{ ok: true }>(); export async function releaseOrder(orderId: string, timeoutMs = 6500) { ${directiveUseWorkflow}; const payment = signal.create({ token: \`payment:\${orderId}\` }); const inventory = signal.create({ token: \`inventory:\${orderId}\` }); const fraud = signal.create({ token: \`fraud:\${orderId}\` }); const outcome = await Promise.race([ Promise.all([payment, inventory, fraud]).then(() => "ready" as const), sleep(\`\${timeoutMs}ms\`).then(() => "timeout" as const), ]); if (outcome === "timeout") { return { orderId, status: "timeout" as const }; } await shipOrder(orderId); return { orderId, status: "shipped" as const }; }`; const stepCode = `async function shipOrder(orderId: string) { ${directiveUseStep}; await fetch("https://shipping.example.com/ship", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ orderId }), }); }`; function findLines(code: string, includes: string): number[] { return code .split("\n") .map((line, idx) => (line.includes(includes) ? idx + 1 : null)) .filter((v): v is number => v !== null); } function buildWorkflowLineMap(code: string): GatewayWorkflowLineMap { return { createTokens: findLines(code, "signal.create({ token"), race: findLines(code, "await Promise.race"), ship: findLines(code, "await shipOrder(orderId)"), returnShipped: findLines(code, 'status: "shipped"'), returnTimeout: findLines(code, 'status: "timeout"'), }; } function buildStepLineMap(code: string): GatewayStepLineMap { return { shipFetch: findLines(code, "await fetch("), }; } const workflowHtmlLines = highlightCodeToHtmlLines(workflowCode); const stepHtmlLines = highlightCodeToHtmlLines(stepCode); const workflowLineMap = buildWorkflowLineMap(workflowCode); const stepLineMap = buildStepLineMap(stepCode); export default function Home() { return (

Workflow DevKit Example

Event Gateway

This pattern waits for multiple external signals (payment, inventory, fraud) in any order, then proceeds only when all have arrived. A single deadline enforces an SLA without cron jobs.

Try It

); } [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; } /* sugar-high syntax tokens */ :root, .dark { --sh-class: #52a8ff; --sh-identifier: #ededed; --sh-sign: #a1a1a1; --sh-property: #ff6166; --sh-entity: #62c073; --sh-jsxliterals: #ededed; --sh-string: #62c073; --sh-keyword: #f75f8f; --sh-comment: #a1a1a1; } /* 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/event-gateway.ts" import { defineHook, sleep } from "workflow"; export const orderSignal = defineHook<{ ok: true }>(); export async function eventGateway(orderId: string, timeoutMs: number = 10_000) { "use workflow"; const payment = orderSignal.create({ token: `payment:${orderId}` }); const inventory = orderSignal.create({ token: `inventory:${orderId}` }); const fraud = orderSignal.create({ token: `fraud:${orderId}` }); const outcome = await Promise.race([ Promise.all([payment, inventory, fraud]).then(() => "ready" as const), sleep(`${timeoutMs}ms`).then(() => "timeout" as const), ]); if (outcome === "timeout") { return { orderId, status: "timeout" as const }; } await shipOrder(orderId); return { orderId, status: "shipped" as const }; } async function shipOrder(orderId: string) { "use step"; console.info("[event-gateway] ship_order", { orderId }); } [V0_FILE]typescriptreact:file="components/gateway-code-workbench.tsx" "use client"; import { useCallback, useMemo, useRef, useState } from "react"; type HighlightTone = "amber" | "cyan" | "green" | "red"; type GutterMarkKind = "success" | "fail"; type Props = { workflowCode: string; workflowHtmlLines: string[]; workflowActiveLines: number[]; workflowGutterMarks: Record; stepCode: string; stepHtmlLines: string[]; stepActiveLines: number[]; stepGutterMarks: Record; tone: HighlightTone; }; function toneLineClasses(tone: HighlightTone) { switch (tone) { case "green": return "border-l-2 border-green-700 bg-green-700/10"; case "red": return "border-l-2 border-red-700 bg-red-700/10"; case "cyan": return "border-l-2 border-cyan-700 bg-cyan-700/10"; case "amber": default: return "border-l-2 border-amber-700 bg-amber-700/10"; } } function GutterIcon({ kind }: { kind: GutterMarkKind }) { if (kind === "success") { return ( ); } return ( ); } function CodePane({ title, subtitle, code, htmlLines, activeLines, gutterMarks, tone, }: { title: string; subtitle: string; code: string; htmlLines: string[]; activeLines: number[]; gutterMarks: Record; tone: HighlightTone; }) { const active = useMemo(() => new Set(activeLines), [activeLines]); const prevMarkRef = useRef>({}); const [copied, setCopied] = useState(false); const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(code); setCopied(true); window.setTimeout(() => setCopied(false), 900); } catch { // ignore } }, [code]); for (const [lineStr, kind] of Object.entries(gutterMarks)) { const line = Number(lineStr); if (!Number.isNaN(line)) prevMarkRef.current[line] = kind; } return (

{title}

{subtitle}

          {htmlLines.map((lineHtml, index) => {
            const lineNo = index + 1;
            const currentMark = gutterMarks[lineNo];
            const prevMark = prevMarkRef.current[lineNo];
            const markToRender = currentMark ?? prevMark;
            const showMark = Boolean(currentMark);
            const isActive = active.has(lineNo);

            return (
              
                
                  {lineNo}
                
                
                  {markToRender ? (
                    
                      
                    
                  ) : null}
                
                
              
            );
          })}

); } export function GatewayCodeWorkbench(props: Props) { return (

); } [V0_FILE]json:file="package.json" { "name": "event-gateway", "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.1.0-beta.53" }, "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 = {}; export default withWorkflow(nextConfig);