windmill-components 1.511.1 → 1.531.0

package/package/components/JobLoader.svelte

@@ -1,9 +1,13 @@
+<script module lang="ts">import pLimit from 'p-limit';
+const plimit = pLimit(5);
+</script>
+
 <script lang="ts">import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { onDestroy, tick, untrack } from 'svelte';
 import { sendUserToast } from '../toast';
 import { isScriptPreview } from '../utils';
-let { isLoading = $bindable(false), job = $bindable(undefined), noCode = false, allowConcurentRequests = false, workspaceOverride = undefined, notfound = $bindable(false), jobUpdateLastFetch = $bindable(undefined), toastError = false, lazyLogs = false, onlyResult = false, scriptProgress = $bindable(undefined), noLogs = false, children } = $props();
+let { isLoading = $bindable(false), job = $bindable(undefined), noCode = false, allowConcurentRequests = false, workspaceOverride = undefined, notfound = $bindable(false), jobUpdateLastFetch = $bindable(undefined), toastError = false, onlyResult = false, loadPlaceholderJobOnStart = undefined, scriptProgress = $bindable(undefined), noLogs = false, children } = $props();
 /// Last time asked for job progress
 let lastTimeCheckedProgress = undefined;
 /// Will try to poll progress every 5s and if once progress returned was not undefined, will be ignored
@@ -15,6 +19,7 @@ let workspace = $derived(workspaceOverride ?? $workspaceStore);
 let syncIteration = 0;
 let errorIteration = 0;
 let logOffset = 0;
+let resultStreamOffset = 0;
 let lastCallbacks = undefined;
 let finished = [];
 let ITERATIONS_BEFORE_SLOW_REFRESH = 10;
@@ -22,6 +27,8 @@ let ITERATIONS_BEFORE_SUPER_SLOW_REFRESH = 100;
 let lastStartedAt = Date.now();
 let currentId = $state(undefined);
 let noPingTimeout = undefined;
