windmill-components 1.542.5 → 1.555.0

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

@@ -1,5 +1,14 @@
+import type { GitSyncRepository } from './GitSyncContext.svelte';
 type $$ComponentProps = {
-    idx: number;
+    idx?: number | null;
+    isSecondary?: boolean;
+    isLegacy?: boolean;
+    variant?: 'primary-sync' | 'primary-promotion' | 'secondary' | 'legacy' | 'standard';
+    mode?: 'sync' | 'promotion' | null;
+    repository?: GitSyncRepository | null;
+    onAdd?: (() => void) | null;
+    isCollapsible?: boolean;
+    showEmptyState?: boolean;
 };
 declare const GitSyncRepositoryCard: import("svelte").Component<$$ComponentProps, {}, "">;
 type GitSyncRepositoryCard = ReturnType<typeof GitSyncRepositoryCard>;

package/package/components/git_sync/GitSyncSection.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { Plus, ExternalLink } from 'lucide-svelte';
+<script lang="ts">import { ExternalLink, ChevronDown, ChevronRight, Plus } from 'lucide-svelte';
 import { Button, Alert } from '../common';
 import Description from '../Description.svelte';
 import { setGitSyncContext } from './GitSyncContext.svelte';
-import GitSyncRepositoryList from './GitSyncRepositoryList.svelte';
+import GitSyncRepositoryCard from './GitSyncRepositoryCard.svelte';
 import GitSyncModalManager from './GitSyncModalManager.svelte';
 import { enterpriseLicense, workspaceStore } from '../../stores';
 import { sendUserToast } from '../../toast';
@@ -23,6 +23,16 @@ $effect(() => {
         });
     }
 });
