\n\n \n\n \n \n\n\n `;\n\treturn c.html(html);\n});\n\n// ============================================================================\n// Start Local Server\n// ============================================================================\n\nconst PORT = 8000;\n\nconsole.log(\"\\n=======================================================\");\nconsole.log(\"Workflow API Server with Embedded Visualizer\");\nconsole.log(\"=======================================================\\n\");\nconsole.log(\"Registered workflows:\");\nconsole.log(\" - data-processing: Fetch, process, and save data\");\nconsole.log(\" - email-campaign: Automated email campaign\");\nconsole.log(\" - report-generation: Monthly report generation\\n\");\nconsole.log(\"API Endpoints:\");\nconsole.log(\" GET /api/workflows - List all workflows\");\nconsole.log(\" GET /api/workflows/:id - Get workflow details\");\nconsole.log(\" GET /api/workflows/:id/runs - List runs for workflow\");\nconsole.log(\" POST /api/workflows/:id/runs - Create new run\");\nconsole.log(\" GET /api/runs/:runId - Get run details\\n\");\nconsole.log(`Server starting on http://localhost:${PORT}`);\nconsole.log(`Open http://localhost:${PORT} to view the visualizer\\n`);\nconsole.log(\"=======================================================\\n\");\n\nDeno.serve({ port: PORT }, app.fetch);\n",[],[278,285],{"_105":293,"_96":294,"_158":117,"_160":279,"_161":143,"_162":287,"_164":119,"_107":295,"_101":32,"_166":296,"_168":297,"_169":22,"_170":-5,"_171":298,"_99":299},"1e71e540-c565-11f0-aafb-42dde27851f2","api-server-example.http.ts",["D",1763569854100],"http","/**\n * Example: API Server for Workflow Visualization (Val Town HTTP Val)\n *\n * This is a Val Town HTTP val that demonstrates:\n * 1. Setting up workflows with an API server using Hono\n * 2. Serving workflow data via REST API\n * 3. Creating and monitoring workflow runs\n * 4. Serving a React-based frontend visualizer\n *\n * This val is ready to deploy on Val Town!\n */\n\nimport { Hono } from \"https://esm.sh/hono@4\";\nimport { createStep, createWorkflow } from \"../backend/index.ts\";\nimport { WorkflowStorage } from \"../backend/storage.ts\";\nimport { z } from \"npm:zod@^3.23\";\n\n// Initialize storage\nconst storage = new WorkflowStorage();\nawait storage.init();\n\n// Create Hono app\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// In-memory workflow registry\nconst workflows = new Map();\n\n// ============================================================================\n// Example Workflow 1: Data Processing Pipeline\n// ============================================================================\n\nconst fetchData = createStep({\n id: \"fetch-data\",\n description: \"Fetch data from external API\",\n inputSchema: z.object({ url: z.string() }),\n outputSchema: z.object({ data: z.array(z.record(z.unknown())) }),\n execute: async ({ inputData }) => {\n console.log(`Fetching data from ${inputData.url}...`);\n\n // Simulate API call\n await new Promise((resolve) => setTimeout(resolve, 1000));\n\n return {\n data: [\n { id: 1, name: \"Alice\", score: 95 },\n { id: 2, name: \"Bob\", score: 87 },\n { id: 3, name: \"Charlie\", score: 92 },\n ],\n };\n },\n});\n\nconst processData = createStep({\n id: \"process-data\",\n description: \"Transform and filter data\",\n inputSchema: z.object({ data: z.array(z.record(z.unknown())) }),\n outputSchema: z.object({ processed: z.array(z.record(z.unknown())) }),\n execute: async ({ inputData }) => {\n console.log(\"Processing data...\");\n\n // Simulate processing\n await new Promise((resolve) => setTimeout(resolve, 800));\n\n const processed = inputData.data\n .filter((item: any) => item.score >= 90)\n .map((item: any) => ({\n ...item,\n grade: \"A\",\n timestamp: Date.now(),\n }));\n\n return { processed };\n },\n});\n\nconst saveResults = createStep({\n id: \"save-results\",\n description: \"Save processed data to database\",\n inputSchema: z.object({ processed: z.array(z.record(z.unknown())) }),\n outputSchema: z.object({ saved: z.number(), success: z.boolean() }),\n execute: async ({ inputData }) => {\n console.log(\"Saving results...\");\n\n // Simulate database save\n await new Promise((resolve) => setTimeout(resolve, 600));\n\n return {\n saved: inputData.processed.length,\n success: true,\n };\n },\n});\n\nconst dataProcessingWorkflow = createWorkflow({\n id: \"data-processing\",\n description: \"Fetch, process, and save data pipeline\",\n inputSchema: z.object({ url: z.string() }),\n outputSchema: z.object({ saved: z.number(), success: z.boolean() }),\n})\n .then(fetchData)\n .then(processData)\n .then(saveResults)\n .commit();\n\nworkflows.set(dataProcessingWorkflow.id, {\n workflow: dataProcessingWorkflow,\n exampleInput: { url: \"https://api.example.com/data\" },\n});\n\n// ============================================================================\n// Example Workflow 2: Email Campaign\n// ============================================================================\n\nconst fetchUsers = createStep({\n id: \"fetch-users\",\n description: \"Fetch users from database\",\n inputSchema: z.object({ segment: z.string() }),\n outputSchema: z.object({\n users: z.array(\n z.object({ id: z.string(), email: z.string(), name: z.string() }),\n ),\n }),\n execute: async ({ inputData }) => {\n console.log(`Fetching users in segment: ${inputData.segment}`);\n await new Promise((resolve) => setTimeout(resolve, 700));\n\n return {\n users: [\n { id: \"1\", email: \"alice@example.com\", name: \"Alice\" },\n { id: \"2\", email: \"bob@example.com\", name: \"Bob\" },\n { id: \"3\", email: \"charlie@example.com\", name: \"Charlie\" },\n ],\n };\n },\n});\n\nconst generateEmails = createStep({\n id: \"generate-emails\",\n description: \"Generate personalized email content\",\n inputSchema: z.object({\n users: z.array(\n z.object({ id: z.string(), email: z.string(), name: z.string() }),\n ),\n }),\n outputSchema: z.object({\n emails: z.array(\n z.object({ to: z.string(), subject: z.string(), body: z.string() }),\n ),\n }),\n execute: async ({ inputData }) => {\n console.log(\"Generating personalized emails...\");\n await new Promise((resolve) => setTimeout(resolve, 900));\n\n const emails = inputData.users.map((user) => ({\n to: user.email,\n subject: `Hello ${user.name}!`,\n body: `Hi ${user.name}, we have exciting news for you...`,\n }));\n\n return { emails };\n },\n});\n\nconst sendEmails = createStep({\n id: \"send-emails\",\n description: \"Send emails via email service\",\n inputSchema: z.object({\n emails: z.array(\n z.object({ to: z.string(), subject: z.string(), body: z.string() }),\n ),\n }),\n outputSchema: z.object({ sent: z.number(), failed: z.number() }),\n execute: async ({ inputData }) => {\n console.log(\"Sending emails...\");\n await new Promise((resolve) => setTimeout(resolve, 1200));\n\n return {\n sent: inputData.emails.length,\n failed: 0,\n };\n },\n});\n\nconst emailCampaignWorkflow = createWorkflow({\n id: \"email-campaign\",\n description: \"Automated email campaign workflow\",\n inputSchema: z.object({ segment: z.string() }),\n outputSchema: z.object({ sent: z.number(), failed: z.number() }),\n})\n .then(fetchUsers)\n .then(generateEmails)\n .then(sendEmails)\n .commit();\n\nworkflows.set(emailCampaignWorkflow.id, {\n workflow: emailCampaignWorkflow,\n exampleInput: { segment: \"premium-users\" },\n});\n\n// ============================================================================\n// Example Workflow 3: Report Generation (with potential failure)\n// ============================================================================\n\nconst collectMetrics = createStep({\n id: \"collect-metrics\",\n description: \"Collect performance metrics\",\n inputSchema: z.object({ period: z.string() }),\n outputSchema: z.object({ metrics: z.record(z.number()) }),\n execute: async ({ inputData }) => {\n console.log(`Collecting metrics for period: ${inputData.period}`);\n await new Promise((resolve) => setTimeout(resolve, 500));\n\n return {\n metrics: {\n users: 1250,\n revenue: 45600,\n conversions: 234,\n },\n };\n },\n});\n\nconst analyzeMetrics = createStep({\n id: \"analyze-metrics\",\n description: \"Analyze metrics and generate insights\",\n inputSchema: z.object({ metrics: z.record(z.number()) }),\n outputSchema: z.object({\n insights: z.array(z.string()),\n trends: z.record(z.string()),\n }),\n execute: async ({ inputData }) => {\n console.log(\"Analyzing metrics...\");\n await new Promise((resolve) => setTimeout(resolve, 800));\n\n // Randomly fail sometimes to demonstrate error handling\n if (Math.random() < 0.3) {\n throw new Error(\"Analysis service temporarily unavailable\");\n }\n\n return {\n insights: [\n \"User growth increased by 15%\",\n \"Revenue trending upward\",\n \"Conversion rate improved\",\n ],\n trends: {\n users: \"increasing\",\n revenue: \"increasing\",\n conversions: \"stable\",\n },\n };\n },\n});\n\nconst generateReport = createStep({\n id: \"generate-report\",\n description: \"Generate PDF report\",\n inputSchema: z.object({\n insights: z.array(z.string()),\n trends: z.record(z.string()),\n }),\n outputSchema: z.object({ reportUrl: z.string(), pages: z.number() }),\n execute: async ({ inputData }) => {\n console.log(\"Generating report...\");\n await new Promise((resolve) => setTimeout(resolve, 1000));\n\n return {\n reportUrl: `https://reports.example.com/report-${Date.now()}.pdf`,\n pages: 12,\n };\n },\n});\n\nconst reportWorkflow = createWorkflow({\n id: \"report-generation\",\n description: \"Monthly performance report generation\",\n inputSchema: z.object({ period: z.string() }),\n outputSchema: z.object({ reportUrl: z.string(), pages: z.number() }),\n})\n .then(collectMetrics)\n .then(analyzeMetrics)\n .then(generateReport)\n .commit();\n\nworkflows.set(reportWorkflow.id, {\n workflow: reportWorkflow,\n exampleInput: { period: \"2024-11\" },\n});\n\n// ============================================================================\n// API Routes\n// ============================================================================\n\n// GET /api/workflows - List all workflows\napp.get(\"/api/workflows\", (c) => {\n const workflowList = Array.from(workflows.entries()).map((\n [id, { workflow, exampleInput }],\n ) => ({\n id: workflow.id,\n description: workflow.config.description,\n steps: workflow.stepFlow.map((entry: any) => ({\n id: entry.step.id,\n description: entry.step.description,\n })),\n exampleInput,\n }));\n return c.json(workflowList);\n});\n\n// GET /api/workflows/:id - Get workflow details\napp.get(\"/api/workflows/:id\", (c) => {\n const workflowId = c.req.param(\"id\");\n const entry = workflows.get(workflowId);\n\n if (!entry) {\n return c.json({ error: \"Workflow not found\" }, 404);\n }\n\n const { workflow, exampleInput } = entry;\n return c.json({\n id: workflow.id,\n description: workflow.config.description,\n steps: workflow.stepFlow.map((entry: any) => ({\n id: entry.step.id,\n description: entry.step.description,\n })),\n exampleInput,\n });\n});\n\n// GET /api/workflows/:id/runs - List runs for a workflow\napp.get(\"/api/workflows/:id/runs\", async (c) => {\n const workflowId = c.req.param(\"id\");\n const snapshots = await storage.listRuns(workflowId);\n const runs = snapshots.map((snapshot) => ({\n runId: snapshot.runId,\n workflowId: snapshot.workflowId,\n status: snapshot.status,\n executionPath: snapshot.executionPath,\n stepResults: snapshot.stepResults,\n inputData: snapshot.inputData,\n result: snapshot.result,\n error: snapshot.error,\n createdAt: snapshot.timestamp,\n updatedAt: snapshot.timestamp,\n }));\n return c.json(runs);\n});\n\n// POST /api/workflows/:id/runs - Create a new run\napp.post(\"/api/workflows/:id/runs\", async (c) => {\n const workflowId = c.req.param(\"id\");\n const entry = workflows.get(workflowId);\n\n if (!entry) {\n return c.json({ error: \"Workflow not found\" }, 404);\n }\n\n const body = await c.req.json();\n const { inputData } = body;\n\n // Create and start the run\n const run = await entry.workflow.createRun();\n\n // Start execution in the background\n run.start({ inputData }).catch((error: Error) => {\n console.error(`Run ${run.runId} failed:`, error);\n });\n\n // Return the initial run state\n const snapshot = await storage.loadSnapshot(run.runId);\n if (!snapshot) {\n return c.json({ error: \"Failed to create run\" }, 500);\n }\n\n return c.json({\n runId: snapshot.runId,\n workflowId: snapshot.workflowId,\n status: snapshot.status,\n executionPath: snapshot.executionPath,\n stepResults: snapshot.stepResults,\n inputData: snapshot.inputData,\n result: snapshot.result,\n error: snapshot.error,\n createdAt: snapshot.timestamp,\n updatedAt: snapshot.timestamp,\n }, 201);\n});\n\n// GET /api/runs/:runId - Get run details\napp.get(\"/api/runs/:runId\", async (c) => {\n const runId = c.req.param(\"runId\");\n const snapshot = await storage.loadSnapshot(runId);\n\n if (!snapshot) {\n return c.json({ error: \"Run not found\" }, 404);\n }\n\n return c.json({\n runId: snapshot.runId,\n workflowId: snapshot.workflowId,\n status: snapshot.status,\n executionPath: snapshot.executionPath,\n stepResults: snapshot.stepResults,\n inputData: snapshot.inputData,\n result: snapshot.result,\n error: snapshot.error,\n createdAt: snapshot.timestamp,\n updatedAt: snapshot.timestamp,\n });\n});\n\n// ============================================================================\n// Frontend\n// ============================================================================\n\napp.get(\"/\", (c) => {\n const html = `\n\n\n \n \n Workflow Visualizer\n \n \n\n\n

