windmill-components 1.531.1 → 1.537.1

package/package/components/flows/propPicker/OutputPickerInner.svelte

@@ -19,7 +19,7 @@ import { Pin, History, Pen, Check, X, Loader2, Pencil } from 'lucide-svelte';
 import ObjectViewer from '../../propertyPicker/ObjectViewer.svelte';
 import StepHistory from './StepHistory.svelte';
 import { Popover } from '../../meltComponents';
-import { untrack } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { Tooltip } from '../../meltComponents';
 import DisplayResult from '../../DisplayResult.svelte';
 import OutputBadge from './OutputBadge.svelte';
@@ -27,7 +27,7 @@ import { twMerge } from 'tailwind-merge';
 import DisplayResultControlBar from '../../DisplayResultControlBar.svelte';
 import { base } from '../../../base';
 import { fade } from 'svelte/transition';
-let { lastJob = undefined, testJob = undefined, prefix = '', allowCopy = false, connectingData = undefined, mock = $bindable({ enabled: false }), moduleId = '', fullResult = false, closeOnOutsideClick = false, getLogs = false, selectedJob = $bindable(undefined), forceJson = $bindable(false), isLoading = $bindable(false), preview = $bindable(undefined), hideHeaderBar = false, simpleViewer = undefined, path = '', loopStatus = undefined, customHeight = undefined, rightMargin = false, disableMock = false, disableHistory = false, derivedHistoryOpen = $bindable(false), historyOffset = { mainAxis: 8, crossAxis: -4.5 }, clazz, copilot_fix, onSelect, onUpdateMock, onEditInput, selectionId, initial, customEmptyJobMessage } = $props();
+let { testJob, prefix = '', allowCopy = false, connectingData = undefined, mock = $bindable({ enabled: false }), moduleId = '', fullResult = false, closeOnOutsideClick = false, getLogs = false, isLoading = $bindable(false), hideHeaderBar = false, simpleViewer = undefined, path = '', loopStatus = undefined, customHeight = undefined, rightMargin = false, disableMock = false, disableHistory = false, historyOffset = { mainAxis: 8, crossAxis: -4.5 }, clazz, copilot_fix, onSelect, onUpdateMock, onEditInput, selectionId, initial, customEmptyJobMessage } = $props();
 let jsonView = $state(false);
 let clientHeight = $state(0);
 let tmpMock = $state(undefined);
@@ -36,6 +36,8 @@ let stepHistoryPopover = $state(undefined);
 let historyOpen = $state(false);
 let contentEl = $state(undefined);
 let hasOverflow = $state(false);