+// Derived state for repository categorization
+const primarySync = $derived(gitSyncContext?.getPrimarySyncRepository() || null);
+const primaryPromotion = $derived(gitSyncContext?.getPrimaryPromotionRepository() || null);
+const secondarySync = $derived(gitSyncContext?.getSecondarySyncRepositories() || []);
+const legacyPromotion = $derived(gitSyncContext?.getLegacyPromotionRepositories() || []);
+// State for collapsible sections
+let secondarySyncExpanded = $state(false);
+let legacyPromotionExpanded = $state(false);
+// Check if any secondary repositories are unsaved
+const hasUnsavedSecondary = $derived(secondarySync.some(s => s.repo.isUnsavedConnection));
 </script>
 
 {#if !gitSyncContext}
@@ -68,19 +78,129 @@ $effect(() => {
 		</div>
 		<div class="pt-2"></div>
 
-		<!-- Repository list -->
-		<GitSyncRepositoryList />
+		<!-- Primary Sync Repository -->
+		<div class="space-y-4">
+			<GitSyncRepositoryCard
+				variant="primary-sync"
+				mode="sync"
+				idx={primarySync?.idx ?? null}
+				repository={primarySync?.repo ?? null}
+				onAdd={() => gitSyncContext.addSyncRepository()}
+				isCollapsible={false}
+				showEmptyState={primarySync?.repo === null}
+			/>
 
-		<!-- Add repository button -->
-		<div class="flex mt-5 mb-5">
-			<Button
-				startIcon={{ icon: Plus }}
-				color="dark"
-				variant="border"
-				onclick={() => gitSyncContext.addRepository()}
-			>
-				Add connection
-			</Button>
+			<!-- Secondary Sync Repositories -->
+			{#if primarySync && !primarySync.repo?.isUnsavedConnection}
+				{#if secondarySync.length > 0 || secondarySyncExpanded}
+					<div class="mt-4">
+						<button
+							class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
+							onclick={() => (secondarySyncExpanded = !secondarySyncExpanded)}
+						>
+							{#if secondarySyncExpanded}
+								<ChevronDown size={16} />
+							{:else}
+								<ChevronRight size={16} />
+							{/if}
+							Secondary sync repositories ({secondarySync.length})
+						</button>
+
+						{#if secondarySyncExpanded}
+							<div class="mt-3 space-y-3">
+								{#if secondarySync.length === 0}
+									<div class="text-sm text-secondary italic">
+										No secondary sync repositories configured
+									</div>
+								{:else}
+									{#each secondarySync as { repo, idx } (repo.git_repo_resource_path)}
+										<div class="pl-4">
+											<GitSyncRepositoryCard
+												variant="secondary"
+												{idx}
+												isSecondary={true}
+											/>
+										</div>
+									{/each}
+								{/if}
+
+								{#if !hasUnsavedSecondary}
+									<div class="pl-4">
+										<Button
+											size="xs"
+											color="light"
+											variant="border"
+											startIcon={{ icon: Plus }}
+											onclick={() => gitSyncContext.addSyncRepository()}
+										>
+											Add secondary sync
+										</Button>
+									</div>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{:else}
+					<!-- Collapsed state when no secondary repos exist -->
+					{#if !hasUnsavedSecondary}
+						<div class="mt-2">
+							<button
+								class="text-xs text-tertiary hover:text-secondary transition-colors"
+								onclick={() => {
+									secondarySyncExpanded = true
+									gitSyncContext.addSyncRepository()
+								}}
+							>
+								+ Add secondary sync repository
+							</button>
+						</div>
+					{/if}
+				{/if}
+			{/if}
+
+			<!-- Primary Promotion Repository -->
+			<div class="mt-6">
+				<GitSyncRepositoryCard
+					variant="primary-promotion"
+					mode="promotion"
+					idx={primaryPromotion?.idx ?? null}
+					repository={primaryPromotion?.repo ?? null}
+					onAdd={() => gitSyncContext.addPromotionRepository()}
+					isCollapsible={false}
+					showEmptyState={primaryPromotion?.repo === null}
+				/>
+			</div>
+
+			<!-- Legacy promotion repositories (backwards compatibility) -->
+			{#if legacyPromotion.length > 0}
+				<Alert type="warning" title="Multiple promotion repositories detected">
+					Multiple promotion repositories are no longer supported. Please reduce to a single promotion repository.
+					Only deletion is allowed for the additional repositories below.
+				</Alert>
+				<div class="mt-4">
+					<button
+						class="flex items-center gap-2 text-sm text-secondary hover:text-primary transition-colors"
+						onclick={() => (legacyPromotionExpanded = !legacyPromotionExpanded)}
+					>
+						{#if legacyPromotionExpanded}
+							<ChevronDown size={16} />
+						{:else}
+							<ChevronRight size={16} />
+						{/if}
+						Legacy promotion repositories ({legacyPromotion.length})
+					</button>
+
+					{#if legacyPromotionExpanded}
+						<div class="space-y-3 mt-3">
+							{#each legacyPromotion as { repo, idx } (repo.git_repo_resource_path)}
+								<div class="pl-4">
+									<GitSyncRepositoryCard {idx} variant="legacy" isLegacy={true} />
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
 		</div>
 
 		<!-- Modals -->

package/package/components/git_sync/PullWorkspaceModal.svelte

@@ -6,7 +6,7 @@ import { JobService } from '../../gen';
 import { workspaceStore } from '../../stores';
 import { sendUserToast } from '../../toast';
 import hubPaths from '../../hubPaths.json';
-import { tryEvery } from '../../utils';
+import { jobManager } from '../../services/JobManager';
 let { open = $bindable(false), gitRepoResourcePath, uiState, repoIndex, currentGitSyncSettings, onFilterUpdate, onSettingsSaved, onSuccess, settingsOnly = false } = $props();
 // Job state
 let previewJobId = $state(null);
@@ -131,42 +131,37 @@ async function executeJob(isDryRun, settingsOnly = false) {
             applyJobId = jobId;
             applyJobStatus = 'running';
         }
-        let jobSuccess = false;
-        let result = {};
-        await tryEvery({
-            tryCode: async () => {
-                const testResult = await JobService.getCompletedJob({ workspace, id: jobId });
-                jobSuccess = !!testResult.success;
-                if (jobSuccess) {
-                    const jobResult = await JobService.getCompletedJobResult({ workspace, id: jobId });
-                    result = jobResult;
+        // Use JobManager instead of tryEvery
+        const result = await jobManager.runWithProgress(() => Promise.resolve(jobId), {
+            workspace,
+            timeout: 60000,
+            timeoutMessage: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s`,
+            onProgress: (status) => {
+                if (isPreview) {
+                    previewJobStatus = status.status;
+                }
+                else {
+                    applyJobStatus = status.status;
                 }
-            },
-            timeoutCode: async () => {
-                try {
-                    await JobService.cancelQueuedJob({
-                        workspace,
-                        id: jobId,
-                        requestBody: { reason: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s` }
-                    });
+                // Handle failure status
+                if (status.status === 'failure') {
+                    if (isPreview) {
+                        previewError = status.error || 'Preview failed';
+                    }
+                    else {
+                        applyError = status.error || 'Pull failed';
+                    }
                 }
-                catch (err) { }
-            },
-            interval: 500,
-            timeout: 60000
+            }
         });
+        // Handle successful result
         if (isPreview) {
-            previewJobStatus = jobSuccess ? 'success' : 'failure';
-            if (jobSuccess) {
+            if (previewJobStatus === 'success') {
                 previewResult = result;
             }
-            else {
-                previewError = 'Preview failed';
-            }
         }
         else {
-            applyJobStatus = jobSuccess ? 'success' : 'failure';
-            if (jobSuccess) {
+            if (applyJobStatus === 'success') {
                 const settingsData = result?.local;
                 const hasSettingsChanges = settingsData && onFilterUpdate;
                 if (hasSettingsChanges) {
@@ -175,9 +170,6 @@ async function executeJob(isDryRun, settingsOnly = false) {
                 }
                 onSuccess?.();
             }
-            else {
-                applyError = 'Pull failed';
-            }
         }
     }
     catch (e) {

package/package/components/git_sync/PushWorkspaceModal.svelte

@@ -5,7 +5,7 @@ import GitDiffPreview from '../GitDiffPreview.svelte';
 import { JobService } from '../../gen';
 import { workspaceStore } from '../../stores';
 import hubPaths from '../../hubPaths.json';
-import { tryEvery } from '../../utils';
+import { jobManager } from '../../services/JobManager';
 let { open = $bindable(false), gitRepoResourcePath, uiState, onSuccess, isNewConnection = false, onSaveWithoutInit } = $props();
 // Job state
 let previewJobId = $state(null);
@@ -76,47 +76,39 @@ async function executeJob(isDryRun) {
             applyJobId = jobId;
             applyJobStatus = 'running';
         }
-        let jobSuccess = false;
-        let result = {};
-        await tryEvery({
-            tryCode: async () => {
-                const testResult = await JobService.getCompletedJob({ workspace, id: jobId });
-                jobSuccess = !!testResult.success;
-                if (jobSuccess) {
-                    const jobResult = await JobService.getCompletedJobResult({ workspace, id: jobId });
-                    result = jobResult;
+        // Use JobManager instead of tryEvery
+        const result = await jobManager.runWithProgress(() => Promise.resolve(jobId), {
+            workspace,
+            timeout: 60000,
+            timeoutMessage: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s`,
+            onProgress: (status) => {
+                if (isPreview) {
+                    previewJobStatus = status.status;
+                }
+                else {
+                    applyJobStatus = status.status;
                 }
-            },
-            timeoutCode: async () => {
-                try {
-                    await JobService.cancelQueuedJob({
-                        workspace,
-                        id: jobId,
-                        requestBody: { reason: `${isPreview ? 'Preview' : 'Apply'} job timed out after 60s` }
-                    });
+                // Handle failure status
+                if (status.status === 'failure') {
+                    if (isPreview) {
+                        previewError = status.error || 'Preview failed';
+                    }
+                    else {
+                        applyError = status.error || 'Push failed';
+                    }
                 }
-                catch (err) { }
-            },
-            interval: 500,
-            timeout: 60000
+            }
         });
+        // Handle successful result
         if (isPreview) {
-            previewJobStatus = jobSuccess ? 'success' : 'failure';
-            if (jobSuccess) {
+            if (previewJobStatus === 'success') {
                 previewResult = result;
             }
-            else {
-                previewError = 'Preview failed';
-            }
         }
         else {
-            applyJobStatus = jobSuccess ? 'success' : 'failure';
-            if (jobSuccess) {
+            if (applyJobStatus === 'success') {
                 onSuccess?.();
             }
-            else {
-                applyError = 'Push failed';
-            }
         }
     }
     catch (e) {

package/package/components/graph/FlowGraphV2.svelte

@@ -41,7 +41,7 @@ const triggerContext = getContext('TriggerContext');
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, testModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = {}, flowHasChanged = false, chatInputEnabled = false } = $props();
 setContext('FlowGraphContext', { selectedId, useDataflow });
 if (triggerContext && allowSimplifiedPoll) {
     if (isSimplifiable(modules)) {
@@ -302,6 +302,7 @@ let graph = $derived.by(() => {
         showJobStatus,
         suspendStatus,
         flowHasChanged,
+        chatInputEnabled,
         additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
     }, untrack(() => failureModule), preprocessorModule, eventHandler, success, $useDataflow, untrack(() => $selectedId), moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });

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

@@ -39,6 +39,7 @@ interface Props {
         job: Job;
         nb: number;
     }>;
+    chatInputEnabled?: boolean;
     onDelete?: (id: string) => void;
     onInsert?: (detail: {
         sourceId?: string;

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

@@ -96,6 +96,7 @@ export type InputN = {
         flowJob: Job | undefined;
         showJobStatus: boolean;
         flowHasChanged: boolean;
+        chatInputEnabled: boolean;
         assets?: AssetWithAltAccessType[] | undefined;
     };
 };
@@ -301,6 +302,7 @@ export declare function graphBuilder(modules: FlowModule[] | undefined, extra: {
         nb: number;
     }>;
     flowHasChanged: boolean;
+    chatInputEnabled: boolean;
     additionalAssetsMap?: Record<string, AssetWithAltAccessType[]>;
 }, failureModule: FlowModule | undefined, preprocessorModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined, simplifiableFlow: SimplifiableFlow | undefined, flowPathForTriggerNode: string | undefined, expandedSubflows: Record<string, FlowModule[]>): {
     nodes: {

package/package/components/graph/graphBuilder.svelte.js

@@ -165,6 +165,7 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 flowJob: extra.flowJob,
                 showJobStatus: extra.showJobStatus,
                 flowHasChanged: extra.flowHasChanged,
+                chatInputEnabled: extra.chatInputEnabled,
                 ...(inputAssets ? { assets: inputAssets } : {})
             }
         };

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

@@ -24,12 +24,8 @@ export type DurationStatus = {
         duration_ms?: number;
     }>;
 };
-export type GlobalIterationBounds = {
-    iteration_from?: number;
-    iteration_total?: number;
-};
 export type FlowStatusViewerContext = {
-    flowStateStore?: FlowState;
+    flowState?: FlowState;
     retryStatus: StateStore<Record<string, number | undefined>>;
     suspendStatus: StateStore<Record<string, {
         nb: number;
@@ -56,6 +52,10 @@ export type GraphModuleState = {
     selectedForloopIndex?: number;
     selectedForLoopSetManually?: boolean;
     flow_jobs_success?: (boolean | undefined)[];
+    flow_jobs_duration?: {
+        started_at?: (string | undefined)[];
+        duration_ms?: (number | undefined)[];
+    };
     flow_jobs?: string[];
     iteration_total?: number;
     retries?: number;

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -46,6 +46,7 @@ let suspendStatus = $derived(data?.suspendStatus);
 			<!-- <pre class="text-2xs">A{JSON.stringify(data.branch)}, {data.sourceId}, {data.targetId}</pre> -->
 			<!-- {data.targetId} B -->
 			<InsertModuleButton
+				disableAi={data.disableAi}
 				index={data.index ?? 0}
 				on:new={(e) => {
 					data?.eventHandlers.insert({

package/package/components/graph/renderers/edges/EmptyEdge.svelte

@@ -1,16 +1,9 @@
 <script lang="ts">import { getBezierPath, BaseEdge } from '@xyflow/svelte';
 import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-export let sourceX;
-export let sourceY;
-export let sourcePosition;
-export let targetX;
-export let targetY;
-export let targetPosition;
-export let markerEnd = undefined;
-export let data = {};
+let { sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd = undefined, data = {} } = $props();
 const { useDataflow } = getContext('FlowGraphContext');
-$: [edgePath] = getBezierPath({
+let [edgePath] = $derived(getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -18,7 +11,7 @@ $: [edgePath] = getBezierPath({
     targetY,
     targetPosition,
     curvature: 0.25
-});
+}));
 </script>
 
 <BaseEdge

package/package/components/graph/renderers/edges/EmptyEdge.svelte.d.ts

@@ -1,18 +1,5 @@
 import { type Position } from '@xyflow/svelte';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const EmptyEdge: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     sourceX: number;
     sourceY: number;
     sourcePosition: Position;
@@ -23,8 +10,7 @@ declare const EmptyEdge: $$__sveltets_2_IsomorphicComponent<{
     data?: {
         class?: string;
     };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type EmptyEdge = InstanceType<typeof EmptyEdge>;
+}
+declare const EmptyEdge: import("svelte").Component<Props, {}, "">;
+type EmptyEdge = ReturnType<typeof EmptyEdge>;
 export default EmptyEdge;

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

@@ -138,8 +138,9 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
             });
         }
     }
-    const sortedNewNodes = clone(nodes)
+    const sortedNewNodes = nodes
         .filter((n) => n.type !== 'asset')
+        .map((n) => ({ id: n.id, position: $state.snapshot(n.position) }))
         .sort((a, b) => a.position.y - b.position.y);
     let currentYOffset = 0;
     let prevYPos = NaN;
@@ -176,7 +177,6 @@ export function computeAIToolNodes(nodes, eventHandlers, insertable, flowModuleS
 import { MessageCircle, Play, Wrench, X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
-import { clone } from '../../../../utils';
 import { getStateColor, getStateHoverColor } from '../../util';
 import { deepEqual } from 'fast-equals';
 let hover = $state(false);

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

@@ -4,12 +4,14 @@ import { getStateColor, getStateHoverColor } from '../../util';
 import { getContext } from 'svelte';
 import InsertModuleButton from '../../../flows/map/InsertModuleButton.svelte';
 import { schemaToObject } from '../../../../schema';
+import { MessageSquare } from 'lucide-svelte';
 let { data } = $props();
 const { selectedId } = getContext('FlowGraphContext');
 const { previewArgs, flowStore } = getContext('FlowEditorContext') || {};
 let topFlowInput = $derived(flowStore?.val && previewArgs && flowStore?.val?.schema
     ? schemaToObject(flowStore?.val.schema, previewArgs.val || {})
     : undefined);
+let inputLabel = $derived(data.chatInputEnabled ? 'Chat message' : 'Input');
 </script>
 
 <NodeWrapper>
@@ -17,6 +19,7 @@ let topFlowInput = $derived(flowStore?.val && previewArgs && flowStore?.val?.sch
 		{#if data.insertable && !data.hasPreprocessor}
 			<div class="absolute bottom-full left-0 right-0 flex center-center mb-3.5">
 				<InsertModuleButton
+					disableAi={data.disableAi}
 					index={0}
 					kind="preprocessor"
 					on:new={(e) => {
@@ -41,7 +44,9 @@ let topFlowInput = $derived(flowStore?.val && previewArgs && flowStore?.val?.sch
 			</div>
 		{/if}
 		<VirtualItem
-			label="Input"
+			id={'Input'}
+			hideId={true}
+			label={inputLabel}
 			selectable
 			selected={$selectedId === 'Input'}
 			bgColor={getStateColor(undefined, darkMode)}
@@ -77,6 +82,12 @@ let topFlowInput = $derived(flowStore?.val && previewArgs && flowStore?.val?.sch
 			showJobStatus={data.showJobStatus}
 			flowHasChanged={data.flowHasChanged}
 			{darkMode}
-		/>
+		>
+			{#snippet icon()}
+				{#if data.chatInputEnabled}
+					<MessageSquare size={14} class="text-blue-500 dark:text-blue-400" />
+				{/if}
+			{/snippet}
+		</VirtualItem>
 	{/snippet}
 </NodeWrapper>

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

@@ -1,5 +1,4 @@
-<script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
-import { twMerge } from 'tailwind-merge';
+<script lang="ts">import { twMerge } from 'tailwind-merge';
 import {} from '../../graphBuilder.svelte';
 import InsertModuleInner from '../../../flows/map/InsertModuleInner.svelte';
 import { Cross } from 'lucide-svelte';
@@ -14,11 +13,12 @@ let floatingConfig = {
     middleware: [offset(8), flip()],
     autoUpdate: true
 };
+let open = $state(false);
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<PopupV2 {floatingConfig} target="#flow-editor">
-	{#snippet button({ pointerdown, pointerup })}
+<PopupV2 bind:open {floatingConfig} target="#flow-editor">
+	{#snippet button()}
 		<button
 			title={`Add 'tool'
 			}`}
@@ -26,12 +26,7 @@ let floatingConfig = {
 			class={twMerge(
 				'!w-full h-6 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'
 			)}
-			onpointerdown={stopPropagation(
-				preventDefault(() => {
-					pointerdown()
-				})
-			)}
-			onpointerup={pointerup}
+			onpointerdown={() => (open = !open)}
 		>
 			<div class="flex flex-row items-center gap-1 font-medium text-2xs">
 				<Cross size={12} />

package/package/components/graph/renderers/triggers/TriggersBadge.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">import { Calendar, Mail, Webhook, Unplug, Database, Terminal } from 'lucide-svelte';
-import { Loader2 } from 'lucide-svelte';
 import {} from 'svelte';
 import { Route } from 'lucide-svelte';
 import { getContext } from 'svelte';
@@ -11,6 +10,7 @@ import { Menu, Menubar, MeltButton, MenuItem, Tooltip } from '../../../meltCompo
 import { twMerge } from 'tailwind-merge';
 import SchedulePollIcon from '../../../icons/SchedulePollIcon.svelte';
 import TriggerLabel from '../../../triggers/TriggerLabel.svelte';
+import CountBadge from '../../../common/badge/CountBadge.svelte';
 const { triggersState, triggersCount } = getContext('TriggerContext');
 let { selected, showOnlyWithCount, 
 // @ts-ignore - This is an output-only prop used with bind:
@@ -209,32 +209,7 @@ $effect(() => {
 	>
 		{#if countKey}
 			{@const count = $triggersCount?.[countKey] ?? 0}
-			{#if count > 0}
-				<div
-					class={twMerge(
-						// Base styles that apply in all cases
-						'absolute z-10 rounded-full overflow-hidden',
-						'flex center-center text-primary-inverse font-mono',
-						'bg-tertiary/50 group-hover:bg-primary transition-all duration-[100ms]',
-						noTriggers ? 'bg-primary' : '',
-
-						// Size variants based on small prop
-						small
-							? '-right-[3px] -top-[3px] h-3 w-3 text-[8px]'
-							: '-right-1.5 -top-1.5 h-4 w-4 text-xs',
-
-						// Special case for no triggers
-						noTriggers && small ? 'h-3 w-3 text-[8px] -right-0.5 -top-0.5' : '',
-						noTriggers && !small ? 'h-4 w-4 text-xs -right-1 -top-1' : ''
-					)}
-				>
-					{#if count === undefined}
-						<Loader2 class="animate-spin text-2xs" />
-					{:else}
-						<p>{count}</p>
-					{/if}
-				</div>
-			{/if}
+			<CountBadge {count} {small} alwaysVisible={noTriggers} />
 		{/if}
 		<SvelteComponent size={small ? 12 : 14} />
 	</MeltButton>