windmill-components 1.665.1 → 1.677.0

package/package/components/DefaultTagsInner.svelte

@@ -3,7 +3,7 @@ import { ExternalLink, Loader2, Save } from 'lucide-svelte';
 import { SettingService, WorkerService, WorkspaceService } from '../gen';
 import { sendUserToast } from '../toast';
 import { enterpriseLicense, superadmin } from '../stores';
-import { DEFAULT_TAGS_PER_WORKSPACE_SETTING, DEFAULT_TAGS_WORKSPACES_SETTING } from '../consts';
+import { DEFAULT_TAGS_PER_WORKSPACE_SETTING, DEFAULT_TAGS_WORKSPACES_SETTING, PREVIEW_TAGS_OVERRIDE_SETTING } from '../consts';
 import Toggle from './Toggle.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
@@ -12,13 +12,16 @@ import Section from './Section.svelte';
 let { defaultTagPerWorkspace = $bindable(undefined), defaultTagWorkspaces = $bindable([]) } = $props();
 let defaultTags = $state(undefined);
 let limitToWorkspaces = $state(false);
+let previewTagsOverride = $state(false);
 // Change detection
 let originalDefaultTagPerWorkspace = $state(defaultTagPerWorkspace);
 let originalDefaultTagWorkspaces = $state(defaultTagWorkspaces);
+let originalPreviewTagsOverride = $state(false);
 // Detect changes
 let hasChanges = $derived(originalDefaultTagPerWorkspace !== defaultTagPerWorkspace ||
     JSON.stringify($state.snapshot(originalDefaultTagWorkspaces)?.sort() || []) !==
-        JSON.stringify($state.snapshot(defaultTagWorkspaces)?.sort() || []));
+        JSON.stringify($state.snapshot(defaultTagWorkspaces)?.sort() || []) ||
+    originalPreviewTagsOverride !== previewTagsOverride);
 let workspaces = $state([]);
 async function loadWorkspaces() {
     workspaces = (await WorkspaceService.listWorkspacesAsSuperAdmin()).map((m) => m.id);
@@ -31,6 +34,11 @@ async function loadDefaultTags() {
                 key: DEFAULT_TAGS_WORKSPACES_SETTING
             })) ?? [];
         limitToWorkspaces = defaultTagWorkspaces ? defaultTagWorkspaces.length > 0 : false;
+        previewTagsOverride =
+            (await SettingService.getGlobal({
+                key: PREVIEW_TAGS_OVERRIDE_SETTING
+            })) ?? false;
+        originalPreviewTagsOverride = previewTagsOverride;
     }
     catch (err) {
         sendUserToast(`Could not load default tags: ${err}`, true);
@@ -51,9 +59,16 @@ async function handleSave() {
                 : undefined
         }
     });
+    await SettingService.setGlobal({
+        key: PREVIEW_TAGS_OVERRIDE_SETTING,
+        requestBody: {
+            value: previewTagsOverride
+        }
+    });
     // Update original state after save
     originalDefaultTagPerWorkspace = defaultTagPerWorkspace;
     originalDefaultTagWorkspaces = [...(defaultTagWorkspaces || [])];
+    originalPreviewTagsOverride = previewTagsOverride;
     loadDefaultTags();
     sendUserToast('Saved');
 }
@@ -126,6 +141,18 @@ loadWorkspaces();
 					/>
 				{/if}
 			{/if}
+			<div class="flex flex-col gap-1">
+				<Toggle
+					bind:checked={previewTagsOverride}
+					options={{
+						right: 'route preview jobs to dedicated preview tag',
+						rightTooltip:
+							'When enabled, preview jobs (script previews and flow previews) will be routed to the "preview" tag instead of their language-specific tag, allowing you to dedicate specific workers for previews.'
+					}}
+					class="w-fit"
+					disabled={!$enterpriseLicense}
+				/>
+			</div>
 		</div>
 
 		<div class="flex gap-2 items-center mb-1">
@@ -148,6 +175,17 @@ loadWorkspaces();
 					</div>
 				</div>
 			{/each}
