windmill-components 1.542.5 → 1.555.0

package/package/components/flows/map/InsertModuleButton.svelte

@@ -1,14 +1,10 @@
-<script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
-import { createEventDispatcher } from 'svelte';
-import { Bug, Cross } from 'lucide-svelte';
+<script lang="ts">import { Bug, Cross } from 'lucide-svelte';
 import InsertModuleInner from './InsertModuleInner.svelte';
 import { twMerge } from 'tailwind-merge';
 import PopupV2 from '../../common/popup/PopupV2.svelte';
 import { flip, offset } from 'svelte-floating-ui/dom';
 import { SchedulePollIcon } from '../../icons';
-// import type { Writable } from 'svelte/store'
-const dispatch = createEventDispatcher();
-let { index = 0, funcDesc = $bindable(''), kind = 'script', iconSize = 12, clazz = '', placement = 'bottom-center' } = $props();
+let { index = 0, funcDesc = $bindable(''), kind = 'script', iconSize = 12, clazz = '', placement = 'bottom-center', disableAi = false } = $props();
 let floatingConfig = {
     strategy: 'fixed',
     // @ts-ignore
@@ -31,7 +27,7 @@ noTransition
 shouldUsePortal={true} -->
 
 <PopupV2 {floatingConfig} bind:open target="#flow-editor">
-	{#snippet button({ pointerdown, pointerup })}
+	{#snippet button()}
 		<button
 			title={`Add ${
 				kind === 'failure'
@@ -48,13 +44,9 @@ shouldUsePortal={true} -->
 				'w-[17.5px] h-[17.5px] flex items-center justify-center !outline-[1px] outline dark:outline-gray-500 outline-gray-300 text-secondary bg-surface focus:outline-none hover:bg-surface-hover rounded',
 				clazz
 			)}
-			onpointerdown={stopPropagation(
-				preventDefault(() => {
-					dispatch('open')
-					pointerdown()
-				})
-			)}
-			onpointerup={pointerup}
+			onpointerdown={() => {
+				open = !open
+			}}
 		>
 			{#if kind === 'trigger'}
 				<SchedulePollIcon size={14} />
@@ -70,13 +62,14 @@ shouldUsePortal={true} -->
 	{/snippet}
 	{#snippet children({ close })}
 		<InsertModuleInner
-			on:close={() => close(null)}
+			on:close={() => close()}
 			on:insert
 			on:new
 			on:pickFlow
 			on:pickScript
 			allowTrigger={index == 0}
 			{kind}
+			{disableAi}
 		/>
 	{/snippet}
 </PopupV2>

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

@@ -2,12 +2,13 @@ type Alignment = 'start' | 'end' | 'center';
 type Side = 'top' | 'bottom';
 type Placement = `${Side}-${Alignment}`;
 interface Props {
-    index?: number;
+    index?: number | 'error-handler-button';
     funcDesc?: string;
     kind?: 'script' | 'trigger' | 'preprocessor' | 'failure';
     iconSize?: number;
     clazz?: string;
     placement?: Placement;
+    disableAi?: boolean;
 }
 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> & {
@@ -25,9 +26,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const InsertModuleButton: $$__sveltets_2_IsomorphicComponent<Props, {
     insert: CustomEvent<any>;
     new: CustomEvent<any>;
-    pickFlow: CustomEvent<any>;
-    pickScript: CustomEvent<any>;
-    open: CustomEvent<any>;
+    pickFlow: any;
+    pickScript: any;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "funcDesc">;

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

@@ -1,32 +1,26 @@
+<script lang="ts" module>"use strict";
+let refreshCount = $state({ val: 0 });
+</script>
+
 <script lang="ts">import { createEventDispatcher, getContext } from 'svelte';
 import StepGenQuick from '../../copilot/StepGenQuick.svelte';
 import FlowInputsQuick from '../content/FlowInputsQuick.svelte';
 import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
 import TopLevelNode from '../pickers/TopLevelNode.svelte';
-// import type { Writable } from 'svelte/store'
+import RefreshButton from '../../common/button/RefreshButton.svelte';
 const dispatch = createEventDispatcher();
 let { stop = false, funcDesc = $bindable(''), disableAi = false, kind = 'script', allowTrigger = true, scriptOnly = false } = $props();
 let customUi = getContext('customUi');
 let selectedKind = $state(kind);
 let preFilter = $state('all');
 let loading = $state(false);
-let small = $state(false);
+let small = $derived(kind === 'preprocessor' || kind === 'failure');
 let width = $state(0);
 let height = $state(0);
+let owners = $state([]);
 let displayPath = $derived(width > 650 || height > 400);
-$effect(() => {
-    small = kind === 'preprocessor' || kind === 'failure';
-});
 </script>
 
-<!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
-
-<!-- {floatingConfig}
-floatingClasses="mt-2"
-containerClasses="border rounded-lg shadow-lg  bg-surface"
-noTransition
-shouldUsePortal={true} -->
-
 <div
 	id="flow-editor-insert-module"
 	class="flex flex-col h-[400px] {small
@@ -53,6 +47,7 @@ shouldUsePortal={true} -->
 		{#if selectedKind != 'preprocessor' && selectedKind != 'flow'}
 			<ToggleHubWorkspaceQuick bind:selected={preFilter} />
 		{/if}
+		<RefreshButton size="md" light {loading} on:click={() => (refreshCount.val += 1)} />
 	</div>
 
 	<div class="flex flex-row grow min-h-0">
@@ -128,13 +123,15 @@ shouldUsePortal={true} -->
 						dispatch('new', { kind: 'branchall' })
 					}}
 				/>
-				<TopLevelNode
-					label="AI Agent"
-					on:select={() => {
-						dispatch('close')
-						dispatch('new', { kind: 'aiagent' })
-					}}
-				/>
+				{#if customUi?.aiAgent != false}
+					<TopLevelNode
+						label="AI Agent"
+						on:select={() => {
+							dispatch('close')
+							dispatch('new', { kind: 'aiagent' })
+						}}
+					/>
+				{/if}
 			</div>
 		{/if}
 
@@ -145,6 +142,7 @@ shouldUsePortal={true} -->
 			{disableAi}
 			{funcDesc}
 			{kind}
+			bind:owners
 			on:close={() => {
 				dispatch('close')
 			}}
@@ -154,6 +152,7 @@ shouldUsePortal={true} -->
 			{preFilter}
 			{small}
 			{displayPath}
+			refreshCount={refreshCount.val}
 		/>
 	</div>
 </div>

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

@@ -22,8 +22,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<Props, {
     insert: CustomEvent<any>;
     new: CustomEvent<any>;
-    pickScript: CustomEvent<any>;
-    pickFlow: CustomEvent<any>;
+    pickScript: any;
+    pickFlow: any;
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

package/package/components/flows/map/MapItem.svelte

@@ -40,7 +40,7 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 			<div
 				class={twMerge(
 					'absolute z-10 right-0 -top-4 center-center text-tertiary text-2xs',
-					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2' : ''
+					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2 right-10' : ''
 				)}
 			>
 				{msToSec(duration_ms)}s

package/package/components/flows/map/VirtualItem.svelte

@@ -41,13 +41,12 @@ const outputType = $derived(showJobStatus
 		<div class="flex flex-col w-full">
 			<div
 				style={borderColor ? `border-color: ${borderColor};` : 'border: 0'}
-				class="flex flex-row gap-1 justify-between {center
+				class="flex flex-row justify-between {center
 					? 'items-center'
 					: 'items-baseline'} w-full overflow-hidden rounded-sm border p-2 text-2xs module text-primary border-gray-400 dark:border-gray-600"
 			>
 				{#if icon}
 					{@render icon?.()}
-					<span class="mr-2"></span>
 				{/if}
 				<div class="flex flex-col flex-grow shrink-0 max-w-full min-w-0">
 					{#if label}

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

@@ -1,73 +1,70 @@
+<script module lang="ts">"use strict";
+let listHubIntegrationsCached = createCache(({ kind }) => IntegrationService.listHubIntegrations({ kind }), { initial: { kind: 'script', refreshCount: 0 }, invalidateMs: 1000 * 60 });
+console.log('listHubIntegrationsCached', listHubIntegrationsCached);
+let listHubScriptsCached = createCache(async ({ filter, kind, appFilter }) => get(userStore)
+    ? filter.length > 0
+        ? await ScriptService.queryHubScripts({ text: filter, limit: 40, kind })
+        : ((await ScriptService.getTopHubScripts({ limit: 40, kind, app: appFilter })).asks ?? [])
+    : undefined, {
+    initial: { filter: '', kind: 'script', appFilter: undefined, refreshCount: 0 },
+    invalidateMs: 1000 * 60
+});
+</script>
+
 <script lang="ts">import { createEventDispatcher, untrack } from 'svelte';
 import { Skeleton } from '../../common';
-import { classNames } from '../../../utils';
+import { classNames, createCache } from '../../../utils';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
 import { IntegrationService, ScriptService } from '../../../gen';
 import { Circle } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
+import { usePromise } from '../../../svelte5Utils.svelte';
+import { userStore } from '../../../stores';
+import { get } from 'svelte/store';
 let hubNotAvailable = $state(false);
 const dispatch = createEventDispatcher();
-let { kind = 'script', filter = $bindable(''), loading = $bindable(false), selected = undefined, appFilter = undefined, items = $bindable([]), displayPath = false, apps = $bindable([]) } = $props();
-let allApps = [];
+let { kind = 'script', filter = $bindable(''), loading = $bindable(false), selected = undefined, appFilter = undefined, items = $bindable([]), displayPath = false, apps = $bindable([]), refreshCount = 0 } = $props();
+let allApps = $state([]);
+$effect(() => {
+    if (filter.length > 0) {
+        apps = Array.from(new Set(items?.map((x) => x.app) ?? [])).sort();
+    }
+    else {
+        apps = allApps;
+    }
+});
 async function getAllApps(filterKind) {
     try {
         hubNotAvailable = false;
-        allApps = (await IntegrationService.listHubIntegrations({
-            kind: filterKind
-        })).map((x) => x.name);
-        apps = allApps;
+        allApps = (await listHubIntegrationsCached({ kind: filterKind, refreshCount })).map((x) => x.name);
     }
     catch (err) {
         console.error('Hub is not available');
         allApps = [];
-        apps = [];
         hubNotAvailable = true;
     }
 }
-let startTs = 0;
-async function applyFilter(filter, filterKind, appFilter) {
-    try {
-        loading = true;
-        hubNotAvailable = false;
-        const ts = Date.now();
-        startTs = ts;
-        await new Promise((resolved, rejected) => setTimeout(resolved, 200));
-        if (ts < startTs)
+let hubScriptsFilteredPromise = usePromise(() => listHubScriptsCached({ appFilter, filter, kind, refreshCount }), { loadInit: false });
+$effect(() => {
+    ;
+    [filter, kind, appFilter, refreshCount];
+    hubScriptsFilteredPromise.refresh();
+});
+$effect(() => {
+    loading = hubScriptsFilteredPromise.status === 'loading';
+    hubNotAvailable = !!hubScriptsFilteredPromise.error;
+    const scripts = hubScriptsFilteredPromise.value;
+    untrack(() => {
+        if (!scripts)
             return;
-        const scripts = filter.length > 0
-            ? await ScriptService.queryHubScripts({
-                text: `${filter}`,
-                limit: 40,
-                kind: filterKind
-            })
-            : ((await ScriptService.getTopHubScripts({
-                limit: 40,
-                kind: filterKind,
-                app: appFilter
-            })).asks ?? []);
         const mappedItems = scripts.map((x) => ({
             ...x,
             path: `hub/${x.version_id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`,
             summary: `${x.summary} (${x.app})`
         }));
-        if (filter.length > 0) {
-            apps = Array.from(new Set(mappedItems?.map((x) => x.app) ?? [])).sort();
-        }
-        else {
-            apps = allApps;
-        }
         items = appFilter ? mappedItems.filter((x) => x.app === appFilter) : mappedItems;
-        if (ts === startTs) {
-            loading = false;
-        }
-        hubNotAvailable = false;
-    }
-    catch (err) {
-        hubNotAvailable = true;
-        console.error('Hub not available');
-        loading = false;
-    }
-}
+    });
+});
 function onKeyDown(e) {
     if (selected != undefined &&
         items &&
@@ -81,13 +78,7 @@ function onKeyDown(e) {
 }
 $effect(() => {
     ;
-    [filter, kind, appFilter];
-    untrack(() => {
-        applyFilter(filter, kind, appFilter);
-    });
-});
-$effect(() => {
-    kind;
+    [kind, refreshCount];
     untrack(() => {
         getAllApps(kind);
     });

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

@@ -16,6 +16,7 @@ interface Props {
     }[];
     displayPath?: boolean;
     apps?: string[];
+    refreshCount?: number;
 }
 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> & {
@@ -34,6 +35,6 @@ declare const PickHubScriptQuick: $$__sveltets_2_IsomorphicComponent<Props, {
     pickScript: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "filter" | "items" | "loading" | "apps">;
+}, {}, {}, "items" | "filter" | "loading" | "apps">;
 type PickHubScriptQuick = InstanceType<typeof PickHubScriptQuick>;
 export default PickHubScriptQuick;

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte

@@ -1,25 +1,37 @@
+<script module lang="ts">"use strict";
+let initialWorkspace = get(workspaceStore);
+let loadItemsCached = createCache(({ workspace, kind, isTemplate }) => workspace && get(userStore)
+    ? kind == 'flow'
+        ? FlowService.listFlows({ workspace })
+        : ScriptService.listScripts({ workspace, kinds: kind, isTemplate })
+    : undefined, initialWorkspace
+    ? {
+        initial: {
+            workspace: initialWorkspace,
+            kind: 'script',
+            isTemplate: undefined,
+            refreshCount: 0
+        },
+        invalidateMs: 1000 * 60
+    }
+    : {});
+</script>
+
 <script lang="ts">import { workspaceStore } from '../../../stores';
 import { createEventDispatcher, untrack } from 'svelte';
 import { FlowService, ScriptService } from '../../../gen';
 import SearchItems from '../../SearchItems.svelte';
 import { Skeleton } from '../../common';
-import { emptyString } from '../../../utils';
+import { createCache, emptyString } from '../../../utils';
 import { Code2 } from 'lucide-svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import Popover from '../../Popover.svelte';
-let items = $state(undefined);
+import { usePromise } from '../../../svelte5Utils.svelte';
+import { get } from 'svelte/store';
+import { userStore } from '../../../stores';
+let items = usePromise(async () => await loadItemsCached({ workspace: $workspaceStore, kind, isTemplate, refreshCount }), { loadInit: false, clearValueOnRefresh: false });
 let filteredItems = $state(undefined);
-async function loadItems() {
-    items =
-        kind == 'flow'
-            ? await FlowService.listFlows({ workspace: $workspaceStore })
-            : await ScriptService.listScripts({
-                workspace: $workspaceStore,
-                kinds: kind,
-                isTemplate
-            });
-}
-let { kind = 'script', isTemplate = undefined, selected = undefined, displayPath = false, filteredWithOwner = $bindable(undefined), filter = '', owners = $bindable([]), ownerFilter = $bindable(undefined) } = $props();
+let { kind = 'script', isTemplate = undefined, selected = undefined, displayPath = false, filteredWithOwner = $bindable(undefined), filter = '', owners = $bindable([]), ownerFilter = $bindable(undefined), refreshCount = 0 } = $props();
 const dispatch = createEventDispatcher();
 let lockHash = false;
 function onKeyDown(e) {
@@ -39,7 +51,8 @@ function onKeyDown(e) {
     }
 }
 $effect(() => {
-    $workspaceStore && kind && untrack(() => loadItems());
+    refreshCount;
+    $workspaceStore && kind && untrack(() => items.refresh());
 });
 $effect(() => {
     if ($workspaceStore) {
@@ -47,17 +60,19 @@ $effect(() => {
     }
 });
 $effect(() => {
-    owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort((a, b) => {
-        if (a.startsWith('u/') && !b.startsWith('u/'))
-            return -1;
-        if (b.startsWith('u/') && !a.startsWith('u/'))
-            return 1;
-        if (a.startsWith('f/') && !b.startsWith('f/'))
-            return -1;
-        if (b.startsWith('f/') && !a.startsWith('f/'))
-            return 1;
-        return a.localeCompare(b);
-    });
+    if (filteredItems) {
+        owners = Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort((a, b) => {
+            if (a.startsWith('u/') && !b.startsWith('u/'))
+                return -1;
+            if (b.startsWith('u/') && !a.startsWith('u/'))
+                return 1;
+            if (a.startsWith('f/') && !b.startsWith('f/'))
+                return -1;
+            if (b.startsWith('f/') && !a.startsWith('f/'))
+                return 1;
+            return a.localeCompare(b);
+        });
+    }
 });
 $effect(() => {
     filteredWithOwner =
@@ -69,7 +84,7 @@ $effect(() => {
 
 <SearchItems
 	{filter}
-	{items}
+	items={items.value}
 	bind:filteredItems
 	f={(x) => (emptyString(x.summary) ? x.path : x.summary + ' (' + x.path + ')')}
 />

package/package/components/flows/pickers/WorkspaceScriptPickerQuick.svelte.d.ts

@@ -18,6 +18,7 @@ interface Props {
         kind: 'inline' | 'owner' | 'integrations';
         name: string | undefined;
     } | undefined;
+    refreshCount?: number;
 }
 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> & {

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

@@ -102,6 +102,7 @@ onMount(() => {
 		<div class="flex flex-row items-center justify-center w-full h-full">
 			{#if showInput}
 				<Popover
+					enableFlyTransition
 					floatingConfig={{
 						placement: 'bottom',
 						gutter: 0,
@@ -144,6 +145,7 @@ onMount(() => {
 			{/if}
 
 			<Popover
+				enableFlyTransition
 				floatingConfig={{
 					placement: 'bottom',
 					gutter: 0,

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

@@ -76,11 +76,7 @@ async function getPropPickerElements() {
 		>
 			<slot />
 		</Pane>
-		<Pane
-			minSize={20}
-			size={40}
-			class="!transition-none z-1000 {$propPickerConfig ? 'ml-[-1px]' : ''} {paneClass}"
-		>
+		<Pane minSize={20} size={40} class="!transition-none z-1000 {paneClass}">
 			<AnimatedButton
 				animate={$propPickerConfig?.insertionMode == 'connect'}
 				baseRadius="4px"
@@ -126,13 +122,3 @@ async function getPropPickerElements() {
 		</Pane>
 	</Splitpanes>
 </div>
-
-<style>
-	:global(.splitpanes-remove-splitter > .splitpanes__pane) {
-		background-color: inherit !important;
-	}
-	:global(.splitpanes-remove-splitter > .splitpanes__splitter) {
-		background-color: transparent !important;
-		width: 0 !important;
-		border: none !important;
-	}</style>

package/package/components/git_sync/DetectionFlow.svelte

@@ -5,10 +5,34 @@ import GitSyncFilterSettings from '../workspaceSettings/GitSyncFilterSettings.sv
 import Toggle from '../Toggle.svelte';
 import { sendUserToast } from '../../toast';
 import { workspaceStore } from '../../stores';
-let { idx } = $props();
+import GitSyncModeDisplay from './GitSyncModeDisplay.svelte';
+let { idx, mode } = $props();
 const gitSyncContext = getGitSyncContext();
 const repo = $derived(gitSyncContext.getRepository(idx));
+let targetBranch = $state('main');
+// Update target branch when repository changes
+$effect(() => {
+    const abortController = new AbortController();
+    if (repo?.git_repo_resource_path) {
+        gitSyncContext.getTargetBranch(repo).then(branch => {
+            if (!abortController.signal.aborted) {
+                targetBranch = branch;
+            }
+        }).catch(error => {
+            if (!abortController.signal.aborted) {
+                console.warn('Failed to get target branch:', error);
+            }
+        });
+    }
+    return () => {
+        abortController.abort();
+    };
+});
 async function handleDetect() {
+    if (!repo) {
+        sendUserToast('Repository not found', true);
+        return;
+    }
     try {
         await gitSyncContext.detectRepository(idx);
     }
@@ -43,24 +67,13 @@ async function handleSaveConnection() {
 }
 </script>
 
+
 {#if repo}
 	<div class="space-y-4">
 		{#if !repo.detectionState || repo.detectionState === 'idle'}
-			<!-- Step 1: Show toggles first, then check button -->
-			<div class="space-y-3">
-				<Toggle
-					disabled={!repo.git_repo_resource_path}
-					bind:checked={repo.use_individual_branch}
-					options={{
-						left: 'Sync mode',
-						leftTooltip: 'Changes will be committed directly to the branch',
-						right: 'Promotion mode',
-						rightTooltip:
-							"Changes will be made to a new branch per deployed object (prefixed with 'wm_deploy/')"
-					}}
-				/>
-
-				{#if repo.use_individual_branch}
+			<!-- Folder grouping option for promotion mode -->
+			{#if mode === 'promotion'}
+				<div class="space-y-3">
 					<Toggle
 						disabled={!repo.git_repo_resource_path}
 						bind:checked={repo.group_by_folder}
@@ -70,8 +83,8 @@ async function handleSaveConnection() {
 								'Instead of creating a branch per object, Windmill will create a branch per folder containing objects being deployed.'
 						}}
 					/>
-				{/if}
-			</div>
+				</div>
+			{/if}
 
 			<!-- Check repo settings button -->
 			<div class="flex justify-start">
@@ -110,19 +123,7 @@ async function handleSaveConnection() {
 				useIndividualBranch={repo.use_individual_branch}
 			/>
 
-			<!-- Display mode settings as prominent text -->
-			<div class="text-base">
-				{#if repo.use_individual_branch}
-					<div
-						><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div
-					>
-					{#if repo.group_by_folder}
-						<div class="text-sm text-tertiary mt-1">Grouped by folder</div>
-					{/if}
-				{:else}
-					<div>Sync: <span class="font-bold">Syncing back to branch main</span></div>
-				{/if}
-			</div>
+			<GitSyncModeDisplay {mode} {targetBranch} repository={repo} />
 
 			<!-- Initialize button -->
 			<div class="flex justify-start">
@@ -149,19 +150,7 @@ async function handleSaveConnection() {
 				useIndividualBranch={repo.use_individual_branch}
 			/>
 
-			<!-- Display mode settings as prominent text -->
-			<div class="text-base">
-				{#if repo.use_individual_branch}
-					<div
-						><span class="font-bold">Promotion:</span> Creating branches whose promotion target is main</div
-					>
-					{#if repo.group_by_folder}
-						<div class="text-sm text-tertiary mt-1">Grouped by folder</div>
-					{/if}
-				{:else}
-					<div>Sync: <span class="font-bold">Syncing back to branch main</span></div>
-				{/if}
-			</div>
+			<GitSyncModeDisplay {mode} {targetBranch} repository={repo} />
 
 			<!-- Save connection button -->
 			<div class="flex justify-start">

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

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
     idx: number;
+    mode?: 'sync' | 'promotion';
 };
 declare const DetectionFlow: import("svelte").Component<$$ComponentProps, {}, "">;
 type DetectionFlow = ReturnType<typeof DetectionFlow>;