windmill-components 1.447.7 → 1.448.1

package/package/components/settings/PremiumInfo.svelte

@@ -1,14 +1,19 @@
 <script>import { base } from '../../base';
-import { capitalize, sendUserToast } from '../../utils';
+import { capitalize, pluralize, sendUserToast } from '../../utils';
 import DataTable from '../table/DataTable.svelte';
 import Cell from '../table/Cell.svelte';
 import { WorkspaceService, UserService } from '../../gen';
 import { workspaceStore } from '../../stores';
 import { Button } from '../common';
 import Tooltip from '../Tooltip.svelte';
-import { ExternalLink, Loader2 } from 'lucide-svelte';
+import { ExternalLink, Loader2, Pen, X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import Toggle from '../Toggle.svelte';
+import Section from '../Section.svelte';
+import Range from '../Range.svelte';
+import Label from '../Label.svelte';
+import Modal from '../common/modal/Modal.svelte';
+import { slide } from 'svelte/transition';
 export let plan;
 export let customer_id;
 let users = undefined;
@@ -37,6 +42,7 @@ $: {
     if ($workspaceStore) {
         loadPremiumInfo();
         listUsers();
+        getThresholdAlert();
     }
 }
 async function listUsers() {
@@ -47,16 +53,17 @@ async function loadPremiumInfo() {
     const developerNb = users?.filter((x) => !x.operator)?.length ?? 0;
     const operatorNb = users?.filter((x) => x.operator)?.length ?? 0;
     const seatsFromUsers = Math.ceil(developerNb + operatorNb / 2);
-    const seatsFromComps = Math.ceil((info.usage ?? 0) / 10000);
-    const usedSeats = Math.max(seatsFromUsers, seatsFromComps);
+    const seatsFromExtraComps = Math.max(Math.ceil((info.usage ?? 0) / 10000) - seatsFromUsers, 0);
+    const usedSeats = seatsFromUsers + seatsFromExtraComps;
     premiumInfo = {
         ...info,
         usage: info.usage ?? 0,
         seats: info.seats ?? 1,
+        owner: info.owner,
         developerNb,
         operatorNb,
         seatsFromUsers,
-        seatsFromComps,
+        seatsFromExtraComps,
         usedSeats
     };
 }
@@ -64,7 +71,6 @@ let billingModeLoading = false;
 async function setAutomaticBilling(ev) {
     try {
         billingModeLoading = true;
-        console.log('toggle check', ev.detail);
         await WorkspaceService.setAutomaticBilling({
             workspace: $workspaceStore,
             requestBody: {
@@ -81,15 +87,74 @@ async function setAutomaticBilling(ev) {
         billingModeLoading = false;
     }
 }
+let thresholdAlert = undefined;
+let newThresholdAlertAmount = undefined;
+let thresholdAlertOpen = false;
+async function getThresholdAlert() {
+    thresholdAlert = await WorkspaceService.getThresholdAlert({ workspace: $workspaceStore });
+}
+async function setThresholdAlert() {
+    if (thresholdAlert) {
+        await WorkspaceService.setThresholdAlert({
+            workspace: $workspaceStore,
+            requestBody: {
+                threshold_alert_amount: newThresholdAlertAmount
+            }
+        });
+        await getThresholdAlert();
+        sendUserToast('Threshold alert updated');
+    }
+}
+let estimatedDevs = 1;
+let estimatedOps = 0;
+$: estimatedSeats = estimatedDevs + Math.ceil(estimatedOps / 2);
+let estimatedExecs = 1;
+function updateExecs() {
+    if (estimatedExecs < estimatedSeats) {
+        estimatedExecs = estimatedSeats;
+    }
+}
+$: estimatedSeats && updateExecs();
 </script>
 
-<div class="flex flex-col gap-4 my-8">
+<Modal bind:open={thresholdAlertOpen} title="Threshold alert">
+	<div class="flex flex-col gap-4">
+		<label class="block">
+			<span class="text-secondary text-sm">Threshold amount in $</span>
+			<input type="number" bind:value={newThresholdAlertAmount} />
+		</label>
+	</div>
+
+	<svelte:fragment slot="actions">
+		<Button
+			size="sm"
+			on:click={() => {
+				setThresholdAlert()
+				thresholdAlertOpen = false
+			}}
+		>
+			Save
+		</Button>
+	</svelte:fragment>
+</Modal>
+
+<div class="flex flex-col gap-4 mt-8">
 	<div class="flex flex-col gap-1">
-		<div class=" text-primary text-lg font-semibold">Plans</div>
+		<div class=" text-primary text-lg font-semibold">
+			{#if premiumInfo?.premium && plan}
+				Plan: {capitalize(plan)} plan{plan === 'team' && premiumInfo.automatic_billing
+					? ' (usage-based)'
+					: plan === 'team'
+					? ` (${premiumInfo.seats} seat${premiumInfo.seats > 1 ? 's' : ''})`
+					: ''}
+			{:else}
+				Plan: Free plan
+			{/if}
+		</div>
 	</div>
 </div>
 {#if customer_id}
-	<div class="mt-2 mb-2">
+	<div class="mt-2">
 		<Button
 			endIcon={{ icon: ExternalLink }}
 			color="dark"
@@ -101,19 +166,12 @@ async function setAutomaticBilling(ev) {
 	</div>
 {/if}
 
-<div class="text-xs my-4">
+<div class="text-xs">
 	{#if premiumInfo?.premium}
-		<div class="flex flex-col gap-0.5">
+		<div class="flex flex-col gap-8 my-8">
 			{#if plan}
-				<div class="text-base inline font-bold leading-8 mb-2">
-					Current plan: {capitalize(plan)} plan{plan === 'team' && premiumInfo.automatic_billing
-						? ' (usage-based)'
-						: plan === 'team'
-						? ` (${premiumInfo.seats} seat${premiumInfo.seats > 1 ? 's' : ''})`
-						: ''}
-				</div>
-				{#if plan === 'team'}
-					<div class="flex flex-row items-center gap-2 mb-4">
+				{#if plan === 'team' && !premiumInfo?.automatic_billing}
+					<div class="flex flex-row items-center gap-2">
 						<Toggle
 							checked={premiumInfo?.automatic_billing}
 							options={{
@@ -137,6 +195,54 @@ async function setAutomaticBilling(ev) {
 			{/if}
 
 			{#if plan}
+				{#if premiumInfo?.automatic_billing}
+					<div class="flex flex-col gap-1.5">
+						<p class="font-semibold text-sm">Billing threshold email alert</p>
+						<div class="flex flex-row gap-0.5 items-center">
+							<p class="text-base text-secondary mr-0.5"
+								>{thresholdAlert?.threshold_alert_amount
+									? thresholdAlert?.threshold_alert_amount + '$'
+									: 'Not set'}</p
+							>
+							<Button
+								on:click={() => {
+									newThresholdAlertAmount = thresholdAlert?.threshold_alert_amount ?? 10
+									thresholdAlertOpen = true
+								}}
+								size="xs"
+								spacingSize="xs2"
+								variant="border"
+								color="light"
+								iconOnly
+								startIcon={{
+									icon: Pen
+								}}
+							/>
+							{#if thresholdAlert?.threshold_alert_amount}
+								<Button
+									on:click={() => {
+										if (thresholdAlert) {
+											newThresholdAlertAmount = undefined
+											setThresholdAlert()
+										}
+									}}
+									variant="border"
+									size="xs"
+									spacingSize="xs2"
+									color="light"
+									iconOnly
+									startIcon={{
+										icon: X
+									}}
+								/>
+							{/if}
+						</div>
+						<p class="italic text-xs"
+							>An email notification will be sent to {premiumInfo.owner} if the specified threshold amount
+							is reached during a given month.</p
+						>
+					</div>
+				{/if}
 				<div class="w-full">
 					<DataTable>
 						<tbody class="divide-y">
@@ -169,9 +275,7 @@ async function setAutomaticBilling(ev) {
 								</Cell>
 							</tr>
 							<tr>
-								<Cell first
-									><div class="font-semibold">Minimum number of seats needed for users</div></Cell
-								>
+								<Cell first><div class="font-semibold">Number of seats for users</div></Cell>
 								<Cell last numeric>
 									<div class="text-base font-bold">
 										u = ceil({premiumInfo.developerNb} + {premiumInfo.operatorNb}/2) = {premiumInfo.seatsFromUsers}
@@ -186,14 +290,22 @@ async function setAutomaticBilling(ev) {
 									</div>
 								</Cell>
 							</tr>
+							<tr>
+								<Cell first>Included computations with users (10k per user seat)</Cell>
+								<Cell last numeric>
+									<div class="text-base">
+										- {premiumInfo.seatsFromUsers * 10000}
+									</div>
+								</Cell>
+							</tr>
 							<tr>
 								<Cell first
-									><div class="font-semibold">Minimum number of seats needed for computations</div
-									></Cell
+									><div class="font-semibold">Number of seats for extra computations</div></Cell
 								>
 								<Cell last numeric>
 									<div class="text-base font-bold">
-										c = ceil({premiumInfo.usage} / 10 000) = {premiumInfo.seatsFromComps}
+										c = ceil({Math.max(0, premiumInfo.usage - premiumInfo.seatsFromUsers * 10000)} /
+										10 000) = {premiumInfo.seatsFromExtraComps}
 									</div>
 								</Cell>
 							</tr>
@@ -228,8 +340,7 @@ async function setAutomaticBilling(ev) {
 												: ''
 										)}
 									>
-										max(u, c) = max({premiumInfo.seatsFromUsers}, {premiumInfo.seatsFromComps}) = {premiumInfo.usedSeats}{plan ===
-											'team' &&
+										u + c = {premiumInfo.usedSeats}{plan === 'team' &&
 										premiumInfo.usedSeats > premiumInfo.seats &&
 										!premiumInfo.automatic_billing
 											? ` > ${premiumInfo.seats}`
@@ -250,11 +361,82 @@ async function setAutomaticBilling(ev) {
 			{/if}
 		</div>
 	{:else}
-		This workspace is <b>not</b> on a team plan. Users use their global free-tier quotas when doing executions
-		in this workspace. Upgrade to a Team or Enterprise plan to unlock unlimited executions in this workspace.
+		<div class="mb-8 mt-2">
+			This workspace is <b>not</b> on a team plan. Users use their global free-tier quotas when doing
+			executions in this workspace. Upgrade to a Team or Enterprise plan to unlock unlimited executions
+			in this workspace.
+		</div>
 	{/if}
 </div>
 
+<Section collapsable label="Cost estimator">
+	<div class="border p-4 rounded-md" transition:slide>
+		<Label label="Number of developers">
+			<Range min={1} max={20} bind:value={estimatedDevs} hideInput />
+		</Label>
+		<Label label="Number of operators">
+			<Range min={0} max={20} bind:value={estimatedOps} hideInput />
+		</Label>
+		<Label label="Number of executions">
+			<Range
+				min={estimatedSeats}
+				max={100}
+				bind:value={estimatedExecs}
+				format={(v) => `${v * 10}k`}
+				hideInput
+			/>
+		</Label>
+		<div class="mt-4 text-base">
+			<div class="flex flex-row justify-between">
+				<div>Seats for users = {estimatedDevs} devs + {estimatedOps} ops / 2</div>
+				<div>{pluralize(estimatedSeats, 'seat')}</div>
+			</div>
+			<div class="flex flex-row justify-between">
+				<div
+					>Extra computations = {estimatedExecs * 10}k execs - {estimatedSeats * 10}k included with
+					users</div
+				>
+				<div
+					>{(estimatedExecs - estimatedSeats) * 10}k extra execs = {pluralize(
+						estimatedExecs - estimatedSeats,
+						'seat'
+					)}</div
+				>
+			</div>
+			<div class="flex flex-row justify-between font-medium items-center">
+				<div>Total</div>
+				<div class="flex flex-col items-end">
+					<div>
+						{pluralize(estimatedSeats + (estimatedExecs - estimatedSeats), 'seat')} = {(estimatedSeats +
+							(estimatedExecs - estimatedSeats)) *
+							10}$ / month
+					</div>
+					{#if premiumInfo?.premium && plan === 'team'}
+						<button
+							class="text-xs text-blue-500 underline"
+							on:click={() => {
+								newThresholdAlertAmount = (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10
+								thresholdAlertOpen = true
+							}}
+						>
+							Setup threshold email alert
+						</button>
+					{/if}
+				</div>
+			</div>
+			{#if (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10 > 700}
+				<a
+					class="mt-4 text-teal-600 font-semibold text-center block underline"
+					href="https://www.windmill.dev/pricing"
+					target="_blank"
+				>
+					You should consider subscribing to Cloud Enterprise
+				</a>
+			{/if}
+		</div>
+	</div>
+</Section>
+
 <div class="text-base font-bold leading-8 mb-2 pt-8"> All plans </div>
 
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

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

@@ -19,7 +19,7 @@ declare const __propDef: {
     };
     events: {
         applyArgs: CustomEvent<{
-            kind: "main" | "preprocessor";
+            kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;
         }>;
         addPreprocessor: CustomEvent<null>;

package/package/components/triggers/CaptureTable.svelte

@@ -100,6 +100,8 @@ async function getPropPickerElements() {
 function handleKeydown(event) {
     if (event.key === 'Escape' && selected) {
         deselect();
+        event.stopPropagation();
+        event.preventDefault();
     }
 }
 function handleError(error) {
@@ -115,7 +117,7 @@ $: path && infiniteList && initLoadCaptures();
 
 <svelte:window on:keydown={handleKeydown} />
 
-<Label label="Trigger captures" {headless} class="h-full flex flex-col gap-1">
+<Label label="Trigger captures" {headless} class="h-full {headless ? '' : 'flex flex-col gap-1'}">
 	<svelte:fragment slot="header">
 		{#if addButton}
 			<div class="inline-block">
@@ -146,7 +148,13 @@ $: path && infiniteList && initLoadCaptures();
 	</svelte:fragment>
 
 	<div
-		class={fullHeight ? 'h-full' : capturesLength > 7 ? 'h-[300px]' : 'h-fit'}
+		class={fullHeight
+			? headless
+				? 'h-full'
+				: 'min-h-0 grow'
+			: capturesLength > 7
+			? 'h-[300px]'
+			: 'h-fit'}
 		use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
 		on:click_outside={() => {
 			if (firstClick) {

package/package/components/triggers/CaptureWrapper.svelte

@@ -166,7 +166,7 @@ $: args && (captureActive = false);
 				{path}
 				hash={data?.hash}
 				token={data?.token}
-				{args}
+				runnableArgs={data?.args}
 				scopes={data?.scopes}
 				{showCapture}
 				{captureInfo}
@@ -185,6 +185,7 @@ $: args && (captureActive = false);
 				{path}
 				{showCapture}
 				can_write={true}
+				runnableArgs={data?.args}
 				bind:args
 				headless
 				{captureInfo}

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

@@ -16,7 +16,7 @@ declare const __propDef: {
     events: {
         captureToggle: CustomEvent<undefined>;
         applyArgs: CustomEvent<{
-            kind: "main" | "preprocessor";
+            kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;
         }>;
         updateSchema: CustomEvent<{

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

@@ -16,7 +16,7 @@ declare const __propDef: {
     events: {
         captureToggle: CustomEvent<undefined>;
         applyArgs: CustomEvent<{
-            kind: "main" | "preprocessor";
+            kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;
         }>;
         updateSchema: CustomEvent<{

package/package/components/triggers/RouteEditorConfigSection.svelte

@@ -28,6 +28,7 @@ export let headless = false;
 export let captureInfo = undefined;
 export let captureTable = undefined;
 export let isValid = false;
+export let runnableArgs = {};
 let validateTimeout = undefined;
 let routeError = '';
 async function validateRoute(path, method) {
@@ -91,9 +92,9 @@ $: updateArgs(route_path, http_method);
 				<CopyableCodeBlock
 					disabled={!captureInfo.active}
 					code={`curl \\
--X POST ${captureURL} \\
+-X ${http_method.toUpperCase()} ${captureURL} \\
 -H 'Content-Type: application/json' \\
--d '{"foo": 42}'`}
+-d '${JSON.stringify(runnableArgs ?? {}, null, 2)}'`}
 					language={bash}
 				/>
 			</Label>

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

@@ -21,11 +21,12 @@ declare const __propDef: {
         captureInfo?: CaptureInfo | undefined;
         captureTable?: CaptureTable | undefined;
         isValid?: boolean | undefined;
+        runnableArgs?: any;
     };
     events: {
         captureToggle: CustomEvent<undefined>;
         applyArgs: CustomEvent<{
-            kind: "main" | "preprocessor";
+            kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;
         }>;
         updateSchema: CustomEvent<{

package/package/components/triggers/RoutesPanel.svelte

@@ -14,6 +14,7 @@ export let newItem = false;
 export let isEditor = false;
 export let canHavePreprocessor = false;
 export let hasPreprocessor = false;
+export let args = {};
 let routeEditor;
 $: path && loadTriggers();
 const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
@@ -71,6 +72,7 @@ export async function loadTriggers() {
 		{canHavePreprocessor}
 		{hasPreprocessor}
 		{newItem}
+		data={{ args }}
 	/>
 	{#if !newItem}
 		<Section label="Routes">

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         isEditor?: boolean | undefined;
         canHavePreprocessor?: boolean | undefined;
         hasPreprocessor?: boolean | undefined;
+        args?: Record<string, any> | undefined;
         loadTriggers?: (() => Promise<void>) | undefined;
     };
     events: {

package/package/components/triggers/TriggersEditor.svelte

@@ -24,6 +24,7 @@ export let schema;
 export let isFlow;
 export let canHavePreprocessor = false;
 export let hasPreprocessor = false;
+export let args = {};
 let eventStreamType = 'kafka';
 $: {
     if ($selectedTrigger === 'kafka' || $selectedTrigger === 'nats') {
@@ -72,7 +73,7 @@ onDestroy(() => {
 									path={currentPath}
 									{hash}
 									{isFlow}
-									args={{}}
+									{args}
 									token=""
 									{newItem}
 									isEditor={true}
@@ -105,6 +106,7 @@ onDestroy(() => {
 									on:updateSchema
 									on:testWithArgs
 									{newItem}
+									{args}
 									path={currentPath}
 									{isFlow}
 									isEditor={true}

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         isFlow: boolean;
         canHavePreprocessor?: boolean | undefined;
         hasPreprocessor?: boolean | undefined;
+        args?: Record<string, any> | undefined;
     };
     events: {
         applyArgs: any;

package/package/components/triggers/TriggersEditorSection.svelte

@@ -69,7 +69,6 @@ function updateShowCapture(show) {
 						{disabled}
 						startIcon={{ icon: Save }}
 						on:click={() => {
-							console.log('saveTrigger', args)
 							dispatch('saveTrigger', {
 								config: args
 							})

package/package/components/triggers/TriggersWrapper.svelte

@@ -34,7 +34,7 @@ export let data = {};
 			{path}
 			hash={data?.hash}
 			token={data?.token}
-			{args}
+			runnableArgs={data?.args}
 			scopes={data?.scopes}
 			showCapture={false}
 		/>

package/package/components/triggers/WebhooksConfigSection.svelte

@@ -23,7 +23,7 @@ export let isFlow = false;
 export let path = '';
 export let hash = undefined;
 export let token = '';
-export let args;
+export let runnableArgs;
 export let triggerTokens = undefined;
 export let scopes = [];
 export let showCapture = false;
@@ -90,7 +90,7 @@ export async function main() {
 async function triggerJob() {
   ${requestType === 'get_path'
             ? '// Payload is a base64 encoded string of the arguments'
-            : `const body = JSON.stringify(${JSON.stringify(args, null, 2).replaceAll('\n', '\n\t')});`}
+            : `const body = JSON.stringify(${JSON.stringify(runnableArgs ?? {}, null, 2).replaceAll('\n', '\n\t')});`}
   const endpoint = \`${url}\`;
 
   return await fetch(endpoint, {
@@ -110,7 +110,7 @@ export async function main() {
     // triggerJob function
     let triggerJobFunction = `
 async function triggerJob() {
-  const body = JSON.stringify(${JSON.stringify(args, null, 2).replaceAll('\n', '\n\t')});
+  const body = JSON.stringify(${JSON.stringify(runnableArgs ?? {}, null, 2).replaceAll('\n', '\n\t')});
   const endpoint = \`${url}\`;
 
   return await fetch(endpoint, {
@@ -158,7 +158,7 @@ function captureCurlCode() {
 }
 function curlCode() {
     return `TOKEN='${token}'
-${requestType !== 'get_path' ? `BODY='${JSON.stringify(args)}'` : ''}
+${requestType !== 'get_path' ? `BODY='${JSON.stringify(runnableArgs ?? {})}'` : ''}
 URL='${url}'
 ${webhookType === 'sync' ? 'RESULT' : 'UUID'}=$(curl -s ${requestType != 'get_path' ? "-H 'Content-Type: application/json'" : ''} ${tokenType === 'headers' ? `-H "Authorization: Bearer $TOKEN"` : ''} -X ${requestType === 'get_path' ? 'GET' : 'POST'} ${requestType !== 'get_path' ? `-d "$BODY" ` : ''}$URL)
 
@@ -181,10 +181,10 @@ $: url =
     webhooks[webhookType][requestType] +
         (tokenType === 'query'
             ? `?token=${token}${requestType === 'get_path'
-                ? `&payload=${encodeURIComponent(btoa(JSON.stringify(args)))}`
+                ? `&payload=${encodeURIComponent(btoa(JSON.stringify(runnableArgs ?? {})))}`
                 : ''}`
             : `${requestType === 'get_path'
-                ? `?payload=${encodeURIComponent(btoa(JSON.stringify(args)))}`
+                ? `?payload=${encodeURIComponent(btoa(JSON.stringify(runnableArgs ?? {})))}`
                 : ''}`);
 </script>
 
@@ -321,7 +321,7 @@ $: url =
 
 								{#if requestType !== 'get_path'}
 									<Label label="Body">
-										<ClipboardPanel content={JSON.stringify(args, null, 2)} />
+										<ClipboardPanel content={JSON.stringify(runnableArgs ?? {}, null, 2)} />
 									</Label>
 								{/if}
 								{#key requestType}
@@ -335,7 +335,7 @@ $: url =
 						</TabContent>
 						<TabContent value="curl" class="flex flex-col flex-1 h-full">
 							<div class="relative">
-								{#key args}
+								{#key runnableArgs}
 									{#key requestType}
 										{#key webhookType}
 											{#key tokenType}
@@ -356,7 +356,7 @@ $: url =
 							</div>
 						</TabContent>
 						<TabContent value="fetch">
-							{#key args}
+							{#key runnableArgs}
 								{#key requestType}
 									{#key webhookType}
 										{#key tokenType}

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         path?: string | undefined;
         hash?: string | undefined;
         token?: string | undefined;
-        args: any;
+        runnableArgs: any;
         triggerTokens?: TriggerTokens | undefined;
         scopes?: string[] | undefined;
         showCapture?: boolean | undefined;
@@ -18,7 +18,7 @@ declare const __propDef: {
     events: {
         captureToggle: CustomEvent<undefined>;
         applyArgs: CustomEvent<{
-            kind: "main" | "preprocessor";
+            kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;
         }>;
         updateSchema: CustomEvent<{

package/package/components/triggers/WebhooksPanel.svelte

@@ -3,7 +3,7 @@ import Description from '../Description.svelte';
 import HighlightTheme from '../HighlightTheme.svelte';
 import TriggersEditorSection from './TriggersEditorSection.svelte';
 export let token;
-export let args;
+export let args = {};
 export let scopes = [];
 export let isFlow = false;
 export let hash = undefined;
@@ -12,7 +12,7 @@ export let newItem = false;
 export let isEditor = false;
 export let canHavePreprocessor = false;
 export let hasPreprocessor = false;
-let data = {
+$: data = {
     hash,
     token,
     scopes,

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         token: string;
-        args: any;
+        args?: Record<string, any> | undefined;
         scopes?: string[] | undefined;
         isFlow?: boolean | undefined;
         hash?: string | undefined;

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

@@ -16,7 +16,7 @@ declare const __propDef: {
     events: {
         captureToggle: CustomEvent<undefined>;
         applyArgs: CustomEvent<{
-            kind: "main" | "preprocessor";
+            kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;
         }>;
         updateSchema: CustomEvent<{