[V0_FILE]typescriptreact:file="app/components/demo.tsx" "use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { BatchLogEvent, BatchUnitSnapshot, MockBatchSnapshot, } from "@/app/api/mock/store"; import { BatchCodeWorkbench } from "@/components/batch-code-workbench"; type LifecycleState = "idle" | "running" | "crashed" | "completed"; type HighlightTone = "amber" | "cyan" | "green" | "red"; type GutterMarkKind = "success" | "fail"; type StartResponse = { runId: string; status: MockBatchSnapshot["status"]; snapshot: MockBatchSnapshot; }; type ResumeResponse = StartResponse; type CrashMode = "never" | "after-5000"; type BatchWorkflowLineMap = { checkpoint: number[]; checkpointComment: number[]; returnDone: number[]; }; type BatchStepLineMap = { fetch: number[]; }; type BatchProcessorDemoProps = { workflowCode: string; workflowHtmlLines: string[]; workflowLineMap: BatchWorkflowLineMap; stepCode: string; stepHtmlLines: string[]; stepLineMap: BatchStepLineMap; }; const POLL_INTERVAL_MS = 120; const TOTAL_RECORDS = 10_000; const BATCH_SIZE = 1_000; 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 message = typeof payload === "object" && payload && "error" in payload ? payload.error ?? `Request failed (${res.status})` : `Request failed (${res.status})`; throw new Error(message); } return payload as T; } export function BatchProcessorDemo({ workflowCode, workflowHtmlLines, workflowLineMap, stepCode, stepHtmlLines, stepLineMap, }: BatchProcessorDemoProps) { const [crashMode, setCrashMode] = useState("after-5000"); const [lifecycle, setLifecycle] = useState("idle"); 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 startButtonRef = 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 | MockBatchSnapshot | { error?: string }; if (signal.aborted) { throw new DOMException("Request aborted", "AbortError"); } if (!res.ok) { const message = typeof payload === "object" && payload && "error" in payload ? payload.error ?? `Status request failed (${res.status})` : `Status request failed (${res.status})`; throw new Error(message); } return payload as MockBatchSnapshot; }, []); 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 === "crashed") { setLifecycle("crashed"); stopPolling(); return; } if (next.status === "completed") { setLifecycle("completed"); stopPolling(); return; } setLifecycle("running"); } catch (err) { if ((signal && signal.aborted) || (err instanceof Error && err.name === "AbortError")) { return; } stopPolling(); setLifecycle("idle"); setError(err instanceof Error ? err.message : "Failed to read run 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 crashAfterBatches = crashMode === "after-5000" ? 5 : null; const payload = await postJson( "/api/mock/start", { totalRecords: TOTAL_RECORDS, batchSize: BATCH_SIZE, crashAfterBatches, }, signal ); if (signal.aborted) return; setRunId(payload.runId); setSnapshot(payload.snapshot); if (payload.snapshot.status === "completed") { setLifecycle("completed"); return; } if (payload.snapshot.status === "crashed") { setLifecycle("crashed"); return; } setLifecycle("running"); beginPolling(payload.runId); } catch (err) { if (signal.aborted || (err instanceof Error && err.name === "AbortError")) return; setError(err instanceof Error ? err.message : "Failed to start mock run"); setLifecycle("idle"); } }, [beginPolling, crashMode, ensureAbortController, stopPolling]); const handleResume = useCallback(async () => { if (!runId) return; setError(null); stopPolling(); abortRef.current?.abort(); abortRef.current = null; const controller = ensureAbortController(); const signal = controller.signal; try { const payload = await postJson( "/api/mock/resume", { runId }, signal ); if (signal.aborted) return; setSnapshot(payload.snapshot); setLifecycle(payload.snapshot.status === "completed" ? "completed" : "running"); if (payload.snapshot.status === "running") { beginPolling(runId); } } catch (err) { if (signal.aborted || (err instanceof Error && err.name === "AbortError")) return; setError(err instanceof Error ? err.message : "Failed to resume run"); } }, [beginPolling, ensureAbortController, runId, stopPolling]); const handleReset = useCallback(() => { stopPolling(); abortRef.current?.abort(); abortRef.current = null; setLifecycle("idle"); setRunId(null); setSnapshot(null); setError(null); setTimeout(() => startButtonRef.current?.focus(), 0); }, [stopPolling]); const primaryLabel = useMemo(() => { if (lifecycle === "crashed") return "Resume"; if (lifecycle === "running") return "Running…"; if (lifecycle === "completed") return "Run Again"; return "Start Backfill"; }, [lifecycle]); const isRunning = lifecycle === "running"; const explainer = useMemo(() => { if (!snapshot) return "Start a run to see durable batching."; if (snapshot.status === "running") { const current = snapshot.currentBatch ?? snapshot.processedBatches + 1; return `Processing batch ${current}/${snapshot.totalBatches}. Each batch is a durable checkpoint.`; } if (snapshot.status === "crashed") { return "Simulated crash at a batch boundary. Resume continues at record 5,001 with no custom checkpoints."; } if (snapshot.status === "completed") { return `Done. Processed ${snapshot.processedRecords.toLocaleString()} records in ${snapshot.totalBatches} batches.`; } 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 === "running") { return { tone: "amber" as HighlightTone, workflowActiveLines: workflowLineMap.checkpoint, workflowGutterMarks: wfMarks, stepActiveLines: stepLineMap.fetch, stepGutterMarks: stepMarks, }; } if (snapshot.status === "crashed") { const crashLine = workflowLineMap.checkpointComment.length > 0 ? workflowLineMap.checkpointComment[0] : workflowLineMap.checkpoint[0]; wfMarks[crashLine] = "fail"; return { tone: "red" as HighlightTone, workflowActiveLines: workflowLineMap.checkpointComment.length ? workflowLineMap.checkpointComment : workflowLineMap.checkpoint, workflowGutterMarks: wfMarks, stepActiveLines: [], stepGutterMarks: stepMarks, }; } // completed wfMarks[workflowLineMap.checkpoint[0] ?? 1] = "success"; stepMarks[stepLineMap.fetch[0] ?? 1] = "success"; return { tone: "green" as HighlightTone, workflowActiveLines: workflowLineMap.returnDone, workflowGutterMarks: wfMarks, stepActiveLines: [], stepGutterMarks: stepMarks, }; }, [snapshot, stepLineMap.fetch, workflowLineMap.checkpoint, workflowLineMap.checkpointComment, workflowLineMap.returnDone]); return (

{error && (

{error}

)}

{lifecycle !== "idle" && ( )} Crash after

{explainer}

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

Durable batch boundaries → crash-safe progress without checkpoint tables

); } function BatchSteps({ batches, status, }: { batches: BatchUnitSnapshot[]; status: MockBatchSnapshot["status"]; }) { if (batches.length === 0) { return (

No batches yet.

); } return (

{batches.map((batch) => { const tone = batchTone(batch.state, status); return (

); })}

); } function ExecutionLog({ events, elapsedMs, }: { events: BatchLogEvent[]; 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, index) => { const tone = eventTone(event.kind); return (

); })}

); } function batchTone(state: BatchUnitSnapshot["state"], runStatus: MockBatchSnapshot["status"]) { if (state === "running") { 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", }; } if (state === "blocked" || runStatus === "crashed") { if (state === "blocked") { return { dotClass: "bg-red-700", badgeClass: "border-red-700/40 bg-red-700/10 text-red-700", cardClass: "border-red-700/40 bg-red-700/10", }; } } if (state === "completed") { 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", }; } 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 eventTone(kind: BatchLogEvent["kind"]) { switch (kind) { case "batch_completed": return { dotClass: "bg-green-700", labelClass: "text-green-700" }; case "crash": return { dotClass: "bg-red-700", labelClass: "text-red-700" }; case "resume": return { dotClass: "bg-amber-700", labelClass: "text-amber-700" }; case "completed": return { dotClass: "bg-green-700", labelClass: "text-green-700" }; case "start": 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: "Batch Processor - Workflow DevKit Example", description: "Demonstrates durable batch processing with loop-based step boundaries 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/resume/route.ts" import { NextResponse } from "next/server"; import { getBatchSnapshot, resumeBatchRun } 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 { resumeBatchRun(runId); const snapshot = getBatchSnapshot(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/start/route.ts" import { NextResponse } from "next/server"; import { getBatchSnapshot, startBatchRun } from "../store"; export async function POST(request: Request) { const body = await request.json().catch(() => ({})); const run = startBatchRun({ totalRecords: (body as any).totalRecords, batchSize: (body as any).batchSize, crashAfterBatches: (body as any).crashAfterBatches, }); const snapshot = getBatchSnapshot(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 { getBatchSnapshot } 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 = getBatchSnapshot(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/store.ts" export type BatchRunStatus = "running" | "crashed" | "completed"; export type BatchUnitState = "pending" | "running" | "completed" | "blocked"; export type BatchUnitSnapshot = { batch: number; start: number; end: number; label: string; state: BatchUnitState; }; export type BatchLogEventKind = | "start" | "batch_completed" | "crash" | "resume" | "completed"; export type BatchLogEvent = { kind: BatchLogEventKind; message: string; atMs: number; }; export type MockBatchSnapshot = { runId: string; status: BatchRunStatus; totalRecords: number; batchSize: number; totalBatches: number; processedBatches: number; processedRecords: number; nextRecord: number; currentBatch: number | null; elapsedMs: number; crashAfterBatches: number | null; batches: BatchUnitSnapshot[]; executionLog: BatchLogEvent[]; }; type BatchRun = { runId: string; totalRecords: number; batchSize: number; crashAfterBatches: number | null; startedAtMs: number; resumedAtMs: number | null; }; type BatchStore = { runs: Record; }; const GLOBAL_KEY = "__wfdk_batch_processor_store__"; // >= 500ms per mock step (rule) const BATCH_STEP_MS = 650; const numberFmt = new Intl.NumberFormat("en-US"); function formatNumber(value: number): string { return numberFmt.format(value); } function getStore(): BatchStore { const root = globalThis as unknown as Record; const existing = root[GLOBAL_KEY]; if (existing && typeof existing === "object") { return existing as BatchStore; } const next: BatchStore = { 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 startBatchRun({ totalRecords, batchSize, crashAfterBatches, nowMs, }: { totalRecords?: unknown; batchSize?: unknown; crashAfterBatches?: unknown; nowMs?: number; }): BatchRun { const normalizedTotal = clampInt(totalRecords, 1_000, 100_000, 10_000); const normalizedBatchSize = clampInt(batchSize, 100, 20_000, 1_000); const totalBatches = Math.max(1, Math.ceil(normalizedTotal / normalizedBatchSize)); let normalizedCrash: number | null = null; if (crashAfterBatches !== null && crashAfterBatches !== undefined) { // crashAfterBatches must leave at least one batch remaining to prove "resume" if (totalBatches > 1) { normalizedCrash = clampInt( crashAfterBatches, 1, totalBatches - 1, Math.min(5, totalBatches - 1) ); } } const runId = createRunId(); const run: BatchRun = { runId, totalRecords: normalizedTotal, batchSize: normalizedBatchSize, crashAfterBatches: normalizedCrash, startedAtMs: nowMs ?? Date.now(), resumedAtMs: null, }; getStore().runs[runId] = run; return run; } export function resumeBatchRun(runId: string, nowMs: number = Date.now()): BatchRun { const store = getStore(); const run = store.runs[runId]; if (!run) { throw new Error("Unknown runId"); } run.resumedAtMs = nowMs; return run; } function buildExecutionLog({ totalRecords, batchSize, totalBatches, processedBatches, crashAfter, resumed, status, }: { totalRecords: number; batchSize: number; totalBatches: number; processedBatches: number; crashAfter: number | null; resumed: boolean; status: BatchRunStatus; }): BatchLogEvent[] { const events: BatchLogEvent[] = []; events.push({ kind: "start", message: `Backfill started (${formatNumber(totalRecords)} records, ${formatNumber( totalBatches )} batches)`, atMs: 0, }); for (let batch = 1; batch <= processedBatches; batch++) { const start = (batch - 1) * batchSize + 1; const end = Math.min(totalRecords, batch * batchSize); events.push({ kind: "batch_completed", message: `Batch ${batch} done (${formatNumber(start)}–${formatNumber(end)})`, atMs: batch * BATCH_STEP_MS, }); } if (crashAfter && (status === "crashed" || resumed || status === "completed")) { const nextRecord = crashAfter * batchSize + 1; events.push({ kind: "crash", message: `Simulated crash after batch ${crashAfter}. Resume continues at record ${formatNumber( nextRecord )}.`, atMs: crashAfter * BATCH_STEP_MS, }); } if (resumed) { events.push({ kind: "resume", message: "Resumed from last durable checkpoint.", atMs: (crashAfter ?? processedBatches) * BATCH_STEP_MS + 1, }); } if (status === "completed") { events.push({ kind: "completed", message: "Backfill complete.", atMs: totalBatches * BATCH_STEP_MS, }); } return events.sort((a, b) => a.atMs - b.atMs); } export function getBatchSnapshot( runId: string, nowMs: number = Date.now() ): MockBatchSnapshot { const run = getStore().runs[runId]; if (!run) { throw new Error("Unknown runId"); } const totalRecords = run.totalRecords; const batchSize = run.batchSize; const totalBatches = Math.max(1, Math.ceil(totalRecords / batchSize)); const crashAfter = run.crashAfterBatches && run.crashAfterBatches < totalBatches ? run.crashAfterBatches : null; let processedBatches = 0; let status: BatchRunStatus = "running"; let elapsedMs = 0; if (run.resumedAtMs) { const base = crashAfter ?? 0; const sinceResumeMs = Math.max(0, nowMs - run.resumedAtMs); const additional = Math.floor(sinceResumeMs / BATCH_STEP_MS); processedBatches = Math.min(totalBatches, base + additional); // “workflow elapsed” pauses during crash downtime const activeBeforeResumeMs = base * BATCH_STEP_MS; const activeAfterResumeMs = Math.min( sinceResumeMs, (totalBatches - base) * BATCH_STEP_MS ); elapsedMs = activeBeforeResumeMs + activeAfterResumeMs; status = processedBatches >= totalBatches ? "completed" : "running"; } else { const sinceStartMs = Math.max(0, nowMs - run.startedAtMs); const batchesSoFar = Math.floor(sinceStartMs / BATCH_STEP_MS); if (crashAfter && batchesSoFar >= crashAfter) { processedBatches = crashAfter; status = "crashed"; elapsedMs = crashAfter * BATCH_STEP_MS; } else { processedBatches = Math.min(totalBatches, batchesSoFar); status = processedBatches >= totalBatches ? "completed" : "running"; elapsedMs = Math.min(sinceStartMs, totalBatches * BATCH_STEP_MS); } } const processedRecords = Math.min(totalRecords, processedBatches * batchSize); const nextRecord = Math.min(totalRecords + 1, processedRecords + 1); const currentBatch = status === "running" && processedBatches < totalBatches ? processedBatches + 1 : null; const batches: BatchUnitSnapshot[] = Array.from( { length: totalBatches }, (_, index) => { const batch = index + 1; const start = index * batchSize + 1; const end = Math.min(totalRecords, (index + 1) * batchSize); let state: BatchUnitState = "pending"; if (batch <= processedBatches) { state = "completed"; } else if (status === "running" && batch === currentBatch) { state = "running"; } else if (status === "crashed" && batch === processedBatches + 1) { state = "blocked"; } return { batch, start, end, label: `${formatNumber(start)}–${formatNumber(end)}`, state, }; } ); const executionLog = buildExecutionLog({ totalRecords, batchSize, totalBatches, processedBatches, crashAfter, resumed: Boolean(run.resumedAtMs), status, }); return { runId, status, totalRecords, batchSize, totalBatches, processedBatches, processedRecords, nextRecord, currentBatch, elapsedMs, crashAfterBatches: crashAfter, batches, executionLog, }; } [V0_FILE]typescriptreact:file="app/page.tsx" import { highlightCodeToHtmlLines } from "./components/code-highlight-server"; import { BatchProcessorDemo } from "./components/demo"; const directiveUseWorkflow = `"use ${"workflow"}"`; const directiveUseStep = `"use ${"step"}"`; type BatchWorkflowLineMap = { checkpoint: number[]; checkpointComment: number[]; returnDone: number[]; }; type BatchStepLineMap = { fetch: number[]; }; const workflowCode = `export async function backfillSearchIndex(totalRecords = 10_000) { ${directiveUseWorkflow}; const batchSize = 1_000; for (let start = 1; start <= totalRecords; start += batchSize) { const end = Math.min(totalRecords, start + batchSize - 1); // Durable checkpoint: if we crash after batch 5, we resume at record 5,001. await processBatch(start, end); } return { status: "done", processed: totalRecords }; }`; const stepCode = `async function processBatch(start: number, end: number) { ${directiveUseStep}; await fetch("https://index.example.com/reindex", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ start, end }), }); }`; 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): BatchWorkflowLineMap { return { checkpoint: findLines(code, "await processBatch("), checkpointComment: findLines(code, "Durable checkpoint"), returnDone: findLines(code, 'return { status: "done"'), }; } function buildStepLineMap(code: string): BatchStepLineMap { return { fetch: 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

Batch Processor

Processing a 10,000-record backfill should not require custom checkpoint tables. This pattern uses a plain for{" "} loop, where each batch is a durable step boundary. If the process dies after batch 5, the workflow resumes at record 5,001.

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/batch-processor.ts" export async function batchProcessor( runId: string, total: number = 10_000, batchSize: number = 1_000 ) { "use workflow"; for (let start = 1; start <= total; start += batchSize) { const end = Math.min(total, start + batchSize - 1); await processBatch(runId, start, end); } return { runId, total, batchSize, status: "done" as const }; } async function processBatch(runId: string, start: number, end: number) { "use step"; console.info("[batch-processor] process_batch", { runId, start, end }); } [V0_FILE]typescriptreact:file="components/batch-code-workbench.tsx" "use client"; import { useCallback, useMemo, useRef, useState } from "react"; type HighlightTone = "amber" | "cyan" | "green" | "red"; type GutterMarkKind = "success" | "fail"; type CodeWorkbenchProps = { 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]); // Preserve prior icon shape/color when marks fade out. 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 BatchCodeWorkbench(props: CodeWorkbenchProps) { return (

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