windmill-components 1.558.3 → 1.596.0

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

@@ -1,3 +1,5 @@
+export declare const errorHandlerArgs: string[];
+export declare const slackErrorHandlerHubPathEnding = "/workspace-or-schedule-error-handler-slack";
 import type { ErrorHandler } from '../gen/types.gen';
 interface Props {
     errorOrRecovery: 'error' | 'recovery' | 'success';

package/package/components/ExploreAssetButton.svelte

@@ -1,11 +1,12 @@
 <script module lang="ts">export function assetCanBeExplored(asset, _resourceMetadata) {
     return (asset.kind === 'ducklake' ||
+        asset.kind === 'datatable' ||
         asset.kind === 's3object' ||
         (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)));
 }
 </script>
 
-<script lang="ts">import { isDbType } from './apps/components/display/dbtable/utils';
+<script lang="ts">import { isDbType } from './dbTypes';
 import { formatAsset } from './assets/lib';
 import { Button, ButtonType } from './common';
 import DbManagerDrawer from './DBManagerDrawer.svelte';
@@ -14,37 +15,61 @@ import { userStore } from '../stores';
 import { isS3Uri } from '../utils';
 import { Database, File } from 'lucide-svelte';
 import DucklakeIcon from './icons/DucklakeIcon.svelte';
-const { asset, _resourceMetadata, s3FilePicker, dbManagerDrawer, onClick, class: className = '', noText = false, buttonVariant = 'border', btnClasses = '', disabled = false } = $props();
+const { asset, _resourceMetadata, s3FilePicker, dbManagerDrawer, onClick, class: className = '', noText = false, buttonVariant = 'default', btnClasses = '', disabled = false } = $props();
 const assetUri = $derived(formatAsset(asset));
 </script>
 
 <Button
 	disabled={$userStore?.operator || disabled}
-	size="xs"
+	unifiedSize={'md'}
 	variant={buttonVariant}
-	spacingSize="xs2"
 	wrapperClasses={className}
+	iconOnly={noText}
 	{btnClasses}
 	on:click={async () => {
 		if (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)) {
+			let resourcePath = asset.path.split('/').slice(0, 3).join('/')
+			let specificTable = asset.path.split('/')[3] as string | undefined
 			dbManagerDrawer?.openDrawer({
 				type: 'database',
 				resourceType: _resourceMetadata.resource_type,
-				resourcePath: asset.path
+				resourcePath,
+				specificTable
 			})
 		} else if (asset.kind === 's3object' && isS3Uri(assetUri)) {
 			s3FilePicker?.open(assetUri)
 		} else if (asset.kind === 'ducklake') {
-			dbManagerDrawer?.openDrawer({ type: 'ducklake', ducklake: asset.path })
+			let ducklake = asset.path.split('/')[0]
+			let specificTable = asset.path.split('/')[1] as string | undefined
+			dbManagerDrawer?.openDrawer({ type: 'ducklake', ducklake, specificTable })
+		} else if (asset.kind === 'datatable') {
+			let datatable = asset.path.split('/')[0]
+			let specificTableSplit = asset.path.split('/')[1]?.split('.') as string[] | undefined
+			let [specificSchema, specificTable] =
+				specificTableSplit?.length === 2
+					? [specificTableSplit[0], specificTableSplit[1]]
+					: [undefined, specificTableSplit?.[0]]
+			dbManagerDrawer?.openDrawer({
+				type: 'database',
+				resourceType: 'postgresql',
+				resourcePath: `datatable://${datatable}`,
+				specificTable,
+				specificSchema
+			})
 		}
 		onClick?.()
 	}}