\n\n \n\n \n \n\n\n `;\n return c.html(html);\n});\n\n// ============================================================================\n// Export for Val Town HTTP\n// ============================================================================\n\nexport default app.fetch; // This is the entry point for HTTP vals",[],[278,294],{"_105":301,"_96":302,"_158":303,"_160":279,"_161":143,"_162":304,"_164":119,"_107":305,"_101":189,"_166":306,"_168":307,"_169":22,"_170":-5,"_171":308,"_99":309},"79a852a0-c268-11f0-8b5b-42dde27851f2","cron-trigger.ts","e00ad5ea-c263-11f0-bf02-42dde27851f2",29,["D",1763241442175],"interval","/**\n * Example: Triggering workflows from a Cron val\n *\n * This demonstrates how to use the workflow engine from a Val Town Cron trigger.\n * Schedule this as a cron val to run workflows periodically.\n */\n\nimport { greetingWorkflow } from \"./simple-workflow.ts\";\n\nexport default async function (_interval: Interval) {\n\tconsole.log(`Cron triggered at ${new Date().toISOString()}`);\n\n\t// Example: Process a batch of users\n\tconst userIds = [\"user-1\", \"user-2\", \"user-3\"];\n\n\tconst results = [];\n\n\tfor (const userId of userIds) {\n\t\ttry {\n\t\t\tconst run = await greetingWorkflow.createRun();\n\n\t\t\tconst result = await run.start({\n\t\t\t\tinputData: { userId },\n\t\t\t});\n\n\t\t\tresults.push({\n\t\t\t\tuserId,\n\t\t\t\tsuccess: true,\n\t\t\t\trunId: run.runId,\n\t\t\t\tresult,\n\t\t\t});\n\n\t\t\tconsole.log(`✅ Processed ${userId}: ${result.messageId}`);\n\t\t} catch (error) {\n\t\t\tresults.push({\n\t\t\t\tuserId,\n\t\t\t\tsuccess: false,\n\t\t\t\terror: error instanceof Error ? error.message : String(error),\n\t\t\t});\n\n\t\t\tconsole.error(`❌ Failed to process ${userId}:`, error);\n\t\t}\n\t}\n\n\tconsole.log(`\\nProcessed ${results.length} users`);\n\tconsole.log(`Success: ${results.filter((r) => r.success).length}`);\n\tconsole.log(`Failed: ${results.filter((r) => !r.success).length}`);\n\n\treturn results;\n}\n",[],[278,302],{"_105":311,"_96":312,"_158":313,"_160":279,"_161":143,"_162":314,"_164":119,"_107":315,"_101":189,"_166":296,"_168":316,"_169":22,"_170":-5,"_171":317,"_99":318},"79abc304-c268-11f0-8a5d-42dde27851f2","http-trigger.ts","e0187da8-c263-11f0-8b6f-42dde27851f2",30,["D",1763241442211],"/**\n * Example: Triggering a workflow from an HTTP val\n *\n * This demonstrates how to use the workflow engine from a Val Town HTTP trigger.\n * Deploy this as an HTTP val to trigger workflows via HTTP requests.\n */\n\nimport { greetingWorkflow } from \"./simple-workflow.ts\";\n\nexport default async function (req: Request): Promise {\n\tconst url = new URL(req.url);\n\n\t// Get userId from query params\n\tconst userId = url.searchParams.get(\"userId\");\n\n\tif (!userId) {\n\t\treturn Response.json(\n\t\t\t{ error: \"Missing userId parameter\" },\n\t\t\t{ status: 400 },\n\t\t);\n\t}\n\n\ttry {\n\t\t// Create and start a workflow run\n\t\tconst run = await greetingWorkflow.createRun();\n\n\t\tconst result = await run.start({\n\t\t\tinputData: { userId },\n\t\t});\n\n\t\t// Get the snapshot for debugging info\n\t\tconst snapshot = await run.getSnapshot();\n\n\t\treturn Response.json({\n\t\t\tsuccess: true,\n\t\t\trunId: run.runId,\n\t\t\tresult,\n\t\t\tsteps: Object.keys(snapshot?.stepResults || {}),\n\t\t\tstatus: snapshot?.status,\n\t\t});\n\t} catch (error) {\n\t\treturn Response.json(\n\t\t\t{\n\t\t\t\tsuccess: false,\n\t\t\t\terror: error instanceof Error ? error.message : String(error),\n\t\t\t},\n\t\t\t{ status: 500 },\n\t\t);\n\t}\n}\n",[],[278,312],{"_105":320,"_96":321,"_158":322,"_160":279,"_161":143,"_162":323,"_164":119,"_107":324,"_101":32,"_166":179,"_168":325,"_169":22,"_170":-5,"_171":326,"_99":327},"3e8bedb0-c30f-11f0-b93a-42dde27851f2","prebuilt-steps-simple.ts","3e8bee8c-c30f-11f0-b93a-42dde27851f2",38,["D",1763313068932],"/**\n * Simple examples demonstrating prebuilt workflow steps\n *\n * Each example shows a practical use case for the prebuilt steps\n */\n\nimport { z } from \"npm:zod@^3.23\";\nimport {\n\tcreateStep,\n\tcreateWorkflow,\n\tdelay,\n\tfilterArray,\n\thttpGet,\n\tlogger,\n\tmapArray,\n\tpickFields,\n\ttemplate,\n} from \"../backend/index.ts\";\n\n// ============================================================================\n// Example 1: API Data Processing\n// ============================================================================\n\n/**\n * Fetch data from JSONPlaceholder API and process it\n */\nconst apiDataWorkflow = createWorkflow({\n\tid: \"api-data-processing\",\n\tdescription: \"Fetch and process posts from JSONPlaceholder API\",\n\tinputSchema: z.object({\n\t\turl: z.string().url(),\n\t}),\n\toutputSchema: z.object({\n\t\tstatus: z.number(),\n\t\tdata: z.unknown(),\n\t\theaders: z.record(z.string()),\n\t}),\n})\n\t.then(httpGet)\n\t.commit();\n\n// ============================================================================\n// Example 2: Template String Generation\n// ============================================================================\n\nconst templateWorkflow = createWorkflow({\n\tid: \"template-generation\",\n\tdescription: \"Generate personalized message from template\",\n\tinputSchema: z.object({\n\t\ttemplate: z.string(),\n\t\tvariables: z.record(z.union([z.string(), z.number(), z.boolean()])),\n\t}),\n\toutputSchema: z.object({\n\t\tresult: z.string(),\n\t}),\n})\n\t.then(template)\n\t.commit();\n\n// ============================================================================\n// Example 3: Array Filtering\n// ============================================================================\n\nconst filterWorkflow = createWorkflow({\n\tid: \"filter-workflow\",\n\tdescription: \"Filter array of numbers\",\n\tinputSchema: z.object({\n\t\tarray: z.array(z.unknown()),\n\t\tfilterFn: z.string(),\n\t}),\n\toutputSchema: z.object({\n\t\tfiltered: z.array(z.unknown()),\n\t\toriginalCount: z.number(),\n\t\tfilteredCount: z.number(),\n\t}),\n})\n\t.then(filterArray)\n\t.commit();\n\n// ============================================================================\n// Example 4: Multi-step workflow with custom steps\n// ============================================================================\n\n// Custom step to prepare API request\nconst prepareRequest = createStep({\n\tid: \"prepare-request\",\n\tinputSchema: z.object({\n\t\tuserId: z.number(),\n\t}),\n\toutputSchema: z.object({\n\t\turl: z.string().url(),\n\t\theaders: z.record(z.string()).optional(),\n\t\tqueryParams: z.record(z.string()).optional(),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\treturn {\n\t\t\turl: `https://jsonplaceholder.typicode.com/posts`,\n\t\t\tqueryParams: {\n\t\t\t\tuserId: String(inputData.userId),\n\t\t\t},\n\t\t};\n\t},\n});\n\n// Custom step to extract titles\nconst extractTitles = createStep({\n\tid: \"extract-titles\",\n\tinputSchema: z.object({\n\t\tstatus: z.number(),\n\t\tdata: z.unknown(),\n\t\theaders: z.record(z.string()),\n\t}),\n\toutputSchema: z.object({\n\t\tarray: z.array(z.unknown()),\n\t\tmapFn: z.string(),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\tconst posts = inputData.data as any[];\n\t\treturn {\n\t\t\tarray: posts,\n\t\t\tmapFn: \"(post) => post.title\",\n\t\t};\n\t},\n});\n\n// Custom step to format final output\nconst formatTitles = createStep({\n\tid: \"format-titles\",\n\tinputSchema: z.object({\n\t\tmapped: z.array(z.unknown()),\n\t\tcount: z.number(),\n\t}),\n\toutputSchema: z.object({\n\t\ttitles: z.array(z.string()),\n\t\tcount: z.number(),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\treturn {\n\t\t\ttitles: inputData.mapped as string[],\n\t\t\tcount: inputData.count,\n\t\t};\n\t},\n});\n\n// Build the workflow\nconst userPostsWorkflow = createWorkflow({\n\tid: \"user-posts-workflow\",\n\tdescription: \"Fetch posts for a user and extract titles\",\n\tinputSchema: z.object({\n\t\tuserId: z.number(),\n\t}),\n\toutputSchema: z.object({\n\t\ttitles: z.array(z.string()),\n\t\tcount: z.number(),\n\t}),\n})\n\t.then(prepareRequest) // Convert userId to API request\n\t.then(httpGet) // Fetch from API\n\t.then(extractTitles) // Prepare for mapping\n\t.then(mapArray) // Extract titles\n\t.then(formatTitles) // Format output\n\t.commit();\n\n// ============================================================================\n// Example 5: Logging and Delays\n// ============================================================================\n\n// Custom step to prepare log data\nconst prepareLog = createStep({\n\tid: \"prepare-log\",\n\tinputSchema: z.object({\n\t\tmessage: z.string(),\n\t}),\n\toutputSchema: z.object({\n\t\tlevel: z.enum([\"debug\", \"info\", \"warn\", \"error\"]),\n\t\tmessage: z.string(),\n\t\tdata: z.unknown().optional(),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\treturn {\n\t\t\tlevel: \"info\" as const,\n\t\t\tmessage: inputData.message,\n\t\t\tdata: { timestamp: Date.now() },\n\t\t};\n\t},\n});\n\n// Custom step to prepare delay\nconst prepareDelay = createStep({\n\tid: \"prepare-delay\",\n\tinputSchema: z.object({\n\t\tlevel: z.enum([\"debug\", \"info\", \"warn\", \"error\"]),\n\t\tmessage: z.string(),\n\t\tdata: z.unknown().optional(),\n\t\ttimestamp: z.string(),\n\t}),\n\toutputSchema: z.object({\n\t\tdurationMs: z.number(),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\treturn {\n\t\t\tdurationMs: 2000, // 2 second delay\n\t\t};\n\t},\n});\n\n// Custom step for final message\nconst finalMessage = createStep({\n\tid: \"final-message\",\n\tinputSchema: z.object({\n\t\tdurationMs: z.number(),\n\t\tcompletedAt: z.string(),\n\t}),\n\toutputSchema: z.object({\n\t\tmessage: z.string(),\n\t\tcompletedAt: z.string(),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\treturn {\n\t\t\tmessage: `Completed after ${inputData.durationMs}ms delay`,\n\t\t\tcompletedAt: inputData.completedAt,\n\t\t};\n\t},\n});\n\nconst logDelayWorkflow = createWorkflow({\n\tid: \"log-delay-workflow\",\n\tdescription: \"Log a message, wait, then complete\",\n\tinputSchema: z.object({\n\t\tmessage: z.string(),\n\t}),\n\toutputSchema: z.object({\n\t\tmessage: z.string(),\n\t\tcompletedAt: z.string(),\n\t}),\n})\n\t.then(prepareLog)\n\t.then(logger)\n\t.then(prepareDelay)\n\t.then(delay)\n\t.then(finalMessage)\n\t.commit();\n\n// ============================================================================\n// Run Examples\n// ============================================================================\n\nif (import.meta.main) {\n\tconsole.log(\"=\".repeat(60));\n\tconsole.log(\"Prebuilt Steps Examples\");\n\tconsole.log(\"=\".repeat(60));\n\n\t// Example 1: Simple HTTP GET\n\tconsole.log(\"\\n[Example 1] Simple HTTP GET\");\n\tconsole.log(\"-\".repeat(60));\n\ttry {\n\t\tconst run1 = await apiDataWorkflow.createRun();\n\t\tconst result1 = await run1.start({\n\t\t\tinputData: {\n\t\t\t\turl: \"https://jsonplaceholder.typicode.com/posts/1\",\n\t\t\t},\n\t\t});\n\t\tconsole.log(\"Status:\", result1.status);\n\t\tconsole.log(\"Data:\", result1.data);\n\t} catch (error) {\n\t\tconsole.error(\"Error:\", error);\n\t}\n\n\t// Example 2: Template String\n\tconsole.log(\"\\n[Example 2] Template String\");\n\tconsole.log(\"-\".repeat(60));\n\ttry {\n\t\tconst run2 = await templateWorkflow.createRun();\n\t\tconst result2 = await run2.start({\n\t\t\tinputData: {\n\t\t\t\ttemplate: \"Hello {{name}}! You have {{count}} new messages.\",\n\t\t\t\tvariables: {\n\t\t\t\t\tname: \"Alice\",\n\t\t\t\t\tcount: 5,\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t\tconsole.log(\"Result:\", result2.result);\n\t} catch (error) {\n\t\tconsole.error(\"Error:\", error);\n\t}\n\n\t// Example 3: Array Filtering\n\tconsole.log(\"\\n[Example 3] Array Filtering\");\n\tconsole.log(\"-\".repeat(60));\n\ttry {\n\t\tconst run3 = await filterWorkflow.createRun();\n\t\tconst result3 = await run3.start({\n\t\t\tinputData: {\n\t\t\t\tarray: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n\t\t\t\tfilterFn: \"(n) => n % 2 === 0\", // Even numbers only\n\t\t\t},\n\t\t});\n\t\tconsole.log(\"Original count:\", result3.originalCount);\n\t\tconsole.log(\"Filtered count:\", result3.filteredCount);\n\t\tconsole.log(\"Filtered values:\", result3.filtered);\n\t} catch (error) {\n\t\tconsole.error(\"Error:\", error);\n\t}\n\n\t// Example 4: Multi-step Workflow\n\tconsole.log(\"\\n[Example 4] Multi-step User Posts Workflow\");\n\tconsole.log(\"-\".repeat(60));\n\ttry {\n\t\tconst run4 = await userPostsWorkflow.createRun();\n\t\tconst result4 = await run4.start({\n\t\t\tinputData: {\n\t\t\t\tuserId: 1,\n\t\t\t},\n\t\t});\n\t\tconsole.log(\"Post count:\", result4.count);\n\t\tconsole.log(\"First 3 titles:\", result4.titles.slice(0, 3));\n\t} catch (error) {\n\t\tconsole.error(\"Error:\", error);\n\t}\n\n\t// Example 5: Logging and Delays\n\tconsole.log(\"\\n[Example 5] Logging and Delays\");\n\tconsole.log(\"-\".repeat(60));\n\ttry {\n\t\tconst run5 = await logDelayWorkflow.createRun();\n\t\tconst result5 = await run5.start({\n\t\t\tinputData: {\n\t\t\t\tmessage: \"Starting workflow with delay...\",\n\t\t\t},\n\t\t});\n\t\tconsole.log(\"Result:\", result5.message);\n\t\tconsole.log(\"Completed at:\", result5.completedAt);\n\t} catch (error) {\n\t\tconsole.error(\"Error:\", error);\n\t}\n\n\tconsole.log(\"\\n\" + \"=\".repeat(60));\n\tconsole.log(\"All examples completed!\");\n\tconsole.log(\"=\".repeat(60));\n}\n",[],[278,321],{"_105":329,"_96":330,"_158":331,"_160":279,"_161":143,"_162":332,"_164":119,"_107":333,"_101":189,"_166":179,"_168":334,"_169":22,"_170":-5,"_171":335,"_99":336},"79af28aa-c268-11f0-893d-42dde27851f2","simple-workflow.ts","e00e2632-c263-11f0-90bc-42dde27851f2",31,["D",1763241442221],"/**\n * Simple workflow example demonstrating the core API\n *\n * This example shows:\n * - Creating strongly-typed steps\n * - Chaining steps with type inference\n * - Accessing previous step results\n * - Running a workflow\n */\n\nimport { z } from \"npm:zod@^3.23\";\nimport { createStep, createWorkflow } from \"../backend/index.ts\";\n\n// Step 1: Fetch user data\nconst fetchUser = createStep({\n\tid: \"fetch-user\",\n\tdescription: \"Fetch user information\",\n\tinputSchema: z.object({ userId: z.string() }),\n\toutputSchema: z.object({\n\t\tuserId: z.string(),\n\t\tname: z.string(),\n\t\temail: z.string(),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\t// Simulate API call\n\t\tconsole.log(`Fetching user ${inputData.userId}...`);\n\n\t\treturn {\n\t\t\tuserId: inputData.userId,\n\t\t\tname: \"John Doe\",\n\t\t\temail: \"john@example.com\",\n\t\t};\n\t},\n});\n\n// Step 2: Generate personalized message\nconst generateMessage = createStep({\n\tid: \"generate-message\",\n\tdescription: \"Generate personalized greeting\",\n\tinputSchema: z.object({\n\t\tuserId: z.string(),\n\t\tname: z.string(),\n\t\temail: z.string(),\n\t}),\n\toutputSchema: z.object({\n\t\tmessage: z.string(),\n\t\trecipient: z.string(),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(`Generating message for ${inputData.name}...`);\n\n\t\treturn {\n\t\t\tmessage: `Hello ${inputData.name}! Welcome to our service.`,\n\t\t\trecipient: inputData.email,\n\t\t};\n\t},\n});\n\n// Step 3: Send message (accessing previous step results)\nconst sendMessage = createStep({\n\tid: \"send-message\",\n\tdescription: \"Send the message\",\n\tinputSchema: z.object({\n\t\tmessage: z.string(),\n\t\trecipient: z.string(),\n\t}),\n\toutputSchema: z.object({\n\t\tsent: z.boolean(),\n\t\tmessageId: z.string(),\n\t}),\n\texecute: async ({ inputData, getStepResult }) => {\n\t\t// Access previous step result\n\t\tconst user = getStepResult(fetchUser);\n\n\t\tconsole.log(`Sending message to ${inputData.recipient}...`);\n\t\tconsole.log(`User from previous step: ${user.name}`);\n\n\t\t// Simulate sending\n\t\treturn {\n\t\t\tsent: true,\n\t\t\tmessageId: `msg-${Date.now()}`,\n\t\t};\n\t},\n});\n\n// Create the workflow with full type inference\nexport const greetingWorkflow = createWorkflow({\n\tid: \"greeting-workflow\",\n\tdescription: \"Send a personalized greeting to a user\",\n\tinputSchema: z.object({ userId: z.string() }),\n\toutputSchema: z.object({ sent: z.boolean(), messageId: z.string() }),\n})\n\t.then(fetchUser) // Input: { userId: string }\n\t.then(generateMessage) // Input: fetchUser's output (type inferred!)\n\t.then(sendMessage) // Input: generateMessage's output (type inferred!)\n\t.commit();\n\n// Example usage (for testing outside Val Town)\nif (import.meta.main) {\n\tconsole.log(\"Running greeting workflow example...\\n\");\n\n\tconst run = await greetingWorkflow.createRun();\n\n\ttry {\n\t\tconst result = await run.start({\n\t\t\tinputData: { userId: \"user-123\" },\n\t\t});\n\n\t\tconsole.log(\"\\n✅ Workflow completed successfully!\");\n\t\tconsole.log(\"Result:\", result);\n\n\t\t// Get the snapshot\n\t\tconst snapshot = await run.getSnapshot();\n\t\tconsole.log(\"\\nSnapshot:\", {\n\t\t\trunId: snapshot?.runId,\n\t\t\tstatus: snapshot?.status,\n\t\t\tsteps: Object.keys(snapshot?.stepResults || {}),\n\t\t});\n\t} catch (error) {\n\t\tconsole.error(\"\\n❌ Workflow failed:\");\n\t\tconsole.error(error);\n\t}\n}\n",[],[278,330],{"_105":338,"_96":339,"_158":340,"_160":279,"_161":143,"_162":341,"_164":119,"_107":342,"_101":32,"_166":179,"_168":343,"_169":22,"_170":-5,"_171":344,"_99":345},"c195c06e-c50d-11f0-bb58-42dde27851f2","workflow-visualization.ts","c195c122-c50d-11f0-bb58-42dde27851f2",49,["D",1763532331987],"/**\n * Workflow Visualization Example\n *\n * This example demonstrates how to visualize workflows using the built-in\n * visualization features. It shows both static workflow structure visualization\n * and dynamic execution state visualization.\n */\n\nimport { z } from \"npm:zod@^3.23\";\nimport { createStep, createWorkflow } from \"../backend/index.ts\";\n\n// Define steps for a simple data processing workflow\nconst fetchData = createStep({\n\tid: \"fetch-data\",\n\tdescription: \"Fetch data from API\",\n\tinputSchema: z.object({ url: z.string() }),\n\toutputSchema: z.object({ data: z.array(z.any()) }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(`Fetching from ${inputData.url}...`);\n\t\t// Simulate API call\n\t\tawait new Promise((resolve) => setTimeout(resolve, 100));\n\t\treturn {\n\t\t\tdata: [\n\t\t\t\t{ id: 1, name: \"Item 1\", value: 100 },\n\t\t\t\t{ id: 2, name: \"Item 2\", value: 200 },\n\t\t\t\t{ id: 3, name: \"Item 3\", value: 50 },\n\t\t\t],\n\t\t};\n\t},\n});\n\nconst filterData = createStep({\n\tid: \"filter-data\",\n\tdescription: \"Filter items by threshold\",\n\tinputSchema: z.object({ data: z.array(z.any()) }),\n\toutputSchema: z.object({ filtered: z.array(z.any()) }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(`Filtering ${inputData.data.length} items...`);\n\t\tconst threshold = 75;\n\t\tconst filtered = inputData.data.filter((item) => item.value > threshold);\n\t\treturn { filtered };\n\t},\n});\n\nconst transformData = createStep({\n\tid: \"transform-data\",\n\tdescription: \"Transform data to summary format\",\n\tinputSchema: z.object({ filtered: z.array(z.any()) }),\n\toutputSchema: z.object({\n\t\ttotal: z.number(),\n\t\tcount: z.number(),\n\t\titems: z.array(z.string()),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(`Transforming ${inputData.filtered.length} items...`);\n\t\tconst total = inputData.filtered.reduce(\n\t\t\t(sum, item) => sum + item.value,\n\t\t\t0,\n\t\t);\n\t\tconst count = inputData.filtered.length;\n\t\tconst items = inputData.filtered.map((item) => item.name);\n\t\treturn { total, count, items };\n\t},\n});\n\nconst saveResults = createStep({\n\tid: \"save-results\",\n\tdescription: \"Save results to database\",\n\tinputSchema: z.object({\n\t\ttotal: z.number(),\n\t\tcount: z.number(),\n\t\titems: z.array(z.string()),\n\t}),\n\toutputSchema: z.object({ saved: z.boolean(), recordId: z.string() }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(`Saving ${inputData.count} results...`);\n\t\t// Simulate database save\n\t\tawait new Promise((resolve) => setTimeout(resolve, 100));\n\t\treturn {\n\t\t\tsaved: true,\n\t\t\trecordId: crypto.randomUUID(),\n\t\t};\n\t},\n});\n\n// Create workflow\nconst dataProcessingWorkflow = createWorkflow({\n\tid: \"data-processing\",\n\tdescription: \"Fetch, filter, transform, and save data\",\n\tinputSchema: z.object({ url: z.string() }),\n\toutputSchema: z.object({ saved: z.boolean(), recordId: z.string() }),\n})\n\t.then(fetchData)\n\t.then(filterData)\n\t.then(transformData)\n\t.then(saveResults)\n\t.commit();\n\n// Example 1: Visualize static workflow structure\nconsole.log(\"=\".repeat(60));\nconsole.log(\"STATIC WORKFLOW VISUALIZATION\");\nconsole.log(\"=\".repeat(60));\nconsole.log();\n\nconst staticDiagram = dataProcessingWorkflow.visualize(\"mermaid\", {\n\tincludeDescriptions: true,\n});\nconsole.log(staticDiagram);\nconsole.log();\n\n// Example 2: Execute workflow and visualize execution state\nconsole.log(\"=\".repeat(60));\nconsole.log(\"EXECUTING WORKFLOW\");\nconsole.log(\"=\".repeat(60));\nconsole.log();\n\nconst run = await dataProcessingWorkflow.createRun();\n\n// You could visualize during execution in a real scenario\n// For this example, we'll execute and then visualize the final state\nconst result = await run.start({\n\tinputData: { url: \"https://api.example.com/data\" },\n});\n\nconsole.log(\"Workflow completed!\");\nconsole.log(\"Result:\", result);\nconsole.log();\n\n// Example 3: Visualize execution state\nconsole.log(\"=\".repeat(60));\nconsole.log(\"EXECUTION STATE VISUALIZATION\");\nconsole.log(\"=\".repeat(60));\nconsole.log();\n\nconst executionDiagram = await run.visualize(\"mermaid\", {\n\tincludeDescriptions: true,\n\thighlightCurrentStep: true,\n\tshowStatus: true,\n});\n\nif (executionDiagram) {\n\tconsole.log(executionDiagram);\n} else {\n\tconsole.log(\"No execution snapshot available\");\n}\nconsole.log();\n\n// Example 4: Compact visualization without descriptions\nconsole.log(\"=\".repeat(60));\nconsole.log(\"COMPACT VISUALIZATION\");\nconsole.log(\"=\".repeat(60));\nconsole.log();\n\nconst compactDiagram = dataProcessingWorkflow.visualize(\"mermaid\", {\n\tincludeDescriptions: false,\n});\nconsole.log(compactDiagram);\nconsole.log();\n\nconsole.log(\"=\".repeat(60));\nconsole.log(\"To render these diagrams:\");\nconsole.log(\"1. Copy the Mermaid code\");\nconsole.log(\"2. Paste into https://mermaid.live\");\nconsole.log(\"3. Or use a Markdown renderer that supports Mermaid\");\nconsole.log(\"=\".repeat(60));\n",[],[278,339],[278],{"_105":348,"_96":349,"_158":350,"_160":-5,"_161":143,"_162":351,"_164":119,"_107":352,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":353,"_99":514},"502cb8dc-c55e-11f0-b304-42dde27851f2","frontend","502cb990-c55e-11f0-b304-42dde27851f2",51,["D",1763566931109],[354,451,460,469,478,487,496,505],{"_105":355,"_96":356,"_158":357,"_160":350,"_161":143,"_162":358,"_164":119,"_107":359,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":360,"_99":450},"503e4a52-c55e-11f0-bbdc-42dde27851f2","src","503e4b1a-c55e-11f0-bbdc-42dde27851f2",52,["D",1763566931225],[361,406,415,424,433,442],{"_105":362,"_96":363,"_158":364,"_160":357,"_161":143,"_162":365,"_164":119,"_107":366,"_101":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":367,"_99":405},"50548092-c55e-11f0-9376-42dde27851f2","components","50548178-c55e-11f0-9376-42dde27851f2",53,["D",1763566931369],[368,378,387,396],{"_105":369,"_96":370,"_158":371,"_160":364,"_161":143,"_162":372,"_164":119,"_107":373,"_101":32,"_166":374,"_168":375,"_169":22,"_170":-5,"_171":376,"_99":377},"50ba3130-c55e-11f0-b7ba-42dde27851f2","StepNode.css","50ba325c-c55e-11f0-b7ba-42dde27851f2",65,["D",1763566932039],"file",".step-node {\n background: white;\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n padding: 12px;\n min-width: 220px;\n max-width: 320px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n transition: all 0.2s;\n}\n\n.step-node:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n transform: translateY(-2px);\n}\n\n.step-node.running {\n border-color: #2196F3;\n background: #E3F2FD;\n}\n\n.step-node.success {\n border-color: #4CAF50;\n background: #E8F5E9;\n}\n\n.step-node.failed {\n border-color: #F44336;\n background: #FFEBEE;\n}\n\n.step-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.step-index {\n font-size: 11px;\n font-weight: 600;\n color: #999;\n background: #f5f5f5;\n padding: 2px 6px;\n border-radius: 3px;\n}\n\n.step-status-icon {\n font-size: 16px;\n font-weight: bold;\n}\n\n.step-label {\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 4px;\n word-break: break-word;\n}\n\n.step-description {\n font-size: 12px;\n color: #666;\n margin-bottom: 8px;\n line-height: 1.4;\n}\n\n.step-details {\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid #e0e0e0;\n}\n\n.step-running {\n display: flex;\n align-items: center;\n gap: 8px;\n color: #2196F3;\n font-size: 12px;\n font-weight: 500;\n}\n\n.spinner {\n width: 14px;\n height: 14px;\n border: 2px solid #E3F2FD;\n border-top-color: #2196F3;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.step-output,\n.step-error {\n font-size: 11px;\n}\n\n.output-label,\n.error-label {\n font-weight: 600;\n margin-bottom: 4px;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.output-label {\n color: #4CAF50;\n}\n\n.error-label {\n color: #F44336;\n}\n\n.step-output pre {\n background: #f9f9f9;\n padding: 8px;\n border-radius: 4px;\n overflow-x: auto;\n max-height: 120px;\n overflow-y: auto;\n font-size: 10px;\n line-height: 1.4;\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n}\n\n.error-message {\n background: #FFF3E0;\n padding: 8px;\n border-radius: 4px;\n color: #D84315;\n font-size: 11px;\n line-height: 1.4;\n}\n\n.react-flow__handle {\n width: 8px;\n height: 8px;\n background: #2196F3;\n border: 2px solid white;\n}\n",[],[349,356,363,370],{"_105":379,"_96":380,"_158":381,"_160":364,"_161":143,"_162":382,"_164":119,"_107":383,"_101":32,"_166":179,"_168":384,"_169":22,"_170":-5,"_171":385,"_99":386},"50c6eb6e-c55e-11f0-9e05-42dde27851f2","StepNode.tsx","50c6ec2c-c55e-11f0-9e05-42dde27851f2",67,["D",1763566932090],"import { memo } from 'react'\nimport { Handle, Position, NodeProps } from 'reactflow'\nimport './StepNode.css'\n\ninterface StepNodeData {\n label: string\n description?: string\n status: 'pending' | 'running' | 'success' | 'failed'\n output?: unknown\n error?: string\n index: number\n}\n\nfunction StepNode({ data }: NodeProps) {\n const { label, description, status, output, error, index } = data\n\n const getStatusIcon = () => {\n switch (status) {\n case 'success': return '✓'\n case 'failed': return '✗'\n case 'running': return '●'\n default: return '○'\n }\n }\n\n const getStatusColor = () => {\n switch (status) {\n case 'success': return '#4CAF50'\n case 'failed': return '#F44336'\n case 'running': return '#2196F3'\n default: return '#999'\n }\n }\n\n return (\n

