[{"_1":2,"_176":-5,"_177":-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","330f323d5da41646f9744afca6f378fb4642d048","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,"_153":154,"_173":174,"_175":-5},"handle","dk3","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":32,"_14":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":129,"_132":133,"_135":136,"_152":20},"id","c54f921c-d1c8-11f0-8d7b-42dde27851f2","createdAt",["D",1764932068219],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","019aee04-b263-75ee-92f4-372f56307701","pinnedFileId","019aee26-23ab-7319-83f5-be400d61f1ec","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","019aee04-b264-711e-852b-f28a1799c8d7","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_130":131},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zNlFETVNueWN1THEwdGZOOUxVYkpKZGFRVzAifQ","org",{"_93":94,"_134":131,"_12":111},"avatar","branch",{"_137":138,"_95":43,"_101":139,"_140":102,"_141":142,"_143":144,"_145":108,"_146":147,"_148":149,"_150":96,"_151":94},"version",1,"c5516c40-d1c8-11f0-8d7b-42dde27851f2","projectId","forkedBranchId","836f8dfe-c25d-11f0-965b-42dde27851f2","forkedBranchVersion",79,"forkedProjectPrivacy","forkedProjectId","836f2760-c25d-11f0-965b-42dde27851f2","forkedProjectOrgId","5f80108f-7ca4-4327-b77b-089dbe4b5a82","projectName","userHandle","isOwned","file",{"_101":155,"_95":156,"_157":158,"_159":160,"_161":139,"_162":138,"_163":115,"_103":164,"_137":32,"_165":166,"_167":168,"_169":20,"_170":-5,"_97":171},"c554b558-d1c8-11f0-8d7b-42dde27851f2","visualize.ts","fileId","019aee26-23ab-7319-83f5-adc979ec66df","parentId","019aee26-23ab-7319-83f5-b45aa4f27aaf","branchId","branchVersion","latest",["D",1764932068219],"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",[172,156],"backend","permalink","https://www.val.town/x/dk3/wrkflw/code/backend/visualize.ts","extension","actionData","errors"]