windmill-components 1.522.0 → 1.531.0

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

@@ -1,7 +1,6 @@
 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';
+import { type Job, type FlowModuleValue, type CompletedJob } from '../gen';
+import { type DurationStatus, type GlobalIterationBounds, type GraphModuleState } from './graph';
 interface Props {
     jobId: string;
     initialJob?: Job | undefined;
@@ -14,29 +13,32 @@ interface Props {
         branchall?: boolean;
     } | undefined;
     innerModule?: FlowModuleValue | undefined;
-    globalRefreshes?: Record<string, (clear: any, root: any) => Promise<void>>;
     render?: boolean;
     isOwner?: boolean;
     selectedNode?: string | undefined;
-    globalModuleStates: Writable<Record<string, GraphModuleState>>[];
-    globalDurationStatuses: Writable<Record<string, DurationStatus>>[];
-    childFlow?: boolean;
+    globalModuleStates: Record<string, GraphModuleState>[];
+    globalDurationStatuses?: Record<string, DurationStatus>[];
+    globalIterationBounds: Record<string, GlobalIterationBounds>;
+    isSelectedBranch?: boolean;
     isSubflow?: boolean;
     reducedPolling?: boolean;
     wideResults?: boolean;
     hideFlowResult?: boolean;
+    topModuleStates?: Record<string, GraphModuleState>;
     workspace?: string | undefined;
     prefix?: string | undefined;
-    subflowParentsGlobalModuleStates?: Writable<Record<string, GraphModuleState>>[];
-    subflowParentsDurationStatuses?: Writable<Record<string, DurationStatus>>[];
+    subflowParentsGlobalModuleStates?: Record<string, GraphModuleState>[];
+    subflowParentsDurationStatuses?: Record<string, DurationStatus>[];
     isForloopSelected?: boolean;
-    parentRecursiveRefresh?: Record<string, (clear: any, root: any) => Promise<void>>;
+    updateRecursiveRefreshFn?: (jobId: string, updateFn: (clear: any, root: any) => Promise<void>) => void;
+    refreshGlobal: (moduleId: string, clear: boolean, root: string) => Promise<void>;
+    updateGlobalRefresh: (moduleId: string, updateFn: (clear: any, root: any) => Promise<void>) => void;
     job?: (Job & {
         result_stream?: string;
     }) | undefined;
     rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states';
-    localModuleStates?: Writable<Record<string, GraphModuleState>>;
-    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
+    localModuleStates?: Record<string, GraphModuleState>;
+    localDurationStatuses?: Record<string, DurationStatus>;
     onResultStreamUpdate?: ({ jobId, result_stream }: {
         jobId: string;
         result_stream?: string;
@@ -44,26 +46,18 @@ interface Props {
     customUi?: {
         tagLabel?: string | undefined;
     };
+    graphTabOpen: boolean;
+    isNodeSelected: boolean;
+    loadExtraLogs?: (logs: string) => void;
+    onStart?: () => void;
+    onJobsLoaded?: ({ job, force }: {
+        job: Job;
+        force: boolean;
+    }) => void;
+    onDone?: ({ job }: {
+        job: CompletedJob;
+    }) => void;
 }
-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>;
-    done: CustomEvent<any>;
-    start: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "job" | "globalRefreshes" | "selectedNode" | "parentRecursiveRefresh" | "rightColumnSelect">;
-type FlowStatusViewerInner = InstanceType<typeof FlowStatusViewerInner>;
+declare const FlowStatusViewerInner: import("svelte").Component<Props, {}, "job" | "localModuleStates" | "selectedNode" | "rightColumnSelect" | "localDurationStatuses">;
+type FlowStatusViewerInner = ReturnType<typeof FlowStatusViewerInner>;
 export default FlowStatusViewerInner;

package/package/components/FlowTimeline.svelte

@@ -1,22 +1,23 @@
-<script lang="ts">import { debounce, displayDate, msToSec } from '../utils';
+<script lang="ts">import { debounce, displayDate, msToSec, readFieldsRecursively } from '../utils';
 import { onDestroy, untrack } from 'svelte';
 import { getDbClockNow } from '../forLater';
 import { Loader2 } from 'lucide-svelte';
 import TimelineBar from './TimelineBar.svelte';
 import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
-let { selfWaitTime = undefined, aggregateWaitTime = undefined, flowModules, durationStatuses, flowDone = false } = $props();
+let { selfWaitTime = undefined, aggregateWaitTime = undefined, flowModules, durationStatuses, flowDone = false, decreaseIterationFrom, buildSubflowKey, globalIterationBounds } = $props();
 let min = $state(undefined);
 let max = $state(undefined);
 let total = $state(undefined);
 let items = $state(undefined);
-let { debounced, clearDebounce } = debounce(() => computeItems($durationStatuses), 30);
+let { debounced, clearDebounce } = debounce(() => computeItems(durationStatuses), 30);
 $effect(() => {
-    flowDone != undefined && $durationStatuses && untrack(() => debounced());
+    readFieldsRecursively(durationStatuses);
+    flowDone != undefined && durationStatuses && untrack(() => debounced());
 });
 export function reset() {
     min = undefined;
     max = undefined;
-    items = computeItems($durationStatuses);
+    items = computeItems(durationStatuses);
 }
 function computeItems(durationStatuses) {
     let nmin = undefined;
@@ -126,20 +127,17 @@ onDestroy(() => {
 			</div>
 		{/if}
 		{#each Object.values(flowModules) as k (k)}
+			{@const iterationFrom = globalIterationBounds[buildSubflowKey(k)]?.iteration_from ?? 0}
 			<div class="overflow-auto max-h-60 shadow-inner dark:shadow-gray-700 relative">
-				{#if ($durationStatuses?.[k]?.iteration_from ?? 0) > 0}
+				{#if iterationFrom > 0}
 					<div class="w-full flex flex-row-reverse sticky top-0">
 						<button
 							class="!text-secondary underline mr-2 text-2xs text-right whitespace-nowrap"
 							onclick={() => {
-								let r = $durationStatuses[k]
-								if (r.iteration_from) {
-									r.iteration_from -= 20
-									$durationStatuses = $durationStatuses
-								}
+								decreaseIterationFrom?.(k, 20)
 							}}
-							>Viewing iterations {$durationStatuses[k].iteration_from} to {$durationStatuses[k]
-								.iteration_total}. Load more
+							>Viewing iterations {iterationFrom} to {globalIterationBounds[buildSubflowKey(k)]
+								?.iteration_total}. Load more
 						</button>
 					</div>
 				{/if}

package/package/components/FlowTimeline.svelte.d.ts

@@ -1,18 +1,19 @@
-import type { Writable } from 'svelte/store';
+import type { GlobalIterationBounds } from './graph';
 interface Props {
     selfWaitTime?: number | undefined;
     aggregateWaitTime?: number | undefined;
     flowModules: string[];
-    durationStatuses: Writable<Record<string, {
+    durationStatuses: Record<string, {
         byJob: Record<string, {
             created_at?: number;
             started_at?: number;
             duration_ms?: number;
         }>;
-        iteration_from?: number;
-        iteration_total?: number;
-    }>>;
+    }>;
     flowDone?: boolean;
+    decreaseIterationFrom?: (key: string, amount: number) => void;
+    buildSubflowKey: (key: string) => string;
+    globalIterationBounds: Record<string, GlobalIterationBounds>;
 }
 declare const FlowTimeline: import("svelte").Component<Props, {
     reset: () => void;

package/package/components/HighlightCode.svelte

@@ -12,6 +12,7 @@ import rust from 'svelte-highlight/languages/rust';
 import csharp from 'svelte-highlight/languages/csharp';
 import yaml from 'svelte-highlight/languages/yaml';
 import java from 'svelte-highlight/languages/java';
+import ruby from 'svelte-highlight/languages/ruby';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
@@ -66,7 +67,9 @@ function getLang(lang) {
             return yaml;
         case 'java':
             return java;
-        // for related places search: ADD_NEW_LANG
+        case 'ruby':
+            return ruby;
+        // for related places search: ADD_NEW_LANG 
         default:
             return typescript;
     }

package/package/components/IconedResourceType.svelte

@@ -26,20 +26,24 @@
 	} = $props()
 
 	let iconComponent = $derived(
-		name === 'teams'
-			? APP_TO_ICON_COMPONENT.ms_teams_webhook
-			: APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
+		name
+			? name === 'teams'
+				? APP_TO_ICON_COMPONENT.ms_teams_webhook
+				: APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
+			: undefined
 	)
+
+	let widthInPixels = $derived(parseInt(width))
 </script>
 
-<div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
+<div class="truncate flex flex-row gap-2 items-center {center ? 'justify-center ' : ''} -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
 	{#if iconComponent}
 		{@const SvelteComponent = iconComponent}
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
-			<SvelteComponent {height} {width} />
+			<SvelteComponent {height} {width} size={widthInPixels} />
 		</span>
 	{:else if formatExtension}
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>

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, 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
@@ -23,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(() => {
@@ -31,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) {
@@ -44,6 +73,7 @@ function clearCurrentId() {
 export async function abstractRun(fn, callbacks) {
     try {
         isLoading = true;
+        lastCompletedJobId = undefined;
         clearCurrentJob();
         lastCallbacks = callbacks;
         noPingTimeout = undefined;
@@ -101,6 +131,16 @@ 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;
@@ -145,7 +185,6 @@ export async function cancelJob() {
     const id = currentId;
     if (id) {
         lastCallbacks?.cancel?.({ id });
-        lastCallbacks = undefined;
         clearCurrentId();
         // Clean up SSE connection
         currentEventSource?.close();
@@ -166,7 +205,6 @@ export async function clearCurrentJob() {
     if (currentId && !allowConcurentRequests) {
         job = undefined;
         lastCallbacks?.cancel?.({ id: currentId });
-        lastCallbacks = undefined;
         await cancelJob();
     }
 }
@@ -184,11 +222,17 @@ export async function watchJob(testId, callbacks) {
     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);
@@ -364,6 +408,7 @@ async function onJobCompleted(id, job, callbacks) {
         }
         callbacks?.change?.(job);
         clearCurrentId();
+        lastCompletedJobId = id;
     }
 }
 function setNoPingTimeout(id, attempt, callbacks) {
@@ -389,13 +434,14 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
     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: noLogs,
                     noCode
                 });
+                callbacks?.change?.(job);
             }
             if (!onlyResult) {
                 callbacks?.resultStreamUpdate?.({
@@ -524,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 & {
@@ -26,6 +26,10 @@ export type Callbacks = {
         id: string;
         result_stream?: string;
     }) => void;
+    loadExtraLogs?: ({ id, logs }: {
+        id: string;
+        logs: string;
+    }) => void;
 };
 interface Props {
     isLoading?: boolean;
@@ -40,6 +44,7 @@ interface Props {
     jobUpdateLastFetch?: Date | undefined;
     toastError?: boolean;
     onlyResult?: boolean;
+    loadPlaceholderJobOnStart?: Job;
     scriptProgress?: number | undefined;
     children?: import('svelte').Snippet<[any]>;
 }
@@ -48,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/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,15 +1,22 @@
 <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>
@@ -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;