\n \n\n

#{index}

\n \n {getStatusIcon()}\n

\n\n

{label}

\n\n {description && (\n

{description}

\n )}\n\n {status !== 'pending' && (\n

\n {status === 'running' && (\n

\n Executing...\n

\n )}\n\n {status === 'success' && output && (\n

Output:

{JSON.stringify(output, null, 2)}

\n )}\n\n {status === 'failed' && error && (\n

Error:

{error}

\n )}\n

\n )}\n\n \n \n )\n}\n\nexport default memo(StepNode)\n",[],[349,356,363,380],{"_105":388,"_96":389,"_158":390,"_160":364,"_161":143,"_162":391,"_164":119,"_107":392,"_101":32,"_166":374,"_168":393,"_169":22,"_170":-5,"_171":394,"_99":395},"50b1f0e2-c55e-11f0-9e05-42dde27851f2","WorkflowVisualizer.css","50b1f1a0-c55e-11f0-9e05-42dde27851f2",64,["D",1763566931985],".workflow-visualizer {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n background: white;\n}\n\n.visualizer-header {\n padding: 20px 24px;\n border-bottom: 1px solid #e0e0e0;\n background: white;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.visualizer-header h1 {\n font-size: 24px;\n font-weight: 600;\n margin-bottom: 4px;\n}\n\n.visualizer-header p {\n font-size: 14px;\n color: #666;\n}\n\n.run-info {\n text-align: right;\n}\n\n.run-status {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n font-weight: 600;\n text-transform: capitalize;\n}\n\n.status-indicator {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n}\n\n.status-indicator.running {\n background: #2196F3;\n animation: pulse 1.5s ease-in-out infinite;\n}\n\n.status-indicator.success {\n background: #4CAF50;\n}\n\n.status-indicator.failed {\n background: #F44336;\n}\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n.run-meta {\n font-size: 12px;\n color: #666;\n}\n\n.run-meta code {\n background: #f5f5f5;\n padding: 2px 6px;\n border-radius: 3px;\n font-family: monospace;\n}\n\n.react-flow__node {\n font-size: 12px;\n}\n",[],[349,356,363,389],{"_105":397,"_96":398,"_158":399,"_160":364,"_161":143,"_162":400,"_164":119,"_107":401,"_101":32,"_166":179,"_168":402,"_169":22,"_170":-5,"_171":403,"_99":404},"50c18d90-c55e-11f0-abdb-42dde27851f2","WorkflowVisualizer.tsx","50c18e44-c55e-11f0-abdb-42dde27851f2",66,["D",1763566932087],"import { useCallback, useEffect, useMemo } from 'react'\nimport ReactFlow, {\n Node,\n Edge,\n Background,\n Controls,\n MiniMap,\n useNodesState,\n useEdgesState,\n MarkerType,\n} from 'reactflow'\nimport 'reactflow/dist/style.css'\nimport { WorkflowData, WorkflowRunData, StepResult } from '../types'\nimport StepNode from './StepNode'\nimport './WorkflowVisualizer.css'\n\ninterface WorkflowVisualizerProps {\n workflow: WorkflowData\n run?: WorkflowRunData | null\n}\n\nconst nodeTypes = {\n stepNode: StepNode,\n}\n\nfunction WorkflowVisualizer({ workflow, run }: WorkflowVisualizerProps) {\n const [nodes, setNodes, onNodesChange] = useNodesState([])\n const [edges, setEdges, onEdgesChange] = useEdgesState([])\n\n const getStepStatus = useCallback((stepId: string): StepResult['status'] | 'pending' => {\n if (!run?.stepResults?.[stepId]) return 'pending'\n return run.stepResults[stepId].status\n }, [run])\n\n const getStepOutput = useCallback((stepId: string): unknown => {\n if (!run?.stepResults?.[stepId]) return undefined\n const result = run.stepResults[stepId]\n return result.status === 'success' ? result.output : undefined\n }, [run])\n\n const getStepError = useCallback((stepId: string): string | undefined => {\n if (!run?.stepResults?.[stepId]) return undefined\n const result = run.stepResults[stepId]\n return result.status === 'failed' ? result.error : undefined\n }, [run])\n\n // Build graph layout\n const buildGraph = useCallback(() => {\n const nodeWidth = 220\n const nodeHeight = 100\n const horizontalGap = 100\n const verticalGap = 80\n\n const newNodes: Node[] = []\n const newEdges: Edge[] = []\n\n // Start node\n newNodes.push({\n id: 'start',\n type: 'input',\n position: { x: 50, y: 50 },\n data: {\n label: workflow.id,\n },\n style: {\n background: '#C8E6C9',\n border: '2px solid #2E7D32',\n borderRadius: 8,\n padding: 16,\n fontWeight: 600,\n },\n })\n\n let currentX = 50\n let currentY = 50 + nodeHeight + verticalGap\n\n // Step nodes\n workflow.steps.forEach((step, index) => {\n const status = getStepStatus(step.id)\n const output = getStepOutput(step.id)\n const error = getStepError(step.id)\n\n newNodes.push({\n id: step.id,\n type: 'stepNode',\n position: { x: currentX, y: currentY },\n data: {\n label: step.id,\n description: step.description,\n status,\n output,\n error,\n index: index + 1,\n },\n })\n\n // Edge from previous node\n const sourceId = index === 0 ? 'start' : workflow.steps[index - 1].id\n newEdges.push({\n id: `${sourceId}-${step.id}`,\n source: sourceId,\n target: step.id,\n type: 'smoothstep',\n animated: status === 'running',\n style: {\n stroke: status === 'success' ? '#4CAF50' :\n status === 'failed' ? '#F44336' :\n status === 'running' ? '#2196F3' : '#999',\n strokeWidth: 2,\n },\n markerEnd: {\n type: MarkerType.ArrowClosed,\n color: status === 'success' ? '#4CAF50' :\n status === 'failed' ? '#F44336' :\n status === 'running' ? '#2196F3' : '#999',\n },\n })\n\n currentY += nodeHeight + verticalGap\n })\n\n // End node\n const lastStep = workflow.steps[workflow.steps.length - 1]\n newNodes.push({\n id: 'end',\n type: 'output',\n position: { x: currentX, y: currentY },\n data: {\n label: run?.status === 'success' ? '✓ Complete' :\n run?.status === 'failed' ? '✗ Failed' :\n run?.status === 'running' ? '● Running' : 'End',\n },\n style: {\n background: run?.status === 'success' ? '#C8E6C9' :\n run?.status === 'failed' ? '#FFCDD2' :\n run?.status === 'running' ? '#BBDEFB' : '#E0E0E0',\n border: run?.status === 'success' ? '2px solid #2E7D32' :\n run?.status === 'failed' ? '2px solid #C62828' :\n run?.status === 'running' ? '2px solid #1976D2' : '2px solid #999',\n borderRadius: 8,\n padding: 16,\n fontWeight: 600,\n },\n })\n\n newEdges.push({\n id: `${lastStep.id}-end`,\n source: lastStep.id,\n target: 'end',\n type: 'smoothstep',\n animated: run?.status === 'running',\n style: {\n stroke: run?.status === 'success' ? '#4CAF50' :\n run?.status === 'failed' ? '#F44336' :\n run?.status === 'running' ? '#2196F3' : '#999',\n strokeWidth: 2,\n },\n markerEnd: {\n type: MarkerType.ArrowClosed,\n color: run?.status === 'success' ? '#4CAF50' :\n run?.status === 'failed' ? '#F44336' :\n run?.status === 'running' ? '#2196F3' : '#999',\n },\n })\n\n setNodes(newNodes)\n setEdges(newEdges)\n }, [workflow, run, getStepStatus, getStepOutput, getStepError, setNodes, setEdges])\n\n useEffect(() => {\n buildGraph()\n }, [buildGraph])\n\n return (\n

{workflow.id}

\n {workflow.description &&

{workflow.description}

}\n

\n {run && (\n

\n \n {run.status}\n

\n Run ID: {run.runId.slice(0, 12)}...\n

\n )}\n

\n \n \n \n {\n if (node.type === 'input') return '#C8E6C9'\n if (node.type === 'output') return '#E0E0E0'\n const status = node.data.status\n return status === 'success' ? '#C8E6C9' :\n status === 'failed' ? '#FFCDD2' :\n status === 'running' ? '#BBDEFB' : '#F5F5F5'\n }}\n />\n \n

