windmill-components 1.504.6 → 1.511.0

package/package/components/JsonEditor.svelte

@@ -1,16 +1,12 @@
-<script lang="ts">import '@codingame/monaco-vscode-standalone-json-language-features';
+<script lang="ts">import { run } from 'svelte/legacy';
+import '@codingame/monaco-vscode-standalone-json-language-features';
 import SimpleEditor from './SimpleEditor.svelte';
 import { createEventDispatcher } from 'svelte';
 import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
 import Button from './common/button/Button.svelte';
-export let code;
-export let value = undefined;
-export let error = '';
-export let editor = undefined;
-export let small = false;
-export let loadAsync = false;
-$: tooBig = code && code?.length > 1000000;
-let loadTooBigAnyway = false;
+let { code = $bindable(), value = $bindable(undefined), error = $bindable(), editor = $bindable(undefined), small = false, loadAsync = false, class: clazz = undefined, disabled = false, fixedOverflowWidgets = true } = $props();
+let tooBig = $derived(code && code?.length > 1000000);
+let loadTooBigAnyway = $state(false);
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 function parseJson() {
@@ -28,7 +24,9 @@ function parseJson() {
         error = e.message;
     }
 }
-$: code != undefined && parseJson();
+run(() => {
+    code != undefined && parseJson();
+});
 </script>
 
 {#if tooBig && !loadTooBigAnyway}
@@ -51,7 +49,9 @@ $: code != undefined && parseJson();
 				autoHeight
 				lang="json"
 				bind:code
-				class={$$props.class}
+				class={clazz}
+				{disabled}
+				{fixedOverflowWidgets}
 			/>
 		</div>
 		{#if error != ''}

package/package/components/JsonEditor.svelte.d.ts

@@ -1,5 +1,16 @@
-import { SvelteComponent } from "svelte";
 import '@codingame/monaco-vscode-standalone-json-language-features';
+import SimpleEditor from './SimpleEditor.svelte';
+interface Props {
+    code: string | undefined;
+    value?: any;
+    error?: string;
+    editor?: SimpleEditor | undefined;
+    small?: boolean;
+    loadAsync?: boolean;
+    class?: string | undefined;
+    disabled?: boolean;
+    fixedOverflowWidgets?: boolean;
+}
 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;
@@ -13,65 +24,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const JsonEditor: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    code: string | undefined;
-    value?: any;
-    error?: string | undefined;
-    editor?: (SvelteComponent<{
-        lang: string;
-        code?: string;
-        hash?: string;
-        cmdEnterAction?: () => void;
-        formatAction?: () => void;
-        automaticLayout?: boolean;
-        extraLib?: string;
-        placeholder?: string;
-        disableSuggestions?: boolean;
-        disableLinting?: boolean;
-        hideLineNumbers?: boolean;
-        shouldBindKey?: boolean;
-        autoHeight?: boolean;
-        fixedOverflowWidgets?: boolean;
-        small?: boolean;
-        domLib?: boolean;
-        autofocus?: boolean;
-        allowVim?: boolean;
-        tailwindClasses?: string[];
-        class?: string;
-        loadAsync?: boolean;
-        initialCursorPos?: import("monaco-editor").IPosition;
-        key?: string;
-    }, {
-        change: CustomEvent<any>;
-        focus: CustomEvent<any>;
-        blur: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    }, {}> & {
-        $$bindings?: "code" | undefined;
-    } & {
-        getCode: () => string;
-        insertAtCursor: (code: string) => void;
-        setCode: (ncode: string, formatCode?: boolean) => void;
-        formatCode: () => void;
-        format: () => void;
-        focus: () => void;
-        getSelectedLines: () => string | undefined;
-        onDidChangeCursorSelection: (f: (e: import("monaco-editor").editor.ICursorSelectionChangedEvent) => void) => import("monaco-editor").IDisposable | undefined;
-        show: () => void;
-        hide: () => void;
-        setSuggestion: (value: string) => void;
-        setCursorToEnd: () => void;
-    }) | undefined;
-    small?: boolean | undefined;
-    loadAsync?: boolean | undefined;
-}, {
+declare const JsonEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "value" | "error" | "code" | "editor">;
 type JsonEditor = InstanceType<typeof JsonEditor>;
 export default JsonEditor;

package/package/components/Label.svelte

@@ -1,14 +1,9 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import Required from './Required.svelte';
-export let label = undefined;
-export let primary = false;
-export let disabled = false;
-export let headless = false;
-export let required = false;
-export let headerClass = '';
+let { label = undefined, primary = false, disabled = false, headless = false, required = false, headerClass = '', class: clazz = undefined, header, error, action, children } = $props();
 </script>
 
-<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
+<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', clazz)}>
 	<div class="flex flex-row justify-between items-center w-full">
 		{#if !headless}
 			<div class={twMerge('flex flex-row items-center gap-2', headerClass)}>
@@ -19,11 +14,11 @@ export let headerClass = '';
 						<Required required={true} />
 					{/if}
 				</span>
-				<slot name="header" />
+				{@render header?.()}
 			</div>
 		{/if}
-		<slot name="error" />
-		<slot name="action" />
+		{@render error?.()}
+		{@render action?.()}
 	</div>
-	<slot />
+	{@render children?.()}
 </div>

package/package/components/Label.svelte.d.ts

@@ -1,41 +1,16 @@
-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;
+interface Props {
+    label?: string | undefined;
+    primary?: boolean;
+    disabled?: boolean;
+    headless?: boolean;
+    required?: boolean;
+    headerClass?: string;
+    class?: string | undefined;
+    header?: import('svelte').Snippet;
+    error?: import('svelte').Snippet;
+    action?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Label: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    label?: string | undefined | undefined;
-    primary?: boolean | undefined;
-    disabled?: boolean | undefined;
-    headless?: boolean | undefined;
-    required?: boolean | undefined;
-    headerClass?: string | undefined;
-}, {
-    header: {};
-    error: {};
-    action: {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    header: {};
-    error: {};
-    action: {};
-    default: {};
-}, {}, string>;
-type Label = InstanceType<typeof Label>;
+declare const Label: import("svelte").Component<Props, {}, "">;
+type Label = ReturnType<typeof Label>;
 export default Label;

package/package/components/LightweightResourcePicker.svelte

@@ -1,31 +1,17 @@
 <script lang="ts">import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { createEventDispatcher, getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import { Plus, Loader2, Link2Off } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
-import { createDispatcherIfMounted } from '../createDispatcherIfMounted';
 import Select from './select/Select.svelte';
-const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
-export let initialValue = undefined;
-export let value = initialValue;
-export let resourceType = undefined;
-export let disablePortal = false;
-export let expressOAuthSetup = false;
-export let disabled = false;
-let open = false;
-let refreshCount = 0;
+let { value = $bindable(), resourceType = undefined, disablePortal = false, expressOAuthSetup = false, disabled = false } = $props();
+let open = $state(false);
+let refreshCount = $state(0);
 const appViewerContext = getContext('AppViewerContext');
-let valueSelect = initialValue || value
-    ? {
-        value: value ?? initialValue,
-        label: value ?? initialValue
-    }
-    : undefined;
-let collection = valueSelect ? [valueSelect] : [];
-let loading = true;
+let collection = $state(value ? [{ value, label: value }] : []);
+let loading = $state(true);
 async function loadResources(resourceType) {
     loading = true;
     try {
@@ -37,23 +23,23 @@ async function loadResources(resourceType) {
             label: x.path
         }));
         // TODO check if this is needed
-        if (!nc.find((x) => x.value == value) && (initialValue || value)) {
-            nc.push({ value: value ?? initialValue, label: value ?? initialValue });
+        if (!nc.find((x) => x.value == value) && value) {
+            nc.push({ value: value, label: value });
         }
         collection = nc;
         if (expressOAuthSetup && nc.length > 0) {
             value = nc[0].value;
-            valueSelect = nc[0];
         }
     }
     finally {
         loading = false;
     }
 }
-$: $workspaceStore && loadResources(resourceType);
-$: dispatchIfMounted('change', value);
-let darkMode = false;
-let drawer = undefined;
+$effect(() => {
+    $workspaceStore && resourceType && untrack(() => loadResources(resourceType));
+});
+let darkMode = $state(false);
+let drawer = $state(undefined);
 export function askNewResource() {
     refreshCount += 1;
     open = true;
@@ -77,7 +63,6 @@ export function askNewResource() {
 					on:refresh={async (e) => {
 						await loadResources(resourceType)
 						value = e.detail
-						valueSelect = { value, label: value }
 						open = false
 					}}
 				/>
@@ -105,7 +90,6 @@ export function askNewResource() {
 					on:refresh={async (e) => {
 						await loadResources(resourceType)
 						value = e.detail
-						valueSelect = { value, label: value }
 						drawer?.closeDrawer?.()
 						open = false
 					}}
@@ -141,7 +125,6 @@ export function askNewResource() {
 						const item = collection[0]
 						if (item) {
 							value = item.value
-							valueSelect = item
 						}
 					}}>Use existing</Button
 				>
@@ -151,15 +134,13 @@ export function askNewResource() {
 				{disabled}
 				{disablePortal}
 				bind:value={
-					() => valueSelect?.value,
+					() => value,
 					(v) => {
 						value = v
-						valueSelect = collection.find((x) => x.value === v)
 					}
 				}
 				onClear={() => {
 					value = undefined
-					valueSelect = undefined
 				}}
 				clearable
 				items={collection}
@@ -168,7 +149,7 @@ export function askNewResource() {
 			/>
 		{/if}
 		<div class="flex gap-1 items-center">
-			{#if valueSelect && expressOAuthSetup}
+			{#if value && expressOAuthSetup}
 				<Button
 					{disabled}
 					color="light"
@@ -177,15 +158,13 @@ export function askNewResource() {
 					btnClasses="w-8 px-0.5 py-1.5"
 					iconOnly
 					on:click={async () => {
-						if (valueSelect && valueSelect.label) {
-							value = undefined
+						if (value) {
 							await ResourceService.deleteResource({
 								workspace: appViewerContext?.workspace ?? $workspaceStore,
-								path: valueSelect.label
+								path: value
 							})
-							await loadResources(resourceType)
 							value = undefined
-							valueSelect = undefined
+							await loadResources(resourceType)
 						}
 					}}
 					startIcon={{ icon: Link2Off }}

package/package/components/LightweightResourcePicker.svelte.d.ts

@@ -1,28 +1,12 @@
-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 LightweightResourcePicker: $$__sveltets_2_IsomorphicComponent<{
-    initialValue?: string | undefined;
-    value?: string | undefined;
+interface Props {
+    value: string | undefined;
     resourceType?: string | undefined;
     disablePortal?: boolean;
     expressOAuthSetup?: boolean;
     disabled?: boolean;
-    askNewResource?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const LightweightResourcePicker: import("svelte").Component<Props, {
     askNewResource: () => void;
-}, string>;
-type LightweightResourcePicker = InstanceType<typeof LightweightResourcePicker>;
+}, "value">;
+type LightweightResourcePicker = ReturnType<typeof LightweightResourcePicker>;
 export default LightweightResourcePicker;

package/package/components/LogViewer.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">"use strict";
+<script lang="ts" module>"use strict";
 const s3LogPrefixes = [
     '\n[windmill] Previous logs have been saved to object storage at logs/',
     '\n[windmill] Previous logs have been saved to disk at logs/',
@@ -15,34 +15,17 @@ import AnsiUp from 'ansi_up';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import { JobService } from '../gen';
 import Tooltip from './Tooltip.svelte';
-export let content;
-export let isLoading;
-export let duration = undefined;
-export let mem = undefined;
-export let wrapperClass = '';
-export let jobId = undefined;
-export let tag;
-export let small = false;
-export let drawerOpen = false;
-export let noMaxH = false;
-export let noAutoScroll = false;
-export let download = true;
-export let customEmptyMessage = 'No logs are available yet';
+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();
 // @ts-ignore
-const ansi_up = new AnsiUp();
+const ansi_up = $state(new AnsiUp());
 ansi_up.use_classes = true;
-let scroll = true;
-let div = null;
+let scroll = $state(true);
+let div = $state(null);
 // let downloadStartUrl: string | undefined = undefined
 let LOG_INC = 10000;
-let LOG_LIMIT = LOG_INC;
-let lastJobId = jobId;
-let loadedFromObjectStore = '';
-$: if (jobId !== lastJobId) {
-    lastJobId = jobId;
-    loadedFromObjectStore = '';
-    LOG_LIMIT = LOG_INC;
-}
+let LOG_LIMIT = $state(LOG_INC);
+let lastJobId = $state(jobId);
+let loadedFromObjectStore = $state('');
 function findPrefixIndex(truncateContent) {
     let index = s3LogPrefixes.findIndex((x) => truncateContent.startsWith(x));
     if (index == -1) {
@@ -73,9 +56,6 @@ function tooltipText(prefixIndex) {
         return 'Attempt to download the logs from disk. Assume there is a shared disk between the workers and the server at /tmp/windmill/logs. Since you are on EE, you can alternatively use an object store such as S3 configured in the instance settings instead of a shared volume..';
     }
 }
-$: truncatedContent = truncateContent(content, loadedFromObjectStore, LOG_LIMIT);
-$: prefixIndex = findPrefixIndex(truncatedContent);
-$: downloadStartUrl = findStartUrl(truncatedContent, prefixIndex);
 function truncateContent(jobContent, loadedFromObjectStore, limit) {
     let content = loadedFromObjectStore + (jobContent ?? '');
     if (content.length > limit) {
@@ -83,14 +63,11 @@ function truncateContent(jobContent, loadedFromObjectStore, limit) {
     }
     return content;
 }
-$: truncatedContent && scrollToBottom();
-$: html = ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != undefined
-    ? truncatedContent.substring(truncatedContent.substring(1).indexOf('\n') + 2, truncatedContent.length)
-    : truncatedContent);
 export function scrollToBottom() {
+    // console.log('scrollToBottom', scroll, div)
     scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
 }
-let logViewer;
+let logViewer = $state();
 async function getStoreLogs() {
     if (downloadStartUrl) {
         scroll = false;
@@ -111,13 +88,28 @@ async function getStoreLogs() {
 function showMoreTruncate(len) {
     scroll = false;
     LOG_LIMIT += LOG_INC;
-    console.log(LOG_INC, len, LOG_LIMIT);
     let newC = truncateContent(content, loadedFromObjectStore, LOG_LIMIT);
     let newlineIndex = newC.indexOf('\n') + 1;
     if (newlineIndex < LOG_INC / 2) {
         LOG_LIMIT -= newlineIndex;
     }
 }
+$effect.pre(() => {
+    if (jobId !== lastJobId) {
+        lastJobId = jobId;
+        loadedFromObjectStore = '';
+        LOG_LIMIT = LOG_INC;
+    }
+});
+let truncatedContent = $derived(truncateContent(content, loadedFromObjectStore, LOG_LIMIT));
+let prefixIndex = $derived(findPrefixIndex(truncatedContent));
+let downloadStartUrl = $derived(findStartUrl(truncatedContent, prefixIndex));
+$effect.pre(() => {
+    truncatedContent && scrollToBottom();
+});
+let html = $derived(ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != undefined
+    ? truncatedContent.substring(truncatedContent.substring(1).indexOf('\n') + 2, truncatedContent.length)
+    : truncatedContent));
 </script>
 
 <Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
@@ -154,10 +146,10 @@ function showMoreTruncate(len) {
 				>{#if content}{@const len =
 						(content?.length ?? 0) +
 						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
-							on:click={getStoreLogs}
+							onclick={getStoreLogs}
 							>Show more... <Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
 						><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)...<br
-						/><button on:click={() => showMoreTruncate(len)}>Show more..</button><br
+						/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br
 						/>{/if}{@html html}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
 			>
 		</div>
@@ -182,7 +174,7 @@ function showMoreTruncate(len) {
 						</a>
 					</div>
 				{/if}
-				<button on:click={logViewer.openDrawer}><Expand size="12" /></button>
+				<button onclick={logViewer.openDrawer}><Expand size="12" /></button>
 				{#if !noAutoScroll}
 					<div
 						class="{small ? '' : 'py-2'} pr-2 {small
@@ -200,8 +192,10 @@ function showMoreTruncate(len) {
 				<Loader2 class="animate-spin" />
 				{#if tag}
 					<div class="flex flex-row items-center gap-1">
-						<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}">tag: {tag}</div>
-						<NoWorkerWithTagWarning {tag} />
+						<div class="text-secondary {small ? '!text-2xs' : '!text-xs'}"
+							>{tagLabel ?? 'tag'}: {tag}</div
+						>
+						<NoWorkerWithTagWarning {tagLabel} {tag} />
 					</div>
 				{/if}
 			</div>
@@ -222,10 +216,10 @@ function showMoreTruncate(len) {
 		<pre class="whitespace-pre break-words {small ? '!text-2xs' : '!text-xs'} w-full p-2"
 			>{#if content}{@const len =
 					(content?.length ?? 0) +
-					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button on:click={getStoreLogs}
+					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button onclick={getStoreLogs}
 						>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
 					><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
-					/><button on:click={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
+					/><button onclick={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
 					>{@html html}</span
 				>{:else if !isLoading}<span>{customEmptyMessage}</span>{/if}</pre
 		>

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

@@ -1,17 +1,4 @@
-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 LogViewer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     content: string | undefined;
     isLoading: boolean;
     duration?: number | undefined;
@@ -25,11 +12,10 @@ declare const LogViewer: $$__sveltets_2_IsomorphicComponent<{
     noAutoScroll?: boolean;
     download?: boolean;
     customEmptyMessage?: string;
-    scrollToBottom?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+    tagLabel?: string;
+}
+declare const LogViewer: import("svelte").Component<Props, {
     scrollToBottom: () => void;
-}, string>;
-type LogViewer = InstanceType<typeof LogViewer>;
+}, "drawerOpen">;
+type LogViewer = ReturnType<typeof LogViewer>;
 export default LogViewer;

package/package/components/ModulePreviewResultViewer.svelte

@@ -5,7 +5,7 @@ import OutputPickerInner from './flows/propPicker/OutputPickerInner.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { getContext } from 'svelte';
 import { getStringError } from './copilot/chat/utils';
-let { lang, editor, diffEditor, loopStatus = undefined, lastJob = undefined, scriptProgress = $bindable(undefined), testJob = undefined, mod, testIsLoading = false, disableMock = false, disableHistory = false, onUpdateMock, loadingJob = false } = $props();
+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);
@@ -58,6 +58,7 @@ const logJob = $derived(testJob ?? selectedJob);
 				isLoading={false}
 				tag={undefined}
 				customEmptyMessage="Using pinned data"
+				{tagLabel}
 			/>
 		{:else}
 			<LogViewer
@@ -68,6 +69,7 @@ const logJob = $derived(testJob ?? selectedJob);
 				content={logJob?.logs}
 				isLoading={(testIsLoading && logJob?.['running'] == false) || loadingJob}
 				tag={logJob?.tag}
+				{tagLabel}
 			/>
 		{/if}
 	</Pane>

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

@@ -21,6 +21,7 @@ interface Props {
         return_value?: unknown;
     }) => void;
     loadingJob?: boolean;
+    tagLabel?: string;
 }
 declare const ModulePreviewResultViewer: import("svelte").Component<Props, {}, "scriptProgress">;
 type ModulePreviewResultViewer = ReturnType<typeof ModulePreviewResultViewer>;