windmill-components 1.642.0 → 1.655.0

package/package/components/splitPanes/SplitPanesWrapper.svelte

@@ -1,30 +1,26 @@
-<script lang="ts">import { afterUpdate } from 'svelte';
-/**
- * This component should be used instead of `Splitpanes` if the wrapper `Splitpanes`
- * has elements that are **NOT** `Pane` above the place of this component.
- */
-/** This element will act as the reference point to the `Splitpanes`
- * and the top difference will be calculated from it. */
-export let refElement = undefined;
-let wrapper;
-let gap = 0;
+<script lang="ts">import { tick } from 'svelte';
+let { refElement = undefined, class: className = '', children } = $props();
+let wrapper = $state();
+let gap = $state(0);
 function getTopDifference() {
-    const parent = refElement || wrapper.parentElement;
+    const parent = refElement || wrapper?.parentElement;
     if (!(wrapper && parent))
         return 0;
     const wrapperTop = wrapper.getBoundingClientRect().top;
     const parentTop = parent.getBoundingClientRect().top;
     return wrapperTop - parentTop;
 }
-afterUpdate(() => {
-    gap = getTopDifference();
+$effect(() => {
+    // Re-run when refElement changes
+    refElement;
+    tick().then(() => (gap = getTopDifference()));
 });
 </script>
 
 <div
 	bind:this={wrapper}
-	class="h-full {$$props.class || ''}"
+	class="h-full {className}"
 	style="max-height: calc(100% - {gap}px) !important;"
 >
-	<slot />
+	{@render children?.()}
 </div>

package/package/components/splitPanes/SplitPanesWrapper.svelte.d.ts

@@ -1,30 +1,14 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SplitPanesWrapper: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+/**
+ * This component should be used instead of `Splitpanes` if the wrapper `Splitpanes`
+ * has elements that are **NOT** `Pane` above the place of this component.
+ */
+interface Props {
+    /** This element will act as the reference point to the `Splitpanes`
+     * and the top difference will be calculated from it. */
     refElement?: HTMLElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type SplitPanesWrapper = InstanceType<typeof SplitPanesWrapper>;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const SplitPanesWrapper: import("svelte").Component<Props, {}, "">;
+type SplitPanesWrapper = ReturnType<typeof SplitPanesWrapper>;
 export default SplitPanesWrapper;

package/package/components/sqlTypeService.d.ts

@@ -5,7 +5,7 @@
  * custom TypeScript worker that injects SQL type annotations.
  */
 import type { InferAssetsSqlQueryDetails } from '../infer';
-export declare function waitForWorkerInitialization(fileUri: string): Promise<true>;
+export declare function waitForWorkerInitialization(modelUri: string): Promise<true>;
 /**
  * Update SQL query type information in the TypeScript worker
  *
@@ -16,4 +16,4 @@ export declare function waitForWorkerInitialization(fileUri: string): Promise<tr
  * @param queries - Array of SQL query details from the WASM parser
  * @returns Promise that resolves when the update is complete
  */
-export declare function updateSqlQueriesInWorker(fileUri: string, queries: InferAssetsSqlQueryDetails[]): Promise<void>;
+export declare function updateSqlQueriesInWorker(modelUri: string, queries: InferAssetsSqlQueryDetails[]): Promise<void>;

package/package/components/sqlTypeService.js

@@ -25,13 +25,11 @@ async function getWorkerClient() {
         throw error;
     }
 }
-export async function waitForWorkerInitialization(fileUri) {
+export async function waitForWorkerInitialization(modelUri) {
     const WORKER_INIT_TIMEOUT = 10000;
     const MAX_RETRIES = 10;
     const RETRY_DELAY = 300;
-    if (!fileUri.endsWith('.ts'))
-        fileUri += '.ts';
-    const uri = Uri.parse(fileUri);
+    const uri = Uri.parse(modelUri);
     const startTime = Date.now();
     for (let retries = 0; retries < MAX_RETRIES; retries++) {
         try {
@@ -61,11 +59,9 @@ export async function waitForWorkerInitialization(fileUri) {
  * @param queries - Array of SQL query details from the WASM parser
  * @returns Promise that resolves when the update is complete
  */
-export async function updateSqlQueriesInWorker(fileUri, queries) {
+export async function updateSqlQueriesInWorker(modelUri, queries) {
     try {
-        if (!fileUri.endsWith('.ts'))
-            fileUri += '.ts';
-        const uri = Uri.parse(fileUri);
+        const uri = Uri.parse(modelUri);
         const uriString = uri.toString();
         const workerClient = await getWorkerClient();
         const worker = await workerClient(uri);

package/package/components/table/Cell.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 let { first = false, last = false, numeric = false, head = false, shouldStopPropagation = false, selected = false, sticky = false, wrap = false, children, ...rest } = $props();
-let Tag = head ? 'th' : 'td';
+let Tag = untrack(() => head) ? 'th' : 'td';
 const { size } = getContext('datatable');
 </script>
 

package/package/components/table/DataTable.svelte

@@ -12,7 +12,7 @@ const dispatch = createEventDispatcher();
 let tableContainer = $state();
 let { paginated = false, currentPage = $bindable(1), showNext = true, showPrev = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, containerClass = '', children, emptyMessage, preventXOverflow = false } = $props();
 setContext('datatable', {
-    size
+    size: untrack(() => size)
 });
 $effect(() => {
     contentHeight = tableHeight - footerHeight;

package/package/components/table/DownloadCsv.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import { Download } from 'lucide-svelte';
 import { Button } from '../common';
 import { sendUserToast } from '../../toast';
-export let getContent;
-export let customText = undefined;
+let { getContent, customText = undefined } = $props();
 </script>
 
 <Button

package/package/components/table/DownloadCsv.svelte.d.ts

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

package/package/components/table/Head.svelte

@@ -1,6 +1,10 @@
+<script lang="ts">"use strict";
+let { children, headerAction } = $props();
+</script>
+
 <thead class="bg-surface-secondary sticky top-0 z-10 border-b">
-	<slot />
+	{@render children?.()}
 	<tr class="absolute top-2 right-2">
-		<slot name="headerAction" />
+		{@render headerAction?.()}
 	</tr>
 </thead>

package/package/components/table/Head.svelte.d.ts

@@ -1,28 +1,7 @@
-export default Head;
-type Head = SvelteComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    headerAction: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Head: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    headerAction: {};
-}, {}, string>;
-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;
+interface Props {
+    children?: import('svelte').Snippet;
+    headerAction?: import('svelte').Snippet;
 }
+declare const Head: import("svelte").Component<Props, {}, "">;
+type Head = ReturnType<typeof Head>;
+export default Head;

package/package/components/table/Row.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-export let hoverable = false;
-export let selected = false;
-export let dividable = false;
-export let disabled = false;
-export let hovering = false;
 const dispatch = createEventDispatcher();
+let { hoverable = false, selected = false, dividable = false, disabled = false, hovering = $bindable(false), class: className = '', children } = $props();
 </script>
 
 <tr
@@ -15,19 +11,19 @@ const dispatch = createEventDispatcher();
 		'transition-all',
 		dividable ? 'divide-x' : '',
 		disabled ? 'opacity-60' : '',
-		$$props.class
+		className
 	)}
-	on:click={() => {
+	onclick={() => {
 		dispatch('click')
 	}}
-	on:mouseenter={() => {
+	onmouseenter={() => {
 		hovering = true
 		dispatch('hover', true)
 	}}
-	on:mouseleave={() => {
+	onmouseleave={() => {
 		hovering = false
 		dispatch('hover', false)
 	}}
 >
-	<slot />
+	{@render children?.()}
 </tr>

package/package/components/table/Row.svelte.d.ts

@@ -1,3 +1,12 @@
+interface Props {
+    hoverable?: boolean;
+    selected?: boolean;
+    dividable?: boolean;
+    disabled?: boolean;
+    hovering?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
 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;
@@ -11,27 +20,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Row: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    hoverable?: boolean | undefined;
-    selected?: boolean | undefined;
-    dividable?: boolean | undefined;
-    disabled?: boolean | undefined;
-    hovering?: boolean | undefined;
-}, {
-    default: {};
-}>, {
+declare const Row: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
     hover: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
+}, {}, {}, "hovering">;
 type Row = InstanceType<typeof Row>;
 export default Row;

package/package/components/triggers/CaptureIcon.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">import { ScanIcon } from 'lucide-svelte';
-export let size = 14;
-export let variant = undefined;
+let { size = 14, variant = undefined } = $props();
 </script>
 
 <div class="relative">

package/package/components/triggers/CaptureIcon.svelte.d.ts

@@ -1,21 +1,7 @@
-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 CaptureIcon: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     size?: number;
-    variant?: "redDot" | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CaptureIcon = InstanceType<typeof CaptureIcon>;
+    variant?: 'redDot' | undefined;
+}
+declare const CaptureIcon: import("svelte").Component<Props, {}, "">;
+type CaptureIcon = ReturnType<typeof CaptureIcon>;
 export default CaptureIcon;

package/package/components/triggers/TestTriggerConnection.svelte

@@ -2,10 +2,7 @@
 import { workspaceStore } from '../../stores';
 import { sendUserToast } from '../../toast';
 import Button from '../common/button/Button.svelte';
-export let kind;
-export let args;
-export let noButton = false;
-export let testLoading = false;
+let { kind, args, noButton = false, testLoading = $bindable(false) } = $props();
 const kindToName = {
     websocket: 'WebSocket',
     nats: 'NATS server(s)',

package/package/components/triggers/TestTriggerConnection.svelte.d.ts

@@ -1,26 +1,11 @@
-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 TestTriggerConnection: $$__sveltets_2_IsomorphicComponent<{
-    kind: "websocket" | "nats" | "kafka" | "postgres" | "sqs" | "mqtt" | "gcp";
+interface Props {
+    kind: 'websocket' | 'nats' | 'kafka' | 'postgres' | 'sqs' | 'mqtt' | 'gcp';
     args: Record<string, any>;
     noButton?: boolean;
     testLoading?: boolean;
-    testTriggerConnection?: () => Promise<void>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+}
+declare const TestTriggerConnection: import("svelte").Component<Props, {
     testTriggerConnection: () => Promise<void>;
-}, string>;
-type TestTriggerConnection = InstanceType<typeof TestTriggerConnection>;
+}, "testLoading">;
+type TestTriggerConnection = ReturnType<typeof TestTriggerConnection>;
 export default TestTriggerConnection;

package/package/components/triggers/TriggerAdvancedBadges.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import Badge from '../Badge.svelte';
+let { error_handler_path = undefined, retry = undefined, extraBadges = [] } = $props();
+let allBadges = $derived([
+    { name: 'Error Handler', active: !!error_handler_path },
+    { name: 'Retries', active: !!retry },
+    ...extraBadges
+].filter((b) => b.active));
+</script>
+
+{#if allBadges.length > 0}
+	<div class="flex grow min-w-0 w-full flex-wrap gap-1 ps-2">
+		{#each allBadges as badge}
+			<Badge twBgColor="bg-surface-sunken" twTextColor="text-primary">{badge.name}</Badge>
+		{/each}
+	</div>
+{/if}

package/package/components/triggers/TriggerAdvancedBadges.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Retry } from '../../gen';
+interface Props {
+    error_handler_path?: string | undefined;
+    retry?: Retry | undefined;
+    extraBadges?: {
+        name: string;
+        active: boolean;
+    }[];
+}
+declare const TriggerAdvancedBadges: import("svelte").Component<Props, {}, "">;
+type TriggerAdvancedBadges = ReturnType<typeof TriggerAdvancedBadges>;
+export default TriggerAdvancedBadges;

package/package/components/triggers/TriggerEditorToolbar.svelte

@@ -76,15 +76,17 @@ const canSave = $derived((permissions === 'write' && edit) || permissions === 'c
 				>
 					{trigger?.isDraft ? 'Deploy' : 'Update'}
 				</Button>
-				<span slot="text">
-					{#if !isDeployed}
-						Deploy the runnable to enable trigger creation
-					{:else if cloudDisabled}
-						This trigger is disabled in the multi-tenant cloud
-					{:else}
-						Enter a valid config to {trigger?.isDraft ? 'deploy' : 'update'} the trigger
-					{/if}
-				</span>
+				{#snippet text()}
+								<span >
+						{#if !isDeployed}
+							Deploy the runnable to enable trigger creation
+						{:else if cloudDisabled}
+							This trigger is disabled in the multi-tenant cloud
+						{:else}
+							Enter a valid config to {trigger?.isDraft ? 'deploy' : 'update'} the trigger
+						{/if}
+					</span>
+							{/snippet}
 			</Tooltip>
 		{/if}
 	</div>

package/package/components/triggers/TriggerTokens.svelte

@@ -1,14 +1,13 @@
-<script lang="ts">import { FlowService, ScriptService, UserService } from '../../gen';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { FlowService, ScriptService, UserService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
 import { getContext } from 'svelte';
 import { Skeleton } from '../common';
 import Label from '../Label.svelte';
 import { capitalize } from '../../utils';
-export let isFlow;
-export let path;
-export let labelPrefix;
+let { isFlow, path, labelPrefix } = $props();
 const { triggersCount } = getContext('TriggerContext');
-let tokens = undefined;
+let tokens = $state(undefined);
 export async function listTokens() {
     tokens = (isFlow
         ? await FlowService.listTokensOfFlow({ workspace: $workspaceStore, path })
@@ -26,7 +25,9 @@ async function deleteToken(tokenPrefix) {
     });
     await listTokens();
 }
-$: $workspaceStore && listTokens();
+run(() => {
+    $workspaceStore && listTokens();
+});
 </script>
 
 <div class="flex flex-col gap-2">
@@ -53,7 +54,7 @@ $: $workspaceStore && listTokens();
 							</div>
 							{#if token.email == $userStore?.email}
 								<button
-									on:click={() => deleteToken(token.token_prefix)}
+									onclick={() => deleteToken(token.token_prefix)}
 									class="text-xs text-secondary">delete</button
 								>
 							{:else}

package/package/components/triggers/TriggerTokens.svelte.d.ts

@@ -1,25 +1,10 @@
-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 TriggerTokens: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     isFlow: boolean;
     path: string;
-    labelPrefix: "email" | "webhook";
-    listTokens?: () => Promise<void>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+    labelPrefix: 'email' | 'webhook';
+}
+declare const TriggerTokens: import("svelte").Component<Props, {
     listTokens: () => Promise<void>;
-}, string>;
-type TriggerTokens = InstanceType<typeof TriggerTokens>;
+}, "">;
+type TriggerTokens = ReturnType<typeof TriggerTokens>;
 export default TriggerTokens;

package/package/components/triggers/email/EmailTriggerEditorConfigSection.svelte

@@ -2,7 +2,7 @@
 import Required from '../../Required.svelte';
 import Section from '../../Section.svelte';
 import { userStore, workspaceStore } from '../../../stores';
-// import { page } from '$app/stores'
+// import { page } from '$app/state'
 import { getEmailAddress, getEmailDomain } from './utils';
 import { isCloudHosted } from '../../../cloud';
 import Toggle from '../../Toggle.svelte';

package/package/components/triggers/email/EmailTriggerEditorInner.svelte

@@ -17,6 +17,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 { saveEmailTriggerFromCfg } from './utils';
 import { deepEqual } from 'fast-equals';
 import TriggerSuspendedJobsAlert from '../TriggerSuspendedJobsAlert.svelte';
@@ -56,7 +57,7 @@ let originalConfig = $state(undefined);
 let hasChanged = $derived(!deepEqual(getEmailTriggerConfig(), originalConfig ?? {}));
 const isAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin);
 const emailConfig = $derived.by(getEmailTriggerConfig);
-const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}));
 const saveDisabled = $derived(drawerLoading ||
     !can_write ||
     pathError != '' ||
@@ -316,7 +317,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" />
@@ -336,6 +340,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/gcp/GcpTriggerEditorInner.svelte

@@ -22,6 +22,7 @@ import { base } from '../../../base';
 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 Subsection from '../../Subsection.svelte';
 import Toggle from '../../Toggle.svelte';
 let drawer = $state(undefined);
@@ -60,7 +61,7 @@ let { useDrawer = true, description = undefined, hideTarget = false, hideTooltip
 let hasChanged = $derived(!deepEqual(getGcpConfig(), originalConfig ?? {}));
 const gcpConfig = $derived.by(getGcpConfig);
 const saveDisabled = $derived(pathError != '' || emptyString(script_path) || !isValid || !can_write || !hasChanged);
-const captureConfig = $derived.by(isEditor ? getGcpCaptureConfig : () => ({}));
+const captureConfig = $derived.by(untrack(() => isEditor) ? getGcpCaptureConfig : () => ({}));
 export async function openEdit(ePath, isFlow, defaultValues) {
     drawerLoading = true;
     try {
@@ -387,7 +388,12 @@ $effect(() => {
 			/>
 
 			<Section label="Advanced" collapsable>
-				<div class="flex flex-col gap-4">
+				{#snippet header()}
+					<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
+						{ name: 'Manual Ack', active: !auto_acknowledge_msg }
+					]} />
+				{/snippet}
+				<div class="flex flex-col gap-6">
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>
 							<Tab value="settings" label="Settings" />
@@ -455,6 +461,7 @@ $effect(() => {
 					</div>
 				</div>
 			</Section>
+			<div class="pb-8" />
 		</div>
 	{/if}
 {/snippet}

package/package/components/triggers/http/RouteCapture.svelte

@@ -2,7 +2,7 @@
 import Label from '../../Label.svelte';
 import CopyableCodeBlock from '../../details/CopyableCodeBlock.svelte';
 import { bash } from 'svelte-highlight/languages';
-// import { page } from '$app/stores'
+// import { page } from '$app/state'
 import { base } from '../../../base';
 import CaptureSection from '../CaptureSection.svelte';
 import { isObject } from '../../../utils';

package/package/components/triggers/http/RouteEditorConfigSection.svelte

@@ -5,7 +5,7 @@ import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { userStore, workspaceStore } from '../../../stores';
 import { HttpTriggerService } from '../../../gen';
-// import { page } from '$app/stores'
+// import { page } from '$app/state'
 import { getHttpRoute } from './utils';
 import { isCloudHosted } from '../../../cloud';
 import Toggle from '../../Toggle.svelte';