\n )\n}\n\nexport default WorkflowVisualizer\n",[],[349,356,363,398],[349,356,363],{"_105":407,"_96":408,"_158":409,"_160":357,"_161":143,"_162":410,"_164":119,"_107":411,"_101":32,"_166":374,"_168":412,"_169":22,"_170":-5,"_171":413,"_99":414},"509a2fac-c55e-11f0-9e05-42dde27851f2","App.css","509a3088-c55e-11f0-9e05-42dde27851f2",61,["D",1763566931827],".app {\n display: flex;\n height: 100vh;\n background: #f5f5f5;\n}\n\n.sidebar {\n width: 320px;\n background: white;\n border-right: 1px solid #e0e0e0;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n}\n\n.sidebar-section {\n padding: 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.sidebar-section h2 {\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n color: #666;\n margin-bottom: 12px;\n}\n\n.section-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.btn-create {\n padding: 6px 12px;\n background: #2196F3;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n font-weight: 500;\n}\n\n.btn-create:hover {\n background: #1976D2;\n}\n\n.workflow-list,\n.runs-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.workflow-item,\n.run-item {\n padding: 12px;\n background: #f9f9f9;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n border: 2px solid transparent;\n}\n\n.workflow-item:hover,\n.run-item:hover {\n background: #f0f0f0;\n}\n\n.workflow-item.active,\n.run-item.active {\n background: #E3F2FD;\n border-color: #2196F3;\n}\n\n.workflow-name {\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.workflow-description {\n font-size: 12px;\n color: #666;\n}\n\n.run-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 6px;\n}\n\n.status-badge {\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.status-badge.running {\n background: #FFF3E0;\n color: #E65100;\n}\n\n.status-badge.success {\n background: #E8F5E9;\n color: #2E7D32;\n}\n\n.status-badge.failed {\n background: #FFEBEE;\n color: #C62828;\n}\n\n.run-time {\n font-size: 11px;\n color: #999;\n}\n\n.run-id {\n font-family: monospace;\n font-size: 11px;\n color: #666;\n}\n\n.auto-refresh {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n cursor: pointer;\n user-select: none;\n}\n\n.auto-refresh input[type=\"checkbox\"] {\n cursor: pointer;\n}\n\n.main-content {\n flex: 1;\n position: relative;\n}\n",[],[349,356,408],{"_105":416,"_96":417,"_158":418,"_160":357,"_161":143,"_162":419,"_164":119,"_107":420,"_101":32,"_166":179,"_168":421,"_169":22,"_170":-5,"_171":422,"_99":423},"50a788d2-c55e-11f0-9376-42dde27851f2","App.tsx","50a789ae-c55e-11f0-9376-42dde27851f2",62,["D",1763566931704],"import { useState, useEffect } from 'react'\nimport WorkflowVisualizer from './components/WorkflowVisualizer'\nimport { WorkflowData, WorkflowRunData } from './types'\nimport './App.css'\n\nfunction App() {\n const [workflows, setWorkflows] = useState([])\n const [selectedWorkflow, setSelectedWorkflow] = useState(null)\n const [runs, setRuns] = useState([])\n const [selectedRun, setSelectedRun] = useState(null)\n const [autoRefresh, setAutoRefresh] = useState(false)\n\n // Fetch available workflows\n useEffect(() => {\n fetchWorkflows()\n }, [])\n\n // Fetch runs for selected workflow\n useEffect(() => {\n if (selectedWorkflow) {\n fetchRuns(selectedWorkflow.id)\n }\n }, [selectedWorkflow])\n\n // Auto-refresh selected run\n useEffect(() => {\n if (!autoRefresh || !selectedRun) return\n\n const interval = setInterval(() => {\n fetchRunDetails(selectedRun.runId)\n }, 1000)\n\n return () => clearInterval(interval)\n }, [autoRefresh, selectedRun])\n\n const fetchWorkflows = async () => {\n try {\n const response = await fetch('/api/workflows')\n const data = await response.json()\n setWorkflows(data)\n if (data.length > 0 && !selectedWorkflow) {\n setSelectedWorkflow(data[0])\n }\n } catch (error) {\n console.error('Failed to fetch workflows:', error)\n }\n }\n\n const fetchRuns = async (workflowId: string) => {\n try {\n const response = await fetch(`/api/workflows/${workflowId}/runs`)\n const data = await response.json()\n setRuns(data)\n if (data.length > 0) {\n setSelectedRun(data[0])\n }\n } catch (error) {\n console.error('Failed to fetch runs:', error)\n }\n }\n\n const fetchRunDetails = async (runId: string) => {\n try {\n const response = await fetch(`/api/runs/${runId}`)\n const data = await response.json()\n setSelectedRun(data)\n\n // Update in the runs list too\n setRuns(prev => prev.map(run =>\n run.runId === runId ? data : run\n ))\n } catch (error) {\n console.error('Failed to fetch run details:', error)\n }\n }\n\n const createNewRun = async () => {\n if (!selectedWorkflow) return\n\n try {\n const response = await fetch(`/api/workflows/${selectedWorkflow.id}/runs`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n inputData: selectedWorkflow.exampleInput || {}\n })\n })\n const newRun = await response.json()\n setRuns(prev => [newRun, ...prev])\n setSelectedRun(newRun)\n setAutoRefresh(true)\n } catch (error) {\n console.error('Failed to create run:', error)\n }\n }\n\n return (\n

Workflows

\n {workflows.map(workflow => (\n setSelectedWorkflow(workflow)}\n >\n

{workflow.id}

\n {workflow.description && (\n

{workflow.description}

\n )}\n

\n ))}\n

