windmill-components 1.677.1 → 1.695.0

package/package/components/FlowStatusViewerInner.svelte

@@ -13,7 +13,7 @@ import {} from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
 import { clone, isScriptPreview, msToSec, readFieldsRecursively, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
-import { ChevronDown, ExternalLink, Hourglass } from 'lucide-svelte';
+import { ChevronDown, Download, ExternalLink, Hourglass } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
 import FlowTimeline from './FlowTimeline.svelte';
 import { dfs } from './flows/dfs';
@@ -29,6 +29,7 @@ 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 GfmMarkdown from './GfmMarkdown.svelte';
 import JobOtelTraces from './JobOtelTraces.svelte';
 import JobDetailHeader from './runs/JobDetailHeader.svelte';
 import LogViewer from './LogViewer.svelte';
@@ -37,7 +38,7 @@ import { useThrottle } from 'runed';
 import { Splitpanes, Pane } from 'svelte-splitpanes';
 import { getActiveReplay } from './recording/flowRecording.svelte';
 let { flowState: flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs } = getContext('FlowStatusViewer');
-let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = 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, showLogsWithResult = false, showJobDetailHeader = false, hideFlowResult = false, notes: notesProp = undefined, groups: groupsProp = undefined } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), expandedSubflows = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined, toolCallStore, showLogsWithResult = false, showJobDetailHeader = false, hideFlowResult = false, notes: notesProp = undefined, groups: groupsProp = undefined } = $props();
 let getTopModuleStates = $derived(topModuleStates ?? localModuleStates);
 // Cache replay check to avoid repeated function calls in the template
 let isReplay = $derived(!!getActiveReplay());
@@ -98,7 +99,6 @@ function getStepResults(x) {
 }
 let retry_selected = $state('');
 let timeout = undefined;
