Workflow Visualizer

\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",[],[584,616],"c554c278-d1c8-11f0-8d7b-42dde27851f2","api-server-example-local.ts","019aee26-23ab-7319-83f5-bb96aec4cd9b",["D",1764932068219],"/**\n * Example: API Server for Workflow Visualization (Local Deno Server)\n *\n * This example demonstrates how to run a local API server that:\n * 1. Sets up workflows with an API server using Hono\n * 2. Serves workflow data via REST API\n * 3. Creates and monitors workflow runs\n * 4. Serves a React-based frontend visualizer\n *\n * Run this example locally:\n * deno run --allow-all examples/api-server-example-local.ts\n *\n * Then open http://localhost:8000 to see the visualizer\n *\n * Note: For Val Town deployment, use api-server-example.http.ts instead\n */\n\nimport { Hono } from \"https://esm.sh/hono@4\";\nimport { z } from \"npm:zod@^3.23\";\nimport { createStep, createWorkflow } from \"../backend/index.ts\";\nimport { WorkflowStorage } from \"../backend/storage.ts\";\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\tthrow 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\tid: \"fetch-data\",\n\tdescription: \"Fetch data from external API\",\n\tinputSchema: z.object({ url: z.string() }),\n\toutputSchema: z.object({ data: z.array(z.record(z.unknown())) }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(`Fetching data from ${inputData.url}...`);\n\n\t\t// Simulate API call\n\t\tawait new Promise((resolve) => setTimeout(resolve, 1000));\n\n\t\treturn {\n\t\t\tdata: [\n\t\t\t\t{ id: 1, name: \"Alice\", score: 95 },\n\t\t\t\t{ id: 2, name: \"Bob\", score: 87 },\n\t\t\t\t{ id: 3, name: \"Charlie\", score: 92 },\n\t\t\t],\n\t\t};\n\t},\n});\n\nconst processData = createStep({\n\tid: \"process-data\",\n\tdescription: \"Transform and filter data\",\n\tinputSchema: z.object({ data: z.array(z.record(z.unknown())) }),\n\toutputSchema: z.object({ processed: z.array(z.record(z.unknown())) }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(\"Processing data...\");\n\n\t\t// Simulate processing\n\t\tawait new Promise((resolve) => setTimeout(resolve, 800));\n\n\t\tconst processed = inputData.data\n\t\t\t.filter((item: any) => item.score >= 90)\n\t\t\t.map((item: any) => ({\n\t\t\t\t...item,\n\t\t\t\tgrade: \"A\",\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}));\n\n\t\treturn { processed };\n\t},\n});\n\nconst saveResults = createStep({\n\tid: \"save-results\",\n\tdescription: \"Save processed data to database\",\n\tinputSchema: z.object({ processed: z.array(z.record(z.unknown())) }),\n\toutputSchema: z.object({ saved: z.number(), success: z.boolean() }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(\"Saving results...\");\n\n\t\t// Simulate database save\n\t\tawait new Promise((resolve) => setTimeout(resolve, 600));\n\n\t\treturn {\n\t\t\tsaved: inputData.processed.length,\n\t\t\tsuccess: true,\n\t\t};\n\t},\n});\n\nconst dataProcessingWorkflow = createWorkflow({\n\tid: \"data-processing\",\n\tdescription: \"Fetch, process, and save data pipeline\",\n\tinputSchema: z.object({ url: z.string() }),\n\toutputSchema: z.object({ saved: z.number(), success: z.boolean() }),\n})\n\t.then(fetchData)\n\t.then(processData)\n\t.then(saveResults)\n\t.commit();\n\nworkflows.set(dataProcessingWorkflow.id, {\n\tworkflow: dataProcessingWorkflow,\n\texampleInput: { url: \"https://api.example.com/data\" },\n});\n\n// ============================================================================\n// Example Workflow 2: Email Campaign\n// ============================================================================\n\nconst fetchUsers = createStep({\n\tid: \"fetch-users\",\n\tdescription: \"Fetch users from database\",\n\tinputSchema: z.object({ segment: z.string() }),\n\toutputSchema: z.object({\n\t\tusers: z.array(\n\t\t\tz.object({ id: z.string(), email: z.string(), name: z.string() }),\n\t\t),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(`Fetching users in segment: ${inputData.segment}`);\n\t\tawait new Promise((resolve) => setTimeout(resolve, 700));\n\n\t\treturn {\n\t\t\tusers: [\n\t\t\t\t{ id: \"1\", email: \"alice@example.com\", name: \"Alice\" },\n\t\t\t\t{ id: \"2\", email: \"bob@example.com\", name: \"Bob\" },\n\t\t\t\t{ id: \"3\", email: \"charlie@example.com\", name: \"Charlie\" },\n\t\t\t],\n\t\t};\n\t},\n});\n\nconst generateEmails = createStep({\n\tid: \"generate-emails\",\n\tdescription: \"Generate personalized email content\",\n\tinputSchema: z.object({\n\t\tusers: z.array(\n\t\t\tz.object({ id: z.string(), email: z.string(), name: z.string() }),\n\t\t),\n\t}),\n\toutputSchema: z.object({\n\t\temails: z.array(\n\t\t\tz.object({ to: z.string(), subject: z.string(), body: z.string() }),\n\t\t),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(\"Generating personalized emails...\");\n\t\tawait new Promise((resolve) => setTimeout(resolve, 900));\n\n\t\tconst emails = inputData.users.map((user) => ({\n\t\t\tto: user.email,\n\t\t\tsubject: `Hello ${user.name}!`,\n\t\t\tbody: `Hi ${user.name}, we have exciting news for you...`,\n\t\t}));\n\n\t\treturn { emails };\n\t},\n});\n\nconst sendEmails = createStep({\n\tid: \"send-emails\",\n\tdescription: \"Send emails via email service\",\n\tinputSchema: z.object({\n\t\temails: z.array(\n\t\t\tz.object({ to: z.string(), subject: z.string(), body: z.string() }),\n\t\t),\n\t}),\n\toutputSchema: z.object({ sent: z.number(), failed: z.number() }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(\"Sending emails...\");\n\t\tawait new Promise((resolve) => setTimeout(resolve, 1200));\n\n\t\treturn {\n\t\t\tsent: inputData.emails.length,\n\t\t\tfailed: 0,\n\t\t};\n\t},\n});\n\nconst emailCampaignWorkflow = createWorkflow({\n\tid: \"email-campaign\",\n\tdescription: \"Automated email campaign workflow\",\n\tinputSchema: z.object({ segment: z.string() }),\n\toutputSchema: z.object({ sent: z.number(), failed: z.number() }),\n})\n\t.then(fetchUsers)\n\t.then(generateEmails)\n\t.then(sendEmails)\n\t.commit();\n\nworkflows.set(emailCampaignWorkflow.id, {\n\tworkflow: emailCampaignWorkflow,\n\texampleInput: { segment: \"premium-users\" },\n});\n\n// ============================================================================\n// Example Workflow 3: Report Generation (with potential failure)\n// ============================================================================\n\nconst collectMetrics = createStep({\n\tid: \"collect-metrics\",\n\tdescription: \"Collect performance metrics\",\n\tinputSchema: z.object({ period: z.string() }),\n\toutputSchema: z.object({ metrics: z.record(z.number()) }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(`Collecting metrics for period: ${inputData.period}`);\n\t\tawait new Promise((resolve) => setTimeout(resolve, 500));\n\n\t\treturn {\n\t\t\tmetrics: {\n\t\t\t\tusers: 1250,\n\t\t\t\trevenue: 45600,\n\t\t\t\tconversions: 234,\n\t\t\t},\n\t\t};\n\t},\n});\n\nconst analyzeMetrics = createStep({\n\tid: \"analyze-metrics\",\n\tdescription: \"Analyze metrics and generate insights\",\n\tinputSchema: z.object({ metrics: z.record(z.number()) }),\n\toutputSchema: z.object({\n\t\tinsights: z.array(z.string()),\n\t\ttrends: z.record(z.string()),\n\t}),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(\"Analyzing metrics...\");\n\t\tawait new Promise((resolve) => setTimeout(resolve, 800));\n\n\t\t// Randomly fail sometimes to demonstrate error handling\n\t\tif (Math.random() < 0.3) {\n\t\t\tthrow new Error(\"Analysis service temporarily unavailable\");\n\t\t}\n\n\t\treturn {\n\t\t\tinsights: [\n\t\t\t\t\"User growth increased by 15%\",\n\t\t\t\t\"Revenue trending upward\",\n\t\t\t\t\"Conversion rate improved\",\n\t\t\t],\n\t\t\ttrends: {\n\t\t\t\tusers: \"increasing\",\n\t\t\t\trevenue: \"increasing\",\n\t\t\t\tconversions: \"stable\",\n\t\t\t},\n\t\t};\n\t},\n});\n\nconst generateReport = createStep({\n\tid: \"generate-report\",\n\tdescription: \"Generate PDF report\",\n\tinputSchema: z.object({\n\t\tinsights: z.array(z.string()),\n\t\ttrends: z.record(z.string()),\n\t}),\n\toutputSchema: z.object({ reportUrl: z.string(), pages: z.number() }),\n\texecute: async ({ inputData }) => {\n\t\tconsole.log(\"Generating report...\");\n\t\tawait new Promise((resolve) => setTimeout(resolve, 1000));\n\n\t\treturn {\n\t\t\treportUrl: `https://reports.example.com/report-${Date.now()}.pdf`,\n\t\t\tpages: 12,\n\t\t};\n\t},\n});\n\nconst reportWorkflow = createWorkflow({\n\tid: \"report-generation\",\n\tdescription: \"Monthly performance report generation\",\n\tinputSchema: z.object({ period: z.string() }),\n\toutputSchema: z.object({ reportUrl: z.string(), pages: z.number() }),\n})\n\t.then(collectMetrics)\n\t.then(analyzeMetrics)\n\t.then(generateReport)\n\t.commit();\n\nworkflows.set(reportWorkflow.id, {\n\tworkflow: reportWorkflow,\n\texampleInput: { period: \"2024-11\" },\n});\n\n// ============================================================================\n// API Routes\n// ============================================================================\n\n// GET /api/workflows - List all workflows\napp.get(\"/api/workflows\", (c) => {\n\tconst workflowList = Array.from(workflows.entries()).map(\n\t\t([id, { workflow, exampleInput }]) => ({\n\t\t\tid: workflow.id,\n\t\t\tdescription: workflow.config.description,\n\t\t\tsteps: workflow.stepFlow.map((entry: any) => ({\n\t\t\t\tid: entry.step.id,\n\t\t\t\tdescription: entry.step.description,\n\t\t\t})),\n\t\t\texampleInput,\n\t\t}),\n\t);\n\treturn c.json(workflowList);\n});\n\n// GET /api/workflows/:id - Get workflow details\napp.get(\"/api/workflows/:id\", (c) => {\n\tconst workflowId = c.req.param(\"id\");\n\tconst entry = workflows.get(workflowId);\n\n\tif (!entry) {\n\t\treturn c.json({ error: \"Workflow not found\" }, 404);\n\t}\n\n\tconst { workflow, exampleInput } = entry;\n\treturn c.json({\n\t\tid: workflow.id,\n\t\tdescription: workflow.config.description,\n\t\tsteps: workflow.stepFlow.map((entry: any) => ({\n\t\t\tid: entry.step.id,\n\t\t\tdescription: entry.step.description,\n\t\t})),\n\t\texampleInput,\n\t});\n});\n\n// GET /api/workflows/:id/runs - List runs for a workflow\napp.get(\"/api/workflows/:id/runs\", async (c) => {\n\tconst workflowId = c.req.param(\"id\");\n\tconst snapshots = await storage.listRuns(workflowId);\n\tconst runs = snapshots.map((snapshot) => ({\n\t\trunId: snapshot.runId,\n\t\tworkflowId: snapshot.workflowId,\n\t\tstatus: snapshot.status,\n\t\texecutionPath: snapshot.executionPath,\n\t\tstepResults: snapshot.stepResults,\n\t\tinputData: snapshot.inputData,\n\t\tresult: snapshot.result,\n\t\terror: snapshot.error,\n\t\tcreatedAt: snapshot.timestamp,\n\t\tupdatedAt: snapshot.timestamp,\n\t}));\n\treturn c.json(runs);\n});\n\n// POST /api/workflows/:id/runs - Create a new run\napp.post(\"/api/workflows/:id/runs\", async (c) => {\n\tconst workflowId = c.req.param(\"id\");\n\tconst entry = workflows.get(workflowId);\n\n\tif (!entry) {\n\t\treturn c.json({ error: \"Workflow not found\" }, 404);\n\t}\n\n\tconst body = await c.req.json();\n\tconst { inputData } = body;\n\n\t// Create and start the run\n\tconst run = await entry.workflow.createRun();\n\n\t// Start execution in the background\n\trun.start({ inputData }).catch((error: Error) => {\n\t\tconsole.error(`Run ${run.runId} failed:`, error);\n\t});\n\n\t// Return the initial run state\n\tconst snapshot = await storage.loadSnapshot(run.runId);\n\tif (!snapshot) {\n\t\treturn c.json({ error: \"Failed to create run\" }, 500);\n\t}\n\n\treturn c.json(\n\t\t{\n\t\t\trunId: snapshot.runId,\n\t\t\tworkflowId: snapshot.workflowId,\n\t\t\tstatus: snapshot.status,\n\t\t\texecutionPath: snapshot.executionPath,\n\t\t\tstepResults: snapshot.stepResults,\n\t\t\tinputData: snapshot.inputData,\n\t\t\tresult: snapshot.result,\n\t\t\terror: snapshot.error,\n\t\t\tcreatedAt: snapshot.timestamp,\n\t\t\tupdatedAt: snapshot.timestamp,\n\t\t},\n\t\t201,\n\t);\n});\n\n// GET /api/runs/:runId - Get run details\napp.get(\"/api/runs/:runId\", async (c) => {\n\tconst runId = c.req.param(\"runId\");\n\tconst snapshot = await storage.loadSnapshot(runId);\n\n\tif (!snapshot) {\n\t\treturn c.json({ error: \"Run not found\" }, 404);\n\t}\n\n\treturn c.json({\n\t\trunId: snapshot.runId,\n\t\tworkflowId: snapshot.workflowId,\n\t\tstatus: snapshot.status,\n\t\texecutionPath: snapshot.executionPath,\n\t\tstepResults: snapshot.stepResults,\n\t\tinputData: snapshot.inputData,\n\t\tresult: snapshot.result,\n\t\terror: snapshot.error,\n\t\tcreatedAt: snapshot.timestamp,\n\t\tupdatedAt: snapshot.timestamp,\n\t});\n});\n\n// ============================================================================\n// Frontend\n// ============================================================================\n\napp.get(\"/\", (c) => {\n\tconst html = `\n\n\n \n \n Workflow Visualizer\n \n \n\n\n

