windmill-components 1.642.0 → 1.655.0

package/package/components/triggers/http/RouteEditorInner.svelte

@@ -36,6 +36,7 @@ import { untrack } from 'svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
@@ -95,7 +96,7 @@ let hasChanged = $derived(!deepEqual(getRouteConfig(), originalConfig ?? {}));
 let scopes = $derived(['http_triggers:read:' + path]);
 const isAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin);
 const routeConfig = $derived.by(getRouteConfig);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived(drawerLoading ||
     !can_write ||
     pathError != '' ||
@@ -614,6 +615,13 @@ $effect(() => {
 
 			{#if !is_static_website}
 				<Section label="Advanced" collapsable>
+					{#snippet header()}
+						<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
+							{ name: 'Async', active: request_type === 'async' },
+							{ name: 'SSE', active: request_type === 'sync_sse' },
+							{ name: 'Authentication', active: authentication_method !== 'none' }
+						]} />
+					{/snippet}
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="request_options" label="Request Options" />
@@ -828,6 +836,7 @@ $effect(() => {
 						</div>
 					</div>
 				</Section>
+				<div class="pb-8" />
 			{/if}
 		</div>
 	{/if}

package/package/components/triggers/kafka/KafkaTriggerEditorInner.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { Alert, Button } from '../../common';
+import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import Path from '../../Path.svelte';
@@ -8,7 +9,7 @@ import { KafkaTriggerService } from '../../../gen';
 import { usedTriggerKinds, userStore, workspaceStore } from '../../../stores';
 import { canWrite, capitalize, emptyString, sendUserToast } from '../../../utils';
 import Section from '../../Section.svelte';
-import { Loader2 } from 'lucide-svelte';
+import { Loader2, RotateCcw } from 'lucide-svelte';
 import Label from '../../Label.svelte';
 import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte';
 import { untrack } from 'svelte';
@@ -18,10 +19,13 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
 import TriggerFilters from '../TriggerFilters.svelte';
+import Select from '../../select/Select.svelte';
+import Toggle from '../../Toggle.svelte';
 let { useDrawer = true, description = undefined, hideTarget = false, hideTooltips = false, isEditor = false, allowDraft = false, trigger = undefined, customLabel, isDeployed = false, cloudDisabled = false, onConfigChange = undefined, onCaptureConfigChange = undefined, onUpdate = undefined, onDelete = undefined, onReset = undefined } = $props();
 let drawer = $state();
 let is_flow = $state(false);
@@ -43,7 +47,10 @@ let extra_perms = $state(undefined);
 let kafkaCfgValid = $state(false);
 let kafkaResourcePath = $state('');
 let kafkaCfg = $state({});
+let autoOffsetReset = $state('latest');
+let autoCommit = $state(true);
 let deploymentLoading = $state(false);
+let resetLoading = $state(false);
 let optionTabSelected = $state('error_handler');
 let errorHandlerSelected = $state('slack');
 let error_handler_path = $state();
@@ -52,6 +59,7 @@ let retry = $state();
 let filters = $state([]);
 let suspendedJobsModal = $state(null);
 let originalConfig = $state(undefined);
+let resetConfirmOpen = $state(false);
 const isValid = $derived(!!kafkaResourcePath &&
     kafkaCfgValid &&
     kafkaCfg.topics &&
@@ -68,7 +76,7 @@ const saveDisabled = $derived(pathError !== '' ||
     kafkaCfg.topics.some((t) => emptyString(t)) ||
     !hasChanged);
 const kafkaConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 $effect(() => {
     is_flow = itemKind === 'flow';
 });
@@ -113,6 +121,8 @@ export async function openNew(nis_flow, fixedScriptPath_, nDefaultValues) {
             group_id: nDefaultValues?.group_id ?? '',
             topics: nDefaultValues?.topics ?? ['']
         };
+        autoOffsetReset = nDefaultValues?.auto_offset_reset ?? 'latest';
+        autoCommit = nDefaultValues?.auto_commit ?? true;
         initialScriptPath = '';
         fixedScriptPath = fixedScriptPath_ ?? '';
         script_path = fixedScriptPath;
@@ -143,6 +153,8 @@ function loadTriggerConfig(cfg) {
         group_id: cfg?.group_id,
         topics: cfg?.topics
     };
+    autoOffsetReset = cfg?.auto_offset_reset ?? 'latest';
+    autoCommit = cfg?.auto_commit ?? true;
     mode = cfg?.mode ?? 'enabled';
     extra_perms = cfg?.extra_perms;
     can_write = canWrite(path, cfg?.extra_perms, $userStore);
@@ -174,6 +186,8 @@ function getSaveCfg() {
         group_id: kafkaCfg.group_id,
         topics: kafkaCfg.topics,
         filters,
+        auto_offset_reset: autoOffsetReset,
+        auto_commit: autoCommit,
         mode,
         extra_perms: extra_perms,
         error_handler_path,
@@ -204,6 +218,23 @@ function getCaptureConfig() {
         path
     };
 }
+async function resetOffsets() {
+    resetLoading = true;
+    try {
+        await KafkaTriggerService.resetKafkaOffsets({
+            workspace: $workspaceStore,
+            path: initialPath
+        });
+        sendUserToast('Offset reset triggered. The consumer will restart and re-read from the beginning.');
+    }
+    catch (error) {
+        sendUserToast(error.body || error.message, true);
+    }
+    finally {
+        resetLoading = false;
+        resetConfirmOpen = false;
+    }
+}
 async function handleToggleMode(newMode) {
     mode = newMode;
     if (!trigger?.draftConfig) {
@@ -230,6 +261,18 @@ $effect(() => {
 });
 </script>
 
+<ConfirmationModal
+	title="Reset consumer offset"
+	confirmationText="Reset"
+	open={resetConfirmOpen}
+	loading={resetLoading}
+	onConfirmed={resetOffsets}
+	onCanceled={() => (resetConfirmOpen = false)}
+>
+	This will re-process all messages from the beginning of the topic. The consumer will restart
+	automatically.
+</ConfirmationModal>
+
 {#if mode === 'suspended'}
 	<TriggerSuspendedJobsModal
 		bind:this={suspendedJobsModal}
@@ -378,10 +421,80 @@ $effect(() => {
 				showTestingBadge={isEditor}
 			/>
 
-			<TriggerFilters bind:filters disabled={!can_write} />
-
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges
+						{error_handler_path}
+						{retry}
+						extraBadges={[
+							{ name: 'Earliest offset', active: autoOffsetReset !== 'latest' },
+							{ name: 'Manual commit', active: !autoCommit },
+							{ name: 'Filters', active: filters.length > 0 }
+						]}
+					/>
+				{/snippet}
+				<div class="flex flex-col gap-6">
+					<Label label="Initial offset">
+						{#snippet header()}
+							<span class="text-2xs text-tertiary ml-2">
+								Only applies when no committed offset exists
+							</span>
+						{/snippet}
+						<Select
+							items={[
+								{ label: 'Latest (new messages only)', value: 'latest' },
+								{ label: 'Earliest (from beginning)', value: 'earliest' }
+							]}
+							bind:value={autoOffsetReset}
+							disabled={!can_write}
+						/>
+					</Label>
+
+					<div class="flex flex-col gap-2">
+						<Label label="Auto-commit offsets">
+							{#snippet header()}
+								<span class="text-2xs text-tertiary ml-2">
+									Automatically commit offsets after receiving each message
+								</span>
+							{/snippet}
+							<Toggle bind:checked={autoCommit} disabled={!can_write} />
+						</Label>
+						{#if !autoCommit}
+							<Alert title="Manual commit mode" type="info" size="xs">
+								Offsets will not be committed automatically. Use <code
+									>wmill.commit_kafka_offsets(trigger_path, topic, partition, offset)</code
+								>
+								in Python or <code
+									>wmill.commitKafkaOffsets(triggerPath, topic, partition, offset)</code
+								> in TypeScript with the values from the event payload. The consumer collects
+								all pending commits and commits the highest offset for each topic/partition
+								pair.
+							</Alert>
+						{/if}
+					</div>
+
+					{#if edit && can_write}
+						<Label label="Consumer offset">
+							{#snippet header()}
+								<span class="text-2xs text-tertiary ml-2">
+									Force re-read all messages from the beginning
+								</span>
+							{/snippet}
+							<Button
+								variant="default"
+								size="xs"
+								startIcon={{ icon: RotateCcw }}
+								disabled={resetLoading}
+								loading={resetLoading}
+								onclick={() => (resetConfirmOpen = true)}
+							>
+								Reset offset to earliest
+							</Button>
+						</Label>
+					{/if}
+
+					<TriggerFilters bind:filters disabled={!can_write} />
+
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -401,6 +514,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/kafka/KafkaTriggersConfigSection.svelte

@@ -78,6 +78,7 @@ $effect(() => {
 					/>
 				</Subsection>
 			</div>
+
 		</div>
 	</Section>
 </div>

package/package/components/triggers/kafka/utils.js

@@ -17,6 +17,8 @@ export async function saveKafkaTriggerFromCfg(initialPath, cfg, edit, workspace,
         group_id: cfg.group_id,
         topics: cfg.topics,
         filters: cfg.filters ?? [],
+        auto_offset_reset: cfg.auto_offset_reset ?? 'latest',
+        auto_commit: cfg.auto_commit ?? true,
         ...errorHandlerAndRetries
     };
     try {

package/package/components/triggers/mqtt/MqttTriggerEditorInner.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { Alert, Button } from '../../common';
+<script lang="ts">import { untrack } from 'svelte';
+import { Alert, Button } from '../../common';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import Path from '../../Path.svelte';
@@ -17,6 +18,7 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import Toggle from '../../Toggle.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
@@ -58,7 +60,7 @@ let originalConfig = $state(undefined);
 let optionTabSelected = $state('connection_options');
 let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
 const mqttConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived(pathError != '' || emptyString(script_path) || !can_write || !isValid || !hasChanged);
 const activateV5Options = $state({
     topic_alias_maximum: Boolean(DEFAULT_V5_CONFIG.topic_alias_maximum),
@@ -394,7 +396,13 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
+						{ name: 'Custom Client ID', active: !!client_id },
+						{ name: 'MQTT v3', active: client_version === 'v3' }
+					]} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="connection_options" label="Connection Options" />
@@ -531,6 +539,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/native/services/google/GoogleDrivePicker.svelte.d.ts

@@ -3,6 +3,6 @@ interface Props {
     resourceName: string;
     disabled?: boolean;
 }
-declare const GoogleDrivePicker: import("svelte").Component<Props, {}, "resourceId" | "resourceName">;
+declare const GoogleDrivePicker: import("svelte").Component<Props, {}, "resourceName" | "resourceId">;
 type GoogleDrivePicker = ReturnType<typeof GoogleDrivePicker>;
 export default GoogleDrivePicker;

package/package/components/triggers/nats/NatsTriggerEditorInner.svelte

@@ -18,6 +18,7 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
@@ -56,7 +57,7 @@ let suspendedJobsModal = $state(null);
 let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}));
 const saveDisabled = $derived(pathError != '' || emptyString(script_path) || !can_write || !isValid || !hasChanged);
 const natsConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 $effect(() => {
     is_flow = itemKind === 'flow';
 });
@@ -379,7 +380,10 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -399,6 +403,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/postgres/CheckPostgresRequirement.svelte

@@ -4,7 +4,7 @@ import { PostgresTriggerService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../toast';
 import { emptyString } from '../../../utils';
-let loadingConfiguration = false;
+let loadingConfiguration = $state(false);
 const checkDatabaseConfiguration = async () => {
     if (emptyString(postgres_resource_path)) {
         sendUserToast('You must first pick a database resource', true);
@@ -40,9 +40,7 @@ const checkConnectionAndDatabaseConfiguration = async () => {
     }
     loadingConfiguration = false;
 };
-export let can_write;
-export let postgres_resource_path;
-export let checkConnection = undefined;
+let { can_write, postgres_resource_path, checkConnection = undefined } = $props();
 </script>
 
 {#if postgres_resource_path}

package/package/components/triggers/postgres/CheckPostgresRequirement.svelte.d.ts

@@ -1,22 +1,8 @@
-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 CheckPostgresRequirement: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     can_write: boolean;
     postgres_resource_path: string;
     checkConnection?: any | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CheckPostgresRequirement = InstanceType<typeof CheckPostgresRequirement>;
+}
+declare const CheckPostgresRequirement: import("svelte").Component<Props, {}, "">;
+type CheckPostgresRequirement = ReturnType<typeof CheckPostgresRequirement>;
 export default CheckPostgresRequirement;

package/package/components/triggers/postgres/PostgresTriggerEditorInner.svelte

@@ -28,6 +28,7 @@ import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte';
 import TestingBadge from '../testingBadge.svelte';
 import { getHandlerType, handleConfigChange } from '../utils';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import { fade } from 'svelte/transition';
 import MultiSelect from '../../select/MultiSelect.svelte';
 import { safeSelectItems } from '../../select/utils.svelte';
@@ -102,7 +103,7 @@ const isValid = $derived(!emptyString(postgres_resource_path) &&
         (isBasicTab(tab) && (!relations || relations.length > 0))) &&
     !errorMessage);
 const postgresConfig = $derived.by(getSaveCfg);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived(pathError !== '' ||
     emptyString(script_path) ||
     drawerLoading ||
@@ -555,8 +556,9 @@ $effect(() => {
 							disabled={!can_write}
 							bind:value={postgres_resource_path}
 							resourceType={'postgresql'}
+							datatableAsPgResource
 						/>
-						<CheckPostgresRequirement bind:postgres_resource_path bind:can_write />
+						<CheckPostgresRequirement {postgres_resource_path} {can_write} />
 					</div>
 					{#if loadingPostgres}
 						<div class="flex flex-col items-center justify-center h-full w-full">
@@ -683,7 +685,7 @@ $effect(() => {
 															</div>
 														{:else}
 															<SlotPicker
-																bind:edit
+																{edit}
 																{postgres_resource_path}
 																bind:replication_slot_name
 																disabled={!can_write}
@@ -768,7 +770,10 @@ $effect(() => {
 			</Section>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -788,6 +793,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/postgres/PublicationPicker.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { Button } from '../../common';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { Button } from '../../common';
 import Select from '../../select/Select.svelte';
 import { safeSelectItems } from '../../select/utils.svelte';
 import { PostgresTriggerService } from '../../../gen/services.gen';
@@ -6,16 +7,10 @@ import { workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../toast';
 import { emptyString } from '../../../utils';
 import { RefreshCw } from 'lucide-svelte';
-export let items = [];
-export let can_write = true;
-export let publication_name = '';
-export let postgres_resource_path = '';
-export let relations = undefined;
-export let transaction_to_track = [];
-export let disabled = false;
-let loadingPublication = false;
-let deletingPublication = false;
-let updatingPublication = false;
+let { items = $bindable([]), can_write = true, publication_name = $bindable(''), postgres_resource_path = '', relations = $bindable(undefined), transaction_to_track = $bindable([]), disabled = false } = $props();
+let loadingPublication = $state(false);
+let deletingPublication = $state(false);
+let updatingPublication = $state(false);
 async function listDatabasePublication() {
     try {
         loadingPublication = true;
@@ -92,7 +87,9 @@ async function getAllRelations() {
     }
 }
 listDatabasePublication();
-$: publication_name && getAllRelations();
+run(() => {
+    publication_name && getAllRelations();
+});
 </script>
 
 <div class="flex gap-1">

package/package/components/triggers/postgres/PublicationPicker.svelte.d.ts

@@ -1,18 +1,5 @@
 import type { Relations } from '../../../gen';
-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 PublicationPicker: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     items?: string[];
     can_write?: boolean;
     publication_name?: string;
@@ -20,8 +7,7 @@ declare const PublicationPicker: $$__sveltets_2_IsomorphicComponent<{
     relations?: Relations[] | undefined;
     transaction_to_track?: string[];
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PublicationPicker = InstanceType<typeof PublicationPicker>;
+}
+declare const PublicationPicker: import("svelte").Component<Props, {}, "transaction_to_track" | "relations" | "publication_name" | "items">;
+type PublicationPicker = ReturnType<typeof PublicationPicker>;
 export default PublicationPicker;

package/package/components/triggers/postgres/SlotPicker.svelte

@@ -6,13 +6,10 @@ import { workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../toast';
 import { emptyString } from '../../../utils';
 import { RefreshCw } from 'lucide-svelte';
-export let edit;
-export let replication_slot_name = '';
-export let postgres_resource_path = '';
-export let disabled = false;
-let deletingSlot = false;
-let loadingSlot = false;
-let items = [];
+let { edit, replication_slot_name = $bindable(''), postgres_resource_path = '', disabled = false } = $props();
+let deletingSlot = $state(false);
+let loadingSlot = $state(false);
+let items = $state([]);
 async function listDatabaseSlot() {
     try {
         loadingSlot = true;

package/package/components/triggers/postgres/SlotPicker.svelte.d.ts

@@ -1,23 +1,9 @@
-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 SlotPicker: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     edit: boolean;
     replication_slot_name?: string;
     postgres_resource_path?: string;
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SlotPicker = InstanceType<typeof SlotPicker>;
+}
+declare const SlotPicker: import("svelte").Component<Props, {}, "replication_slot_name">;
+type SlotPicker = ReturnType<typeof SlotPicker>;
 export default SlotPicker;

package/package/components/triggers/schedules/ScheduleEditorInner.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { Alert, Badge, Button, ButtonType, Tab, Tabs } from '../../common';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import CronInput from '../../CronInput.svelte';
@@ -858,8 +859,17 @@ $effect(() => {
 			</Section>
 
 			<Section label="Advanced" collapsable>
+				{#snippet header()}
+					<TriggerAdvancedBadges error_handler_path={errorHandlerPath} {retry} extraBadges={[
+						{ name: 'Recovery Handler', active: !!recoveryHandlerPath },
+						{ name: 'Success Handler', active: !!successHandlerPath },
+						{ name: 'Dynamic Skip', active: !!dynamicSkipPath },
+						{ name: 'Custom Tag', active: !!tag }
+					]} />
+				{/snippet}
 				{@render errorHandler()}
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/sqs/SqsTriggerEditorInner.svelte

@@ -18,6 +18,7 @@ import { getHandlerType, handleConfigChange } from '../utils';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import TriggerRetriesAndErrorHandler from '../TriggerRetriesAndErrorHandler.svelte';
+import TriggerAdvancedBadges from '../TriggerAdvancedBadges.svelte';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
 import TriggerSuspendedJobsModal from '../TriggerSuspendedJobsModal.svelte';
 import { deepEqual } from 'fast-equals';
@@ -375,7 +376,10 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="error_handler" label="Error Handler" />
@@ -395,6 +399,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/testingBadge.svelte

@@ -4,5 +4,7 @@ import { Tooltip } from '../meltComponents';
 
 <Tooltip>
 	<FlaskConical size={14} class="text-primary inline-block" />
-	<span slot="text">Config used for creating a testing endpoint</span>
+	{#snippet text()}
+		<span >Config used for creating a testing endpoint</span>
+	{/snippet}
 </Tooltip>

package/package/components/triggers/webhook/WebhooksConfigSection.svelte

@@ -10,7 +10,7 @@ import { Highlight } from 'svelte-highlight';
 import { typescript } from 'svelte-highlight/languages';
 import ClipboardPanel from '../../details/ClipboardPanel.svelte';
 import { copyToClipboard, isObject, readFieldsRecursively } from '../../../utils';
-// import { page } from '$app/stores'
+// import { page } from '$app/state'
 import { base } from '../../../base';
 import TriggerTokens from '../TriggerTokens.svelte';
 import { workspaceStore, userStore } from '../../../stores';