windmill-components 1.504.6 → 1.511.0

package/package/components/FlowStatusViewer.svelte

@@ -1,27 +1,9 @@
 <script lang="ts">import { writable } from 'svelte/store';
 import FlowStatusViewerInner from './FlowStatusViewerInner.svelte';
-import { createEventDispatcher, setContext } from 'svelte';
+import { createEventDispatcher, setContext, untrack } from 'svelte';
 import { isOwner as loadIsOwner } from '../utils';
 import { userStore, workspaceStore } from '../stores';
-export let jobId;
-export let initialJob = undefined;
-export let workspaceId = undefined;
-export let flowStateStore = writable({});
-export let selectedJobStep = undefined;
-export let hideFlowResult = false;
-export let hideTimeline = false;
-export let hideDownloadInGraph = false;
-export let hideNodeDefinition = false;
-export let hideJobId = false;
-export let hideDownloadLogs = false;
-export let rightColumnSelect = 'timeline';
-export let isOwner = false;
-export let wideResults = false;
-export let localModuleStates = writable({});
-export let localDurationStatuses = writable({});
-export let job = undefined;
-export let render = true;
-export let suspendStatus = writable({});
+let { jobId, initialJob = undefined, workspaceId = undefined, flowStateStore = writable({}), selectedJobStep = $bindable(undefined), hideFlowResult = false, hideTimeline = false, hideDownloadInGraph = false, hideNodeDefinition = false, hideJobId = false, hideDownloadLogs = false, rightColumnSelect = $bindable('timeline'), isOwner = $bindable(false), wideResults = false, localModuleStates = $bindable(writable({})), localDurationStatuses = $bindable(writable({})), job = $bindable(undefined), render = true, suspendStatus = $bindable(writable({})) } = $props();
 let lastJobId = jobId;
 let retryStatus = writable({});
 setContext('FlowStatusViewer', {
@@ -45,8 +27,13 @@ async function updateJobId() {
     }
 }
 const dispatch = createEventDispatcher();
-let lastScriptPath = undefined;
-$: jobId && updateJobId();
+let lastScriptPath = $state(undefined);
+$effect.pre(() => {
+    jobId;
+    untrack(() => {
+        jobId && updateJobId();
+    });
+});
 </script>
 
 <FlowStatusViewerInner
@@ -61,8 +48,8 @@ $: jobId && updateJobId();
 	}}
 	globalModuleStates={[]}
 	globalDurationStatuses={[]}
-	bind:localModuleStates
-	bind:localDurationStatuses
+	{localModuleStates}
+	{localDurationStatuses}
 	bind:selectedNode={selectedJobStep}
 	on:start
 	on:done

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -2,20 +2,7 @@ import { type Writable } from 'svelte/store';
 import type { FlowState } from './flows/flowState';
 import type { DurationStatus, GraphModuleState } from './graph';
 import type { Job } from '../gen';
-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 FlowStatusViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     jobId: string;
     initialJob?: Job | undefined;
     workspaceId?: string | undefined;
