windmill-components 1.537.1 → 1.542.5

package/package/components/FlowLogViewer.svelte

@@ -1,14 +1,16 @@
-<script lang="ts">import { ChevronDown, ChevronRight, GitBranch, Repeat, Code, ArrowDownToLine, ArrowDownFromLine, FoldVertical, UnfoldVertical } from 'lucide-svelte';
+<script lang="ts">import { GitBranch, Repeat, Code, ArrowDownToLine, ArrowDownFromLine, FoldVertical, UnfoldVertical, ExternalLink, Keyboard } from 'lucide-svelte';
 import { base } from '../base';
 import { workspaceStore } from '../stores';
-import { truncateRev } from '../utils';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 import LogViewer from './LogViewer.svelte';
 import FlowLogViewer from './FlowLogViewer.svelte';
 import { twMerge } from 'tailwind-merge';
 import FlowJobsMenu from './flows/map/FlowJobsMenu.svelte';
 import BarsStaggered from './icons/BarsStaggered.svelte';
-let { modules, localModuleStates, rootJob, flowStatus, expandedRows, allExpanded, showResultsInputs, toggleExpanded, toggleExpandAll, workspaceId, render, level = 0, flowId = 'root', onSelectedIteration, getSelectedIteration, flowSummary, mode = 'flow' } = $props();
+import { updateLinks } from '../keyboardChain';
+import FlowLogRow from './FlowLogRow.svelte';
+import { Tooltip } from './meltComponents';
+let { modules, localModuleStates, rootJob, flowStatus, expandedRows, allExpanded, showResultsInputs, toggleExpanded, toggleExpandAll, workspaceId, render, level = 0, flowId = 'root', onSelectedIteration, getSelectedIteration, flowSummary, mode = 'flow', currentId, navigationChain = $bindable(), select } = $props();
 function getJobLink(jobId) {
     if (!jobId)
         return '';
@@ -132,6 +134,83 @@ const flowInfo = $derived.by(() => {
         parentsWithErrors
     };
 });
+let subloopNavigationChains = $state({});
+function buildNavigationLinks() {
+    const items = [];
+    // Flow header (always first)
+    items.push(`flow-${flowId}`);
+    if (level > 0 && !isExpanded(`flow-${flowId}`)) {
+        return { [`flow-${flowId}`]: { upId: null, downId: null } };
+    }
+    // Flow input (if exists and shown)
+    if (showResultsInputs && flowInfo.inputs && Object.keys(flowInfo.inputs).length > 0) {
+        items.push(`flow-${flowId}-input`);
+    }
+    // Add modules in order
+    modules.forEach((module) => {
+        items.push(module.id);
+        // If module is expanded, add its children
+        if (isExpanded(module.id, localModuleStates[module.id]?.type === 'InProgress' ||
+            localModuleStates[module.id]?.type === 'WaitingForExecutor')) {
+            // Check if it has subflows
+            const subflows = getSubflows(module);
+            if (subflows.length > 0) {
+                // Add subflow IDs
+                subflows.forEach((subflow) => {
+                    items.push(`flow-${subflow.flowId}`);
+                });
+            }
+            else {
+                // Add input if exists and shown (leaf nodes only)
+                if (showResultsInputs &&
+                    localModuleStates[module.id]?.args &&
+                    Object.keys(localModuleStates[module.id].args).length > 0) {
+                    items.push(`${module.id}-input`);
+                }
+                items.push(`${module.id}-logs`);
+                // Add result if exists and shown (leaf nodes only)
+                if (showResultsInputs && localModuleStates[module.id]?.result !== undefined) {
+                    items.push(`${module.id}-result`);
+                }
+            }
+        }
+    });
+    // Flow result (if exists and shown)
+    if (showResultsInputs && flowInfo.result !== undefined && rootJob.type === 'CompletedJob') {
+        items.push(`flow-${flowId}-result`);
+    }
+    // Convert items to navigation links
+    let links = items.reduce((acc, itemId, index) => {
+        let upId = index > 0 ? items[index - 1] : null;
+        let downId = index < items.length - 1 ? items[index + 1] : null;
+        acc[itemId] = { upId, downId };
+        return acc;
+    }, {});
+    // Add subflow chains
+    Object.entries(subloopNavigationChains).forEach(([_, chain]) => {
+        links = updateLinks($state.snapshot(links), $state.snapshot(chain));
+    });
+    return links;
+}
+const links = $derived.by(buildNavigationLinks);
+$effect(() => {
+    navigationChain = links;
+});
+// Helper to check if an item is currently focused
+function isCurrent(itemId) {
+    return currentId === itemId;
+}
+// Scroll current item into view
+$effect(() => {
+    if (currentId) {
+        const element = document.querySelector(`[data-nav-id="${currentId}"]`);
+        if (element) {
+            ;
+            element.focus?.({ preventScroll: true });
+            element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    }
+});
 function hasSubflows(module) {
     return (module.value.type === 'forloopflow' ||
         module.value.type === 'whileloopflow' ||
@@ -173,6 +252,12 @@ function getSubflows(module) {
 {#if render}
 	{#if level === 0 && toggleExpandAll}
 		<div class="flex justify-end gap-4 items-center p-2 bg-surface-secondary border-b">
+			<Tooltip>
+				{#snippet text()}
+					Keyboard navigation available - ↑/↓/Enter
+				{/snippet}
+				<Keyboard size={16} class="text-tertiary" />
+			</Tooltip>
 			<div class="flex items-center gap-2 whitespace-nowrap">
 				<label
 					for="showResultsInputs"
@@ -204,413 +289,366 @@ function getSubflows(module) {
 	{/if}
 	<ul class="w-full font-mono text-xs bg-surface-secondary list-none">
 		<!-- Flow entry -->
-		<li class="border-b flex flex-row">
-			<div class="py-2 leading-tight align-top">
-				{#if level > 0}
-					<button
-						class="w-4 flex items-center justify-center text-xs text-tertiary hover:text-primary transition-colors"
-						onclick={() => toggleExpanded(`flow-${flowId}`)}
-					>
-						{#if isExpanded(`flow-${flowId}`, rootJob.type === 'QueuedJob')}
-							<ChevronDown size={8} />
-						{:else}
-							<ChevronRight size={8} />
-						{/if}
-					</button>
-				{:else}
-					<!-- Root flow - no collapse button, just spacing -->
-					<div class="w-4"></div>
-				{/if}
-			</div>
-			<div class="grow min-w-0 leading-tight">
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					class={twMerge(
-						'py-1 flex items-center justify-between pr-2',
-						level > 0 ? 'cursor-pointer' : '',
-						rootJob.type === undefined ? 'opacity-50' : ''
-					)}
-					onclick={level > 0 ? () => toggleExpanded(`flow-${flowId}`) : undefined}
-				>
-					<div class="flex items-center gap-2 grow min-w-0">
-						<!-- Flow icon -->
-						{@render flowIcon(level == 0 ? getFlowStatus(rootJob) : flowStatus, flowInfo.hasErrors)}
+		<FlowLogRow
+			id={`flow-${flowId}`}
+			isCollapsible={level > 0}
+			isRunning={rootJob.type === 'QueuedJob'}
+			{isCurrent}
+			{isExpanded}
+			{toggleExpanded}
+			class={rootJob.type === undefined ? 'opacity-50' : ''}
+			{select}
+		>
+			{#snippet label()}
+				<div class="flex items-center gap-2">
+					<!-- Flow icon -->
+					{@render flowIcon(level == 0 ? getFlowStatus(rootJob) : flowStatus, flowInfo.hasErrors)}
 
-						<div class="flex items-center gap-2">
-							<span class="text-xs font-mono">
-								{mode === 'aiagent' ? 'AI Agent' : level == 0 ? 'Flow' : 'Subflow'}
-								{#if flowInfo.label}
-									: {flowInfo.label}
-								{/if}
-								<span class="text-tertiary">{getStepProgress(rootJob, modules.length)}</span>
-							</span>
-						</div>
+					<div class="text-xs text-left font-mono grow min-w-0">
+						{mode === 'aiagent' ? 'AI Agent' : level == 0 ? 'Flow' : 'Subflow'}
+						{#if flowInfo.label}
+							: {flowInfo.label}
+						{/if}
+						<span class="text-tertiary">{getStepProgress(rootJob, modules.length)}</span>
 					</div>
 
 					{#if flowInfo.jobId}
 						<a
 							href={getJobLink(flowInfo.jobId)}
-							class="text-xs text-primary hover:underline font-mono"
+							class="text-xs text-gray-400 hover:text-primary pl-1"
 							target="_blank"
 							rel="noopener noreferrer"
 							onclick={(e) => e.stopPropagation()}
 						>
-							{truncateRev(flowInfo.jobId, 6)}
+							<ExternalLink size={12} />
 						</a>
 					{/if}
 				</div>
+			{/snippet}
 
-				{#if level === 0 || isExpanded(`flow-${flowId}`, rootJob.type === 'QueuedJob')}
-					<div class="mb-2 transition-all duration-200 ease-in-out w-full">
-						<!-- Flow logs -->
-						{#if flowInfo.logs}
-							<LogViewer
-								content={flowInfo.logs}
-								jobId={flowInfo.jobId}
-								isLoading={false}
-								small={true}
-								download={false}
-								noAutoScroll={true}
-								tag={undefined}
-								noPadding
-								wrapperClass="w-full mb-2 pr-2"
-							/>
-						{/if}
+			{#if level === 0 || isExpanded(`flow-${flowId}`, rootJob.type === 'QueuedJob')}
+				<div class="mb-2 transition-all duration-200 ease-in-out w-full">
+					<!-- Flow logs -->
+					{#if flowInfo.logs}
+						<LogViewer
+							content={flowInfo.logs}
+							jobId={flowInfo.jobId}
+							isLoading={false}
+							small={true}
+							download={false}
+							noAutoScroll={true}
+							tag={undefined}
+							noPadding
+							wrapperClass="w-full mb-2 pr-2"
+						/>
+					{/if}
 
-						<!-- Flow steps - nested as children -->
-						<ul class="w-full font-mono text-xs bg-surface-secondary list-none border-l">
-							<!-- Flow inputs as first row entry -->
-							{#if showResultsInputs && flowInfo.inputs && Object.keys(flowInfo.inputs).length > 0}
-								<li class="border-b flex flex-row w-full">
-									<div class="py-2 leading-tight align-top">
-										<button
-											class="w-4 flex items-center justify-center text-xs text-tertiary hover:text-primary transition-colors"
-											onclick={() => toggleExpanded(`flow-${flowId}-input`)}
-										>
-											{#if isExpanded(`flow-${flowId}-input`)}
-												<ChevronDown size={8} />
-											{:else}
-												<ChevronRight size={8} />
-											{/if}
-										</button>
+					<!-- Flow steps - nested as children -->
+					<ul class="w-full font-mono text-xs bg-surface-secondary list-none border-l">
+						<!-- Flow inputs as first row entry -->
+						{#if showResultsInputs && flowInfo.inputs && Object.keys(flowInfo.inputs).length > 0}
+							<FlowLogRow
+								id={`flow-${flowId}-input`}
+								isCollapsible={true}
+								isRunning={false}
+								{isCurrent}
+								{isExpanded}
+								{toggleExpanded}
+								{select}
+							>
+								{#snippet label()}
+									<div class="flex items-center gap-2 grow min-w-0">
+										<ArrowDownToLine size={10} />
+										<span class="text-xs font-mono">Inputs</span>
 									</div>
+								{/snippet}
+								{#if isExpanded(`flow-${flowId}-input`)}
+									<div class="my-1 transition-all duration-200 ease-in-out">
+										<div class="pl-4">
+											<ObjectViewer json={flowInfo.inputs} pureViewer={true} />
+										</div>
+									</div>
+								{/if}
+							</FlowLogRow>
+						{/if}
 
-									<div class="grow min-w-0 leading-tight">
-										<!-- svelte-ignore a11y_no_static_element_interactions -->
-										<!-- svelte-ignore a11y_click_events_have_key_events -->
+						{#if modules.length > 0}
+							{#each modules as module (module.id)}
+								{@const isLeafStep = !hasSubflows(module)}
+								{@const status = localModuleStates[module.id]?.type}
+								{@const isRunning = status === 'InProgress' || status === 'WaitingForExecutor'}
+								{@const hasEmptySubflowValue = hasEmptySubflow(module.id, module.value.type)}
+								{@const isCollapsible = !hasEmptySubflowValue}
+								<FlowLogRow
+									id={module.id}
+									{isCollapsible}
+									{isRunning}
+									{isCurrent}
+									{isExpanded}
+									{toggleExpanded}
+									{select}
+								>
+									{#snippet label()}
 										<div
-											class="py-1 flex items-center justify-between pr-2 cursor-pointer"
-											onclick={() => toggleExpanded(`flow-${flowId}-input`)}
+											class={twMerge(
+												'flex items-center justify-between',
+												status === 'WaitingForPriorSteps' ||
+													status === 'WaitingForEvents' ||
+													status === 'WaitingForExecutor' ||
+													status === undefined
+													? 'opacity-50'
+													: ''
+											)}
 										>
 											<div class="flex items-center gap-2 grow min-w-0">
-												<ArrowDownToLine size={10} />
-												<span class="text-xs font-mono">Inputs</span>
-											</div>
-										</div>
-
-										{#if isExpanded(`flow-${flowId}-input`)}
-											<div class="my-1 transition-all duration-200 ease-in-out">
-												<div class="pl-4">
-													<ObjectViewer json={flowInfo.inputs} pureViewer={true} />
-												</div>
-											</div>
-										{/if}
-									</div>
-								</li>
-							{/if}
-
-							{#if modules.length > 0}
-								{#each modules as module (module.id)}
-									{@const isLeafStep = !hasSubflows(module)}
-									{@const status = localModuleStates[module.id]?.type}
-									{@const isRunning = status === 'InProgress' || status === 'WaitingForExecutor'}
-									{@const hasEmptySubflowValue = hasEmptySubflow(module.id, module.value.type)}
-									{@const isCollapsible = !hasEmptySubflowValue}
-									<li class="border-b flex flex-row">
-										<div class="py-2 leading-tight align-top">
-											{#if isCollapsible}
-												<button
-													class="w-4 flex items-center justify-center text-xs text-tertiary hover:text-primary transition-colors"
-													onclick={() => toggleExpanded(module.id)}
-												>
-													{#if isExpanded(module.id, isRunning)}
-														<ChevronDown size={8} />
-													{:else}
-														<ChevronRight size={8} />
-													{/if}
-												</button>
-											{:else}
-												<!-- Empty subflow - no collapse button, just spacing -->
-												<div class="w-4"></div>
-											{/if}
-										</div>
-										<div class="w-full leading-tight grow min-w-0">
-											<!-- svelte-ignore a11y_click_events_have_key_events -->
-											<!-- svelte-ignore a11y_no_static_element_interactions -->
-											<div
-												class={twMerge(
-													'py-1 flex items-center justify-between pr-2',
-													isCollapsible ? 'cursor-pointer' : '',
-													status === 'WaitingForPriorSteps' ||
-														status === 'WaitingForEvents' ||
-														status === 'WaitingForExecutor' ||
-														status === undefined
-														? 'opacity-50'
-														: ''
+												<!-- Step icon -->
+												{@render stepIcon(
+													module.value.type,
+													status as FlowStatusModule['type'],
+													flowInfo.parentsWithErrors.has(module.id)
 												)}
-												onclick={isCollapsible ? () => toggleExpanded(module.id) : undefined}
-											>
-												<div class="flex items-center gap-2 grow min-w-0">
-													<!-- Step icon -->
-													{@render stepIcon(
-														module.value.type,
-														status as FlowStatusModule['type'],
-														flowInfo.parentsWithErrors.has(module.id)
-													)}
 
-													<div class="flex items-center gap-2">
-														<span class="text-xs font-mono">
-															<b>
-																{mode === 'aiagent'
-																	? module.summary
-																		? 'Tool call'
-																		: 'Message'
-																	: module.id}
-															</b>
-															{#if mode === 'flow'}
-																{#if module.value.type === 'forloopflow'}
-																	For loop
-																{:else if module.value.type === 'whileloopflow'}
-																	While loop
-																{:else if module.value.type === 'branchall'}
-																	Branch to all
-																{:else if module.value.type === 'branchone'}
-																	Branch to one
-																{:else if module.value.type === 'flow'}
-																	Subflow
-																{:else}
-																	Step
-																{/if}
-															{/if}
-															{#if module.summary}
-																: {module.summary}
-															{/if}
-															{#if hasEmptySubflowValue}
-																<span class="text-tertiary">
-																	{#if module.value.type === 'forloopflow' || module.value.type === 'whileloopflow'}
-																		(empty loop)
-																	{:else if module.value.type === 'branchall' || module.value.type === 'branchone'}
-																		(no branch)
-																	{/if}
-																</span>
+												<div class="flex items-center gap-2">
+													<span class="text-xs font-mono text-left">
+														<b>
+															{mode === 'aiagent'
+																? module.summary
+																	? 'Tool call'
+																	: 'Message'
+																: module.id}
+														</b>
+														{#if mode === 'flow'}
+															{#if module.value.type === 'forloopflow'}
+																For loop
+															{:else if module.value.type === 'whileloopflow'}
+																While loop
+															{:else if module.value.type === 'branchall'}
+																Branch to all
+															{:else if module.value.type === 'branchone'}
+																Branch to one
+															{:else if module.value.type === 'flow'}
+																Subflow
+															{:else}
+																Step
 															{/if}
-														</span>
-														{#if !hasEmptySubflowValue && localModuleStates[module.id]?.flow_jobs && (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow')}
-															<span
-																class="text-xs font-mono font-medium inline-flex items-center grow min-w-0 -my-2"
-															>
-																<span onclick={(e) => e.stopPropagation()}>
-																	<FlowJobsMenu
-																		moduleId={module.id}
-																		id={module.id}
-																		{onSelectedIteration}
-																		flowJobsSuccess={localModuleStates[module.id]
-																			?.flow_jobs_success}
-																		flowJobs={localModuleStates[module.id]?.flow_jobs}
-																		selected={localModuleStates[module.id]?.selectedForloopIndex ??
-																			0}
-																		selectedManually={localModuleStates[module.id]
-																			?.selectedForLoopSetManually ?? false}
-																		showIcon={false}
-																	/>
-																</span>
-																{#if module.value.type === 'forloopflow'}
-																	{`/${localModuleStates[module.id]?.iteration_total ?? 0}`}
+														{/if}
+														{#if module.summary}
+															: {module.summary}
+														{/if}
+														{#if hasEmptySubflowValue}
+															<span class="text-tertiary">
+																{#if module.value.type === 'forloopflow' || module.value.type === 'whileloopflow'}
+																	(empty loop)
+																{:else if module.value.type === 'branchall' || module.value.type === 'branchone'}
+																	(no branch)
 																{/if}
 															</span>
 														{/if}
-													</div>
-												</div>
-
-												{#if isLeafStep}
-													{@const jobId = localModuleStates[module.id]?.job_id}
-													{#if jobId}
-														<a
-															href={getJobLink(jobId ?? '')}
-															class="text-xs text-primary hover:underline font-mono"
-															target="_blank"
-															rel="noopener noreferrer"
+													</span>
+													{#if !hasEmptySubflowValue && localModuleStates[module.id]?.flow_jobs && (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow')}
+														<span
+															class="text-xs font-mono font-medium inline-flex items-center grow min-w-0 -my-2"
 														>
-															{truncateRev(jobId ?? '', 6)}
-														</a>
+															<button onclick={(e) => e.stopPropagation()}>
+																<FlowJobsMenu
+																	moduleId={module.id}
+																	id={module.id}
+																	{onSelectedIteration}
+																	flowJobsSuccess={localModuleStates[module.id]?.flow_jobs_success}
+																	flowJobs={localModuleStates[module.id]?.flow_jobs}
+																	selected={localModuleStates[module.id]?.selectedForloopIndex ?? 0}
+																	selectedManually={localModuleStates[module.id]
+																		?.selectedForLoopSetManually ?? false}
+																	showIcon={false}
+																/>
+															</button>
+															{#if module.value.type === 'forloopflow'}
+																{`/${localModuleStates[module.id]?.iteration_total ?? 0}`}
+															{/if}
+														</span>
 													{/if}
-												{/if}
+												</div>
 											</div>
 
-											{#if isCollapsible && isExpanded(module.id, isRunning)}
-												{@const args = localModuleStates[module.id]?.args}
-												{@const logs = localModuleStates[module.id]?.logs}
-												{@const result = localModuleStates[module.id]?.result}
+											{#if isLeafStep}
 												{@const jobId = localModuleStates[module.id]?.job_id}
-												<div class="my-1 transition-all duration-200 ease-in-out">
-													<!-- Show child steps if they exist -->
-													{#each getSubflows(module) as subflow}
-														{@const subflowJob = {
-															id: jobId,
-															type:
-																localModuleStates[module.id]?.type === 'Failure' ||
-																localModuleStates[module.id]?.type === 'Success'
-																	? 'CompletedJob'
-																	: ('QueuedJob' as Job['type']),
-															logs,
-															result,
-															args,
-															success: localModuleStates[module.id]?.type === 'Success'
-														}}
-														<div class="border-l mb-2">
-															<!-- Recursively render child steps using FlowLogViewer -->
-															<FlowLogViewer
-																modules={subflow.modules}
-																{localModuleStates}
-																rootJob={subflowJob}
-																flowStatus={localModuleStates[module.id]?.type}
-																{expandedRows}
-																{allExpanded}
-																{showResultsInputs}
-																{toggleExpanded}
-																toggleExpandAll={undefined}
-																{workspaceId}
-																{render}
-																level={level + 1}
-																flowId={subflow.flowId}
-																flowSummary={subflow.label}
-																{onSelectedIteration}
-																{getSelectedIteration}
-															/>
-														</div>
-													{/each}
-													<!-- Show input arguments -->
-													{#if getSubflows(module).length === 0}
-														{#if showResultsInputs && isLeafStep && args && Object.keys(args).length > 0}
-															<div class="mb-2">
-																<!-- svelte-ignore a11y_click_events_have_key_events -->
-																<!-- svelte-ignore a11y_no_static_element_interactions -->
-																<div
-																	class="flex items-center gap-1 cursor-pointer hover:text-primary text-xs font-mono font-medium mb-1"
-																	onclick={() => toggleExpanded(`${module.id}-input`)}
-																>
-																	{#if isExpanded(`${module.id}-input`)}
-																		<ChevronDown size={8} />
-																	{:else}
-																		<ChevronRight size={8} />
-																	{/if}
-																	Input
-																</div>
-																{#if isExpanded(`${module.id}-input`)}
-																	<div class="pl-4">
-																		<ObjectViewer json={args} pureViewer={true} />
-																	</div>
-																{/if}
-															</div>
-														{/if}
+												{#if jobId}
+													<a
+														href={getJobLink(jobId ?? '')}
+														class="text-xs text-gray-400 hover:text-primary pl-1"
+														target="_blank"
+														rel="noopener noreferrer"
+													>
+														<ExternalLink size={12} />
+													</a>
+												{/if}
+											{/if}
+										</div>
+									{/snippet}
 
-														<!-- Show logs if they exist -->
-														{#if logs}
-															<LogViewer
-																content={logs}
-																jobId={jobId ?? ''}
-																isLoading={false}
-																small={true}
-																download={false}
-																noAutoScroll={true}
-																tag={undefined}
-																noPadding
-																wrapperClass="w-full mb-2 pr-2"
-															/>
-														{:else if jobId && !hasSubflows(module)}
-															<div class="mb-2">
-																<div class="text-xs text-tertiary font-mono">
-																	No logs available
-																</div>
+									{#if isCollapsible && isExpanded(module.id, isRunning)}
+										{@const args = localModuleStates[module.id]?.args}
+										{@const logs = localModuleStates[module.id]?.logs}
+										{@const result = localModuleStates[module.id]?.result}
+										{@const jobId = localModuleStates[module.id]?.job_id}
+										<div class="my-1 transition-all duration-200 ease-in-out border-l">
+											<!-- Show child steps if they exist -->
+											{#each getSubflows(module) as subflow}
+												{@const subflowJob = {
+													id: jobId,
+													type:
+														localModuleStates[module.id]?.type === 'Failure' ||
+														localModuleStates[module.id]?.type === 'Success'
+															? 'CompletedJob'
+															: ('QueuedJob' as Job['type']),
+													logs,
+													result,
+													args,
+													success: localModuleStates[module.id]?.type === 'Success'
+												}}
+												<div class="border-l mb-2">
+													<!-- Recursively render child steps using FlowLogViewer -->
+													<FlowLogViewer
+														modules={subflow.modules}
+														{localModuleStates}
+														rootJob={subflowJob}
+														flowStatus={localModuleStates[module.id]?.type}
+														{expandedRows}
+														{allExpanded}
+														{showResultsInputs}
+														{toggleExpanded}
+														toggleExpandAll={undefined}
+														{workspaceId}
+														{render}
+														level={level + 1}
+														flowId={subflow.flowId}
+														flowSummary={subflow.label}
+														{onSelectedIteration}
+														{getSelectedIteration}
+														{currentId}
+														bind:navigationChain={subloopNavigationChains[subflow.flowId]}
+														{select}
+													/>
+												</div>
+											{/each}
+
+											{#if getSubflows(module).length === 0}
+												<!-- Show input arguments -->
+												{#if showResultsInputs && isLeafStep && args && Object.keys(args).length > 0}
+													<FlowLogRow
+														id={`${module.id}-input`}
+														isCollapsible={true}
+														isRunning={false}
+														{isCurrent}
+														{isExpanded}
+														{toggleExpanded}
+														{select}
+													>
+														{#snippet label()}
+															<div class="flex items-center gap-2 grow min-w-0">
+																<ArrowDownFromLine size={10} />
+																<span class="text-xs font-mono">Input</span>
+															</div>
+														{/snippet}
+														{#if isExpanded(`${module.id}-input`)}
+															<div class="pl-4">
+																<ObjectViewer json={args} pureViewer={true} />
 															</div>
 														{/if}
+													</FlowLogRow>
+												{/if}
 
-														<!-- Show result if completed -->
+												<!-- Show logs if they exist -->
+												<!-- svelte-ignore a11y_click_events_have_key_events -->
+												<!-- svelte-ignore a11y_no_static_element_interactions -->
+												{#if logs}
+													<div onclick={() => select(`${module.id}-logs`)}>
+														<LogViewer
+															content={logs}
+															jobId={jobId ?? ''}
+															isLoading={false}
+															small={true}
+															download={false}
+															noAutoScroll={true}
+															tag={undefined}
+															noPadding
+															wrapperClass={twMerge(
+																'w-full mb-2 px-2',
+																isCurrent(`${module.id}-logs`)
+																	? 'border-l-2 border-l-gray-400 -ml-[2px]'
+																	: ''
+															)}
+															navigationId={`${module.id}-logs`}
+														/>
+													</div>
+												{:else if jobId && !hasSubflows(module)}
+													<div
+														class={twMerge(
+															'w-full mb-2 px-2',
+															isCurrent(`${module.id}-logs`)
+																? 'border-l-2 border-l-gray-400 -ml-[2px]'
+																: ''
+														)}
+													>
+														<div class="text-xs text-tertiary font-mono"> No logs available </div>
+													</div>
+												{/if}
 
-														{#if showResultsInputs && isLeafStep && result !== undefined && (status === 'Success' || status === 'Failure')}
-															<div class="mb-2 mt-2">
-																<!-- svelte-ignore a11y_click_events_have_key_events -->
-																<!-- svelte-ignore a11y_no_static_element_interactions -->
-																<div
-																	class="flex items-center gap-1 cursor-pointer hover:text-primary text-xs font-mono font-medium mb-1"
-																	onclick={() => toggleExpanded(`${module.id}-result`)}
-																>
-																	{#if isExpanded(`${module.id}-result`)}
-																		<ChevronDown size={8} />
-																	{:else}
-																		<ChevronRight size={8} />
-																	{/if}
-																	Result
-																</div>
-																{#if isExpanded(`${module.id}-result`)}
-																	<div class="pl-4">
-																		<ObjectViewer json={result} pureViewer={true} />
-																	</div>
-																{/if}
+												<!-- Show result if completed -->
+												{#if showResultsInputs && isLeafStep && result !== undefined && (status === 'Success' || status === 'Failure')}
+													<FlowLogRow
+														id={`${module.id}-result`}
+														isCollapsible={true}
+														isRunning={false}
+														{isCurrent}
+														{isExpanded}
+														{toggleExpanded}
+														{select}
+													>
+														{#snippet label()}
+															<div class="flex items-center gap-2 grow min-w-0">
+																<ArrowDownFromLine size={10} />
+																<span class="text-xs font-mono">Result</span>
+															</div>
+														{/snippet}
+														{#if isExpanded(`${module.id}-result`)}
+															<div class="pl-4">
+																<ObjectViewer json={result} pureViewer={true} />
 															</div>
 														{/if}
-													{/if}
-												</div>
-											{/if}
-										</div>
-									</li>
-								{/each}
-							{/if}
-
-							<!-- Flow result as last row entry -->
-							{#if showResultsInputs && flowInfo.result !== undefined && rootJob.type === 'CompletedJob'}
-								<li class="border-b flex">
-									<div class="py-2 leading-tight align-top">
-										<button
-											class="w-4 flex items-center justify-center text-xs text-tertiary hover:text-primary transition-colors"
-											onclick={() => toggleExpanded(`flow-${flowId}-result`)}
-										>
-											{#if isExpanded(`flow-${flowId}-result`)}
-												<ChevronDown size={8} />
-											{:else}
-												<ChevronRight size={8} />
+													</FlowLogRow>
+												{/if}
 											{/if}
-										</button>
-									</div>
-									<div class="w-full leading-tight">
-										<!-- svelte-ignore a11y_no_static_element_interactions -->
-										<!-- svelte-ignore a11y_click_events_have_key_events -->
-										<div
-											class="py-1 flex items-center justify-between pr-2 cursor-pointer"
-											onclick={() => toggleExpanded(`flow-${flowId}-result`)}
-										>
-											<div class="flex items-center gap-2 grow min-w-0">
-												<ArrowDownFromLine size={10} />
-												<span class="text-xs font-mono">Results</span>
-											</div>
 										</div>
+									{/if}
+								</FlowLogRow>
+							{/each}
+						{/if}
 
-										{#if isExpanded(`flow-${flowId}-result`)}
-											<div class="my-1 transition-all duration-200 ease-in-out">
-												<div class="pl-4">
-													<ObjectViewer json={flowInfo.result} pureViewer={true} />
-												</div>
-											</div>
-										{/if}
+						<!-- Flow result as last row entry -->
+						{#if showResultsInputs && flowInfo.result !== undefined && rootJob.type === 'CompletedJob'}
+							<FlowLogRow
+								id={`flow-${flowId}-result`}
+								isCollapsible={true}
+								isRunning={false}
+								{isCurrent}
+								{isExpanded}
+								{toggleExpanded}
+								{select}
+							>
+								{#snippet label()}
+									<div class="flex items-center gap-2 grow min-w-0">
+										<ArrowDownFromLine size={10} />
+										<span class="text-xs font-mono">Results</span>
 									</div>
-								</li>
-							{/if}
-						</ul>
-					</div>
-				{/if}
-			</div>
-		</li>
+								{/snippet}
+								<ObjectViewer json={flowInfo.result} pureViewer={true} />
+							</FlowLogRow>
+						{/if}
+					</ul>
+				</div>
+			{/if}
+		</FlowLogRow>
 	</ul>
 {/if}
 
@@ -653,8 +691,3 @@ function getSubflows(module) {
 		{/if}
 	</div>
 {/snippet}
-
-<style>
-	.transition-all {
-		transition: all 0.2s ease-in-out;
-	}</style>