[{"_1":2,"_174":-5,"_175":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","a31a1550ad486cf340b818a53bc6ddc8c7db0295","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_150":151,"_171":172,"_173":-5},"handle","nbbaier","name","wrkflw","path","backend/visualize.ts","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":72,"_110":-5,"_12":111,"_112":113,"_114":115,"_116":115,"_117":-5,"_118":119,"_14":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":130,"_133":134,"_136":137,"_149":20},"id","836f2760-c25d-11f0-965b-42dde27851f2","createdAt",["D",1763236734129],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","5d1042a9-7b0b-499d-8a72-3a8ac7a4e185","pinnedFileId","1e71e5c2-c565-11f0-aafb-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",2,"5f80108f-7ca4-4327-b77b-089dbe4b5a82","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_131":132},"profileImageUrl","https://secure.gravatar.com/avatar/0129a541b7b3574e92c4afd06c5e32da&d=identicon","org",{"_93":94,"_135":132,"_12":111},"avatar","branch",{"_138":139,"_95":43,"_101":140,"_141":102,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},"version",80,"836f8dfe-c25d-11f0-965b-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":152,"_95":153,"_154":155,"_156":157,"_158":140,"_159":160,"_161":115,"_103":162,"_138":32,"_163":164,"_165":166,"_167":20,"_168":-5,"_97":169},"c17d365c-c50d-11f0-b555-42dde27851f2","visualize.ts","fileId","c17d374c-c50d-11f0-b555-42dde27851f2","parentId","dfcfe8d6-c263-11f0-8eaa-42dde27851f2","branchId","branchVersion",45,"latest",["D",1763532331981],"fileType","script","content","import type { Workflow } from \"./workflow.ts\";\nimport type { WorkflowSnapshot } from \"./types.ts\";\n\n/**\n * Visualization format types\n */\nexport type VisualizationFormat = \"mermaid\" | \"json\" | \"ascii\" | \"dot\";\n\n/**\n * Options for visualization\n */\nexport interface VisualizationOptions {\n\t/** Include schema information in visualization */\n\tincludeSchemas?: boolean;\n\t/** Include step descriptions */\n\tincludeDescriptions?: boolean;\n}\n\n/**\n * Options for execution visualization\n */\nexport interface ExecutionVisualizationOptions extends VisualizationOptions {\n\t/** Highlight the current/last executed step */\n\thighlightCurrentStep?: boolean;\n\t/** Show step execution status */\n\tshowStatus?: boolean;\n\t/** Show step results */\n\tshowResults?: boolean;\n}\n\n/**\n * Visualize a workflow's structure\n *\n * @param workflow - The workflow to visualize\n * @param format - The output format (default: \"mermaid\")\n * @param options - Visualization options\n * @returns Visualization string in the specified format\n *\n * @example\n * ```typescript\n * const diagram = visualizeWorkflow(workflow, \"mermaid\");\n * console.log(diagram);\n * ```\n */\nexport function visualizeWorkflow(\n\tworkflow: Workflow,\n\tformat: VisualizationFormat = \"mermaid\",\n\toptions: VisualizationOptions = {},\n): string {\n\tswitch (format) {\n\t\tcase \"mermaid\":\n\t\t\treturn generateMermaidWorkflow(workflow, options);\n\t\tcase \"json\":\n\t\t\tthrow new Error(\"JSON format not yet implemented\");\n\t\tcase \"ascii\":\n\t\t\tthrow new Error(\"ASCII format not yet implemented\");\n\t\tcase \"dot\":\n\t\t\tthrow new Error(\"DOT format not yet implemented\");\n\t\tdefault:\n\t\t\tthrow new Error(`Unknown visualization format: ${format}`);\n\t}\n}\n\n/**\n * Visualize a workflow execution with state information\n *\n * @param workflow - The workflow being executed\n * @param snapshot - The execution snapshot\n * @param format - The output format (default: \"mermaid\")\n * @param options - Visualization options\n * @returns Visualization string in the specified format\n *\n * @example\n * ```typescript\n * const snapshot = await run.getSnapshot();\n * if (snapshot) {\n * const diagram = visualizeExecution(workflow, snapshot, \"mermaid\", {\n * highlightCurrentStep: true,\n * showStatus: true\n * });\n * console.log(diagram);\n * }\n * ```\n */\nexport function visualizeExecution(\n\tworkflow: Workflow,\n\tsnapshot: WorkflowSnapshot,\n\tformat: VisualizationFormat = \"mermaid\",\n\toptions: ExecutionVisualizationOptions = {},\n): string {\n\tswitch (format) {\n\t\tcase \"mermaid\":\n\t\t\treturn generateMermaidExecution(workflow, snapshot, options);\n\t\tcase \"json\":\n\t\t\tthrow new Error(\"JSON format not yet implemented\");\n\t\tcase \"ascii\":\n\t\t\tthrow new Error(\"ASCII format not yet implemented\");\n\t\tcase \"dot\":\n\t\t\tthrow new Error(\"DOT format not yet implemented\");\n\t\tdefault:\n\t\t\tthrow new Error(`Unknown visualization format: ${format}`);\n\t}\n}\n\n/**\n * Generate Mermaid diagram for workflow structure\n */\nfunction generateMermaidWorkflow(\n\tworkflow: Workflow,\n\toptions: VisualizationOptions,\n): string {\n\tconst lines: string[] = [];\n\tconst { includeDescriptions = true } = options;\n\n\t// Start with graph definition\n\tlines.push(\"graph TD\");\n\n\t// Add workflow title/description as comment\n\tif (workflow.config.description) {\n\t\tlines.push(` %% ${workflow.config.description}`);\n\t}\n\n\t// Start node\n\tconst startLabel = workflow.config.id;\n\tlines.push(` Start([${startLabel}])`);\n\n\t// Generate step nodes\n\tconst stepIds = workflow.stepFlow.map((entry) => entry.step.id);\n\n\tstepIds.forEach((stepId, index) => {\n\t\tconst step = workflow.steps[stepId];\n\t\tif (!step) return;\n\n\t\tconst nodeId = sanitizeNodeId(stepId);\n\t\tlet label = stepId;\n\n\t\tif (includeDescriptions && step.description) {\n\t\t\tlabel = `${stepId}
${step.description}`;\n\t\t}\n\n\t\t// Create step node\n\t\tlines.push(` ${nodeId}[${label}]`);\n\n\t\t// Connect from Start to first step, or from previous step\n\t\tif (index === 0) {\n\t\t\tlines.push(` Start --> ${nodeId}`);\n\t\t} else {\n\t\t\tconst prevNodeId = sanitizeNodeId(stepIds[index - 1]);\n\t\t\tlines.push(` ${prevNodeId} --> ${nodeId}`);\n\t\t}\n\t});\n\n\t// End node\n\tlines.push(\" End([End])\");\n\tif (stepIds.length > 0) {\n\t\tconst lastNodeId = sanitizeNodeId(stepIds[stepIds.length - 1]);\n\t\tlines.push(` ${lastNodeId} --> End`);\n\t} else {\n\t\tlines.push(\" Start --> End\");\n\t}\n\n\t// Add styling\n\tlines.push(\"\");\n\tlines.push(\" classDef default fill:#e1f5ff,stroke:#01579b,stroke-width:2px\");\n\tlines.push(\" classDef startEnd fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px\");\n\tlines.push(\" class Start,End startEnd\");\n\n\treturn lines.join(\"\\n\");\n}\n\n/**\n * Generate Mermaid diagram for workflow execution with state\n */\nfunction generateMermaidExecution(\n\tworkflow: Workflow,\n\tsnapshot: WorkflowSnapshot,\n\toptions: ExecutionVisualizationOptions,\n): string {\n\tconst lines: string[] = [];\n\tconst {\n\t\tincludeDescriptions = true,\n\t\thighlightCurrentStep = true,\n\t\tshowStatus = true,\n\t\tshowResults = false,\n\t} = options;\n\n\t// Start with graph definition\n\tlines.push(\"graph TD\");\n\n\t// Add execution info as comment\n\tlines.push(` %% Workflow: ${workflow.config.id}`);\n\tlines.push(` %% Run ID: ${snapshot.runId}`);\n\tlines.push(` %% Status: ${snapshot.status}`);\n\tif (snapshot.error) {\n\t\tlines.push(` %% Error: ${snapshot.error}`);\n\t}\n\n\t// Start node\n\tconst startLabel = workflow.config.id;\n\tconst startStatus = snapshot.status !== \"running\" || snapshot.executionPath.length > 0\n\t\t? \"✓\"\n\t\t: \"●\";\n\tlines.push(` Start([${startStatus} ${startLabel}])`);\n\n\t// Generate step nodes with execution state\n\tconst stepIds = workflow.stepFlow.map((entry) => entry.step.id);\n\tconst executedStepIndices = new Set(snapshot.executionPath);\n\tconst lastExecutedIndex = snapshot.executionPath.length > 0\n\t\t? snapshot.executionPath[snapshot.executionPath.length - 1]\n\t\t: -1;\n\n\tstepIds.forEach((stepId, index) => {\n\t\tconst step = workflow.steps[stepId];\n\t\tif (!step) return;\n\n\t\tconst nodeId = sanitizeNodeId(stepId);\n\t\tconst stepResult = snapshot.stepResults[stepId];\n\t\tconst isExecuted = executedStepIndices.has(index);\n\t\tconst isCurrent = highlightCurrentStep && index === lastExecutedIndex &&\n\t\t\tsnapshot.status === \"running\";\n\n\t\t// Build label\n\t\tlet label = stepId;\n\t\tlet statusIcon = \"\";\n\n\t\tif (showStatus && stepResult) {\n\t\t\tswitch (stepResult.status) {\n\t\t\t\tcase \"success\":\n\t\t\t\t\tstatusIcon = \"✓ \";\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"failed\":\n\t\t\t\t\tstatusIcon = \"✗ \";\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"running\":\n\t\t\t\t\tstatusIcon = \"● \";\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t} else if (isExecuted) {\n\t\t\tstatusIcon = \"✓ \";\n\t\t} else if (isCurrent) {\n\t\t\tstatusIcon = \"● \";\n\t\t}\n\n\t\tlabel = `${statusIcon}${stepId}`;\n\n\t\tif (includeDescriptions && step.description) {\n\t\t\tlabel += `
${step.description}`;\n\t\t}\n\n\t\tif (showResults && stepResult && stepResult.status === \"failed\") {\n\t\t\tconst errorMsg = stepResult.error.message.substring(0, 50);\n\t\t\tlabel += `
${errorMsg}`;\n\t\t}\n\n\t\t// Create step node\n\t\tlines.push(` ${nodeId}[${label}]`);\n\n\t\t// Connect from Start to first step, or from previous step\n\t\tif (index === 0) {\n\t\t\tlines.push(` Start --> ${nodeId}`);\n\t\t} else {\n\t\t\tconst prevNodeId = sanitizeNodeId(stepIds[index - 1]);\n\t\t\tlines.push(` ${prevNodeId} --> ${nodeId}`);\n\t\t}\n\t});\n\n\t// End node\n\tconst endStatus = snapshot.status === \"success\"\n\t\t? \"✓\"\n\t\t: snapshot.status === \"failed\"\n\t\t? \"✗\"\n\t\t: \"○\";\n\tlines.push(` End([${endStatus} End])`);\n\tif (stepIds.length > 0) {\n\t\tconst lastNodeId = sanitizeNodeId(stepIds[stepIds.length - 1]);\n\t\tlines.push(` ${lastNodeId} --> End`);\n\t} else {\n\t\tlines.push(\" Start --> End\");\n\t}\n\n\t// Add styling based on execution state\n\tlines.push(\"\");\n\tlines.push(\" classDef default fill:#e1f5ff,stroke:#01579b,stroke-width:2px\");\n\tlines.push(\" classDef startEnd fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px\");\n\tlines.push(\" classDef success fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px\");\n\tlines.push(\" classDef failed fill:#ffcdd2,stroke:#c62828,stroke-width:2px\");\n\tlines.push(\" classDef running fill:#fff9c4,stroke:#f57f17,stroke-width:3px\");\n\tlines.push(\" classDef pending fill:#f5f5f5,stroke:#9e9e9e,stroke-width:1px\");\n\n\t// Apply classes\n\tlines.push(\" class Start,End startEnd\");\n\n\tstepIds.forEach((stepId, index) => {\n\t\tconst nodeId = sanitizeNodeId(stepId);\n\t\tconst stepResult = snapshot.stepResults[stepId];\n\t\tconst isExecuted = executedStepIndices.has(index);\n\t\tconst isCurrent = highlightCurrentStep && index === lastExecutedIndex &&\n\t\t\tsnapshot.status === \"running\";\n\n\t\tif (isCurrent) {\n\t\t\tlines.push(` class ${nodeId} running`);\n\t\t} else if (stepResult) {\n\t\t\tif (stepResult.status === \"success\") {\n\t\t\t\tlines.push(` class ${nodeId} success`);\n\t\t\t} else if (stepResult.status === \"failed\") {\n\t\t\t\tlines.push(` class ${nodeId} failed`);\n\t\t\t}\n\t\t} else if (!isExecuted) {\n\t\t\tlines.push(` class ${nodeId} pending`);\n\t\t}\n\t});\n\n\treturn lines.join(\"\\n\");\n}\n\n/**\n * Sanitize step ID to be a valid Mermaid node ID\n */\nfunction sanitizeNodeId(id: string): string {\n\t// Replace hyphens and special characters with underscores\n\treturn id.replace(/[^a-zA-Z0-9_]/g, \"_\");\n}\n","deleted","label",[170,153],"backend","permalink","https://www.val.town/x/nbbaier/wrkflw/code/backend/visualize.ts","extension","actionData","errors"]