-let expandedSubflows = $state({});
 let selectionManager = new SelectionManager();
 function onFlowModuleId() {
     let modId = flowJobIds?.moduleId;
@@ -633,6 +633,20 @@ onDestroy(() => {
     timeout && clearTimeout(timeout);
     // sub?.()
 });
+function getAgentActionContent(agentResult, actionIndex) {
+    if (!agentResult?.messages || !Array.isArray(agentResult.messages))
+        return undefined;
+    let agentActionIdx = 0;
+    for (const m of agentResult.messages) {
+        if (m.agent_action) {
+            if (agentActionIdx === actionIndex) {
+                return m.content;
+            }
+            agentActionIdx++;
+        }
+    }
+    return undefined;
+}
 function isSuccess(arg) {
     if (arg == undefined) {
         return undefined;
@@ -651,7 +665,8 @@ function onJobsLoadedInner(mod, job, force) {
                 previewResult: job['result'],
                 previewArgs: job.args,
                 previewJobId: job.id,
-                previewSuccess: job['success']
+                previewSuccess: job['success'],
+                previewLogs: job['logs']
             };
         }
         initializeByJob(id);
@@ -1465,6 +1480,19 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 				bind:clientHeight={tabsHeight.logsHeight}
 				style="min-height: {minTabHeight}px"
 			>
+				{#if !hideDownloadLogs && !isReplay && job?.id}
+					<div class="flex justify-end p-1">
+						<Button
+							href="{base}/api/w/{workspace}/jobs_u/get_flow_all_logs/{job.id}"
+							download="windmill_flow_logs_{job.id}.txt"
+							color="light"
+							size="xs"
+							startIcon={{ icon: Download }}
+						>
+							Download all logs
+						</Button>
+					</div>
+				{/if}
 				<FlowLogViewerWrapper
 					{job}
 					{localModuleStates}
@@ -1494,7 +1522,7 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 				<div class="border h-full rounded-md" bind:clientHeight={wrapperHeight}>
 					<Splitpanes>
 						<Pane bind:size={graphPaneSize} minSize={30}>
-							<div class="bg-surface-secondary h-full overflow-auto">
+							<div class="bg-surface-secondary h-full max-h-screen">
 								<div class="flex flex-col" bind:clientHeight={retryStatusHeight}>
 									{#each Object.values(retryStatus?.val ?? {}) as count}
 										{#if count}
@@ -1514,6 +1542,7 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 									triggerNode={true}
 									download={!hideDownloadInGraph}
 									minHeight={wrapperHeight - retryStatusHeight}
+									outerDivClass="max-h-screen"
 									success={jobId != undefined && isSuccess(job?.['success'])}
 									flowModuleStates={localModuleStates}
 									bind:expandedSubflows
@@ -1562,8 +1591,8 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 							</div>
 						</Pane>
 						<Pane bind:size={detailsPaneSize} minSize={25} class="!overflow-visible">
-							<div class="pt-1 overflow-auto min-h-[700px] flex flex-col h-full">
-								<Tabs bind:selected={rightColumnSelect}>
+							<div class="pt-1 min-h-[min(700px,100vh)] max-h-screen flex flex-col h-full relative">
+								<Tabs bind:selected={rightColumnSelect} wrapperClass="shrink-0">
 									{#if !hideTimeline}
 										<Tab value="timeline" label="Timeline" />
 									{/if}
@@ -1576,238 +1605,257 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 									{/if}
 									<Tab value="tracing" label="Tracing" />
 								</Tabs>
-								{#if rightColumnSelect == 'timeline'}
-									<FlowTimeline
-										{localModuleStates}
-										{onSelectedIteration}
-										selfWaitTime={job?.self_wait_time_ms}
-										aggregateWaitTime={job?.aggregate_wait_time_ms}
-										flowDone={job?.['success'] != undefined}
-										bind:this={flowTimeline}
-										flowModules={allModulesForTimeline(
-											job?.raw_flow?.modules ?? [],
-											expandedSubflows ?? {}
-										)}
-										buildSubflowKey={(key) => buildSubflowKey(key, prefix)}
-										durationStatuses={localDurationStatuses}
-									/>
-								{:else if rightColumnSelect == 'node_status'}
-									<div class="p-4 grow flex flex-col gap-6">
-										{#if selectedNode?.startsWith(AI_TOOL_MESSAGE_PREFIX)}
-											<div class="pt-2 pb-4">
-												<Alert
-													type="info"
-													title="Message output is available on the AI agent node"
-												/>
-											</div>
-										{:else if selectedNode?.startsWith(AI_MCP_TOOL_CALL_PREFIX)}
-											{@const [, agentModuleId, toolCallIndex] = selectedNode.split('-')}
-											{@const agentNode = localModuleStates?.[agentModuleId]}
-											{@const agentActions = agentNode?.agent_actions}
-											{@const mcpActionIndex = parseInt(toolCallIndex)}
-											{@const mcpAction =
-												agentActions && mcpActionIndex >= 0 && mcpActionIndex < agentActions.length
-													? agentActions[mcpActionIndex]
-													: undefined}
-											{#if mcpAction?.type === 'mcp_tool_call' && agentNode?.result?.messages}
-												{@const message = agentNode.result.messages.find(
-													(m: { agent_action?: { call_id?: string }; content?: any }) =>
-														m.agent_action?.call_id === mcpAction.call_id
+								<div class="overflow-auto">
+									{#if rightColumnSelect == 'timeline'}
+										<FlowTimeline
+											{localModuleStates}
+											{onSelectedIteration}
+											selfWaitTime={job?.self_wait_time_ms}
+											aggregateWaitTime={job?.aggregate_wait_time_ms}
+											flowDone={job?.['success'] != undefined}
+											bind:this={flowTimeline}
+											flowModules={allModulesForTimeline(
+												job?.raw_flow?.modules ?? [],
+												expandedSubflows ?? {}
+											)}
+											buildSubflowKey={(key) => buildSubflowKey(key, prefix)}
+											durationStatuses={localDurationStatuses}
+										/>
+									{:else if rightColumnSelect == 'node_status'}
+										<div class="p-4 grow flex flex-col gap-6">
+											{#if selectedNode?.startsWith(AI_TOOL_MESSAGE_PREFIX)}
+												{@const [, agentModuleId, toolCallIndex] = selectedNode.split('-')}
+												{@const agentNode = localModuleStates?.[agentModuleId]}
+												{@const actionIndex = parseInt(toolCallIndex)}
+												{@const messageContent = getAgentActionContent(
+													agentNode?.result,
+													actionIndex
 												)}
-												<McpToolCallDetails
-													functionName={mcpAction.function_name}
-													args={mcpAction.arguments ?? {}}
-													result={message?.content}
-													type="Success"
-													workspaceId={job?.workspace_id}
-												/>
-											{/if}
-										{:else if selectedNode?.startsWith(AI_WEBSEARCH_PREFIX)}
-											<Alert
-												type="info"
-												title="Web search output is available on the AI agent node"
-											/>
-										{:else if selectedNode}
-											{@const node = localModuleStates[selectedNode]}
-											{#if selectedNode == 'end'}
-												<FlowJobResult
-													tagLabel={customUi?.tagLabel}
-													workspaceId={isReplay ? undefined : job?.workspace_id}
-													jobId={isReplay ? undefined : job?.id}
-													filename={job.id}
-													loading={job['running']}
-													tag={job?.tag}
-													col
-													result={job['result']}
-													logs={job.logs ?? ''}
-													downloadLogs={!hideDownloadLogs && !isReplay}
-												/>
-											{:else if selectedNode == 'start'}
-												{#if job.args}
-													<JobArgs
-														id={isReplay ? undefined : job.id}
-														workspace={isReplay
-															? undefined
-															: (job.workspace_id ?? $workspaceStore ?? 'no_w')}
-														args={job.args}
-													/>
-												{:else}
-													<p class="text-secondary">No arguments</p>
-												{/if}
-											{:else if node}
-												{@const module =
-													stepDetail && typeof stepDetail !== 'string' ? stepDetail : undefined}
-												{@const agentTools =
-													module && module.value.type === 'aiagent'
-														? module.value.tools
-														: undefined}
-												{@const parentLoopsPrefix = getParentLoopsPrefix(module?.id ?? '')}
-												{#if node.flow_jobs_results}
+												{#if messageContent !== undefined && typeof messageContent === 'string'}
 													<div>
-														<span class="pl-1 text-emphasis text-xs font-medium"
-															>Result of step as collection of all subflows</span
-														>
-														<div class="overflow-auto max-h-[200px] p-2">
-															<DisplayResult
-																workspaceId={isReplay ? undefined : job?.workspace_id}
-																result={node.flow_jobs_results}
-																nodeId={selectedNode}
-																jobId={isReplay ? undefined : job?.id}
-																language={job?.language}
-															/>
+														<div class="text-xs text-emphasis font-semibold mb-1">Message</div>
+														<div class="border rounded p-2 overflow-auto max-h-[500px]">
+															<GfmMarkdown md={messageContent} />
 														</div>
 													</div>
+												{:else}
+													<div class="pt-2 pb-4">
+														<Alert
+															type="info"
+															title="Message output is available on the AI agent node"
+														/>
+													</div>
 												{/if}
-												<div class="flex flex-col gap-2">
+											{:else if selectedNode?.startsWith(AI_MCP_TOOL_CALL_PREFIX)}
+												{@const [, agentModuleId, toolCallIndex] = selectedNode.split('-')}
+												{@const agentNode = localModuleStates?.[agentModuleId]}
+												{@const agentActions = agentNode?.agent_actions}
+												{@const mcpActionIndex = parseInt(toolCallIndex)}
+												{@const mcpAction =
+													agentActions &&
+													mcpActionIndex >= 0 &&
+													mcpActionIndex < agentActions.length
+														? agentActions[mcpActionIndex]
+														: undefined}
+												{#if mcpAction?.type === 'mcp_tool_call' && agentNode?.result?.messages}
+													{@const message = agentNode.result.messages.find(
+														(m: { agent_action?: { call_id?: string }; content?: any }) =>
+															m.agent_action?.call_id === mcpAction.call_id
+													)}
+													<McpToolCallDetails
+														functionName={mcpAction.function_name}
+														args={mcpAction.arguments ?? {}}
+														result={message?.content}
+														type="Success"
+														workspaceId={job?.workspace_id}
+													/>
+												{/if}
+											{:else if selectedNode?.startsWith(AI_WEBSEARCH_PREFIX)}
+												<Alert type="info" title="Web search was used in this step" />
+											{:else if selectedNode}
+												{@const node = localModuleStates[selectedNode]}
+												{#if selectedNode == 'end'}
+													<FlowJobResult
+														tagLabel={customUi?.tagLabel}
+														workspaceId={isReplay ? undefined : job?.workspace_id}
+														jobId={isReplay ? undefined : job?.id}
+														filename={job.id}
+														loading={job['running']}
+														tag={job?.tag}
+														col
+														result={job['result']}
+														logs={job.logs ?? ''}
+														downloadLogs={!hideDownloadLogs && !isReplay}
+													/>
+												{:else if selectedNode == 'start'}
+													{#if job.args}
+														<JobArgs
+															id={isReplay ? undefined : job.id}
+															workspace={isReplay
+																? undefined
+																: (job.workspace_id ?? $workspaceStore ?? 'no_w')}
+															args={job.args}
+														/>
+													{:else}
+														<p class="text-secondary">No arguments</p>
+													{/if}
+												{:else if node}
+													{@const module =
+														stepDetail && typeof stepDetail !== 'string' ? stepDetail : undefined}
+													{@const agentTools =
+														module && module.value.type === 'aiagent'
+															? module.value.tools
+															: undefined}
+													{@const parentLoopsPrefix = getParentLoopsPrefix(module?.id ?? '')}
 													{#if node.flow_jobs_results}
-														<span class="pl-1 text-xs font-medium text-emphasis pt-4"
-															>Selected subflow</span
-														>
+														<div>
+															<span class="pl-1 text-emphasis text-xs font-medium"
+																>Result of step as collection of all subflows</span
+															>
+															<div class="overflow-auto max-h-[200px] p-2">
+																<DisplayResult
+																	workspaceId={isReplay ? undefined : job?.workspace_id}
+																	result={node.flow_jobs_results}
+																	nodeId={selectedNode}
+																	jobId={isReplay ? undefined : job?.id}
+																	language={job?.language}
+																/>
+															</div>
+														</div>
 													{/if}
-													<div class="flex flex-col gap-6">
+													<div class="flex flex-col gap-2">
+														{#if node.flow_jobs_results}
+															<span class="pl-1 text-xs font-medium text-emphasis pt-4"
+																>Selected subflow</span
+															>
+														{/if}
 														<div class="flex flex-col gap-6">
-															<div class="flex gap-2 min-w-0 w-full items-center">
-																<ModuleStatus
-																	type={node.type}
-																	scheduled_for={node.scheduled_for}
-																	skipped={node.skipped}
-																/>
-																{#if node.duration_ms}
-																	<Badge>
-																		<Hourglass class="mr-2" size={10} />
-																		{msToSec(node.duration_ms)} s
-																	</Badge>
+															<div class="flex flex-col gap-6">
+																<div class="flex gap-2 min-w-0 w-full items-center">
+																	<ModuleStatus
+																		type={node.type}
+																		scheduled_for={node.scheduled_for}
+																		skipped={node.skipped}
+																	/>
+																	{#if node.duration_ms}
+																		<Badge>
+																			<Hourglass class="mr-2" size={10} />
+																			{msToSec(node.duration_ms)} s
+																		</Badge>
+																	{/if}
+																	{#if node.job_id && !isReplay}
+																		<div class="grow w-full flex flex-row-reverse">
+																			<a
+																				class="text-right text-xs"
+																				rel="noreferrer"
+																				target="_blank"
+																				href="{base}/run/{node.job_id ??
+																					''}?workspace={job?.workspace_id}"
+																			>
+																				{truncateRev(node.job_id ?? '', 10)}
+																				<ExternalLink size={12} class="inline-block" />
+																			</a>
+																		</div>
+																	{/if}
+																</div>
+																{#if !node.isListJob}
+																	<div>
+																		<div class="text-xs text-emphasis font-semibold mb-1"
+																			>Inputs</div
+																		>
+																		<JobArgs
+																			id={isReplay ? undefined : node.job_id}
+																			workspace={isReplay
+																				? undefined
+																				: (job.workspace_id ?? $workspaceStore ?? 'no_w')}
+																			args={node.args}
+																		/>
+																	</div>
 																{/if}
-																{#if node.job_id && !isReplay}
-																	<div class="grow w-full flex flex-row-reverse">
-																		<a
-																			class="text-right text-xs"
-																			rel="noreferrer"
-																			target="_blank"
-																			href="{base}/run/{node.job_id ??
-																				''}?workspace={job?.workspace_id}"
+																{#if node.workflow_as_code_status}
+																	<div>
+																		<div class="text-xs text-emphasis font-semibold mb-1"
+																			>Workflow timeline</div
 																		>
-																			{truncateRev(node.job_id ?? '', 10)}
-																			<ExternalLink size={12} class="inline-block" />
-																		</a>
+																		<WorkflowTimeline
+																			flow_status={asWorkflowStatus(node.workflow_as_code_status)}
+																			flowDone={node.type === 'Success' || node.type === 'Failure'}
+																			stepResults={getStepResults(node.workflow_as_code_status)}
+																			result={node.result}
+																			success={node.type === 'Success'}
+																			jobId={node.job_id}
+																		/>
 																	</div>
 																{/if}
 															</div>
-															{#if !node.isListJob}
-																<div>
-																	<div class="text-xs text-emphasis font-semibold mb-1">Inputs</div>
-																	<JobArgs
-																		id={isReplay ? undefined : node.job_id}
-																		workspace={isReplay
-																			? undefined
-																			: (job.workspace_id ?? $workspaceStore ?? 'no_w')}
-																		args={node.args}
-																	/>
-																</div>
-															{/if}
-															{#if node.workflow_as_code_status}
-																<div>
-																	<div class="text-xs text-emphasis font-semibold mb-1"
-																		>Workflow timeline</div
-																	>
-																	<WorkflowTimeline
-																		flow_status={asWorkflowStatus(node.workflow_as_code_status)}
-																		flowDone={node.type === 'Success' || node.type === 'Failure'}
-																		stepResults={getStepResults(node.workflow_as_code_status)}
-																		result={node.result}
-																		success={node.type === 'Success'}
-																		jobId={node.job_id}
-																	/>
-																</div>
-															{/if}
-														</div>
-														<FlowJobResult
-															tagLabel={customUi?.tagLabel}
-															workspaceId={isReplay ? undefined : job?.workspace_id}
-															jobId={isReplay ? undefined : node.job_id}
-															loading={node.type != 'Success' && node.type != 'Failure'}
-															waitingForExecutor={node.type == 'WaitingForExecutor'}
-															refreshLog={node.type == 'InProgress'}
-															col
-															result_stream={resultStreams[node.job_id ?? '']}
-															result={node.result}
-															tag={node.tag}
-															logs={node.logs}
-															downloadLogs={!hideDownloadLogs && !isReplay}
-															aiAgentStatus={agentTools &&
-															node?.job_id &&
-															(node.type === 'Success' || node.type === 'Failure')
-																? {
-																		tools: agentTools,
-																		agentJob: {
-																			id: node.job_id,
-																			result: node.result,
-																			logs: node.logs,
-																			args: node.args,
-																			success: node.type === 'Success',
-																			type: 'CompletedJob'
-																		},
-																		storedToolCallJobs: module
-																			? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
-																			: undefined,
-																		onToolJobLoaded: (job, idx) => {
-																			if (module) {
-																				const storeKey = parentLoopsPrefix + module.id + '-' + idx
-																				toolCallStore?.setStoredToolCallJob(storeKey, job)
+															<FlowJobResult
+																tagLabel={customUi?.tagLabel}
+																workspaceId={isReplay ? undefined : job?.workspace_id}
+																jobId={isReplay ? undefined : node.job_id}
+																loading={node.type != 'Success' && node.type != 'Failure'}
+																waitingForExecutor={node.type == 'WaitingForExecutor'}
+																refreshLog={node.type == 'InProgress'}
+																col
+																result_stream={resultStreams[node.job_id ?? '']}
+																result={node.result}
+																tag={node.tag}
+																logs={node.logs}
+																downloadLogs={!hideDownloadLogs && !isReplay}
+																aiAgentStatus={agentTools &&
+																node?.job_id &&
+																(node.type === 'Success' || node.type === 'Failure')
+																	? {
+																			tools: agentTools,
+																			agentJob: {
+																				id: node.job_id,
+																				result: node.result,
+																				logs: node.logs,
+																				args: node.args,
+																				success: node.type === 'Success',
+																				type: 'CompletedJob'
+																			},
+																			storedToolCallJobs: module
+																				? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
+																				: undefined,
+																			onToolJobLoaded: (job, idx) => {
+																				if (module) {
+																					const storeKey = parentLoopsPrefix + module.id + '-' + idx
+																					toolCallStore?.setStoredToolCallJob(storeKey, job)
+																				}
 																			}
 																		}
-																	}
-																: undefined}
-														/>
+																	: undefined}
+															/>
+														</div>
 													</div>
-												</div>
-											{:else}
-												<p class="p-2 text-primary italic"
-													>The execution of this node has no information attached to it. The job
-													likely did not run yet</p
-												>
-											{/if}
-										{:else}<p class="text-secondary text-xs italic"
-												>Select a node to see its details here</p
-											>{/if}
-									</div>
-								{:else if rightColumnSelect == 'node_definition'}
-									{@const node = selectedNode ? localModuleStates[selectedNode] : undefined}
-									<FlowGraphViewerStep {stepDetail} jobScriptHash={node?.script_hash} />
-								{:else if rightColumnSelect == 'user_states'}
-									<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 text-xs italic"
-											>Select a node with a job to see HTTP request traces</div
-										>
+												{:else}
+													<p class="p-2 text-primary italic"
+														>The execution of this node has no information attached to it. The job
+														likely did not run yet</p
+													>
+												{/if}
+											{:else}<p class="text-secondary text-xs italic"
+													>Select a node to see its details here</p
+												>{/if}
+										</div>
+									{:else if rightColumnSelect == 'node_definition'}
+										{@const node = selectedNode ? localModuleStates[selectedNode] : undefined}
+										<FlowGraphViewerStep {stepDetail} jobScriptHash={node?.script_hash} />
+									{:else if rightColumnSelect == 'user_states'}
+										<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 text-xs italic"
+												>Select a node with a job to see HTTP request traces</div
+											>
+										{/if}
 									{/if}
-								{/if}
+								</div>
 							</div>
 						</Pane>
 					</Splitpanes>

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

@@ -1,5 +1,5 @@
 import FlowStatusViewerInner from './FlowStatusViewerInner.svelte';
-import { type Job, type FlowModuleValue, type CompletedJob, type FlowNote, type FlowValue } from '../gen';
+import { type Job, type FlowModuleValue, type FlowModule, type CompletedJob, type FlowNote, type FlowValue } from '../gen';
 import { type DurationStatus, type GraphModuleState } from './graph';
 interface Props {
     jobId: string;
@@ -39,6 +39,10 @@ interface Props {
     }) | undefined;
     rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states' | 'tracing';
     localModuleStates?: Record<string, GraphModuleState>;
+    expandedSubflows?: Record<string, {
+        modules: FlowModule[];
+        groups?: any[];
+    }>;
     localDurationStatuses?: Record<string, DurationStatus>;
     onResultStreamUpdate?: ({ jobId, result_stream }: {
         jobId: string;
@@ -75,6 +79,6 @@ export type FlowModuleForTimeline = {
     id: string;
     type: FlowModuleValue['type'];
 };
-declare const FlowStatusViewerInner: import("svelte").Component<Props, {}, "job" | "localModuleStates" | "localDurationStatuses" | "selectedNode" | "rightColumnSelect">;
+declare const FlowStatusViewerInner: import("svelte").Component<Props, {}, "job" | "expandedSubflows" | "localModuleStates" | "localDurationStatuses" | "selectedNode" | "rightColumnSelect">;
 type FlowStatusViewerInner = ReturnType<typeof FlowStatusViewerInner>;
 export default FlowStatusViewerInner;

package/package/components/FlowTimeline.svelte

@@ -110,7 +110,7 @@ const barHeight = 32;
 							height={Math.min(400, (subItems?.length ?? 0) * barHeight)}
 							itemCount={subItems?.length ?? 0}
 							itemSize={barHeight}
-							getKey={(index) => subItems?.[index]?.id}
+							getKey={(index) => subItems?.[index]?.id ?? `_${index}`}
 						>
 							{#snippet item({ index, style })}
 								{@const b = subItems?.[index]}