windmill-components 1.504.6 → 1.511.0

package/package/components/Editor.svelte.d.ts

@@ -4,6 +4,34 @@ import { type Preview } from '../gen';
 import type { Text } from 'yjs';
 import { editor as meditor, type IDisposable } from 'monaco-editor';
 import { type DepsToGet } from '../ata/index';
+interface Props {
+    code?: string;
+    cmdEnterAction?: (() => void) | undefined;
+    formatAction?: (() => void) | undefined;
+    automaticLayout?: boolean;
+    websocketAlive?: any;
+    shouldBindKey?: boolean;
+    fixedOverflowWidgets?: boolean;
+    path?: string | undefined;
+    yContent?: Text | undefined;
+    awareness?: any | undefined;
+    folding?: boolean;
+    args?: Record<string, any> | undefined;
+    useWebsockets?: boolean;
+    small?: boolean;
+    scriptLang: Preview['language'] | 'bunnative' | 'tsx' | 'jsx' | 'json' | undefined;
+    disabled?: boolean;
+    lineNumbersMinChars?: number;
+    files?: Record<string, {
+        code: string;
+        readonly?: boolean;
+    }> | undefined;
+    extraLib?: string | undefined;
+    changeTimeout?: number;
+    loadAsync?: boolean;
+    key?: string | undefined;
+    class?: string | undefined;
+}
 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;
@@ -17,60 +45,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Editor: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    code?: string | undefined;
-    cmdEnterAction?: (() => void) | undefined | undefined;
-    formatAction?: (() => void) | undefined | undefined;
-    automaticLayout?: boolean | undefined;
-    websocketAlive?: {
-        pyright: boolean;
-        ruff: boolean;
-        deno: boolean;
-        go: boolean;
-        shellcheck: boolean;
-    } | undefined;
-    shouldBindKey?: boolean | undefined;
-    fixedOverflowWidgets?: boolean | undefined;
-    path?: string | undefined | undefined;
-    yContent?: Text | undefined;
-    awareness?: any | undefined;
-    folding?: boolean | undefined;
-    args?: Record<string, any> | undefined;
-    useWebsockets?: boolean | undefined;
-    small?: boolean | undefined;
-    scriptLang: Preview["language"] | "bunnative" | "tsx" | "jsx" | "json" | undefined;
-    disabled?: boolean | undefined;
-    lineNumbersMinChars?: number | undefined;
-    files?: Record<string, {
-        code: string;
-        readonly?: boolean;
-    }> | undefined;
-    extraLib?: string | undefined | undefined;
-    changeTimeout?: number | undefined;
-    loadAsync?: boolean | undefined;
-    key?: string | undefined | undefined;
-    switchToFile?: ((path: string, value: string, lang: string) => void) | undefined;
-    getCode?: (() => string) | undefined;
-    getModel?: (() => meditor.IEditorModel | undefined) | undefined;
-    insertAtCursor?: ((code: string) => void) | undefined;
-    arrowDown?: (() => void) | undefined;
-    backspace?: (() => void) | undefined;
-    insertAtBeginning?: ((code: string) => void) | undefined;
-    insertAtLine?: ((code: string, line: number) => void) | undefined;
-    getSelectedLines?: (() => string | undefined) | undefined;
-    onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => IDisposable | undefined) | undefined;
-    show?: (() => void) | undefined;
-    hide?: (() => void) | undefined;
-    setCode?: ((ncode: string, noHistory?: boolean) => void) | undefined;
-    append?: ((code: string) => void) | undefined;
-    format?: (() => Promise<void>) | undefined;
-    getScriptLang?: (() => string | undefined) | undefined;
-    reviewAndApplyCode?: ((code: string) => void) | undefined;
-    reloadWebsocket?: (() => Promise<void>) | undefined;
-    fetchPackageDeps?: ((deps: DepsToGet) => Promise<void>) | undefined;
-    addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
-}, {
+declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
     saveDraft: CustomEvent<any>;
     blur: CustomEvent<any>;
@@ -100,6 +75,6 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<{
     reloadWebsocket: () => Promise<void>;
     fetchPackageDeps: (deps: DepsToGet) => Promise<void>;
     addAction: (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
-}, string>;
+}, "code" | "websocketAlive">;
 type Editor = InstanceType<typeof Editor>;
 export default Editor;

package/package/components/EditorBar.svelte

@@ -500,10 +500,10 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			let t = { postgresql: 'postgres', mysql: 'mysql', bigquery: 'bigquery' }[resType]
 			if (!t) {
 				sendUserToast(`Resource type ${resType} is not supported in DuckDB`, true)
-				editor.insertAtCursor(`'$res:${path}'`)
+				editor.insertAtCursor(`'res://${path}'`)
 				return
 			} else {
-				editor.insertAtCursor(`ATTACH '$res:${path}' AS db (TYPE ${t});`)
+				editor.insertAtCursor(`ATTACH 'res://${path}' AS db (TYPE ${t});`)
 			}
 		}
 

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -18,24 +18,15 @@ const slackSuccessHandler = hubPaths.slackSuccessHandler;
 const teamsRecoveryHandler = hubPaths.teamsRecoveryHandler;
 const teamsHandlerScriptPath = hubPaths.teamsErrorHandler;
 const teamsSuccessHandler = hubPaths.teamsSuccessHandler;
