[V0_FILE]typescriptreact:file="app/components/demo.tsx" "use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { ClaimLogEvent, MockClaimSnapshot } from "@/app/api/mock/store"; import { ClaimCodeWorkbench } from "@/components/claim-code-workbench"; type HighlightTone = "amber" | "cyan" | "green" | "red"; type GutterMarkKind = "success" | "fail"; type StartResponse = { runId: string; status: MockClaimSnapshot["status"]; snapshot: MockClaimSnapshot; }; type UploadResponse = StartResponse; type ClaimWorkflowLineMap = { awaitToken: number[]; process: number[]; returnDone: number[]; }; type ClaimStepLineMap = { fetchBlob: number[]; }; type Props = { workflowCode: string; workflowHtmlLines: string[]; workflowLineMap: ClaimWorkflowLineMap; stepCode: string; stepHtmlLines: string[]; stepLineMap: ClaimStepLineMap; }; 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 ClaimCheckDemo({ 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 | MockClaimSnapshot | { 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 MockClaimSnapshot; }, []); 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 === "completed") 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", {}, 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 import"); } }, [beginPolling, ensureAbortController, stopPolling]); const handleUpload = useCallback(async () => { if (!runId) return; setError(null); const controller = ensureAbortController(); const signal = controller.signal; try { const payload = await postJson("/api/mock/upload", { runId }, 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 upload blob"); } }, [ensureAbortController, runId]); const handleReset = useCallback(() => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; setRunId(null); setSnapshot(null); setError(null); }, [stopPolling]); const canUpload = Boolean(snapshot && snapshot.status === "waiting"); const explainer = useMemo(() => { if (!snapshot) return "Start an import, then upload a large blob. The workflow only receives a small token."; if (snapshot.status === "waiting") return `Waiting for hook token: ${snapshot.hookToken}`; if (snapshot.status === "uploading") return "Uploading blob to external store…"; if (snapshot.status === "processing") return "Processing blob by token (no large payload in workflow state)."; if (snapshot.status === "completed") return "Done. Only the token flowed through the workflow."; return "Run active."; }, [snapshot]); 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" || snapshot.status === "uploading") { return { tone: "amber" as HighlightTone, workflowActiveLines: workflowLineMap.awaitToken, workflowGutterMarks: wfMarks, stepActiveLines: [], stepGutterMarks: stepMarks, }; } if (snapshot.status === "processing") { return { tone: "amber" as HighlightTone, workflowActiveLines: workflowLineMap.process, workflowGutterMarks: wfMarks, stepActiveLines: stepLineMap.fetchBlob, stepGutterMarks: stepMarks, }; } // completed wfMarks[workflowLineMap.process[0] ?? 1] = "success"; stepMarks[stepLineMap.fetchBlob[0] ?? 1] = "success"; return { tone: "green" as HighlightTone, workflowActiveLines: workflowLineMap.returnDone, workflowGutterMarks: wfMarks, stepActiveLines: [], stepGutterMarks: stepMarks, }; }, [snapshot, stepLineMap.fetchBlob, workflowLineMap.awaitToken, workflowLineMap.process, workflowLineMap.returnDone]); return (

{error && (

{error}

)}

{runId && ( <> )} {runId && ( run: {runId} )}

{explainer}