+			{#if previewTagsOverride}
+				<div class="flex gap-2 items-center">
+					<div class="w-36">
+						<Badge color="transparent">preview</Badge>
+					</div>
+					<div class="w-6 flex justify-center text-secondary">&rightarrow;</div>
+					<div class="flex-1">
+						<Badge color="blue">{defaultTagPerWorkspace ? 'preview-$workspace' : 'preview'}</Badge>
+					</div>
+				</div>
+			{/if}
 		</div>
 	{/if}
 </Section>

package/package/components/DeployWorkspace.svelte

@@ -207,12 +207,25 @@ async function getDependencies(kind, path) {
             }
             throw new Error('Missing trigger information');
         }
+        else if (kind == 'script') {
+            const imports = await WorkspaceService.getImports({
+                workspace: $workspaceStore,
+                importerPath: path
+            });
+            return imports.map((importedPath) => ({ kind: 'script', path: importedPath }));
+        }
         return [];
     }
     let toProcess = [{ kind, path }];
+    let processedSet = new Set();
     let processed = [];
     while (toProcess.length > 0) {
         const { kind, path } = toProcess.pop();
+        const key = `${kind}:${path}`;
+        if (processedSet.has(key)) {
+            continue;
+        }
+        processedSet.add(key);
         toProcess.push(...(await rec(kind, path)));
         processed.push({ kind, path });
     }

package/package/components/DiffEditor.svelte

@@ -63,11 +63,18 @@ async function loadDiffEditor() {
             }
         });
     }
