windmill-components 1.623.1 → 1.623.2

package/package/components/Editor.svelte

@@ -1,6 +1,7 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+	import { typescriptDefaults } from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -23,7 +24,8 @@ import { createHash as randomHash } from '../editorLangUtils';
 import { workspaceStore } from '../stores';
 import { ResourceService, UserService, WorkspaceService } from '../gen';
 import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers, MONACO_Y_PADDING } from './vscode';
-import { initializeMode } from 'monaco-graphql/esm/initializeMode.js';
+// import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
+// import type { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js'
 import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
 import EditorTheme from './EditorTheme.svelte';
 import { BIGQUERY_TYPES, DUCKDB_TYPES, MSSQL_TYPES, MYSQL_TYPES, ORACLEDB_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
@@ -77,7 +79,7 @@ let lastWsAttempt = new Date();
 let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
-let graphqlService = undefined;
+// let graphqlService: MonacoGraphQLAPI | undefined = undefined
 let dbSchema = $state(undefined);
 let destroyed = false;
 const uri = computeUri(untrack(() => filePath), scriptLang);
@@ -316,6 +318,24 @@ export async function format() {
 export function getScriptLang() {
     return scriptLang;
 }
+export function getEditor() {
+    return editor;
+}
+/** Get lint errors and warnings from the Monaco editor */
+export function getLintErrors() {
+    if (!model) {
+        return { errorCount: 0, warningCount: 0, errors: [], warnings: [] };
+    }
+    const markers = meditor.getModelMarkers({ resource: model.uri });
+    const errors = markers.filter((m) => m.severity === MarkerSeverity.Error);
+    const warnings = markers.filter((m) => m.severity === MarkerSeverity.Warning);
+    return {
+        errorCount: errors.length,
+        warningCount: warnings.length,
+        errors,
+        warnings
+    };
+}
 let command = undefined;
 let sqlTypeCompletor = $state(undefined);
 let resultCollectionCompletor = $state(undefined);
@@ -410,16 +430,7 @@ async function updateSchema(newSchemaRes) {
         const resourcePath = newSchemaRes.replace('$res:', '');
         dbSchema = $dbSchemas[resourcePath];
         if (dbSchema === undefined) {
-            if (lang === 'graphql') {
-                await getDbSchemas('graphql', resourcePath, $workspaceStore, $dbSchemas, (e) => {
-                    console.error('error getting graphql db schema', e);
-                });
-            }
-            else if (lang === 'sql') {
-                await getDbSchemas(scriptLang ?? '', resourcePath, $workspaceStore, $dbSchemas, (e) => {
-                    console.error(`error getting SQL (${scriptLang}) db schema`, e);
-                });
-            }
+            $dbSchemas[resourcePath] = await getDbSchemas(lang === 'graphql' ? 'graphql' : (scriptLang ?? ''), resourcePath, $workspaceStore, (e) => console.error(`error getting ${lang} (${scriptLang}) db schema`, e));
         }
         dbSchema = $dbSchemas[resourcePath];
     }
@@ -431,7 +442,7 @@ function disposeSqlSchemaCompletor() {
     sqlSchemaCompletor?.dispose();
 }
 function disposeGaphqlService() {
-    graphqlService = undefined;
+    // graphqlService = undefined
 }
 function addDBSchemaCompletions() {
     const { lang: schemaLang, schema } = dbSchema || {};
@@ -440,14 +451,16 @@ function addDBSchemaCompletions() {
     }
     console.log('adding db schema completions', schemaLang);
     if (schemaLang === 'graphql') {
-        graphqlService ||= initializeMode();
-        console.log('setting schema config', schema);
-        graphqlService?.setSchemaConfig([
-            {
-                uri: 'my-schema.graphql',
-                introspectionJSON: schema
-            }
-        ]);
+        //graphql depreciated until https://github.com/graphql/graphiql/issues/4104 is fixed with monaco > 0.52.2
+        // languages.register({ id: 'graphql' })
+        // graphqlService ||= initializeMode()
+        // console.log('setting schema config', schema)
+        // graphqlService?.setSchemaConfig([
+        // 	{
+        // 		uri: 'my-schema.graphql',
+        // 		introspectionJSON: schema
+        // 	}
+        // ])
     }
     else {
         if (sqlSchemaCompletor) {
@@ -1067,7 +1080,7 @@ async function loadMonaco() {
         editor = meditor.create(divEl, {
             ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,
-            fontSize: !small ? 14 : 12,
+            fontSize: !small ? 13.5 : 12,
             lineNumbersMinChars,
             // overflowWidgetsDomNode: widgets,
             tabSize: lang == 'python' ? 4 : 2,
@@ -1084,6 +1097,38 @@ async function loadMonaco() {
         return;
     }
     keepModelAroundToAvoidDisposalOfWorkers();
+    // In VSCode webview (iframe), clipboard operations need special handling
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+            document.execCommand('cut');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+            try {
+                // Use Clipboard API to read text, then insert via Monaco's API
+                const text = await navigator.clipboard.readText();
+                if (text && editor) {
+                    const selection = editor.getSelection();
+                    if (selection) {
+                        editor.executeEdits('paste', [
+                            {
+                                range: selection,
+                                text: text,
+                                forceMoveMarkers: true
+                            }
+                        ]);
+                    }
+                }
+            }
+            catch (e) {
+                // Clipboard API failed, try execCommand as fallback
+                document.execCommand('paste');
+            }
+        });
+    }
     // updateEditorKeybindingsMode(editor, 'vim', undefined)
     // Raw app lint collection: listen for marker changes and report to store
     let markerChangeDisposable = undefined;
@@ -1235,7 +1280,7 @@ function setTypescriptCustomTypes() {
         : 'string';
     const isDucklakeOptional = ducklakeNames.includes('main');
     const isDataTableOptional = datatableNames.includes('main');
-    let disposeTs = languages.typescript.typescriptDefaults.addExtraLib(`export {};
+    let disposeTs = typescriptDefaults.addExtraLib(`export {};
 			declare module 'windmill-client' {
 				import { type DatatableSqlTemplateFunction, type SqlTemplateFunction } from 'windmill-client';
 				export function ducklake(name${isDucklakeOptional ? '?' : ''}: ${ducklakeNameType}): SqlTemplateFunction;
@@ -1255,13 +1300,13 @@ async function setTypescriptRTNamespace() {
             workspace: $workspaceStore ?? ''
         });
         const namespace = formatResourceTypes(resourceTypes, scriptLang === 'bunnative' ? 'bun' : scriptLang);
-        languages.typescript.typescriptDefaults.addExtraLib(namespace, 'rt.d.ts');
+        typescriptDefaults.addExtraLib(namespace, 'rt.d.ts');
     }
 }
 async function setTypescriptExtraLibs() {
     if (extraLib) {
         const uri = mUri.parse('file:///extraLib.d.ts');
-        languages.typescript.typescriptDefaults.addExtraLib(extraLib, uri.toString());
+        typescriptDefaults.addExtraLib(extraLib, uri.toString());
     }
     if (lang === 'typescript' &&
         (scriptLang == 'bun' || scriptLang == 'tsx' || scriptLang == 'bunnative') &&
@@ -1271,7 +1316,7 @@ async function setTypescriptExtraLibs() {
             const path = 'file://' + _path;
             let uri = mUri.parse(path);
             console.log('adding library to runtime', path);
-            languages.typescript.typescriptDefaults.addExtraLib(code, path);
+            typescriptDefaults.addExtraLib(code, path);
             try {
                 await vscode.workspace.fs.writeFile(uri, new TextEncoder().encode(code));
             }

package/package/components/Editor.svelte.d.ts

@@ -6,6 +6,7 @@ import { editor as meditor, type IDisposable } from 'monaco-editor';
 import { type DepsToGet } from '../ata/index';
 import { type InferAssetsSqlQueryDetails } from '../infer';
 import { AIChatEditorHandler, type ReviewChangesOpts } from './copilot/chat/monaco-adapter';
+import type { ScriptLintResult } from './copilot/chat/shared';
 interface Props {
     code?: string;
     cmdEnterAction?: (() => void) | undefined;
@@ -79,6 +80,8 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     append: (code: string) => void;
     format: () => Promise<void>;
     getScriptLang: () => string | undefined;
+    getEditor: () => meditor.IStandaloneCodeEditor | null;
+    getLintErrors: () => ScriptLintResult;
     reviewAndApplyCode: (code: string, opts?: ReviewChangesOpts) => Promise<void>;
     reviewAppliedCode: (originalCode: string, opts?: {
         onFinishedReview?: () => void;

package/package/components/EditorBar.svelte

@@ -928,7 +928,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{#if customUi?.diffMode != false}
 				<div class="flex items-center px-3">
 					<Toggle
-						options={{ right: '' }}
+						options={{ right: 'Diff' }}
 						size="sm"
 						checked={diffMode}
 						disabled={!lastDeployedCode}

package/package/components/FakeMonacoPlaceHolder.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">import { getOS } from '../utils';
 import { MONACO_Y_PADDING } from './vscode';
-let { code, autoheight = false, lineNumbersWidth = 0, lineNumbersOffset = 0, class: className = '', showNumbers = true, fontSize = 14 } = $props();
+let { code, autoheight = false, lineNumbersWidth = 0, lineNumbersOffset = 0, class: className = '', showNumbers = true, fontSize = 13.5 } = $props();
 let yPadding = MONACO_Y_PADDING;
 // https://github.com/microsoft/vscode/blob/baa2dad3cdacd97ac02eff0604984faf1167ff1e/src/vs/editor/common/config/editorOptions.ts#L5421
 const DEFAULT_WINDOWS_FONT_FAMILY = "Consolas, 'Courier New', monospace";

package/package/components/FlowBuilder.svelte

@@ -12,6 +12,7 @@ import CenteredPage from './CenteredPage.svelte';
 import { Badge, Button, UndoRedo } from './common';
 import FlowEditor from './flows/FlowEditor.svelte';
 import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
+import FlowEditorDrawer from './flows/content/FlowEditorDrawer.svelte';
 import { dfs as dfsApply } from './flows/dfs';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
@@ -460,6 +461,7 @@ export function getSelectedId() {
 }
 const previewArgsStore = $state({ val: initialArgs });
 const scriptEditorDrawer = writable(undefined);
+const flowEditorDrawer = writable(undefined);
 const moving = writable(undefined);
 const history = initHistory(flowStore.val);
 const pathStore = writable(pathStoreInit ?? initialPath);
@@ -483,6 +485,7 @@ setContext('FlowEditorContext', {
     currentEditor: writable(undefined),
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
+    flowEditorDrawer,
     moving,
     history,
     flowStateStore,
@@ -780,6 +783,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
 		<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
+		<FlowEditorDrawer bind:this={$flowEditorDrawer} />
 
 		<div class="flex flex-col flex-1 h-screen">
 			<!-- Nav between steps-->
@@ -936,17 +940,19 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 							showJobStatus = true
 						}}
 					/>
-					<Button
-						loading={loadingDraft}
-						unifiedSize="md"
-						variant="accent"
-						startIcon={{ icon: Save }}
-						on:click={() => saveDraft()}
-						disabled={(!newFlow && !savedFlow) || loading}
-						shortCut={{ key: 'S' }}
-					>
-						Draft
-					</Button>
+					{#if customUi?.topBar?.draft !== false}
+						<Button
+							loading={loadingDraft}
+							unifiedSize="md"
+							variant="accent"
+							startIcon={{ icon: Save }}
+							on:click={() => saveDraft()}
+							disabled={(!newFlow && !savedFlow) || loading}
+							shortCut={{ key: 'S' }}
+						>
+							Draft
+						</Button>
+					{/if}
 
 					<DeployButton
 						on:save={async ({ detail }) => await handleSaveFlow(detail)}

package/package/components/FlowDiffViewer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import { Loader2 } from 'lucide-svelte';
+import Tabs from './common/tabs/Tabs.svelte';
+import Tab from './common/tabs/Tab.svelte';
+let { beforeYaml, afterYaml } = $props();
+let diffMode = $state('graph');
+</script>
+
+<div class="flex flex-col h-full min-h-[500px] gap-2">
+	<Tabs bind:selected={diffMode}>
+		<Tab value="graph" label="Graph" />
+		<Tab value="yaml" label="YAML" />
+	</Tabs>
+
+	<div class="flex-1 min-h-0">
+		{#if diffMode === 'yaml'}
+			{#await import('./DiffEditor.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					open={true}
+					automaticLayout
+					className="h-full min-h-[400px]"
+					defaultLang="yaml"
+					defaultOriginal={beforeYaml}
+					defaultModified={afterYaml}
+					readOnly
+				/>
+			{/await}
+		{:else}
+			{#await import('./FlowGraphDiffViewer.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default {beforeYaml} {afterYaml} />
+			{/await}
+		{/if}
+	</div>
+</div>

package/package/components/FlowDiffViewer.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    beforeYaml: string;
+    afterYaml: string;
+}
+declare const FlowDiffViewer: import("svelte").Component<Props, {}, "">;
+type FlowDiffViewer = ReturnType<typeof FlowDiffViewer>;
+export default FlowDiffViewer;

package/package/components/FlowGraphViewer.svelte

@@ -12,14 +12,17 @@ export let noGraph = false;
 export let triggerNode = false;
 export let stepDetail = undefined;
 export let workspace = $workspaceStore;
+export let minHeight = 400;
+export let noBorder = false;
 const dispatch = createEventDispatcher();
 </script>
 
 <div class="grid grid-cols-3 w-full h-full">
 	{#if !noGraph}
 		<div
-			class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full border max-h-full"
+			class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full max-h-full"
 			class:overflow-auto={overflowAuto}
+			class:border={!noBorder}
 		>
 			<FlowGraphV2
 				{triggerNode}
@@ -27,7 +30,7 @@ const dispatch = createEventDispatcher();
 				cache={flow.value.cache_ttl !== undefined}
 				path={flow?.path}
 				{download}
-				minHeight={400}
+				{minHeight}
 				{workspace}
 				modules={flow?.value?.modules}
 				failureModule={flow?.value?.failure_module}

package/package/components/FlowGraphViewer.svelte.d.ts

@@ -27,6 +27,8 @@ declare const FlowGraphViewer: $$__sveltets_2_IsomorphicComponent<{
     triggerNode?: boolean;
     stepDetail?: FlowModule | string | undefined;
     workspace?: string | undefined;
+    minHeight?: number;
+    noBorder?: boolean;
 }, {
     triggerDetail: CustomEvent<any>;
     select: CustomEvent<any>;

package/package/components/FlowLoopIterationPreview.svelte.d.ts

@@ -30,6 +30,6 @@ declare const FlowLoopIterationPreview: $$__sveltets_2_IsomorphicComponent<Props
     whileLoopSchema: Schema;
     test: () => void;
     runPreview: (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
-}, "jobId" | "previewArgs" | "job">;
+}, "job" | "jobId" | "previewArgs">;
 type FlowLoopIterationPreview = InstanceType<typeof FlowLoopIterationPreview>;
 export default FlowLoopIterationPreview;

package/package/components/FlowPreviewContent.svelte

@@ -299,12 +299,13 @@ export function flowHasChanged() {
 				<div class="flex flex-row justify-center w-full">
 					<FlowChat
 						useStreaming={shouldUseStreaming}
-						onRunFlow={async (userMessage, conversationId) => {
-							await runPreview({ user_message: userMessage }, undefined, conversationId)
+						onRunFlow={async (userMessage, conversationId, additionalInputs) => {
+							await runPreview({ user_message: userMessage, ...(additionalInputs ?? {}) }, undefined, conversationId)
 							return jobId ?? ''
 						}}
 						hideSidebar={true}
 						path={$pathStore}
+						inputSchema={flowStore.val.schema}
 					/>
 				</div>
 			{:else}

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -57,6 +57,6 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     getIsOwner: () => boolean;
     getJob: () => Job | undefined;
     flowHasChanged: () => boolean;
-}, "initial" | "preventEscape" | "jobId" | "scrollTop" | "job" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "selectedJobStepType" | "previewMode" | "selectedJobStepIsTopLevel" | "branchOrIterationN">;
+}, "job" | "initial" | "preventEscape" | "jobId" | "scrollTop" | "localModuleStates" | "localDurationStatuses" | "rightColumnSelect" | "selectedJobStep" | "selectedJobStepType" | "previewMode" | "selectedJobStepIsTopLevel" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;

package/package/components/FlowPreviewResult.svelte

@@ -5,10 +5,6 @@ import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
 import { emptyString } from '../utils';
 import Badge from './common/badge/Badge.svelte';
 let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, innerModules, suspendStatus, hideJobId, extra, result_streams } = $props();
-// Sometimes the approval form is duplicated but I can't reproduce the issue
-// This is a temporary debug log to try to catch it when it happens
-// (See the #each below)
-$effect(() => console.log('suspendStatusVal', Object.entries(suspendStatus.val || {}).map(([k, v]) => [k, v.job.id])));
 </script>
 
 <FlowPreviewStatus {job} {hideJobId} {extra} />

package/package/components/FlowRestartButton.svelte

@@ -4,8 +4,7 @@ import { Play, RefreshCw } from 'lucide-svelte';
 import { FlowService, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { emptyString, sendUserToast } from '../utils';
-import { goto } from '../navigation';
-let { jobId, selectedJobStep, selectedJobStepType, restartBranchNames = [], flowPath = undefined, disabled = false, enterpriseOnly = false, variant = 'default', unifiedSize = 'md', onRestart } = $props();
+let { jobId, selectedJobStep, selectedJobStepType, restartBranchNames = [], flowPath = undefined, disabled = false, enterpriseOnly = false, variant = 'default', unifiedSize = 'md', onRestart, onRestartComplete } = $props();
 let branchOrIterationN = $state(0);
 let selectedVersionMode = $state('run');
 let customFlowVersion = $state(undefined);
@@ -21,7 +20,7 @@ async function restartFlow(stepId, branchOrIterationN, flowVersion) {
             flow_version: flowVersion
         }
     });
-    await goto('/run/' + run + '?workspace=' + $workspaceStore);
+    onRestartComplete?.(run);
 }
 async function loadFlowVersions() {
     if (!flowPath || loadingVersions)

package/package/components/FlowRestartButton.svelte.d.ts

@@ -8,7 +8,10 @@ interface Props {
     enterpriseOnly?: boolean;
     variant?: 'default' | 'accent';
     unifiedSize?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Called when flow is restarted. If not provided, will navigate to the new run using goto (requires SvelteKit) */
     onRestart?: (stepId: string, branchOrIterationN: number, flowVersion?: number) => void;
+    /** Called when flow restart completes with the new job ID. Used for navigation in non-SvelteKit contexts */
+    onRestartComplete?: (newJobId: string) => void;
 }
 declare const FlowRestartButton: import("svelte").Component<Props, {}, "">;
 type FlowRestartButton = ReturnType<typeof FlowRestartButton>;

package/package/components/FlowStatusViewerInner.svelte

@@ -29,7 +29,9 @@ import JobLoader from './JobLoader.svelte';
 import { AI_TOOL_CALL_PREFIX, AI_TOOL_MESSAGE_PREFIX, AI_MCP_TOOL_CALL_PREFIX, AI_WEBSEARCH_PREFIX, getToolCallId } from './graph/renderers/nodes/AIToolNode.svelte';
 import JobAssetsViewer from './assets/JobAssetsViewer.svelte';
 import McpToolCallDetails from './McpToolCallDetails.svelte';
+import JobOtelTraces from './JobOtelTraces.svelte';
 import { SelectionManager } from './graph/selectionUtils.svelte';
+import { useThrottle } from 'runed';
 let { flowState: flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
 let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined, toolCallStore } = $props();
 let getTopModuleStates = $derived(topModuleStates ?? localModuleStates);
@@ -303,8 +305,22 @@ function updateDurationStatuses(key, durationStatuses) {
     }
 }
 let jobMissingStartedAt = {};
-let lastSelectedLoopSwitch;
-let selectedLoopSwitchTimeout = undefined;
+let setSelectedLoopSwitch = useThrottle(async (lastStarted, mod) => {
+    let position = mod.flow_jobs?.indexOf(lastStarted);
+    if (!position)
+        return;
+    for (const flow_job of mod.flow_jobs ?? []) {
+        if (flow_job === lastStarted) {
+            break;
+        }
+        else if (flow_job !== lastStarted && suspendStatus.val[flow_job]) {
+            console.log('setSelectedLoopSwitch deleting suspend for', flow_job);
+            delete suspendStatus.val[flow_job];
+        }
+    }
+    console.log('setSelectedLoopSwitch', position, lastStarted, mod.id, suspendStatus);
+    setIteration(position, lastStarted, false, mod.id ?? '', true);
+}, 2000);
 function updateInnerModules() {
     if (localModuleStates) {
         innerModules?.forEach((mod, i) => {
@@ -427,27 +443,8 @@ function updateInnerModules() {
                         });
                         if (anySet) {
                             updateDurationStatuses(key, nDurationStatuses);
-                            selectedLoopSwitchTimeout && clearTimeout(selectedLoopSwitchTimeout);
-                            function setSelectedLoopSwitch() {
-                                if (lastStarted) {
-                                    let position = mod.flow_jobs?.indexOf(lastStarted);
-                                    if (position != undefined) {
-                                        lastSelectedLoopSwitch = new Date().getTime();
-                                        console.log('setSelectedLoopSwitch', position, lastStarted);
-                                        setIteration(position, lastStarted, false, mod.id ?? '', true);
-                                    }
-                                }
-                            }
-                            if (lastSelectedLoopSwitch &&
-                                new Date().getTime() - lastSelectedLoopSwitch < 3000) {
-                                selectedLoopSwitchTimeout = setTimeout(() => {
-                                    setSelectedLoopSwitch();
-                                }, 2000);
-                            }
-                            else {
-                                console.log('setSelectedLoopSwitch');
-                                setSelectedLoopSwitch();
-                            }
+                            if (lastStarted)
+                                setSelectedLoopSwitch(lastStarted, mod);
                         }
                     })
                         .catch((e) => {
@@ -518,7 +515,17 @@ let started = false;
 let jobLoader = undefined;
 function setJob(newJob, force) {
     if (!deepEqual(job, newJob) || isForloopSelected || force || innerModules == undefined) {
-        job = newJob;
+        if (initialJob) {
+            // keep raw_flow/raw_code from initial job if they exist
+            job = {
+                ...newJob,
+                raw_flow: initialJob.raw_flow ?? newJob.raw_flow,
+                raw_code: initialJob.raw_code ?? newJob.raw_code
+            };
+        }
+        else {
+            job = newJob;
+        }
         job?.flow_status && updateStatus(job?.flow_status);
         onJobsLoaded?.({ job, force: false });
         notAnonynmous = false;
@@ -803,6 +810,7 @@ let stepDetail = $state(undefined);
 let storedListJobs = $state({});
 let selectedToolCall = $state(undefined);
 let wrapperHeight = $state(0);
+let retryStatusHeight = $state(0);
 function removeFailureNode(id, parent_module) {
     if (id?.startsWith('failure-') && parent_module) {
         ;
@@ -939,6 +947,7 @@ let tabsHeight = $state({
     graphHeight: 0
 });
 let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsHeight, tabsHeight.assetsHeight, tabsHeight.graphHeight));
+let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce((a, b) => a + (b?.nb ?? 0), 0));
 </script>
 
 <JobLoader workspaceOverride={workspaceId} {noLogs} noCode bind:this={jobLoader} />
@@ -1382,7 +1391,7 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 			>
 				<div class="grid grid-cols-3 border h-full" bind:clientHeight={wrapperHeight}>
 					<div class="col-span-2 bg-surface-secondary">
-						<div class="flex flex-col">
+						<div class="flex flex-col" bind:clientHeight={retryStatusHeight}>
 							{#each Object.values(retryStatus?.val ?? {}) as count}
 								{#if count}
 									<span class="text-sm">
@@ -1390,25 +1399,23 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 									</span>
 								{/if}
 							{/each}
-							{#each Object.values(suspendStatus?.val ?? {}) as count}
-								{#if count.nb}
-									<span class="text-sm">
-										Flow suspended, waiting for {count.nb} events
-									</span>
-								{/if}
-							{/each}
+							{#if totalEventsWaiting}
+								<span class="text-sm">
+									Flow suspended, waiting for {totalEventsWaiting} events
+								</span>
+							{/if}
 						</div>
 						<FlowGraphV2
 							{selectionManager}
 							triggerNode={true}
 							download={!hideDownloadInGraph}
-							minHeight={wrapperHeight}
+							minHeight={wrapperHeight - retryStatusHeight}
 							success={jobId != undefined && isSuccess(job?.['success'])}
 							flowModuleStates={localModuleStates}
 							bind:expandedSubflows
 							onSelect={(e) => {
 								console.log('onSelect', e)
-								if (rightColumnSelect != 'node_definition') {
+								if (rightColumnSelect != 'node_definition' && rightColumnSelect != 'tracing') {
 									rightColumnSelect = 'node_status'
 								}
 								if (typeof e == 'string') {
@@ -1463,6 +1470,7 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 							{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
 								<Tab value="user_states" label="User States" />
 							{/if}
+							<Tab value="tracing" label="Tracing" />
 						</Tabs>
 						{#if rightColumnSelect == 'timeline'}
 							<FlowTimeline
@@ -1508,7 +1516,10 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 									{/if}
 								{:else if selectedNode?.startsWith(AI_WEBSEARCH_PREFIX)}
 									<div class="p-2">
-										<Alert type="info" title="Web search output is available on the AI agent node" />
+										<Alert
+											type="info"
+											title="Web search output is available on the AI agent node"
+										/>
 									</div>
 								{:else if selectedNode}
 									{@const node = localModuleStates[selectedNode]}
@@ -1658,6 +1669,15 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 							<div class="p-2">
 								<JobArgs argLabel="Key" args={job?.flow_status?.user_states ?? {}} />
 							</div>
+						{:else if rightColumnSelect == 'tracing'}
+							{@const node = selectedNode ? localModuleStates[selectedNode] : undefined}
+							{#if node?.job_id}
+								<JobOtelTraces jobId={node.job_id} />
+							{:else}
+								<div class="p-4 text-secondary"
+									>Select a node with a job to see HTTP request traces</div
+								>
+							{/if}
 						{/if}
 					</div>
 				</div>

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -39,7 +39,7 @@ interface Props {
     job?: (Job & {
         result_stream?: string;
     }) | undefined;
-    rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states';
+    rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states' | 'tracing';
     localModuleStates?: Record<string, GraphModuleState>;
     localDurationStatuses?: Record<string, DurationStatus>;
     onResultStreamUpdate?: ({ jobId, result_stream }: {