[V0_FILE]typescriptreact:file="app/components/demo.tsx" "use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { ExportCodeWorkbench } from "@/components/export-code-workbench"; type DemoState = "idle" | "running" | "cancelling" | "completed" | "cancelled"; type HighlightLineMap = { generateLines: number[]; }; type CodeProps = { workflowCode: string; workflowLinesHtml: string[]; stepCodes: string[]; stepLinesHtml: string[][]; highlightLineMap: HighlightLineMap; sectionNames: string[]; sectionContent: string[]; }; interface StreamEvent { type: "progress" | "complete" | "cancelled"; current: number; total: number; accountId: string; sectionId?: string; message: string; } function parseSseEventChunk(rawChunk: string): StreamEvent | null { const payload = rawChunk .split("\n") .map((line) => line.trim()) .filter((line) => line.startsWith("data:")) .map((line) => line.slice(5).trim()) .join("\n"); if (!payload) return null; try { return JSON.parse(payload) as StreamEvent; } catch { return null; } } export function ContentPipelineDemo({ workflowCode, workflowLinesHtml, stepCodes, stepLinesHtml, highlightLineMap, sectionNames, sectionContent, }: CodeProps) { const [total] = useState(sectionNames.length); const [state, setState] = useState("idle"); const [runId, setRunId] = useState(null); const [progress, setProgress] = useState(0); const [cancelCutoff, setCancelCutoff] = useState(null); const [error, setError] = useState(null); const [recentlyGenerated, setRecentlyGenerated] = useState(false); const abortRef = useRef(null); const docScrollRef = useRef(null); const canCancel = state === "running" || state === "cancelling"; const generatedCount = Math.min(progress, total); const pct = total > 0 ? Math.round((generatedCount / total) * 100) : 0; // --------------------------------------------------------------------------- // Auto-scroll document preview // --------------------------------------------------------------------------- useEffect(() => { docScrollRef.current?.scrollTo({ top: docScrollRef.current.scrollHeight, behavior: "smooth", }); }, [generatedCount]); // --------------------------------------------------------------------------- // Phase-to-highlight sync // --------------------------------------------------------------------------- useEffect(() => { if (state !== "running" || progress === 0) { setRecentlyGenerated(false); return; } setRecentlyGenerated(true); const timer = setTimeout(() => setRecentlyGenerated(false), 300); return () => clearTimeout(timer); }, [progress, state]); const workflowPhase = useMemo(() => { if (state === "idle") return "idle" as const; if (state === "completed") return "complete" as const; if (state === "cancelled") return "cancelled" as const; if (state === "cancelling") return "cancelling" as const; if (recentlyGenerated) return "generating" as const; return "sleeping" as const; }, [state, recentlyGenerated]); const highlightLines = useMemo(() => { if (workflowPhase === "idle") return []; const idx = Math.min(generatedCount, highlightLineMap.generateLines.length - 1); const line = highlightLineMap.generateLines[Math.max(0, idx)]; return line !== undefined ? [line] : []; }, [workflowPhase, highlightLineMap, generatedCount]); const highlightColorIndex = useMemo(() => { switch (workflowPhase) { case "generating": case "sleeping": return 0; // amber case "cancelling": case "cancelled": return 1; // red case "complete": return 2; // green default: return 0; } }, [workflowPhase]); const gutterMarks = useMemo(() => { const marks: Record = {}; for (const line of highlightLineMap.generateLines) { marks[line] = 0; } return marks; }, [highlightLineMap]); const activeSendSteps = useMemo(() => { const active = new Set(); if (progress > 0) active.add(0); return active; }, [progress]); // --------------------------------------------------------------------------- // Stream connection // --------------------------------------------------------------------------- const connectToStream = useCallback(async (targetRunId: string) => { abortRef.current?.abort(); const abort = new AbortController(); abortRef.current = abort; try { const search = new URLSearchParams({ runId: targetRunId, startIndex: "0", }); const res = await fetch(`/api/mock/stream?${search.toString()}`, { signal: abort.signal, }); if (!res.ok || !res.body) { let message = "Failed to connect to stream"; try { const data = await res.json(); message = data.error || message; } catch { // Ignore JSON parse failures. } throw new Error(message); } const reader = res.body.getReader(); const decoder = new TextDecoder(); let buffer = ""; while (true) { const { done, value } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const normalized = buffer.replaceAll("\r\n", "\n"); const chunks = normalized.split("\n\n"); buffer = chunks.pop() ?? ""; for (const chunk of chunks) { const event = parseSseEventChunk(chunk); if (!event) continue; setProgress(Math.min(event.current, event.total)); if (event.type === "complete") setState("completed"); if (event.type === "cancelled") { setCancelCutoff(event.current); setState("cancelled"); } } } if (buffer.trim()) { const event = parseSseEventChunk(buffer.replaceAll("\r\n", "\n")); if (event) { setProgress(Math.min(event.current, event.total)); if (event.type === "complete") setState("completed"); if (event.type === "cancelled") { setCancelCutoff(event.current); setState("cancelled"); } } } } catch (err: unknown) { if (err instanceof Error && err.name === "AbortError") return; const message = err instanceof Error ? err.message : "Stream connection failed"; setError(message); } finally { if (abortRef.current === abort) { abortRef.current = null; } } }, []); // --------------------------------------------------------------------------- // Actions // --------------------------------------------------------------------------- const startGeneration = async () => { abortRef.current?.abort(); setError(null); setProgress(0); setRunId(null); setCancelCutoff(null); setState("running"); try { const res = await fetch("/api/mock/start", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ accountId: "acct_1", total }), }); if (!res.ok) { let message = "Failed to start generation"; try { const data = await res.json(); message = data.error || message; } catch { // Ignore JSON parse failures. } throw new Error(message); } const data = await res.json(); setRunId(data.runId); void connectToStream(data.runId); } catch (err: unknown) { if (err instanceof Error && err.name === "AbortError") return; const message = err instanceof Error ? err.message : "Unknown error"; setError(message); setState("idle"); } }; const cancelGeneration = useCallback(async () => { if (!runId || !canCancel) return; setError(null); setState("cancelling"); try { const res = await fetch("/api/mock/cancel", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ runId }), }); if (!res.ok) { let message = "Failed to cancel"; try { const data = await res.json(); message = data.error || message; } catch { // Ignore JSON parse failures. } throw new Error(message); } } catch (err: unknown) { const message = err instanceof Error ? err.message : "Cancel failed"; setError(message); setState("running"); } }, [canCancel, runId]); const reset = useCallback(() => { abortRef.current?.abort(); abortRef.current = null; setState("idle"); setRunId(null); setProgress(0); setCancelCutoff(null); setError(null); setRecentlyGenerated(false); }, []); useEffect(() => { return () => { abortRef.current?.abort(); }; }, []); // --------------------------------------------------------------------------- // Render // --------------------------------------------------------------------------- return (