Claim-check token → keep workflows small, store blobs elsewhere

); } function StateCards({ snapshot }: { snapshot: MockClaimSnapshot | null }) { const fmt = useMemo(() => new Intl.NumberFormat("en-US"), []); return (

Workflow state

Hook token:{" "} {snapshot?.hookToken ?? "—"}

Blob token (pointer only):{" "} {snapshot?.blobToken ?? "—"}

Blob store

Size:{" "} {snapshot?.blobSizeBytes ? `${fmt.format(snapshot.blobSizeBytes)} bytes` : "—"}

Status:{" "} {snapshot?.status ?? "—"}

); } function ExecutionLog({ events, elapsedMs }: { events: ClaimLogEvent[]; 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) => (

))}

); } [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: "Claim Check - Workflow DevKit Example", description: "Demonstrates claim-check token flow with defineHook() 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 { getClaimSnapshot, startClaimRun } from "../store"; export async function POST() { const run = startClaimRun(); const snapshot = getClaimSnapshot(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 { getClaimSnapshot } 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 = getClaimSnapshot(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/upload/route.ts" import { NextResponse } from "next/server"; import { getClaimSnapshot, requestUpload } from "../store"; 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; if (!runId) { return NextResponse.json({ error: "runId is required" }, { status: 400 }); } try { requestUpload(runId); const snapshot = getClaimSnapshot(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 ClaimStatus = "waiting" | "uploading" | "processing" | "completed"; export type ClaimLogEventKind = | "start" | "upload_requested" | "blob_stored" | "token_delivered" | "processing" | "completed"; export type ClaimLogEvent = { kind: ClaimLogEventKind; message: string; atMs: number; }; export type MockClaimSnapshot = { runId: string; status: ClaimStatus; hookToken: string; blobToken: string | null; blobSizeBytes: number | null; elapsedMs: number; executionLog: ClaimLogEvent[]; }; type ClaimRun = { runId: string; startedAtMs: number; uploadRequestedAtMs: number | null; blobToken: string | null; blobSizeBytes: number | null; }; type ClaimStore = { runs: Record }; const GLOBAL_KEY = "__wfdk_claim_check_store__"; // >= 500ms per mock step (rule) const UPLOAD_STEP_MS = 650; const PROCESS_STEP_MS = 700; function getStore(): ClaimStore { const root = globalThis as unknown as Record; const existing = root[GLOBAL_KEY]; if (existing && typeof existing === "object") return existing as ClaimStore; const next: ClaimStore = { 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)}`; } export function startClaimRun(nowMs: number = Date.now()): ClaimRun { const runId = createRunId(); const run: ClaimRun = { runId, startedAtMs: nowMs, uploadRequestedAtMs: null, blobToken: null, blobSizeBytes: null, }; getStore().runs[runId] = run; return run; } export function requestUpload(runId: string, nowMs: number = Date.now()): ClaimRun { const run = getStore().runs[runId]; if (!run) throw new Error("Unknown runId"); if (!run.uploadRequestedAtMs) { run.uploadRequestedAtMs = nowMs; run.blobToken = `blob:${runId}`; // Stable-ish “large blob” size for the UI run.blobSizeBytes = 52_428_800; // ~50MB } return run; } export function getClaimSnapshot(runId: string, nowMs: number = Date.now()): MockClaimSnapshot { const run = getStore().runs[runId]; if (!run) throw new Error("Unknown runId"); const startedAt = run.startedAtMs; const hookToken = `upload:${runId}`; const events: ClaimLogEvent[] = [ { kind: "start", message: "Import started. Waiting for blob token.", atMs: 0 }, ]; let status: ClaimStatus = "waiting"; let elapsedMs = Math.max(0, nowMs - startedAt); if (!run.uploadRequestedAtMs) { return { runId, status, hookToken, blobToken: null, blobSizeBytes: null, elapsedMs, executionLog: events, }; } const uploadRequestedAt = run.uploadRequestedAtMs; events.push({ kind: "upload_requested", message: "Upload requested (external blob store).", atMs: uploadRequestedAt - startedAt, }); const storedAt = uploadRequestedAt + UPLOAD_STEP_MS; if (nowMs < storedAt) { status = "uploading"; elapsedMs = Math.max(0, nowMs - startedAt); return { runId, status, hookToken, blobToken: run.blobToken, blobSizeBytes: run.blobSizeBytes, elapsedMs, executionLog: events, }; } events.push({ kind: "blob_stored", message: "Blob stored. Claim-check token generated.", atMs: storedAt - startedAt, }); events.push({ kind: "token_delivered", message: "Token delivered to workflow via hook.", atMs: storedAt - startedAt + 1, }); const processingStartAt = storedAt; const processingDoneAt = processingStartAt + PROCESS_STEP_MS; events.push({ kind: "processing", message: "Processing blob by token…", atMs: processingStartAt - startedAt, }); if (nowMs < processingDoneAt) { status = "processing"; elapsedMs = Math.max(0, nowMs - startedAt); return { runId, status, hookToken, blobToken: run.blobToken, blobSizeBytes: run.blobSizeBytes, elapsedMs, executionLog: events, }; } status = "completed"; elapsedMs = processingDoneAt - startedAt; events.push({ kind: "completed", message: "Import complete. Index updated.", atMs: processingDoneAt - startedAt, }); return { runId, status, hookToken, blobToken: run.blobToken, blobSizeBytes: run.blobSizeBytes, elapsedMs, executionLog: events.sort((a, b) => a.atMs - b.atMs), }; } [V0_FILE]typescriptreact:file="app/page.tsx" import { highlightCodeToHtmlLines } from "./components/code-highlight-server"; import { ClaimCheckDemo } from "./components/demo"; const directiveUseWorkflow = `"use ${"workflow"}"`; const directiveUseStep = `"use ${"step"}"`; type ClaimWorkflowLineMap = { awaitToken: number[]; process: number[]; returnDone: number[]; }; type ClaimStepLineMap = { fetchBlob: number[]; }; const workflowCode = `import { defineHook } from "workflow"; const blobReady = defineHook<{ blobToken: string }>(); export async function importCsv(importId: string) { ${directiveUseWorkflow}; // Claim-check: only a token enters the workflow (not a 50MB payload). const { blobToken } = await blobReady.create({ token: \`upload:\${importId}\` }); await processBlob(blobToken); return { importId, blobToken, status: "indexed" as const }; }`; const stepCode = `async function processBlob(blobToken: string) { ${directiveUseStep}; const blob = await fetch(\`https://storage.example.com/blobs/\${blobToken}\`); if (!blob.ok) throw new Error("Blob missing"); // parse + index ... }`; 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): ClaimWorkflowLineMap { return { awaitToken: findLines(code, "await blobReady.create"), process: findLines(code, "await processBlob("), returnDone: findLines(code, 'status: "indexed"'), }; } function buildStepLineMap(code: string): ClaimStepLineMap { return { fetchBlob: 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

Claim Check

Keep workflows small. Store large payloads elsewhere and pass a lightweight token (claim-check) into the workflow. This demo simulates a 50MB upload and delivers only a token into the workflow.

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/claim-check.ts" import { defineHook } from "workflow"; export const blobReady = defineHook<{ blobToken: string }>(); export async function claimCheckImport(importId: string) { "use workflow"; const { blobToken } = await blobReady.create({ token: `upload:${importId}` }); await processBlob(blobToken); return { importId, blobToken, status: "indexed" as const }; } async function processBlob(blobToken: string) { "use step"; console.info("[claim-check] process_blob", { blobToken }); } [V0_FILE]typescriptreact:file="components/claim-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 ClaimCodeWorkbench(props: Props) { return (

); } [V0_FILE]json:file="package.json" { "name": "claim-check", "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);