-    if (defaultLang !== undefined || defaultOriginal !== undefined || defaultModified !== undefined) {
+    if (defaultLang !== undefined ||
+        defaultOriginal !== undefined ||
+        defaultModified !== undefined ||
+        modifiedModel !== undefined) {
         setupModel(defaultLang ?? 'plaintext', defaultOriginal, defaultModified, defaultModifiedLang);
     }
 }
 export function setupModel(lang, original, modified, modifiedLang) {
+    defaultLang = lang;
+    defaultOriginal = original;
+    defaultModified = modified;
+    defaultModifiedLang = modifiedLang;
     const o = meditor.createModel(original ?? '', lang);
     const m = modifiedModel ?? meditor.createModel(modified ?? '', modifiedLang ?? lang);
     diffEditor?.setModel({
@@ -87,6 +94,7 @@ export function setModified(code) {
     defaultModified = code;
 }
 export function setModifiedModel(model) {
+    modifiedModel = model;
     const curr = diffEditor?.getModel();
     if (!curr)
         return;
@@ -121,6 +129,41 @@ $effect(() => {
         });
     }
 });
+$effect(() => {
+    if (!diffEditor) {
+        return;
+    }
+    const lang = defaultLang ?? 'plaintext';
+    const modifiedLang = defaultModifiedLang ?? lang;
+    const currentModel = diffEditor.getModel();
+    if (!currentModel) {
+        setupModel(lang, defaultOriginal, defaultModified, defaultModifiedLang);
+        return;
+    }
+    if (currentModel.original.getLanguageId() !== lang) {
+        meditor.setModelLanguage(currentModel.original, lang);
+    }
+    const originalValue = defaultOriginal ?? '';
+    if (currentModel.original.getValue() !== originalValue) {
+        currentModel.original.setValue(originalValue);
+    }
+    if (modifiedModel) {
+        if (currentModel.modified !== modifiedModel) {
+            diffEditor.setModel({
+                original: currentModel.original,
+                modified: modifiedModel
+            });
+        }
+        return;
+    }
+    if (currentModel.modified.getLanguageId() !== modifiedLang) {
+        meditor.setModelLanguage(currentModel.modified, modifiedLang);
+    }
+    const modifiedValue = defaultModified ?? '';
+    if (currentModel.modified.getValue() !== modifiedValue) {
+        currentModel.modified.setValue(modifiedValue);
+    }
+});
 onMount(() => {
     if (BROWSER) {
         return () => {

package/package/components/EditableSchemaForm.svelte

@@ -27,7 +27,7 @@ import Editor from './Editor.svelte';
 import AddPropertyV2 from './schema/AddPropertyV2.svelte';
 // export let openEditTab: () => void = () => {}
 const dispatch = createEventDispatcher();
-let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynCode = $bindable(), dynLang = $bindable(), showDynOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab, schemaFormClassName = undefined, onChange = undefined } = $props();
+let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, showSensitiveToggle = false, displayWebhookWarning = false, onlyMaskPassword = false, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynCode = $bindable(), dynLang = $bindable(), showDynOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab, schemaFormClassName = undefined, onChange = undefined } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -184,7 +184,9 @@ export function updateJson() {
     editor?.setCode(schemaString);
 }
 const editTabDefaultSize = untrack(() => noPreview) ? 100 : 50;
-editPanelSize = untrack(() => editTab) ? (untrack(() => editPanelInitialSize) ?? editTabDefaultSize) : 0;
+editPanelSize = untrack(() => editTab)
+    ? (untrack(() => editPanelInitialSize) ?? editTabDefaultSize)
+    : 0;
 let inputPanelSize = $state(100 - editPanelSize);
 let editPanelSizeSmooth = tweened(editPanelSize, {
     duration: 150
@@ -547,6 +549,7 @@ let dndType = $state(generateRandomString());
 															bind:order={schema.properties[argName].order}
 															{isFlowInput}
 															{isAppInput}
+															{showSensitiveToggle}
 														>
 															{#snippet typeeditor()}
 																{#if isFlowInput || isAppInput}

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -14,6 +14,7 @@ interface Props {
     noPreview?: boolean;
     jsonEnabled?: boolean;
     isAppInput?: boolean;
+    showSensitiveToggle?: boolean;
     displayWebhookWarning?: boolean;
     onlyMaskPassword?: boolean;
     editTab: 'inputEditor' | 'history' | 'savedInputs' | 'json' | 'captures' | 'firstStepInputs' | undefined;

package/package/components/Editor.svelte

@@ -1599,7 +1599,11 @@ let handleSqlTypingInTs = useDebounce(function handleSqlTypingInTs() {
     // Send SQL query information to the custom TypeScript worker
     // The worker will inject type parameters into the code that TypeScript analyzes
     // Worker async function call freezes if we pass a Proxy, $state.snapshot() is very important here
-    updateSqlQueriesInWorker(uri, $state.snapshot(preparedAssetsSqlQueries));
+    // Filter out queries with raw interpolations — they can't be type-checked
+    let queriesToSend = $state
+        .snapshot(preparedAssetsSqlQueries)
+        .filter((q) => !q.has_raw_interpolation);
+    updateSqlQueriesInWorker(uri, queriesToSend);
 }, 250);
 watch([() => preparedAssetsSqlQueries, () => lang, () => isTsWorkerInitialized.current], () => {
     handleSqlTypingInTs();

package/package/components/EditorBar.svelte

@@ -71,6 +71,7 @@ let showContextVarPicker = $derived([
     'nu',
     'java',
     'ruby',
+    'rlang',
     'postgresql',
     'mysql',
     'bigquery',
@@ -94,7 +95,8 @@ let showVarPicker = $derived([
     'csharp',
     'nu',
     'java',
-    'ruby'
+    'ruby',
+    'rlang'
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showResourcePicker = $derived([
@@ -111,7 +113,8 @@ let showResourcePicker = $derived([
     'csharp',
     'nu',
     'java',
-    'ruby'
+    'ruby',
+    'rlang'
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showS3Picker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
@@ -402,6 +405,8 @@ function windmillPathToCamelCaseName(path) {
 			// for related places search: ADD_NEW_LANG
 		} else if (lang == 'ruby') {
 			editor.insertAtCursor(`ENV['${name}']`)
+		} else if (lang == 'rlang') {
+			editor.insertAtCursor(`Sys.getenv("${name}")`)
 		} else if (
 			['postgresql', 'mysql', 'bigquery', 'mssql', 'oracledb', 'snowflake', 'duckdb'].includes(
 				lang ?? ''
@@ -470,6 +475,8 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 				editor.insertAtBeginning("require 'windmill/mini'\n")
 			}
 			editor.insertAtCursor(`get_variable("${path}")`)
+		} else if (lang == 'rlang') {
+			editor.insertAtCursor(`get_variable("${path}")`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -549,6 +556,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				editor.insertAtBeginning("require 'windmill/mini'\n")
 			}
 			editor.insertAtCursor(`get_resource("${path}")`)
+		} else if (lang == 'rlang') {
+			editor.insertAtCursor(`get_resource("${path}")`)
 		} else if (lang == 'duckdb') {
 			let t = { postgresql: 'postgres', mysql: 'mysql', bigquery: 'bigquery' }[resType]
 			if (!t) {
@@ -635,7 +644,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 					startIcon={{ icon: Settings }}
 					target="_blank"
 					variant="accent"
-					href="{base}/workspace_settings?tab=windmill_lfs"
+					href="{base}/workspace_settings?tab=ducklake"
 				>
 					Go to settings
 				</Button>

package/package/components/FilterSearchbar.svelte

@@ -419,10 +419,34 @@ function handleKeyDown(e) {
     e.preventDefault();
 }
 let presets = $derived(_presets.filter((p) => {
-    // Only show presets that aren't already applied in asText
-    return !asText.val.includes(p.value);
+    // Only show presets that aren't already applied
+    if (asText.val.includes(p.value))
+        return false;
+    // For allowMultiple: check if the value is already in the comma-separated list
+    const match = p.value.match(/^(\w+):\\\s+(.+)$/);
+    if (match) {
+        const [, key, val] = match;
+        const existing = String(value[key] ?? '');
+        if (existing.split(',').some((v) => v.trim() === val))
+            return false;
+    }
+    return true;
 }));
 function appendFilterAsText(presetValue) {
+    // For allowMultiple fields, append value with comma to existing filter instead of adding duplicate key
+    const match = presetValue.match(/^(\w+):\\\s+(.+)$/);
+    if (match) {
+        const [, key, newVal] = match;
+        const filterDef = schema[key];
+        if (filterDef?.allowMultiple) {
+            const existing = value[key];
+            if (existing) {
+                value[key] = existing + ',' + newVal;
+                asText.reparse();
+                return;
+            }
+        }
+    }
     if (!asText.val.endsWith('\u00A0') && !asText.val.endsWith(' '))
         asText.val += ' ';
     asText.val += presetValue + '\u00A0';

package/package/components/FlowBuilder.svelte

@@ -222,7 +222,8 @@ async function saveDraftInternal(forceSave = false) {
                     draft_only: true,
                     ws_error_handler_muted: flow.ws_error_handler_muted,
                     visible_to_runner_only: flow.visible_to_runner_only,
-                    on_behalf_of_email: flow.on_behalf_of_email
+                    on_behalf_of_email: flow.on_behalf_of_email,
+                    labels: flow.labels
                 }
             });
         }
@@ -381,7 +382,8 @@ async function saveFlow(deploymentMsg, triggersToDeploy) {
                     visible_to_runner_only: flow.visible_to_runner_only,
                     on_behalf_of_email: flow.on_behalf_of_email,
                     preserve_on_behalf_of: $preserveOnBehalfOf || undefined,
-                    deployment_message: deploymentMsg || undefined
+                    deployment_message: deploymentMsg || undefined,
+                    labels: flow.labels
                 }
             });
             await CaptureService.moveCapturesAndConfigs({
@@ -421,7 +423,8 @@ async function saveFlow(deploymentMsg, triggersToDeploy) {
                     visible_to_runner_only: flow.visible_to_runner_only,
                     on_behalf_of_email: flow.on_behalf_of_email,
                     preserve_on_behalf_of: $preserveOnBehalfOf || undefined,
-                    deployment_message: deploymentMsg || undefined
+                    deployment_message: deploymentMsg || undefined,
+                    labels: flow.labels
                 }
             });
         }

package/package/components/FlowGraphDiffViewer.svelte

@@ -8,7 +8,6 @@ import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import { DiffIcon, Minus, Plus, SquareSplitHorizontal } from 'lucide-svelte';
 const SIDE_BY_SIDE_MIN_WIDTH = 700;
 let { beforeYaml, afterYaml } = $props();
-let parseError = $state(undefined);
 let viewerWidth = $state(SIDE_BY_SIDE_MIN_WIDTH);
 let beforePaneSize = $state(50);
 let viewMode = $state('sidebyside');
@@ -16,26 +15,26 @@ let viewMode = $state('sidebyside');
 let sharedViewport = $state({ x: 0, y: 0, zoom: 1 });
 let beforeGraph = $state(undefined);
 let afterGraph = $state(undefined);
-let beforeFlow = $derived.by(() => {
+function parseFlow(yaml, label) {
     try {
-        const parsed = YAML.parse(beforeYaml);
-        return parsed;
+        return { flow: YAML.parse(yaml), error: undefined };
     }
     catch (error) {
-        parseError = `Error parsing before flow: ${error instanceof Error ? error.message : typeof error === 'string' ? error : 'Unknown error'}`;
-        return undefined;
+        return {
+            flow: undefined,
+            error: `Error parsing ${label} flow: ${error instanceof Error
+                ? error.message
+                : typeof error === 'string'
+                    ? error
+                    : 'Unknown error'}`
+        };
     }
-});
-let afterFlow = $derived.by(() => {
-    try {
-        const parsed = YAML.parse(afterYaml);
-        return parsed;
-    }
-    catch (error) {
-        parseError = `Error parsing after flow: ${error instanceof Error ? error.message : typeof error === 'string' ? error : 'Unknown error'}`;
-        return undefined;
-    }
-});
+}
+let beforeParsed = $derived.by(() => parseFlow(beforeYaml, 'before'));
+let afterParsed = $derived.by(() => parseFlow(afterYaml, 'after'));
+let parseError = $derived(beforeParsed.error ?? afterParsed.error);
+let beforeFlow = $derived(beforeParsed.flow);
+let afterFlow = $derived(afterParsed.flow);
 // Determine if we should render side-by-side or unified (user controlled via toggle)
 let isSideBySide = $derived(viewMode === 'sidebyside');
 // Build timeline using history-based approach

package/package/components/FlowGraphViewer.svelte

@@ -1,19 +1,31 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { Triggers } from './triggers/triggers.svelte';
+import { createEventDispatcher, hasContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 import { dfs } from './flows/dfs';
 import { workspaceStore } from '../stores';
-let { flow, overflowAuto = false, noSide = false, download = false, noGraph = false, triggerNode = false, stepDetail = $bindable(undefined), workspace = $workspaceStore, minHeight = 400, noBorder = false, hideDefaultInputs = false } = $props();
+let { flow, overflowAuto = false, noSide = false, download = false, noGraph = false, triggerNode = false, stepDetail = $bindable(undefined), workspace = $workspaceStore, minHeight = 400, noBorder = false, hideDefaultInputs = false, provideTriggerContext = false, fillAvailableHeight = false } = $props();
+let availableHeight = $state(0);
+if (provideTriggerContext && !hasContext('TriggerContext')) {
+    const triggersCount = writable(undefined);
+    setContext('TriggerContext', {
+        triggersCount,
+        simplifiedPoll: writable(false),
+        showCaptureHint: writable(undefined),
+        triggersState: new Triggers()
+    });
+}
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="grid grid-cols-3 w-full h-full">
+<div bind:clientHeight={availableHeight} class="grid grid-cols-3 w-full h-full min-h-0">
 	{#if !noGraph}
 		<div
 			class="{noSide || (hideDefaultInputs && stepDetail == undefined)
 				? 'col-span-3'
-				: 'sm:col-span-2 col-span-3'} w-full max-h-full"
+				: 'sm:col-span-2 col-span-3'} w-full h-full min-h-0 max-h-full"
 			class:overflow-auto={overflowAuto}
 			class:border={!noBorder}
 		>
@@ -23,7 +35,7 @@ const dispatch = createEventDispatcher();
 				cache={flow.value.cache_ttl !== undefined}
 				path={flow?.path}
 				{download}
-				{minHeight}
+				minHeight={fillAvailableHeight ? Math.max(minHeight, availableHeight) : minHeight}
 				{workspace}
 				modules={flow?.value?.modules}
 				failureModule={flow?.value?.failure_module}
@@ -50,7 +62,9 @@ const dispatch = createEventDispatcher();
 	{#if !noSide && !(hideDefaultInputs && stepDetail == undefined)}
 		<div
 			class={twMerge(
-				'relative w-full h-full min-h-[150px] max-h-[90vh] border-r border-b border-t p-2 pt-0 overflow-auto hidden sm:flex flex-col gap-4',
+				fillAvailableHeight
+					? 'relative w-full h-full min-h-0 border-r border-b border-t p-2 pt-0 overflow-auto hidden sm:flex flex-col gap-4'
+					: 'relative w-full h-full min-h-[150px] max-h-[90vh] border-r border-b border-t p-2 pt-0 overflow-auto hidden sm:flex flex-col gap-4',
 				noGraph ? 'border-0 w-max' : ''
 			)}
 		>

package/package/components/FlowGraphViewer.svelte.d.ts

@@ -17,6 +17,8 @@ interface Props {
     minHeight?: number;
     noBorder?: boolean;
     hideDefaultInputs?: boolean;
+    provideTriggerContext?: boolean;
+    fillAvailableHeight?: 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> & {

package/package/components/FlowGraphViewerStep.svelte

@@ -40,17 +40,10 @@ let codeViewer = $state();
 
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
-				{#if stepDetail.value.path.startsWith('hub/')}
-					<div class="mt-6">
-						<h3 class="mb-1 mt-6 text-xs font-semibold text-emphasis">Code</h3>
-						<iframe
-							class="w-full h-full text-sm"
-							title="embedded script from hub"
-							frameborder="0"
-							src="{$hubBaseUrlStore}/embed/script/{stepDetail.value?.path?.substring(4)}"
-						></iframe>
-					</div>
-				{/if}
+				<div class="mt-6">
+					<h3 class="mb-1 mt-6 text-xs font-semibold text-emphasis">Code</h3>
+					<FlowModuleScript path={stepDetail.value.path} hash={jobScriptHash} />
+				</div>
 			{:else if stepDetail.value.type == 'rawscript'}
 				<div class="text-2xs mb-4 mt-2">
 					<h3 class="mb-1 text-xs font-semibold text-emphasis">Step inputs</h3>
@@ -207,27 +200,16 @@ let codeViewer = $state();
 					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 			{/if}
-			{#if stepDetail.value.path.startsWith('hub/')}
-				<div class="flex flex-col grow">
-					<div class="mb-1 mt-6 flex justify-between items-center">
-						<h3 class="font-semibold text-xs text-emphasis">Code</h3>
-						<Button
-							unifiedSize="sm"
-							variant="subtle"
-							onClick={codeViewer?.openDrawer}
-							startIcon={{ icon: Expand }}>Expand</Button
-						>
-					</div>
-					<iframe
-						class="w-full grow text-sm h-full"
-						title="embedded script from hub"
-						frameborder="0"
-						src="{$hubBaseUrlStore}/embed/script/{stepDetail.value?.path?.substring(4)}"
-					></iframe>
-				</div>
-			{:else}
-				<FlowModuleScript path={stepDetail.value.path} hash={jobScriptHash} />
-			{/if}
+			<div class="mb-1 mt-6 flex justify-between items-center">
+				<h3 class="font-semibold text-xs text-emphasis">Code</h3>
+				<Button
+					unifiedSize="sm"
+					variant="subtle"
+					onClick={codeViewer?.openDrawer}
+					startIcon={{ icon: Expand }}>Expand</Button
+				>
+			</div>
+			<FlowModuleScript path={stepDetail.value.path} hash={jobScriptHash} />
 		{:else if stepDetail.value.type == 'aiagent'}
 			<div class="text-xs">
 				<h3 class="mb-1 font-semibold mt-2 text-xs text-emphasis">Step inputs</h3>

package/package/components/FlowMetadata.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import {} from '../gen';
 import { base } from '../base';
 import JobStatus from './JobStatus.svelte';
+import { flowPathToHref } from '../scripts';
 import { displayDate, truncateRev } from '../utils';
 import ScheduleEditor from './triggers/schedules/ScheduleEditor.svelte';
 import TimeAgo from './TimeAgo.svelte';
@@ -87,7 +88,9 @@ let { job, scheduleEditor } = $props();
 		{#if (job && job.job_kind == 'flow') || job?.job_kind == 'script'}
 			{@const stem = `${job?.job_kind}s`}
 			{@const isScript = job?.job_kind === 'script'}
-			{@const viewHref = `${base}/${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
+			{@const viewHref = isScript
+				? `${base}/${stem}/get/${job?.script_hash}`
+				: flowPathToHref(job?.script_path ?? '')}
 			<div class="flex flex-row gap-2 items-center">
 				{#if isScript}
 					<Code2 size={SMALL_ICON_SIZE} class="min-w-3.5" />

package/package/components/FlowPreviewContent.svelte

@@ -3,6 +3,7 @@ import { workspaceStore } from '../stores';
 import { Badge, Button } from './common';
 import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { runFlowPreview } from './flows/utils.svelte';
+import { processSecretArgs } from './secretArgUtils';
 import SchemaForm from './SchemaForm.svelte';
 import SchemaFormWithArgPicker from './SchemaFormWithArgPicker.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
@@ -80,6 +81,7 @@ export async function runPreview(args, restartedFrom, conversationId) {
         lastPreviewFlow = JSON.stringify(flowStore.val);
         flowProgressBar?.reset();
         const newFlow = extractFlow(previewMode);
+        args = await processSecretArgs(args, flowStore.val.schema);
         newJobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom, conversationId);
         jobId = newJobId;
         isRunning = true;