windmill-components 1.623.1 → 1.642.0

package/package/components/flows/header/FlowYamlEditor.svelte

@@ -54,8 +54,8 @@ let editorHeight = $state(0);
 <Drawer on:open={reload} bind:this={drawer} size="800px">
 	<DrawerContent title="OpenFlow" on:close={() => drawer?.toggleDrawer()}>
 		{#snippet actions()}
-			<Button variant="accent" size="sm" on:click={reload}>Reset code</Button>
-			<Button variant="accent" size="sm" on:click={apply}>Apply changes</Button>
+			<Button variant="default" unifiedSize="md" on:click={reload}>Reset code</Button>
+			<Button variant="accent" unifiedSize="md" on:click={apply}>Apply changes</Button>
 		{/snippet}
 
 		{#if flowStore.val}

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -18,7 +18,8 @@ import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import FlowStickyNode from './FlowStickyNode.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import { ModulesTestStates } from '../../modulesTest.svelte';
-import { flowModuleToAgentTool, createMcpTool, createWebsearchTool } from '../agentToolUtils';
+import { flowModuleToAgentTool, createMcpTool, createWebsearchTool, createAiAgentTool, SPECIAL_TOOL_KINDS, agentToolToFlowModule } from '../agentToolUtils';
+import { loadFlowModuleState } from '../flowStateUtils.svelte';
 import { getNoteEditorContext } from '../../graph/noteEditor.svelte';
 let { sidebarSize = $bindable(undefined), disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, newFlow = false, smallErrorHandler = false, workspace = $workspaceStore, onTestUpTo, onEditInput, localModuleStates = {}, testModuleStates = new ModulesTestStates(), aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = $bindable({ val: {} }), onDelete, flowHasChanged } = $props();
 const { customUi, selectionManager, moving, history, flowStateStore, flowStore, pathStore } = getContext('FlowEditorContext');
@@ -98,6 +99,13 @@ export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsF
         modules.splice(index, 0, websearchTool);
         return modules;
     }
+    else if (toolKind === 'aiAgentTool') {
+        // Create AI Agent tool (nested agent)
+        const aiAgentTool = createAiAgentTool(module.id);
+        flowStateStore.val[module.id] = await loadFlowModuleState(agentToolToFlowModule(aiAgentTool));
+        modules.splice(index, 0, aiAgentTool);
+        return modules;
+    }
     else if (toolKind === 'flowmoduleTool') {
         // Create AgentTool from FlowModule
         const agentTool = flowModuleToAgentTool(module);
@@ -426,11 +434,9 @@ $effect(() => {
 								}
 							} else {
 								const index = (detail.agentId ? targetModules?.length : detail.index) ?? 0
-								const toolKind = detail.agentId
-									? detail.kind === 'mcpTool'
-										? 'mcpTool'
-										: detail.kind === 'websearchTool'
-											? 'websearchTool'
+								const toolKind: SpecialToolKind | 'flowmoduleTool' | undefined = detail.agentId
+									? (SPECIAL_TOOL_KINDS as readonly string[]).includes(detail.kind)
+										? (detail.kind as SpecialToolKind)
 										: 'flowmoduleTool'
 									: undefined
 

package/package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -3,7 +3,7 @@ import type { InlineScript, InsertKind } from '../../graph/graphBuilder.svelte';
 import type { GraphModuleState } from '../../graph';
 import { ModulesTestStates } from '../../modulesTest.svelte';
 import type { StateStore } from '../../../utils';
-import { type AgentTool } from '../agentToolUtils';
+import { type AgentTool, type SpecialToolKind } from '../agentToolUtils';
 interface Props {
     sidebarSize?: number | undefined;
     disableStaticInputs?: boolean;
@@ -63,7 +63,7 @@ declare const FlowModuleSchemaMap: $$__sveltets_2_IsomorphicComponent<Props, {
     }, wsFlow?: {
         path: string;
         summary: string;
-    }, inlineScript?: InlineScript, toolKind?: "mcpTool" | "flowmoduleTool" | "websearchTool") => Promise<FlowModule[] | AgentTool[]>;
+    }, inlineScript?: InlineScript, toolKind?: SpecialToolKind | "flowmoduleTool") => Promise<FlowModule[] | AgentTool[]>;
     removeAtId: (modules: FlowModule[], id: string) => FlowModule[];
     selectNextId: (id: any) => void;
     addBranch: (id: string) => Promise<void>;

package/package/components/flows/map/InsertModuleInner.svelte

@@ -80,6 +80,13 @@ let displayPath = $derived(width > 650 || height > 400);
 							dispatch('close')
 						}}
 					/>