\n\n {selectedWorkflow && (\n

Runs

\n \n

\n {runs.map(run => (\n setSelectedRun(run)}\n >\n

\n {run.status}\n \n {new Date(run.createdAt).toLocaleTimeString()}\n \n

{run.runId.slice(0, 8)}...

\n ))}\n

\n )}\n\n {selectedRun && (\n

\n \n setAutoRefresh(e.target.checked)}\n />\n Auto-refresh\n \n

\n )}\n \n\n

\n {selectedWorkflow && (\n \n )}\n

\n \n )\n}\n\nexport default App\n",[],[349,356,417],{"_105":425,"_96":426,"_158":427,"_160":357,"_161":143,"_162":428,"_164":119,"_107":429,"_101":32,"_166":374,"_168":430,"_169":22,"_170":-5,"_171":431,"_99":432},"5105e3d2-c55e-11f0-9a9b-42dde27851f2","index.css","5105e49a-c55e-11f0-9a9b-42dde27851f2",73,["D",1763566931894],"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n#root {\n width: 100vw;\n height: 100vh;\n}\n",[],[349,356,426],{"_105":434,"_96":435,"_158":436,"_160":357,"_161":143,"_162":437,"_164":119,"_107":438,"_101":32,"_166":179,"_168":439,"_169":22,"_170":-5,"_171":440,"_99":441},"5090e410-c55e-11f0-9a9b-42dde27851f2","main.tsx","5090e4a6-c55e-11f0-9a9b-42dde27851f2",60,["D",1763566931752],"import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n ,\n)\n",[],[349,356,435],{"_105":443,"_96":250,"_158":444,"_160":357,"_161":143,"_162":445,"_164":119,"_107":446,"_101":32,"_166":179,"_168":447,"_169":22,"_170":-5,"_171":448,"_99":449},"50ac5150-c55e-11f0-abdb-42dde27851f2","50ac5218-c55e-11f0-abdb-42dde27851f2",63,["D",1763566931936],"export interface WorkflowStep {\n id: string\n description?: string\n}\n\nexport interface WorkflowData {\n id: string\n description?: string\n steps: WorkflowStep[]\n exampleInput?: Record\n}\n\nexport interface StepResult {\n status: 'success' | 'failed' | 'running'\n output?: unknown\n error?: string\n timestamp: number\n}\n\nexport interface WorkflowRunData {\n runId: string\n workflowId: string\n status: 'running' | 'success' | 'failed'\n executionPath: number[]\n stepResults: Record\n inputData: unknown\n result?: unknown\n error?: string\n createdAt: number\n updatedAt: number\n}\n",[],[349,356,250],[349,356],{"_105":452,"_96":453,"_158":454,"_160":350,"_161":143,"_162":455,"_164":119,"_107":456,"_101":32,"_166":374,"_168":457,"_169":22,"_170":-5,"_171":458,"_99":459},"50d97950-c55e-11f0-a2ef-42dde27851f2",".gitignore","50d97a4a-c55e-11f0-a2ef-42dde27851f2",70,["D",1763566931583],"# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n",[],[349,453],{"_105":461,"_96":462,"_158":463,"_160":350,"_161":143,"_162":464,"_164":119,"_107":465,"_101":32,"_166":374,"_168":466,"_169":22,"_170":-5,"_171":467,"_99":468},"506ba39e-c55e-11f0-9a9b-42dde27851f2","README.md","506ba470-c55e-11f0-9a9b-42dde27851f2",54,["D",1763566931517],"# Workflow Visualizer\n\nA React-based canvas visualizer for the wrkflw workflow engine. Provides real-time visualization of workflow execution with interactive controls.\n\n## Features\n\n- **Interactive Canvas**: Built with React Flow for smooth pan, zoom, and navigation\n- **Real-time Updates**: Auto-refresh to watch workflow execution live\n- **Step Details**: View step outputs, errors, and execution status\n- **Multiple Workflows**: Switch between different workflows and their runs\n- **Execution History**: Browse past workflow runs and their results\n- **Status Indicators**: Visual feedback for running, success, and failed steps\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+ or Bun\n- The wrkflw backend API server running on port 8000\n\n### Installation\n\n```bash\nnpm install\n# or\nbun install\n```\n\n### Development\n\nStart the development server:\n\n```bash\nnpm run dev\n# or\nbun run dev\n```\n\nThe app will be available at `http://localhost:3000`.\n\n### Building for Production\n\n```bash\nnpm run build\n# or\nbun run build\n```\n\nPreview the production build:\n\n```bash\nnpm run preview\n# or\nbun run preview\n```\n\n## Usage\n\n### 1. Start the Backend API Server\n\nFirst, start the wrkflw backend with the API server:\n\n```bash\n# From the root directory\ndeno run --allow-all examples/api-server-example.ts\n```\n\nThis will:\n- Initialize the workflow engine\n- Register example workflows\n- Start the API server on port 8000\n\n### 2. Start the Frontend\n\n```bash\ncd frontend\nnpm install\nnpm run dev\n```\n\nOpen `http://localhost:3000` in your browser.\n\n### 3. Using the Visualizer\n\n1. **Select a Workflow**: Click on a workflow in the left sidebar\n2. **Create a Run**: Click \"+ New Run\" to execute the workflow\n3. **Watch Live**: Enable \"Auto-refresh\" to see real-time updates\n4. **Inspect Steps**: Click on step nodes to see detailed outputs\n5. **Navigate**: Use mouse to pan, scroll to zoom, minimap for overview\n\n## Architecture\n\n### Components\n\n- **App.tsx**: Main application container, manages workflow and run selection\n- **WorkflowVisualizer.tsx**: Canvas-based workflow renderer using React Flow\n- **StepNode.tsx**: Custom node component for workflow steps\n\n### State Management\n\n- React hooks for local state\n- Fetch API for backend communication\n- Auto-refresh polling for real-time updates\n\n### API Integration\n\nThe frontend communicates with the backend API:\n\n```\nGET /api/workflows - List all workflows\nGET /api/workflows/:id - Get workflow details\nGET /api/workflows/:id/runs - List runs for a workflow\nPOST /api/workflows/:id/runs - Create a new run\nGET /api/runs/:runId - Get run details\n```\n\n## Customization\n\n### Styling\n\nModify the CSS files to customize the appearance:\n\n- `App.css`: Main layout and sidebar styles\n- `WorkflowVisualizer.css`: Canvas and header styles\n- `StepNode.css`: Step node appearance and animations\n\n### Node Layout\n\nAdjust the graph layout in `WorkflowVisualizer.tsx`:\n\n```typescript\nconst nodeWidth = 220\nconst nodeHeight = 100\nconst horizontalGap = 100\nconst verticalGap = 80\n```\n\n### Status Colors\n\nCustomize status colors in `StepNode.tsx`:\n\n```typescript\nconst getStatusColor = () => {\n switch (status) {\n case 'success': return '#4CAF50'\n case 'failed': return '#F44336'\n case 'running': return '#2196F3'\n default: return '#999'\n }\n}\n```\n\n## Technology Stack\n\n- **React 18**: UI framework\n- **TypeScript**: Type safety\n- **React Flow**: Canvas rendering and interactions\n- **Vite**: Build tool and dev server\n- **Zustand**: State management (via React Flow)\n\n## Development Tips\n\n### Hot Module Replacement\n\nVite provides instant HMR. Changes to React components will reflect immediately without losing state.\n\n### Debugging\n\nOpen React DevTools to inspect component state and props. The browser console shows API requests and responses.\n\n### API Proxy\n\nThe dev server proxies `/api/*` requests to `http://localhost:8000`. This avoids CORS issues during development.\n\n## Troubleshooting\n\n### API Connection Issues\n\nIf workflows don't load:\n\n1. Ensure the backend API server is running on port 8000\n2. Check the browser console for CORS or network errors\n3. Verify the proxy configuration in `vite.config.ts`\n\n### Run Not Updating\n\nIf a run appears stuck:\n\n1. Enable auto-refresh\n2. Check the backend console for errors\n3. Manually refresh by clicking the run again\n\n### Build Errors\n\nIf TypeScript errors occur:\n\n```bash\nnpm run build -- --force\n```\n\nOr check for missing dependencies:\n\n```bash\nnpm install\n```\n\n## Contributing\n\nWhen adding new features:\n\n1. Add TypeScript types to `types.ts`\n2. Update components with proper typing\n3. Add CSS for new elements\n4. Test with multiple workflows and run states\n\n## License\n\nSame license as the parent wrkflw project.\n",[],[349,462],{"_105":470,"_96":471,"_158":472,"_160":350,"_161":143,"_162":473,"_164":119,"_107":474,"_101":32,"_166":374,"_168":475,"_169":22,"_170":-5,"_171":476,"_99":477},"5073010c-c55e-11f0-9e05-42dde27851f2","index.html","507301c0-c55e-11f0-9e05-42dde27851f2",55,["D",1763566931567],"\n\n \n \n \n Workflow Visualizer\n \n \n