+let preview = $state(undefined);
+let selectedJob = $state(undefined);
 function checkOverflow() {
     if (contentEl) {
         hasOverflow = contentEl.scrollHeight > contentEl.clientHeight;
@@ -45,22 +47,18 @@ function selectJob(nJob) {
     if (nJob && (nJob.result_stream || nJob.type == 'CompletedJob')) {
         selectedJob = nJob;
     }
-    else if (job && (job.result_stream || job.type == 'CompletedJob')) {
-        selectedJob = job;
+    else if (lastJob && (lastJob.result_stream || lastJob.type == 'CompletedJob')) {
+        selectedJob = lastJob;
     }
     else {
         selectedJob = undefined;
     }
 }
 $effect(() => {
-    if (!job || !(job.result_stream || job.type == 'CompletedJob')) {
+    if (!lastJob || !(lastJob.result_stream || lastJob.type == 'CompletedJob')) {
         return;
     }
-    selectJob(job);
-    if (job.preview && mock?.enabled) {
-        preview = 'job';
-        job.preview = false;
-    }
+    selectJob(lastJob);
 });
 function togglePreview(nPrev) {
     if (!nPrev && preview === 'job') {
@@ -78,6 +76,8 @@ let displayResultJob = $state(undefined);
 let displayResultMock = $state(undefined);
 let toolbarLocationJob = $state(undefined);
 let toolbarLocationMock = $state(undefined);
+const flowEditorContext = getContext('FlowEditorContext');
+const flowStateStore = flowEditorContext?.flowStateStore;
 function updateCanEditWithDblClick(newValue) {
     canEditWithDblClick = newValue;
     if (debounceTimeout) {
@@ -129,14 +129,33 @@ function togglePin() {
         togglePreview(undefined);
     }
 }
-let mockUpdateStatus = $derived(preview === 'mock' && !mock?.enabled
+function updateLastJob() {
+    if (testJob) {
+        return testJob;
+    }
+    if (!flowStateStore ||
+        !moduleId ||
+        flowStateStore.val[moduleId]?.previewResult === 'never tested this far') {
+        return;
+    }
+    return {
+        id: flowStateStore.val[moduleId]?.previewJobId ?? '',
+        result: flowStateStore.val[moduleId]?.previewResult,
+        type: 'CompletedJob',
+        success: flowStateStore.val[moduleId]?.previewSuccess ?? undefined
+    };
+}
+const lastJob = $derived.by(updateLastJob);
+export function setJobPreview() {
+    if (mock?.enabled) {
+        preview = 'job';
+    }
+}
+const mockUpdateStatus = $derived(preview === 'mock' && !mock?.enabled
     ? 'restore'
-    : preview === 'job' && mock?.enabled && selectedJob?.type === 'CompletedJob'
+    : preview === 'job' && mock?.enabled && selectedJob?.['type'] === 'CompletedJob'
         ? 'override'
         : undefined);
-$effect(() => {
-    derivedHistoryOpen = historyOpen;
-});
 $effect(() => {
     if (displayResultJob && typeof displayResultJob.getToolbarLocation === 'function') {
         toolbarLocationJob = displayResultJob.getToolbarLocation();
@@ -159,18 +178,50 @@ $effect(() => {
         untrack(() => updateCanEditWithDblClick(newValue));
     }
 });
-let job = $derived.by(() => {
-    if (testJob) {
-        return { ...testJob, preview: testJob.type === 'CompletedJob' };
-    }
-    if (lastJob) {
-        return { ...lastJob, preview: false };
-    }
-    return undefined;
-});
 let popoverHeight = $derived(customHeight ?? (clientHeight > 0 ? clientHeight : 0));
-const isLoadingAndNotMock = $derived(isLoading && job?.result_stream === undefined && !mock?.enabled);
+// If a test job is running, we override the preview to show the test job
+const executingTestJob = $derived(testJob && testJob.type === 'QueuedJob');
+const isLoadingAndNotMock = $derived(isLoading && lastJob?.result_stream === undefined && (!mock?.enabled || executingTestJob));
 const copilot_fix_render = $derived(copilot_fix);
+export function getPreview() {
+    return preview;
+}
+async function selectJobFromHistory({ detail }) {
+    if (!detail) {
+        togglePreview(undefined);
+        return;
+    }
+    if (detail === 'mock') {
+        if (mock?.enabled) {
+            togglePreview(undefined);
+            return;
+        }
+        togglePreview('mock');
+        return;
+    }
+    if (detail.id === lastJob?.id && !mock?.enabled) {
+        togglePreview(undefined);
+        return;
+    }
+    isLoading = true;
+    try {
+        const fullJob = await detail.getFullJob();
+        if (fullJob) {
+            selectJob(fullJob);
+            togglePreview('job');
+        }
+    }
+    finally {
+        isLoading = false;
+    }
+}
+export function getHistoryOpen() {
+    return historyOpen;
+}
+export function getSelectedJob() {
+    return selectedJob;
+}
+const noHistory = $derived(loopStatus ? (loopStatus.type === 'self' ? 'isLoop' : 'isInsideLoop') : undefined);
 </script>
 
 <div
@@ -178,6 +229,7 @@ const copilot_fix_render = $derived(copilot_fix);
 	bind:clientHeight
 	style={canEditWithDblClick ? 'cursor: text;' : ''}
 >
+	<!-- Top toolbar -->
 	<div
 		class={twMerge(
 			'text-xs px-1',
@@ -193,89 +245,24 @@ const copilot_fix_render = $derived(copilot_fix);
 			)}
 		>
 			<div class="flex flex-row items-center gap-0.5">
+				<!-- History picker -->
 				{#if !disableHistory}
-					<Popover
-						bind:this={stepHistoryPopover}
-						floatingConfig={{
-							strategy: 'fixed',
-							placement: 'left-start',
-							offset: historyOffset,
-							gutter: 0 // hack to make offset effective, see https://github.com/melt-ui/melt-ui/issues/528
-						}}
-						contentClasses="w-[225px] overflow-hidden"
-						{closeOnOutsideClick}
-						usePointerDownOutside={closeOnOutsideClick}
-						disablePopup={!!connectingData || jsonView}
-						bind:isOpen={historyOpen}
-					>
-						{#snippet trigger()}
-							<Button
-								color="light"
-								size="xs2"
-								variant="contained"
-								btnClasses="bg-surface h-[27px]"
-								startIcon={{ icon: History }}
-								nonCaptureEvent
-							/>
-						{/snippet}
-						{#snippet content()}
-							<div class="rounded-[inherit]" style={`height: ${popoverHeight}px`}>
-								<StepHistory
-									{moduleId}
-									{getLogs}
-									on:select={async ({ detail }) => {
-										if (!detail) {
-											togglePreview(undefined)
-											return
-										}
-										if (detail === 'mock') {
-											if (mock?.enabled) {
-												togglePreview(undefined)
-												return
-											}
-											togglePreview('mock')
-											return
-										}
-										if (detail.id === job?.id && !mock?.enabled) {
-											togglePreview(undefined)
-											return
-										}
-
-										// Create a timeout to show loading state after 200ms
-										const loadingTimeout = setTimeout(() => {
-											isLoading = true
-										}, 200)
-
-										try {
-											const fullJob = await detail.getFullJob()
-											if (fullJob) {
-												selectJob(fullJob)
-												togglePreview('job')
-											}
-										} finally {
-											// Clear the timeout if operation completed before 200ms
-											clearTimeout(loadingTimeout)
-											isLoading = false
-										}
-									}}
-									mockValue={mock?.return_value}
-									mockEnabled={mock?.enabled}
-									{path}
-									noHistory={loopStatus
-										? loopStatus.type === 'self'
-											? 'isLoop'
-											: 'isInsideLoop'
-										: undefined}
-								/>
-							</div>
-						{/snippet}
-					</Popover>
+					{@render historyPicker()}
 				{/if}
-				{#if !isLoadingAndNotMock || mock?.enabled}
+				<!-- Badge-->
+				{#if executingTestJob}
+					<OutputBadge
+						job={testJob}
+						class={twMerge(
+							'min-w-16 min-h-[23px] text-secondary',
+							preview ? 'bg-surface shadow-sm' : ''
+						)}
+					/>
+				{:else if !isLoadingAndNotMock || mock?.enabled}
 					<div
 						class={twMerge(
 							'w-grow min-w-0 flex gap-1 items-center h-[27px] rounded-md  group',
-							preview || selectedJob?.id !== job?.id ? 'p-[2px] bg-surface-secondary' : ''
+							preview || selectedJob?.id !== lastJob?.id ? 'p-[2px] bg-surface-secondary' : ''
 						)}
 					>
 						{#if loopStatus?.type === 'self'}
@@ -311,7 +298,7 @@ const copilot_fix_render = $derived(copilot_fix);
 								job={selectedJob}
 								class={twMerge(
 									'min-w-16 text-secondary',
-									preview || selectedJob?.id !== job?.id ? 'bg-surface shadow-sm h-[23px]' : ''
+									preview || selectedJob?.id !== lastJob?.id ? 'bg-surface shadow-sm h-[23px]' : ''
 								)}
 							/>
 						{/if}
@@ -329,17 +316,9 @@ const copilot_fix_render = $derived(copilot_fix);
 							>
 						{/if}
 					</div>
-				{:else if testJob}
-					<!-- {JSON.stringify(testJob)} -->
-					<OutputBadge
-						job={testJob}
-						class={twMerge(
-							'min-w-16 text-secondary',
-							preview || testJob?.id !== job?.id ? 'bg-surface shadow-sm h-[23px]' : ''
-						)}
-					/>
 				{/if}
 
+				<!-- Pin button -->
 				{#if !disableMock && !isLoadingAndNotMock}
 					<Tooltip disablePopup={mock?.enabled}>
 						<Button
@@ -368,6 +347,7 @@ const copilot_fix_render = $derived(copilot_fix);
 				{/if}
 
 				{#if jsonView}
+					<!-- Save button -->
 					<Button
 						size="xs2"
 						color="green"
@@ -388,6 +368,7 @@ const copilot_fix_render = $derived(copilot_fix);
 						}}
 						disabled={!!error || !tmpMock}
 					/>
+					<!-- Cancel button -->
 					<Button
 						size="xs2"
 						color="red"
@@ -399,7 +380,8 @@ const copilot_fix_render = $derived(copilot_fix);
 							tmpMock = undefined
 						}}
 					/>
-				{:else if mock?.enabled && !preview}
+				{:else if mock?.enabled && !preview && !executingTestJob}
+					<!-- Edit pin button -->
 					<Tooltip disablePopup={mock?.enabled}>
 						<Button
 							size="xs2"
@@ -510,6 +492,7 @@ const copilot_fix_render = $derived(copilot_fix);
 					<Loader2 class="animate-spin" />
 				</div>
 			{:else if connectingData !== undefined || simpleViewer}
+				<!-- Display data for input connections -->
 				<ObjectViewer
 					json={moduleId
 						? {
@@ -526,6 +509,7 @@ const copilot_fix_render = $derived(copilot_fix);
 					{editKey}
 				/>
 			{:else if jsonView}
+				<!-- Json editor for editing mock data -->
 				{#await import('../../JsonEditor.svelte')}
 					<Loader2 class="animate-spin" />
 				{:then Module}
@@ -549,12 +533,12 @@ const copilot_fix_render = $derived(copilot_fix);
 						class="h-full"
 					/>
 				{/await}
-			{:else if (mock?.enabled || preview == 'mock') && preview != 'job'}
+			{:else if (mock?.enabled || preview == 'mock') && preview != 'job' && !executingTestJob}
+				<!-- Display data for mock data -->
 				{#if fullResult}
 					<div class="break-words relative h-full">
 						<DisplayResult
 							bind:this={displayResultMock}
-							bind:forceJson
 							workspaceId={undefined}
 							jobId={undefined}
 							result_stream={undefined}
@@ -578,12 +562,12 @@ const copilot_fix_render = $derived(copilot_fix);
 					/>
 				{/if}
 			{:else if selectedJob != undefined && (selectedJob.result_stream || selectedJob.type == 'CompletedJob')}
+				<!-- Display data for job data -->
 				{#if fullResult}
 					<div class="break-words relative h-full">
 						{#key selectedJob}
 							<DisplayResult
 								bind:this={displayResultJob}
-								bind:forceJson
 								workspaceId={selectedJob?.workspace_id}
 								jobId={selectedJob?.id}
 								result={selectedJob?.result}
@@ -611,7 +595,7 @@ const copilot_fix_render = $derived(copilot_fix);
 						pureViewer={false}
 					/>
 				{/if}
-			{:else if !job}
+			{:else if !lastJob}
 				<div class="flex flex-col items-center justify-center h-full">
 					<p class="text-xs text-secondary">
 						{customEmptyJobMessage ?? 'Test this step to see results'}{#if !disableMock}
@@ -649,6 +633,47 @@ const copilot_fix_render = $derived(copilot_fix);
 	</button>
 {/snippet}
 
+{#snippet historyPicker()}
+	<Popover
+		bind:this={stepHistoryPopover}
+		floatingConfig={{
+			strategy: 'fixed',
+			placement: 'left-start',
+			offset: historyOffset,
+			gutter: 0 // hack to make offset effective, see https://github.com/melt-ui/melt-ui/issues/528
+		}}
+		contentClasses="w-[225px] overflow-hidden"
+		{closeOnOutsideClick}
+		usePointerDownOutside={closeOnOutsideClick}
+		disablePopup={!!connectingData || jsonView}
+		bind:isOpen={historyOpen}
+	>
+		{#snippet trigger()}
+			<Button
+				color="light"
+				size="xs2"
+				variant="contained"
+				btnClasses="bg-surface h-[27px]"
+				startIcon={{ icon: History }}
+				nonCaptureEvent
+			/>
+		{/snippet}
+		{#snippet content()}
+			<div class="rounded-[inherit]" style={`height: ${popoverHeight}px`}>
+				<StepHistory
+					{moduleId}
+					{getLogs}
+					on:select={selectJobFromHistory}
+					mockValue={mock?.return_value}
+					mockEnabled={mock?.enabled}
+					{path}
+					{noHistory}
+				/>
+			</div>
+		{/snippet}
+	</Popover>
+{/snippet}
+
 <style>
 	.dbl-click-editable {
 		cursor: text;

package/package/components/flows/propPicker/OutputPickerInner.svelte.d.ts

@@ -1,15 +1,5 @@
 import type { Job } from '../../../gen';
-type SelectedJob = ((Job | {
-    id: string;
-    result: unknown;
-    type: 'CompletedJob';
-    workspace_id: string;
-    success: boolean;
-}) & {
-    preview?: boolean;
-    result_stream?: string;
-    result?: unknown;
-}) | undefined;
+import type { OutputViewerJob } from '../types';
 interface Props {
     prefix?: string;
     allowCopy?: boolean;
@@ -22,10 +12,7 @@ interface Props {
     fullResult?: boolean;
     closeOnOutsideClick?: boolean;
     getLogs?: boolean;
-    selectedJob?: SelectedJob;
-    forceJson?: boolean;
     isLoading?: boolean;
-    preview?: 'mock' | 'job' | undefined;
     hideHeaderBar?: boolean;
     simpleViewer?: any | undefined;
     path?: string;
@@ -37,7 +24,6 @@ interface Props {
     rightMargin?: boolean;
     disableMock?: boolean;
     disableHistory?: boolean;
-    lastJob?: Job;
     testJob?: Job & {
         result_stream?: string;
     };
@@ -56,6 +42,11 @@ interface Props {
     onResetInitial?: () => void;
     customEmptyJobMessage?: string;
 }
-declare const OutputPickerInner: import("svelte").Component<Props, {}, "preview" | "forceJson" | "mock" | "isLoading" | "selectedJob" | "derivedHistoryOpen">;
+declare const OutputPickerInner: import("svelte").Component<Props, {
+    setJobPreview: () => void;
+    getPreview: () => "job" | "mock" | undefined;
+    getHistoryOpen: () => boolean;
+    getSelectedJob: () => OutputViewerJob;
+}, "mock" | "isLoading">;
 type OutputPickerInner = ReturnType<typeof OutputPickerInner>;
 export default OutputPickerInner;

package/package/components/flows/{testSteps.svelte.d.ts → stepsInputArgs.svelte.d.ts}

@@ -1,7 +1,7 @@
 import type { FlowModule, OpenFlow } from '../../gen';
 import type { FlowState } from './flowState';
 import { type PickableProperties } from './previousResults';
-export declare class TestSteps {
+export declare class StepsInputArgs {
     #private;
     constructor();
     setStepArgsManually(moduleId: string, args: Record<string, any>): void;
@@ -19,4 +19,5 @@ export declare class TestSteps {
     }, pickableProperties: PickableProperties | undefined): void;
     updateStepArgs(id: string, flowState: FlowState | undefined, flow: OpenFlow | undefined, previewArgs: Record<string, any> | undefined): void;
     removeExtraKey(moduleId: string, keys: string[]): void;
+    resetManuallyEditedArgs(): void;
 }

package/package/components/flows/{testSteps.svelte.js → stepsInputArgs.svelte.js}

@@ -1,6 +1,6 @@
 import { dfs, getPreviousModule, getStepPropPicker } from './previousResults';
 import { evalValue } from './utils';
-export class TestSteps {
+export class StepsInputArgs {
     #stepsEvaluated = $state({});
     #steps = $state({});
     constructor() { }
@@ -36,8 +36,17 @@ export class TestSteps {
         this.#stepsEvaluated[moduleId][argName] = $state.snapshot(value);
     }
     isArgManuallySet(moduleId, argName) {
-        return (JSON.stringify(this.#steps[moduleId]?.[argName]) !==
-            JSON.stringify(this.#stepsEvaluated[moduleId]?.[argName]));
+        try {
+            const stepsValue = this.#steps[moduleId]?.[argName];
+            const evaluatedValue = this.#stepsEvaluated[moduleId]?.[argName];
+            const stepsStr = JSON.stringify(stepsValue);
+            const evaluatedStr = JSON.stringify(evaluatedValue);
+            return stepsStr !== evaluatedStr;
+        }
+        catch (error) {
+            console.warn(`Error in isArgManuallySet for moduleId: ${moduleId}, argName: ${argName}`, error);
+            return this.#steps[moduleId]?.[argName] !== this.#stepsEvaluated[moduleId]?.[argName];
+        }
     }
     getManuallyEditedArgs(moduleId) {
         const manuallyEditedArgs = [];
@@ -122,4 +131,7 @@ export class TestSteps {
         });
         this.#stepsEvaluated[moduleId] = nargs;
     }
+    resetManuallyEditedArgs() {
+        this.#steps = $state.snapshot(this.#stepsEvaluated);
+    }
 }

package/package/components/flows/types.d.ts

@@ -1,4 +1,4 @@
-import type { OpenFlow } from '../../gen';
+import type { Job, OpenFlow } from '../../gen';
 import type { History } from '../../history.svelte';
 import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
@@ -7,12 +7,13 @@ import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui';
 import type Editor from '../Editor.svelte';
 import type SimpleEditor from '../SimpleEditor.svelte';
 import type { StateStore } from '../../utils';
-import type { TestSteps } from './testSteps.svelte';
+import type { StepsInputArgs } from './stepsInputArgs.svelte';
 import type { Asset, AssetWithAccessType } from '../assets/lib';
 import type S3FilePicker from '../S3FilePicker.svelte';
 import type DbManagerDrawer from '../DBManagerDrawer.svelte';
 import type ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import type { ModulesTestStates } from '../modulesTest.svelte';
+import type { ButtonProp } from '../DiffEditor.svelte';
 export type FlowInput = Record<string, {
     flowStepWarnings?: Record<string, {
         message: string;
@@ -38,6 +39,8 @@ export type CurrentEditor = (({
     hideDiffMode: () => void;
     diffMode: boolean;
     lastDeployedCode: string | undefined;
+    setDiffOriginal?: (code: string) => void;
+    setDiffButtons?: (buttons: ButtonProp[]) => void;
 } | {
     type: 'iterator';
     editor: SimpleEditor;
@@ -57,7 +60,7 @@ export type FlowEditorContext = {
     flowStore: StateStore<ExtendedOpenFlow>;
     flowInputEditorState: Writable<FlowInputEditorState>;
     flowStateStore: StateStore<FlowState>;
-    testSteps: TestSteps;
+    stepsInputArgs: StepsInputArgs;
     saveDraft: () => void;
     initialPathStore: Writable<string>;
     fakeInitialPath: string;
@@ -79,3 +82,13 @@ export type FlowGraphAssetContext = StateStore<{
     additionalAssetsMap: Record<string, AssetWithAccessType[]>;
     computeAssetsCount: (asset: Asset) => number;
 }>;
+export type OutputViewerJob = ((Job | {
+    id: string;
+    result: unknown;
+    type: 'CompletedJob';
+    workspace_id: string;
+    success: boolean;
+}) & {
+    result_stream?: string;
+    result?: unknown;
+}) | undefined;

package/package/components/flows/utils.js

@@ -42,6 +42,9 @@ export function evalValue(k, mod, pickableProperties, showError) {
             v = undefined;
         }
     }
+    if (v === NEVER_TESTED_THIS_FAR) {
+        v = undefined;
+    }
     return v;
 }
 export function filteredContentForExport(flow) {

package/package/components/graph/FlowGraphV2.svelte

@@ -303,7 +303,7 @@ let graph = $derived.by(() => {
         suspendStatus,
         flowHasChanged,
         additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
-    }, untrack(() => failureModule), untrack(() => preprocessorModule), eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
+    }, untrack(() => failureModule), preprocessorModule, eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });
 $effect(() => {
     ;

package/package/components/graph/renderers/nodes/AIToolNode.svelte

@@ -7,7 +7,7 @@ export const BELOW_ADDITIONAL_OFFSET = 19;
 export const AI_TOOL_CALL_PREFIX = '_wm_ai_agent_tool_call';
 export const AI_TOOL_MESSAGE_PREFIX = '_wm_ai_agent_message';
 const ROW_WIDTH = 275;
-const NEW_TOOL_NODE_WIDTH = 40;
+const NEW_TOOL_NODE_WIDTH = 50;
 const MAX_TOOLS_PER_ROW = 2;
 let computeAIToolNodesCache;
 export function getToolCallId(idx, agentModuleId, moduleId) {
@@ -100,13 +100,13 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 id: `${node.id}-tool-${tool.id}`,
                 width: inputToolWidth,
                 position: {
-                    x: tools.length === 1
+                    x: (tools.length === 1
                         ? (ROW_WIDTH - inputToolWidth) / 2
                         : (i + 1) % 2 === 0
                             ? inputToolWidth + inputToolXGap
                             : isLastRow && tools.length % 2 === 1
                                 ? (ROW_WIDTH - inputToolWidth) / 2
-                                : 0,
+                                : 0) + node.data.offset,
                     y: baseOffset +
                         rowOffset *
                             (agentActions
@@ -132,7 +132,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
                 parentId: node.id,
                 width: NEW_TOOL_NODE_WIDTH,
                 position: {
-                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2,
+                    x: (ROW_WIDTH - NEW_TOOL_NODE_WIDTH) / 2 + node.data.offset,
                     y: baseOffset + rowOffset
                 }
             });