@@ -27,20 +14,34 @@ declare const FlowStatusViewer: $$__sveltets_2_IsomorphicComponent<{
     hideNodeDefinition?: boolean;
     hideJobId?: boolean;
     hideDownloadLogs?: boolean;
-    rightColumnSelect?: "timeline" | "node_status" | "node_definition" | "user_states";
+    rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states';
     isOwner?: boolean;
     wideResults?: boolean;
     localModuleStates?: Writable<Record<string, GraphModuleState>>;
     localDurationStatuses?: Writable<Record<string, DurationStatus>>;
     job?: Job | undefined;
     render?: boolean;
-    suspendStatus?: Writable<{}>;
-}, {
+    suspendStatus?: any;
+}
+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 FlowStatusViewer: $$__sveltets_2_IsomorphicComponent<Props, {
     start: CustomEvent<any>;
     done: CustomEvent<any>;
     jobsLoaded: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "job" | "isOwner" | "suspendStatus" | "localDurationStatuses" | "rightColumnSelect" | "localModuleStates" | "selectedJobStep">;
 type FlowStatusViewer = InstanceType<typeof FlowStatusViewer>;
 export default FlowStatusViewer;

package/package/components/FlowStatusViewerInner.svelte

@@ -1,15 +1,16 @@
-<script lang="ts">import { JobService } from '../gen';
+<script lang="ts">import FlowStatusViewerInner from './FlowStatusViewerInner.svelte';
+import { JobService, ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { base } from '../base';
 import FlowJobResult from './FlowJobResult.svelte';
 import DisplayResult from './DisplayResult.svelte';
-import { createEventDispatcher, getContext, tick } from 'svelte';
+import { createEventDispatcher, getContext, setContext, tick, untrack } from 'svelte';
 import { onDestroy } from 'svelte';
 import { Badge, Button, Skeleton, Tab } from './common';
 import Tabs from './common/tabs/Tabs.svelte';
 import {} from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
-import { isScriptPreview, msToSec, truncateRev } from '../utils';
+import { clone, isScriptPreview, msToSec, readFieldsRecursively, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
 import { ChevronDown, Hourglass } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
@@ -20,60 +21,45 @@ import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 import { buildPrefix } from './graph/graphBuilder.svelte';
-import { parseAssetFromString } from './assets/lib';
+import { parseInputArgsAssets } from './assets/lib';
 import FlowPreviewResult from './FlowPreviewResult.svelte';
+import { createState } from '../svelte5Utils.svelte';
+import JobLoader from './JobLoader.svelte';
 const dispatch = createEventDispatcher();
 let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
-export let jobId;
-export let initialJob = undefined;
-export let workspaceId = undefined;
-export let flowJobIds = undefined;
-//only useful when forloops are optimized and the job doesn't contain the mod id anymore
-export let innerModule = undefined;
-export let globalRefreshes = {};
-export let render = true;
-export let isOwner = false;
-export let selectedNode = undefined;
-export let globalModuleStates;
-export let globalDurationStatuses;
-export let childFlow = false;
-export let isSubflow = false;
-export let reducedPolling = false;
-export let wideResults = false;
-export let hideFlowResult = false;
-export let workspace = $workspaceStore;
-export let prefix = undefined;
-export let subflowParentsGlobalModuleStates = [];
-export let subflowParentsDurationStatuses = [];
-export let isForloopSelected = false;
-export let parentRecursiveRefresh = {};
-export let job = undefined;
-export let rightColumnSelect = 'timeline';
-export let localModuleStates = writable({});
-export let localDurationStatuses = writable({});
-let recursiveRefresh = {};
-$: inputAssets = parseInputAssets(job?.args ?? {});
-function parseInputAssets(args) {
-    const arr = [];
-    for (const v of Object.values(args)) {
-        if (typeof v === 'string') {
-            const asset = parseAssetFromString(v);
-            if (asset)
-                arr.push(asset);
-        }
-        else if (v && typeof v === 'object' && typeof v['s3'] === 'string') {
-            const s3 = v['s3'];
-            const storage = typeof v['storage'] == 'string' ? v['storage'] : undefined;
-            arr.push({ kind: 's3object', path: `${storage ?? ''}/${s3}` });
+let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, globalRefreshes = $bindable({}), render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses, childFlow = false, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, parentRecursiveRefresh = $bindable({}), job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = writable({}), localDurationStatuses = writable({}) } = $props();
+let recursiveRefresh = $state({});
+// Add support for the input args assets shown as an asset node
+const _flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
+let extendedFlowGraphAssetsCtx = $state(createState(clone(_flowGraphAssetsCtx)));
+setContext('FlowGraphAssetContext', extendedFlowGraphAssetsCtx);
+$effect(() => {
+    readFieldsRecursively(_flowGraphAssetsCtx);
+    job?.args;
+    untrack(() => {
+        if (extendedFlowGraphAssetsCtx && _flowGraphAssetsCtx) {
+            const inputAssets = parseInputArgsAssets(job?.args ?? {});
+            const resourceMetadataCache = _flowGraphAssetsCtx.val.resourceMetadataCache;
+            for (const asset of inputAssets) {
+                if (asset.kind === 'resource' && !(asset.path in resourceMetadataCache)) {
+                    resourceMetadataCache[asset.path] = undefined;
+                    ResourceService.getResource({
+                        workspace: workspace ?? $workspaceStore,
+                        path: asset.path
+                    })
+                        .then((r) => (resourceMetadataCache[asset.path] = r))
+                        .catch((err) => { });
+                }
+            }
+            extendedFlowGraphAssetsCtx.val = clone(_flowGraphAssetsCtx?.val);
+            extendedFlowGraphAssetsCtx.val.additionalAssetsMap['Input'] = inputAssets;
         }
-    }
-    return arr;
-}
-let jobResults = flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? [];
-let retry_selected = '';
+    });
+});
+let jobResults = $state(flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []);
+let retry_selected = $state('');
 let timeout = undefined;
-let expandedSubflows = {};
-$: flowJobIds?.moduleId && onFlowModuleId();
+let expandedSubflows = $state({});
 let selectedId = writable(selectedNode);
 function onFlowModuleId() {
     if (globalRefreshes) {
@@ -247,7 +233,7 @@ function initializeByJob(modId) {
         }));
     }
 }
-let innerModules = [];
+let innerModules = $state([]);
 function updateStatus(status) {
     innerModules =
         status?.modules?.concat(status.failure_module.type != 'WaitingForPriorSteps' ? status.failure_module : []) ?? [];
@@ -283,7 +269,8 @@ function updateInnerModules() {
                 JobService.getJob({
                     workspace: workspaceId ?? $workspaceStore ?? '',
                     id: mod.job ?? '',
-                    noLogs: true
+                    noLogs: true,
+                    noCode: true
                 })
                     .then((job) => {
                     const newState = {
@@ -300,54 +287,27 @@ function updateInnerModules() {
                     console.error(`Could not load inner module for job ${mod.job}`, e);
                 });
             }
-            else if (mod.flow_jobs &&
+            else if ((mod.flow_jobs || mod.branch_chosen) &&
                 (mod.type == 'Success' || mod.type == 'Failure') &&
                 !['Success', 'Failure'].includes($localModuleStates?.[mod.id ?? '']?.type)) {
+                let branchChosen = mod.branch_chosen
+                    ? {
+                        branchChosen: mod.branch_chosen.type == 'default' ? 0 : (mod.branch_chosen.branch ?? 0) + 1
+                    }
+                    : {};
                 setModuleState(mod.id ?? '', {
-                    type: mod.type
+                    type: mod.type,
+                    ...branchChosen
                 }, true);
             }
             else if (isForloopSelected) {
                 setModuleState(mod.id ?? '', {}, true);
             }
-            // if (isForloopSelected && mod?.flow_jobs) {
-            // 	let states = getTopModuleStates()
-            // 	if (states) {
-            // 		states[mod.id ?? ''] = $localModuleStates[mod.id ?? '']
-            // 	}
-            // }
-            if (mod.branch_chosen) {
+            if (mod.flow_jobs_success) {
                 setModuleState(mod.id ?? '', {
-                    branchChosen: mod.branch_chosen.type == 'default' ? 0 : (mod.branch_chosen.branch ?? 0) + 1
-                }, true);
-            }
-            /**
-             * else if (mod.type === 'Failure' || mod.type === 'WaitingForPriorSteps') {
-                if (job?.type === 'CompletedJob') {
-                    setModuleState('b', {
-                        type: 'Failure',
-                        args: job?.args,
-                        job_id: job?.id,
-                        result: job?.result
-                    })
-                }
+                    flow_jobs_success: mod.flow_jobs_success
+                });
             }
-            */
-        });
-    }
-}
-$: isForloopSelected && globalModuleStates && debounceLoadJobInProgress();
-async function getNewJob(jobId, initialJob) {
-    if (jobId == initialJob?.id &&
-        initialJob?.id != undefined &&
-        initialJob?.type === 'CompletedJob') {
-        return initialJob;
-    }
-    else {
-        return await JobService.getJob({
-            workspace: workspaceId ?? $workspaceStore ?? '',
-            id: jobId ?? '',
-            noLogs: true
         });
     }
 }
@@ -367,9 +327,20 @@ function debounceLoadJobInProgress() {
         timeout = undefined;
     }, pollingRate);
 }
