windmill-components 1.613.4 → 1.623.1

package/package/components/FlowStatusViewerInner.svelte

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

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

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

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -8,15 +8,19 @@ import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
 import SchemaForm from './SchemaForm.svelte';
 import { twMerge } from 'tailwind-merge';
-import { untrack } from 'svelte';
-let { isOwner, workspaceId, job, light = false } = $props();
-let default_payload = $state({});
-let resumeUrl = $state(undefined);
-let cancelUrl = $state(undefined);
-let description = $state(undefined);
-let hide_cancel = $state(false);
-let defaultValues = $state({});
-let schema = $state({});
+export let isOwner;
+export let workspaceId;
+export let job;
+export let light = false;
+let default_payload = {};
+let resumeUrl = undefined;
+let cancelUrl = undefined;
+let description = undefined;
+let hide_cancel = false;
+$: approvalStep = (job?.flow_status?.step ?? 1) - 1;
+let defaultValues = {};
+$: job && getDefaultArgs();
+let schema = {};
 let lastJobId = undefined;
 async function getDefaultArgs() {
     let jobId = job?.flow_status?.modules?.[approvalStep]?.job;
@@ -40,9 +44,7 @@ async function getDefaultArgs() {
     hide_cancel = job?.raw_flow?.modules?.[approvalStep]?.suspend?.hide_cancel ?? false;
     schema = mergeSchema(job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? {}, job_result?.enums ?? {});
 }
-let loading = $state(false);
 async function continu(approve) {
-    loading = true;
     if ((resumeUrl && approve) || (cancelUrl && !approve)) {
         let split = (approve ? resumeUrl : cancelUrl).split('/');
         let signatureUrl = split.pop() ?? '';
@@ -101,10 +103,6 @@ async function continu(approve) {
         }
     }
 }
-let approvalStep = $derived((job?.flow_status?.step ?? 1) - 1);
-$effect(() => {
-    job && untrack(() => getDefaultArgs());
-});
 </script>
 
 <div class="w-full h-full mt-2 text-xs text-primary">
@@ -120,8 +118,7 @@ $effect(() => {
 				{#if cancelUrl && !hide_cancel}
 					<div>
 						<Button
-							title="Cancel the step"
-							{loading}
+							title="Cancel the flow"
 							iconOnly
 							startIcon={{ icon: X }}
 							variant="default"
@@ -131,13 +128,12 @@ $effect(() => {
 					</div>
 				{/if}
 				<div>
-					<Button variant="accent" on:click={() => continu(true)} {loading}>
-						Resume
-						<Tooltip class="text-white">
-							Since you are an owner of this flow, you can send resume events without necessarily
-							knowing the resume id sent by the approval step
-						</Tooltip>
-					</Button>
+					<Button variant="accent" on:click={() => continu(true)}
+						>Resume <Tooltip class="text-white"
+							>Since you are an owner of this flow, you can send resume events without necessarily
+							knowing the resume id sent by the approval step</Tooltip
+						></Button
+					>
 				</div>
 
 				{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
@@ -150,9 +146,9 @@ $effect(() => {
 						<SchemaForm onlyMaskPassword bind:args={default_payload} {defaultValues} {schema} />
 					</div>
 				{/if}
-				<Tooltip>
-					The payload is optional, it is passed to the following step through the `resume` variable
-				</Tooltip>
+				<Tooltip
+					>The payload is optional, it is passed to the following step through the `resume` variable</Tooltip
+				>
 			</div>
 		{:else}
 			You cannot resume the flow yourself without receiving the resume secret since you are not an

package/package/components/FlowStatusWaitingForEvents.svelte.d.ts

@@ -1,10 +1,24 @@
 import { type Job } from '../gen';
-interface Props {
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FlowStatusWaitingForEvents: $$__sveltets_2_IsomorphicComponent<{
     isOwner: boolean;
     workspaceId: string | undefined;
     job: Job;
     light?: boolean;
-}
-declare const FlowStatusWaitingForEvents: import("svelte").Component<Props, {}, "">;
-type FlowStatusWaitingForEvents = ReturnType<typeof FlowStatusWaitingForEvents>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FlowStatusWaitingForEvents = InstanceType<typeof FlowStatusWaitingForEvents>;
 export default FlowStatusWaitingForEvents;

package/package/components/FlowViewer.svelte

@@ -1,92 +1,19 @@
-<script lang="ts">import { FlowService } from '../gen';
-import { Tab, Tabs, TabContent } from './common';
+<script lang="ts">import { Tab, Tabs, TabContent } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
-import { Loader2 } from 'lucide-svelte';
-import { orderedYamlStringify, cleanValueProperties, replaceFalseWithUndefined } from '../utils';
-import { workspaceStore } from '../stores';
-import { watch } from 'runed';
 import HighlightTheme from './HighlightTheme.svelte';
 import FlowViewerInner from './FlowViewerInner.svelte';
 import FlowInputViewer from './FlowInputViewer.svelte';
-let { flow, initialOpen = undefined, noSide = false, noGraph = false, availableVersions = undefined, initTab = undefined, noSummary = false, noGraphDownload = false, selectedVersionId = undefined } = $props();
+let { flow, initialOpen = undefined, noSide = false, noGraph = false, tab = $bindable(noGraph ? 'schema' : 'ui'), noSummary = false, noGraphDownload = false } = $props();
 let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
 }
-let previousVersionId = $state(undefined);
-let previousFlow = $state(undefined);
-let tab = $state(initTab ?? 'diff');
-let previousFlowCache = {};
-async function loadPreviousFlow(version) {
-    try {
-        if (previousFlowCache[version]) {
-            previousFlow = previousFlowCache[version];
-            return;
-        }
-        previousFlow = await FlowService.getFlowVersion({
-            workspace: $workspaceStore,
-            version
-        });
-        previousFlowCache[version] = previousFlow;
-    }
-    catch (e) {
-        console.error(e);
-        previousFlow = undefined;
-    }
-}
-// Load previous flow when previousVersionId changes
-$effect.pre(() => {
-    if (previousVersionId !== undefined) {
-        loadPreviousFlow(previousVersionId);
-    }
-    else {
-        previousFlow = undefined;
-    }
-});
-$effect.pre(() => {
-    if (initTab) {
-        return;
-    }
-    if (availableVersions && availableVersions.length > 0) {
-        tab = 'diff';
-    }
-    else {
-        if (noGraph) {
-            tab = 'schema';
-        }
-        else {
-            tab = 'ui';
-        }
-    }
-});
-// Auto-select first available version and validate current selection
-watch([() => availableVersions, () => selectedVersionId], () => {
-    if (availableVersions && availableVersions.length > 0) {
-        previousVersionId = availableVersions[0].id;
-    }
-    else {
-        previousVersionId = undefined;
-    }
-});
-let currentFlowYaml = $derived.by(() => {
-    const metadata = structuredClone(cleanValueProperties(replaceFalseWithUndefined(flow)));
-    return orderedYamlStringify(metadata);
-});
-let previousFlowYaml = $derived.by(() => {
-    if (!previousFlow)
-        return undefined;
-    const metadata = structuredClone(cleanValueProperties(replaceFalseWithUndefined(previousFlow)));
-    return orderedYamlStringify(metadata);
-});
 </script>
 
 <HighlightTheme />
 
 <Tabs bind:selected={tab}>
-	{#if availableVersions && availableVersions.length > 0}
-		<Tab value="diff" label="Diff" />
-	{/if}
 	{#if !noGraph}
 		<Tab value="ui" label="Graph" />
 	{/if}
@@ -94,34 +21,6 @@ let previousFlowYaml = $derived.by(() => {
 	<Tab value="schema" label="Input Schema" />
 
 	{#snippet content()}
-		{#if availableVersions && availableVersions.length > 0}
-			<TabContent value="diff">
-				<div class="flex flex-col gap-2 h-full">
-					<div class="flex flex-row items-center gap-2 py-2">
-						<div class="text-xs">Compare with:</div>
-						<select bind:value={previousVersionId} class="!text-xs !w-40">
-							{#each availableVersions as version (version.id)}
-								<option value={version.id} class="!text-xs">
-									{version.deployment_msg ?? `Version ${version.id}`}
-								</option>
-							{/each}
-						</select>
-					</div>
-
-					{#if previousFlowYaml}
-						<div class="h-[calc(100vh-150px)] min-h-[400px]">
-							{#await import('./FlowDiffViewer.svelte')}
-								<Loader2 class="animate-spin" />
-							{:then Module}
-								<Module.default beforeYaml={previousFlowYaml} afterYaml={currentFlowYaml} />
-							{/await}
-						</div>
-					{:else}
-						<Loader2 class="animate-spin" />
-					{/if}
-				</div>
-			</TabContent>
-		{/if}
 		<TabContent value="ui">
 			<div class="flow-root w-full pb-4">
 				{#if !noSummary}

package/package/components/FlowViewer.svelte.d.ts

@@ -1,5 +1,4 @@
-import { type FlowValue } from '../gen';
-type TabValue = 'ui' | 'raw' | 'schema' | 'diff';
+import type { FlowValue } from '../gen';
 interface Props {
     flow: {
         summary: string;
@@ -10,15 +9,10 @@ interface Props {
     initialOpen?: number | undefined;
     noSide?: boolean;
     noGraph?: boolean;
-    initTab?: TabValue;
+    tab?: 'ui' | 'raw' | 'schema';
     noSummary?: boolean;
     noGraphDownload?: boolean;
-    availableVersions?: Array<{
-        id: number;
-        deployment_msg?: string;
-    }>;
-    selectedVersionId?: number;
 }
-declare const FlowViewer: import("svelte").Component<Props, {}, "">;
+declare const FlowViewer: import("svelte").Component<Props, {}, "tab">;
 type FlowViewer = ReturnType<typeof FlowViewer>;
 export default FlowViewer;

package/package/components/ForkWorkspaceBanner.svelte

@@ -77,11 +77,11 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 </script>
 
 {#if isFork}
-	<div class="w-full bg-blue-50 dark:bg-blue-900 text-xs rounded-b-md max-w-7xl mx-auto">
+	<div class="w-full bg-blue-50 dark:bg-blue-900/20 border-b border-blue-200 dark:border-blue-800">
 		<div class="px-4 py-2">
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<GitFork class="w-4 h-4 text-accent" />
+					<GitFork class="w-4 h-4 text-blue-600 dark:text-blue-400" />
 					<div class="text-sm">
 						<span class="font-medium text-blue-900 dark:text-blue-100">
 							Fork of <b>{parentWorkspaceData?.name}</b> ({parentWorkspaceId})
@@ -97,17 +97,17 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 					{:else if comparison}
 						<div class="flex items-center gap-4 text-xs">
 							{#if comparison.summary.total_diffs > 0}
-								<span class="text-blue-700 dark:text-blue-100">
+								<span>
 									{forkAheadBehindMessage(
 										comparison.summary.total_ahead,
-										comparison.summary.total_behind
+										comparison.summary.total_behind,
 									)}
-									<span class="font-semibold underline">{parentWorkspaceId}</span> over {comparison
-										.summary.total_diffs} items:
+									<span class="font-semibold underline">{parentWorkspaceId}</span> over {comparison.summary
+										.total_diffs} items:
 								</span>
 								<div class="flex items-center gap-2">
 									{#if comparison.summary.scripts_changed > 0}
-										<span class="text-blue-700 dark:text-blue-100">
+										<span class="text-blue-700 dark:text-blue-300">
 											{comparison.summary.scripts_changed} script{comparison.summary
 												.scripts_changed !== 1
 												? 's'
@@ -115,21 +115,21 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 										</span>
 									{/if}
 									{#if comparison.summary.flows_changed > 0}
-										<span class="text-blue-700 dark:text-blue-100">
+										<span class="text-blue-700 dark:text-blue-300">
 											{comparison.summary.flows_changed} flow{comparison.summary.flows_changed !== 1
 												? 's'
 												: ''}
 										</span>
 									{/if}
 									{#if comparison.summary.apps_changed > 0}
-										<span class="text-blue-700 dark:text-blue-100">
+										<span class="text-blue-700 dark:text-blue-300">
 											{comparison.summary.apps_changed} app{comparison.summary.apps_changed !== 1
 												? 's'
 												: ''}
 										</span>
 									{/if}
 									{#if comparison.summary.resources_changed > 0}
-										<span class="text-blue-700 dark:text-blue-100">
+										<span class="text-blue-700 dark:text-blue-300">
 											{comparison.summary.resources_changed} resource{comparison.summary
 												.resources_changed !== 1
 												? 's'
@@ -137,7 +137,7 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 										</span>
 									{/if}
 									{#if comparison.summary.variables_changed > 0}
-										<span class="text-blue-700 dark:text-blue-100">
+										<span class="text-blue-700 dark:text-blue-300">
 											{comparison.summary.variables_changed} variable{comparison.summary
 												.variables_changed !== 1
 												? 's'
@@ -158,12 +158,9 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 									</div>
 								{/if}
 							{:else if comparison.skipped_comparison}
-								<span class="text-blue-600 dark:text-blue-200">
-									This fork was created before the addition of certain windmill features, and
-									therefore the changes with its parent workspace cannot be displayed.</span
-								>
+								<span class="text-blue-600 dark:text-blue-400"> This fork was created before the addition of certain windmill features, and therefore the changes with its parent workspace cannot be displayed.</span>
 							{:else}
-								<span class="text-blue-600 dark:text-blue-200"> Everything is up to date </span>
+								<span class="text-blue-600 dark:text-blue-400"> Everything is up to date </span>
 							{/if}
 						</div>
 					{/if}

package/package/components/GraphqlSchemaViewer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
-import { editor as meditor, KeyMod, KeyCode } from 'monaco-editor';
+import { editor as meditor } from 'monaco-editor';
 import { onDestroy, onMount } from 'svelte';
 let divEl = null;
 let editor;
@@ -14,13 +14,6 @@ async function loadMonaco() {
         lineNumbers: 'off',
         minimap: { enabled: false }
     });
-    // In VSCode webview (iframe), clipboard operations need to use execCommand
-    // because the webview has restricted clipboard API access
-    if (window.parent !== window) {
-        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
-            document.execCommand('copy');
-        });
-    }
 }
 onMount(async () => {
     if (BROWSER) {

package/package/components/HistoricInputs.svelte

@@ -2,14 +2,14 @@
 import { sendUserToast } from '../utils.js';
 import RunningJobSchemaPicker from './schema/RunningJobSchemaPicker.svelte';
 import { createEventDispatcher, onDestroy } from 'svelte';
-import { useJobsLoader } from './runs/useJobsLoader.svelte';
+import JobsLoader from './runs/JobsLoader.svelte';
 import { DataTable } from './table';
 import HistoricList from './HistoricList.svelte';
 import { Loader2 } from 'lucide-svelte';
-import { workspaceStore } from '../stores';
-let { runnableId = undefined, runnableType = undefined, selected = $bindable(undefined), showAuthor = false, placement = 'top-end', limitPayloadSize = false, searchArgs = undefined } = $props();
+let { runnableId = undefined, runnableType = undefined, loading = $bindable(false), selected = $bindable(undefined), showAuthor = false, placement = 'top-end', limitPayloadSize = false, searchArgs = undefined } = $props();
 let historicList = $state(undefined);
 const dispatch = createEventDispatcher();
+let jobs = $state([]);
 let hasMoreCurrentRuns = false;
 let page = $state(1);
 async function handleSelected(data) {
@@ -29,9 +29,6 @@ async function handleSelected(data) {
         });
     }
 }
-export function loading() {
-    return jobsLoader?.loading ?? false;
-}
 onDestroy(() => {
     resetSelected(false);
 });
@@ -69,35 +66,40 @@ function getJobKinds(runnableType) {
     }
     return '';
 }
-let jobsLoader = useJobsLoader(() => ({
-    filters: {
-        show_skipped: false,
-        path: runnableId,
-        success: 'running',
-        arg: searchArgs ? JSON.stringify(searchArgs) : '',
-        per_page: 5
-    },
-    jobKinds: getJobKinds(runnableType),
-    syncQueuedRunsCount: false,
-    refreshRate: 10000,
-    computeMinAndMax: undefined,
-    currentWorkspace: $workspaceStore ?? '',
-    skip: !runnableId
-}));
-let jobs = $derived(jobsLoader?.jobs ?? []);
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
+{#if runnableId}
+	<JobsLoader
+		bind:jobs
+		path={runnableId}
+		showSkipped={false}
+		jobKinds={getJobKinds(runnableType)}
+		user={null}
+		label={null}
+		folder={null}
+		concurrencyKey={null}
+		tag={null}
+		success="running"
+		argFilter={searchArgs ? JSON.stringify(searchArgs) : undefined}
+		bind:loading
+		syncQueuedRunsCount={false}
+		refreshRate={10000}
+		computeMinAndMax={undefined}
+		perPage={5}
+	/>
+{/if}
+
 <div class="h-full max-h-full min-h-0 w-full flex flex-col gap-2 relative">
 	<div class="grow-0" data-schema-picker>
 		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
-			{#if jobsLoader?.loading}
+			{#if loading}
 				<div class="text-primary absolute top-2 right-2">
 					<Loader2 class="animate-spin" size={14} />
 				</div>
 			{/if}
-			{#if jobs.length > 0}
+			{#if jobs?.length > 0}
 				<colgroup>
 					<col class="w-8" />
 					<col class="w-16" />
@@ -113,7 +115,7 @@ let jobs = $derived(jobsLoader?.jobs ?? []);
 							on:select={(e) => handleSelected(e.detail)}
 						/>
 					{/each}
-					{#if jobs.length == 5}
+					{#if jobs?.length == 5}
 						<tr class="text-left text-primary text-xs w-full">
 							<td class="w-full px-2" colspan="3">limited to 5 runs</td>
 						</tr>

package/package/components/HistoricInputs.svelte.d.ts

@@ -2,6 +2,7 @@ import { type RunnableType } from '../gen/index.js';
 interface Props {
     runnableId?: string | undefined;
     runnableType?: RunnableType | undefined;
+    loading?: boolean;
     selected?: string | undefined;
     showAuthor?: boolean;
     placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end';
@@ -26,9 +27,8 @@ declare const HistoricInputs: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    loading: () => boolean;
     refresh: (clearCurrentRuns?: boolean) => void;
     resetSelected: (dispatchEvent?: boolean) => void;
-}, "selected">;
+}, "selected" | "loading">;
 type HistoricInputs = InstanceType<typeof HistoricInputs>;
 export default HistoricInputs;