\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",[],[584,622],"c554f78e-d1c8-11f0-8d7b-42dde27851f2",["D",1764932068219],[318,319,320,321,322,323,324],[584],["D",1764932068219],[],[18,83],["D",1764932068219],[],[18,95],["D",1764932068219],[],[18,101],["D",1764932068219],[],[18,107],["D",1764932068219],[],[18,113],["D",1764932068219],[],[18,119],["D",1764932068219],[],[18,125],["D",1764932068219],[],[18,131],["D",1764932068219],[],[18,137],["D",1764932068219],[],[18,143],["D",1764932068219],[],[18,148],["D",1764932068219],[306,307,308,309,310,311,312,313,314,315,316],[18],["D",1764932068219],{"_11":12,"_202":89},{"_11":12,"_197":198,"_88":89,"_31":87,"_199":200,"_201":30},{"_39":40,"_13":16,"_33":36,"_186":152,"_187":78,"_188":189,"_190":156,"_191":192,"_193":194,"_195":14,"_196":12},"ctx",{"_52":-5,"_223":705,"_706":707,"_708":709,"_710":30,"_711":30,"_712":30,"_713":24,"_714":-5,"_715":-7,"_716":-7,"_717":26,"_718":30,"_719":30,"_720":-5,"_721":30,"_722":30,"_723":30,"_724":-5},"ENV",{"_676":677,"_678":679,"_680":16,"_681":682,"_683":684,"_685":686,"_687":688,"_689":690,"_691":692,"_693":694,"_695":696,"_697":698,"_699":700,"_701":702,"_703":704},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend