windmill-components 1.504.5 → 1.510.1

package/package/components/graph/graphBuilder.svelte.js

@@ -1,7 +1,9 @@
 import {} from '@xyflow/svelte';
-import { getDependeeAndDependentComponents } from '../flows/flowExplorer';
+import { getAllModules, getDependeeAndDependentComponents } from '../flows/flowExplorer';
 import { dfsByModule } from '../flows/previousResults';
 import { defaultIfEmptyString } from '../../utils';
+import { getFlowModuleAssets } from '../assets/lib';
+import { assetDisplaysAsOutputInFlowGraph } from './renderers/nodes/AssetNode.svelte';
 export function isTriggerStep(module) {
     return (module?.value != undefined &&
         (module.value.type === 'script' || module.value.type === 'rawscript') &&
@@ -59,12 +61,17 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     insertable: extra.insertable,
                     editMode: extra.editMode,
                     isOwner: extra.isOwner,
-                    flowJob: extra.flowJob
+                    flowJob: extra.flowJob,
+                    assets: getFlowModuleAssets(module, extra.additionalAssetsMap)
                 },
                 type: 'module'
             });
             return module.id;
         }
+        // TODO : Do better than this
+        const nodeIdsWithOutputAssets = new Set(getAllModules(modules)
+            .filter((m) => getFlowModuleAssets(m, extra.additionalAssetsMap)?.some(assetDisplaysAsOutputInFlowGraph))
+            .map((m) => m.id));
         const parents = {};
         //
         function detectCycle(nodeId, visited, currentPath) {
@@ -119,10 +126,12 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     // If the index is -1, it means that the target module is not in the modules array, so we set it to the length of the array
                     index: index >= 0 ? index : (mods?.length ?? 0),
                     ...extra,
-                    insertable: extra.insertable && !options?.disableInsert && prefix == undefined
+                    insertable: extra.insertable && !options?.disableInsert && prefix == undefined,
+                    shouldOffsetInsertBtnDueToAssetNode: nodeIdsWithOutputAssets.has(sourceId)
                 }
             });
         }
+        const inputAssets = extra.additionalAssetsMap?.['Input'];
         const inputNode = {
             id: 'Input',
             type: 'input2',
@@ -139,7 +148,8 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 individualStepTests: extra.individualStepTests,
                 flowJob: extra.flowJob,
                 showJobStatus: extra.showJobStatus,
-                flowHasChanged: extra.flowHasChanged
+                flowHasChanged: extra.flowHasChanged,
+                ...(inputAssets ? { assets: inputAssets } : {})
             }
         };
         let triggerNode = undefined;
@@ -361,19 +371,35 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                             type: 'branchOneEnd'
                         };
                         nodes.push(endNode);
