windmill-components 1.623.2 → 1.655.0

package/package/components/git_sync/GitSyncContext.svelte.js

@@ -43,9 +43,9 @@ export function createGitSyncContext(workspace) {
     const getHasAnyChanges = () => {
         const validationStates = getValidationStates();
         // Check if any individual repositories have changes
-        const individualChanges = validationStates.some(v => v.hasChanges);
+        const individualChanges = validationStates.some((v) => v.hasChanges);
         // Check if any legacy repos were imported
-        const anyLegacyImported = repositories.some(r => r.legacyImported);
+        const anyLegacyImported = repositories.some((r) => r.legacyImported);
         // Check if the set of repositories has changed (added/removed repos)
         const repositorySetChanged = (() => {
             if (loading) {
@@ -55,20 +55,20 @@ export function createGitSyncContext(workspace) {
                 return repositories.filter((_, i) => validationStates[i]?.isValid).length > 0;
             }
             const initialValidPaths = new Set(initialRepositories
-                .filter(r => r.git_repo_resource_path && r.git_repo_resource_path.trim() !== '')
-                .map(r => r.git_repo_resource_path));
+                .filter((r) => r.git_repo_resource_path && r.git_repo_resource_path.trim() !== '')
+                .map((r) => r.git_repo_resource_path));
             const currentValidPaths = new Set(repositories
                 .filter((_, i) => validationStates[i]?.isValid)
-                .map(r => r.git_repo_resource_path));
+                .map((r) => r.git_repo_resource_path));
             // Check if sets are different (repos added or removed)
-            return initialValidPaths.size !== currentValidPaths.size ||
-                [...initialValidPaths].some(path => !currentValidPaths.has(path)) ||
-                [...currentValidPaths].some(path => !initialValidPaths.has(path));
+            return (initialValidPaths.size !== currentValidPaths.size ||
+                [...initialValidPaths].some((path) => !currentValidPaths.has(path)) ||
+                [...currentValidPaths].some((path) => !initialValidPaths.has(path)));
         })();
         return individualChanges || anyLegacyImported || repositorySetChanged;
     };