\n \n \n\n",[],[349,471],{"_105":479,"_96":480,"_158":481,"_160":350,"_161":143,"_162":482,"_164":119,"_107":483,"_101":32,"_166":374,"_168":484,"_169":22,"_170":-5,"_171":485,"_99":486},"508c355a-c55e-11f0-b7ba-42dde27851f2","package.json","508c364a-c55e-11f0-b7ba-42dde27851f2",59,["D",1763566931579],"{\n \"name\": \"wrkflw-visualizer\",\n \"private\": true,\n \"version\": \"0.1.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"react\": \"^18.3.1\",\n \"react-dom\": \"^18.3.1\",\n \"reactflow\": \"^11.11.0\",\n \"zustand\": \"^4.5.0\"\n },\n \"devDependencies\": {\n \"@types/react\": \"^18.3.0\",\n \"@types/react-dom\": \"^18.3.0\",\n \"@vitejs/plugin-react\": \"^4.3.0\",\n \"typescript\": \"^5.6.0\",\n \"vite\": \"^5.4.0\"\n }\n}\n",[],[349,480],{"_105":488,"_96":489,"_158":490,"_160":350,"_161":143,"_162":491,"_164":119,"_107":492,"_101":32,"_166":374,"_168":493,"_169":22,"_170":-5,"_171":494,"_99":495},"507f452a-c55e-11f0-9a9b-42dde27851f2","tsconfig.json","507f45de-c55e-11f0-9a9b-42dde27851f2",57,["D",1763566931653],"{\n \"compilerOptions\": {\n \"target\": \"ES2020\",\n \"useDefineForClassFields\": true,\n \"lib\": [\"ES2020\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"skipLibCheck\": true,\n \"moduleResolution\": \"bundler\",\n \"allowImportingTsExtensions\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noFallthroughCasesInSwitch\": true\n },\n \"include\": [\"src\"],\n \"references\": [{ \"path\": \"./tsconfig.node.json\" }]\n}\n",[],[349,489],{"_105":497,"_96":498,"_158":499,"_160":350,"_161":143,"_162":500,"_164":119,"_107":501,"_101":32,"_166":374,"_168":502,"_169":22,"_170":-5,"_171":503,"_99":504},"5076df0c-c55e-11f0-9376-42dde27851f2","tsconfig.node.json","5076dff2-c55e-11f0-9376-42dde27851f2",56,["D",1763566931521],"{\n \"compilerOptions\": {\n \"composite\": true,\n \"skipLibCheck\": true,\n \"module\": \"ESNext\",\n \"moduleResolution\": \"bundler\",\n \"allowSyntheticDefaultImports\": true\n },\n \"include\": [\"vite.config.ts\"]\n}\n",[],[349,498],{"_105":506,"_96":507,"_158":508,"_160":350,"_161":143,"_162":509,"_164":119,"_107":510,"_101":32,"_166":179,"_168":511,"_169":22,"_170":-5,"_171":512,"_99":513},"5086b350-c55e-11f0-9e05-42dde27851f2","vite.config.ts","5086b422-c55e-11f0-9e05-42dde27851f2",58,["D",1763566931698],"import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n plugins: [react()],\n server: {\n port: 3000,\n proxy: {\n '/api': {\n target: 'http://localhost:8000',\n changeOrigin: true,\n },\n },\n },\n})\n",[],[349,507],[349],{"_105":516,"_96":453,"_158":517,"_160":-5,"_161":143,"_162":518,"_164":119,"_107":519,"_101":189,"_166":374,"_168":520,"_169":22,"_170":-5,"_171":521,"_99":522},"7211f60c-c30f-11f0-b45f-42dde27851f2","b38efac2-c25f-11f0-89ce-42dde27851f2",44,["D",1763313155409],"/.idea/\n/.vscode/\n/node_modules\n.env\n.env.local\n*.orig\n*.pyc\n*.swp\n\n",[],[453],{"_105":524,"_96":525,"_158":526,"_160":-5,"_161":143,"_162":199,"_164":119,"_107":527,"_101":32,"_166":374,"_168":528,"_169":22,"_170":-5,"_171":529,"_99":530},"b39a8c34-c25f-11f0-9227-42dde27851f2",".vtignore","b39a8d1a-c25f-11f0-9227-42dde27851f2",["D",1763237673937],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor",[],[525],{"_105":532,"_96":533,"_158":534,"_160":-5,"_161":143,"_162":189,"_164":22,"_107":535,"_101":32,"_166":374,"_168":536,"_169":22,"_170":-5,"_171":537,"_99":538},"b38b3978-c25f-11f0-92e7-42dde27851f2","AGENTS.md","b38b3a2c-c25f-11f0-92e7-42dde27851f2",["D",1763237673827],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider\n refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure\n about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious\n operations)\n- Follow modern ES6+ conventions and functional programming practices if\n possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = \"todo_app_users_2\";\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(\n `SELECT * FROM ${TABLE_NAME} WHERE id = ?`,\n [1],\n);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add\n_2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({\n subject: \"Hi\",\n text: \"Hi\",\n html: \"

Hi

\",\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport {\n parseProject,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\"\nurls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's _extremely importing_ to note that `parseProject` and other\nStandard Library utilities ONLY RUN ON THE SERVER. If you need access to this\ndata on the client, run it in the server and pass it to the client by splicing\nit into the HTML page or by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use\n `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})`\n instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode\n symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use:\n `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys)\n unless otherwise specified\n- **View Source:** Add a view source link by importing & using\n `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the\n client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add\n `` to HTML to capture\n client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local\n resolution; Avoid catches that merely log or return 500s. Let errors bubble up\n with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but\n generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure\n compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer\n simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with\n `?deps=react@18.2.0,react-dom@18.2.0` and start the file with\n `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same\n version\n- **Styling:** Default to using TailwindCSS via\n `` unless otherwise\n specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project\n files:\n ```ts\n import {\n readFile,\n serveFile,\n } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to\n see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:**\n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of\n React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with\n `export default app.fetch // This is the entry point for HTTP vals`",[],[533],{"_105":540,"_96":541,"_158":542,"_160":-5,"_161":143,"_162":102,"_164":119,"_107":543,"_101":123,"_166":374,"_168":544,"_169":22,"_170":-5,"_171":545,"_99":546},"e62e4c6c-c5d9-11f0-bc0c-42dde27851f2","CLAUDE.md","b7d8d632-c55e-11f0-9263-42dde27851f2",["D",1763620010860],"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Project Overview\n\n**wrkflw** is a TypeScript-first workflow engine for Val Town, inspired by Mastra. It enables building strongly-typed, composable workflows that run on Val Town's serverless platform with SQLite-backed durable state.\n\nThe engine features full TypeScript type inference across workflow definitions, runtime validation via Zod schemas, and supports all Val Town trigger types (HTTP, Cron, Email).\n\n## Development Environment\n\n### Running Examples\n\n```bash\n# Run a simple workflow example\ndeno run --allow-all examples/simple-workflow.ts\n\n# Run the API server with canvas visualizer (local development)\ndeno run --allow-all examples/api-server-example-local.ts\n\n# Then in another terminal, start the frontend\ncd frontend\nnpm install\nnpm run dev\n```\n\n### Testing Workflows\n\nThe project doesn't have a formal test suite. Test workflows by:\n1. Running example files directly with Deno\n2. Using the API server + frontend visualizer for interactive testing\n3. Checking SQLite state in the database after execution\n\n### Code Quality\n\n```bash\n# Format code with Biome\ndeno run -A npm:@biomejs/biome format --write .\n\n# Lint code\ndeno run -A npm:@biomejs/biome lint .\n```\n\n## Architecture\n\n### Core Components\n\nThe workflow engine consists of these key parts:\n\n1. **Step System** (`backend/step.ts`): Individual workflow steps with typed inputs/outputs\n2. **Workflow Builder** (`backend/workflow.ts`): Fluent API for composing steps with type inference\n3. **Execution Engine** (`backend/engine.ts`): Sequential step execution with context management\n4. **Storage Layer** (`backend/storage.ts`): SQLite persistence for workflow state\n5. **Run Management** (`backend/run.ts`): Workflow execution instance lifecycle\n\n### Type Inference Pattern\n\nThe workflow builder threads types through the `.then()` chain:\n- Each step's `outputSchema` must match the next step's `inputSchema`\n- TypeScript enforces this at compile time\n- The workflow's final output type is inferred from the last step\n\nExample flow:\n```typescript\n// Step 1: string -> number\nconst step1 = createStep({\n inputSchema: z.object({ a: z.string() }),\n outputSchema: z.object({ b: z.number() }),\n execute: async ({ inputData }) => ({ b: 42 })\n});\n\n// Step 2: number -> boolean (MUST accept step1's output type)\nconst step2 = createStep({\n inputSchema: z.object({ b: z.number() }),\n outputSchema: z.object({ c: z.boolean() }),\n execute: async ({ inputData }) => ({ c: true })\n});\n\n// Workflow builder enforces type compatibility\nconst workflow = createWorkflow({\n inputSchema: z.object({ a: z.string() }),\n outputSchema: z.object({ c: z.boolean() })\n})\n .then(step1) // OK: accepts { a: string }\n .then(step2) // OK: accepts { b: number } from step1\n .commit(); // Final type: { c: boolean }\n```\n\n### State Management\n\nWorkflows persist state to SQLite after each step execution:\n- Each run gets a unique `runId` (UUID)\n- Snapshots include: status, execution path, step results, state, errors\n- Storage uses UPSERT pattern to handle interruptions\n- Migrations in `backend/migrations.ts` handle schema evolution\n\n### Execution Context\n\nSteps receive a rich execution context:\n- `inputData`: Validated input for this step\n- `getStepResult(step)`: Access outputs from previous steps\n- `getInitData()`: Get workflow's initial input\n- `state` / `setState`: Workflow-level state (optional)\n- `runId`, `workflowId`: Execution identifiers\n\n## Project Structure\n\n```\nwrkflw/\n├── backend/ # Core workflow engine\n│ ├── index.ts # Main exports\n│ ├── types.ts # TypeScript type definitions\n│ ├── step.ts # Step creation and execution\n│ ├── workflow.ts # Workflow builder with type inference\n│ ├── engine.ts # Sequential execution engine\n│ ├── storage.ts # SQLite persistence layer\n│ ├── run.ts # Run lifecycle management\n│ ├── migrations.ts # Database schema migrations\n│ ├── prebuilt-steps.ts # Reusable steps (httpGet, template, etc.)\n│ ├── visualize.ts # Mermaid diagram generation\n│ └── api-server.ts # REST API for canvas visualizer\n├── frontend/ # React canvas visualizer\n│ ├── src/\n│ │ ├── App.tsx # Main app container\n│ │ ├── components/\n│ │ │ ├── WorkflowVisualizer.tsx # React Flow canvas\n│ │ │ └── StepNode.tsx # Custom step nodes\n│ │ └── types.ts # Frontend types\n│ └── package.json\n├── examples/ # Usage examples\n│ ├── simple-workflow.ts\n│ ├── http-trigger.ts\n│ ├── cron-trigger.ts\n│ ├── prebuilt-steps-simple.ts\n│ ├── workflow-visualization.ts\n│ └── api-server-example-local.ts\n├── deno.json # Deno configuration\n├── biome.json # Biome formatter/linter config\n└── PLAN.md # Original implementation plan\n```\n\n## Common Development Tasks\n\n### Creating New Steps\n\nSteps should have clear, focused responsibilities:\n\n```typescript\nimport { createStep } from \"./backend/index.ts\";\nimport { z } from \"npm:zod@^3.23\";\n\nconst myStep = createStep({\n id: 'my-step', // Unique identifier\n description: 'What this step does', // Optional description\n inputSchema: z.object({ /* ... */ }), // Input validation\n outputSchema: z.object({ /* ... */ }), // Output validation\n execute: async ({ inputData, getStepResult }) => {\n // Step logic here\n return { /* matches outputSchema */ };\n }\n});\n```\n\n### Adding Prebuilt Steps\n\nWhen adding reusable steps to `backend/prebuilt-steps.ts`:\n1. Follow the existing pattern (httpGet, template, etc.)\n2. Use generic Zod schemas for flexibility\n3. Add clear JSDoc comments with examples\n4. Export from `backend/index.ts`\n\n### Database Migrations\n\nWhen modifying workflow state schema:\n1. Add migration to `backend/migrations.ts`\n2. Update `WorkflowStorage.init()` to create new columns/tables\n3. Test migration with existing data\n4. Consider backward compatibility\n\n### Adding API Endpoints\n\nThe API server (`backend/api-server.ts`) follows REST conventions:\n- `GET /api/workflows` - List workflows\n- `GET /api/workflows/:id` - Get workflow details\n- `POST /api/workflows/:id/runs` - Start new run\n- `GET /api/runs/:runId` - Get run status\n\nWhen adding endpoints:\n1. Add route matching in `handleRequest()`\n2. Include CORS headers\n3. Serialize data appropriately\n4. Handle errors gracefully\n\n## Val Town Specifics\n\n### Import Patterns\n\nThe codebase uses dynamic imports for Val Town compatibility:\n```typescript\n// Storage imports sqlite dynamically\nconst { sqlite } = await import(\"https://esm.town/v/std/sqlite\");\n```\n\nThis allows the code to work both:\n- In Val Town (where sqlite is available)\n- Locally with Deno (where it may not be)\n\n### Trigger Types\n\nWorkflows are designed to be called from any Val Town trigger:\n\n**HTTP Trigger** (`*.http.ts`):\n```typescript\nexport default async function(req: Request) {\n const run = await workflow.createRun();\n const result = await run.start({ inputData: { /* ... */ } });\n return Response.json(result);\n}\n```\n\n**Cron Trigger** (`*.cron.ts`):\n```typescript\nexport default async function(interval: Interval) {\n const run = await workflow.createRun();\n await run.start({ inputData: { /* ... */ } });\n}\n```\n\n**Email Trigger** (`*.email.ts`):\n```typescript\nexport default async function(email: Email) {\n const run = await workflow.createRun();\n await run.start({\n inputData: {\n from: email.from,\n subject: email.subject\n }\n });\n}\n```\n\n### Storage Constraints\n\n- SQLite is the only available database in Val Town\n- No blob storage in Phase 1 (use JSON serialization)\n- Tables use `wrkflw_` prefix to avoid naming conflicts\n- Indexes on `workflow_id` and `status` for performance\n\n## Visualization\n\n### Mermaid Diagrams\n\nGenerate workflow structure diagrams:\n```typescript\nconst diagram = workflow.visualize(\"mermaid\");\nconsole.log(diagram); // Paste into GitHub, mermaid.live, etc.\n```\n\nGenerate execution state diagrams:\n```typescript\nconst run = await workflow.createRun();\nawait run.start({ inputData: { /* ... */ } });\nconst executionDiagram = await run.visualize(\"mermaid\");\n```\n\n### Canvas Visualizer\n\nThe frontend provides an interactive React Flow canvas:\n1. Start API server: `deno run --allow-all examples/api-server-example-local.ts`\n2. Start frontend: `cd frontend && npm run dev`\n3. Open http://localhost:3000\n4. Select workflows, create runs, watch execution in real-time\n\n## Important Patterns\n\n### Error Handling\n\nErrors bubble up from steps to the engine:\n- Step execution wrapped in try/catch\n- Errors stored in `StepResult` with `status: 'failed'`\n- Workflow snapshot saved with error details\n- Error propagates to caller (no automatic retries in Phase 1)\n\n### Initialization\n\nWorkflows auto-initialize on first run:\n```typescript\nconst run = await workflow.createRun(); // Calls init() internally\n```\n\nThis creates database tables if they don't exist. For explicit control:\n```typescript\nawait workflow.init();\n```\n\n### Accessing Step Results\n\nWithin a step's execute function:\n```typescript\nexecute: async ({ getStepResult, getInitData }) => {\n // Get output from a specific previous step\n const userData = getStepResult(fetchUser);\n\n // Get the workflow's initial input\n const initialInput = getInitData();\n\n return { /* ... */ };\n}\n```\n\n### Workflow State\n\nDefine workflow-level state that persists across steps:\n```typescript\nconst workflow = createWorkflow({\n id: 'stateful-workflow',\n inputSchema: z.object({ /* ... */ }),\n outputSchema: z.object({ /* ... */ }),\n stateSchema: z.object({ counter: z.number() }) // Workflow state\n});\n\nconst step = createStep({\n execute: async ({ state, setState }) => {\n const count = (state?.counter || 0) + 1;\n setState({ counter: count });\n return { /* ... */ };\n }\n});\n```\n\n## Future Phases\n\nThe roadmap is defined in PLAN.md:\n- **Phase 2**: Parallel execution, branching, data transformations\n- **Phase 3**: Durability (sleep, suspend/resume)\n- **Phase 4**: Advanced features (foreach, nested workflows, retries)\n- **Phase 5**: Observability (streaming, debugging UI, time-travel)\n\nWhen implementing new features, follow the type-safe pattern established in Phase 1.\n\n## Key Files to Understand\n\nTo quickly understand the codebase architecture:\n\n1. **types.ts** - Core type definitions and interfaces\n2. **workflow.ts** - Type inference through builder pattern\n3. **engine.ts** - Sequential execution logic\n4. **examples/simple-workflow.ts** - Complete end-to-end example\n\nReading these four files provides 80% of the architectural understanding needed to work effectively in this codebase.\n",[],[541],{"_105":548,"_96":549,"_158":550,"_160":-5,"_161":143,"_162":287,"_164":119,"_107":551,"_101":32,"_166":374,"_168":552,"_169":22,"_170":-5,"_171":553,"_99":554},"1e71f954-c565-11f0-aafb-42dde27851f2","FRONTEND_COMPARISON.md","1e71f9cc-c565-11f0-aafb-42dde27851f2",["D",1763569854100],"# Frontend Visualization Comparison\n\nThis document explains the two different frontend implementations for the workflow visualizer and when to use each.\n\n## Overview\n\nThere are two versions of the workflow visualizer:\n\n1. **Local ReactFlow Frontend** - Full-featured interactive flow diagram for local development\n2. **Val Town Frontend** - Simplified embedded version for Val Town HTTP vals\n\n---\n\n## 1. Local ReactFlow Frontend\n\n**Location:** `/frontend/` directory\n\n### Technology Stack\n- **React** 18+ with TypeScript\n- **ReactFlow** - Interactive node-based UI library\n- **Vite** - Build tool and dev server\n- **CSS** - Modular component stylesheets\n\n### Features\n- ✨ **Interactive Flow Diagram** - Drag, zoom, and pan canvas\n- 🎨 **Custom Step Nodes** with rich visualizations:\n - Step number badges (#1, #2, etc.)\n - Status icons (✓ success, ✗ failed, ● running, ○ pending)\n - Expandable output/error displays\n - Animated spinners for running steps\n- 🔗 **Animated Edges** - Color-coded connections between steps\n - Green for successful steps\n - Red for failed steps\n - Blue animated edges for running steps\n - Gray for pending steps\n- 🗺️ **MiniMap & Controls** - Easy navigation for large workflows\n- 📊 **Visual Graph Layout** - Automatic vertical step arrangement\n- 🎯 **Start/End Nodes** - Clear workflow boundaries\n\n### Visual Style\n- **Light theme** - White background (#FFFFFF)\n- **Material Design colors** - Green/red/blue status indicators\n- **Professional layout** - Clean, spacious design\n\n### Use Cases\n- **Local development** - Full-featured workflow development\n- **Desktop applications** - Rich visualization needs\n- **Complex workflows** - Many steps or branches\n- **Interactive debugging** - Detailed step inspection\n\n### Setup & Running\n```bash\ncd frontend\nnpm install\nnpm run dev\n# Visit http://localhost:3000\n```\n\nThe frontend expects the API server to be running separately on port 8000.\n\n### Architecture\n```\nfrontend/\n├── src/\n│ ├── App.tsx # Main app with sidebar\n│ ├── components/\n│ │ ├── WorkflowVisualizer.tsx # ReactFlow canvas\n│ │ └── StepNode.tsx # Custom step node component\n│ ├── types.ts # TypeScript interfaces\n│ └── *.css # Component styles\n├── index.html\n└── package.json\n```\n\n---\n\n## 2. Val Town Frontend\n\n**Location:** `examples/api-server-example.http.ts` (embedded)\n\n### Technology Stack\n- **React** 18.2.0 from CDN (esm.sh)\n- **Plain HTML/CSS** - No build step required\n- **Import Maps** - Modern ESM imports\n- **Inline JavaScript** - Single-file deployment\n\n### Features\n- 📝 **List-based Layout** - Simple vertical step list\n- 🎨 **Color-coded Borders** - Visual step status indicators\n - Blue border for pending steps\n - Green border for completed steps\n - Red border for failed steps\n- 🏷️ **Status Badges** - Clear running/success/failed indicators\n- 📊 **Step Details** - Expandable output and error information\n- 🔄 **Auto-refresh** - Optional automatic run updates\n- 📱 **Responsive** - Works on all screen sizes\n\n### Visual Style\n- **Dark theme** - Near-black background (#0a0a0a)\n- **Modern aesthetic** - Minimalist design\n- **Compact layout** - Efficient use of space\n\n### Use Cases\n- **Val Town deployment** - Self-contained HTTP vals\n- **Quick prototyping** - No build step needed\n- **Simple workflows** - Sequential step execution\n- **Embedded views** - Lightweight visualization\n\n### Deployment\n\n**For Val Town:**\nSimply copy the contents of `examples/api-server-example.http.ts` to a Val Town HTTP val. Everything (API + frontend) is included in a single file.\n\n**For Local Development:**\nRun the local server version for testing without deploying:\n```bash\ndeno run --allow-all examples/api-server-example-local.ts\n# Open http://localhost:8000\n```\n\nThis gives you the same embedded visualizer but running locally on port 8000.\n\n### Architecture\n```\napi-server-example.http.ts # Val Town deployment version\napi-server-example-local.ts # Local development version\n├── Workflow definitions\n├── Hono API routes\n└── Embedded HTML with:\n ├──

nbbaier

wrkflw