-                        // Add default branch
+                        // // Add default branch
+                        // const defaultBranch: NodeLayout = {
+                        // 	id: `${module.id}-default`,
+                        // 	data: {
+                        // 		offset: currentOffset,
+                        // 		label: 'Default',
+                        // 		id: module.id,
+                        // 		branchIndex: -1,
+                        // 		eventHandlers: eventHandlers,
+                        // 		branchOne: true,
+                        // 		...extra
+                        // 	},
+                        // 	type: 'noBranch'
+                        // }
                         const defaultBranch = {
-                            id: `${module.id}-default`,
+                            id: `${module.id}-branch-default`,
                             data: {
                                 offset: currentOffset,
                                 label: 'Default',
                                 id: module.id,
                                 branchIndex: -1,
                                 eventHandlers: eventHandlers,
-                                branchOne: true,
-                                ...extra
+                                insertable: extra.insertable,
+                                preLabel: undefined,
+                                flowModuleStates: extra.flowModuleStates,
+                                selected: false,
+                                modules: module.value.default
                             },
-                            type: 'noBranch'
+                            type: 'branchOneStart'
                         };
                         nodes.push(defaultBranch);
                         addEdge(module.id, defaultBranch.id, { rootId: module.id, branch: 0 }, prefix, {

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -4,18 +4,15 @@ import { ClipboardCopy, Hourglass } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { getStraightLinePath } from '../utils';
 import { twMerge } from 'tailwind-merge';
-import {} from '../../../flows/types';
-import { assetDisplaysAsOutputInFlowGraph, NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../nodes/AssetNode.svelte';
+import { NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../nodes/AssetNode.svelte';
 import { workspaceStore } from '../../../../stores';
 import FlowStatusWaitingForEvents from '../../../FlowStatusWaitingForEvents.svelte';
 const { useDataflow } = getContext('FlowGraphContext');
-const flowGraphAssetCtx = getContext('FlowGraphAssetContext');
 let { 
 // id,
 sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
 // style,
 data } = $props();
-const shouldOffsetInsertButtonDueToAssetNode = flowGraphAssetCtx?.val.assetsMap?.[data.sourceId]?.some(assetDisplaysAsOutputInFlowGraph);
 let [edgePath] = $derived(getBezierPath({
     sourceX,
     sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
@@ -37,7 +34,7 @@ const suspendStatus = $derived(data?.suspendStatus);
 
 <EdgeLabel
 	x={sourceX}
-	y={sourceY + 28 + (shouldOffsetInsertButtonDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
+	y={sourceY + 28 + (data.shouldOffsetInsertBtnDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
 	class="base-edge"
 	style=""
 >

package/package/components/graph/renderers/edges/BaseEdge.svelte.d.ts

@@ -22,6 +22,7 @@ type $$ComponentProps = EdgeProps & {
             job: Job;
             nb: number;
         }>>;
+        shouldOffsetInsertBtnDueToAssetNode?: boolean;
     };
 };
 declare const BaseEdge: import("svelte").Component<$$ComponentProps, {}, "">;

package/package/components/graph/renderers/nodes/AssetNode.svelte

@@ -2,19 +2,21 @@
 export const NODE_WITH_WRITE_ASSET_Y_OFFSET = 45;
 export const READ_ASSET_Y_OFFSET = -45;
 export const WRITE_ASSET_Y_OFFSET = 64;
-export const assetDisplaysAsInputInFlowGraph = (a) => !a.access_type || a.access_type === 'r' || a.access_type === 'rw';
-export const assetDisplaysAsOutputInFlowGraph = (a) => a.access_type === 'w' || a.access_type === 'rw';
+export const assetDisplaysAsInputInFlowGraph = (a) => !getAccessType(a) || getAccessType(a) === 'r' || getAccessType(a) === 'rw';
+export const assetDisplaysAsOutputInFlowGraph = (a) => getAccessType(a) === 'w' || getAccessType(a) === 'rw';
 let computeAssetNodesCache;
-export function computeAssetNodes(nodes, edges, assetsMap, extraData) {
-    if (nodes === computeAssetNodesCache?.[0] && deepEqual(assetsMap, computeAssetNodesCache?.[1]))
-        return computeAssetNodesCache[2];
+export function computeAssetNodes(nodes, edges) {
+    if (nodes === computeAssetNodesCache?.[0])
+        return computeAssetNodesCache[1];
     const MAX_ASSET_ROW_WIDTH = 300;
     const ASSETS_OVERFLOWED_NODE_WIDTH = 25;
     const allAssetNodes = [];
     const allAssetEdges = [];
     const yPosMap = {};
     for (const node of nodes) {
-        const assets = assetsMap?.[node.id] ?? [];
+        if (node.type !== 'module' && node.type !== 'input2')
+            continue;
+        const assets = node.data.assets ?? [];
         // Each asset can be displayed at the top and bottom
         // i.e once (R or W) or twice (RW)
         const inputAssets = assets.filter(assetDisplaysAsInputInFlowGraph);
@@ -167,30 +169,26 @@ export function computeAssetNodes(nodes, edges, assetsMap, extraData) {
         [...sortedNewNodes, ...allAssetNodes],
         [...edges, ...allAssetEdges]
     ];
-    computeAssetNodesCache = [nodes, clone(assetsMap), ret];
+    computeAssetNodesCache = [nodes, ret];
     return ret;
 }
 </script>
 
 <script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
 import { AlertTriangle } from 'lucide-svelte';
-import { assetEq, formatAssetKind } from '../../../assets/lib';
+import { assetEq, formatAssetKind, getAccessType } from '../../../assets/lib';
 import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 import ExploreAssetButton, { assetCanBeExplored } from '../../../ExploreAssetButton.svelte';
 import { Tooltip } from '../../../meltComponents';
 import { clone, pluralize } from '../../../../utils';
 import AssetGenericIcon from '../../../icons/AssetGenericIcon.svelte';
-import { deepEqual } from 'fast-equals';
 import { NODE } from '../../util';
 import { userStore } from '../../../../stores';
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
-const usageCount = $derived(Object.values(flowGraphAssetsCtx.val.assetsMap ?? {})
-    .flat()
-    .filter((asset) => assetEq(asset, data.asset)).length);
 let { data } = $props();
-const isSelected = $derived(assetEq(flowGraphAssetsCtx.val.selectedAsset, data.asset));
-const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataCache[data.asset.path]);
+const isSelected = $derived(assetEq(flowGraphAssetsCtx?.val.selectedAsset, data.asset));
+const cachedResourceMetadata = $derived(flowGraphAssetsCtx?.val.resourceMetadataCache[data.asset.path]);
 </script>
 
 <NodeWrapper>
@@ -202,8 +200,10 @@ const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataC
 					'bg-surface h-6 flex items-center gap-1.5 rounded-sm text-tertiary border overflow-clip',
 					isSelected ? 'bg-surface-secondary !border-surface-inverse' : 'border-transparent'
 				)}
-				onmouseenter={() => (flowGraphAssetsCtx.val.selectedAsset = data.asset)}
-				onmouseleave={() => (flowGraphAssetsCtx.val.selectedAsset = undefined)}
+				onmouseenter={() =>
+					flowGraphAssetsCtx && (flowGraphAssetsCtx.val.selectedAsset = data.asset)}
+				onmouseleave={() =>
+					flowGraphAssetsCtx && (flowGraphAssetsCtx.val.selectedAsset = undefined)}
 			>
 				<AssetGenericIcon
 					assetKind={data.asset.kind}
@@ -225,14 +225,17 @@ const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataC
 						asset={data.asset}
 						noText
 						buttonVariant="contained"
-						s3FilePicker={flowGraphAssetsCtx.val.s3FilePicker}
-						dbManagerDrawer={flowGraphAssetsCtx.val.dbManagerDrawer}
+						s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
+						dbManagerDrawer={flowGraphAssetsCtx?.val.dbManagerDrawer}
 						_resourceMetadata={cachedResourceMetadata}
 					/>
 				{/if}
 			</div>
 			<svelte:fragment slot="text">
-				Used in {pluralize(usageCount, 'step')}<br />
+				Used in {pluralize(
+					flowGraphAssetsCtx?.val.computeAssetsCount?.(data.asset) ?? -1,
+					'step'
+				)}<br />
 				<a
 					href={undefined}
 					class={twMerge(
@@ -243,7 +246,7 @@ const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataC
 					)}
 					onclick={() => {
 						if (data.asset.kind === 'resource')
-							flowGraphAssetsCtx.val.resourceEditorDrawer?.initEdit(data.asset.path)
+							flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
 					}}
 				>
 					{data.asset.path}

package/package/components/graph/renderers/nodes/AssetNode.svelte.d.ts

@@ -2,17 +2,12 @@ export declare const NODE_WITH_READ_ASSET_Y_OFFSET = 45;
 export declare const NODE_WITH_WRITE_ASSET_Y_OFFSET = 45;
 export declare const READ_ASSET_Y_OFFSET = -45;
 export declare const WRITE_ASSET_Y_OFFSET = 64;
-export declare const assetDisplaysAsInputInFlowGraph: (a: {
-    access_type?: AssetUsageAccessType;
-}) => boolean;
-export declare const assetDisplaysAsOutputInFlowGraph: (a: {
-    access_type?: AssetUsageAccessType;
-}) => boolean;
-export declare function computeAssetNodes(nodes: Node[], edges: Edge[], assetsMap: Record<string, AssetWithAccessType[]>, extraData: any): [Node[], Edge[]];
-import type { AssetN } from '../../graphBuilder.svelte';
-import { type AssetWithAccessType } from '../../../assets/lib';
+export declare const assetDisplaysAsInputInFlowGraph: (a: AssetWithAltAccessType) => boolean;
+export declare const assetDisplaysAsOutputInFlowGraph: (a: AssetWithAltAccessType) => boolean;
+export declare function computeAssetNodes(nodes: (Node & NodeLayout)[], edges: Edge[]): [(Node & NodeLayout)[], Edge[]];
+import type { AssetN, NodeLayout } from '../../graphBuilder.svelte';
+import { type AssetWithAltAccessType } from '../../../assets/lib';
 import type { Edge, Node } from '@xyflow/svelte';
-import type { AssetUsageAccessType } from '../../../../gen';
 interface Props {
     data: AssetN['data'];
 }

package/package/components/graph/renderers/nodes/AssetsOverflowedNode.svelte

@@ -10,7 +10,7 @@ import { assetEq } from '../../../assets/lib';
 let { data } = $props();
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let isOpen = $state(false);
-let includesSelected = $derived(data.overflowedAssets.some((asset) => assetEq(flowGraphAssetsCtx.val.selectedAsset, asset)));
+let includesSelected = $derived(data.overflowedAssets.some((asset) => assetEq(flowGraphAssetsCtx?.val.selectedAsset, asset)));
 let wasOpenedBecauseOfExternalSelected = false;
 $effect(() => {
     if (includesSelected && !isOpen) {

package/package/components/graph/util.js

@@ -2,7 +2,7 @@ export const NODE = {
     width: 275,
     height: 34,
     gap: {
-        horizontal: 40,
+        horizontal: 50,
         vertical: 50
     }
 };

package/package/components/home/ItemsList.svelte

@@ -158,6 +158,8 @@ let collapseAll = $state(true);
 let owners = $derived(Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort());
 $effect(() => {
     if ($userStore && $workspaceStore) {
+        ;
+        [archived, includeWithoutMain];
         untrack(() => {
             loadScripts(includeWithoutMain);
             loadFlows();

package/package/components/icons/AssetGenericIcon.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { Pyramid } from 'lucide-svelte';
 import AssetResIcon from './AssetResIcon.svelte';
 import AssetS3Icon from './AssetS3Icon.svelte';
-import AssetVarIcon from './AssetVarIcon.svelte';
 let { assetKind, fill, size, class: className = '' } = $props();
 </script>
 
@@ -9,8 +8,6 @@ let { assetKind, fill, size, class: className = '' } = $props();
 	<AssetS3Icon {fill} width={size} height={size} class={className} />
 {:else if assetKind == 'resource'}
 	<AssetResIcon {fill} width={size} height={size} class={className} />
-{:else if assetKind == 'variable'}
-	<AssetVarIcon {fill} width={size} height={size} class={className} />
 {:else}
 	<Pyramid {size} color={fill} class={'!fill-none ' + className} />
 {/if}

package/package/components/jobs/JobPreview.svelte

@@ -4,7 +4,7 @@
 <script lang="ts">import { onDestroy, tick } from 'svelte';
 import { fade } from 'svelte/transition';
 import {} from '../../gen';
-import TestJobLoader from '../TestJobLoader.svelte';
+import JobLoader from '../JobLoader.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import { writable } from 'svelte/store';
@@ -19,7 +19,7 @@ let job = $state(undefined);
 let hovered = $state(false);
 let timeout;
 let result = $state();
-let testJobLoader = $state();
+let jobLoader = $state();
 let loaded = false;
 let wrapper = $state();
 let popupOnTop = $state(true);
@@ -31,7 +31,11 @@ async function instantOpen() {
         openStore.set(id);
         if (!loaded) {
             await tick();
-            testJobLoader?.watchJob(id);
+            jobLoader?.watchJob(id, {
+                done(job) {
+                    onDone(job);
+                }
+            });
         }
     }
     else {
@@ -58,8 +62,8 @@ function staggeredClose() {
         close();
     }, loaded ? 100 : 300);
 }
-function onDone(event) {
-    job = event.detail;
+function onDone(njob) {
+    job = njob;
     result = job['result'];
     loaded = true;
 }
@@ -70,7 +74,7 @@ onDestroy(() => {
 
 <svelte:window onkeydown={({ key }) => ['Escape', 'Esc'].includes(key) && close()} />
 {#if hovered}
-	<TestJobLoader bind:job bind:this={testJobLoader} on:done={onDone} />
+	<JobLoader bind:job bind:this={jobLoader} />
 {/if}
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -9,7 +9,7 @@ import RawAppInputsSpecEditor from './RawAppInputsSpecEditor.svelte';
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import SchemaForm from '../SchemaForm.svelte';
 import RunnableJobPanelInner from '../apps/editor/RunnableJobPanelInner.svelte';
-import TestJobLoader from '../TestJobLoader.svelte';
+import JobLoader from '../JobLoader.svelte';
 let { runnable = $bindable(), id, appPath } = $props();
 const dispatch = createEventDispatcher();
 async function fork(nrunnable) {
@@ -37,7 +37,7 @@ function getSchema(runnable) {
     }
     return {};
 }
-let testJobLoader = $state();
+let jobLoader = $state();
 let testJob = $state();
 let testIsLoading = $state(false);
 let scriptProgress = $state(0);
@@ -54,15 +54,15 @@ function onFieldsChange(fields) {
 async function testPreview() {
     selectedTab = 'test';
     if (runnable?.type == 'runnableByName' && runnable.inlineScript?.language != 'frontend') {
-        await testJobLoader?.runPreview(appPath + '/' + id, runnable.inlineScript?.content ?? '', runnable.inlineScript?.language, args, undefined);
+        await jobLoader?.runPreview(appPath + '/' + id, runnable.inlineScript?.content ?? '', runnable.inlineScript?.language, args, undefined);
     }
     else if (runnable?.type == 'runnableByPath') {
-        if (testJobLoader && runnable?.type == 'runnableByPath') {
+        if (jobLoader && runnable?.type == 'runnableByPath') {
             if (runnable.runType == 'flow') {
-                await testJobLoader.runFlowByPath(runnable.path, args);
+                await jobLoader.runFlowByPath(runnable.path, args);
             }
             else if (runnable.runType == 'script' || runnable.runType == 'hubscript') {
-                await testJobLoader.runScriptByPath(runnable.path, args);
+                await jobLoader.runScriptByPath(runnable.path, args);
             }
         }
     }
@@ -74,9 +74,10 @@ $effect(() => {
 });
 </script>
 
-<TestJobLoader
+<JobLoader
+	noCode={true}
 	bind:scriptProgress
-	bind:this={testJobLoader}
+	bind:this={jobLoader}
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
 />
@@ -97,8 +98,8 @@ $effect(() => {
 						isLoading={testIsLoading}
 						onRun={testPreview}
 						onCancel={async () => {
-							if (testJobLoader) {
-								await testJobLoader.cancelJob()
+							if (jobLoader) {
+								await jobLoader.cancelJob()
 							}
 						}}
 						on:delete
@@ -116,8 +117,8 @@ $effect(() => {
 					isLoading={testIsLoading}
 					onRun={testPreview}
 					onCancel={async () => {
-						if (testJobLoader) {
-							await testJobLoader.cancelJob()
+						if (jobLoader) {
+							await jobLoader.cancelJob()
 						}
 					}}
 				/>

package/package/components/runs/BatchReRunOptionsPane.svelte

@@ -12,6 +12,7 @@ import Alert from '../common/alert/Alert.svelte';
 import { batchReRunDefaultPropertyExpr, buildExtraLibForBatchReruns, mergeSchemasForBatchReruns } from '../jobs/batchReruns';
 import Toggle from '../Toggle.svelte';
 import { TriangleAlert } from 'lucide-svelte';
+import { readFieldsRecursively } from '../../utils';
 let { selectedIds, options = $bindable() } = $props();
 let selected = $state();
 $effect(() => {
@@ -103,7 +104,10 @@ function propertyAlwaysHasSameType(propertyName, group) {
 const selectedUsesLatestSchema = $derived(!!selected &&
     (selected?.kind === 'flow' ||
         (options[selected.kind][selected.script_path]?.use_latest_version ?? false)));
-const jobGroupsPromise = $derived(selectedIds && untrack(() => fetchJobGroups()));
+const jobGroupsPromise = $derived.by(() => {
+    readFieldsRecursively(selectedIds);
+    return untrack(() => fetchJobGroups());
+});
 </script>
 
 <div class="flex-1 flex flex-col">

package/package/components/runs/JobPreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { base } from '../../base';
 import { ConcurrencyGroupsService } from '../../gen';
-import TestJobLoader from '../TestJobLoader.svelte';
+import JobLoader from '../JobLoader.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import LogViewer from '../LogViewer.svelte';
@@ -14,13 +14,14 @@ import { workspaceStore } from '../../stores';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
 import Popover from '../Popover.svelte';
 import { isFlowPreview, isScriptPreview, truncateRev } from '../../utils';
-import { createEventDispatcher, untrack } from 'svelte';
+import { createEventDispatcher, setContext, untrack } from 'svelte';
 import { ListFilter } from 'lucide-svelte';
+import FlowAssetsHandler, { initFlowGraphAssetsCtx } from '../flows/FlowAssetsHandler.svelte';
+import JobAssetsViewer from '../assets/JobAssetsViewer.svelte';
 let { id, blankLink = false, workspace } = $props();
 let job = $state(undefined);
 let result = $state();
-function onDone(event) {
-    job = event.detail;
+function onDone(job) {
     result = job['result'];
 }
 let currentJob = $state(undefined);
@@ -31,6 +32,7 @@ async function getConcurrencyKey(job) {
     concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id });
 }
 let viewTab = $state('result');
+setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => job?.raw_flow?.modules ?? [] }));
 function asWorkflowStatus(x) {
     return x;
 }
@@ -41,24 +43,24 @@ $effect(() => {
     }
 });
 $effect(() => {
-    id && testJobLoader && untrack(() => testJobLoader?.watchJob(id));
+    id &&
+        jobLoader &&
+        untrack(() => jobLoader?.watchJob(id, {
+            done(x) {
+                onDone(x);
+            }
+        }));
 });
 $effect(() => {
-    job?.logs == undefined && job && viewTab == 'logs' && untrack(() => testJobLoader?.getLogs());
+    job?.logs == undefined && job && viewTab == 'logs' && untrack(() => jobLoader?.getLogs());
 });
 $effect(() => {
     job?.id && lastJobId !== job.id && untrack(() => job && getConcurrencyKey(job));
 });
-let testJobLoader = $state(undefined);
+let jobLoader = $state(undefined);
 </script>
 
-<TestJobLoader
-	lazyLogs
-	workspaceOverride={workspace}
-	bind:job={currentJob}
-	bind:this={testJobLoader}
-	on:done={onDone}
-/>
+<JobLoader lazyLogs workspaceOverride={workspace} bind:job={currentJob} bind:this={jobLoader} />
 
 <div class="p-4 flex flex-col gap-2 items-start h-full">
 	{#if job}
@@ -165,9 +167,9 @@ let testJobLoader = $state(undefined);
 		{/if}
 
 		<div class=" w-full rounded-md min-h-full">
-			{#if job?.is_flow_step == false && job?.flow_status && (isScriptPreview(job?.job_kind) || job?.job_kind == 'script') && !(typeof job.flow_status == 'object' && '_metadata' in job.flow_status)}
+			{#if job?.workflow_as_code_status}
 				<WorkflowTimeline
-					flow_status={asWorkflowStatus(job.flow_status)}
+					flow_status={asWorkflowStatus(job.workflow_as_code_status)}
 					flowDone={job.type == 'CompletedJob'}
 				/>
 			{/if}
@@ -176,6 +178,7 @@ let testJobLoader = $state(undefined);
 				<Tabs bind:selected={viewTab}>
 					<Tab size="xs" value="result">Result</Tab>
 					<Tab size="xs" value="logs">Logs</Tab>
+					<Tab size="xs" value="assets">Assets</Tab>
 					{#if isScriptPreview(job?.job_kind)}
 						<Tab size="xs" value="code">Code</Tab>
 					{/if}
@@ -189,6 +192,8 @@ let testJobLoader = $state(undefined);
 								<FlowStatusViewer jobId={job.id} workspaceId={job.workspace_id} />
 							</div>
 						</div>
+					{:else if viewTab == 'assets'}
+						<JobAssetsViewer {job} />
 					{:else}
 						<div class="flex flex-col border rounded-md p-2 mt-2 h-full overflow-auto">
 							{#if viewTab == 'logs'}
@@ -247,3 +252,8 @@ let testJobLoader = $state(undefined);
 		</div>
 	{/if}
 </div>
+<FlowAssetsHandler
+	modules={job?.raw_flow?.modules ?? []}
+	enableDbExplore
+	enablePathScriptAndFlowAssets
+/>

package/package/components/runs/{JobLoader.svelte.d.ts → JobsLoader.svelte.d.ts}

@@ -40,9 +40,9 @@ interface Props {
     perPage?: number | undefined;
     allowWildcards?: boolean;
 }
-declare const JobLoader: import("svelte").Component<Props, {
+declare const JobsLoader: import("svelte").Component<Props, {
     loadExtraJobs: () => Promise<boolean>;
     loadJobs: (nMinTs: string | undefined, nMaxTs: string | undefined, reset: boolean, shouldGetCount?: boolean) => Promise<void>;
 }, "jobs" | "loading" | "minTs" | "maxTs" | "jobKinds" | "queue_count" | "suspended_count" | "completedJobs" | "externalJobs" | "extendedJobs">;
-type JobLoader = ReturnType<typeof JobLoader>;
-export default JobLoader;
+type JobsLoader = ReturnType<typeof JobsLoader>;
+export default JobsLoader;

package/package/components/runs/NoWorkerWithTagWarning.svelte

@@ -2,7 +2,7 @@
 import { AlertTriangle } from 'lucide-svelte';
 import Popover from '../Popover.svelte';
 import { onDestroy } from 'svelte';
-let { tag } = $props();
+let { tag, tagLabel = undefined } = $props();
 let noWorkerWithTag = $state(false);
 let timeout = undefined;
 let visible = true;
@@ -35,7 +35,7 @@ onDestroy(() => {
 	<Popover notClickable placement="top">
 		<AlertTriangle size={16} class="text-yellow-500" />
 		{#snippet text()}
-			No worker with tag <b>{tag}</b> is currently running.
+			No worker with {tagLabel ?? 'tag'} <b>{tag}</b> is currently running.
 		{/snippet}
 	</Popover>
 {/if}

package/package/components/runs/NoWorkerWithTagWarning.svelte.d.ts

@@ -1,5 +1,6 @@
 interface Props {
     tag: string;
+    tagLabel?: string;
 }
 declare const NoWorkerWithTagWarning: import("svelte").Component<Props, {}, "">;
 type NoWorkerWithTagWarning = ReturnType<typeof NoWorkerWithTagWarning>;

package/package/components/runs/RunsFilter.svelte.d.ts

@@ -40,6 +40,6 @@ declare const RunsFilter: $$__sveltets_2_IsomorphicComponent<Props, {
     successChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "path" | "tag" | "success" | "worker" | "folder" | "user" | "label" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
+}, {}, {}, "path" | "tag" | "success" | "worker" | "label" | "folder" | "user" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
 type RunsFilter = InstanceType<typeof RunsFilter>;
 export default RunsFilter;