+					<TopLevelNode
+						label="AI Agent"
+						onSelect={() => {
+							dispatch('pickAiAgentTool')
+							dispatch('close')
+						}}
+					/>
 				{:else}
 					{#if customUi?.triggers != false && allowTrigger}
 						<TopLevelNode

package/package/components/flows/map/InsertModuleInner.svelte.d.ts

@@ -27,6 +27,7 @@ declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
     pickMcpTool: CustomEvent<any>;
     pickWebsearchTool: CustomEvent<any>;
+    pickAiAgentTool: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "funcDesc">;

package/package/components/flows/missingInputWarnings.js

@@ -1,5 +1,6 @@
 import { parseOutputs } from '../../infer';
 import { dfs } from './dfs';
+const isAiTransform = (transform) => transform?.type === 'ai';
 function isInputFilled(inputTransforms, key, schema) {
     const required = schema?.required?.includes(key) ?? false;
     if (!required) {
@@ -7,6 +8,9 @@ function isInputFilled(inputTransforms, key, schema) {
     }
     if (inputTransforms.hasOwnProperty(key)) {
         const transform = inputTransforms[key];
+        if (isAiTransform(transform)) {
+            return true;
+        }
         if (transform?.type === 'static' &&
             (transform?.value === undefined || transform?.value === '' || transform?.value === null)) {
             return false;
@@ -19,6 +23,9 @@ function isInputFilled(inputTransforms, key, schema) {
     return true;
 }
 async function isConnectedToMissingModule(argName, input_transform, moduleIds) {
+    if (isAiTransform(input_transform)) {
+        return undefined;
+    }
     const val = input_transform.type === 'static' ? String(input_transform.value) : input_transform.expr;
     try {
         const outputs = await parseOutputs(val, true);

package/package/components/flows/pickers/PickHubScriptQuick.svelte

@@ -10,7 +10,7 @@ let listHubScriptsCached = createCache(async ({ filter, kind, appFilter }) => {
             : undefined;
     }
     catch (err) {
-        console.error('Error fetching top hub scripts');
+        sendUserToast('Failed to fetch hub scripts: ' + err, 'error');
         return undefined;
     }
 }, {
@@ -21,7 +21,7 @@ let listHubScriptsCached = createCache(async ({ filter, kind, appFilter }) => {
 
 <script lang="ts">import { createEventDispatcher, untrack } from 'svelte';
 import { Skeleton } from '../../common';
-import { classNames, createCache } from '../../../utils';
+import { classNames, createCache, sendUserToast } from '../../../utils';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import { IntegrationService, ScriptService } from '../../../gen';
 import { Circle, ExternalLink } from 'lucide-svelte';
@@ -48,7 +48,7 @@ async function getAllApps(filterKind) {
         allApps = (await listHubIntegrationsCached({ kind: filterKind, refreshCount })).map((x) => x.name);
     }
     catch (err) {
-        console.error('Hub is not available');
+        sendUserToast('Failed to fetch hub integrations: ' + err, 'error');
         allApps = [];
         hubNotAvailable = true;
     }
@@ -80,7 +80,7 @@ async function handlePickScript(item) {
             await ScriptService.pickHubScriptByPath({ path: item.path });
         }
         catch (error) {
-            console.error('Failed to track hub script pick:', error);
+            sendUserToast('Failed to call ScriptService.pickHubScriptByPath: ' + error, 'error');
             // Don't block the flow if tracking fails
         }
     }

package/package/components/flows/propPicker/OutputPicker.svelte

@@ -14,7 +14,7 @@ const MIN_HEIGHT = 375;
 let outputOpen = $state(false);
 let inputOpen = $state(false);
 const zoom = $derived.by(useSvelteFlow().getZoom);
-let showConnecting = $derived(isConnectingCandidate && $flowPropPickerConfig?.insertionMode === 'connect');
+let showConnecting = $derived(isConnectingCandidate && $flowPropPickerConfig != undefined);
 function selectConnection(value) {
     if ($flowPropPickerConfig?.onSelect(value)) {
         $flowPropPickerConfig?.clearFocus();

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

@@ -44,7 +44,7 @@ interface Props {
 }
 declare const OutputPickerInner: import("svelte").Component<Props, {
     setJobPreview: () => void;
-    getPreview: () => "mock" | "job" | undefined;
+    getPreview: () => "job" | "mock" | undefined;
     getHistoryOpen: () => boolean;
     getSelectedJob: () => OutputViewerJob;
 }, "mock" | "isLoading">;

package/package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -19,10 +19,9 @@ let flow_env = $derived(pickableProperties?.flow_env || flowStore.val.value.flow
 setContext('PropPickerWrapper', {
     propPickerConfig,
     inputMatches,
-    focusProp: (propName, insertionMode, onSelect) => {
+    connectProp: (propName, onSelect) => {
         const config = {
             propName,
-            insertionMode,
             onSelect,
             clearFocus: () => {
                 propPickerConfig.set(undefined);
@@ -40,10 +39,11 @@ setContext('PropPickerWrapper', {
             });
         }
     },
-    clearFocus: () => {
+    clearConnect: () => {
         flowPropPickerConfig.set(undefined);
         propPickerConfig.set(undefined);
-    }
+    },
+    exprBeingEdited: writable([])
 });
 async function getPropPickerElements() {
     return Array.from(document.querySelectorAll('[data-prop-picker], [data-prop-picker] *'));
@@ -72,17 +72,14 @@ let rightPaneHeight = $state(0);
 		<Pane minSize={20} size={40} class="!transition-none z-1000 relative {paneClass}">
 			<div bind:clientHeight={rightPaneHeight} class="min-h-40 h-full !bg-surface-secondary">
 				<AnimatedButton
-					animate={$propPickerConfig?.insertionMode == 'connect'}
+					animate={$propPickerConfig != undefined}
 					baseRadius="4px"
 					wrapperClasses="prop-picker-inputs h-full w-full pt-1"
 					marginWidth="3px"
-					ringColor={$propPickerConfig?.insertionMode == 'insert' ||
-					$propPickerConfig?.insertionMode == 'append'
-						? '#3b82f6'
-						: 'transparent'}
+					ringColor="transparent"
 					animationDuration="4s"
 				>
-					{#if result != undefined}
+					{#if result != undefined && !pickableProperties}
 						<PropPickerResult
 							{result}
 							{extraResults}
@@ -97,6 +94,8 @@ let rightPaneHeight = $state(0);
 						/>
 					{:else if pickableProperties}
 						<PropPicker
+							{result}
+							{extraResults}
 							{displayContext}
 							{error}
 							{flow_env}

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

@@ -4,7 +4,6 @@ export type PropPickerConfig = {
     propName?: string;
     onSelect: SelectCallback;
     clearFocus: () => void;
-    insertionMode: 'append' | 'connect' | 'insert';
 };
 export type PropPickerWrapperContext = {
     propPickerConfig: Writable<PropPickerConfig | undefined>;
@@ -12,8 +11,9 @@ export type PropPickerWrapperContext = {
         word: string;
         value: string;
     }[] | undefined>;
-    focusProp: (propName: string, insertionMode: 'append' | 'connect' | 'insert', onSelect: SelectCallback) => void;
-    clearFocus: () => void;
+    connectProp: (propName: string, onSelect: SelectCallback) => void;
+    clearConnect: () => void;
+    exprBeingEdited: Writable<string[]>;
 };
 import { type Writable } from 'svelte/store';
 import type { PickableProperties } from '../previousResults';

package/package/components/flows/scheduleUtils.js

@@ -17,7 +17,7 @@ export async function loadSchedule(path, workspace) {
         path
     });
     return {
-        summary: schedule.summary,
+        summary: schedule.summary ?? undefined,
         enabled: schedule.enabled,
         cron: schedule.schedule,
         timezone: schedule.timezone,
@@ -48,7 +48,7 @@ export async function loadSchedules(forceRefresh, path, isFlow, schedules, prima
         else {
             remotePrimarySchedule = primary
                 ? {
-                    summary: primary.summary,
+                    summary: primary.summary ?? undefined,
                     args: primary.args ?? {},
                     cron: primary.schedule,
                     timezone: primary.timezone,

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

@@ -2,6 +2,7 @@ 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';
+import type FlowEditorDrawer from './content/FlowEditorDrawer.svelte';
 import type { FlowState } from './flowState';
 import type { FlowBuilderWhitelabelCustomUi } from '../custom_ui';
 import type Editor from '../Editor.svelte';
@@ -10,10 +11,9 @@ import type { StateStore } from '../../utils';
 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';
+import type { ButtonProp } from '../diffEditorTypes';
 import type { SelectionManager } from '../graph/selectionUtils.svelte';
 import type { InferAssetsSqlQueryDetails } from '../../infer';
 export type FlowInput = Record<string, {
@@ -57,6 +57,7 @@ export type FlowEditorContext = {
     } | undefined>;
     previewArgs: StateStore<Record<string, any>>;
     scriptEditorDrawer: Writable<ScriptEditorDrawer | undefined>;
+    flowEditorDrawer: Writable<FlowEditorDrawer | undefined>;
     history: History<OpenFlow>;
     pathStore: Writable<string>;
     flowStore: StateStore<ExtendedOpenFlow>;
@@ -76,7 +77,6 @@ export type FlowEditorContext = {
 export type FlowGraphAssetContext = StateStore<{
     selectedAsset: Asset | undefined;
     s3FilePicker: S3FilePicker | undefined;
-    dbManagerDrawer: DbManagerDrawer | undefined;
     resourceEditorDrawer: ResourceEditorDrawer | undefined;
     resourceMetadataCache: Record<string, {
         resource_type?: string;

package/package/components/flows/utils.svelte.js

@@ -27,7 +27,7 @@ export function evalValue(k, mod, pickableProperties, showError) {
     if (t.type == 'static') {
         v = t.value;
     }
-    else {
+    else if (t.type == 'javascript') {
         try {
             let context = {
                 flow_input: pickableProperties?.flow_input,
@@ -42,6 +42,9 @@ export function evalValue(k, mod, pickableProperties, showError) {
             v = undefined;
         }
     }
+    else {
+        v = undefined;
+    }
     if (v === NEVER_TESTED_THIS_FAR) {
         v = undefined;
     }
@@ -100,6 +103,7 @@ export function cleanFlow(flow) {
             if (memoryTransform?.type === 'static' && memoryTransform.value) {
                 const memoryValue = memoryTransform.value;
                 if (memoryValue.kind === 'auto' &&
+                    memoryValue.context_length &&
                     memoryValue.context_length > 0 &&
                     !memoryValue.memory_id) {
                     memoryTransform.value = {

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -131,10 +131,10 @@ const usedRepositoryPaths = $derived(gitSyncContext.repositories
 // Determine display title based on variant and legacy status
 const displayTitle = $derived(variant === 'primary-sync'
     ? mode === 'sync'
-        ? 'Sync mode'
-        : 'Promotion mode'
+        ? 'Git Sync'
+        : 'Git Promotion'
     : variant === 'primary-promotion'
-        ? 'Promotion mode'
+        ? 'Git Promotion'
         : isLegacy
             ? 'Legacy promotion repository'
             : isSecondary
@@ -152,7 +152,7 @@ const displayDescription = $derived(variant === 'primary-sync' || variant === 'p
     ? mode === 'sync'
         ? `Changes will be committed directly to the ${targetOrDefaultBranch} branch`
         : mode === 'promotion'
-            ? `Changes will be made to new branches whose promotion target is the ${targetOrDefaultBranch} branch`
+            ? `Changes will be made to new branches whose promotion target is the ${targetOrDefaultBranch} branch of the repo to promote to. Remember to also setup Git Sync between the promotion workspace and repo for changes to be deployed when these branches are merged.`
             : null
     : null);
 const shouldShowEmptyState = $derived(showEmptyState || (!repo && (variant === 'primary-sync' || variant === 'primary-promotion')));
@@ -301,7 +301,7 @@ function handlePullSettings() {
 	<div class="space-y-4">
 		<!-- Resource Picker -->
 		<div class="flex gap-2 items-center">
-			<div class="font-semibold">Resource:</div>
+			<div class="font-semibold text-xs text-emphasis">Resource:</div>
 			<div class="flex-1">
 				<ResourcePicker
 					bind:value={repo.git_repo_resource_path}
@@ -324,7 +324,7 @@ function handlePullSettings() {
 
 		<!-- Display resource info when disabled (saved connection) -->
 		{#if !repo.isUnsavedConnection && repo.git_repo_resource_path}
-			<div class="ml-2 text-xs">
+			<div class="text-xs">
 				{#if loadingResourceInfo}
 					<div class="flex items-center gap-1 text-secondary">
 						<RotateCw size={12} class="animate-spin" />
@@ -332,8 +332,10 @@ function handlePullSettings() {
 					</div>
 				{:else if resourceInfo?.url}
 					<div class="flex items-center gap-2 text-secondary">
-						<span class="font-medium">Git URL:</span>
-						<code class="bg-surface-secondary px-2 py-1 rounded text-primary">{resourceInfo.url}</code>
+						<span class="text-xs text-secondary">Git URL:</span>
+						<code class="bg-surface-secondary px-2 py-1 rounded text-primary"
+							>{resourceInfo.url}</code
+						>
 					</div>
 				{:else if resourceInfo?.error}
 					<div class="text-red-600">{resourceInfo.error}</div>
@@ -477,12 +479,19 @@ function handlePullSettings() {
 
 {#if shouldShowEmptyState}
 	<!-- Empty State for Primary Variants -->
-	<div class="rounded-lg border bg-surface p-4 mb-4">
+	<div class="rounded-md shadow-sm bg-surface-tertiary p-4 mb-4">
 		<div class="flex items-center justify-between mb-4">
 			<div class="flex flex-col">
 				<h3 class="text-xs font-semibold text-emphasis">{displayTitle}</h3>
 				{#if displayDescription}
-					<p class="text-2xs text-secondary">{displayDescription}</p>
+					<p class="text-2xs text-secondary"
+						>{displayDescription}
+						{#if mode === 'promotion'}
+							<a target="_blank" href="https://www.windmill.dev/docs/advanced/deploy_gh_gl"
+								>Learn more about Git Promotion</a
+							>
+						{/if}
+					</p>
 				{/if}
 			</div>
 		</div>
@@ -493,9 +502,9 @@ function handlePullSettings() {
 			<div class="text-center mb-4">
 				<p class="text-primary text-xs font-normal mb-2">
 					{#if mode === 'sync'}
-						No sync repository configured. Add one to enable direct synchronization.
+						No Git Sync repository configured. Add one to enable direct synchronization.
 					{:else if mode === 'promotion'}
-						No promotion repository configured. Add one to enable branch-based workflows.
+						No Git Promotion repository configured. Add one to enable branch-based workflows.
 					{:else}
 						No repository configured.
 					{/if}
@@ -511,23 +520,24 @@ function handlePullSettings() {
 {:else if repo}
 	{#if variant === 'primary-sync' || variant === 'primary-promotion'}
 		<!-- Primary Repository Layout -->
-		<div class="rounded-lg border bg-surface p-4 mb-4">
-			<div class="flex items-center justify-between mb-4">
-				<div class="flex flex-col">
-					<h3 class="text-xl font-semibold">{displayTitle}</h3>
-					{#if displayDescription}
-						<p class="text-sm text-secondary">{displayDescription}</p>
-					{/if}
-				</div>
-				<div class="flex items-center gap-2">
-					{@render headerActions()}
+		<div class="rounded-md shadow-sm bg-surface-tertiary p-4 mb-4">
+			<div class="flex flex-col mb-4 gap-2">
+				<div class="flex items-center justify-between">
+					<h3 class="text-sm font-semibold">{displayTitle}</h3>
+
+					<div class="flex items-center gap-2">
+						{@render headerActions()}
+					</div>
 				</div>
+				{#if displayDescription}
+					<p class="text-xs text-secondary">{displayDescription}</p>
+				{/if}
 			</div>
 			{@render repositoryContent()}
 		</div>
 	{:else}
 		<!-- Standard Repository Card Layout -->
-		<div class="rounded-lg shadow-sm border p-0 w-full mb-4">
+		<div class="rounded-md shadow-sm bg-surface-tertiary p-0 w-full mb-4">
 			<div class="flex items-center justify-between min-h-10 px-4 py-1 border-b">
 				<div class="flex items-center gap-2">
 					<span class="text-lg font-semibold">{displayTitle}</span>

package/package/components/git_sync/GitSyncSection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { ExternalLink, ChevronDown, ChevronRight, Plus } from 'lucide-svelte';
 import { Button, Alert } from '../common';
-import Description from '../Description.svelte';
+import SettingsPageHeader from '../settings/SettingsPageHeader.svelte';
 import { setGitSyncContext } from './GitSyncContext.svelte';
 import GitSyncRepositoryCard from './GitSyncRepositoryCard.svelte';
 import GitSyncModalManager from './GitSyncModalManager.svelte';
@@ -45,19 +45,28 @@ const hasUnsavedSecondaryPromotion = $derived(secondaryPromotion.some((s) => s.r
 		<div class="text-sm text-secondary">Loading git sync settings...</div>
 	</div>
 {:else}
-	<div class="flex flex-col gap-4 my-8">
-		<div class="flex flex-col gap-1">
-			<div class="text-emphasis text-sm font-semibold">Git Sync</div>
-			<Description link="https://www.windmill.dev/docs/advanced/git_sync">
-				Connect the Windmill workspace to a Git repository to automatically commit and push scripts,
-				flows, and apps to the repository on each deploy.
-			</Description>
-		</div>
-		<Alert type="info" title="Only new updates trigger git sync">
-			Only new changes matching the filters will trigger a git sync. You still need to initialize
-			the repo to the desired state first.
-		</Alert>
-	</div>
+	<SettingsPageHeader
+		title="Git Sync"
+		description="Connect the Windmill workspace to a Git repository to automatically commit and push scripts, flows, and apps to the repository on each deploy."
+		link="https://www.windmill.dev/docs/advanced/git_sync"
+	>
+		{#snippet actions()}
+			{#if $enterpriseLicense && gitSyncContext.repositories != undefined}
+				<Button
+					variant="accent"
+					target="_blank"
+					endIcon={{ icon: ExternalLink }}
+					href={`/runs?job_kinds=deploymentcallbacks&workspace=${$workspaceStore}`}
+				>
+					See sync jobs
+				</Button>
+			{/if}
+		{/snippet}
+	</SettingsPageHeader>
+	<Alert type="info" title="Only new updates trigger git sync">
+		Only new changes matching the filters will trigger a git sync. You still need to initialize the
+		repo to the desired state first.
+	</Alert>
 	{#if !$enterpriseLicense}
 		<div class="mb-2"></div>
 
@@ -67,20 +76,8 @@ const hasUnsavedSecondaryPromotion = $derived(secondaryPromotion.some((s) => s.r
 		<div class="mb-2"></div>
 	{/if}
 	{#if $enterpriseLicense && gitSyncContext.repositories != undefined}
-		<div class="flex mt-5 mb-5 gap-8">
-			<Button
-				variant="accent"
-				target="_blank"
-				endIcon={{ icon: ExternalLink }}
-				href={`/runs?job_kinds=deploymentcallbacks&workspace=${$workspaceStore}`}
-			>
-				See sync jobs
-			</Button>
-		</div>
-		<div class="pt-2"></div>
-
 		<!-- Primary Sync Repository -->
-		<div class="space-y-4">
+		<div class="space-y-6 pt-6">
 			<GitSyncRepositoryCard
 				variant="primary-sync"
 				mode="sync"

package/package/components/graph/FlowGraphV2.svelte

@@ -75,7 +75,6 @@ const selectedId = $derived(selectionManager.getSelectedId());
 const noteEditorContext = getNoteEditorContext();
 // Function to calculate extra gap needed for notes below the lowest flow nodes
 function calculateNoteGap(notes) {
-    console.log('calculateNoteGap', notes);
     if (!notes || notes.length === 0) {
         return 0;
     }
@@ -404,6 +403,9 @@ async function updateStores() {
         ...graph.edges
     ];
     await tick();
+    updateHeight();
+}
+function updateHeight() {
     if (nodes.length === 0) {
         height = minHeight;
     }
@@ -413,6 +415,10 @@ async function updateStores() {
         height = Math.max(maxBottom - minY, minHeight);
     }
 }
+$effect(() => {
+    minHeight;
+    untrack(() => updateHeight());
+});
 const nodeTypes = {
     input2: InputNode,
     module: ModuleNode,
@@ -651,7 +657,7 @@ const modifierKey = isMac() ? 'Meta' : 'Control';
 				{height}
 				{width}
 				minZoom={0.2}
-				maxZoom={1.2}
+				maxZoom={1.6}
 				connectionLineType={ConnectionLineType.SmoothStep}
 				defaultEdgeOptions={{ type: 'smoothstep' }}
 				preventScrolling={scroll}

package/package/components/graph/graphBuilder.svelte.d.ts

@@ -4,7 +4,7 @@ import type { GraphModuleState } from './model';
 import { type AssetWithAltAccessType } from '../assets/lib';
 import type { ModulesTestStates, ModuleTestState } from '../modulesTest.svelte';
 import type { ModuleActionInfo } from '../flows/flowDiff';
-export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end' | 'aiagent' | 'mcpTool' | 'websearchTool';
+export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end' | 'aiagent' | 'mcpTool' | 'websearchTool' | 'aiAgentTool';
 export type InlineScript = {
     language: RawScript['language'];
     kind: Script['kind'];
@@ -253,12 +253,14 @@ export type AssetN = {
     type: 'asset';
     data: {
         asset: AssetWithAltAccessType;
+        displayedAccessType: 'r' | 'w';
     };
 };
 export type AssetsOverflowedN = {
     type: 'assetsOverflowed';
     data: {
         overflowedAssets: AssetWithAltAccessType[];
+        displayedAccessType: 'r' | 'w';
     };
 };
 export type AiToolN = {

package/package/components/graph/model.d.ts

@@ -35,7 +35,7 @@ export type FlowStatusViewerContext = {
     hideTimeline?: boolean;
     hideNodeDefinition?: boolean;
     hideJobId?: boolean;
-    hideDownloadLogs: any;
+    hideDownloadLogs?: boolean;
 };
 export type GraphModuleState = {
     type: FlowStatusModule['type'];

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

@@ -205,7 +205,7 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
 </script>
 
 <script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
-import { Globe, MessageCircle, Play, Plug, Wrench, X } from 'lucide-svelte';
+import { Bot, Globe, MessageCircle, Play, Plug, Wrench, X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { getNodeColorClasses } from '../../util';
 import { deepEqual } from 'fast-equals';
@@ -242,6 +242,8 @@ let colorClasses = $derived(getNodeColorClasses(!validateToolName(data.tool, dat
 					<Globe size={16} class="ml-1 shrink-0" />
 				{:else if data.type === 'mcp'}
 					<Plug size={16} class="ml-1 shrink-0" />
+				{:else if data.type === 'aiagent'}
+					<Bot size={16} class="ml-1 shrink-0" />
 				{:else}
 					<Wrench size={16} class="ml-1 shrink-0" />
 				{/if}