-let errorCount = 0;
-let notAnonynmous = false;
+let notAnonynmous = $state(false);
 let started = false;
+let jobLoader = undefined;
+function setJob(newJob, force) {
+    if (!deepEqual(job, newJob) || isForloopSelected || force) {
+        job = newJob;
+        job?.flow_status && updateStatus(job?.flow_status);
+        dispatch('jobsLoaded', { job, force: false });
+        notAnonynmous = false;
+        if (job?.type == 'CompletedJob' && !destroyed) {
+            dispatch('done', job);
+        }
+    }
+}
 async function loadJobInProgress() {
     if (!started) {
         started = true;
@@ -377,31 +348,28 @@ async function loadJobInProgress() {
     }
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
-            const newJob = await getNewJob(jobId, initialJob);
-            if (!deepEqual(job, newJob) || isForloopSelected) {
-                job = newJob;
-                job?.flow_status && updateStatus(job?.flow_status);
-                dispatch('jobsLoaded', { job, force: false });
+            if (jobId == initialJob?.id &&
+                initialJob?.id != undefined &&
+                initialJob?.type === 'CompletedJob') {
+                setJob(initialJob, false);
+            }
+            else {
+                jobLoader?.watchJob(jobId, {
+                    change(newJob) {
+                        setJob(newJob, true);
+                    }
+                });
             }
-            errorCount = 0;
-            notAnonynmous = false;
         }
         catch (e) {
             if (e?.body?.includes('As a non logged in user, you can only see jobs ran by anonymous users')) {
                 notAnonynmous = true;
             }
             else {
-                errorCount += 1;
                 console.error(e);
             }
         }
     }
-    if (job?.type !== 'CompletedJob' && errorCount < 4 && !destroyed) {
-        debounceLoadJobInProgress();
-    }
-    else {
-        dispatch('done', job);
-    }
 }
 let destroyed = false;
 updateRecursiveRefresh(jobId);