{state === "idle" && ( )} {canCancel && ( )} {state !== "idle" && ( )}

{error && (

{error}

)}

{/* Left: progress + checklist */}

{state === "idle" && `0 sections ready`} {state === "running" && `Generating section ${generatedCount + 1} of ${total}...`} {state === "cancelling" && `Cancelling after ${generatedCount} of ${total} sections`} {state === "completed" && `All ${total} sections generated`} {state === "cancelled" && `Cancelled — ${cancelCutoff ?? generatedCount} of ${total} sections generated`}

{pct}%

{done ? ( ) : isNext ? ( ) : skipped ? ( ) : ( )} {name}

{/* Right: mock document preview — relative/absolute so it doesn't affect grid row height */}

report.md

{generatedCount === 0 ? (

{state === "idle" ? "Document preview will appear here..." : "Generating first section..."}

) : (

{sectionNames.slice(0, generatedCount).map((name, i) => (

{name}

{sectionContent[i]}

))} {state === "running" && generatedCount < total && (

{sectionNames[generatedCount]}

)} {(state === "cancelled" || state === "cancelling") && (

— generation cancelled —

)}

); } [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: "Safe Cancel - Workflow DevKit Example", description: "AI content generation workflow with progress streaming and graceful cancellation at step boundaries", }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } [V0_FILE]typescript:file="app/api/mock/cancel/route.ts" import { NextResponse } from "next/server"; import { getMockRun, requestMockCancellation, syncMockRunState } from "../store"; export async function POST(request: Request) { let body: Record = {}; try { const parsed = await request.json(); if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) { body = parsed as Record; } else { return NextResponse.json( { error: "Request body must be a JSON object" }, { status: 400 } ); } } catch (error) { console.warn("[mock-content-generation] cancel_parse_body_failed", { attempted: "request.json()", failed: error instanceof Error ? error.message : String(error), }); return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 }); } const runId = typeof body.runId === "string" ? body.runId : null; if (!runId || !runId.trim()) { return NextResponse.json( { error: "runId is required" }, { status: 400 } ); } const normalizedRunId = runId.trim(); const run = getMockRun(normalizedRunId); if (!run) { return NextResponse.json( { error: "Run not found" }, { status: 404 } ); } const synced = syncMockRunState(run); if (synced.status === "completed" || synced.status === "cancelled") { return NextResponse.json( { error: `Cannot cancel a ${synced.status} workflow`, status: synced.status, }, { status: 400 } ); } if (synced.cancelRequestedAt) { return NextResponse.json({ runId: normalizedRunId, message: "Cancellation already requested. Waiting for checkpoint.", previousStatus: "running", currentStatus: synced.status, cancelRequestedAt: synced.cancelRequestedAt, _mock: true, }); } const updated = requestMockCancellation(synced); return NextResponse.json({ runId: normalizedRunId, message: "Cancellation requested. Waiting for checkpoint.", previousStatus: "running", currentStatus: updated.status, cancelRequestedAt: updated.cancelRequestedAt, _mock: true, }); } [V0_FILE]typescript:file="app/api/mock/stream/route.ts" import { getMockEventsFromStartIndex, getMockRun, isMockRunTerminal, syncMockRunState, type MockSectionEvent, } from "../store"; const STREAM_POLL_INTERVAL_MS = 50; function parseStartIndex(value: string | null): number { if (!value) { return 0; } const parsed = Number.parseInt(value, 10); if (!Number.isFinite(parsed) || parsed < 0) { return 0; } return Math.trunc(parsed); } function emitSse( controller: ReadableStreamDefaultController, encoder: TextEncoder, event: MockSectionEvent ) { controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`)); } export async function GET(request: Request) { const { searchParams } = new URL(request.url); const runId = searchParams.get("runId"); const startIndex = parseStartIndex(searchParams.get("startIndex")); if (!runId || !runId.trim()) { return new Response(JSON.stringify({ error: "runId is required" }), { status: 400, headers: { "Content-Type": "application/json" }, }); } const normalizedRunId = runId.trim(); const run = getMockRun(normalizedRunId); if (!run) { return new Response(JSON.stringify({ error: "Run not found" }), { status: 404, headers: { "Content-Type": "application/json" }, }); } syncMockRunState(run); const initialCursor = Math.min(startIndex, run.sectionsGenerated); const encoder = new TextEncoder(); let closeFromCancel: ((reason: string) => void) | null = null; const stream = new ReadableStream({ start(controller) { let streamClosed = false; let cursor = initialCursor; let timer: ReturnType | null = null; let onAbort: (() => void) | null = null; const clearTimer = () => { if (timer) { clearTimeout(timer); timer = null; } }; const closeStream = (reason: string) => { if (streamClosed) { return; } streamClosed = true; clearTimer(); if (onAbort) { request.signal.removeEventListener("abort", onAbort); onAbort = null; } try { controller.close(); } catch (error) { console.warn("[mock-content-generation] stream_close_failed", { attempted: "controller.close()", reason, runId: normalizedRunId, failed: error instanceof Error ? error.message : String(error), }); } }; const emitEvent = (event: MockSectionEvent): boolean => { try { emitSse(controller, encoder, event); return true; } catch (error) { console.warn("[mock-content-generation] stream_enqueue_failed", { attempted: "controller.enqueue()", runId: normalizedRunId, cursor, eventType: event.type, failed: error instanceof Error ? error.message : String(error), }); closeStream("enqueue_failed"); return false; } }; const pump = () => { if (streamClosed) { return; } if (request.signal.aborted) { closeStream("request_aborted"); return; } const current = getMockRun(normalizedRunId); if (!current) { console.warn("[mock-content-generation] stream_run_missing", { attempted: "getMockRun(runId)", runId: normalizedRunId, cursor, }); closeStream("run_missing"); return; } syncMockRunState(current); const events = getMockEventsFromStartIndex(current, cursor); for (const event of events) { if (!emitEvent(event)) { return; } cursor += 1; } if (isMockRunTerminal(current)) { closeStream("terminal_state"); return; } timer = setTimeout(pump, STREAM_POLL_INTERVAL_MS); }; onAbort = () => { closeStream("request_aborted_signal"); }; request.signal.addEventListener("abort", onAbort, { once: true }); closeFromCancel = closeStream; pump(); }, cancel() { closeFromCancel?.("consumer_cancelled"); }, }); return new Response(stream, { headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", }, }); } [V0_FILE]typescript:file="app/api/mock/start/route.ts" import { NextResponse } from "next/server"; import { createMockRun, parseValidatedMockTotal } from "../store"; const DEFAULT_TOTAL = 10; export async function POST(request: Request) { let body: Record = {}; try { const parsed = await request.json(); if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) { body = parsed as Record; } else { return NextResponse.json( { error: "Request body must be a JSON object" }, { status: 400 } ); } } catch (error) { console.warn("[mock-content-generation] start_parse_body_failed", { attempted: "request.json()", failed: error instanceof Error ? error.message : String(error), }); return NextResponse.json({ error: "Invalid JSON body" }, { status: 400 }); } const accountId = typeof body.accountId === "string" ? body.accountId : ""; const normalizedAccountId = accountId.trim(); if (!normalizedAccountId) { return NextResponse.json( { error: "accountId is required" }, { status: 400 } ); } const parsedTotal = body.total === undefined ? DEFAULT_TOTAL : parseValidatedMockTotal(body.total); if (parsedTotal === null) { return NextResponse.json( { error: "total must be a number between 1 and 10000" }, { status: 400 } ); } const runId = `mock-${crypto.randomUUID().slice(0, 8)}`; createMockRun({ runId, accountId: normalizedAccountId, total: parsedTotal, }); return NextResponse.json({ runId, accountId: normalizedAccountId, total: parsedTotal, message: "Generation pipeline started", _mock: true, }); } [V0_FILE]typescript:file="app/api/mock/store.ts" const MOCK_MAX_TOTAL = 10_000; const MOCK_DELAY_MS = 500; export type MockRunStatus = "running" | "cancelling" | "completed" | "cancelled"; export type MockRun = { id: string; accountId: string; total: number; delayMs: number; status: MockRunStatus; startedAt: string; startedAtMs: number; completedAt: string | null; sectionsGenerated: number; cancelled: boolean; cancelRequestedAt: string | null; cancelRequestedAtMs: number | null; }; export type MockSectionEventType = "progress" | "complete" | "cancelled"; export type MockSectionEvent = { type: MockSectionEventType; current: number; total: number; accountId: string; sectionId?: string; message: string; }; declare global { // eslint-disable-next-line no-var var __mockContentGenerationRuns: Map | undefined; } export const mockRuns: Map = globalThis.__mockContentGenerationRuns ?? (globalThis.__mockContentGenerationRuns = new Map()); function toIso(timestampMs: number): string { return new Date(timestampMs).toISOString(); } function statusTransition(run: MockRun, nextStatus: MockRunStatus, reason: string) { if (run.status === nextStatus) { return; } console.info("[mock-content-generation] run_status_transition", { runId: run.id, from: run.status, to: nextStatus, reason, sectionsGenerated: run.sectionsGenerated, total: run.total, cancelRequestedAt: run.cancelRequestedAt, }); run.status = nextStatus; } export function parseValidatedMockTotal(value: unknown): number | null { if (typeof value !== "number" || !Number.isFinite(value) || !Number.isInteger(value)) { return null; } if (value < 1 || value > MOCK_MAX_TOTAL) { return null; } return value; } function generatedSectionsAt(run: MockRun, timestampMs: number): number { if (run.total <= 0) { return 0; } if (run.delayMs <= 0) { return run.total; } if (timestampMs < run.startedAtMs) { return 0; } const elapsedMs = timestampMs - run.startedAtMs; const generated = Math.floor(elapsedMs / run.delayMs) + 1; return Math.max(0, Math.min(run.total, generated)); } function completedAtMs(run: MockRun): number { if (run.total <= 0 || run.delayMs <= 0) { return run.startedAtMs; } return run.startedAtMs + (run.total - 1) * run.delayMs; } function cancelCheckpointAtMs( run: MockRun, generatedAtRequest: number, requestedAtMs: number ): number { if (run.delayMs <= 0) { return requestedAtMs; } const completionMs = completedAtMs(run); const checkpointMs = run.startedAtMs + (generatedAtRequest + 1) * run.delayMs; const cappedCheckpointMs = Math.min(checkpointMs, completionMs); return Math.max(requestedAtMs, cappedCheckpointMs); } export function createMockRun(input: { runId: string; accountId: string; total: number; nowMs?: number; }): MockRun { const nowMs = input.nowMs ?? Date.now(); const run: MockRun = { id: input.runId, accountId: input.accountId, total: input.total, delayMs: MOCK_DELAY_MS, status: "running", startedAt: toIso(nowMs), startedAtMs: nowMs, completedAt: null, sectionsGenerated: 0, cancelled: false, cancelRequestedAt: null, cancelRequestedAtMs: null, }; mockRuns.set(run.id, run); return run; } export function getMockRun(runId: string): MockRun | undefined { return mockRuns.get(runId); } export function syncMockRunState(run: MockRun, nowMs: number = Date.now()): MockRun { if (run.status === "completed" || run.status === "cancelled") { return run; } const generatedNow = generatedSectionsAt(run, nowMs); if (run.cancelRequestedAt && run.cancelRequestedAtMs === null) { const parsed = Date.parse(run.cancelRequestedAt); run.cancelRequestedAtMs = Number.isFinite(parsed) ? parsed : nowMs; } if (run.cancelRequestedAtMs === null) { run.sectionsGenerated = Math.max(run.sectionsGenerated, generatedNow); if (run.sectionsGenerated >= run.total) { run.sectionsGenerated = run.total; run.completedAt = toIso(completedAtMs(run)); statusTransition(run, "completed", "all_sections_generated"); } else { statusTransition(run, "running", "active_generation"); } return run; } const requestedAtMs = run.cancelRequestedAtMs; const generatedAtRequest = generatedSectionsAt(run, requestedAtMs); run.sectionsGenerated = Math.min(generatedAtRequest + 1, run.total, generatedNow); run.cancelled = true; if (run.sectionsGenerated >= run.total) { run.sectionsGenerated = run.total; run.completedAt = toIso(completedAtMs(run)); statusTransition(run, "completed", "cancel_requested_after_completion"); return run; } const cancelAppliedAtMs = cancelCheckpointAtMs(run, generatedAtRequest, requestedAtMs); if (nowMs >= cancelAppliedAtMs) { run.completedAt = toIso(cancelAppliedAtMs); statusTransition(run, "cancelled", "cancel_checkpoint_reached"); } else { run.completedAt = null; statusTransition(run, "cancelling", "awaiting_cancel_checkpoint"); } return run; } export function requestMockCancellation(run: MockRun, nowMs: number = Date.now()): MockRun { const synced = syncMockRunState(run, nowMs); if (synced.cancelRequestedAtMs !== null) { return synced; } synced.cancelRequestedAtMs = nowMs; synced.cancelRequestedAt = toIso(nowMs); synced.cancelled = true; statusTransition(synced, "cancelling", "cancel_requested"); return syncMockRunState(synced, nowMs); } function progressEvent(run: MockRun, current: number): MockSectionEvent { return { type: "progress", current, total: run.total, accountId: run.accountId, sectionId: `SEC-${String(current).padStart(3, "0")}`, message: `Generated section ${current} of ${run.total}`, }; } function completeEvent(run: MockRun): MockSectionEvent { return { type: "complete", current: run.total, total: run.total, accountId: run.accountId, message: `Report completed: ${run.total} sections generated`, }; } function cancelledEvent(run: MockRun): MockSectionEvent { return { type: "cancelled", current: run.sectionsGenerated, total: run.total, accountId: run.accountId, message: `Generation cancelled after ${run.sectionsGenerated} of ${run.total} sections`, }; } export function getMockEventsFromStartIndex(run: MockRun, startIndex: number): MockSectionEvent[] { const normalizedStartIndex = Number.isFinite(startIndex) ? Math.max(0, Math.trunc(startIndex)) : 0; const events: MockSectionEvent[] = []; for (let index = normalizedStartIndex; index < run.sectionsGenerated; index += 1) { events.push(progressEvent(run, index + 1)); } if (run.status === "completed" && normalizedStartIndex <= run.total) { events.push(completeEvent(run)); } if (run.status === "cancelled" && normalizedStartIndex <= run.sectionsGenerated) { events.push(cancelledEvent(run)); } return events; } export function isMockRunTerminal(run: MockRun): boolean { return run.status === "completed" || run.status === "cancelled"; } [V0_FILE]typescriptreact:file="app/page.tsx" import { highlight } from "sugar-high"; import { highlightCodeToHtmlLines } from "@/components/code-highlight-server"; import { ContentPipelineDemo } from "./components/demo"; import { ApiCodeWorkbench } from "@/components/export-code-workbench"; const directiveUseWorkflow = `"use ${"workflow"}"`; const directiveUseStep = `"use ${"step"}"`; // --------------------------------------------------------------------------- // Section names (shared with demo for the checklist) // --------------------------------------------------------------------------- const sectionNames = [ "Introduction", "Market Analysis", "Technical Architecture", "Implementation Plan", "Risk Assessment", "Financial Projections", "Timeline", "Team Structure", "Competitive Landscape", "Conclusion", ]; // --------------------------------------------------------------------------- // Mock generated content for each section (displayed in the document preview) // --------------------------------------------------------------------------- const sectionContent = [ "This report analyzes the strategic opportunity for expanding into the European market. We evaluate market conditions, technical requirements, and projected returns over a 24-month horizon.", "The European SaaS market is projected to reach $142B by 2027, growing at 14.2% CAGR. Key segments include enterprise automation (38%), developer tools (24%), and data infrastructure (19%).", "The proposed architecture uses a multi-region deployment across AWS eu-west-1 and eu-central-1 with active-active failover. Data residency is enforced at the routing layer to meet GDPR requirements.", "Phase 1 (Q1): Infrastructure setup and compliance review. Phase 2 (Q2): Beta launch with 10 design partners. Phase 3 (Q3-Q4): General availability and sales ramp across 4 initial markets.", "Primary risks include GDPR compliance complexity (mitigated by dedicated DPO hire), currency fluctuation (hedged via forward contracts), and competitive pressure from established EU-native vendors.", "Year 1 revenue projection: $2.4M with 340 enterprise accounts. Break-even expected by month 18. Gross margin target of 78% aligns with existing product economics.", "Key milestones: regulatory approval (March), beta launch (June), first enterprise close (August), GA announcement (October), 100-customer milestone (December).", "Proposed team of 12: 5 engineering (2 backend, 2 infra, 1 frontend), 3 sales, 2 compliance, 1 marketing, 1 operations lead. Initial hires co-located in London office.", "Three established competitors hold 67% market share. Our differentiation centers on developer experience and pricing flexibility — areas where incumbents score lowest in customer satisfaction surveys.", "The European expansion represents a $12M ARR opportunity within 24 months. With controlled investment and phased rollout, risk-adjusted ROI exceeds 3.2x. We recommend proceeding with Phase 1 immediately.", ]; // --------------------------------------------------------------------------- // Workflow code (displayed in the left pane of the code workbench) // --------------------------------------------------------------------------- const workflowCode = `// Each await is a cancellation checkpoint — // run.cancel() takes effect between steps. export async function generateReport( accountId: string, systemPrompt: string ) { ${directiveUseWorkflow}; const intro = await generateSection("Introduction", systemPrompt); const market = await generateSection("Market Analysis", intro); const tech = await generateSection("Technical Architecture", market); const plan = await generateSection("Implementation Plan", tech); const risks = await generateSection("Risk Assessment", plan); const finance = await generateSection("Financial Projections", risks); const timeline = await generateSection("Timeline", finance); const team = await generateSection("Team Structure", timeline); const landscape = await generateSection("Competitive Landscape", team); const conclusion = await generateSection("Conclusion", landscape); return { accountId, report: conclusion, status: "completed" }; }`; // --------------------------------------------------------------------------- // Step codes (displayed in the right pane, switched by phase) // --------------------------------------------------------------------------- const stepCodes = [ `async function generateSection( title: string, previous?: string | { title: string } ) { ${directiveUseStep}; const previousTitle = typeof previous === "string" ? previous : previous?.title; const { text } = await generateText({ model: "anthropic/claude-sonnet-4.5", system: previousTitle ? \`You are a professional writer. Previous section: \${previousTitle}\` : "You are a professional writer.", prompt: \`Write the "\${title}" section of a strategic report.\`, }); return { title, content: text, status: "generated" }; }`, ]; // --------------------------------------------------------------------------- // Pre-compute highlighted HTML lines (server-side only) // --------------------------------------------------------------------------- const workflowLinesHtml = highlightCodeToHtmlLines(workflowCode); const stepLinesHtml = stepCodes.map((code) => highlightCodeToHtmlLines(code)); // --------------------------------------------------------------------------- // Scan workflow code for highlight line numbers (dynamic, not hardcoded) // --------------------------------------------------------------------------- function buildHighlightLineMap(code: string) { const lines = code.split("\n"); const generateLines: number[] = []; for (let i = 0; i < lines.length; i++) { if (lines[i].includes("await generateSection(")) generateLines.push(i + 1); } return { generateLines }; } const highlightLineMap = buildHighlightLineMap(workflowCode); // --------------------------------------------------------------------------- // API route code (displayed side-by-side in the API Routes workbench) // --------------------------------------------------------------------------- const apiStartCode = `export async function POST(request: Request) { const body = await request.json(); const { accountId, systemPrompt } = body; if (!accountId || typeof accountId !== "string") { return NextResponse.json( { error: "accountId is required" }, { status: 400 } ); } // start() enqueues the pipeline and returns a runId for reconnects. const run = await start(generateReport, [accountId, systemPrompt]); return NextResponse.json({ runId: run.runId, accountId, message: "Generation pipeline started", }); }`; const apiCancelCode = `export async function POST(request: Request) { const body = await request.json(); const { runId } = body; if (!runId || typeof runId !== "string") { return NextResponse.json( { error: "runId is required" }, { status: 400 } ); } // getRun() recovers any existing run for status checks or cancellation. const run = getRun(runId); const currentStatus = await run.status; if (currentStatus === "completed" || currentStatus === "cancelled" || currentStatus === "failed") { return NextResponse.json( { error: \`Cannot cancel a \${currentStatus} workflow\` }, { status: 400 } ); } // run.cancel() requests termination — the workflow exits at the next safe boundary. await run.cancel(); return NextResponse.json({ runId, message: "Cancellation requested. Waiting for checkpoint.", previousStatus: currentStatus, currentStatus: "cancelling", }); }`; const apiStartLinesHtml = highlightCodeToHtmlLines(apiStartCode); const apiCancelLinesHtml = highlightCodeToHtmlLines(apiCancelCode); // --------------------------------------------------------------------------- // Build per-line highlight maps for the API route panes. // Colors: 0 = amber (start), 1 = red (cancel), 2 = green (response) // --------------------------------------------------------------------------- function buildApiLineHighlights(startCode: string, cancelCode: string) { const startLines = startCode.split("\n"); const cancelLines = cancelCode.split("\n"); const startMap: Record = {}; const cancelMap: Record = {}; // Step 1 (amber=0): the start() call + comment in API Start for (let i = 0; i < startLines.length; i++) { if (startLines[i].includes("// start()")) startMap[i + 1] = 0; if (startLines[i].includes("await start(")) { startMap[i + 1] = 0; break; } } // Step 2 (red=1): getRun comment + run handle + run.cancel comment + cancel in API Cancel for (let i = 0; i < cancelLines.length; i++) { const line = cancelLines[i]; if ( line.includes("// getRun()") || line.includes("getRun(") || line.includes("run.status") || line.includes("// run.cancel()") || line.includes("run.cancel()") ) { cancelMap[i + 1] = 1; } } // Step 2 (green=2): only the runId line in the response block for (let i = 0; i < startLines.length; i++) { if (startLines[i].includes("runId: run.runId")) { startMap[i + 1] = 2; break; } } return { startMap, cancelMap }; } const { startMap: apiStartHighlights, cancelMap: apiCancelHighlights } = buildApiLineHighlights(apiStartCode, apiCancelCode); // --------------------------------------------------------------------------- // How It Works — inline code snippets, pre-highlighted and color-matched // --------------------------------------------------------------------------- const howItWorksSteps = [ { circle: "bg-amber-700", border: "border-amber-700", bg: "bg-amber-700/10", tab: "API Start" as const, title: "Start the pipeline and get a runId", description: "start() enqueues the generation pipeline and returns immediately with a run handle. The runId lets you stream progress, check status, or cancel mid-pipeline.", code: highlight( `const run = await start(generateReport, [\n accountId,\n systemPrompt,\n]);` ), }, { circle: "bg-green-700", border: "border-green-700", bg: "bg-green-700/10", tab: "API Start" as const, title: "Return the run handle for reconnects", description: "The response includes the runId so clients can reconnect to the progress stream, poll status, or cancel — even after a page reload or network interruption.", code: highlight(`runId: run.runId,`), }, { circle: "bg-red-700", border: "border-red-700", bg: "bg-red-700/10", tab: "API Cancel" as const, title: "Cancel at the next step boundary", description: "getRun() recovers the run handle from any route using just the runId. run.cancel() requests termination — the workflow finishes the current step and exits at the next step boundary. No section is left half-written.", code: highlight( `const run = getRun(runId);\nconst currentStatus = await run.status;\n\nawait run.cancel();` ), }, ]; export default function Home() { return (

Safe Cancel

AI content generation burns tokens and time. When a run goes off the rails, this pattern lets you request cancellation — the current step finishes and the pipeline stops at the next boundary, keeping every completed section intact.

Try It

Start the pipeline, watch sections generate one by one, then cancel mid-run. Every completed section is preserved — review what the run produced to see where it drifted.

This interactive demo uses a mock run store to simulate progress. See the API Routes section below for the real Workflow DevKit wiring.

How It Works

{step.title}

{step.description}

))}



        
          
            API Routes
          
          
            The start and cancel API routes enqueue the pipeline and manage
            run lifecycle. Highlighted lines match the steps above.
          
          
        

        
          
            Workflow DevKit Docs


  );
}
[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);
  --animate-flow: flow 1.5s linear infinite;
}