+let lastNoLogs = $state(noLogs);
+let lastCompletedJobId = $state(undefined);
 $effect(() => {
     let newIsLoading = currentId !== undefined;
     untrack(() => {
@@ -30,6 +37,29 @@ $effect(() => {
         }
     });
 });
+const noLogsChangeRestartEvent = 'SSE restart after no logs change';
+$effect(() => {
+    if (noLogs != lastNoLogs) {
+        lastNoLogs = noLogs;
+        if (!noLogs) {
+            currentEventSource?.onerror?.(new Event(noLogsChangeRestartEvent));
+            const lastJobId = lastCompletedJobId;
+            if (lastJobId && (job || lastCallbacks?.loadExtraLogs)) {
+                plimit(() => JobService.getCompletedJobLogsTail({
+                    workspace: $workspaceStore,
+                    id: lastJobId
+                })).then((res) => {
+                    if (res && job) {
+                        job.logs = res;
+                    }
+                    if (res && lastCallbacks?.loadExtraLogs) {
+                        lastCallbacks.loadExtraLogs({ id: lastJobId, logs: res });
+                    }
+                });
+            }
+        }
+    }
+});
 function clearCurrentId() {
     if (currentId) {
         if (allowConcurentRequests) {
@@ -43,6 +73,7 @@ function clearCurrentId() {
 export async function abstractRun(fn, callbacks) {
     try {
         isLoading = true;
+        lastCompletedJobId = undefined;
         clearCurrentJob();
         lastCallbacks = callbacks;
         noPingTimeout = undefined;
@@ -100,10 +131,23 @@ export async function runFlowByPath(path, args, callbacks) {
         skipPreprocessor: true
     }), callbacks);
 }
+export async function runFlowPreview(args, flow, callbacks) {
+    return abstractRun(() => JobService.runFlowPreview({
+        workspace: $workspaceStore,
+        requestBody: {
+            args,
+            value: flow.value,
+            tag: flow.tag
+        }
+    }), callbacks);
+}
 function refreshLogOffset() {
     if (logOffset == 0) {
         logOffset = job?.logs?.length ? job.logs?.length + 1 : 0;
     }
+    if (resultStreamOffset == 0) {
+        resultStreamOffset = job?.result_stream?.length ? job.result_stream?.length + 1 : 0;
+    }
 }
 export async function getLogs() {
     if (job) {
@@ -141,7 +185,6 @@ export async function cancelJob() {
     const id = currentId;
     if (id) {
         lastCallbacks?.cancel?.({ id });
-        lastCallbacks = undefined;
         clearCurrentId();
         // Clean up SSE connection
         currentEventSource?.close();
@@ -162,7 +205,6 @@ export async function clearCurrentJob() {
     if (currentId && !allowConcurentRequests) {
         job = undefined;
         lastCallbacks?.cancel?.({ id: currentId });
-        lastCallbacks = undefined;
         await cancelJob();
     }
 }
@@ -176,14 +218,21 @@ function supportsSSE() {
 let startedWatchingJob = undefined;
 export async function watchJob(testId, callbacks) {
     logOffset = 0;
+    resultStreamOffset = 0;
     syncIteration = 0;
     errorIteration = 0;
     currentId = testId;
-    job = undefined;
+    if (loadPlaceholderJobOnStart) {
+        job = structuredClone(loadPlaceholderJobOnStart);
+    }
+    else {
+        job = undefined;
+    }
     startedWatchingJob = Date.now();
     // Clean up any existing SSE connection
     currentEventSource?.close();
     currentEventSource = undefined;
+    lastCallbacks = callbacks;
     // Try SSE first, fall back to polling if needed
     if (supportsSSE()) {
         await loadTestJobWithSSE(testId, 0, callbacks);
@@ -237,9 +286,24 @@ function updateJobFromProgress(previewJobUpdates, job, callbacks) {
             job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs);
         }
     }
+    if (previewJobUpdates.new_result_stream) {
+        if (!job.result_stream) {
+            job.result_stream = previewJobUpdates.new_result_stream;
+        }
+        else {
+            job.result_stream = job.result_stream.concat(previewJobUpdates.new_result_stream);
+        }
+        callbacks?.resultStreamUpdate?.({
+            id: job.id,
+            result_stream: job.result_stream
+        });
+    }
     if (previewJobUpdates.log_offset) {
         logOffset = previewJobUpdates.log_offset ?? 0;
     }
+    if (previewJobUpdates.stream_offset) {
+        resultStreamOffset = previewJobUpdates.stream_offset ?? 0;
+    }
     if (previewJobUpdates.flow_status) {
         job.flow_status = previewJobUpdates.flow_status;
     }
@@ -252,9 +316,10 @@ function updateJobFromProgress(previewJobUpdates, job, callbacks) {
     if (job &&
         (previewJobUpdates.running ||
             previewJobUpdates.progress ||
-            previewJobUpdates.new_logs ||
+            previewJobUpdates.log_offset ||
             previewJobUpdates.flow_status ||
-            previewJobUpdates.mem_peak)) {
+            previewJobUpdates.mem_peak ||
+            previewJobUpdates.stream_offset)) {
         callbacks?.change?.(job);
     }
 }
@@ -288,7 +353,7 @@ async function loadTestJob(id, callbacks) {
                 job = await JobService.getJob({
                     workspace: workspace,
                     id,
-                    noLogs: lazyLogs || onlyResult || noLogs,
+                    noLogs: onlyResult || noLogs,
                     noCode
                 });
             }
@@ -343,6 +408,7 @@ async function onJobCompleted(id, job, callbacks) {
         }
         callbacks?.change?.(job);
         clearCurrentId();
+        lastCompletedJobId = id;
     }
 }
 function setNoPingTimeout(id, attempt, callbacks) {
@@ -364,16 +430,24 @@ function isCurrentJob(id) {
 }
 async function loadTestJobWithSSE(id, attempt, callbacks) {
     let isCompleted = false;
+    let resultOnlyResultStream = '';
     if (isCurrentJob(id)) {
         try {
             // First load the job to get initial state
-            if (!job && !onlyResult) {
+            if ((!job || job.id == '') && !onlyResult) {
                 job = await JobService.getJob({
                     workspace: workspace,
                     id,
-                    noLogs: lazyLogs || noLogs,
+                    noLogs: noLogs,
                     noCode
                 });
+                callbacks?.change?.(job);
+            }
+            if (!onlyResult) {
+                callbacks?.resultStreamUpdate?.({
+                    id,
+                    result_stream: undefined
+                });
             }
             // If job is already completed, don't start SSE
             if (job?.type === 'CompletedJob') {
@@ -411,6 +485,12 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                 if (startedWatchingJob && startedWatchingJob > Date.now() - 5000) {
                     params.set('fast', 'true');
                 }
+                if (noLogs) {
+                    params.set('no_logs', 'true');
+                }
+                if (resultStreamOffset) {
+                    params.set('stream_offset', resultStreamOffset.toString());
+                }
                 const sseUrl = `/api/w/${workspace}/jobs_u/getupdate_sse/${id}?${params.toString()}`;
                 currentEventSource = new EventSource(sseUrl);
                 setNoPingTimeout(id, attempt, callbacks);
@@ -452,6 +532,14 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                         else if (onlyResult && callbacks?.running && previewJobUpdates.running) {
                             callbacks?.running?.({ id });
                         }
+                        if (onlyResult && previewJobUpdates.new_result_stream) {
+                            resultOnlyResultStream = resultOnlyResultStream.concat(previewJobUpdates.new_result_stream);
+                            // console.log('resultOnlyResultStream', resultOnlyResultStream)
+                            callbacks?.resultStreamUpdate?.({
+                                id,
+                                result_stream: resultOnlyResultStream
+                            });
+                        }
                         // Check if job is completed
                         if (previewJobUpdates.completed) {
                             currentEventSource?.close();
@@ -468,6 +556,7 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                             else {
                                 const njob = previewJobUpdates.job;
                                 njob.logs = job?.logs ?? '';
+                                njob.result_stream = job?.result_stream ?? '';
                                 job = njob;
                                 onJobCompleted(id, job, callbacks);
                             }
@@ -481,9 +570,16 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                     console.warn('SSE error:', error);
                     currentEventSource?.close();
                     currentEventSource = undefined;
-                    if (attempt < 3) {
-                        console.log(`SSE error (1), retrying ...  attempt: ${attempt + 1}/3`);
-                        setTimeout(() => loadTestJobWithSSE(id, attempt + 1, callbacks), 1000);
+                    let delay = 1000;
+                    let isNoLogsChange = error.type == noLogsChangeRestartEvent;
+                    if (isNoLogsChange) {
+                        delay = 0;
+                    }
+                    if (attempt < 3 || isNoLogsChange) {
+                        if (!isNoLogsChange) {
+                            console.log(`SSE error (1), retrying ...  attempt: ${attempt + 1}/3`);
+                        }
+                        setTimeout(() => loadTestJobWithSSE(id, attempt + 1, callbacks), delay);
                     }
                     else {
                         // Fall back to polling on error

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

@@ -1,4 +1,4 @@
-import { type Job } from '../gen';
+import { type Job, type OpenFlow } from '../gen';
 import type { SupportedLanguage } from '../common';
 export type Callbacks = {
     done?: (x: Job & {
@@ -22,10 +22,20 @@ export type Callbacks = {
     running?: ({ id }: {
         id: string;
     }) => void;
+    resultStreamUpdate?: ({ id, result_stream }: {
+        id: string;
+        result_stream?: string;
+    }) => void;
+    loadExtraLogs?: ({ id, logs }: {
+        id: string;
+        logs: string;
+    }) => void;
 };
 interface Props {
     isLoading?: boolean;
-    job?: Job | undefined;
+    job?: (Job & {
+        result_stream?: string;
+    }) | undefined;
     noCode?: boolean;
     noLogs?: boolean;
     workspaceOverride?: string | undefined;
@@ -33,8 +43,8 @@ interface Props {
     allowConcurentRequests?: boolean;
     jobUpdateLastFetch?: Date | undefined;
     toastError?: boolean;
-    lazyLogs?: boolean;
     onlyResult?: boolean;
+    loadPlaceholderJobOnStart?: Job;
     scriptProgress?: number | undefined;
     children?: import('svelte').Snippet<[any]>;
 }
@@ -43,6 +53,9 @@ declare const JobLoader: import("svelte").Component<Props, {
     runScriptByPath: (path: string, args: Record<string, any>, callbacks?: Callbacks) => Promise<string>;
     runScriptByHash: (hash: string, args: Record<string, any>, callbacks?: Callbacks) => Promise<string>;
     runFlowByPath: (path: string, args: Record<string, any>, callbacks?: Callbacks) => Promise<string>;
+    runFlowPreview: (args: Record<string, any>, flow: OpenFlow & {
+        tag?: string;
+    }, callbacks?: Callbacks) => Promise<string>;
     getLogs: () => Promise<void>;
     runPreview: (path: string | undefined, code: string, lang: SupportedLanguage | undefined, args: Record<string, any>, tag: string | undefined, lock?: string, hash?: string, callbacks?: Callbacks) => Promise<string>;
     cancelJob: () => Promise<void>;

package/package/components/LogViewer.svelte

@@ -15,7 +15,8 @@ import AnsiUp from 'ansi_up';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import { JobService } from '../gen';
 import Tooltip from './Tooltip.svelte';
-let { content, isLoading, duration = undefined, mem = undefined, wrapperClass = '', jobId = undefined, tag, small = false, drawerOpen = $bindable(false), noMaxH = false, noAutoScroll = false, download = true, customEmptyMessage = 'No logs are available yet', tagLabel = undefined } = $props();
+import { twMerge } from 'tailwind-merge';
+let { content, isLoading, duration = undefined, mem = undefined, wrapperClass = '', jobId = undefined, tag, small = false, drawerOpen = $bindable(false), noMaxH = false, noAutoScroll = false, download = true, customEmptyMessage = 'No logs are available yet', tagLabel = undefined, noPadding = false } = $props();
 // @ts-ignore
 const ansi_up = $state(new AnsiUp());
 ansi_up.use_classes = true;
@@ -213,7 +214,12 @@ let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != unde
 					: 'top-2'}  left-36">mem peak: {(mem / 1024).toPrecision(4)}MB</span
 			>
 		{/if}
-		<pre class="whitespace-pre break-words {small ? '!text-2xs' : '!text-xs'} w-full p-2"
+		<pre
+			class={twMerge(
+				'whitespace-pre break-words w-full',
+				small ? '!text-2xs' : '!text-xs',
+				noPadding ? '' : 'p-2'
+			)}
 			>{#if content}{@const len =
 					(content?.length ?? 0) +
 					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button onclick={getStoreLogs}

package/package/components/LogViewer.svelte.d.ts

@@ -13,6 +13,7 @@ interface Props {
     download?: boolean;
     customEmptyMessage?: string;
     tagLabel?: string;
+    noPadding?: boolean;
 }
 declare const LogViewer: import("svelte").Component<Props, {
     scrollToBottom: () => void;

package/package/components/LogViewerHeader.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import { FoldVertical, UnfoldVertical } from 'lucide-svelte';
+let { showResultsInputs = $bindable(), toggleExpandAll, allExpanded } = $props();
+</script>
+
+<div class="flex justify-end gap-4 items-center p-2 bg-surface-secondary border-b">
+	<div class="flex items-center gap-2 whitespace-nowrap">
+		<label
+			for="showResultsInputs"
+			class="text-xs text-tertiary hover:text-primary transition-colors">Show inputs/results</label
+		>
+		<div class="flex-shrink-0">
+			<input
+				type="checkbox"
+				name="showResultsInputs"
+				id="showResultsInputs"
+				bind:checked={showResultsInputs}
+				class="w-3 h-4 accent-primary -my-1"
+			/>
+		</div>
+	</div>
+	<button
+		onclick={toggleExpandAll}
+		class="text-xs text-tertiary hover:text-primary transition-colors flex items-center gap-2 min-w-24 justify-end"
+	>
+		{allExpanded ? 'Collapse All' : 'Expand All'}
+		{#if allExpanded}
+			<FoldVertical size={16} />
+		{:else}
+			<UnfoldVertical size={16} />
+		{/if}
+	</button>
+</div>

package/package/components/LogViewerHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    showResultsInputs: boolean | undefined;
+    toggleExpandAll: () => void;
+    allExpanded: boolean | undefined;
+}
+declare const LogViewerHeader: import("svelte").Component<Props, {}, "showResultsInputs">;
+type LogViewerHeader = ReturnType<typeof LogViewerHeader>;
+export default LogViewerHeader;

package/package/components/Login.svelte

@@ -5,9 +5,10 @@ import Google from './icons/brands/Google.svelte';
 import Microsoft from './icons/brands/Microsoft.svelte';
 import Okta from './icons/brands/Okta.svelte';
 import Auth0 from './icons/brands/Auth0.svelte';
+import NextcloudIcon from './icons/NextcloudIcon.svelte';
 import { OauthService, UserService, WorkspaceService } from '../gen';
 import { usersWorkspaceStore, workspaceStore, userStore } from '../stores';
-import { classNames, emptyString, parseQueryParams } from '../utils';
+import { classNames, emptyString, escapeHtml, parseQueryParams } from '../utils';
 import { base } from '../base';
 import { getUserExt } from '../user';
 import { sendUserToast } from '../toast';
@@ -47,6 +48,11 @@ const providers = [
         type: 'auth0',
         name: 'Auth0',
         icon: Auth0
+    },
+    {
+        type: 'nextcloud',
+        name: 'Nextcloud',
+        icon: NextcloudIcon
     }
 ];
 const providersType = providers.map((p) => p.type);
@@ -227,7 +233,7 @@ function storeRedirect(provider) {
     }
 }
 $effect(() => {
-    error && sendUserToast(error, true);
+    error && sendUserToast(escapeHtml(error), true);
 });
 </script>
 

package/package/components/MemoryFootprintViewer.svelte

@@ -49,7 +49,7 @@ $: jobUpdateLastFetch && loadMetricsData();
 
 <div class="relative max-h-100">
 	{#if !$enterpriseLicense}
-		<Alert type="error" title="Enterprise Edition only feature">
+		<Alert type="warning" title="Enterprise Edition only feature">
 			Job metrics are only available on Windmill Enterprise Edition.
 		</Alert>
 	{:else if (jobMemoryStats?.length ?? 0) === 0}

package/package/components/ModulePreviewForm.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { allTrue } from '../utils';
+<script lang="ts">import { allTrue, sendUserToast } from '../utils';
 import { RefreshCw } from 'lucide-svelte';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
@@ -53,10 +53,11 @@ async function loadResourceTypes() {
     resourceTypes = await getResourceTypes();
 }
 loadResourceTypes();
-let args = $state({});
 onMount(() => {
-    testSteps?.updateStepArgs(mod.id, $flowStateStore, flowStore?.val, previewArgs?.val);
-    args = testSteps?.getStepArgs(mod.id) ?? { value: {} };
+    if (!testSteps) {
+        sendUserToast('testSteps module not initialized. Preview will not work.', true);
+    }
+    testSteps?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
 });
 </script>
 
@@ -71,14 +72,17 @@ onMount(() => {
 					)}
 					data-arg={argName}
 				>
-					{#if typeof args.value == 'object' && schema?.properties?.[argName]}
+					{#if schema?.properties?.[argName]}
 						<ArgInput
 							{resourceTypes}
 							minW={false}
 							autofocus={autofocus && !focusArg && i == 0}
 							label={argName}
 							description={schema.properties[argName].description}
-							bind:value={args.value[argName]}
+							bind:value={
+								() => testSteps?.getStepInputArgs(mod.id, argName),
+								(v) => testSteps?.setStepInputArgs(mod.id, argName, v)
+							}
 							type={schema.properties[argName].type}
 							oneOf={schema.properties[argName].oneOf}
 							required={schema?.required?.includes(argName)}

package/package/components/ModulePreviewResultViewer.svelte

@@ -1,21 +1,28 @@
 <script lang="ts">import LogViewer from './LogViewer.svelte';
 import JobProgressBar from './jobs/JobProgressBar.svelte';
 import ScriptFix from './copilot/ScriptFix.svelte';
+import {} from '../gen';
 import OutputPickerInner from './flows/propPicker/OutputPickerInner.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getContext } from 'svelte';
 import { getStringError } from './copilot/chat/utils';
+import AiAgentLogViewer from './AIAgentLogViewer.svelte';
 let { lang, editor, diffEditor, loopStatus = undefined, lastJob = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false, tagLabel = undefined } = $props();
 const { testSteps } = getContext('FlowEditorContext');
 let selectedJob = $state(undefined);
 let preview = $state(undefined);
 let jobProgressReset = $state(() => { });
+$effect(() => {
+    if (preview != undefined && testJob) {
+        preview = undefined;
+    }
+});
 let forceJson = $state(false);
 const logJob = $derived(testJob ?? selectedJob);
 </script>
 
 <Splitpanes horizontal>
-	<Pane size={50} minSize={10} class="text-sm text-tertiary">
+	<Pane size={65} minSize={10} class="text-sm text-tertiary">
 		{#if scriptProgress}
 			<JobProgressBar
 				job={testJob}
@@ -50,7 +57,7 @@ const logJob = $derived(testJob ?? selectedJob);
 			{/snippet}
 		</OutputPickerInner>
 	</Pane>
-	<Pane size={50} minSize={10}>
+	<Pane size={35} minSize={10}>
 		{#if (mod.mock?.enabled && preview != 'job') || preview == 'mock'}
 			<LogViewer
 				small
@@ -60,6 +67,15 @@ const logJob = $derived(testJob ?? selectedJob);
 				customEmptyMessage="Using pinned data"
 				{tagLabel}
 			/>
+		{:else if mod.value.type === 'aiagent' && logJob?.type === 'CompletedJob'}
+			<AiAgentLogViewer
+				tools={mod.value.tools}
+				agentJob={{
+					...logJob,
+					type: 'CompletedJob'
+				}}
+				workspaceId={logJob.workspace_id}
+			/>
 		{:else}
 			<LogViewer
 				small

package/package/components/ModulePreviewResultViewer.svelte.d.ts

@@ -1,6 +1,6 @@
 import type DiffEditor from './DiffEditor.svelte';
 import type Editor from './Editor.svelte';
-import type { Script, Job, FlowModule } from '../gen';
+import { type Script, type Job, type FlowModule } from '../gen';
 interface Props {
     lang: Script['language'];
     editor: Editor | undefined;

package/package/components/ModuleTest.svelte

@@ -4,17 +4,18 @@ import { getScriptByPath } from '../scripts';
 import { getContext } from 'svelte';
 import JobLoader, {} from './JobLoader.svelte';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
+import { loadSchemaFromModule } from './flows/flowInfers';
 let { mod, testJob = $bindable(undefined), testIsLoading = $bindable(false), noEditor = false, scriptProgress = $bindable(undefined) } = $props();
 const { flowStore, flowStateStore, pathStore, testSteps, previewArgs, modulesTestStates } = getContext('FlowEditorContext');
 let jobLoader = $state(undefined);
 let jobProgressReset = () => { };
 let stepHistoryLoader = getStepHistoryLoaderContext();
 export function runTestWithStepArgs() {
-    runTest(testSteps.getStepArgs(mod.id)?.value);
+    runTest(testSteps.getStepArgs(mod.id));
 }
 export function loadArgsAndRunTest() {
-    testSteps?.updateStepArgs(mod.id, $flowStateStore, flowStore?.val, previewArgs?.val);
-    runTest(testSteps.getStepArgs(mod.id)?.value);
+    testSteps?.updateStepArgs(mod.id, flowStateStore.val, flowStore?.val, previewArgs?.val);
+    runTest(testSteps.getStepArgs(mod.id));
 }
 export async function runTest(args) {
     // Not defined if JobProgressBar not loaded
@@ -46,36 +47,65 @@ export async function runTest(args) {
     else if (val.type == 'flow') {
         await jobLoader?.runFlowByPath(val.path, args, callbacks);
     }
+    else if (val.type == 'aiagent') {
+        const { schema } = await loadSchemaFromModule(mod);
+        const inputTransforms = Object.fromEntries(Object.keys(args).map((key) => [
+            key,
+            {
+                expr: `flow_input.${key}`,
+                type: 'javascript'
+            }
+        ]));
+        await jobLoader?.runFlowPreview(args, {
+            value: {
+                modules: [
+                    {
+                        ...mod,
+                        value: {
+                            type: 'aiagent',
+                            tools: mod.value.type == 'aiagent' ? mod.value.tools : [],
+                            input_transforms: inputTransforms
+                        }
+                    }
+                ]
+            },
+            summary: '',
+            schema
+        }, callbacks);
+    }
     else {
         throw Error('Not supported module type');
     }
 }
 function jobDone(testJob) {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob') {
-        if ($flowStateStore[mod.id]) {
-            $flowStateStore[mod.id].previewResult = testJob.result;
-            $flowStateStore[mod.id].previewSuccess = testJob.success;
-            $flowStateStore[mod.id].previewJobId = testJob.id;
-            $flowStateStore[mod.id].previewWorkspaceId = testJob.workspace_id;
-            $flowStateStore = $flowStateStore;
+        if (flowStateStore.val[mod.id]) {
+            flowStateStore.val[mod.id] = {
+                ...flowStateStore.val[mod.id],
+                previewResult: testJob.result,
+                previewSuccess: testJob.success,
+                previewJobId: testJob.id
+            };
         }
         stepHistoryLoader?.resetInitial(mod.id);
     }
-    modulesTestStates.states[mod.id].testJob = undefined;
+    if (modulesTestStates.states[mod.id]) {
+        modulesTestStates.states[mod.id].testJob = testJob;
+    }
 }
 export function cancelJob() {
     modulesTestStates.states[mod.id]?.cancel?.();
 }
 $effect(() => {
     // Update testIsLoading to read the state from parent components
-    testIsLoading = modulesTestStates.states[mod.id]?.loading ?? false;
+    testIsLoading = modulesTestStates.states?.[mod.id]?.loading ?? false;
 });
 $effect(() => {
     // Update testJob to read the state from parent components
-    testJob = modulesTestStates.states[mod.id]?.testJob;
+    testJob = modulesTestStates.states?.[mod.id]?.testJob;
 });
 modulesTestStates.states[mod.id] = {
-    ...(modulesTestStates.states[mod.id] ?? { loading: false }),
+    ...(modulesTestStates.states?.[mod.id] ?? { loading: false }),
     loading: testIsLoading,
     testJob: testJob
 };
@@ -90,13 +120,26 @@ modulesTestStates.states[mod.id] = {
 		() => modulesTestStates.states[mod.id]?.loading ?? false,
 		(v) => {
 			let newLoading = v ?? false
-			if (modulesTestStates.states[mod.id]?.loading !== newLoading) {
+			if (modulesTestStates.states && modulesTestStates.states?.[mod.id]?.loading !== newLoading) {
 				modulesTestStates.states[mod.id] = {
-					...(modulesTestStates.states[mod.id] ?? {}),
-					loading: newLoading
+					...(modulesTestStates.states?.[mod.id] ?? {}),
+					loading: newLoading,
+					hiddenInGraph: false
 				}
 			}
 		}
 	}
 	bind:job={modulesTestStates.states[mod.id].testJob}
+	loadPlaceholderJobOnStart={{
+		type: 'QueuedJob',
+		id: '',
+		running: false,
+		canceled: false,
+		job_kind: 'preview',
+		permissioned_as: '',
+		is_flow_step: false,
+		email: '',
+		visible_to_owner: true,
+		tag: ''
+	}}
 />