@@ -435,16 +403,13 @@ async function updateJobId() {
         await loadJobInProgress();
     }
 }
-$: jobId && updateJobId();
-$: isListJob = flowJobIds != undefined && Array.isArray(flowJobIds?.flowJobs);
 function getTopModuleStates() {
     return get(globalModuleStates?.[globalModuleStates?.length - 1]);
 }
-let forloop_selected = getTopModuleStates()?.[flowJobIds?.moduleId ?? '']?.selectedForloop;
+let forloop_selected = $state(getTopModuleStates()?.[flowJobIds?.moduleId ?? '']?.selectedForloop);
 let sub = undefined;
 let timeoutForloopSelectedSub = undefined;
 let timeoutForloopSelected = undefined;
-$: flowJobIds?.moduleId && onModuleIdChange();
 function onModuleIdChange() {
     clearTimeout(timeoutForloopSelectedSub);
     timeoutForloopSelectedSub = setTimeout(() => {
@@ -465,7 +430,6 @@ onDestroy(() => {
     timeout && clearTimeout(timeout);
     sub?.();
 });
-$: selected = isListJob ? 'sequence' : 'graph';
 function isSuccess(arg) {
     if (arg == undefined) {
         return undefined;
@@ -653,7 +617,7 @@ function innerJobLoaded(jobLoaded, j, clicked, force) {
         }
     }
 }
-let flowTimeline;
+let flowTimeline = $state();
 function loadPreviousIters(lenToAdd) {
     let r = $localDurationStatuses[flowJobIds?.moduleId ?? ''];
     if (r.iteration_from) {
@@ -667,9 +631,9 @@ function loadPreviousIters(lenToAdd) {
     ];
     // updateSlicedListJobIds()
 }
-let stepDetail = undefined;
-let storedListJobs = {};
-let wrapperHeight = 0;
+let stepDetail = $state(undefined);
+let storedListJobs = $state({});
+let wrapperHeight = $state(0);
 function removeFailureNode(id, parent_module) {
     if (id?.startsWith('failure-') && parent_module) {
         ;
@@ -704,9 +668,24 @@ function allModulesForTimeline(modules, expandedSubflows) {
     }
     return rec(ids, undefined);
 }
-let subflowsSize = 500;
+let subflowsSize = $state(500);
+$effect(() => {
+    flowJobIds?.moduleId && untrack(() => onFlowModuleId());
+});
+$effect(() => {
+    isForloopSelected && globalModuleStates && untrack(() => debounceLoadJobInProgress());
+});
+$effect(() => {
+    jobId && untrack(() => updateJobId());
+});
+let isListJob = $derived(flowJobIds != undefined && Array.isArray(flowJobIds?.flowJobs));
+$effect(() => {
+    flowJobIds?.moduleId && untrack(() => onModuleIdChange());
+});
+let selected = $derived(isListJob ? 'sequence' : 'graph');
 </script>
 
+<JobLoader noCode noLogs bind:this={jobLoader} />
 {#if notAnonynmous}
 	<Alert type="error" title="Required Auth">
 		As a non logged in user, you can only see jobs ran by anonymous users like you
@@ -727,7 +706,7 @@ let subflowsSize = 500;
 				<p class="text-tertiary italic text-xs">
 					For performance reasons, only the last 20 items are shown by default <button
 						class="text-primary underline ml-4"
-						on:click={() => {
+						onclick={() => {
 							loadPreviousIters(lenToAdd)
 						}}
 						>Load {lenToAdd} prior
@@ -736,7 +715,7 @@ let subflowsSize = 500;
 						{sliceFrom}
 						<button
 							class="text-primary underline ml-4"
-							on:click={() => {
+							onclick={() => {
 								loadPreviousIters(allToAdd)
 							}}
 							>Load {allToAdd} prior
@@ -807,7 +786,8 @@ let subflowsSize = 500;
 										storedJob = await JobService.getJob({
 											workspace: workspaceId ?? $workspaceStore ?? '',
 											id: loopJobId,
-											noLogs: true
+											noLogs: true,
+											noCode: true
 										})
 										storedListJobs[j] = storedJob
 									}
@@ -829,7 +809,7 @@ let subflowsSize = 500;
 								(innerModule?.type != 'forloopflow' && innerModule?.type != 'whileloopflow')}
 							<!-- <LogId id={loopJobId} /> -->
 							<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
-								<svelte:self
+								<FlowStatusViewerInner
 									{globalRefreshes}
 									parentRecursiveRefresh={recursiveRefresh}
 									{childFlow}
@@ -848,7 +828,7 @@ let subflowsSize = 500;
 									isForloopSelected={forloop_selected == loopJobId &&
 										(innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow')}
 									reducedPolling={reducedPolling ||
-										(flowJobIds?.flowJobs.length && flowJobIds?.flowJobs.length > 20)}
+										(!!flowJobIds?.flowJobs.length && flowJobIds?.flowJobs.length > 20)}
 									{workspaceId}
 									jobId={loopJobId}
 									on:jobsLoaded={(e) => {
@@ -918,7 +898,7 @@ let subflowsSize = 500;
 
 									<!-- <LogId id={loopJobId} /> -->
 									<div class="border p-6" class:hidden={retry_selected != failedRetry}>
-										<svelte:self
+										<FlowStatusViewerInner
 											{globalRefreshes}
 											parentRecursiveRefresh={recursiveRefresh}
 											{childFlow}
@@ -937,7 +917,7 @@ let subflowsSize = 500;
 							{/if}
 							{#if ['InProgress', 'Success', 'Failure'].includes(mod.type)}
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
-									<svelte:self
+									<FlowStatusViewerInner
 										{globalRefreshes}
 										parentRecursiveRefresh={recursiveRefresh}
 										globalModuleStates={[]}
@@ -955,7 +935,7 @@ let subflowsSize = 500;
 										]}
 										render={selected == 'sequence' && render}
 										{workspaceId}
-										jobId={mod.job}
+										jobId={mod.job ?? ''}
 										{reducedPolling}
 										isSubflow
 										childFlow
@@ -967,7 +947,7 @@ let subflowsSize = 500;
 								{:else if mod.flow_jobs?.length == 0 && mod.job == '00000000-0000-0000-0000-000000000000'}
 									<div class="text-secondary">no subflow (empty loop?)</div>
 								{:else}
-									<svelte:self
+									<FlowStatusViewerInner
 										{globalRefreshes}
 										parentRecursiveRefresh={recursiveRefresh}
 										{childFlow}
@@ -978,14 +958,14 @@ let subflowsSize = 500;
 										{prefix}
 										{subflowParentsGlobalModuleStates}
 										{subflowParentsDurationStatuses}
-										jobId={mod.job}
+										jobId={mod.job ?? ''}
 										{reducedPolling}
 										innerModule={mod.flow_jobs ? job.raw_flow?.modules[i]?.value : undefined}
 										flowJobIds={mod.flow_jobs
 											? {
-													moduleId: mod.id,
+													moduleId: mod.id ?? '',
 													flowJobs: mod.flow_jobs,
-													flowJobsSuccess: mod.flow_jobs_success,
+													flowJobsSuccess: mod.flow_jobs_success ?? [],
 													length: mod.iterator?.itered?.length ?? mod.flow_jobs.length,
 													branchall: job?.raw_flow?.modules?.[i]?.value?.type == 'branchall'
 												}
@@ -1033,7 +1013,6 @@ let subflowsSize = 500;
 						</div>
 
 						<FlowGraphV2
-							{inputAssets}
 							{selectedId}
 							triggerNode={true}
 							download={!hideDownloadInGraph}

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

@@ -1,20 +1,8 @@
+import FlowStatusViewerInner from './FlowStatusViewerInner.svelte';
 import { type Job, type FlowModuleValue } from '../gen';
 import { type DurationStatus, type GraphModuleState } from './graph';
 import { type Writable } from 'svelte/store';
-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 FlowStatusViewerInner: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     jobId: string;
     initialJob?: Job | undefined;
     workspaceId?: string | undefined;
@@ -44,15 +32,29 @@ declare const FlowStatusViewerInner: $$__sveltets_2_IsomorphicComponent<{
     isForloopSelected?: boolean;
     parentRecursiveRefresh?: Record<string, (clear: any, root: any) => Promise<void>>;
     job?: Job | undefined;
-    rightColumnSelect?: "timeline" | "node_status" | "node_definition" | "user_states";
+    rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states';
     localModuleStates?: Writable<Record<string, GraphModuleState>>;
     localDurationStatuses?: Writable<Record<string, DurationStatus>>;
-}, {
+}
+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 FlowStatusViewerInner: $$__sveltets_2_IsomorphicComponent<Props, {
     jobsLoaded: CustomEvent<any>;
-    start: CustomEvent<any>;
     done: CustomEvent<any>;
+    start: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "job" | "globalRefreshes" | "selectedNode" | "parentRecursiveRefresh" | "rightColumnSelect">;
 type FlowStatusViewerInner = InstanceType<typeof FlowStatusViewerInner>;
 export default FlowStatusViewerInner;

package/package/components/GitDiffPreview.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">"use strict";
+let { previewResult } = $props();
+</script>
+
+<div class="border rounded p-2 text-xs max-h-40 overflow-y-auto bg-surface-secondary">
+	<div class="font-semibold text-[11px] mb-1 text-tertiary">Preview of changes:</div>
+	{#if !previewResult?.added?.length && !previewResult?.deleted?.length && !previewResult?.modified?.length && !previewResult?.yamlModified}
+		<div class="mt-2 text-tertiary">No changes found! The workspace is up to date.</div>
+	{:else}
+		{#if previewResult?.yamlModified}
+			<div class="mt-2">
+				<div class="text-yellow-600">Modified:</div>
+				<ul class="list-disc list-inside">
+					<li>wmill.yaml (Git sync settings)</li>
+				</ul>
+			</div>
+		{/if}
+		{#if previewResult?.added?.length}
+			<div class="mt-2">
+				<div class="text-green-600">Added:</div>
+				<ul class="list-disc list-inside">
+					{#each previewResult.added as file}
+						<li>
+							{file}{!file.includes('.') ? ' (dir)' : ''}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+		{#if previewResult?.deleted?.length}
+			<div class="mt-2">
+				<div class="text-red-600">Deleted:</div>
+				<ul class="list-disc list-inside">
+					{#each previewResult.deleted as file}
+						<li>
+							{file}{!file.includes('.') ? ' (dir)' : ''}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+		{#if previewResult?.modified?.length}
+			<div class="mt-2">
+				<div class="text-yellow-600">Modified:</div>
+				<ul class="list-disc list-inside">
+					{#each previewResult.modified as file}
+						<li>
+							{file}{!file.includes('.') ? ' (dir)' : ''}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	{/if}
+</div>