windmill-components 1.532.0 → 1.542.4

package/package/components/FlowLogViewer.svelte.d.ts

@@ -1,6 +1,7 @@
 import FlowLogViewer from './FlowLogViewer.svelte';
 import type { FlowModule, FlowStatusModule, Job } from '../gen';
 import type { GraphModuleState } from './graph/model';
+import type { NavigationChain } from '../keyboardChain';
 type RootJobData = Partial<Job>;
 interface Props {
     modules: FlowModule[];
@@ -28,7 +29,10 @@ interface Props {
     getSelectedIteration: (stepId: string) => number;
     flowSummary?: string;
     mode?: 'flow' | 'aiagent';
+    currentId?: string | null;
+    navigationChain?: NavigationChain;
+    select: (id: string) => void;
 }
-declare const FlowLogViewer: import("svelte").Component<Props, {}, "">;
+declare const FlowLogViewer: import("svelte").Component<Props, {}, "navigationChain">;
 type FlowLogViewer = ReturnType<typeof FlowLogViewer>;
 export default FlowLogViewer;

package/package/components/FlowLogViewerWrapper.svelte

@@ -7,6 +7,9 @@ let { job, localModuleStates, workspaceId, render, onSelectedIteration, mode = '
 let expandedRows = $state({});
 let allExpanded = $state(false);
 let showResultsInputs = $state(true);
+// Keyboard navigation state - incremental like expandedRows
+let currentId = $state('flow-root');
+let navigationChain = $state({});
 let moduleTracker = new ChangeTracker($state.snapshot(job.raw_flow?.modules ?? []));
 $effect(() => {
     readFieldsRecursively(job.raw_flow?.modules ?? []);
@@ -29,9 +32,46 @@ function toggleExpandAll() {
     allExpanded = !allExpanded;
     expandedRows = {};
 }
+// Keyboard event handler using navigation links
+function handleKeydown(event) {
+    if (!currentId && job.raw_flow?.modules) {
+        currentId = 'flow-root';
+    }
+    else if (!currentId) {
+        return;
+    }
+    switch (event.key) {
+        case 'ArrowDown':
+            event.preventDefault();
+            const downId = navigationChain[currentId]?.downId;
+            if (downId) {
+                currentId = downId;
+            }
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            const upId = navigationChain[currentId]?.upId;
+            if (upId) {
+                currentId = upId;
+            }
+            break;
+        case 'Enter':
+            event.preventDefault();
+            toggleExpanded(currentId);
+            break;
+    }
+}
+function select(id) {
+    currentId = id;
+}
 </script>
 
-<div class="w-full rounded-md overflow-hidden border">
+<div
+	class="w-full rounded-md overflow-hidden border focus:border-gray-400 dark:focus:border-gray-400"
+	role="tree"
+	tabindex="0"
+	onkeydown={handleKeydown}
+>
 	<FlowLogViewer
 		{modules}
 		{localModuleStates}
@@ -48,5 +88,8 @@ function toggleExpandAll() {
 		flowId="root"
 		flowStatus={undefined}
 		{mode}
+		{currentId}
+		bind:navigationChain
+		{select}
 	/>
 </div>

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>;
-}, "job" | "jobId" | "previewArgs">;
+}, "job" | "previewArgs" | "jobId">;
 type FlowLoopIterationPreview = InstanceType<typeof FlowLoopIterationPreview>;
 export default FlowLoopIterationPreview;

package/package/components/FlowPreviewContent.svelte

@@ -67,7 +67,7 @@ export async function runPreview(args, restartedFrom) {
         jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
         isRunning = true;
         if (inputSelected) {
-            savedArgs = previewArgs.val;
+            savedArgs = $state.snapshot(previewArgs.val);
             inputSelected = undefined;
         }
         onRunPreview?.();
@@ -92,7 +92,7 @@ function onKeyDown(event) {
                 if (preventEscape) {
                     selectInput(undefined);
                     event.preventDefault();
-                    event.stopPropagation;
+                    event.stopPropagation();
                 }
                 break;
         }
@@ -423,7 +423,7 @@ export function flowHasChanged() {
 									schema={flowStore.val.schema}
 									bind:args={previewArgs.val}
 									on:change={() => {
-										savedArgs = previewArgs.val
+										savedArgs = $state.snapshot(previewArgs.val)
 									}}
 									bind:isValid
 									helperScript={flowStore.val.schema?.['x-windmill-dyn-select-code'] &&

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" | "job" | "jobId" | "scrollTop" | "localModuleStates" | "rightColumnSelect" | "localDurationStatuses" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
+}, "initial" | "preventEscape" | "job" | "scrollTop" | "jobId" | "localModuleStates" | "rightColumnSelect" | "localDurationStatuses" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;

package/package/components/FlowStatusViewer.svelte

@@ -43,6 +43,8 @@ let refreshGlobal = async (moduleId, clear, root) => {
 let updateGlobalRefresh = (moduleId, updateFn) => {
     globalRefreshes[moduleId] = [...(globalRefreshes[moduleId] ?? []), updateFn];
 };
+let storedToolCallJobs = $state({});
+let toolCallIndicesToLoad = $state([]);
 </script>
 
 <FlowStatusViewerInner
@@ -74,4 +76,30 @@ let updateGlobalRefresh = (moduleId, updateFn) => {
 	isNodeSelected={true}
 	{refreshGlobal}
 	{updateGlobalRefresh}
+	toolCallStore={{
+		getStoredToolCallJob: (storeKey: string) => storedToolCallJobs[storeKey],
+		setStoredToolCallJob: (storeKey: string, job: Job) => {
+			storedToolCallJobs[storeKey] = job
+		},
+		getLocalToolCallJobs: (prefix: string) => {
+			// we return a map from tool call index to job
+			// to do so, we filter the storedToolCallJobs object by the prefix and we make sure what's left in the key is a tool call index: 2 part of format agentModuleId-toolCallIndex
+			// and not a further nested tool call index
+			return Object.fromEntries(
+				Object.entries(storedToolCallJobs)
+					.filter(
+						([key]) => key.startsWith(prefix) && key.replace(prefix, '').split('-').length === 2
+					)
+					.map(([key, job]) => [Number(key.replace(prefix, '').split('-').pop()), job])
+			)
+		},
+		isToolCallToBeLoaded: (storeKey: string) => {
+			return toolCallIndicesToLoad.includes(storeKey)
+		},
+		addToolCallToLoad: (storeKey: string) => {
+			if (!toolCallIndicesToLoad.includes(storeKey)) {
+				toolCallIndicesToLoad.push(storeKey)
+			}
+		}
+	}}
 />

package/package/components/FlowStatusViewerInner.svelte

@@ -16,6 +16,7 @@ import { ChevronDown, Hourglass } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
 import FlowTimeline from './FlowTimeline.svelte';
 import { dfs } from './flows/dfs';
+import { dfs as dfsPreviousResults } from './flows/previousResults';
 import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
@@ -27,8 +28,9 @@ import { createState } from '../svelte5Utils.svelte';
 import JobLoader from './JobLoader.svelte';
 import { writable } from 'svelte/store';
 import { AI_TOOL_CALL_PREFIX, AI_TOOL_MESSAGE_PREFIX, getToolCallId } from './graph/renderers/nodes/AIToolNode.svelte';
+import JobAssetsViewer from './assets/JobAssetsViewer.svelte';
 let { 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 = [], globalIterationBounds, 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 } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], globalIterationBounds, 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);
 let resultStreams = $state({});
 if (onResultStreamUpdate == undefined) {
@@ -660,9 +662,7 @@ function loadPreviousIters(innerKey, lenToAdd) {
 }
 let stepDetail = $state(undefined);
 let storedListJobs = $state({});
-let storedToolCallJobs = $state({});
 let selectedToolCall = $state(undefined);
-let toolCallIndicesToLoad = $state([]);
 let wrapperHeight = $state(0);
 function removeFailureNode(id, parent_module) {
     if (id?.startsWith('failure-') && parent_module) {
@@ -689,7 +689,7 @@ function allModulesForTimeline(modules, expandedSubflows) {
             }
             let nprefix = buildPrefix(prefix, oid);
             return fms
-                ? rec(dfs(fms, (x) => x.id.startsWith('subflow:') ? x.id : buildSubflowKey(x.id, nprefix)), nprefix)
+                ? rec(dfs(fms, (x) => (x.id.startsWith('subflow:') ? x.id : buildSubflowKey(x.id, nprefix)), { skipToolNodes: true }), nprefix)
                 : [];
         }));
     }
@@ -734,6 +734,11 @@ async function onSelectedIteration(detail) {
             selectedForLoopSetManually: false
         });
     }
+    if (selectedNode?.startsWith(AI_TOOL_CALL_PREFIX)) {
+        const [, agentModuleId, toolCallIndex, _] = selectedNode.split('-');
+        const parentLoopsPrefix = getParentLoopsPrefix(agentModuleId);
+        toolCallStore?.addToolCallToLoad(parentLoopsPrefix + agentModuleId + '-' + toolCallIndex);
+    }
 }
 $effect(() => {
     flowJobIds?.moduleId && untrack(() => onFlowModuleId());
@@ -761,6 +766,35 @@ $effect(() => {
 let selected = $derived(isListJob ? 'sequence' : 'graph');
 let animateLogsTab = $state(false);
 let noLogs = $derived(graphTabOpen && !isNodeSelected);
+/**
+ * Returns a string like "forloopmodid1-{iter1}-forloopmodid2-{iter2}-forloopmodid3-{iter3}-"
+ * that can be used to prefix tool call store keys for nested tool calls.
+ */
+function getParentLoopsPrefix(modId) {
+    if (job?.raw_flow) {
+        const indices = [];
+        const parents = dfsPreviousResults(modId, { value: job?.raw_flow, summary: '' }, true);
+        for (const parent of parents) {
+            if (parent.value.type === 'forloopflow' || parent.value.type === 'whileloopflow') {
+                const state = localModuleStates[parent.id];
+                if (state?.selectedForloopIndex !== undefined) {
+                    indices.push(parent.id + '-' + state.selectedForloopIndex.toString());
+                }
+            }
+        }
+        indices.reverse();
+        return indices.length > 0 ? indices.join('-') + '-' : '';
+    }
+    return '';
+}
+// Set all tabs content to the same height to prevent layout jumps
+let tabsHeight = $state({
+    sequenceHeight: 0,
+    logsHeight: 0,
+    assetsHeight: 0,
+    graphHeight: 0
+});
+let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsHeight, tabsHeight.assetsHeight, tabsHeight.graphHeight));
 </script>
 
 <JobLoader workspaceOverride={workspaceId} {noLogs} noCode bind:this={jobLoader} />
@@ -839,12 +873,17 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 							: ''}><span class="font-semibold">Logs</span></Tab
 					>
 					<Tab value="sequence"><span class="font-semibold">Details</span></Tab>
+					<Tab value="assets"><span class="font-semibold">Assets</span></Tab>
 				</Tabs>
 			{:else}
 				<div class="h-[30px]"></div>
 			{/if}
 		{/if}
-		<div class="{selected != 'sequence' ? 'hidden' : ''} max-w-7xl mx-auto">
+		<div
+			class="{selected != 'sequence' ? 'hidden' : ''} max-w-7xl mx-auto"
+			bind:clientHeight={tabsHeight.sequenceHeight}
+			style="min-height: {minTabHeight}px"
+		>
 			{#if isListJob}
 				{@const sliceFrom =
 					globalIterationBounds[buildSubflowKey(flowJobIds?.moduleId ?? '', prefix)]
@@ -895,6 +934,10 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 							{@const forloopIsSelected =
 								forloop_selected == loopJobId ||
 								(innerModule?.type != 'forloopflow' && innerModule?.type != 'whileloopflow')}
+							{@const forLoopStoreKeyPrefix =
+								innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow'
+									? (flowJobIds?.moduleId ?? '') + '-' + j + '-'
+									: ''}
 							<!-- <LogId id={loopJobId} /> -->
 							<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 								<FlowStatusViewerInner
@@ -929,6 +972,18 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 									graphTabOpen={selected == 'graph' && graphTabOpen}
 									isNodeSelected={forloop_selected == loopJobId}
 									{globalIterationBounds}
+									toolCallStore={{
+										getStoredToolCallJob: (storeKey: string) =>
+											toolCallStore?.getStoredToolCallJob(forLoopStoreKeyPrefix + storeKey),
+										setStoredToolCallJob: (storeKey: string, job: Job) =>
+											toolCallStore?.setStoredToolCallJob(forLoopStoreKeyPrefix + storeKey, job),
+										getLocalToolCallJobs: (prefix: string) =>
+											toolCallStore?.getLocalToolCallJobs(forLoopStoreKeyPrefix + prefix) ?? {},
+										addToolCallToLoad: (storeKey: string) =>
+											toolCallStore?.addToolCallToLoad(forLoopStoreKeyPrefix + storeKey),
+										isToolCallToBeLoaded: (storeKey: string) =>
+											toolCallStore?.isToolCallToBeLoaded(forLoopStoreKeyPrefix + storeKey) ?? false
+									}}
 								/>
 							</div>
 						{/if}
@@ -1088,12 +1143,17 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 										graphTabOpen={selected == 'graph' && graphTabOpen}
 										isNodeSelected={localModuleStates?.[selectedNode ?? '']?.job_id == mod.job}
 										{globalIterationBounds}
+										{toolCallStore}
 									/>
-									{#if mod.agent_actions && mod.agent_actions.length > 0}
+									{#if mod.agent_actions && mod.agent_actions.length > 0 && mod.id}
+										{@const storeKeyPrefix = getParentLoopsPrefix(mod.id)}
 										{#each mod.agent_actions as agentAction, j}
-											{#if agentAction.type === 'tool_call' && mod.id}
+											{#if agentAction.type === 'tool_call'}
 												{@const toolCallId = getToolCallId(j, mod.id, agentAction.module_id)}
-												{@const isSelected = selectedToolCall === j}
+												{@const localToolCallKey = mod.id + '-' + j}
+												{@const storeKey = storeKeyPrefix + localToolCallKey}
+												{@const storedToolCallJob = toolCallStore?.getStoredToolCallJob(storeKey)}
+												{@const isSelected = localToolCallKey === selectedToolCall}
 												<Button
 													variant={isSelected ? 'contained' : 'border'}
 													color={mod.agent_actions_success?.[j] === false
@@ -1103,10 +1163,10 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 															: 'light'}
 													btnClasses="w-full flex justify-start"
 													on:click={async () => {
-														if (selectedToolCall == j) {
+														if (isSelected) {
 															selectedToolCall = undefined
 														} else {
-															selectedToolCall = j
+															selectedToolCall = localToolCallKey
 														}
 													}}
 													endIcon={{
@@ -1118,7 +1178,7 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 														Tool call: {agentAction.function_name}
 													</span>
 												</Button>
-												{#if isSelected || storedToolCallJobs[j] || toolCallIndicesToLoad.includes(j)}
+												{#if isSelected || storedToolCallJob || toolCallStore?.isToolCallToBeLoaded(storeKey)}
 													<FlowStatusViewerInner
 														topModuleStates={getTopModuleStates}
 														{refreshGlobal}
@@ -1136,11 +1196,11 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 														{subflowParentsDurationStatuses}
 														{isSelectedBranch}
 														jobId={agentAction.job_id}
-														job={storedToolCallJobs[j]}
-														initialJob={storedToolCallJobs[j]}
+														job={storedToolCallJob}
+														initialJob={storedToolCallJob}
 														{reducedPolling}
 														onJobsLoaded={({ job, force }) => {
-															storedToolCallJobs[j] = job
+															toolCallStore?.setStoredToolCallJob(storeKey, job)
 															onJobsLoadedInner({ id: toolCallId } as FlowStatusModule, job, force)
 														}}
 														loadExtraLogs={(logs) => {
@@ -1172,7 +1232,11 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 				<div class="p-2 text-tertiary text-sm italic">Empty flow</div>
 			{/if}
 		</div>
-		<div class="{selected != 'logs' ? 'hidden' : ''}  mx-auto h-[800px]">
+		<div
+			class="{selected != 'logs' ? 'hidden' : ''}  mx-auto"
+			bind:clientHeight={tabsHeight.logsHeight}
+			style="min-height: {minTabHeight}px"
+		>
 			<FlowLogViewerWrapper
 				{job}
 				{localModuleStates}
@@ -1181,10 +1245,23 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 				{onSelectedIteration}
 			/>
 		</div>
+		{#if selected == 'assets' && render}
+			<div
+				class="p-2"
+				bind:clientHeight={tabsHeight.assetsHeight}
+				style="min-height: {minTabHeight}px"
+			>
+				<JobAssetsViewer {job} />
+			</div>
+		{/if}
 	</div>
 	{#if render}
 		{#if job.raw_flow && !isListJob}
-			<div class="{selected != 'graph' ? 'hidden' : ''} grow mt-4">
+			<div
+				class="{selected != 'graph' ? 'hidden' : ''} grow mt-4"
+				bind:clientHeight={tabsHeight.graphHeight}
+				style="min-height: {minTabHeight}px"
+			>
 				<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">
@@ -1231,11 +1308,11 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 										stepDetail = mod
 										selectedNode = e
 										if (e.startsWith(AI_TOOL_CALL_PREFIX)) {
-											const [_prefix, _agentModuleId, j, _toolModuleId] = e.split('-')
+											const [_prefix, agentModuleId, j, _toolModuleId] = e.split('-')
+											const parentLoopsPrefix = getParentLoopsPrefix(agentModuleId)
 											const jIdx = Number(j)
-											if (!toolCallIndicesToLoad.includes(jIdx)) {
-												toolCallIndicesToLoad.push(jIdx)
-											}
+											const storeKey = parentLoopsPrefix + agentModuleId + '-' + jIdx
+											toolCallStore?.addToolCallToLoad(storeKey)
 										}
 									}
 								} else {
@@ -1325,6 +1402,7 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 											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-tertiary"
 												>Result of step as collection of all subflows</span
@@ -1389,7 +1467,7 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 											logs={node.logs}
 											downloadLogs={!hideDownloadLogs}
 											aiAgentStatus={agentTools &&
-											node.job_id &&
+											node?.job_id &&
 											(node.type === 'Success' || node.type === 'Failure')
 												? {
 														tools: agentTools,
@@ -1401,9 +1479,14 @@ let noLogs = $derived(graphTabOpen && !isNodeSelected);
 															success: node.type === 'Success',
 															type: 'CompletedJob'
 														},
-														storedToolCallJobs,
+														storedToolCallJobs: module
+															? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
+															: undefined,
 														onToolJobLoaded: (job, idx) => {
-															storedToolCallJobs[idx] = job
+															if (module) {
+																const storeKey = parentLoopsPrefix + module.id + '-' + idx
+																toolCallStore?.setStoredToolCallJob(storeKey, job)
+															}
 														}
 													}
 												: undefined}

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

@@ -57,6 +57,13 @@ interface Props {
     onDone?: ({ job }: {
         job: CompletedJob;
     }) => void;
+    toolCallStore?: {
+        getStoredToolCallJob: (storeKey: string) => Job | undefined;
+        setStoredToolCallJob: (storeKey: string, job: Job) => void;
+        getLocalToolCallJobs: (prefix: string) => Record<number, Job>;
+        isToolCallToBeLoaded: (storeKey: string) => boolean;
+        addToolCallToLoad: (storeKey: string) => void;
+    };
 }
 declare const FlowStatusViewerInner: import("svelte").Component<Props, {}, "job" | "localModuleStates" | "selectedNode" | "rightColumnSelect" | "localDurationStatuses">;
 type FlowStatusViewerInner = ReturnType<typeof FlowStatusViewerInner>;

package/package/components/FolderPicker.svelte

@@ -40,7 +40,7 @@ async function addFolder() {
 loadFolders();
 </script>
 
-<Drawer bind:this={newFolder}>
+<Drawer bind:this={newFolder} name="newFolder">
 	<DrawerContent
 		title="New Folder"
 		on:close={() => {

package/package/components/InputTransformForm.svelte

@@ -32,6 +32,8 @@ let monaco = $state(undefined);
 let monacoTemplate = $state(undefined);
 let argInput = $state(undefined);
 let focusedPrev = false;
+const variableMatch = (value) => value.match(/^variable\('([^']+)'\)$/);
+const resourceMatch = (value) => value.match(/^resource\('([^']+)'\)$/);
 const dispatch = createEventDispatcher();
 $effect(() => {
     editor = monaco;
@@ -144,18 +146,18 @@ function isStaticTemplate(inputCat) {
 }
 function connectProperty(rawValue) {
     // Extract path from variable('x') or resource('x') format
-    const varMatch = rawValue.match(/^variable\('([^']+)'\)$/);
-    const resourceMatch = rawValue.match(/^resource\('([^']+)'\)$/);
+    const varMatch = variableMatch(rawValue);
+    const resMatch = resourceMatch(rawValue);
     if (varMatch) {
         arg.type = 'static';
         propertyType = 'static';
         arg.value = '$var:' + varMatch[1];
         monacoTemplate?.setCode(arg.value);
     }
-    else if (resourceMatch) {
+    else if (resMatch) {
         arg.type = 'static';
         propertyType = 'static';
-        arg.value = '$res:' + resourceMatch[1];
+        arg.value = '$res:' + resMatch[1];
         monacoTemplate?.setCode(arg.value);
     }
     else {
@@ -169,12 +171,20 @@ function onFocus() {
     focused = true;
     if (isStaticTemplate(inputCat)) {
         focusProp?.(argName, 'append', (path) => {
-            const toAppend = `\$\{${path}}`;
-            arg.value = `${arg.value ?? ''}${toAppend}`;
-            monacoTemplate?.setCode(arg.value);
-            setPropertyType(arg.value);
-            argInput?.focus();
-            return false;
+            // Empty field + variable = use $var:/$res: syntax instead of ${...}
+            const isEmpty = !arg.value || arg.value.trim() === '';
+            if (isEmpty && variableMatch(path)) {
+                connectProperty(path);
+                return true;
+            }
+            else {
+                const toAppend = `\$\{${path}}`;
+                arg.value = `${arg.value ?? ''}${toAppend}`;
+                monacoTemplate?.setCode(arg.value);
+                setPropertyType(arg.value);
+                argInput?.focus();
+                return false;
+            }
         });
     }
     else {

package/package/components/JobArgs.svelte

@@ -79,7 +79,7 @@ ${Object.entries(args)
 					{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
 						<Row>
 							<Cell first>{arg}</Cell>
-							<Cell last><ArgInfo {value} /></Cell>
+							<Cell><ArgInfo {value} /></Cell>
 						</Row>
 					{/each}
 				{:else if args}

package/package/components/JobLoader.svelte.d.ts

@@ -61,6 +61,6 @@ declare const JobLoader: import("svelte").Component<Props, {
     cancelJob: () => Promise<void>;
     clearCurrentJob: () => Promise<void>;
     watchJob: (testId: string, callbacks?: Callbacks) => Promise<void>;
-}, "job" | "isLoading" | "notfound" | "jobUpdateLastFetch" | "scriptProgress">;
+}, "isLoading" | "job" | "notfound" | "jobUpdateLastFetch" | "scriptProgress">;
 type JobLoader = ReturnType<typeof JobLoader>;
 export default JobLoader;

package/package/components/JobStatus.svelte

@@ -4,6 +4,7 @@ import { forLater } from '../forLater';
 import DurationMs from './DurationMs.svelte';
 import { Calendar, CheckCircle2, Circle, Clock, Hourglass, Play, XCircle } from 'lucide-svelte';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
+import QueuePosition from './QueuePosition.svelte';
 const SMALL_ICON_SIZE = 12;
 export let job;
 </script>
@@ -56,6 +57,7 @@ export let job;
 	<div class="flex flex-row gap-1 items-center">
 		<Badge color="orange" icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
 		<NoWorkerWithTagWarning tag={job.tag} />
+		<QueuePosition jobId={job.id} workspaceId={job.workspace_id} minimal />
 	</div>
 {:else}
 	<Circle size={SMALL_ICON_SIZE} class="text-gray-200" />

package/package/components/LogSnippetViewer.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import AnsiUp from 'ansi_up';
+<script lang="ts">import { AnsiUp } from 'ansi_up';
 export let content;
 export let highlighted;
 const ansi_up = new AnsiUp();
@@ -24,8 +24,8 @@ let html = highlightSnippet(content);
 </script>
 
 <button on:click class="font-light !m-0 !p-0">
-<pre
-	class="bg-surface-secondary hover:bg-surface px-2 py-1 text-secondary text-xs w-[100%] whitespace-pre border min-w-full text-start" >
+	<pre
+		class="bg-surface-secondary hover:bg-surface px-2 py-1 text-secondary text-xs w-[100%] whitespace-pre border min-w-full text-start">
 {@html html}
 </pre>
 </button>

package/package/components/LogSnippetViewer.svelte.d.ts

@@ -15,7 +15,7 @@ declare const LogSnippetViewer: $$__sveltets_2_IsomorphicComponent<{
     content: string;
     highlighted: any[];
 }, {
-    click: MouseEvent;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;