+	endIcon={asset.kind === 's3object'
+		? { icon: File }
+		: asset.kind === 'resource' || asset.kind === 'datatable'
+			? { icon: Database }
+			: asset.kind === 'ducklake'
+				? { icon: DucklakeIcon }
+				: undefined}
 >
 	{#if asset.kind === 's3object'}
-		<span class:hidden={noText}>Explore</span> <File size={18} />
-	{:else if asset.kind === 'resource'}
-		<span class:hidden={noText}>Manage</span> <Database size={18} />
-	{:else if asset.kind === 'ducklake'}
-		<span class:hidden={noText}>Manage</span> <DucklakeIcon size={18} />
+		<span class:hidden={noText}>Explore</span>
+	{:else if asset.kind === 'resource' || asset.kind === 'ducklake' || asset.kind === 'datatable'}
+		<span class:hidden={noText}>Manage</span>
 	{/if}
 </Button>

package/package/components/FakeMonacoPlaceHolder.svelte

@@ -1,7 +1,9 @@
 <!-- Used to avoid height jitter when loading monaco asynchronously -->
 
 <script lang="ts">import { getOS } from '../utils';
-let { code, autoheight = false, lineNumbersWidth = 51, lineNumbersOffset = 0, class: className = '', showNumbers = true, fontSize = 14 } = $props();
+import { MONACO_Y_PADDING } from './vscode';
+let { code, autoheight = false, lineNumbersWidth = 0, lineNumbersOffset = 0, class: className = '', showNumbers = true, fontSize = 14 } = $props();
+let yPadding = MONACO_Y_PADDING;
 // https://github.com/microsoft/vscode/blob/baa2dad3cdacd97ac02eff0604984faf1167ff1e/src/vs/editor/common/config/editorOptions.ts#L5421
 const DEFAULT_WINDOWS_FONT_FAMILY = "Consolas, 'Courier New', monospace";
 const DEFAULT_MAC_FONT_FAMILY = "Menlo, Monaco, 'Courier New', monospace";
@@ -21,7 +23,9 @@ let [clientWidth, clientHeight] = $state([0, 0]);
 let showHorizontalScrollbar = $derived(lines.some((line) => line.length * charWidth > clientWidth - 40));
 let [editorWidth, editorHeight] = $derived([
     clientWidth,
-    autoheight ? lines.length * lineHeight + (showHorizontalScrollbar ? 12 : 0) : clientHeight
+    autoheight
+        ? lines.length * lineHeight + (showHorizontalScrollbar ? 12 : 0) + yPadding * 2
+        : clientHeight
 ]);
 </script>
 
@@ -30,7 +34,7 @@ let [editorWidth, editorHeight] = $derived([
 <div
 	bind:clientWidth
 	bind:clientHeight
-	class="h-full w-full relative editor {className}"
+	class="h-full w-full relative editor bg-surface-input rounded-md {className}"
 	style="--vscode-editorCodeLens-lineHeight: 18px; --vscode-editorCodeLens-fontSize: 12px; --vscode-editorCodeLens-fontFeatureSettings: 'liga' off, 'calt' off; --code-editorInlayHintsFontFamily: {fontFamily};"
 >
 	<div
@@ -53,7 +57,7 @@ let [editorWidth, editorHeight] = $derived([
 						: 'block'};"
 				>
 					{#each lines as _, i}
-						<div style="top:{lineHeight * i}px;height:{lineHeight}px;">
+						<div style="top:{lineHeight * i + yPadding}px;height:{lineHeight}px;">
 							<div class="line-numbers" style="left:{lineNumbersOffset}px;width:25px;">{i + 1}</div>
 						</div>
 					{/each}
@@ -68,12 +72,12 @@ let [editorWidth, editorHeight] = $derived([
 					style="position: absolute; overflow: hidden; width: 1.67772e+07px; height: 1.67772e+07px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
 				>
 					<div
-						class="view-lines monaco-mouse-cursor-text text-tertiary/60"
-						style="line-height: {lineHeight}px; position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: 1143px; height: 789px;"
+						class="view-lines monaco-mouse-cursor-text text-primary/60"
+						style="padding-top: {yPadding}px; line-height: {lineHeight}px; position: absolute; font-family: {fontFamily}; font-weight: normal; font-size: {fontSize}px; font-feature-settings: 'liga' 0, 'calt' 0; font-variation-settings: normal; line-height: {lineHeight}px; letter-spacing: 0px; width: 1143px; height: 789px;"
 					>
 						{#each lines as line, i}
 							<div
-								style="height: {lineHeight}px; top: {i * lineHeight}px;"
+								style="height: {lineHeight}px; top: {lineHeight * i}px;"
 								class="text-nowrap whitespace-pre"
 							>
 								{line}

package/package/components/FieldHeader.svelte

@@ -21,9 +21,9 @@ export let simpleTooltipIconClass = '';
 <div class="inline-flex flex-row items-baseline truncated">
 	<span
 		class={twMerge(
-			disabled ? 'text-tertiary' : '',
-			'font-semibold',
-			lightHeader ? 'text-secondary text-sm font-normal' : '',
+			disabled ? 'text-primary' : '',
+			'font-semibold text-xs',
+			lightHeader ? 'text-secondary font-normal' : 'text-emphasis',
 			labelClass
 		)}
 	>
@@ -38,7 +38,7 @@ export let simpleTooltipIconClass = '';
 	{/if}
 
 	{#if displayType}
-		<span class="text-xs italic ml-2 text-hint">
+		<span class="text-2xs italic ml-2 text-hint">
 			{#if format && !format.startsWith('resource') && !format.startsWith('jsonschema-')}
 				{format}
 			{:else}

package/package/components/FlowBuilder.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { FlowService, DraftService, CaptureService } from '../gen';
 import { initHistory, redo, undo } from '../history.svelte';
-import { enterpriseLicense, tutorialsToDo, userStore, workspaceStore, usedTriggerKinds } from '../stores';
+import { enterpriseLicense, userStore, workspaceStore, usedTriggerKinds } from '../stores';
 import { cleanValueProperties, encodeState, generateRandomString, orderedJsonStringify, readFieldsRecursively, replaceFalseWithUndefined } from '../utils';
 import { sendUserToast } from '../toast';
 import { Drawer } from './common';
@@ -15,17 +15,19 @@ import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
 import { dfs as dfsApply } from './flows/dfs';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
-import { cleanInputs } from './flows/utils';
+import { SelectionManager } from './graph/selectionUtils.svelte';
+import { NoteEditor } from './graph/noteEditor.svelte';
+import { setNoteEditorContext } from './graph/noteEditor.svelte';
+import { cleanFlow } from './flows/utils.svelte';
 import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, Settings } from 'lucide-svelte';
 import Awareness from './Awareness.svelte';
 import { getAllModules } from './flows/flowExplorer';
 import {} from './copilot/flow';
 import { loadFlowModuleState } from './flows/flowStateUtils.svelte';
-import FlowBuilderTutorials from './FlowBuilderTutorials.svelte';
 import Dropdown from './DropdownV2.svelte';
 import FlowTutorials from './FlowTutorials.svelte';
-import { ignoredTutorials } from './tutorials/ignoredTutorials';
 import FlowHistory from './flows/FlowHistory.svelte';
+import FlowEditorTutorial from './flows/FlowEditorTutorial.svelte';
 import Summary from './Summary.svelte';
 import FlowYamlEditor from './flows/header/FlowYamlEditor.svelte';
 import {} from './triggers';
@@ -35,9 +37,11 @@ import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTrig
 import { Triggers } from './triggers/triggers.svelte';
 import { StepsInputArgs } from './flows/stepsInputArgs.svelte';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
+import { validateRetryConfig } from '../utils';
 import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
 import FlowAssetsHandler, { initFlowGraphAssetsCtx } from './flows/FlowAssetsHandler.svelte';
+import { inputSizeClasses } from './text_input/TextInput.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
@@ -70,7 +74,7 @@ async function handleDraftTriggersConfirmed(event) {
     confirmDeploymentCallback(selectedTriggers);
 }
 function hasAIChanges() {
-    return aiChatManager.flowAiChatHelpers?.hasDiff() ?? false;
+    return aiChatManager.flowAiChatHelpers?.hasPendingChanges() ?? false;
 }
 function withAIChangesWarning(callback) {
     if (hasAIChanges()) {
@@ -165,7 +169,7 @@ async function saveDraftInternal(forceSave = false) {
     }
     loadingDraft = true;
     try {
-        const flow = cleanInputs(flowStore.val);
+        const flow = cleanFlow(flowStore.val);
         try {
             localStorage.removeItem('flow');
             localStorage.removeItem(`flow-${$pathStore}`);
@@ -235,12 +239,12 @@ async function saveDraftInternal(forceSave = false) {
         };
         let savedAtNewPath = false;
         if (newFlow) {
-            onSaveInitial?.({ path: $pathStore, id: getSelectedId() });
+            onSaveInitial?.({ path: $pathStore, id: getSelectedId() ?? 'settings' });
         }
         else if (savedFlow?.draft_only && $pathStore !== initialPath) {
             savedAtNewPath = true;
             initialPath = $pathStore;
-            onSaveDraftOnlyAtNewPath?.({ path: $pathStore, selectedId: getSelectedId() });
+            onSaveDraftOnlyAtNewPath?.({ path: $pathStore, selectedId: getSelectedId() ?? 'settings' });
             // this is so we can use the flow builder outside of sveltekit
         }
         onSaveDraft?.({ path: $pathStore, savedAtNewPath, newFlow });
@@ -318,7 +322,25 @@ async function saveFlow(deploymentMsg, triggersToDeploy) {
     }
     loadingSave = true;
     try {
-        const flow = cleanInputs(flowStore.val);
+        const flow = cleanFlow(flowStore.val);
+        if (flow.value?.modules) {
+            const validationErrors = [];
+            dfsApply(flow.value.modules, (module) => {
+                const error = validateRetryConfig(module.retry);
+                if (error) {
+                    validationErrors.push(`Step '${module.id}': ${error}`);
+                }
+            });
+            if (flow.value.failure_module) {
+                // add validation logic here for failure module
+            }
+            if (flow.value.preprocessor_module) {
+                // add validation logic here for preprocessor module
+            }
+            if (validationErrors.length > 0) {
+                throw new Error(validationErrors.join('\n'));
+            }
+        }
         // console.log('flow', computeUnlockedSteps(flow)) // del
         // loadingSave = false // del
         // return
@@ -410,7 +432,7 @@ function saveSessionDraft() {
             localStorage.setItem(initialPath && initialPath != '' ? `flow-${initialPath}` : 'flow', encodeState({
                 flow: flowStore.val,
                 path: $pathStore,
-                selectedId: $selectedIdStore,
+                selectedId: selectedIdStore,
                 draft_triggers: triggersState.getDraftTriggersSnapshot(),
                 selected_trigger: triggersState.getSelectedTriggerSnapshot(),
                 loadedFromHistory: {
@@ -424,9 +446,17 @@ function saveSessionDraft() {
         }
     }, 500);
 }
-const selectedIdStore = writable(selectedId ?? 'settings-metadata');
+const selectionManager = new SelectionManager();
+const selectedIdStore = $derived(selectionManager.getSelectedId());
+// Initialize with selected id if provided
+if (selectedId) {
+    selectionManager.selectId(selectedId);
+}
+else {
+    selectionManager.selectId('settings-metadata');
+}
 export function getSelectedId() {
-    return $selectedIdStore;
+    return selectedIdStore;
 }
 const previewArgsStore = $state({ val: initialArgs });
 const scriptEditorDrawer = writable(undefined);
@@ -442,14 +472,14 @@ const flowInputEditorStateStore = writable({
 });
 const stepsInputArgs = new StepsInputArgs();
 function select(selectedId) {
-    selectedIdStore.set(selectedId);
+    selectionManager.selectId(selectedId);
 }
 let insertButtonOpen = writable(false);
 let modulesTestStates = new ModulesTestStates();
 let outputPickerOpenFns = $state({});
 let flowEditor = $state(undefined);
 setContext('FlowEditorContext', {
-    selectedId: selectedIdStore,
+    selectionManager,
     currentEditor: writable(undefined),
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
@@ -470,6 +500,12 @@ setContext('FlowEditorContext', {
     modulesTestStates,
     outputPickerOpenFns
 });
+// Set up NoteEditor context for note editing capabilities
+const noteEditor = new NoteEditor(flowStore, () => {
+    // Enable notes display when a note is created
+    flowEditor?.enableNotes?.();
+});
+setNoteEditorContext(noteEditor);
 setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => flowStore.val.value.modules }));
 // Add triggers context store
 const triggersState = $state(new Triggers([
@@ -512,7 +548,7 @@ function onKeyDown(event) {
         case 'z':
             if (event.ctrlKey || event.metaKey) {
                 flowStore.val = undo(history, flowStore.val);
-                $selectedIdStore = 'Input';
+                selectionManager.selectId('Input');
                 event.preventDefault();
             }
             break;
@@ -525,9 +561,9 @@ function onKeyDown(event) {
         case 'ArrowDown': {
             if (!$insertButtonOpen && !flowPreviewButtons?.getPreviewOpen()) {
                 let ids = generateIds();
-                let idx = ids.indexOf($selectedIdStore);
+                let idx = ids.indexOf(selectedIdStore);
                 if (idx > -1 && idx < ids.length - 1) {
-                    $selectedIdStore = ids[idx + 1];
+                    selectionManager.selectId(ids[idx + 1]);
                     event.preventDefault();
                 }
             }
@@ -536,9 +572,9 @@ function onKeyDown(event) {
         case 'ArrowUp': {
             if (!$insertButtonOpen && !flowPreviewButtons?.getPreviewOpen()) {
                 let ids = generateIds();
-                let idx = ids.indexOf($selectedIdStore);
+                let idx = ids.indexOf(selectedIdStore);
                 if (idx > 0 && idx < ids.length) {
-                    $selectedIdStore = ids[idx - 1];
+                    selectionManager.selectId(ids[idx - 1]);
                     event.preventDefault();
                 }
             }
@@ -587,9 +623,6 @@ export function triggerTutorial() {
     if (tutorial) {
         flowTutorials?.runTutorialById(tutorial);
     }
-    else if ($tutorialsToDo.includes(0) && !$ignoredTutorials.includes(0)) {
-        flowTutorials?.runTutorialById('action');
-    }
 }
 let moreItems = $state([]);
 function onCustomUiChange(customUi, hasAiDiff) {
@@ -652,7 +685,7 @@ $effect.pre(() => {
     setContext('customUi', customUi);
 });
 $effect.pre(() => {
-    if (flowStore.val || $selectedIdStore) {
+    if (flowStore.val || selectedIdStore) {
         readFieldsRecursively(flowStore.val);
         untrack(() => saveSessionDraft());
     }
@@ -667,7 +700,7 @@ $effect.pre(() => {
     initialPath && initialPath != '' && $workspaceStore && untrack(() => loadTriggers());
 });
 $effect.pre(() => {
-    const hasAiDiff = aiChatManager.flowAiChatHelpers?.hasDiff() ?? false;
+    const hasAiDiff = aiChatManager.flowAiChatHelpers?.hasPendingChanges() ?? false;
     customUi && untrack(() => onCustomUiChange(customUi, hasAiDiff));
 });
 export async function loadFlowState() {
@@ -691,7 +724,7 @@ function onJobDone() {
         if (job.type === 'CompletedJob' &&
             job.success &&
             flowPreviewButtons?.getPreviewMode() === 'whole') {
-            if (flowEditor?.isNodeVisible('result') && $selectedIdStore !== 'Result') {
+            if (flowEditor?.isNodeVisible('Result') && selectedIdStore !== 'Result') {
                 outputPickerOpenFns['Result']?.();
             }
         }
@@ -782,7 +815,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								}
 							}
 
-							$selectedIdStore = 'Input'
+							selectionManager.selectId('Input')
 						}}
 						on:redo={() => {
 							flowStore.val = redo(history)
@@ -790,18 +823,17 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					/>
 				</div>
 
-				<div class="gap-4 flex-row hidden md:flex w-full max-w-md">
+				<div class="gap-4 flex-row hidden md:flex w-full whitespace-nowrap max-w-md">
 					{#if triggersState.triggers?.some((t) => t.type === 'schedule')}
 						{@const primaryScheduleIndex = triggersState.triggers.findIndex((t) => t.isPrimary)}
 						{@const scheduleIndex = triggersState.triggers.findIndex((t) => t.type === 'schedule')}
 						<Button
 							btnClasses="hidden lg:inline-flex"
 							startIcon={{ icon: Calendar }}
-							variant="contained"
-							color="light"
+							variant="subtle"
 							size="xs"
 							on:click={async () => {
-								select('triggers')
+								select('Trigger')
 								const selected = primaryScheduleIndex ?? scheduleIndex
 								if (selected) {
 									triggersState.selectedTriggerIndex = selected
@@ -815,27 +847,25 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					{/if}
 
 					{#if customUi?.topBar?.path != false}
-						<div class="flex justify-start w-full">
-							<div>
-								<button
-									onclick={async () => {
-										select('settings-metadata')
-										document.getElementById('path')?.focus()
-									}}
+						<div class="flex justify-start items-center w-full">
+							<button
+								onclick={async () => {
+									select('settings-metadata')
+									document.getElementById('path')?.focus()
+								}}
+							>
+								<Badge
+									color="gray"
+									class="text-primary rounded-r-none border border-r-0 {inputSizeClasses.md}"
 								>
-									<Badge
-										color="gray"
-										class="center-center !bg-gray-300 !text-tertiary dark:!bg-gray-700 dark:!text-gray-300 !h-[28px]  !w-[70px] rounded-r-none"
-									>
-										<Pen size={12} class="mr-2" /> Path
-									</Badge>
-								</button>
-							</div>
+									<Pen size={12} class="mr-2" /> Path
+								</Badge>
+							</button>
 							<input
 								type="text"
 								readonly
 								value={$pathStore && $pathStore != '' ? $pathStore : 'Choose a path'}
-								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
+								class="font-mono !text-2xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 cursor-default !rounded-l-none {inputSizeClasses.md}"
 								onfocus={({ currentTarget }) => {
 									currentTarget.select()
 								}}
@@ -852,18 +882,11 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 							<Dropdown items={moreItems} />
 						{/if}
 					</div>
-					{#if customUi?.topBar?.tutorials != false}
-						<FlowBuilderTutorials
-							on:reload={() => {
-								renderCount += 1
-							}}
-						/>
-					{/if}
+					<FlowEditorTutorial />
 					{#if customUi?.topBar?.diff != false}
 						<Button
-							color="light"
-							variant="border"
-							size="xs"
+							variant="default"
+							unifiedSize="md"
 							on:click={async () => {
 								if (!savedFlow) {
 									return
@@ -876,8 +899,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								)
 
 								diffDrawer?.openDrawer()
-								const currentFlow =
-									aiChatManager.flowAiChatHelpers?.getPreviewFlow() ?? flowStore.val
+								const currentFlow = flowStore.val
 								diffDrawer?.setDiff({
 									mode: 'normal',
 									deployed: deployedValue ?? savedFlow,
@@ -890,16 +912,14 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								})
 							}}
 							disabled={!savedFlow}
+							startIcon={{ icon: DiffIcon }}
 						>
-							<div class="flex flex-row gap-2 items-center">
-								<DiffIcon size={14} />
-								Diff
-							</div>
+							Diff
 						</Button>
 					{/if}
 					<FlowPreviewButtons
 						on:openTriggers={(e) => {
-							select('triggers')
+							select('Trigger')
 							handleSelectTriggerFromKind(triggersState, triggersCount, initialPath, e.detail.kind)
 							captureOn.set(true)
 							showCaptureHint.set(true)
@@ -918,13 +938,12 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					/>
 					<Button
 						loading={loadingDraft}
-						size="xs"
+						unifiedSize="md"
+						variant="accent"
 						startIcon={{ icon: Save }}
 						on:click={() => saveDraft()}
 						disabled={(!newFlow && !savedFlow) || loading}
-						shortCut={{
-							key: 'S'
-						}}
+						shortCut={{ key: 'S' }}
 					>
 						Draft
 					</Button>
@@ -953,7 +972,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					on:applyArgs={(ev) => {
 						if (ev.detail.kind === 'preprocessor') {
 							stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
-							$selectedIdStore = 'preprocessor'
+							selectionManager.selectId('preprocessor')
 						}
 					}}
 					on:testWithArgs={(e) => {
@@ -966,7 +985,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					{savedFlow}
 					onDeployTrigger={handleDeployTrigger}
 					onEditInput={(moduleId, key) => {
-						selectedIdStore.set(moduleId)
+						selectionManager.selectId(moduleId)
 						// Use new prop-based system
 						forceTestTab[moduleId] = true
 						highlightArg[moduleId] = key