-export let errorOrRecovery;
-export let isEditable;
-export let toggleText = 'Enable';
-export let showScriptHelpText = false;
-export let handlerSelected;
-export let handlerPath;
-export let handlerExtraArgs;
-export let customInitialScriptPath;
-export let customScriptTemplate;
-export let customHandlerKind = 'script';
-let customHandlerSchema;
-let slackHandlerSchema;
-let isFetching = false;
-let teams_channels = [];
-let teams_team_name = undefined;
-let workspaceConnectedToSlack = undefined;
-let workspaceConnectedToTeams = undefined;
-let connectionTestJob;
+let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable(), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip } = $props();
+let customHandlerSchema = $state();
+let slackHandlerSchema = $state();
+let isFetching = $state(false);
+let teams_channels = $state([]);
+let teams_team_name = $state(undefined);
+let workspaceConnectedToSlack = $state(undefined);
+let workspaceConnectedToTeams = $state(undefined);
+let connectionTestJob = $state();
 async function loadSlackResources() {
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     if (!emptyString(settings.slack_name) && !emptyString(settings.slack_team_id)) {
@@ -146,7 +137,7 @@ async function loadHandlerScriptArgs(p, defaultArgs = []) {
     }
 }
 function isSlackHandler(scriptPath) {
-    if (scriptPath === undefined) {
+    if (!scriptPath) {
         return false;
     }
     if (errorOrRecovery == 'error') {
@@ -161,7 +152,7 @@ function isSlackHandler(scriptPath) {
     }
 }
 function isTeamsHandler(scriptPath) {
-    if (scriptPath === undefined) {
+    if (!scriptPath) {
         return false;
     }
     if (errorOrRecovery == 'error') {
@@ -175,67 +166,82 @@ function isTeamsHandler(scriptPath) {
         return scriptPath.startsWith('hub/') && scriptPath.endsWith('/schedule-success-handler-teams');
     }
 }
-$: {
+$effect(() => {
     if ($workspaceStore) {
         loadSlackResources();
         loadTeamsResources();
     }
-}
-let lastHandlerSelected = undefined;
-let channelCache = {
+});
+$effect(() => {
+    if (handlerSelected === 'slack' && isSlackHandler(handlerPath)) {
+        handlerExtraArgs['slack'] = '$res:f/slack_bot/bot_token';
+    }
+    else {
+        handlerExtraArgs['slack'] = undefined;
+    }
+});
+let lastHandlerSelected = $state(undefined);
+let channelCache = $state({
     slack: undefined,
     teams: undefined
-};
-$: {
+});
+$effect(() => {
     if (lastHandlerSelected !== handlerSelected && lastHandlerSelected !== undefined) {
         if (lastHandlerSelected === 'teams' || lastHandlerSelected === 'slack') {
             channelCache[lastHandlerSelected] = handlerExtraArgs['channel'];
         }
         if (handlerSelected === 'custom') {
             handlerExtraArgs['channel'] = '';
+            handlerPath = undefined;
         }
         else {
             handlerExtraArgs['channel'] = channelCache[handlerSelected] ?? '';
         }
     }
     lastHandlerSelected = handlerSelected;
-}
-$: handlerPath &&
-    !isSlackHandler(handlerPath) &&
-    !isTeamsHandler(handlerPath) &&
-    loadHandlerScriptArgs(handlerPath, [
-        'path',
-        'workspace_id',
-        'job_id',
-        'is_flow',
-        'schedule_path',
-        'error',
-        'error_started_at',
-        'failed_times',
-        'started_at',
-        'success_times',
-        'success_result',
-        'success_started_at',
-        'email'
-    ]).then((schema) => (customHandlerSchema = schema));
-$: handlerPath &&
-    isSlackHandler(handlerPath) &&
-    loadHandlerScriptArgs(handlerPath, [
-        'path',
-        'workspace_id',
-        'job_id',
-        'is_flow',
-        'schedule_path',
-        'error',
-        'error_started_at',
-        'failed_times',
-        'started_at',
-        'success_times',
-        'success_result',
-        'success_started_at',
-        'email',
-        'slack'
-    ]).then((schema) => (slackHandlerSchema = schema));
+});
+$effect(() => {
+    handlerPath &&
+        !isSlackHandler(handlerPath) &&
+        !isTeamsHandler(handlerPath) &&
+        loadHandlerScriptArgs(handlerPath, [
+            'path',
+            'workspace_id',
+            'job_id',
+            'is_flow',
+            'schedule_path',
+            'error',
+            'error_started_at',
+            'failed_times',
+            'started_at',
+            'success_times',
+            'success_result',
+            'success_started_at',
+            'email',
+            'trigger_path'
+        ]).then((schema) => (customHandlerSchema = schema));
+});
+$effect(() => {
+    handlerPath &&
+        isSlackHandler(handlerPath) &&
+        loadHandlerScriptArgs(handlerPath, [
+            'path',
+            'workspace_id',
+            'job_id',
+            'is_flow',
+            'schedule_path',
+            'error',
+            'error_started_at',
+            'failed_times',
+            'started_at',
+            'success_times',
+            'success_result',
+            'success_started_at',
+            'email',
+            'trigger_path',
+            'slack'
+        ]).then((schema) => (slackHandlerSchema = schema));
+});
 </script>
 
 <div>
@@ -244,7 +250,7 @@ $: handlerPath &&
 		<Tab value="teams" disabled={!isEditable}>Teams</Tab>
 		<Tab value="custom" disabled={!isEditable}>
 			Custom
-			<slot name="custom-tab-tooltip" />
+			{@render customTabTooltip?.()}
 		</Tab>
 	</Tabs>
 </div>
@@ -253,15 +259,15 @@ $: handlerPath &&
 	<div class="flex flex-row mb-2">
 		<ScriptPicker
 			disabled={!isEditable || !$enterpriseLicense}
-			initialPath={customInitialScriptPath}
 			kinds={['script', 'failure']}
 			allowFlow={true}
 			bind:scriptPath={handlerPath}
 			bind:itemKind={customHandlerKind}
 			allowRefresh={isEditable}
+			clearable
 		/>
 
-		{#if handlerPath === undefined}
+		{#if !handlerPath}
 			<Button
 				btnClasses="ml-4 mt-2"
 				color="dark"
@@ -427,7 +433,7 @@ $: handlerPath &&
 				/>
 				<div class="flex-shrink-0">
 					<button
-						on:click={loadTeamsResources}
+						onclick={loadTeamsResources}
 						class="flex items-center gap-1 p-1.5 rounded hover:bg-surface-hover focus:bg-surface-hover"
 					>
 						<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />

package/package/components/ErrorOrRecoveryHandler.svelte.d.ts

@@ -1,31 +1,15 @@
-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 ErrorOrRecoveryHandler: $$__sveltets_2_IsomorphicComponent<{
-    errorOrRecovery: "error" | "recovery" | "success";
+interface Props {
+    errorOrRecovery: 'error' | 'recovery' | 'success';
     isEditable: boolean;
     toggleText?: string;
     showScriptHelpText?: boolean;
-    handlerSelected: "custom" | "slack" | "teams";
+    handlerSelected: 'custom' | 'slack' | 'teams';
     handlerPath: string | undefined;
     handlerExtraArgs: Record<string, any>;
-    customInitialScriptPath: string | undefined;
     customScriptTemplate: string;
-    customHandlerKind?: "flow" | "script";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'custom-tab-tooltip': {};
-}, {}, string>;
-type ErrorOrRecoveryHandler = InstanceType<typeof ErrorOrRecoveryHandler>;
+    customHandlerKind?: 'flow' | 'script';
+    customTabTooltip?: import('svelte').Snippet;
+}
+declare const ErrorOrRecoveryHandler: import("svelte").Component<Props, {}, "handlerSelected" | "handlerPath" | "handlerExtraArgs" | "customHandlerKind">;
+type ErrorOrRecoveryHandler = ReturnType<typeof ErrorOrRecoveryHandler>;
 export default ErrorOrRecoveryHandler;

package/package/components/FlowBuilder.svelte

@@ -37,6 +37,7 @@ import { TestSteps } from './flows/testSteps.svelte';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
+import FlowAssetsHandler, { initFlowGraphAssetsCtx } from './flows/FlowAssetsHandler.svelte';
 let { initialPath = $bindable(''), pathStoreInit = undefined, newFlow, selectedId, initialArgs = {}, loading = false, flowStore, flowStateStore, savedFlow = $bindable(undefined), diffDrawer = undefined, customUi = {}, disableAi = false, disabledFlowInputs = false, savedPrimarySchedule = undefined, version = undefined, setSavedraftCb = undefined, draftTriggersFromUrl = undefined, selectedTriggerIndexFromUrl = undefined, children, loadedFromHistoryFromUrl, noInitial = false, onSaveInitial, onSaveDraft, onDeploy, onDeployError, onDetails, onSaveDraftError, onSaveDraftOnlyAtNewPath, onHistoryRestore } = $props();
 let initialPathStore = writable(initialPath);
 // used for new flows for captures
@@ -475,6 +476,7 @@ setContext('FlowEditorContext', {
     modulesTestStates,
     outputPickerOpenFns
 });
+setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => flowStore.val.value.modules }));
 // Add triggers context store
 const triggersState = $state(new Triggers([
     { type: 'webhook', path: '', isDraft: false },
@@ -784,9 +786,9 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						redoProps={{ disabled: $history.index === $history.history.length - 1 }}
 						on:undo={() => {
 							const currentModules = flowStore.val?.value?.modules
-							console.log('undo before', flowStore.val, JSON.stringify(flowStore.val, null, 2))
+							// console.log('undo before', flowStore.val, JSON.stringify(flowStore.val, null, 2))
 							flowStore.val = undo(history, flowStore.val)
-							console.log('undo after', flowStore.val, JSON.stringify(flowStore.val, null, 2))
+							// console.log('undo after', flowStore.val, JSON.stringify(flowStore.val, null, 2))
 
 							const newModules = flowStore.val?.value?.modules
 							const restoredModules = newModules?.filter(
@@ -1030,3 +1032,10 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 		renderCount += 1
 	}}
 />
+
+<FlowAssetsHandler
+	modules={flowStore.val.value.modules}
+	enableParser
+	enableDbExplore
+	enablePathScriptAndFlowAssets
+/>

package/package/components/FlowJobResult.svelte

@@ -6,22 +6,10 @@ import { workspaceStore } from '../stores';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { Drawer } from './common';
 import AllFlowLogs from './AllFlowLogs.svelte';
-export let waitingForExecutor = false;
-export let result;
-export let logs;
-export let col = false;
-export let noBorder = false;
-export let loading;
-export let filename = undefined;
-export let jobId = undefined;
-export let tag = undefined;
-export let workspaceId = undefined;
-export let refreshLog = false;
-export let durationStates;
-export let downloadLogs = true;
-let lastJobId = undefined;
-let drawer = undefined;
-$: jobId != lastJobId && diffJobId();
+import { untrack } from 'svelte';
+let { waitingForExecutor = false, result, logs = $bindable(), col = false, noBorder = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, refreshLog = false, durationStates, downloadLogs = true, tagLabel = undefined } = $props();
+let lastJobId = $state(undefined);
+let drawer = $state(undefined);
 let iteration = 0;
 let logOffset = 0;
 async function diffJobId() {
@@ -53,6 +41,12 @@ async function getLogs() {
         }, iteration < 10 ? 1000 : iteration < 20 ? 2000 : 5000);
     }
 }
+$effect(() => {
+    jobId;
+    untrack(() => {
+        jobId != lastJobId && diffJobId();
+    });
+});
 </script>
 
 <Drawer bind:this={drawer}>
@@ -78,9 +72,10 @@ async function getLogs() {
 	</div>
 	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
 		<div class="absolute z-40 text-xs top-0 left-1"
-			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
+			><button class="" onclick={drawer.openDrawer}>explore all steps' logs</button></div
 		>
 		<LogViewer
+			{tagLabel}
 			download={downloadLogs}
 			content={logs ?? ''}
 			{jobId}

package/package/components/FlowJobResult.svelte.d.ts

@@ -1,19 +1,6 @@
 import type { DurationStatus } from './graph';
 import type { Writable } from 'svelte/store';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowJobResult: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     waitingForExecutor?: boolean;
     result: any;
     logs: string | undefined;
@@ -27,8 +14,8 @@ declare const FlowJobResult: $$__sveltets_2_IsomorphicComponent<{
     refreshLog?: boolean;
     durationStates: Writable<Record<string, DurationStatus>> | undefined;
     downloadLogs?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowJobResult = InstanceType<typeof FlowJobResult>;
+    tagLabel?: string | undefined;
+}
+declare const FlowJobResult: import("svelte").Component<Props, {}, "logs">;
+type FlowJobResult = ReturnType<typeof FlowJobResult>;
 export default FlowJobResult;

package/package/components/FlowPreviewContent.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { run, stopPropagation } from 'svelte/legacy';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
 import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { Badge, Button } from './common';
 import Popover from './meltComponents/Popover.svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import SchemaFormWithArgPicker from './SchemaFormWithArgPicker.svelte';
@@ -58,7 +58,7 @@ function extractFlow(previewMode) {
 }
 let lastPreviewFlow = $state(undefined);
 export async function runPreview(args, restartedFrom) {
-    if (stepHistoryLoader?.flowJobInitial) {
+    if (stepHistoryLoader?.flowJobInitial !== false) {
         stepHistoryLoader?.setFlowJobInitial(false);
     }
     try {
@@ -141,20 +141,23 @@ async function selectInput(input, type) {
 export function refresh() {
     renderCount++;
 }
-let scrollableDiv = undefined;
+let scrollableDiv = $state(undefined);
 function handleScroll() {
-    scrollTop = scrollableDiv?.scrollTop ?? 0;
+    let newScroll = scrollableDiv?.scrollTop ?? 0;
+    if (newScroll != 0 && render) {
+        scrollTop = newScroll;
+    }
 }
 function onScrollableDivChange() {
     if (scrollTop != 0 && scrollableDiv) {
         scrollableDiv.scrollTop = scrollTop;
     }
 }
-run(() => {
-    selectedJobStep !== undefined && onSelectedJobStepChange();
+$effect.pre(() => {
+    selectedJobStep !== undefined && untrack(() => onSelectedJobStepChange());
 });
-run(() => {
-    scrollableDiv && onScrollableDivChange();
+$effect(() => {
+    scrollableDiv && render && untrack(() => onScrollableDivChange());
 });
 export async function cancelTest() {
     isRunning = false;
@@ -482,7 +485,7 @@ export function flowHasChanged() {
 					wideResults
 					{flowStateStore}
 					{jobId}
-					on:done={() => {
+					on:done={(x) => {
 						isRunning = false
 						$executionCount = $executionCount + 1
 						onJobDone?.()

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -54,6 +54,6 @@ declare const FlowPreviewContent: $$__sveltets_2_IsomorphicComponent<Props, {
     getIsOwner: () => boolean;
     getJob: () => Job | undefined;
     flowHasChanged: () => boolean;
-}, "initial" | "preventEscape" | "job" | "jobId" | "scrollTop" | "localDurationStatuses" | "localModuleStates" | "rightColumnSelect" | "previewMode" | "selectedJobStep" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
+}, "initial" | "preventEscape" | "job" | "jobId" | "scrollTop" | "localDurationStatuses" | "rightColumnSelect" | "localModuleStates" | "selectedJobStep" | "previewMode" | "selectedJobStepIsTopLevel" | "selectedJobStepType" | "branchOrIterationN">;
 type FlowPreviewContent = InstanceType<typeof FlowPreviewContent>;
 export default FlowPreviewContent;

package/package/components/FlowPreviewResult.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">import { Badge, Loader2 } from 'lucide-svelte';
+<script lang="ts">import { Loader2 } from 'lucide-svelte';
 import FlowJobResult from './FlowJobResult.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
 import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
 import { emptyString } from '../utils';
+import Badge from './common/badge/Badge.svelte';
 let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDurationStatuses, innerModules, suspendStatus, hideJobId, extra } = $props();
 </script>
 
@@ -52,10 +53,17 @@ let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDuration
 			{#if mod.type == 'InProgress'}
 				{@const rawMod = job.raw_flow?.modules[i]}
 
-				<div
-					><span class="inline-flex gap-1"
-						><Badge color="indigo">{mod.id}</Badge>
-						<span class="font-medium text-primary">
+				<div>
+					<span class="inline-flex gap-1">
+						<Badge
+							color="indigo"
+							wrapperClass="max-w-full"
+							baseClass="max-w-full truncate !px-1"
+							title={mod.id}
+						>
+							<span class="max-w-full text-2xs truncate">{mod.id}</span></Badge
+						>
+						<span class="font-medium text-primary mt-0.5">
 							{#if !emptyString(rawMod?.summary)}
 								{rawMod?.summary ?? ''}
 							{:else if rawMod?.value.type == 'script'}
@@ -65,7 +73,7 @@ let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDuration
 							{/if}
 						</span>
 
-						<Loader2 class="animate-spin" /></span
+						<Loader2 class="animate-spin mt-0.5" /></span
 					></div
 				>
 			{/if}