body {
  background: #0a0a0a;
  color: #ededed;
  font-family: var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Sugar-high syntax highlighting — exact Geist dark-mode palette */
: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;
}

/* Flow diagram dot animation */
@keyframes flow {
  0% {
    left: -6px;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    left: calc(100% + 6px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-flow {
    animation: none !important;
    opacity: 0.5;
    left: 50% !important;
  }
}
[V0_FILE]javascript:file="postcss.config.mjs"
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;
[V0_FILE]typescript:file="workflows/report-generator.ts"
export async function generateReport(
  accountId: string,
  systemPrompt: string
) {
  "use workflow";

  // Each await is a cancellation checkpoint —
  // run.cancel() takes effect between steps.
  const intro = await generateSection("Introduction", systemPrompt);
  const market = await generateSection("Market Analysis", intro);
  const tech = await generateSection("Technical Architecture", market);
  const plan = await generateSection("Implementation Plan", tech);
  const risks = await generateSection("Risk Assessment", plan);
  const finance = await generateSection("Financial Projections", risks);
  const timeline = await generateSection("Timeline", finance);
  const team = await generateSection("Team Structure", timeline);
  const landscape = await generateSection("Competitive Landscape", team);
  const conclusion = await generateSection("Conclusion", landscape);

  return { accountId, report: conclusion, status: "completed" };
}

async function generateSection(
  title: string,
  previous?: string | { title: string }
) {
  "use step";
  const previousTitle =
    typeof previous === "string" ? previous : previous?.title;
  return { title, previous: previousTitle, status: "generated" };
}
[V0_FILE]typescriptreact:file="components/export-code-workbench.tsx"
"use client";

import { useState } from "react";

const EMPTY_HIGHLIGHT_SET = new Set();

type HighlightStyle = {
  border: string;
  bg: string;
  text: string;
};

const HIGHLIGHT_STYLES: HighlightStyle[] = [
  { border: "border-amber-700", bg: "bg-amber-700/15", text: "text-amber-700" },
  { border: "border-red-700", bg: "bg-red-700/15", text: "text-red-700" },
  { border: "border-green-700", bg: "bg-green-700/15", text: "text-green-700" },
];

const GUTTER_CHECK_COLORS = ["text-amber-700", "text-green-700"];
const CHECK_POINTS = "3,8.5 7,12.5 14,4.5";
const STEP_FILENAMES = ["generateSection()"];

type CopyState = "idle" | "copied" | "failed";

function CodePane({
  linesHtml,
  highlightLines,
  highlightStyle,
  lineHighlights,
  gutterMarks,
  activeSendSteps,
  filename,
  code,
}: {
  linesHtml: string[];
  highlightLines: Set;
  highlightStyle: HighlightStyle;
  lineHighlights?: Record;
  gutterMarks?: Record;
  activeSendSteps?: Set;
  filename: string;
  code: string;
}) {
  const [copyState, setCopyState] = useState("idle");

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopyState("copied");
      window.setTimeout(() => setCopyState("idle"), 1400);
    } catch {
      setCopyState("failed");
      window.setTimeout(() => setCopyState("idle"), 1400);
    }
  };

  return (
    
      
        
          
            
            
            
          
          {filename}
        
        
      
      
                  
            {linesHtml.map((lineHtml, index) => {
              const lineNumber = index + 1;
              const perLineColorIdx = lineHighlights?.[lineNumber];
              const perLineStyle =
                perLineColorIdx !== undefined
                  ? HIGHLIGHT_STYLES[perLineColorIdx]
                  : undefined;
              const isHighlighted =
                perLineStyle !== undefined || highlightLines.has(lineNumber);
              const activeStyle = perLineStyle ?? highlightStyle;

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

export type ExportCodeWorkbenchProps = {
  workflowCode: string;
  workflowLinesHtml: string[];
  stepCodes: string[];
  stepLinesHtml: string[][];
  activeStepIndex: number;
  highlightLines: number[];
  highlightColorIndex: number;
  gutterMarks: Record;
  activeSendSteps: Set;
};

export type ApiCodeWorkbenchProps = {
  leftCode: string;
  leftLinesHtml: string[];
  leftFilename: string;
  leftLineHighlights: Record;
  rightCode: string;
  rightLinesHtml: string[];
  rightFilename: string;
  rightLineHighlights: Record;
};

export function ApiCodeWorkbench({
  leftCode,
  leftLinesHtml,
  leftFilename,
  leftLineHighlights,
  rightCode,
  rightLinesHtml,
  rightFilename,
  rightLineHighlights,
}: ApiCodeWorkbenchProps) {
  return (
    
      
      
    
  );
}

export function ExportCodeWorkbench({
  workflowCode,
  workflowLinesHtml,
  stepCodes,
  stepLinesHtml,
  activeStepIndex,
  highlightLines,
  highlightColorIndex,
  gutterMarks,
  activeSendSteps,
}: ExportCodeWorkbenchProps) {
  const workflowHighlightLineSet = new Set(highlightLines);
  const activeHighlightStyle =
    HIGHLIGHT_STYLES[highlightColorIndex] ?? HIGHLIGHT_STYLES[0];

  const stepIndex = activeStepIndex >= 0 ? activeStepIndex : 0;
  const currentStepLinesHtml = stepLinesHtml[stepIndex] ?? [];
  const currentStepCode = stepCodes[stepIndex] ?? "";

  return (
    
      
      
    
  );
}
[V0_FILE]typescript:file="components/code-highlight-server.ts"
import { highlight } from "sugar-high";

export function highlightCodeToHtmlLines(code: string): string[] {
  return highlight(code).split("\n");
}
[V0_FILE]json:file="package.json"
{
  "name": "cancellable-export",
  "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.54"
  },
  "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 = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
};

export default withWorkflow(nextConfig);