-    const getAllRepositoriesValid = () => getValidationStates().every(v => v.isValid);
-    const getHasUnsavedConnections = () => repositories.some(repo => repo.isUnsavedConnection);
+    const getAllRepositoriesValid = () => getValidationStates().every((v) => v.isValid);
+    const getHasUnsavedConnections = () => repositories.some((repo) => repo.isUnsavedConnection);
     function validateRepository(repo, idx) {
         if (!repo.git_repo_resource_path)
             return false;
@@ -77,7 +77,7 @@ export function createGitSyncContext(workspace) {
     function checkDuplicate(repo, idx) {
         if (!repo.git_repo_resource_path)
             return false;
-        const firstIdx = repositories.findIndex(r => r.git_repo_resource_path === repo.git_repo_resource_path);
+        const firstIdx = repositories.findIndex((r) => r.git_repo_resource_path === repo.git_repo_resource_path);
         return firstIdx !== -1 && firstIdx < idx;
     }
     function checkChanges(repo, idx) {
@@ -87,7 +87,7 @@ export function createGitSyncContext(workspace) {
         // Legacy repositories always have "changes" because they need migration
         if (repo.legacyImported)
             return true;
-        return JSON.stringify(serializeRepository(repo)) !== JSON.stringify(serializeRepository(initial));
+        return (JSON.stringify(serializeRepository(repo)) !== JSON.stringify(serializeRepository(initial)));
     }
     function serializeRepository(repo) {
         return {
@@ -95,14 +95,15 @@ export function createGitSyncContext(workspace) {
             script_path: repo.script_path,
             use_individual_branch: repo.use_individual_branch,
             group_by_folder: repo.group_by_folder,
+            force_branch: repo.force_branch,
             settings: repo.settings,
-            exclude_types_override: repo.exclude_types_override,
+            exclude_types_override: repo.exclude_types_override
         };
     }
     function addRepository() {
         repositories.push({
             git_repo_resource_path: '',
-            script_path: hubPaths.gitSync,
+            script_path: undefined,
             use_individual_branch: false,
             group_by_folder: false,
             settings: {
@@ -126,7 +127,7 @@ export function createGitSyncContext(workspace) {
         if (!repo)
             return;
         // Check if this repository exists in the initial (saved) state
-        const existsInInitialState = initialRepositories.some(initialRepo => initialRepo.git_repo_resource_path === repo.git_repo_resource_path);
+        const existsInInitialState = initialRepositories.some((initialRepo) => initialRepo.git_repo_resource_path === repo.git_repo_resource_path);
         // Only call backend API if repository exists in the saved state
         if (existsInInitialState) {
             await WorkspaceService.deleteGitSyncRepository({
@@ -136,7 +137,7 @@ export function createGitSyncContext(workspace) {
                 }
             });
             // Update initial state to remove the deleted repository
-            const initialIdx = initialRepositories.findIndex(initialRepo => initialRepo.git_repo_resource_path === repo.git_repo_resource_path);
+            const initialIdx = initialRepositories.findIndex((initialRepo) => initialRepo.git_repo_resource_path === repo.git_repo_resource_path);
             if (initialIdx !== -1) {
                 initialRepositories.splice(initialIdx, 1);
             }
@@ -275,7 +276,7 @@ export function createGitSyncContext(workspace) {
                 legacyWorkspaceIncludePath.splice(0, legacyWorkspaceIncludePath.length, ...workspaceLegacyIncludePath);
                 legacyWorkspaceIncludeType.splice(0, legacyWorkspaceIncludeType.length, ...workspaceLegacyIncludeType);
                 if (settings.git_sync.repositories) {
-                    repositories.splice(0, repositories.length, ...settings.git_sync.repositories.map(repo => {
+                    repositories.splice(0, repositories.length, ...settings.git_sync.repositories.map((repo) => {
                         // Check if this is a legacy repo (no nested settings object)
                         const isRepoLegacy = !repo.settings;
                         const repoExcludeTypesOverride = repo.exclude_types_override ?? [];
@@ -288,7 +289,7 @@ export function createGitSyncContext(workspace) {
                             // Legacy repo: inherit from workspace-level settings and apply exclude_types_override
                             const inheritedIncludeType = repo.settings?.include_type ?? [...defaultTypes];
                             const effectiveIncludeType = repoExcludeTypesOverride.length > 0
-                                ? inheritedIncludeType.filter(type => !repoExcludeTypesOverride.includes(type))
+                                ? inheritedIncludeType.filter((type) => !repoExcludeTypesOverride.includes(type))
                                 : inheritedIncludeType;
                             repoSettings = {
                                 include_path: repo.settings?.include_path ?? [...workspaceLegacyIncludePath],
@@ -318,7 +319,7 @@ export function createGitSyncContext(workspace) {
                 }
             }
             // Store initial state for change tracking
-            initialRepositories.splice(0, initialRepositories.length, ...repositories.map(repo => ({ ...repo })));
+            initialRepositories.splice(0, initialRepositories.length, ...repositories.map((repo) => ({ ...repo })));
         }
         finally {
             loading = false;
@@ -354,6 +355,7 @@ export function createGitSyncContext(workspace) {
                     script_path: repoToSave.script_path,
                     use_individual_branch: repoToSave.use_individual_branch,
                     group_by_folder: repoToSave.group_by_folder,
+                    force_branch: repoToSave.force_branch,
                     settings: repoToSave.settings,
                     exclude_types_override: repoToSave.exclude_types_override
                 }
@@ -395,7 +397,7 @@ export function createGitSyncContext(workspace) {
     }
     async function runTestJob(idx) {
         const repo = repositories[idx];
-        if (!repo?.git_repo_resource_path || !repo?.script_path) {
+        if (!repo?.git_repo_resource_path) {
             return;
         }
         try {
@@ -418,8 +420,12 @@ export function createGitSyncContext(workspace) {
                 timeout: 5000,
                 timeoutMessage: 'Git sync test job timed out after 5s',
                 onProgress: (status) => {
-                    gitSyncTestJobs[idx].status = status.status === 'success' ? 'success' :
-                        status.status === 'failure' ? 'failure' : 'running';
+                    gitSyncTestJobs[idx].status =
+                        status.status === 'success'
+                            ? 'success'
+                            : status.status === 'failure'
+                                ? 'failure'
+                                : 'running';
                     if (status.status === 'failure') {
                         gitSyncTestJobs[idx].error = status.error;
                     }
@@ -428,7 +434,10 @@ export function createGitSyncContext(workspace) {
         }
         catch (error) {
             // Initialize the job entry if it doesn't exist (e.g., job creation failed)
-            const errorMessage = (typeof error?.body === 'string' ? error.body : error?.body?.message) || error?.message || error?.toString() || 'Failed to run test job';
+            const errorMessage = (typeof error?.body === 'string' ? error.body : error?.body?.message) ||
+                error?.message ||
+                error?.toString() ||
+                'Failed to run test job';
             if (!gitSyncTestJobs[idx]) {
                 gitSyncTestJobs[idx] = {
                     jobId: '',
@@ -443,11 +452,11 @@ export function createGitSyncContext(workspace) {
         }
     }
     function getPrimarySyncRepository() {
-        const idx = repositories.findIndex(r => !r.use_individual_branch);
+        const idx = repositories.findIndex((r) => !r.use_individual_branch);
         return idx !== -1 ? { repo: repositories[idx], idx } : null;
     }
     function getPrimaryPromotionRepository() {
-        const idx = repositories.findIndex(r => r.use_individual_branch);
+        const idx = repositories.findIndex((r) => r.use_individual_branch);
         return idx !== -1 ? { repo: repositories[idx], idx } : null;
     }
     function getSecondarySyncRepositories() {
@@ -481,7 +490,7 @@ export function createGitSyncContext(workspace) {
         return result;
     }
     async function removeRepositoryByPath(resourcePath) {
-        const idx = repositories.findIndex(r => r.git_repo_resource_path === resourcePath);
+        const idx = repositories.findIndex((r) => r.git_repo_resource_path === resourcePath);
         if (idx !== -1) {
             await removeRepository(idx);
         }
@@ -489,7 +498,7 @@ export function createGitSyncContext(workspace) {
     function addSyncRepository() {
         repositories.push({
             git_repo_resource_path: '',
-            script_path: hubPaths.gitSync,
+            script_path: undefined,
             use_individual_branch: false,
             group_by_folder: false,
             settings: {
@@ -511,7 +520,7 @@ export function createGitSyncContext(workspace) {
     function addPromotionRepository() {
         repositories.push({
             git_repo_resource_path: '',
-            script_path: hubPaths.gitSync,
+            script_path: undefined,
             use_individual_branch: true,
             group_by_folder: false,
             settings: {
@@ -562,19 +571,43 @@ export function createGitSyncContext(workspace) {
     // Return context object
     return {
         // State (read-only access)
-        get repositories() { return repositories; },
-        get loading() { return loading; },
-        get activeModals() { return activeModals; },
-        get gitSyncTestJobs() { return gitSyncTestJobs; },
-        get initialRepositories() { return initialRepositories; },
-        get legacyWorkspaceIncludePath() { return legacyWorkspaceIncludePath; },
-        get legacyWorkspaceIncludeType() { return legacyWorkspaceIncludeType; },
+        get repositories() {
+            return repositories;
+        },
+        get loading() {
+            return loading;
+        },
+        get activeModals() {
+            return activeModals;
+        },
+        get gitSyncTestJobs() {
+            return gitSyncTestJobs;
+        },
+        get initialRepositories() {
+            return initialRepositories;
+        },
+        get legacyWorkspaceIncludePath() {
+            return legacyWorkspaceIncludePath;
+        },
+        get legacyWorkspaceIncludeType() {
+            return legacyWorkspaceIncludeType;
+        },
         // Computed states - use getter functions that compute on access
-        get validationStates() { return getValidationStates(); },
-        get hasAnyChanges() { return getHasAnyChanges(); },
-        get allRepositoriesValid() { return getAllRepositoriesValid(); },
-        get hasUnsavedConnections() { return getHasUnsavedConnections(); },
-        get hasWorkspaceLevelSettings() { return hasWorkspaceLevelSettings; },
+        get validationStates() {
+            return getValidationStates();
+        },
+        get hasAnyChanges() {
+            return getHasAnyChanges();
+        },
+        get allRepositoriesValid() {
+            return getAllRepositoriesValid();
+        },
+        get hasUnsavedConnections() {
+            return getHasUnsavedConnections();
+        },
+        get hasWorkspaceLevelSettings() {
+            return hasWorkspaceLevelSettings;
+        },
         // Methods
         addRepository,
         addSyncRepository,
@@ -602,7 +635,7 @@ export function createGitSyncContext(workspace) {
         getSecondarySyncRepositories,
         getSecondaryPromotionRepositories,
         // Helper methods
-        getTargetBranch,
+        getTargetBranch
     };
 }
 export function setGitSyncContext(workspace) {

package/package/components/git_sync/GitSyncModalManager.svelte

@@ -3,7 +3,7 @@ import PushWorkspaceModal from './PushWorkspaceModal.svelte';
 import PullWorkspaceModal from './PullWorkspaceModal.svelte';
 import GitSyncSuccessModal from './GitSyncSuccessModal.svelte';
 import { sendUserToast } from '../../toast';
-const gitSyncContext = getGitSyncContext();
+const gitSyncContext = $state(getGitSyncContext());
 function handlePushSuccess() {
     const pushModal = gitSyncContext.activeModals.push;
     if (!pushModal)

package/package/components/git_sync/GitSyncModalManager.svelte.d.ts

@@ -1,18 +1,3 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const GitSyncModalManager: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type GitSyncModalManager = InstanceType<typeof GitSyncModalManager>;
+declare const GitSyncModalManager: import("svelte").Component<Record<string, never>, {}, "">;
+type GitSyncModalManager = ReturnType<typeof GitSyncModalManager>;
 export default GitSyncModalManager;

package/package/components/git_sync/GitSyncRepositoryCard.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">import { Save, Trash, XCircle, CheckCircle2, RotateCw, RotateCcw, Download, Upload, Plus } from 'lucide-svelte';
 import { Button, Alert } from '../common';
+import TextInput from '../text_input/TextInput.svelte';
+import Section from '../Section.svelte';
 import { getGitSyncContext } from './GitSyncContext.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
 import GitSyncFilterSettings from '../workspaceSettings/GitSyncFilterSettings.svelte';
 import DetectionFlow from './DetectionFlow.svelte';
 import { sendUserToast } from '../../toast';
+import Toggle from '../Toggle.svelte';
 import { fade } from 'svelte/transition';
 import { workspaceStore } from '../../stores';
-import hubPaths from '../../hubPaths.json';
 import GitSyncModeDisplay from './GitSyncModeDisplay.svelte';
-import { DEFAULT_HUB_BASE_URL } from '../../hub';
 import { ResourceService, VariableService } from '../../gen';
 let { idx = null, isSecondary = false, isLegacy = false, variant = 'standard', mode = null, repository = null, onAdd = null, isCollapsible = true, showEmptyState = false } = $props();
 const gitSyncContext = getGitSyncContext();
@@ -301,7 +302,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}
@@ -312,7 +313,7 @@ function handlePullSettings() {
 			</div>
 			{#if !emptyString(repo.git_repo_resource_path)}
 				<Button
-					disabled={emptyString(repo.script_path)}
+					disabled={emptyString(repo.git_repo_resource_path)}
 					variant="accent"
 					onclick={runGitSyncTestJob}
 					size="xs"
@@ -324,7 +325,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,7 +333,7 @@ function handlePullSettings() {
 					</div>
 				{:else if resourceInfo?.url}
 					<div class="flex items-center gap-2 text-secondary">
-						<span class="font-medium">Git URL:</span>
+						<span class="text-xs text-secondary">Git URL:</span>
 						<code class="bg-surface-secondary px-2 py-1 rounded text-primary"
 							>{resourceInfo.url}</code
 						>
@@ -384,29 +385,21 @@ function handlePullSettings() {
 				</Alert>
 			{/if}
 
-			{#if repo.script_path != hubPaths.gitSync}
-				<Alert type="warning" title="Script version mismatch">
-					The git sync version for this repository is not latest. Current: <a
-						target="_blank"
-						href="{DEFAULT_HUB_BASE_URL}/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
-						>{repo.script_path}</a
-					>, latest:
-					<a
-						target="_blank"
-						href="{DEFAULT_HUB_BASE_URL}/scripts/windmill/6943/sync-script-to-git-repo-windmill/9014/versions"
-						>{hubPaths.gitSync}</a
-					>
+			{#if repo.script_path}
+				<Alert type="warning" title="Pinned git sync script version">
+					This repository uses a pinned sync script: <code>{repo.script_path}</code>.
+					Switch to auto-managed to always use the latest version bundled with Windmill.
 					<div class="flex mt-2">
 						<Button
 							size="xs"
 							variant="accent"
 							onclick={() => {
 								if (repo) {
-									repo.script_path = hubPaths.gitSync
+									repo.script_path = undefined
 								}
 							}}
 						>
-							Update git sync script (require save git settings to be applied)
+							Switch to auto-managed (requires save)
 						</Button>
 					</div>
 				</Alert>
@@ -467,6 +460,30 @@ function handlePullSettings() {
 							</div>
 						{/if}
 					</div>
+
+					<!-- Advanced settings (collapsible) -->
+					<Section label="Advanced" small collapsable initiallyCollapsed={!repo.force_branch}>
+						<Toggle
+							checked={!!repo.force_branch}
+							on:change={(e) => {
+								if (e.detail) {
+									repo.force_branch = $workspaceStore ?? ''
+								} else {
+									repo.force_branch = undefined
+								}
+							}}
+							options={{
+								right: 'Environment (experimental)',
+								rightTooltip:
+									'Made for monobranch setups. Passes the value as --branch/--env to the wmill CLI, which selects the matching branch/env configuration from wmill.yaml and includes the branch/env in the item paths.'
+							}}
+						/>
+						{#if repo.force_branch != null && repo.force_branch !== undefined}
+							<div class="w-48 mt-2">
+								<TextInput size="sm" bind:value={repo.force_branch} />
+							</div>
+						{/if}
+					</Section>
 				{/if}
 			{/if}
 		{:else}
@@ -479,17 +496,18 @@ 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}
-					{#if mode === 'promotion'}
-						<a target="_blank" href="https://www.windmill.dev/docs/advanced/deploy_gh_gl"
-							>Learn more about Git Promotion</a
-						>
-					{/if}
+					<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>
@@ -519,23 +537,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/DragCoordinator.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">import { useSvelteFlow } from '@xyflow/svelte';
+import { onMount } from 'svelte';
+import { getSubflowNodeIds } from './moveManager.svelte';
+import DragGhost from './DragGhost.svelte';
+let { moveManager, eventHandlers, edges, nodes } = $props();
+const { screenToFlowPosition } = useSvelteFlow();
+onMount(() => {
+    moveManager.setScreenToFlowPosition(screenToFlowPosition);
+    moveManager.setComputeDraggedNodeIds((moduleIds) => {
+        const combined = new Set();
+        for (const id of moduleIds) {
+            for (const nodeId of getSubflowNodeIds(id, nodes, edges)) {
+                combined.add(nodeId);
+            }
+        }
+        return combined;
+    });
+});
+$effect(() => {
+    if (!moveManager.dragging)
+        return;
+    function onPointerMove(e) {
+        moveManager.updateDrag(e.clientX, e.clientY);
+    }
+    function onPointerUp(_e) {
+        const moduleId = moveManager.dragging?.moduleId;
+        const selectedIds = moveManager.dragging?.selectedIds;
+        const zone = moveManager.endDrag();
+        if (zone && moduleId) {
+            // Set moving state so the insert handler knows which module(s) to relocate
+            if (selectedIds && selectedIds.length > 1) {
+                moveManager.movingModuleId = selectedIds[0];
+                moveManager.movingIds = selectedIds;
+            }
+            else {
+                moveManager.setMoving(moduleId);
+            }
+            // Then trigger the insert, which detects movingModuleId/movingIds and performs the splice
+            eventHandlers.insert({
+                sourceId: zone.sourceId,
+                targetId: zone.targetId,
+                branch: zone.branch,
+                index: zone.index
+            });
+        }
+    }
+    function onKeyDown(e) {
+        if (e.key === 'Escape') {
+            moveManager.cancelDrag();
+        }
+    }
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+        document.removeEventListener('keydown', onKeyDown, true);
+    };
+});
+</script>
+
+<DragGhost {moveManager} {nodes} {edges} />

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

@@ -0,0 +1,12 @@
+import { type Edge, type Node } from '@xyflow/svelte';
+import { type MoveManager } from './moveManager.svelte';
+import type { GraphEventHandlers } from './graphBuilder.svelte';
+type $$ComponentProps = {
+    moveManager: MoveManager;
+    eventHandlers: GraphEventHandlers;
+    edges: Edge[];
+    nodes: Node[];
+};
+declare const DragCoordinator: import("svelte").Component<$$ComponentProps, {}, "">;
+type DragCoordinator = ReturnType<typeof DragCoordinator>;
+export default DragCoordinator;