From c5b96d7118a3de8b7440175b81bca8a1638fa2ac Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 3 Dec 2024 19:33:23 +0000
Subject: [PATCH 01/42] Move Capture WIP

---
 frontend/src/lib/components/Section.svelte    |  73 +--
 .../components/triggers/CaptureWrapper.svelte | 554 ++++++++++++++++++
 .../triggers/RouteEditorConfigSection.svelte  | 166 ++++++
 .../triggers/RouteEditorInner.svelte          | 123 +---
 .../components/triggers/RoutesPanel.svelte    | 102 ++--
 .../triggers/TriggersEditorSection.svelte     | 105 ++++
 frontend/tsconfig.json                        |   2 +-
 7 files changed, 930 insertions(+), 195 deletions(-)
 create mode 100644 frontend/src/lib/components/triggers/CaptureWrapper.svelte
 create mode 100644 frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
 create mode 100644 frontend/src/lib/components/triggers/TriggersEditorSection.svelte

diff --git a/frontend/src/lib/components/Section.svelte b/frontend/src/lib/components/Section.svelte
index 43868d170e27b..1889fc708a8b1 100644
--- a/frontend/src/lib/components/Section.svelte
+++ b/frontend/src/lib/components/Section.svelte
@@ -10,48 +10,51 @@
 	export let small: boolean = false
 
 	export let collapsable: boolean = false
-	let collapsed: boolean = true
+	export let collapsed: boolean = true
+	export let headless: boolean = false
 </script>
 
 <div class="w-full">
-	<div class="flex flex-row justify-between items-center mb-2">
-		<h2
-			class={twMerge(
-				'font-semibold flex flex-row items-center gap-1',
-				small ? 'text-sm' : 'text-base'
-			)}
-		>
-			{#if collapsable}
-				<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
-					{#if collapsed}
-						<ChevronRight size={16} />
-					{:else}
-						<ChevronDown size={16} />
-					{/if}
+	{#if !headless}
+		<div class="flex flex-row justify-between items-center mb-2">
+			<h2
+				class={twMerge(
+					'font-semibold flex flex-row items-center gap-1',
+					small ? 'text-sm' : 'text-base'
+				)}
+			>
+				{#if collapsable}
+					<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
+						{#if collapsed}
+							<ChevronRight size={16} />
+						{:else}
+							<ChevronDown size={16} />
+						{/if}
+						{label}
+					</button>
+				{:else}
 					{label}
-				</button>
-			{:else}
-				{label}
-			{/if}
+				{/if}
 
-			<slot name="header" />
-			{#if tooltip}
-				<Tooltip>{tooltip}</Tooltip>
-			{/if}
-			{#if eeOnly}
-				{#if !$enterpriseLicense}
-					<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap ml-8">
-						<AlertTriangle size={16} />
-						EE only <Tooltip>Enterprise Edition only feature</Tooltip>
-					</div>
+				<slot name="header" />
+				{#if tooltip}
+					<Tooltip>{tooltip}</Tooltip>
 				{/if}
+				{#if eeOnly}
+					{#if !$enterpriseLicense}
+						<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap ml-8">
+							<AlertTriangle size={16} />
+							EE only <Tooltip>Enterprise Edition only feature</Tooltip>
+						</div>
+					{/if}
+				{/if}
+			</h2>
+			<slot name="action" />
+			{#if collapsable && collapsed}
+				<slot name="badge" />
 			{/if}
-		</h2>
-		<slot name="action" />
-		{#if collapsable && collapsed}
-			<slot name="badge" />
-		{/if}
-	</div>
+		</div>
+	{/if}
 	<div class={collapsable && collapsed ? `hidden ${$$props.class}` : `${$$props.class}`}>
 		<slot />
 	</div>
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
new file mode 100644
index 0000000000000..8654986c6a969
--- /dev/null
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -0,0 +1,554 @@
+<script lang="ts">
+	import { Circle, Clipboard, Info, Trash2 } from 'lucide-svelte'
+	import { base32 } from 'rfc4648'
+	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import SchemaForm from '../SchemaForm.svelte'
+	import { workspaceStore } from '$lib/stores'
+	import {
+		CaptureService,
+		SettingService,
+		type Capture,
+		type CaptureConfig,
+		type CaptureTriggerKind
+	} from '$lib/gen'
+	import Button from '../common/button/Button.svelte'
+	import { capitalize, copyToClipboard, isObject, sendUserToast, sleep } from '$lib/utils'
+	import { createEventDispatcher, onDestroy } from 'svelte'
+	import { type TriggerKind } from '../triggers'
+	import Label from '../Label.svelte'
+	import ClipboardPanel from '../details/ClipboardPanel.svelte'
+	import CopyableCodeBlock from '../details/CopyableCodeBlock.svelte'
+	import { bash } from 'svelte-highlight/languages'
+	import Popover from '../Popover.svelte'
+	import { isCloudHosted } from '$lib/cloud'
+	import Alert from '../common/alert/Alert.svelte'
+	import CustomPopover from '../CustomPopover.svelte'
+	import { page } from '$app/stores'
+	import { convert } from '@redocly/json-to-json-schema'
+	import SchemaViewer from '../SchemaViewer.svelte'
+	import RouteEditorConfigSection from './RouteEditorConfigSection.svelte'
+
+	export let isFlow: boolean
+	export let path: string
+	export let hasPreprocessor: boolean
+	export let canHavePreprocessor: boolean
+	export let captureType: CaptureTriggerKind = 'webhook'
+	export let captureMode = false
+	export let active = false
+
+	$: console.log('dbg isFlow', isFlow)
+	const dispatch = createEventDispatcher<{
+		openTriggers: {
+			kind: TriggerKind
+			config: Record<string, any>
+		}
+		applyArgs: {
+			kind: 'main' | 'preprocessor'
+			args: Record<string, any> | undefined
+		}
+		addPreprocessor: null
+		updateSchema: {
+			schema: any
+			redirect: boolean
+		}
+	}>()
+
+	export let args: Record<string, any> = {}
+
+	let isValid = true
+	let testKind: 'preprocessor' | 'main' = 'main'
+
+	$: hasPreprocessor && (testKind = 'preprocessor')
+
+	$: captureType && (isValid = true)
+
+	const schemas = {
+		http: {
+			$schema: 'http://json-schema.org/draft-07/schema#',
+			type: 'object',
+			properties: {
+				route_path: {
+					type: 'string',
+					description: "':myparam' for path params",
+					title: 'Custom route path',
+					pattern: '^[\\w-:]+(/[\\w-:]+)*$',
+					customErrorMessage: 'Invalid route path'
+				}
+			},
+			required: ['route_path']
+		},
+		websocket: {
+			$schema: 'http://json-schema.org/draft-07/schema#',
+			type: 'object',
+			properties: {
+				url: {
+					type: 'string',
+					title: 'URL',
+					pattern: '^(ws:|wss:)//[^\\s]+$',
+					customErrorMessage: 'Invalid websocket URL'
+				}
+			},
+			required: ['url']
+		},
+		kafka: {
+			$schema: 'http://json-schema.org/draft-07/schema#',
+			type: 'object',
+			properties: {
+				brokers: {
+					type: 'array',
+					items: {
+						type: 'string'
+					},
+					nullable: false,
+					title: 'Brokers'
+				},
+				security: {
+					type: 'object',
+					title: 'Security',
+					oneOf: [
+						{
+							type: 'object',
+							title: 'PLAINTEXT',
+							properties: {
+								label: {
+									enum: ['PLAINTEXT'],
+									type: 'string'
+								}
+							}
+						},
+						{
+							type: 'object',
+							order: ['mechanism', 'username', 'password'],
+							title: 'SASL_PLAINTEXT',
+							required: ['mechanism', 'username', 'password'],
+							properties: {
+								label: {
+									enum: ['SASL_PLAINTEXT'],
+									type: 'string'
+								},
+								password: {
+									type: 'string',
+									password: true
+								},
+								username: {
+									type: 'string'
+								},
+								mechanism: {
+									enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
+									type: 'string',
+									disableCreate: true
+								}
+							}
+						},
+						{
+							type: 'object',
+							title: 'SSL',
+							properties: {
+								label: {
+									enum: ['SSL'],
+									type: 'string'
+								}
+							}
+						},
+						{
+							type: 'object',
+							order: ['mechanism', 'username', 'password'],
+							title: 'SASL_SSL',
+							required: ['mechanism', 'username', 'password'],
+							properties: {
+								label: {
+									enum: ['SASL_SSL'],
+									type: 'string'
+								},
+								password: {
+									type: 'string',
+									password: true
+								},
+								username: {
+									type: 'string'
+								},
+								mechanism: {
+									enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
+									type: 'string',
+									disableCreate: true
+								}
+							}
+						}
+					]
+				},
+				topics: {
+					type: 'array',
+					items: {
+						type: 'string'
+					},
+					nullable: false,
+					title: 'Topics'
+				},
+				group_id: { type: 'string', title: 'Group ID' }
+			},
+			required: ['brokers', 'security', 'topics', 'group_id']
+		}
+	}
+
+	export async function setConfig() {
+		await CaptureService.setCaptureConfig({
+			requestBody: {
+				trigger_kind: captureType,
+				path,
+				is_flow: isFlow,
+				trigger_config: args && Object.keys(args).length > 0 ? args : undefined
+			},
+			workspace: $workspaceStore!
+		})
+	}
+
+	let emailDomain: string | undefined = undefined
+
+	async function getEmailDomain() {
+		emailDomain =
+			((await SettingService.getGlobal({
+				key: 'email_domain'
+			})) as any) ?? undefined
+	}
+
+	getEmailDomain()
+
+	function getEmailAddress(emailDomain: string | undefined) {
+		const cleanedPath = path.replaceAll('/', '.')
+		const plainPrefix = `capture+${$workspaceStore}+${(isFlow ? 'flow.' : '') + cleanedPath}`
+		const encodedPrefix = base32
+			.stringify(new TextEncoder().encode(plainPrefix), {
+				pad: false
+			})
+			.toLowerCase()
+		return `${encodedPrefix}@${emailDomain}`
+	}
+	$: emailAddress = getEmailAddress(emailDomain)
+
+	function webhook() {
+		return `${$page.url.origin}/api/w/${$workspaceStore}/capture_u/webhook/${
+			isFlow ? 'flow' : 'script'
+		}/${path}`
+	}
+	const webhookUrl = webhook()
+
+	let captures: Capture[] = []
+	async function refreshCaptures() {
+		captures = await CaptureService.listCaptures({
+			workspace: $workspaceStore!,
+			runnableKind: isFlow ? 'flow' : 'script',
+			path
+		})
+	}
+	refreshCaptures()
+
+	let captureConfigs: {
+		[key: string]: CaptureConfig
+	} = {}
+	async function getCaptureConfigs() {
+		const captureConfigsList = await CaptureService.getCaptureConfigs({
+			workspace: $workspaceStore!,
+			runnableKind: isFlow ? 'flow' : 'script',
+			path
+		})
+
+		captureConfigs = captureConfigsList.reduce((acc, c) => {
+			acc[c.trigger_kind] = c
+			return acc
+		}, {})
+
+		if ((captureType === 'websocket' || captureType === 'kafka') && active) {
+			const config = captureConfigs[captureType]
+			if (config && config.error) {
+				const serverEnabled = getServerEnabled(config)
+				if (!serverEnabled) {
+					sendUserToast('Capture was stopped because of error: ' + config.error, true)
+					active = false
+				}
+			}
+		}
+	}
+	getCaptureConfigs()
+
+	export async function capture() {
+		let i = 0
+		active = true
+		while (active) {
+			if (i % 3 === 0) {
+				await CaptureService.pingCaptureConfig({
+					workspace: $workspaceStore!,
+					triggerKind: captureType,
+					runnableKind: isFlow ? 'flow' : 'script',
+					path
+				})
+				await getCaptureConfigs()
+			}
+			refreshCaptures()
+			i++
+			await sleep(1000)
+		}
+	}
+
+	let deleteLoading: number | null = null
+	async function deleteCapture(id: number) {
+		deleteLoading = id
+		try {
+			await CaptureService.deleteCapture({
+				workspace: $workspaceStore!,
+				id
+			})
+			refreshCaptures()
+		} finally {
+			deleteLoading = null
+		}
+	}
+
+	function stopAndSetDefaultArgs() {
+		active = false
+		if (captureType in captureConfigs) {
+			const triggerConfig = captureConfigs[captureType].trigger_config
+			args = isObject(triggerConfig) ? triggerConfig : {}
+		} else if (captureType === 'kafka') {
+			args = {
+				brokers: [''],
+				topics: [''],
+				group_id: `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
+			}
+		} else {
+			args = {}
+		}
+	}
+	$: captureType && stopAndSetDefaultArgs()
+
+	onDestroy(() => {
+		active = false
+	})
+
+	function getServerEnabled(config: CaptureConfig) {
+		return (
+			!!config.last_server_ping &&
+			new Date(config.last_server_ping).getTime() > new Date().getTime() - 15 * 1000
+		)
+	}
+
+	export async function handleCapture() {
+		console.log('dbg handleCapture')
+		if (!active) {
+			await setConfig()
+			capture()
+		} else {
+			active = false
+		}
+	}
+
+	let config: CaptureConfig | undefined
+	$: config = captureConfigs[captureType]
+
+	$: cloudDisabled = (captureType === 'websocket' || captureType === 'kafka') && isCloudHosted()
+
+	$: selectedCaptures = captures.filter((c) => c.trigger_kind === captureType)
+</script>
+
+<div class="flex flex-col gap-4 w-full">
+	{#if (captureType === 'websocket' || captureType === 'kafka') && config && active}
+		{@const serverEnabled = getServerEnabled(config)}
+		<div class="flex flex-row gap-2 justify-between">
+			<div class="flex gap-1">
+				<div class="self-center">
+					{#if serverEnabled}
+						<Popover notClickable>
+							<span class="flex h-4 w-4">
+								<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
+							</span>
+							<div slot="text"> Websocket is connected </div>
+						</Popover>
+					{:else}
+						<Popover notClickable>
+							<span class="flex h-4 w-4">
+								<Circle
+									class="text-red-600 animate-ping absolute inline-flex fill-current"
+									size={12}
+								/>
+								<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
+							</span>
+							<div slot="text">
+								Websocket is not connected{config.error ? ': ' + config.error : ''}
+							</div>
+						</Popover>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+	{#if cloudDisabled}
+		<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+			{capitalize(captureType)} triggers are disabled in the multi-tenant cloud.
+		</Alert>
+	{:else}
+		{#if captureType in schemas && false}
+			{#key captureType}
+				<SchemaForm schema={schemas[captureType]} bind:args bind:isValid />
+			{/key}
+		{/if}
+
+		{#if captureType === 'webhook'}
+			<Label label="URL">
+				<ClipboardPanel content={webhookUrl} />
+			</Label>
+			<Label label="Example curl">
+				<CopyableCodeBlock
+					code={`curl \\
+-X POST ${webhookUrl} \\
+-H 'Content-Type: application/json' \\
+-d '{"foo": 42}'`}
+					language={bash}
+				/>
+			</Label>
+		{:else if captureType === 'http'}
+			<RouteEditorConfigSection {path} {captureMode} can_write={true} bind:args headless />
+		{:else if captureType === 'email'}
+			<Label label="Email">
+				<ClipboardPanel content={emailAddress} />
+			</Label>
+		{/if}
+
+		{#if captureMode}
+			<Label label="Captures">
+				<svelte:fragment slot="action">
+					{#if canHavePreprocessor}
+						<div>
+							<ToggleButtonGroup bind:selected={testKind}>
+								<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
+								<ToggleButton
+									value="preprocessor"
+									label="Preprocessor"
+									small
+									tooltip="When the runnable has a preprocessor, it receives additional information about the request"
+								/>
+							</ToggleButtonGroup>
+						</div>
+					{/if}
+				</svelte:fragment>
+				<div class="flex flex-col gap-1 mt-2">
+					{#if selectedCaptures.length === 0}
+						<div class="text-xs text-secondary">No {captureType} captures yet</div>
+					{:else}
+						{#each selectedCaptures as capture}
+							{@const payload = isObject(capture.payload) ? capture.payload : {}}
+							{@const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {}}
+							{@const payloadData =
+								testKind === 'preprocessor'
+									? {
+											...payload,
+											...triggerExtra
+									  }
+									: payload}
+							{@const schema =
+								isFlow && testKind === 'main'
+									? { required: [], properties: {}, ...convert(payloadData) }
+									: {}}
+							<div class="flex flex-row gap-1">
+								<div class="text-xs border p-2 rounded-md overflow-auto grow whitespace-nowrap">
+									{JSON.stringify(payloadData)}
+								</div>
+								<Button
+									size="xs2"
+									color="light"
+									variant="border"
+									on:click={() => {
+										copyToClipboard(JSON.stringify(payloadData))
+									}}
+									iconOnly
+									startIcon={{ icon: Clipboard }}
+								/>
+
+								{#if isFlow && testKind === 'main'}
+									<CustomPopover>
+										<Button
+											size="xs"
+											color="light"
+											variant="border"
+											on:click={() => {
+												dispatch('updateSchema', { schema, redirect: true })
+											}}
+											wrapperClasses="h-full"
+										>
+											Apply schema
+										</Button>
+
+										<svelte:fragment slot="overlay">
+											{#if schema}
+												<div class="min-w-[400px]">
+													<SchemaViewer {schema} />
+												</div>
+											{/if}
+										</svelte:fragment>
+									</CustomPopover>
+								{/if}
+
+								{#if testKind === 'preprocessor' && !hasPreprocessor}
+									<CustomPopover noPadding>
+										<Button
+											size="xs"
+											color="dark"
+											disabled
+											endIcon={{
+												icon: Info
+											}}
+											wrapperClasses="h-full"
+										>
+											Apply args
+										</Button>
+										<svelte:fragment slot="overlay">
+											<div class="text-sm p-2 flex flex-col gap-1 items-start">
+												<p>You need to add a preprocessor to use preprocessor captures as args</p>
+												<Button
+													size="xs"
+													color="dark"
+													on:click={() => {
+														dispatch('addPreprocessor')
+													}}
+												>
+													Add preprocessor
+												</Button>
+											</div>
+										</svelte:fragment>
+									</CustomPopover>
+								{:else}
+									<Button
+										size="xs"
+										color="dark"
+										on:click={() => {
+											if (isFlow && testKind === 'main') {
+												dispatch('updateSchema', { schema, redirect: false })
+											}
+											dispatch('applyArgs', {
+												kind: testKind,
+												args: payloadData
+											})
+										}}
+										disabled={testKind === 'preprocessor' && !hasPreprocessor}
+									>
+										{isFlow && testKind === 'main' ? 'Apply schema and args' : 'Apply args'}
+									</Button>
+								{/if}
+
+								<Button
+									size="xs2"
+									color="red"
+									iconOnly
+									startIcon={{ icon: Trash2 }}
+									loading={deleteLoading === capture.id}
+									on:click={() => {
+										deleteCapture(capture.id)
+									}}
+								/>
+							</div>
+						{/each}
+					{/if}
+				</div>
+			</Label>
+		{/if}
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
new file mode 100644
index 0000000000000..892020566f092
--- /dev/null
+++ b/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { Alert, Badge } from '$lib/components/common'
+	import Required from '$lib/components/Required.svelte'
+	import Section from '$lib/components/Section.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import { userStore, workspaceStore } from '$lib/stores'
+	import Label from '$lib/components/Label.svelte'
+	import CopyableCodeBlock from '$lib/components/details/CopyableCodeBlock.svelte'
+	import { bash } from 'svelte-highlight/languages'
+	import { HttpTriggerService } from '$lib/gen'
+	import { page } from '$app/stores'
+	import { isCloudHosted } from '$lib/cloud'
+	import { base } from '$lib/base'
+
+	export let args: Record<string, any> = { route_path: '', http_method: 'get' }
+	export let routeError: string = ''
+	export let dirtyRoutePath: boolean = false
+	export let http_method: 'get' | 'post' | 'put' | 'patch' | 'delete' = 'post'
+	export let can_write: boolean = false
+	export let static_asset_config: { s3: string; storage?: string; filename?: string } | undefined =
+		undefined
+	export let captureMode = false
+	export let initialRoutePath: string = ''
+	export let isFlow = true
+	export let path: string = ''
+	export let headless: boolean = false
+
+	let validateTimeout: NodeJS.Timeout | undefined = undefined
+
+	async function validateRoute(path: string, method: typeof http_method): Promise<void> {
+		routeError = ''
+		if (validateTimeout) {
+			clearTimeout(validateTimeout)
+		}
+		validateTimeout = setTimeout(async () => {
+			if (!/^[\w-:]+(\/[\w-:]+)*$/.test(path)) {
+				routeError = 'Endpoint not valid'
+			} else if (initialRoutePath !== path && (await routeExists(path, method))) {
+				routeError = 'Endpoint already taken'
+			} else {
+				routeError = ''
+			}
+			validateTimeout = undefined
+		}, 500)
+	}
+
+	async function routeExists(route_path: string, method: typeof http_method) {
+		return await HttpTriggerService.existsRoute({
+			workspace: $workspaceStore!,
+			requestBody: {
+				route_path,
+				http_method
+			}
+		})
+	}
+
+	function getHttpRoute(route_path: string | undefined, capture: boolean) {
+		if (capture) {
+			return `${$page.url.origin}/api/w/${$workspaceStore}/capture_u/http/${
+				isFlow ? 'flow' : 'script'
+			}/${path.replaceAll('/', '.')}/${route_path ?? ''}`
+		} else {
+			return `${$page.url.origin}${base}/api/r/${
+				isCloudHosted() ? $workspaceStore + '/' : ''
+			}${route_path}`
+		}
+	}
+
+	$: validateRoute(route_path, http_method)
+
+	$: fullRoute = getHttpRoute(route_path, captureMode)
+
+	$: captureMode && (http_method = 'post')
+
+	export let route_path = ''
+
+	function updateArgs(route_path: string, http_method: string) {
+		args && ((args.route_path = route_path), (args.http_method = http_method))
+	}
+
+	$: updateArgs(route_path, http_method)
+</script>
+
+<Section label="HTTP" {headless}>
+	{#if !($userStore?.is_admin || $userStore?.is_super_admin)}
+		<Alert type="info" title="Admin only" collapsible>
+			Route endpoints can only be edited by workspace admins
+		</Alert>
+		<div class="my-2" />
+	{/if}
+	<div class="flex flex-col w-full gap-4">
+		<label class="block grow w-full">
+			<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+				<div>
+					Path
+					<Required required={true} />
+				</div>
+				<div class="text-2xs text-tertiary"> ':myparam' for path params </div>
+			</div>
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				type="text"
+				autocomplete="off"
+				bind:value={route_path}
+				disabled={!($userStore?.is_admin || $userStore?.is_super_admin) || !can_write}
+				class={routeError === ''
+					? ''
+					: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+				on:input={() => {
+					dirtyRoutePath = true
+				}}
+			/>
+		</label>
+
+		<ToggleButtonGroup
+			class="w-auto"
+			bind:selected={http_method}
+			disabled={!($userStore?.is_admin || $userStore?.is_super_admin) ||
+				!can_write ||
+				!!static_asset_config ||
+				captureMode}
+		>
+			<ToggleButton label="GET" value="get" />
+			<ToggleButton label="POST" value="post" />
+			<ToggleButton label="PUT" value="put" />
+			<ToggleButton label="PATCH" value="patch" />
+			<ToggleButton label="DELETE" value="delete" />
+		</ToggleButtonGroup>
+		<div class="flex flex-col w-full mt-2">
+			<div class="flex justify-start w-full">
+				<Badge
+					color="gray"
+					class="center-center !bg-surface-secondary !text-tertiary !w-[90px] !h-[24px] rounded-r-none border"
+				>
+					Full endpoint
+				</Badge>
+				<input
+					type="text"
+					readonly
+					value={fullRoute}
+					size={fullRoute.length || 50}
+					class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+					on:focus={({ currentTarget }) => {
+						currentTarget.select()
+					}}
+				/>
+			</div>
+
+			<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
+				>{dirtyRoutePath ? routeError : ''}</div
+			>
+		</div>
+		{#if captureMode}
+			<Label label="cUrl">
+				<CopyableCodeBlock
+					code={`curl \\
+-X POST ${fullRoute} \\
+-H 'Content-Type: application/json' \\
+-d '{"foo": 42}'`}
+					language={bash}
+				/>
+			</Label>
+		{/if}
+	</div>
+</Section>
diff --git a/frontend/src/lib/components/triggers/RouteEditorInner.svelte b/frontend/src/lib/components/triggers/RouteEditorInner.svelte
index c9e38b1147186..be0c76044d74e 100644
--- a/frontend/src/lib/components/triggers/RouteEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/RouteEditorInner.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Alert, Badge, Button } from '$lib/components/common'
+	import { Button } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
 	import Path from '$lib/components/Path.svelte'
@@ -14,14 +14,12 @@
 	import Label from '$lib/components/Label.svelte'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import { page } from '$app/stores'
-	import { isCloudHosted } from '$lib/cloud'
-	import { base } from '$lib/base'
 	import S3FilePicker from '../S3FilePicker.svelte'
 	import Toggle from '../Toggle.svelte'
 	import JsonEditor from '../apps/editor/settingsPanel/inputEditor/JsonEditor.svelte'
 	import FileUpload from '../common/fileUpload/FileUpload.svelte'
 	import SimpleEditor from '../SimpleEditor.svelte'
+	import RouteEditorConfigSection from './RouteEditorConfigSection.svelte'
 
 	let is_flow: boolean = false
 	let initialPath = ''
@@ -58,6 +56,7 @@
 		fixedScriptPath_?: string,
 		defaultValues?: Record<string, any>
 	) {
+		console.log('dbg openNew', defaultValues?.http_method)
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()
@@ -69,7 +68,7 @@
 			initialRoutePath = ''
 			route_path = defaultValues?.route_path ?? ''
 			dirtyRoutePath = false
-			http_method = 'post'
+			http_method = defaultValues?.http_method ?? 'post'
 			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath
@@ -167,39 +166,9 @@
 
 	let dirtyPath = false
 
-	$: fullRoute = `${$page.url.origin}${base}/api/r/${
-		isCloudHosted() ? $workspaceStore + '/' : ''
-	}${route_path}`
+	let args: Record<string, any> = { route_path: '' }
 
-	async function routeExists(route_path: string, method: typeof http_method) {
-		return await HttpTriggerService.existsRoute({
-			workspace: $workspaceStore!,
-			requestBody: {
-				route_path,
-				http_method
-			}
-		})
-	}
-
-	let validateTimeout: NodeJS.Timeout | undefined = undefined
-	async function validateRoute(path: string, method: typeof http_method): Promise<void> {
-		routeError = ''
-		if (validateTimeout) {
-			clearTimeout(validateTimeout)
-		}
-		validateTimeout = setTimeout(async () => {
-			if (!/^[\w-:]+(\/[\w-:]+)*$/.test(path)) {
-				routeError = 'Endpoint not valid'
-			} else if (initialRoutePath !== path && (await routeExists(path, method))) {
-				routeError = 'Endpoint already taken'
-			} else {
-				routeError = ''
-			}
-			validateTimeout = undefined
-		}, 500)
-	}
-
-	$: validateRoute(route_path, http_method)
+	$: args && (route_path = args.route_path)
 </script>
 
 {#if static_asset_config}
@@ -253,76 +222,16 @@
 					</Label>
 				</div>
 
-				<Section label="HTTP">
-					{#if !($userStore?.is_admin || $userStore?.is_super_admin)}
-						<Alert type="info" title="Admin only" collapsible>
-							Route endpoints can only be edited by workspace admins
-						</Alert>
-						<div class="my-2" />
-					{/if}
-					<div class="flex flex-col w-full gap-4">
-						<label class="block grow w-full">
-							<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-								<div>
-									Path
-									<Required required={true} />
-								</div>
-								<div class="text-2xs text-tertiary"> ':myparam' for path params </div>
-							</div>
-							<!-- svelte-ignore a11y-autofocus -->
-							<input
-								type="text"
-								autocomplete="off"
-								bind:value={route_path}
-								disabled={!($userStore?.is_admin || $userStore?.is_super_admin) || !can_write}
-								class={routeError === ''
-									? ''
-									: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-								on:input={() => {
-									dirtyRoutePath = true
-								}}
-							/>
-						</label>
-
-						<ToggleButtonGroup
-							class="w-auto"
-							bind:selected={http_method}
-							disabled={!($userStore?.is_admin || $userStore?.is_super_admin) ||
-								!can_write ||
-								!!static_asset_config}
-						>
-							<ToggleButton label="GET" value="get" />
-							<ToggleButton label="POST" value="post" />
-							<ToggleButton label="PUT" value="put" />
-							<ToggleButton label="PATCH" value="patch" />
-							<ToggleButton label="DELETE" value="delete" />
-						</ToggleButtonGroup>
-						<div class="flex flex-col w-full mt-2">
-							<div class="flex justify-start w-full">
-								<Badge
-									color="gray"
-									class="center-center !bg-surface-secondary !text-tertiary !w-[90px] !h-[24px] rounded-r-none border"
-								>
-									Full endpoint
-								</Badge>
-								<input
-									type="text"
-									readonly
-									value={fullRoute}
-									size={fullRoute.length || 50}
-									class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-									on:focus={({ currentTarget }) => {
-										currentTarget.select()
-									}}
-								/>
-							</div>
-
-							<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
-								>{dirtyRoutePath ? routeError : ''}</div
-							>
-						</div>
-					</div>
-				</Section>
+				<RouteEditorConfigSection
+					bind:route_path
+					bind:args
+					bind:routeError
+					bind:dirtyRoutePath
+					bind:http_method
+					{can_write}
+					bind:static_asset_config
+					{initialRoutePath}
+				/>
 
 				<Section label="Target">
 					<ToggleButtonGroup
diff --git a/frontend/src/lib/components/triggers/RoutesPanel.svelte b/frontend/src/lib/components/triggers/RoutesPanel.svelte
index 735fb73923036..e073b00910646 100644
--- a/frontend/src/lib/components/triggers/RoutesPanel.svelte
+++ b/frontend/src/lib/components/triggers/RoutesPanel.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-	import { Button } from '../common'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { HttpTriggerService, type HttpTrigger } from '$lib/gen'
-	import { RouteIcon } from 'lucide-svelte'
-
 	import Skeleton from '../common/skeleton/Skeleton.svelte'
 	import RouteEditor from './RouteEditor.svelte'
 	import { canWrite } from '$lib/utils'
 	import Alert from '../common/alert/Alert.svelte'
 	import type { TriggerContext } from '../triggers'
 	import { getContext, onMount } from 'svelte'
+	import Section from '$lib/components/Section.svelte'
+	import TriggersEditorSection from './TriggersEditorSection.svelte'
 
 	export let isFlow: boolean
 	export let path: string
@@ -58,57 +57,56 @@
 	bind:this={routeEditor}
 />
 
-<div class="flex flex-col gap-4">
-	{#if !newItem}
-		{#if $userStore?.is_admin || $userStore?.is_super_admin}
-			<Button
-				on:click={() => routeEditor?.openNew(isFlow, path)}
-				variant="border"
-				color="light"
-				size="xs"
-				startIcon={{ icon: RouteIcon }}
-			>
-				New Route
-			</Button>
-		{:else}
-			<Alert title="Only workspace admins can create routes" type="warning" size="xs" />
+<div class="flex flex-col gap-8">
+	<TriggersEditorSection
+		on:saveTrigger={(e) => {
+			routeEditor?.openNew(isFlow, path, e.detail.config)
+		}}
+		cloudDisabled={false}
+		captureType="webhook"
+		{isFlow}
+	/>
+	<Section label="Routes">
+		{#if !newItem}
+			{#if !$userStore?.is_admin && !$userStore?.is_super_admin}
+				<Alert title="Only workspace admins can create routes" type="warning" size="xs" />
+			{/if}
 		{/if}
-	{/if}
-
-	{#if httpTriggers}
-		{#if httpTriggers.length == 0}
-			<div class="text-xs text-secondary"> No http routes </div>
-		{:else}
-			<div class="flex flex-col divide-y pt-2">
-				{#each httpTriggers as httpTriggers (httpTriggers.path)}
-					<div class="grid grid-cols-5 text-2xs items-center py-2">
-						<div class="col-span-2 truncate">{httpTriggers.path}</div>
-						<div class="col-span-2 truncate">
-							{httpTriggers.http_method.toUpperCase()} /{httpTriggers.route_path}
+		{#if httpTriggers}
+			{#if httpTriggers.length == 0}
+				<div class="text-xs text-secondary text-center"> No http routes </div>
+			{:else}
+				<div class="flex flex-col divide-y pt-2">
+					{#each httpTriggers as httpTriggers (httpTriggers.path)}
+						<div class="grid grid-cols-5 text-2xs items-center py-2">
+							<div class="col-span-2 truncate">{httpTriggers.path}</div>
+							<div class="col-span-2 truncate">
+								{httpTriggers.http_method.toUpperCase()} /{httpTriggers.route_path}
+							</div>
+							<div class="flex justify-end">
+								<button
+									on:click={() => routeEditor?.openEdit(httpTriggers.path, isFlow)}
+									class="px-2"
+								>
+									{#if httpTriggers.canWrite}
+										Edit
+									{:else}
+										View
+									{/if}
+								</button>
+							</div>
 						</div>
-						<div class="flex justify-end">
-							<button
-								on:click={() => routeEditor?.openEdit(httpTriggers.path, isFlow)}
-								class="px-2"
-							>
-								{#if httpTriggers.canWrite}
-									Edit
-								{:else}
-									View
-								{/if}
-							</button>
-						</div>
-					</div>
-				{/each}
-			</div>
+					{/each}
+				</div>
+			{/if}
+		{:else}
+			<Skeleton layout={[[8]]} />
 		{/if}
-	{:else}
-		<Skeleton layout={[[8]]} />
-	{/if}
 
-	{#if newItem}
-		<Alert title="Triggers disabled" type="warning" size="xs">
-			Deploy the {isFlow ? 'flow' : 'script'} to add http routes.
-		</Alert>
-	{/if}
+		{#if newItem}
+			<Alert title="Triggers disabled" type="warning" size="xs">
+				Deploy the {isFlow ? 'flow' : 'script'} to add http routes.
+			</Alert>
+		{/if}
+	</Section>
 </div>
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
new file mode 100644
index 0000000000000..50470583ca818
--- /dev/null
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import Button from '$lib/components/common/button/Button.svelte'
+	import { CircleStop, Play, Save } from 'lucide-svelte'
+	import CaptureWrapper from './CaptureWrapper.svelte'
+	import { capitalize } from '$lib/utils'
+	import Popover from '../Popover.svelte'
+	import Section from '../Section.svelte'
+	import { createEventDispatcher, getContext } from 'svelte'
+	import { type CaptureTriggerKind } from '$lib/gen'
+	import type { FlowEditorContext } from '../flows/types'
+	import Toggle from '../Toggle.svelte'
+
+	export let cloudDisabled: boolean
+	export let captureType: CaptureTriggerKind
+	export let isFlow: boolean = false
+
+	let args: Record<string, any> = {}
+	let captureMode = false
+	let active = false
+
+	const dispatch = createEventDispatcher()
+
+	const { flowStore, initialPath, pathStore, selectedId } =
+		getContext<FlowEditorContext>('FlowEditorContext')
+
+	$: newItem = initialPath === ''
+
+	let handleCapture: (() => Promise<void>) | undefined
+</script>
+
+<Section label="New Route">
+	<svelte:fragment slot="action">
+		<div class=" flex flex-row grow w-min-0 gap-2 px-2 items-center justify-between">
+			<Toggle bind:checked={captureMode} options={{ left: 'Capture' }} size="xs" />
+			<div class="flex flex-row gap-2">
+				{#if captureMode}
+					<Button
+						size="xs2"
+						on:click={() => handleCapture?.()}
+						disabled={false}
+						color={active ? 'red' : 'dark'}
+						startIcon={{ icon: active ? CircleStop : Play }}
+					>
+						Capture
+					</Button>
+				{/if}
+
+				{#if newItem || cloudDisabled}
+					<Popover notClickable>
+						<Button
+							size="xs2"
+							disabled
+							startIcon={{ icon: Save }}
+							iconOnly
+							wrapperClasses="h-full"
+						/>
+						<svelte:fragment slot="text">
+							{#if newItem}
+								Deploy the runnable to enable trigger creation
+							{:else if cloudDisabled}
+								{capitalize(captureType)} triggers are disabled in the multi-tenant cloud
+							{/if}
+						</svelte:fragment>
+					</Popover>
+				{:else}
+					<Button
+						size="xs2"
+						on:click={() => {
+							dispatch('saveTrigger', {
+								config: { ...args, captureMode }
+							})
+						}}
+						startIcon={{ icon: Save }}
+						iconOnly
+					/>
+				{/if}
+			</div>
+		</div>
+	</svelte:fragment>
+
+	<CaptureWrapper
+		path={$pathStore}
+		{isFlow}
+		captureType="http"
+		hasPreprocessor={!!$flowStore.value.preprocessor_module}
+		canHavePreprocessor
+		on:applyArgs
+		on:addPreprocessor={async () => {
+			console.log('dbg add preprocessor')
+			$selectedId = 'preprocessor'
+		}}
+		on:updateSchema={(e) => {
+			const { schema, redirect } = e.detail
+			$flowStore.schema = schema
+			if (redirect) {
+				//tabSelected = 'input'
+				console.log('dbg redirect')
+			}
+		}}
+		bind:args
+		{captureMode}
+		bind:handleCapture
+		bind:active
+	/>
+</Section>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index c6e52bf449525..85bb4245adfb3 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -31,6 +31,6 @@
 		"strict": true,
 		"types": []
 	},
-	"include": ["src/**/*.js", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
+	"include": ["src/**/*.js", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte", "src/lib/components/triggers/TriggersEditorSectionsvelte"],
 	"extends": "./.svelte-kit/tsconfig.json"
 }

From 8f3007db2ef2478bf9a58775cbb804b7ebe7b178 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 4 Dec 2024 11:34:43 +0000
Subject: [PATCH 02/42] Add capture to webhook and websocket

---
 frontend/src/lib/components/Label.svelte      |   4 +-
 .../components/triggers/CaptureWrapper.svelte |  30 +-
 .../components/triggers/RoutesPanel.svelte    |   2 +-
 .../triggers/TriggersEditorSection.svelte     |  63 ++-
 .../triggers/WebhooksConfigSection.svelte     | 454 ++++++++++++++++++
 .../components/triggers/WebhooksPanel.svelte  | 386 +--------------
 .../WebsocketEditorConfigSection.svelte       | 112 +++++
 .../WebsocketTriggerEditorInner.svelte        |  97 +---
 .../triggers/WebsocketTriggersPanel.svelte    |  93 ++--
 9 files changed, 690 insertions(+), 551 deletions(-)
 create mode 100644 frontend/src/lib/components/triggers/WebhooksConfigSection.svelte
 create mode 100644 frontend/src/lib/components/triggers/WebsocketEditorConfigSection.svelte

diff --git a/frontend/src/lib/components/Label.svelte b/frontend/src/lib/components/Label.svelte
index 3d53070c6c8c1..f53a8d9ca24dd 100644
--- a/frontend/src/lib/components/Label.svelte
+++ b/frontend/src/lib/components/Label.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+	import { twMerge } from 'tailwind-merge'
 	export let label: string | undefined = undefined
 	export let primary = false
+	export let disabled = false
 </script>
 
-<div class={$$props.class}>
+<div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
 	<div class="flex flex-row justify-between items-center w-full">
 		<div class="flex flex-row items-center gap-1">
 			<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 8654986c6a969..df7877629b477 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -28,6 +28,8 @@
 	import { convert } from '@redocly/json-to-json-schema'
 	import SchemaViewer from '../SchemaViewer.svelte'
 	import RouteEditorConfigSection from './RouteEditorConfigSection.svelte'
+	import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
+	import WebhooksConfigSection from './WebhooksConfigSection.svelte'
 
 	export let isFlow: boolean
 	export let path: string
@@ -36,8 +38,8 @@
 	export let captureType: CaptureTriggerKind = 'webhook'
 	export let captureMode = false
 	export let active = false
+	export let data: any = {}
 
-	$: console.log('dbg isFlow', isFlow)
 	const dispatch = createEventDispatcher<{
 		openTriggers: {
 			kind: TriggerKind
@@ -333,7 +335,6 @@
 	}
 
 	export async function handleCapture() {
-		console.log('dbg handleCapture')
 		if (!active) {
 			await setConfig()
 			capture()
@@ -392,19 +393,18 @@
 			{/key}
 		{/if}
 
-		{#if captureType === 'webhook'}
-			<Label label="URL">
-				<ClipboardPanel content={webhookUrl} />
-			</Label>
-			<Label label="Example curl">
-				<CopyableCodeBlock
-					code={`curl \\
--X POST ${webhookUrl} \\
--H 'Content-Type: application/json' \\
--d '{"foo": 42}'`}
-					language={bash}
-				/>
-			</Label>
+		{#if captureType === 'websocket'}
+			<WebsocketEditorConfigSection url={''} can_write={true} headless={true} bind:args />
+		{:else if captureType === 'webhook'}
+			<WebhooksConfigSection
+				{isFlow}
+				{path}
+				hash={data?.hash}
+				token={data?.token}
+				{args}
+				scopes={data?.scopes}
+				{captureMode}
+			/>
 		{:else if captureType === 'http'}
 			<RouteEditorConfigSection {path} {captureMode} can_write={true} bind:args headless />
 		{:else if captureType === 'email'}
diff --git a/frontend/src/lib/components/triggers/RoutesPanel.svelte b/frontend/src/lib/components/triggers/RoutesPanel.svelte
index e073b00910646..e0fe43502b884 100644
--- a/frontend/src/lib/components/triggers/RoutesPanel.svelte
+++ b/frontend/src/lib/components/triggers/RoutesPanel.svelte
@@ -63,7 +63,7 @@
 			routeEditor?.openNew(isFlow, path, e.detail.config)
 		}}
 		cloudDisabled={false}
-		captureType="webhook"
+		captureType="http"
 		{isFlow}
 	/>
 	<Section label="Routes">
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 50470583ca818..12609e6666e25 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -13,6 +13,16 @@
 	export let cloudDisabled: boolean
 	export let captureType: CaptureTriggerKind
 	export let isFlow: boolean = false
+	export let data: any = {}
+	export let noSave = false
+
+	const captureTypeLabels: Record<CaptureTriggerKind, string> = {
+		http: 'Route',
+		websocket: 'Websocket',
+		webhook: 'Webhook',
+		kafka: 'Kafka',
+		email: 'Email'
+	}
 
 	let args: Record<string, any> = {}
 	let captureMode = false
@@ -28,7 +38,7 @@
 	let handleCapture: (() => Promise<void>) | undefined
 </script>
 
-<Section label="New Route">
+<Section label={`New ${captureTypeLabels[captureType]}`}>
 	<svelte:fragment slot="action">
 		<div class=" flex flex-row grow w-min-0 gap-2 px-2 items-center justify-between">
 			<Toggle bind:checked={captureMode} options={{ left: 'Capture' }} size="xs" />
@@ -45,34 +55,36 @@
 					</Button>
 				{/if}
 
-				{#if newItem || cloudDisabled}
-					<Popover notClickable>
+				{#if !noSave}
+					{#if newItem || cloudDisabled}
+						<Popover notClickable>
+							<Button
+								size="xs2"
+								disabled
+								startIcon={{ icon: Save }}
+								iconOnly
+								wrapperClasses="h-full"
+							/>
+							<svelte:fragment slot="text">
+								{#if newItem}
+									Deploy the runnable to enable trigger creation
+								{:else if cloudDisabled}
+									{capitalize(captureType)} triggers are disabled in the multi-tenant cloud
+								{/if}
+							</svelte:fragment>
+						</Popover>
+					{:else}
 						<Button
 							size="xs2"
-							disabled
+							on:click={() => {
+								dispatch('saveTrigger', {
+									config: { ...args, captureMode }
+								})
+							}}
 							startIcon={{ icon: Save }}
 							iconOnly
-							wrapperClasses="h-full"
 						/>
-						<svelte:fragment slot="text">
-							{#if newItem}
-								Deploy the runnable to enable trigger creation
-							{:else if cloudDisabled}
-								{capitalize(captureType)} triggers are disabled in the multi-tenant cloud
-							{/if}
-						</svelte:fragment>
-					</Popover>
-				{:else}
-					<Button
-						size="xs2"
-						on:click={() => {
-							dispatch('saveTrigger', {
-								config: { ...args, captureMode }
-							})
-						}}
-						startIcon={{ icon: Save }}
-						iconOnly
-					/>
+					{/if}
 				{/if}
 			</div>
 		</div>
@@ -81,7 +93,7 @@
 	<CaptureWrapper
 		path={$pathStore}
 		{isFlow}
-		captureType="http"
+		{captureType}
 		hasPreprocessor={!!$flowStore.value.preprocessor_module}
 		canHavePreprocessor
 		on:applyArgs
@@ -101,5 +113,6 @@
 		{captureMode}
 		bind:handleCapture
 		bind:active
+		{data}
 	/>
 </Section>
diff --git a/frontend/src/lib/components/triggers/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/WebhooksConfigSection.svelte
new file mode 100644
index 0000000000000..bdf295ed33370
--- /dev/null
+++ b/frontend/src/lib/components/triggers/WebhooksConfigSection.svelte
@@ -0,0 +1,454 @@
+<script lang="ts">
+	import Label from '../Label.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import {
+		DEFAULT_WEBHOOK_TYPE,
+		SCRIPT_VIEW_SHOW_EXAMPLE_CURL,
+		SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON
+	} from '$lib/consts'
+	import bash from 'svelte-highlight/languages/bash'
+	import { Tabs, Tab, TabContent, Button } from '$lib/components/common'
+	import { ArrowDownRight, ArrowUpRight, Clipboard } from 'lucide-svelte'
+	import { Highlight } from 'svelte-highlight'
+	import { typescript } from 'svelte-highlight/languages'
+	import ClipboardPanel from '../details/ClipboardPanel.svelte'
+	import { copyToClipboard } from '$lib/utils'
+	import { page } from '$app/stores'
+	import { base } from '$lib/base'
+	import TriggerTokens from './TriggerTokens.svelte'
+	import { workspaceStore, userStore } from '$lib/stores'
+	import UserSettings from '../UserSettings.svelte'
+	import { generateRandomString } from '$lib/utils'
+	import { twMerge } from 'tailwind-merge'
+
+	export let isFlow: boolean = false
+	export let path: string = ''
+	export let hash: string | undefined = undefined
+	export let token: string = ''
+	export let args: any
+	export let triggerTokens: TriggerTokens | undefined = undefined
+	export let scopes: string[] = []
+	export let captureMode: boolean = false
+
+	let webhooks: {
+		async: {
+			hash?: string
+			path: string
+		}
+		sync: {
+			hash?: string
+			path: string
+			get_path?: string
+		}
+	}
+	let selectedTab: string = 'rest'
+	let userSettings: UserSettings
+	let url: string = ''
+
+	$: webhooks = isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path)
+
+	function computeScriptWebhooks(hash: string | undefined, path: string) {
+		let webhookBase = `${$page.url.origin}${base}/api/w/${$workspaceStore}/jobs`
+		return {
+			async: {
+				hash: `${webhookBase}/run/h/${hash}`,
+				path: `${webhookBase}/run/p/${path}`
+			},
+			sync: {
+				hash: `${webhookBase}/run_wait_result/h/${hash}`,
+				path: `${webhookBase}/run_wait_result/p/${path}`,
+				get_path: `${webhookBase}/run_wait_result/p/${path}`
+			}
+		}
+	}
+
+	function computeFlowWebhooks(path: string) {
+		let webhooksBase = `${$page.url.origin}${base}/api/w/${$workspaceStore}/jobs`
+
+		let urlAsync = `${webhooksBase}/run/f/${path}`
+		let urlSync = `${webhooksBase}/run_wait_result/f/${path}`
+		return {
+			async: {
+				path: urlAsync
+			},
+			sync: {
+				path: urlSync,
+				get_path: urlSync
+			}
+		}
+	}
+
+	let webhookType: 'async' | 'sync' = DEFAULT_WEBHOOK_TYPE
+	let requestType: 'hash' | 'path' | 'get_path' = isFlow ? 'path' : 'path'
+	let tokenType: 'query' | 'headers' = 'headers'
+
+	$: if (webhookType === 'async' && requestType === 'get_path') {
+		// Request type is not supported for async webhooks
+		requestType = 'hash'
+	}
+
+	function headers() {
+		const headers = {}
+		if (requestType != 'get_path') {
+			headers['Content-Type'] = 'application/json'
+		}
+
+		if (tokenType === 'headers') {
+			headers['Authorization'] = `Bearer ${token}`
+		}
+		return headers
+	}
+
+	function fetchCode() {
+		if (webhookType === 'sync') {
+			return `
+export async function main() {
+  const jobTriggerResponse = await triggerJob();
+  const data = await jobTriggerResponse.json();
+  return data;
+}
+
+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 endpoint = \`${url}\`;
+
+  return await fetch(endpoint, {
+    method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
+    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t')}${
+				requestType === 'get_path' ? '' : `,\n\t\tbody`
+			}
+  });
+}`
+		}
+
+		// Main function
+		let mainFunction = `
+export async function main() {
+  const jobTriggerResponse = await triggerJob();
+  const UUID = await jobTriggerResponse.text();
+  const jobCompletionData = await waitForJobCompletion(UUID);
+  return jobCompletionData;
+}`
+
+		// triggerJob function
+		let triggerJobFunction = `
+async function triggerJob() {
+  const body = JSON.stringify(${JSON.stringify(args, null, 2).replaceAll('\n', '\n\t')});
+  const endpoint = \`${url}\`;
+
+  return await fetch(endpoint, {
+    method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
+    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t')},
+    body
+  });
+}`
+
+		// waitForJobCompletion function
+		let waitForJobCompletionFunction = `
+function waitForJobCompletion(UUID) {
+  return new Promise(async (resolve, reject) => {
+    try {
+      const endpoint = \`${
+				$page.url.origin
+			}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/\${UUID}\`;
+      const checkResponse = await fetch(endpoint, {
+        method: 'GET',
+        headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t\t\t')}
+      });
+
+      const checkData = await checkResponse.json();
+
+      if (checkData.completed) {
+        resolve(checkData);
+      } else {
+        // If not completed, wait for a second then try again
+        setTimeout(async () => {
+          const result = await waitForJobCompletion(UUID);
+          resolve(result);
+        }, 1000);
+      }
+    } catch (error) {
+      reject(error);
+    }
+  });
+}`
+
+		// Combine and return
+		return `${mainFunction}\n\n${triggerJobFunction}\n\n${waitForJobCompletionFunction}`
+	}
+
+	function curlCode() {
+		if (captureMode) {
+			return `curl \\
+-X POST ${url} \\
+-H 'Content-Type: application/json' \\
+-d '{"foo": 42}'`
+		}
+		return `TOKEN='${token}'
+${requestType !== 'get_path' ? `BODY='${JSON.stringify(args)}'` : ''}
+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)
+
+${
+	webhookType === 'sync'
+		? 'echo -E $RESULT | jq'
+		: `
+URL="${$page.url.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/$UUID"
+while true; do
+  curl -s -H "Authorization: Bearer $TOKEN" $URL -o res.json
+  COMPLETED=$(cat res.json | jq .completed)
+  if [ "$COMPLETED" = "true" ]; then
+    cat res.json | jq .result
+    break
+  else
+    sleep 1
+  fi
+done`
+}`
+	}
+
+	function updateUrl(
+		webhookType: 'async' | 'sync',
+		requestType: 'hash' | 'path' | 'get_path',
+		captureMode
+	) {
+		if (captureMode) {
+			url = `${$page.url.origin}/api/w/${$workspaceStore}/capture_u/webhook/${
+				isFlow ? 'flow' : 'script'
+			}/${path}`
+		} else {
+			url =
+				webhooks[webhookType][requestType] +
+				(tokenType === 'query'
+					? `?token=${token}${
+							requestType === 'get_path'
+								? `&payload=${encodeURIComponent(btoa(JSON.stringify(args)))}`
+								: ''
+					  }`
+					: `${
+							requestType === 'get_path'
+								? `?payload=${encodeURIComponent(btoa(JSON.stringify(args)))}`
+								: ''
+					  }`)
+		}
+	}
+
+	$: updateUrl(webhookType, requestType, captureMode)
+
+	let prevSelectedTab = selectedTab
+	function updateSelectedTab(captureMode: boolean) {
+		if (captureMode) {
+			prevSelectedTab = selectedTab
+			selectedTab = 'curl'
+		} else {
+			selectedTab = prevSelectedTab
+		}
+	}
+
+	let prevWebhookType = webhookType
+	function updateWebhookType(captureMode: boolean) {
+		if (captureMode) {
+			prevWebhookType = webhookType
+			webhookType = 'async'
+		} else {
+			webhookType = prevWebhookType
+		}
+	}
+
+	let prevRequestType: 'hash' | 'path' | 'get_path'
+	function updateRequestType(captureMode: boolean) {
+		if (captureMode) {
+			prevRequestType = requestType
+			requestType = 'path'
+		} else {
+			requestType = prevRequestType
+		}
+	}
+
+	$: updateSelectedTab(captureMode)
+	$: updateWebhookType(captureMode)
+	$: updateRequestType(captureMode)
+</script>
+
+<UserSettings
+	bind:this={userSettings}
+	on:tokenCreated={(e) => {
+		token = e.detail
+		triggerTokens?.listTokens()
+	}}
+	newTokenWorkspace={$workspaceStore}
+	newTokenLabel={`webhook-${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
+	{scopes}
+/>
+
+<div class="flex flex-col gap-8">
+	{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
+		<Label label="Token" disabled={captureMode}>
+			<div class="flex flex-row justify-between gap-2">
+				<input
+					bind:value={token}
+					placeholder="paste your token here once created to alter examples below"
+					class="!text-xs !font-normal"
+				/>
+				<Button size="xs" color="light" variant="border" on:click={userSettings.openDrawer}>
+					Create a Webhook-specific Token
+					<Tooltip light>
+						The token will have a scope such that it can only be used to trigger this script. It is
+						safe to share as it cannot be used to impersonate you.
+					</Tooltip>
+				</Button>
+			</div>
+		</Label>
+	{/if}
+
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-row justify-between">
+			<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType} disabled={captureMode}>
+				<ToggleButton
+					label="Async"
+					value="async"
+					tooltip="The returning value is the uuid of the job assigned to execute the job."
+				/>
+				<ToggleButton
+					label="Sync"
+					value="sync"
+					tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+				/>
+			</ToggleButtonGroup>
+		</div>
+		<div class="flex flex-row justify-between">
+			<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} disabled={captureMode}>
+				<ToggleButton
+					label="POST by path"
+					value="path"
+					icon={ArrowUpRight}
+					selectedColor="#fb923c"
+				/>
+				{#if !isFlow}
+					<ToggleButton
+						label="POST by hash"
+						value="hash"
+						icon={ArrowUpRight}
+						selectedColor="#fb923c"
+					/>
+				{/if}
+
+				<ToggleButton
+					label="GET by path"
+					value="get_path"
+					icon={ArrowDownRight}
+					disabled={webhookType !== 'sync'}
+					selectedColor="#14b8a6"
+				/>
+			</ToggleButtonGroup>
+		</div>
+		<div
+			class={twMerge(
+				'flex flex-row justify-between',
+				captureMode ? 'opacity-60 pointer-events-none' : ''
+			)}
+		>
+			<div class="text-sm font-normal text-secondary flex flex-row items-center"
+				>Token configuration</div
+			>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
+				<ToggleButton label="Token in Headers" value="headers" />
+				<ToggleButton label="Token in Query" value="query" />
+			</ToggleButtonGroup>
+		</div>
+	</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div>
+		<Tabs bind:selected={selectedTab}>
+			<Tab value="rest" size="xs" disabled={captureMode}>REST</Tab>
+			{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
+				<Tab value="curl" size="xs">Curl</Tab>
+			{/if}
+			<Tab value="fetch" size="xs" disabled={captureMode}>Fetch</Tab>
+
+			<svelte:fragment slot="content">
+				{#key token}
+					<TabContent value="rest" class="flex flex-col flex-1 h-full ">
+						<div class="flex flex-col gap-2">
+							<Label label="Url">
+								<ClipboardPanel content={url} />
+							</Label>
+
+							{#if requestType !== 'get_path'}
+								<Label label="Body">
+									<ClipboardPanel content={JSON.stringify(args, null, 2)} />
+								</Label>
+							{/if}
+							{#key requestType}
+								{#key tokenType}
+									<Label label="Headers">
+										<ClipboardPanel content={JSON.stringify(headers(), null, 2)} />
+									</Label>
+								{/key}
+							{/key}
+						</div>
+					</TabContent>
+					<TabContent value="curl" class="flex flex-col flex-1 h-full">
+						<div class="relative">
+							{#key args}
+								{#key requestType}
+									{#key webhookType}
+										{#key tokenType}
+											{#key captureMode}
+												<div
+													class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
+													on:click={(e) => {
+														e.preventDefault()
+														copyToClipboard(curlCode())
+													}}
+												>
+													<Highlight language={bash} code={curlCode()} />
+													<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
+												</div>
+											{/key}
+										{/key}
+									{/key}
+								{/key}
+							{/key}
+						</div>
+					</TabContent>
+					<TabContent value="fetch">
+						{#key args}
+							{#key requestType}
+								{#key webhookType}
+									{#key tokenType}
+										{#key token}
+											<div
+												class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
+												on:click={(e) => {
+													e.preventDefault()
+													copyToClipboard(fetchCode())
+												}}
+											>
+												<Highlight language={typescript} code={fetchCode()} />
+												<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
+											</div>
+										{/key}{/key}{/key}{/key}
+						{/key}
+					</TabContent>
+				{/key}
+			</svelte:fragment>
+		</Tabs>
+	</div>
+	{#if !captureMode}
+		<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="webhook" />
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/triggers/WebhooksPanel.svelte b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
index eefd785b47e70..78d948791854c 100644
--- a/frontend/src/lib/components/triggers/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
@@ -1,27 +1,7 @@
 <script lang="ts">
-	import { page } from '$app/stores'
-	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { userStore, workspaceStore } from '$lib/stores'
-	import bash from 'svelte-highlight/languages/bash'
-	import { Tabs, Tab, TabContent, Button, Alert } from '$lib/components/common'
-	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
-	import {
-		DEFAULT_WEBHOOK_TYPE,
-		SCRIPT_VIEW_SHOW_EXAMPLE_CURL,
-		SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON
-	} from '$lib/consts'
-	import { ArrowDownRight, ArrowUpRight, Clipboard } from 'lucide-svelte'
-	import UserSettings from '../UserSettings.svelte'
-	import { Highlight } from 'svelte-highlight'
-	import { typescript } from 'svelte-highlight/languages'
-	import ClipboardPanel from '../details/ClipboardPanel.svelte'
-	import { copyToClipboard, generateRandomString } from '$lib/utils'
+	import { Alert } from '$lib/components/common'
 	import HighlightTheme from '../HighlightTheme.svelte'
-	import { base } from '$lib/base'
-	import Label from '$lib/components/Label.svelte'
-	import TriggerTokens from './TriggerTokens.svelte'
-	let userSettings: UserSettings
+	import TriggersEditorSection from './TriggersEditorSection.svelte'
 
 	export let token: string
 	export let args: any
@@ -29,368 +9,20 @@
 	export let isFlow: boolean = false
 	export let hash: string | undefined = undefined
 	export let path: string
-	export let url: string = ''
 	export let newItem: boolean = false
-	let selectedTab: string = 'rest'
 
-	let webhooks: {
-		async: {
-			hash?: string
-			path: string
-		}
-		sync: {
-			hash?: string
-			path: string
-			get_path?: string
-		}
+	let data: any = {
+		hash,
+		token,
+		scopes,
+		args,
+		path
 	}
-
-	$: webhooks = isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path)
-
-	function computeScriptWebhooks(hash: string | undefined, path: string) {
-		let webhookBase = `${$page.url.origin}${base}/api/w/${$workspaceStore}/jobs`
-		return {
-			async: {
-				hash: `${webhookBase}/run/h/${hash}`,
-				path: `${webhookBase}/run/p/${path}`
-			},
-			sync: {
-				hash: `${webhookBase}/run_wait_result/h/${hash}`,
-				path: `${webhookBase}/run_wait_result/p/${path}`,
-				get_path: `${webhookBase}/run_wait_result/p/${path}`
-			}
-		}
-	}
-
-	function computeFlowWebhooks(path: string) {
-		let webhooksBase = `${$page.url.origin}${base}/api/w/${$workspaceStore}/jobs`
-
-		let urlAsync = `${webhooksBase}/run/f/${path}`
-		let urlSync = `${webhooksBase}/run_wait_result/f/${path}`
-		return {
-			async: {
-				path: urlAsync
-			},
-			sync: {
-				path: urlSync,
-				get_path: urlSync
-			}
-		}
-	}
-
-	let webhookType: 'async' | 'sync' = DEFAULT_WEBHOOK_TYPE
-	let requestType: 'hash' | 'path' | 'get_path' = isFlow ? 'path' : 'path'
-	let tokenType: 'query' | 'headers' = 'headers'
-
-	$: if (webhookType === 'async' && requestType === 'get_path') {
-		// Request type is not supported for async webhooks
-		requestType = 'hash'
-	}
-
-	$: url =
-		webhooks[webhookType][requestType] +
-		(tokenType === 'query'
-			? `?token=${token}${
-					requestType === 'get_path'
-						? `&payload=${encodeURIComponent(btoa(JSON.stringify(args)))}`
-						: ''
-			  }`
-			: `${
-					requestType === 'get_path'
-						? `?payload=${encodeURIComponent(btoa(JSON.stringify(args)))}`
-						: ''
-			  }`)
-
-	function headers() {
-		const headers = {}
-		if (requestType != 'get_path') {
-			headers['Content-Type'] = 'application/json'
-		}
-
-		if (tokenType === 'headers') {
-			headers['Authorization'] = `Bearer ${token}`
-		}
-		return headers
-	}
-
-	function fetchCode() {
-		if (webhookType === 'sync') {
-			return `
-export async function main() {
-  const jobTriggerResponse = await triggerJob();
-  const data = await jobTriggerResponse.json();
-  return data;
-}
-
-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 endpoint = \`${url}\`;
-
-  return await fetch(endpoint, {
-    method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
-    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t')}${
-				requestType === 'get_path' ? '' : `,\n\t\tbody`
-			}
-  });
-}`
-		}
-
-		// Main function
-		let mainFunction = `
-export async function main() {
-  const jobTriggerResponse = await triggerJob();
-  const UUID = await jobTriggerResponse.text();
-  const jobCompletionData = await waitForJobCompletion(UUID);
-  return jobCompletionData;
-}`
-
-		// triggerJob function
-		let triggerJobFunction = `
-async function triggerJob() {
-  const body = JSON.stringify(${JSON.stringify(args, null, 2).replaceAll('\n', '\n\t')});
-  const endpoint = \`${url}\`;
-
-  return await fetch(endpoint, {
-    method: '${requestType === 'get_path' ? 'GET' : 'POST'}',
-    headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t')},
-    body
-  });
-}`
-
-		// waitForJobCompletion function
-		let waitForJobCompletionFunction = `
-function waitForJobCompletion(UUID) {
-  return new Promise(async (resolve, reject) => {
-    try {
-      const endpoint = \`${
-				$page.url.origin
-			}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/\${UUID}\`;
-      const checkResponse = await fetch(endpoint, {
-        method: 'GET',
-        headers: ${JSON.stringify(headers(), null, 2).replaceAll('\n', '\n\t\t\t\t')}
-      });
-
-      const checkData = await checkResponse.json();
-
-      if (checkData.completed) {
-        resolve(checkData);
-      } else {
-        // If not completed, wait for a second then try again
-        setTimeout(async () => {
-          const result = await waitForJobCompletion(UUID);
-          resolve(result);
-        }, 1000);
-      }
-    } catch (error) {
-      reject(error);
-    }
-  });
-}`
-
-		// Combine and return
-		return `${mainFunction}\n\n${triggerJobFunction}\n\n${waitForJobCompletionFunction}`
-	}
-
-	function curlCode() {
-		return `TOKEN='${token}'
-${requestType !== 'get_path' ? `BODY='${JSON.stringify(args)}'` : ''}
-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)
-
-${
-	webhookType === 'sync'
-		? 'echo -E $RESULT | jq'
-		: `
-URL="${$page.url.origin}/api/w/${$workspaceStore}/jobs_u/completed/get_result_maybe/$UUID"
-while true; do
-  curl -s -H "Authorization: Bearer $TOKEN" $URL -o res.json
-  COMPLETED=$(cat res.json | jq .completed)
-  if [ "$COMPLETED" = "true" ]; then
-    cat res.json | jq .result
-    break
-  else
-    sleep 1
-  fi
-done`
-}`
-	}
-
-	let triggerTokens: TriggerTokens | undefined = undefined
 </script>
 
 <HighlightTheme />
 
-<UserSettings
-	bind:this={userSettings}
-	on:tokenCreated={(e) => {
-		token = e.detail
-		triggerTokens?.listTokens()
-	}}
-	newTokenWorkspace={$workspaceStore}
-	newTokenLabel={`webhook-${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
-	{scopes}
-/>
-
 <div class="flex flex-col w-full gap-4">
-	{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
-		<Label label="Token">
-			<div class="flex flex-row justify-between gap-2">
-				<input
-					bind:value={token}
-					placeholder="paste your token here once created to alter examples below"
-					class="!text-xs !font-normal"
-				/>
-				<Button size="xs" color="light" variant="border" on:click={userSettings.openDrawer}>
-					Create a Webhook-specific Token
-					<Tooltip light>
-						The token will have a scope such that it can only be used to trigger this script. It is
-						safe to share as it cannot be used to impersonate you.
-					</Tooltip>
-				</Button>
-			</div>
-		</Label>
-	{/if}
-
-	<div class="flex flex-col gap-2">
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType}>
-				<ToggleButton
-					label="Async"
-					value="async"
-					tooltip="The returning value is the uuid of the job assigned to execute the job."
-				/>
-				<ToggleButton
-					label="Sync"
-					value="sync"
-					tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-				/>
-			</ToggleButtonGroup>
-		</div>
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
-				<ToggleButton
-					label="POST by path"
-					value="path"
-					icon={ArrowUpRight}
-					selectedColor="#fb923c"
-				/>
-				{#if !isFlow}
-					<ToggleButton
-						label="POST by hash"
-						value="hash"
-						icon={ArrowUpRight}
-						selectedColor="#fb923c"
-					/>
-				{/if}
-
-				<ToggleButton
-					label="GET by path"
-					value="get_path"
-					icon={ArrowDownRight}
-					disabled={webhookType !== 'sync'}
-					selectedColor="#14b8a6"
-				/>
-			</ToggleButtonGroup>
-		</div>
-		<div class="flex flex-row justify-between">
-			<div class="text-sm font-normal text-secondary flex flex-row items-center"
-				>Token configuration</div
-			>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
-				<ToggleButton label="Token in Headers" value="headers" />
-				<ToggleButton label="Token in Query" value="query" />
-			</ToggleButtonGroup>
-		</div>
-	</div>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<Tabs bind:selected={selectedTab}>
-		<Tab value="rest" size="xs">REST</Tab>
-		{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
-			<Tab value="curl" size="xs">Curl</Tab>
-		{/if}
-		<Tab value="fetch" size="xs">Fetch</Tab>
-
-		<svelte:fragment slot="content">
-			{#key token}
-				<TabContent value="rest" class="flex flex-col flex-1 h-full ">
-					<div class="flex flex-col gap-2">
-						<Label label="Url">
-							<ClipboardPanel content={url} />
-						</Label>
-
-						{#if requestType !== 'get_path'}
-							<Label label="Body">
-								<ClipboardPanel content={JSON.stringify(args, null, 2)} />
-							</Label>
-						{/if}
-						{#key requestType}
-							{#key tokenType}
-								<Label label="Headers">
-									<ClipboardPanel content={JSON.stringify(headers(), null, 2)} />
-								</Label>
-							{/key}
-						{/key}
-					</div>
-				</TabContent>
-				<TabContent value="curl" class="flex flex-col flex-1 h-full">
-					<div class="relative">
-						{#key args}
-							{#key requestType}
-								{#key webhookType}
-									{#key tokenType}
-										<div
-											class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-											on:click={(e) => {
-												e.preventDefault()
-												copyToClipboard(curlCode())
-											}}
-										>
-											<Highlight language={bash} code={curlCode()} />
-											<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
-										</div>
-									{/key}
-								{/key}
-							{/key}
-						{/key}
-					</div>
-				</TabContent>
-				<TabContent value="fetch">
-					{#key args}
-						{#key requestType}
-							{#key webhookType}
-								{#key tokenType}
-									{#key token}
-										<div
-											class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
-											on:click={(e) => {
-												e.preventDefault()
-												copyToClipboard(fetchCode())
-											}}
-										>
-											<Highlight language={typescript} code={fetchCode()} />
-											<Clipboard size={14} class="w-8 top-2 right-2 absolute" />
-										</div>
-									{/key}{/key}{/key}{/key}
-					{/key}
-				</TabContent>
-			{/key}
-		</svelte:fragment>
-	</Tabs>
-
-	<div class="mt-10" />
-	<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="webhook" />
-
 	{#if newItem}
 		<div class="mt-10" />
 		<Alert type="warning" title="Attached to a deployed path">
@@ -398,4 +30,6 @@ done`
 			{isFlow ? 'flow' : 'script'}.
 		</Alert>
 	{/if}
+
+	<TriggersEditorSection cloudDisabled={false} captureType="webhook" {isFlow} {data} noSave />
 </div>
diff --git a/frontend/src/lib/components/triggers/WebsocketEditorConfigSection.svelte b/frontend/src/lib/components/triggers/WebsocketEditorConfigSection.svelte
new file mode 100644
index 0000000000000..44ce13ee62ac6
--- /dev/null
+++ b/frontend/src/lib/components/triggers/WebsocketEditorConfigSection.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import Section from '$lib/components/Section.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
+	import Required from '$lib/components/Required.svelte'
+	import { Loader2 } from 'lucide-svelte'
+
+	export let args: Record<string, any> = { url: '' }
+	export let url: string
+	export let url_runnable_args: Record<string, unknown> = {}
+	export let dirtyUrl: boolean = false
+	export let urlError: string = ''
+	export let urlRunnableSchema: Record<string, unknown> = {}
+	export let can_write: boolean = false
+	export let headless: boolean = false
+	export let captureMode: boolean = false
+
+	function updateArgs(url: string) {
+		args && (args.url = url)
+	}
+
+	$: updateArgs(url)
+</script>
+
+<Section label="Websocket" {headless}>
+	<div class="mb-2">
+		<ToggleButtonGroup
+			selected={url.startsWith('$') ? 'runnable' : 'static'}
+			on:selected={(ev) => {
+				url = ev.detail === 'runnable' ? '$script:' : ''
+				url_runnable_args = {}
+			}}
+			disabled={captureMode}
+		>
+			<ToggleButton value="static" label="Static URL" />
+			<ToggleButton value="runnable" label="Runnable result as URL" />
+		</ToggleButtonGroup>
+	</div>
+	{#if url.startsWith('$')}
+		<div class="flex flex-col w-full gap-4">
+			<div class="block grow w-full">
+				<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+					<div>
+						Runnable
+						<Required required={true} />
+					</div>
+				</div>
+				<ScriptPicker
+					allowFlow={true}
+					itemKind={url.startsWith('$flow:') ? 'flow' : 'script'}
+					initialPath={url.split(':')[1] ?? ''}
+					on:select={(ev) => {
+						dirtyUrl = true
+						const { path, itemKind } = ev.detail
+						url = `$${itemKind}:${path ?? ''}`
+					}}
+				/>
+				<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+					{dirtyUrl ? urlError : ''}
+				</div>
+			</div>
+		</div>
+
+		{#if url.split(':')[1]?.length > 0}
+			{#if urlRunnableSchema}
+				<p class="font-semibold text-sm mt-4 mb-2">Arguments</p>
+				{#await import('$lib/components/SchemaForm.svelte')}
+					<Loader2 class="animate-spin mt-2" />
+				{:then Module}
+					<Module.default
+						schema={urlRunnableSchema}
+						bind:args={url_runnable_args}
+						shouldHideNoInputs
+						class="text-xs"
+					/>
+				{/await}
+				{#if urlRunnableSchema.properties && Object.keys(urlRunnableSchema.properties).length === 0}
+					<div class="text-xs texg-gray-700">This runnable takes no arguments</div>
+				{/if}
+			{:else}
+				<Loader2 class="animate-spin mt-2" />
+			{/if}
+		{/if}
+	{:else}
+		<div class="flex flex-col w-full gap-4">
+			<label class="block grow w-full">
+				<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+					<div>
+						URL
+						<Required required={true} />
+					</div>
+				</div>
+				<input
+					type="text"
+					autocomplete="off"
+					bind:value={url}
+					disabled={!can_write}
+					on:input={() => {
+						dirtyUrl = true
+					}}
+					class={urlError === ''
+						? ''
+						: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+				/>
+				<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+					{dirtyUrl ? urlError : ''}
+				</div>
+			</label>
+		</div>
+	{/if}
+</Section>
diff --git a/frontend/src/lib/components/triggers/WebsocketTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/WebsocketTriggerEditorInner.svelte
index 6afaac01ad6e0..6f777f983ca9f 100644
--- a/frontend/src/lib/components/triggers/WebsocketTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/WebsocketTriggerEditorInner.svelte
@@ -24,8 +24,7 @@
 	import { fade } from 'svelte/transition'
 	import JsonEditor from '../apps/editor/settingsPanel/inputEditor/JsonEditor.svelte'
 	import type { Schema } from '$lib/common'
-	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
+	import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
 
 	let drawer: Drawer
 	let is_flow: boolean = false
@@ -316,92 +315,14 @@
 					</Label>
 				</div>
 
-				<Section label="Websocket">
-					<div class="mb-2">
-						<ToggleButtonGroup
-							selected={url.startsWith('$') ? 'runnable' : 'static'}
-							on:selected={(ev) => {
-								url = ev.detail === 'runnable' ? '$script:' : ''
-								url_runnable_args = {}
-							}}
-						>
-							<ToggleButton value="static" label="Static URL" />
-							<ToggleButton value="runnable" label="Runnable result as URL" />
-						</ToggleButtonGroup>
-					</div>
-					{#if url.startsWith('$')}
-						<div class="flex flex-col w-full gap-4">
-							<div class="block grow w-full">
-								<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-									<div>
-										Runnable
-										<Required required={true} />
-									</div>
-								</div>
-								<ScriptPicker
-									allowFlow={true}
-									itemKind={url.startsWith('$flow:') ? 'flow' : 'script'}
-									initialPath={url.split(':')[1] ?? ''}
-									on:select={(ev) => {
-										dirtyUrl = true
-										const { path, itemKind } = ev.detail
-										url = `$${itemKind}:${path ?? ''}`
-									}}
-								/>
-								<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
-									{dirtyUrl ? urlError : ''}
-								</div>
-							</div>
-						</div>
-
-						{#if url.split(':')[1]?.length > 0}
-							{#if urlRunnableSchema}
-								<p class="font-semibold text-sm mt-4 mb-2">Arguments</p>
-								{#await import('$lib/components/SchemaForm.svelte')}
-									<Loader2 class="animate-spin mt-2" />
-								{:then Module}
-									<Module.default
-										schema={urlRunnableSchema}
-										bind:args={url_runnable_args}
-										shouldHideNoInputs
-										class="text-xs"
-									/>
-								{/await}
-								{#if urlRunnableSchema.properties && Object.keys(urlRunnableSchema.properties).length === 0}
-									<div class="text-xs texg-gray-700">This runnable takes no arguments</div>
-								{/if}
-							{:else}
-								<Loader2 class="animate-spin mt-2" />
-							{/if}
-						{/if}
-					{:else}
-						<div class="flex flex-col w-full gap-4">
-							<label class="block grow w-full">
-								<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-									<div>
-										URL
-										<Required required={true} />
-									</div>
-								</div>
-								<input
-									type="text"
-									autocomplete="off"
-									bind:value={url}
-									disabled={!can_write}
-									on:input={() => {
-										dirtyUrl = true
-									}}
-									class={urlError === ''
-										? ''
-										: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-								/>
-								<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
-									{dirtyUrl ? urlError : ''}
-								</div>
-							</label>
-						</div>
-					{/if}
-				</Section>
+				<WebsocketEditorConfigSection
+					{url}
+					{url_runnable_args}
+					{dirtyUrl}
+					{urlError}
+					{urlRunnableSchema}
+					{can_write}
+				/>
 
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
diff --git a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
index 66fe3252958e2..6ca12cc56963c 100644
--- a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { Button } from '../common'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { WebsocketTriggerService, type WebsocketTrigger } from '$lib/gen'
-	import { UnplugIcon } from 'lucide-svelte'
 
 	import Skeleton from '../common/skeleton/Skeleton.svelte'
 	import { canWrite } from '$lib/utils'
@@ -11,7 +9,8 @@
 	import { getContext, onMount } from 'svelte'
 	import WebsocketTriggerEditor from './WebsocketTriggerEditor.svelte'
 	import { isCloudHosted } from '$lib/cloud'
-
+	import TriggersEditorSection from './TriggersEditorSection.svelte'
+	import Section from '$lib/components/Section.svelte'
 	export let isFlow: boolean
 	export let path: string
 	export let newItem: boolean = false
@@ -66,48 +65,52 @@
 	</Alert>
 {:else}
 	<div class="flex flex-col gap-4">
-		{#if newItem}
-			<Alert title="Triggers disabled" type="warning" size="xs">
-				Deploy the {isFlow ? 'flow' : 'script'} to add WS triggers.
-			</Alert>
-		{:else if wsTriggers}
-			<Button
-				on:click={() => wsTriggerEditor?.openNew(isFlow, path)}
-				variant="border"
-				color="light"
-				size="xs"
-				startIcon={{ icon: UnplugIcon }}
-			>
-				New WS Trigger
-			</Button>
-			{#if wsTriggers.length == 0}
-				<div class="text-xs text-secondary"> No WS triggers </div>
-			{:else}
-				<div class="flex flex-col divide-y pt-2">
-					{#each wsTriggers as wsTriggers (wsTriggers.path)}
-						<div class="grid grid-cols-5 text-2xs items-center py-2">
-							<div class="col-span-2 truncate">{wsTriggers.path}</div>
-							<div class="col-span-2 truncate">
-								{wsTriggers.url}
-							</div>
-							<div class="flex justify-end">
-								<button
-									on:click={() => wsTriggerEditor?.openEdit(wsTriggers.path, isFlow)}
-									class="px-2"
-								>
-									{#if wsTriggers.canWrite}
-										Edit
-									{:else}
-										View
-									{/if}
-								</button>
-							</div>
+		<TriggersEditorSection
+			on:saveTrigger={(e) => {
+				wsTriggerEditor?.openNew(isFlow, path)
+			}}
+			cloudDisabled={false}
+			captureType="websocket"
+			{isFlow}
+		/>
+
+		<Section label="Websockets">
+			<div class="flex flex-col gap-4">
+				{#if newItem}
+					<Alert title="Triggers disabled" type="warning" size="xs">
+						Deploy the {isFlow ? 'flow' : 'script'} to add WS triggers.
+					</Alert>
+				{:else if wsTriggers}
+					{#if wsTriggers.length == 0}
+						<div class="text-xs text-secondary text-center"> No WS triggers </div>
+					{:else}
+						<div class="flex flex-col divide-y pt-2">
+							{#each wsTriggers as wsTriggers (wsTriggers.path)}
+								<div class="grid grid-cols-5 text-2xs items-center py-2">
+									<div class="col-span-2 truncate">{wsTriggers.path}</div>
+									<div class="col-span-2 truncate">
+										{wsTriggers.url}
+									</div>
+									<div class="flex justify-end">
+										<button
+											on:click={() => wsTriggerEditor?.openEdit(wsTriggers.path, isFlow)}
+											class="px-2"
+										>
+											{#if wsTriggers.canWrite}
+												Edit
+											{:else}
+												View
+											{/if}
+										</button>
+									</div>
+								</div>
+							{/each}
 						</div>
-					{/each}
-				</div>
-			{/if}
-		{:else}
-			<Skeleton layout={[[8]]} />
-		{/if}
+					{/if}
+				{:else}
+					<Skeleton layout={[[8]]} />
+				{/if}
+			</div>
+		</Section>
 	</div>
 {/if}

From 610414375c7e7ab24b660d558fe3e6bf6c063b56 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 4 Dec 2024 12:28:16 +0000
Subject: [PATCH 03/42] Move connection status viewer in the head

---
 .../common/alert/ConnectionIndicator.svelte   | 34 +++++++++
 .../components/triggers/CaptureWrapper.svelte | 69 ++++++++-----------
 .../triggers/TriggersEditorSection.svelte     | 11 ++-
 3 files changed, 71 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/lib/components/common/alert/ConnectionIndicator.svelte

diff --git a/frontend/src/lib/components/common/alert/ConnectionIndicator.svelte b/frontend/src/lib/components/common/alert/ConnectionIndicator.svelte
new file mode 100644
index 0000000000000..27b64d7961004
--- /dev/null
+++ b/frontend/src/lib/components/common/alert/ConnectionIndicator.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Popover from '$lib/components/Popover.svelte'
+	import { Circle } from 'lucide-svelte'
+
+	export let connectionInfo:
+		| {
+				status: 'connected' | 'disconnected' | 'error'
+				message?: string
+		  }
+		| undefined = undefined
+</script>
+
+{#if connectionInfo}
+	<div class="center-center">
+		{#if connectionInfo.status === 'connected'}
+			<Popover notClickable>
+				<span class="h-4 w-4 center-center">
+					<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
+				</span>
+
+				<div slot="text"> {connectionInfo.message ?? ''} </div>
+			</Popover>
+		{:else}
+			<Popover notClickable>
+				<span class="h-4 w-4 center-center">
+					<Circle class="text-red-600 animate-ping absolute inline-flex fill-current" size={12} />
+					<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
+				</span>
+
+				<div slot="text"> {connectionInfo.message ?? ''} </div>
+			</Popover>
+		{/if}
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index df7877629b477..eecdb6077d2da 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Circle, Clipboard, Info, Trash2 } from 'lucide-svelte'
+	import { Clipboard, Info, Trash2 } from 'lucide-svelte'
 	import { base32 } from 'rfc4648'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
@@ -18,13 +18,9 @@
 	import { type TriggerKind } from '../triggers'
 	import Label from '../Label.svelte'
 	import ClipboardPanel from '../details/ClipboardPanel.svelte'
-	import CopyableCodeBlock from '../details/CopyableCodeBlock.svelte'
-	import { bash } from 'svelte-highlight/languages'
-	import Popover from '../Popover.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import Alert from '../common/alert/Alert.svelte'
 	import CustomPopover from '../CustomPopover.svelte'
-	import { page } from '$app/stores'
 	import { convert } from '@redocly/json-to-json-schema'
 	import SchemaViewer from '../SchemaViewer.svelte'
 	import RouteEditorConfigSection from './RouteEditorConfigSection.svelte'
@@ -39,6 +35,12 @@
 	export let captureMode = false
 	export let active = false
 	export let data: any = {}
+	export let connectionInfo:
+		| {
+				status: 'connected' | 'disconnected' | 'error'
+				message?: string
+		  }
+		| undefined = undefined
 
 	const dispatch = createEventDispatcher<{
 		openTriggers: {
@@ -228,13 +230,6 @@
 	}
 	$: emailAddress = getEmailAddress(emailDomain)
 
-	function webhook() {
-		return `${$page.url.origin}/api/w/${$workspaceStore}/capture_u/webhook/${
-			isFlow ? 'flow' : 'script'
-		}/${path}`
-	}
-	const webhookUrl = webhook()
-
 	let captures: Capture[] = []
 	async function refreshCaptures() {
 		captures = await CaptureService.listCaptures({
@@ -349,39 +344,29 @@
 	$: cloudDisabled = (captureType === 'websocket' || captureType === 'kafka') && isCloudHosted()
 
 	$: selectedCaptures = captures.filter((c) => c.trigger_kind === captureType)
+
+	function updateConnectionInfo(
+		captureType: CaptureTriggerKind,
+		config: CaptureConfig,
+		active: boolean
+	) {
+		if ((captureType === 'websocket' || captureType === 'kafka') && config && active) {
+			const serverEnabled = getServerEnabled(config)
+			const message = serverEnabled
+				? 'Websocket is connected'
+				: `Websocket is not connected${config.error ? ': ' + config.error : ''}`
+			connectionInfo = {
+				status: serverEnabled ? 'connected' : 'disconnected',
+				message
+			}
+		} else {
+			connectionInfo = undefined
+		}
+	}
+	$: updateConnectionInfo(captureType, config, active)
 </script>
 
 <div class="flex flex-col gap-4 w-full">
-	{#if (captureType === 'websocket' || captureType === 'kafka') && config && active}
-		{@const serverEnabled = getServerEnabled(config)}
-		<div class="flex flex-row gap-2 justify-between">
-			<div class="flex gap-1">
-				<div class="self-center">
-					{#if serverEnabled}
-						<Popover notClickable>
-							<span class="flex h-4 w-4">
-								<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
-							</span>
-							<div slot="text"> Websocket is connected </div>
-						</Popover>
-					{:else}
-						<Popover notClickable>
-							<span class="flex h-4 w-4">
-								<Circle
-									class="text-red-600 animate-ping absolute inline-flex fill-current"
-									size={12}
-								/>
-								<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
-							</span>
-							<div slot="text">
-								Websocket is not connected{config.error ? ': ' + config.error : ''}
-							</div>
-						</Popover>
-					{/if}
-				</div>
-			</div>
-		</div>
-	{/if}
 	{#if cloudDisabled}
 		<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
 			{capitalize(captureType)} triggers are disabled in the multi-tenant cloud.
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 12609e6666e25..c3af09b8ccd45 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -9,7 +9,7 @@
 	import { type CaptureTriggerKind } from '$lib/gen'
 	import type { FlowEditorContext } from '../flows/types'
 	import Toggle from '../Toggle.svelte'
-
+	import ConnectionIndicator from '$lib/components/common/alert/ConnectionIndicator.svelte'
 	export let cloudDisabled: boolean
 	export let captureType: CaptureTriggerKind
 	export let isFlow: boolean = false
@@ -27,6 +27,12 @@
 	let args: Record<string, any> = {}
 	let captureMode = false
 	let active = false
+	let connectionInfo:
+		| {
+				status: 'connected' | 'disconnected' | 'error'
+				message?: string
+		  }
+		| undefined = undefined
 
 	const dispatch = createEventDispatcher()
 
@@ -43,6 +49,8 @@
 		<div class=" flex flex-row grow w-min-0 gap-2 px-2 items-center justify-between">
 			<Toggle bind:checked={captureMode} options={{ left: 'Capture' }} size="xs" />
 			<div class="flex flex-row gap-2">
+				<ConnectionIndicator {connectionInfo} />
+
 				{#if captureMode}
 					<Button
 						size="xs2"
@@ -114,5 +122,6 @@
 		bind:handleCapture
 		bind:active
 		{data}
+		bind:connectionInfo
 	/>
 </Section>

From 8019c3a1d0eba8b8f0b04e72e5f3b3799892cca7 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 4 Dec 2024 14:20:58 +0000
Subject: [PATCH 04/42] change trigger section label

---
 .../src/lib/components/triggers/TriggersEditorSection.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index c3af09b8ccd45..c45a6eacd13c8 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -44,7 +44,7 @@
 	let handleCapture: (() => Promise<void>) | undefined
 </script>
 
-<Section label={`New ${captureTypeLabels[captureType]}`}>
+<Section label={`${captureTypeLabels[captureType]} Configuration`}>
 	<svelte:fragment slot="action">
 		<div class=" flex flex-row grow w-min-0 gap-2 px-2 items-center justify-between">
 			<Toggle bind:checked={captureMode} options={{ left: 'Capture' }} size="xs" />

From 124eabb9d4887578b3f68c579b5242de5e9d0c2a Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 4 Dec 2024 17:05:17 +0000
Subject: [PATCH 05/42] Add popover capture picker using melt ui

---
 frontend/package-lock.json                    |  98 +++++++-
 frontend/package.json                         |   4 +-
 frontend/src/lib/components/Label.svelte      |  11 +-
 .../components/flows/content/FlowInput.svelte |  10 +
 .../flows/pickers/InputSchemaPicker.svelte    |  68 ++++++
 .../components/meltComponents/Popover.svelte  |  47 ++++
 .../components/triggers/CaptureTable.svelte   | 209 +++++++++++++++++
 .../components/triggers/CaptureWrapper.svelte | 210 ++----------------
 frontend/svelte.config.js                     |   9 +-
 9 files changed, 461 insertions(+), 205 deletions(-)
 create mode 100644 frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
 create mode 100644 frontend/src/lib/components/meltComponents/Popover.svelte
 create mode 100644 frontend/src/lib/components/triggers/CaptureTable.svelte

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 539b62be83478..d793dadf12bce 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -85,6 +85,8 @@
 			"devDependencies": {
 				"@floating-ui/core": "^1.3.1",
 				"@hey-api/openapi-ts": "^0.43.0",
+				"@melt-ui/pp": "^0.3.2",
+				"@melt-ui/svelte": "^0.86.2",
 				"@playwright/test": "^1.34.3",
 				"@rgossiaux/svelte-headlessui": "^2.0.0",
 				"@sveltejs/adapter-static": "^3.0.0",
@@ -3554,6 +3556,16 @@
 			"integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
 			"dev": true
 		},
+		"node_modules/@internationalized/date": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.6.0.tgz",
+			"integrity": "sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -3666,6 +3678,58 @@
 			"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
 			"integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
 		},
+		"node_modules/@melt-ui/pp": {
+			"version": "0.3.2",
+			"resolved": "https://registry.npmjs.org/@melt-ui/pp/-/pp-0.3.2.tgz",
+			"integrity": "sha512-xKkPvaIAFinklLXcQOpwZ8YSpqAFxykjWf8Y/fSJQwsixV/0rcFs07hJ49hJjPy5vItvw5Qa0uOjzFUbXzBypQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"estree-walker": "^3.0.3",
+				"magic-string": "^0.30.5"
+			},
+			"peerDependencies": {
+				"@melt-ui/svelte": ">= 0.29.0",
+				"svelte": "^3.55.0 || ^4.0.0 || ^5.0.0-next.1"
+			}
+		},
+		"node_modules/@melt-ui/svelte": {
+			"version": "0.86.2",
+			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.86.2.tgz",
+			"integrity": "sha512-wRVN603oIt1aXvx2QRmKqVDJgTScSvr/WJLLokkD8c4QzHgn6pfpPtUKmhV6Dvkk+OY89OG/1Irkd6ouA50Ztw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.3.1",
+				"@floating-ui/dom": "^1.4.5",
+				"@internationalized/date": "^3.5.0",
+				"dequal": "^2.0.3",
+				"focus-trap": "^7.5.2",
+				"nanoid": "^5.0.4"
+			},
+			"peerDependencies": {
+				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.118"
+			}
+		},
+		"node_modules/@melt-ui/svelte/node_modules/nanoid": {
+			"version": "5.0.9",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.9.tgz",
+			"integrity": "sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"nanoid": "bin/nanoid.js"
+			},
+			"engines": {
+				"node": "^18 || >=20"
+			}
+		},
 		"node_modules/@mistralai/mistralai": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/@mistralai/mistralai/-/mistralai-1.3.0.tgz",
@@ -4315,6 +4379,16 @@
 				"vite": "^5.0.0"
 			}
 		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.15",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+			"integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.8.0"
+			}
+		},
 		"node_modules/@tailwindcss/forms": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
@@ -7292,6 +7366,16 @@
 			"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
 			"dev": true
 		},
+		"node_modules/focus-trap": {
+			"version": "7.6.2",
+			"resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.2.tgz",
+			"integrity": "sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tabbable": "^6.2.0"
+			}
+		},
 		"node_modules/follow-redirects": {
 			"version": "1.15.6",
 			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -12829,6 +12913,13 @@
 				"node": ">= 10"
 			}
 		},
+		"node_modules/tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/table": {
 			"version": "6.8.2",
 			"resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
@@ -13112,9 +13203,10 @@
 			"dev": true
 		},
 		"node_modules/tslib": {
-			"version": "2.6.2",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"license": "0BSD"
 		},
 		"node_modules/tsutils": {
 			"version": "3.21.0",
diff --git a/frontend/package.json b/frontend/package.json
index a6ecec3d4370c..468323f463b80 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,8 @@
 	"devDependencies": {
 		"@floating-ui/core": "^1.3.1",
 		"@hey-api/openapi-ts": "^0.43.0",
+		"@melt-ui/pp": "^0.3.2",
+		"@melt-ui/svelte": "^0.86.2",
 		"@playwright/test": "^1.34.3",
 		"@rgossiaux/svelte-headlessui": "^2.0.0",
 		"@sveltejs/adapter-static": "^3.0.0",
@@ -128,8 +130,8 @@
 		"ol": "^7.4.0",
 		"openai": "^4.57.2",
 		"p-limit": "^6.1.0",
-		"pdfjs-dist": "4.8.69",
 		"panzoom": "^9.4.3",
+		"pdfjs-dist": "4.8.69",
 		"quill": "^1.3.7",
 		"rfc4648": "^1.5.3",
 		"svelte-carousel": "^1.0.25",
diff --git a/frontend/src/lib/components/Label.svelte b/frontend/src/lib/components/Label.svelte
index f53a8d9ca24dd..24acffca29303 100644
--- a/frontend/src/lib/components/Label.svelte
+++ b/frontend/src/lib/components/Label.svelte
@@ -3,14 +3,17 @@
 	export let label: string | undefined = undefined
 	export let primary = false
 	export let disabled = false
+	export let headless = false
 </script>
 
 <div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
 	<div class="flex flex-row justify-between items-center w-full">
-		<div class="flex flex-row items-center gap-1">
-			<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
-			<slot name="header" />
-		</div>
+		{#if !headless}
+			<div class="flex flex-row items-center gap-1">
+				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
+				<slot name="header" />
+			</div>
+		{/if}
 		<slot name="error" />
 		<slot name="action" />
 	</div>
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 0834e03ab2127..df13a63ed0239 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -16,6 +16,8 @@
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import CapturePanel from '$lib/components/triggers/CapturePanel.svelte'
 	import { insertNewPreprocessorModule } from '../flowStateUtils'
+	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	import InputSchemaPicker from '$lib/components/flows/pickers/InputSchemaPicker.svelte'
 
 	export let noEditor: boolean
 	export let disabled: boolean
@@ -55,6 +57,14 @@
 		{#if tabSelected === 'input'}
 			<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
 				<div class="text-sm">Copy input's schema from</div>
+				<Popover closeButton={false}>
+					<svelte:fragment slot="trigger">
+						<Button color="dark" size="xs" nonCaptureEvent>Captures</Button>
+					</svelte:fragment>
+					<svelte:fragment slot="content">
+						<InputSchemaPicker isFlow={true} path={$pathStore} />
+					</svelte:fragment>
+				</Popover>
 				<Button
 					color="dark"
 					size="xs"
diff --git a/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte b/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
new file mode 100644
index 0000000000000..5f09dcf87a3a1
--- /dev/null
+++ b/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { type CaptureTriggerKind } from '$lib/gen'
+	import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
+	import { Webhook, Route, Unplug, Mail } from 'lucide-svelte'
+	import KafkaIcon from '$lib/components/icons/KafkaIcon.svelte'
+	import { enterpriseLicense } from '$lib/stores'
+
+	let selected: CaptureTriggerKind = 'webhook'
+
+	export let isFlow = false
+	export let path: string
+</script>
+
+<div class="w-[650px] flex flex-row divide-x overflow-hidden">
+	<div class="w-40">
+		<div class="flex flex-col bg-surface-secondary">
+			<button
+				class={`${selected === 'webhook' ? 'bg-surface' : ''} p-2`}
+				on:click={() => (selected = 'webhook')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Webhook size={16} />
+					<p class="text-xs text-secondary">Webhook</p>
+				</div>
+			</button>
+			<button
+				class={`${selected === 'http' ? 'bg-surface' : ''} p-2`}
+				on:click={() => (selected = 'http')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Route size={16} />
+					<p class="text-xs text-secondary">HTTP</p>
+				</div>
+			</button>
+			<button
+				class={`${selected === 'websocket' ? 'bg-surface' : ''} p-2`}
+				on:click={() => (selected = 'websocket')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Unplug size={16} />
+					<p class="text-xs text-secondary">Websocket</p>
+				</div>
+			</button>
+			<button
+				class={`${selected === 'email' ? 'bg-surface' : ''} p-2`}
+				on:click={() => (selected = 'email')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Mail size={16} />
+					<p class="text-xs text-secondary">Email</p>
+				</div>
+			</button>
+			<button
+				disabled={!$enterpriseLicense}
+				class={`${selected === 'kafka' ? 'bg-surface' : ''} p-2`}
+				on:click={() => (selected = 'kafka')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<KafkaIcon size={16} />
+					<p class="text-xs text-secondary">Kafka</p>
+				</div>
+			</button>
+		</div>
+	</div>
+	<div class="grow p-2">
+		<CaptureTable captureType={selected} {isFlow} {path} />
+	</div>
+</div>
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
new file mode 100644
index 0000000000000..4129971cc8a33
--- /dev/null
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { createPopover, createSync, melt } from '@melt-ui/svelte'
+	import { fade } from 'svelte/transition'
+	import { X } from 'lucide-svelte'
+
+	export let open = false
+	export let closeButton: boolean = true
+
+	const {
+		elements: { trigger, content, arrow, close },
+		states
+	} = createPopover({
+		forceVisible: true
+	})
+
+	const sync = createSync(states)
+	$: sync.open(open, (v) => (open = v))
+</script>
+
+<button type="button" use:melt={$trigger} aria-label="Popup button">
+	<slot name="trigger" />
+</button>
+
+{#if open}
+	<div use:melt={$content} transition:fade={{ duration: 100 }} class="content">
+		<div use:melt={$arrow} />
+		<slot name="content" />
+		{#if closeButton}
+			<button class="close" use:melt={$close}>
+				<X class="size-3" />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style lang="postcss">
+	.close {
+		@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-full;
+		@apply text-primary  transition-colors hover:bg-surface-hover;
+		@apply focus-visible:ring focus-visible:ring-gray-400 focus-visible:ring-offset-2;
+		@apply bg-surface p-0 text-sm font-medium;
+	}
+
+	.content {
+		@apply z-10 w-fit rounded-[4px] bg-surface p-0 overflow-hidden shadow-md;
+	}
+</style>
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
new file mode 100644
index 0000000000000..4540c017536b0
--- /dev/null
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -0,0 +1,209 @@
+<script lang="ts">
+	import Label from '../Label.svelte'
+	import { Clipboard, Info, Trash2 } from 'lucide-svelte'
+	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import { copyToClipboard } from '$lib/utils'
+	import Button from '../common/button/Button.svelte'
+	import CustomPopover from '../CustomPopover.svelte'
+	import { convert } from '@redocly/json-to-json-schema'
+	import SchemaViewer from '../SchemaViewer.svelte'
+	import { isObject } from '$lib/utils'
+	import { createEventDispatcher } from 'svelte'
+	import { type TriggerKind } from '../triggers'
+	import { CaptureService } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
+	import { type CaptureTriggerKind } from '$lib/gen'
+	import type { Capture } from '$lib/gen'
+
+	export let path: string
+	export let hasPreprocessor = false
+	export let canHavePreprocessor = false
+	export let isFlow = false
+	export let captureType: CaptureTriggerKind = 'webhook'
+	export let headless = false
+
+	let captures: Capture[] = []
+	let selectedCaptures: any[] = []
+	let testKind: 'preprocessor' | 'main' = 'main'
+
+	$: hasPreprocessor && (testKind = 'preprocessor')
+
+	$: selectedCaptures = captures.filter((c) => c.trigger_kind === captureType)
+
+	let deleteLoading: number | null = null
+	async function deleteCapture(id: number) {
+		deleteLoading = id
+		try {
+			await CaptureService.deleteCapture({
+				workspace: $workspaceStore!,
+				id
+			})
+			refreshCaptures()
+		} finally {
+			deleteLoading = null
+		}
+	}
+
+	const dispatch = createEventDispatcher<{
+		openTriggers: {
+			kind: TriggerKind
+			config: Record<string, any>
+		}
+		applyArgs: {
+			kind: 'main' | 'preprocessor'
+			args: Record<string, any> | undefined
+		}
+		addPreprocessor: null
+		updateSchema: {
+			schema: any
+			redirect: boolean
+		}
+	}>()
+
+	export async function refreshCaptures() {
+		console.log('dbg refreshCaptures')
+		captures = await CaptureService.listCaptures({
+			workspace: $workspaceStore!,
+			runnableKind: isFlow ? 'flow' : 'script',
+			path
+		})
+	}
+	refreshCaptures()
+</script>
+
+<Label label="Captures" {headless}>
+	<svelte:fragment slot="action">
+		{#if canHavePreprocessor}
+			<div>
+				<ToggleButtonGroup bind:selected={testKind}>
+					<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
+					<ToggleButton
+						value="preprocessor"
+						label="Preprocessor"
+						small
+						tooltip="When the runnable has a preprocessor, it receives additional information about the request"
+					/>
+				</ToggleButtonGroup>
+			</div>
+		{/if}
+	</svelte:fragment>
+	<div class="flex flex-col gap-1 mt-2">
+		{#if selectedCaptures.length === 0}
+			<div class="text-xs text-secondary">No {captureType} captures yet</div>
+		{:else}
+			{#each selectedCaptures as capture}
+				{@const payload = isObject(capture.payload) ? capture.payload : {}}
+				{@const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {}}
+				{@const payloadData =
+					testKind === 'preprocessor'
+						? {
+								...payload,
+								...triggerExtra
+						  }
+						: payload}
+				{@const schema =
+					isFlow && testKind === 'main'
+						? { required: [], properties: {}, ...convert(payloadData) }
+						: {}}
+				<div class="flex flex-row gap-1">
+					<div class="text-xs border p-2 rounded-md overflow-auto grow whitespace-nowrap">
+						{JSON.stringify(payloadData)}
+					</div>
+					<Button
+						size="xs2"
+						color="light"
+						variant="border"
+						on:click={() => {
+							copyToClipboard(JSON.stringify(payloadData))
+						}}
+						iconOnly
+						startIcon={{ icon: Clipboard }}
+					/>
+
+					{#if isFlow && testKind === 'main'}
+						<CustomPopover>
+							<Button
+								size="xs"
+								color="light"
+								variant="border"
+								on:click={() => {
+									dispatch('updateSchema', { schema, redirect: true })
+								}}
+								wrapperClasses="h-full"
+							>
+								Apply schema
+							</Button>
+
+							<svelte:fragment slot="overlay">
+								{#if schema}
+									<div class="min-w-[400px]">
+										<SchemaViewer {schema} />
+									</div>
+								{/if}
+							</svelte:fragment>
+						</CustomPopover>
+					{/if}
+
+					{#if testKind === 'preprocessor' && !hasPreprocessor}
+						<CustomPopover noPadding>
+							<Button
+								size="xs"
+								color="dark"
+								disabled
+								endIcon={{
+									icon: Info
+								}}
+								wrapperClasses="h-full"
+							>
+								Apply args
+							</Button>
+							<svelte:fragment slot="overlay">
+								<div class="text-sm p-2 flex flex-col gap-1 items-start">
+									<p>You need to add a preprocessor to use preprocessor captures as args</p>
+									<Button
+										size="xs"
+										color="dark"
+										on:click={() => {
+											dispatch('addPreprocessor')
+										}}
+									>
+										Add preprocessor
+									</Button>
+								</div>
+							</svelte:fragment>
+						</CustomPopover>
+					{:else}
+						<Button
+							size="xs"
+							color="dark"
+							on:click={() => {
+								if (isFlow && testKind === 'main') {
+									dispatch('updateSchema', { schema, redirect: false })
+								}
+								dispatch('applyArgs', {
+									kind: testKind,
+									args: payloadData
+								})
+							}}
+							disabled={testKind === 'preprocessor' && !hasPreprocessor}
+						>
+							{isFlow && testKind === 'main' ? 'Apply schema and args' : 'Apply args'}
+						</Button>
+					{/if}
+
+					<Button
+						size="xs2"
+						color="red"
+						iconOnly
+						startIcon={{ icon: Trash2 }}
+						loading={deleteLoading === capture.id}
+						on:click={() => {
+							deleteCapture(capture.id)
+						}}
+					/>
+				</div>
+			{/each}
+		{/if}
+	</div>
+</Label>
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index eecdb6077d2da..cd7831b81de43 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -1,32 +1,23 @@
 <script lang="ts">
-	import { Clipboard, Info, Trash2 } from 'lucide-svelte'
 	import { base32 } from 'rfc4648'
-	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
-	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import SchemaForm from '../SchemaForm.svelte'
 	import { workspaceStore } from '$lib/stores'
 	import {
 		CaptureService,
 		SettingService,
-		type Capture,
 		type CaptureConfig,
 		type CaptureTriggerKind
 	} from '$lib/gen'
-	import Button from '../common/button/Button.svelte'
-	import { capitalize, copyToClipboard, isObject, sendUserToast, sleep } from '$lib/utils'
-	import { createEventDispatcher, onDestroy } from 'svelte'
-	import { type TriggerKind } from '../triggers'
+	import { onDestroy } from 'svelte'
+	import { capitalize, isObject, sendUserToast, sleep } from '$lib/utils'
 	import Label from '../Label.svelte'
 	import ClipboardPanel from '../details/ClipboardPanel.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import Alert from '../common/alert/Alert.svelte'
-	import CustomPopover from '../CustomPopover.svelte'
-	import { convert } from '@redocly/json-to-json-schema'
-	import SchemaViewer from '../SchemaViewer.svelte'
 	import RouteEditorConfigSection from './RouteEditorConfigSection.svelte'
 	import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
 	import WebhooksConfigSection from './WebhooksConfigSection.svelte'
-
+	import CaptureTable from './CaptureTable.svelte'
 	export let isFlow: boolean
 	export let path: string
 	export let hasPreprocessor: boolean
@@ -42,28 +33,9 @@
 		  }
 		| undefined = undefined
 
-	const dispatch = createEventDispatcher<{
-		openTriggers: {
-			kind: TriggerKind
-			config: Record<string, any>
-		}
-		applyArgs: {
-			kind: 'main' | 'preprocessor'
-			args: Record<string, any> | undefined
-		}
-		addPreprocessor: null
-		updateSchema: {
-			schema: any
-			redirect: boolean
-		}
-	}>()
-
 	export let args: Record<string, any> = {}
 
 	let isValid = true
-	let testKind: 'preprocessor' | 'main' = 'main'
-
-	$: hasPreprocessor && (testKind = 'preprocessor')
 
 	$: captureType && (isValid = true)
 
@@ -230,16 +202,6 @@
 	}
 	$: emailAddress = getEmailAddress(emailDomain)
 
-	let captures: Capture[] = []
-	async function refreshCaptures() {
-		captures = await CaptureService.listCaptures({
-			workspace: $workspaceStore!,
-			runnableKind: isFlow ? 'flow' : 'script',
-			path
-		})
-	}
-	refreshCaptures()
-
 	let captureConfigs: {
 		[key: string]: CaptureConfig
 	} = {}
@@ -268,7 +230,10 @@
 	}
 	getCaptureConfigs()
 
-	export async function capture() {
+	let refreshCaptures: () => Promise<void>
+
+	async function capture() {
+		console.log('dbg capture')
 		let i = 0
 		active = true
 		while (active) {
@@ -287,20 +252,6 @@
 		}
 	}
 
-	let deleteLoading: number | null = null
-	async function deleteCapture(id: number) {
-		deleteLoading = id
-		try {
-			await CaptureService.deleteCapture({
-				workspace: $workspaceStore!,
-				id
-			})
-			refreshCaptures()
-		} finally {
-			deleteLoading = null
-		}
-	}
-
 	function stopAndSetDefaultArgs() {
 		active = false
 		if (captureType in captureConfigs) {
@@ -343,11 +294,9 @@
 
 	$: cloudDisabled = (captureType === 'websocket' || captureType === 'kafka') && isCloudHosted()
 
-	$: selectedCaptures = captures.filter((c) => c.trigger_kind === captureType)
-
 	function updateConnectionInfo(
 		captureType: CaptureTriggerKind,
-		config: CaptureConfig,
+		config: CaptureConfig | undefined,
 		active: boolean
 	) {
 		if ((captureType === 'websocket' || captureType === 'kafka') && config && active) {
@@ -399,141 +348,14 @@
 		{/if}
 
 		{#if captureMode}
-			<Label label="Captures">
-				<svelte:fragment slot="action">
-					{#if canHavePreprocessor}
-						<div>
-							<ToggleButtonGroup bind:selected={testKind}>
-								<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
-								<ToggleButton
-									value="preprocessor"
-									label="Preprocessor"
-									small
-									tooltip="When the runnable has a preprocessor, it receives additional information about the request"
-								/>
-							</ToggleButtonGroup>
-						</div>
-					{/if}
-				</svelte:fragment>
-				<div class="flex flex-col gap-1 mt-2">
-					{#if selectedCaptures.length === 0}
-						<div class="text-xs text-secondary">No {captureType} captures yet</div>
-					{:else}
-						{#each selectedCaptures as capture}
-							{@const payload = isObject(capture.payload) ? capture.payload : {}}
-							{@const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {}}
-							{@const payloadData =
-								testKind === 'preprocessor'
-									? {
-											...payload,
-											...triggerExtra
-									  }
-									: payload}
-							{@const schema =
-								isFlow && testKind === 'main'
-									? { required: [], properties: {}, ...convert(payloadData) }
-									: {}}
-							<div class="flex flex-row gap-1">
-								<div class="text-xs border p-2 rounded-md overflow-auto grow whitespace-nowrap">
-									{JSON.stringify(payloadData)}
-								</div>
-								<Button
-									size="xs2"
-									color="light"
-									variant="border"
-									on:click={() => {
-										copyToClipboard(JSON.stringify(payloadData))
-									}}
-									iconOnly
-									startIcon={{ icon: Clipboard }}
-								/>
-
-								{#if isFlow && testKind === 'main'}
-									<CustomPopover>
-										<Button
-											size="xs"
-											color="light"
-											variant="border"
-											on:click={() => {
-												dispatch('updateSchema', { schema, redirect: true })
-											}}
-											wrapperClasses="h-full"
-										>
-											Apply schema
-										</Button>
-
-										<svelte:fragment slot="overlay">
-											{#if schema}
-												<div class="min-w-[400px]">
-													<SchemaViewer {schema} />
-												</div>
-											{/if}
-										</svelte:fragment>
-									</CustomPopover>
-								{/if}
-
-								{#if testKind === 'preprocessor' && !hasPreprocessor}
-									<CustomPopover noPadding>
-										<Button
-											size="xs"
-											color="dark"
-											disabled
-											endIcon={{
-												icon: Info
-											}}
-											wrapperClasses="h-full"
-										>
-											Apply args
-										</Button>
-										<svelte:fragment slot="overlay">
-											<div class="text-sm p-2 flex flex-col gap-1 items-start">
-												<p>You need to add a preprocessor to use preprocessor captures as args</p>
-												<Button
-													size="xs"
-													color="dark"
-													on:click={() => {
-														dispatch('addPreprocessor')
-													}}
-												>
-													Add preprocessor
-												</Button>
-											</div>
-										</svelte:fragment>
-									</CustomPopover>
-								{:else}
-									<Button
-										size="xs"
-										color="dark"
-										on:click={() => {
-											if (isFlow && testKind === 'main') {
-												dispatch('updateSchema', { schema, redirect: false })
-											}
-											dispatch('applyArgs', {
-												kind: testKind,
-												args: payloadData
-											})
-										}}
-										disabled={testKind === 'preprocessor' && !hasPreprocessor}
-									>
-										{isFlow && testKind === 'main' ? 'Apply schema and args' : 'Apply args'}
-									</Button>
-								{/if}
-
-								<Button
-									size="xs2"
-									color="red"
-									iconOnly
-									startIcon={{ icon: Trash2 }}
-									loading={deleteLoading === capture.id}
-									on:click={() => {
-										deleteCapture(capture.id)
-									}}
-								/>
-							</div>
-						{/each}
-					{/if}
-				</div>
-			</Label>
+			<CaptureTable
+				{captureType}
+				{hasPreprocessor}
+				{canHavePreprocessor}
+				{isFlow}
+				{path}
+				bind:refreshCaptures
+			/>
 		{/if}
 	{/if}
 </div>
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index 81961f82b9cdb..12eae9d139352 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -1,15 +1,18 @@
 import preprocess from 'svelte-preprocess'
 import adapter from '@sveltejs/adapter-static'
+import { preprocessMeltUI, sequence } from '@melt-ui/pp'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
-	preprocess: [
+	preprocess: sequence([
 		preprocess({
 			postcss: true
-		})
-	],
+		}),
+			preprocessMeltUI()
+		]),
+
 	kit: {
 		adapter:
 			process.env.CLOUDFLARE || process.env.NOCATCHALL

From ed40d96e360d833dc7846f87c9e61384ca3a882a Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 4 Dec 2024 17:42:00 +0000
Subject: [PATCH 06/42] Add shortcut to triggers capture from input form

---
 frontend/src/lib/components/Dev.svelte        |  3 ++-
 .../src/lib/components/FlowBuilder.svelte     |  5 +++--
 .../src/lib/components/ScriptBuilder.svelte   |  3 ++-
 .../details/DetailPageLayout.svelte           |  3 ++-
 .../flows/content/FlowEditorPanel.svelte      |  4 +++-
 .../components/flows/content/FlowInput.svelte |  2 +-
 .../flows/content/FlowPathViewer.svelte       |  3 ++-
 .../flows/pickers/InputSchemaPicker.svelte    |  2 +-
 frontend/src/lib/components/triggers.ts       |  1 +
 .../components/triggers/CaptureTable.svelte   | 20 ++++++++++++++++++-
 .../triggers/TriggersEditorSection.svelte     | 18 ++++++++++++-----
 frontend/src/routes/flows/dev/+page.svelte    |  3 ++-
 12 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index 22d4f1b22a13c..7f20b6c58f5a0 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -489,7 +489,8 @@
 		selectedTrigger: selectedTriggerStore,
 		triggersCount: triggersCount,
 		simplifiedPoll: writable(false),
-		defaultValues: writable(undefined)
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined)
 	})
 	setContext<FlowEditorContext>('FlowEditorContext', {
 		selectedId: selectedIdStore,
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index af622f661dcd6..5ca09cd87fe94 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -107,7 +107,7 @@
 	export let disabledFlowInputs = false
 	export let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
 	export let version: number | undefined = undefined
-	export let setSavedraftCb:  ((cb: () => void) => void) | undefined = undefined
+	export let setSavedraftCb: ((cb: () => void) => void) | undefined = undefined
 
 	// Used by multiplayer deploy collision warning
 	let deployedValue: Value | undefined = undefined // Value to diff against
@@ -536,7 +536,8 @@
 		primarySchedule: primaryScheduleStore,
 		triggersCount,
 		simplifiedPoll,
-		defaultValues: writable(undefined)
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined)
 	})
 
 	async function loadTriggers() {
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index eee8b8f314691..904080a61b42a 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -142,7 +142,8 @@
 		primarySchedule: primaryScheduleStore,
 		triggersCount,
 		simplifiedPoll,
-		defaultValues: triggerDefaultValuesStore
+		defaultValues: triggerDefaultValuesStore,
+		captureOn: writable(undefined)
 	})
 
 	const enterpriseLangs = ['bigquery', 'snowflake', 'mssql']
diff --git a/frontend/src/lib/components/details/DetailPageLayout.svelte b/frontend/src/lib/components/details/DetailPageLayout.svelte
index e9b74666f1417..d951f757411c4 100644
--- a/frontend/src/lib/components/details/DetailPageLayout.svelte
+++ b/frontend/src/lib/components/details/DetailPageLayout.svelte
@@ -29,7 +29,8 @@
 		primarySchedule: primaryScheduleStore,
 		triggersCount,
 		simplifiedPoll,
-		defaultValues: writable(undefined)
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined)
 	})
 </script>
 
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index cd5e9bc4b8824..adb699054a495 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -22,7 +22,7 @@
 	const { selectedId, flowStore, flowStateStore, flowInputsStore, pathStore, initialPath } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
-	const { selectedTrigger, defaultValues } = getContext<TriggerContext>('TriggerContext')
+	const { selectedTrigger, defaultValues, captureOn } = getContext<TriggerContext>('TriggerContext')
 	function checkDup(modules: FlowModule[]): string | undefined {
 		let seenModules: string[] = []
 		for (const m of modules) {
@@ -66,9 +66,11 @@
 		{noEditor}
 		disabled={disabledFlowInputs}
 		on:openTriggers={(ev) => {
+			console.log('dbg openTriggers', ev.detail)
 			$selectedId = 'triggers'
 			selectedTrigger.set(ev.detail.kind)
 			defaultValues.set(ev.detail.config)
+			captureOn.set(true)
 		}}
 		on:applyArgs
 	/>
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index df13a63ed0239..97f0009ae59f2 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -62,7 +62,7 @@
 						<Button color="dark" size="xs" nonCaptureEvent>Captures</Button>
 					</svelte:fragment>
 					<svelte:fragment slot="content">
-						<InputSchemaPicker isFlow={true} path={$pathStore} />
+						<InputSchemaPicker isFlow={true} path={$pathStore} on:openTriggers />
 					</svelte:fragment>
 				</Popover>
 				<Button
diff --git a/frontend/src/lib/components/flows/content/FlowPathViewer.svelte b/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
index b80df515ede57..04de37b099e98 100644
--- a/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
+++ b/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
@@ -22,7 +22,8 @@
 		selectedTrigger: selectedTriggerStore,
 		triggersCount: triggersCount,
 		simplifiedPoll: writable(false),
-		defaultValues: writable(undefined)
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined)
 	})
 
 	async function loadFlow(path: string) {
diff --git a/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte b/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
index 5f09dcf87a3a1..e156524e37b0d 100644
--- a/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
@@ -63,6 +63,6 @@
 		</div>
 	</div>
 	<div class="grow p-2">
-		<CaptureTable captureType={selected} {isFlow} {path} />
+		<CaptureTable captureType={selected} {isFlow} {path} addButton={true} on:openTriggers />
 	</div>
 </div>
diff --git a/frontend/src/lib/components/triggers.ts b/frontend/src/lib/components/triggers.ts
index a4447b0795e00..e585c7d989621 100644
--- a/frontend/src/lib/components/triggers.ts
+++ b/frontend/src/lib/components/triggers.ts
@@ -15,6 +15,7 @@ export type TriggerContext = {
 	triggersCount: Writable<TriggersCount | undefined>
 	simplifiedPoll: Writable<boolean | undefined>
 	defaultValues: Writable<Record<string, any> | undefined>
+	captureOn: Writable<boolean | undefined>
 }
 
 export function setScheduledPollSchedule(
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index 4540c017536b0..de0458ceb9acc 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Label from '../Label.svelte'
-	import { Clipboard, Info, Trash2 } from 'lucide-svelte'
+	import { Clipboard, Info, Trash2, Plus } from 'lucide-svelte'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import { copyToClipboard } from '$lib/utils'
@@ -15,6 +15,7 @@
 	import { workspaceStore } from '$lib/stores'
 	import { type CaptureTriggerKind } from '$lib/gen'
 	import type { Capture } from '$lib/gen'
+	import { captureTriggerKindToTriggerKind } from '../triggers'
 
 	export let path: string
 	export let hasPreprocessor = false
@@ -22,6 +23,7 @@
 	export let isFlow = false
 	export let captureType: CaptureTriggerKind = 'webhook'
 	export let headless = false
+	export let addButton = false
 
 	let captures: Capture[] = []
 	let selectedCaptures: any[] = []
@@ -73,6 +75,22 @@
 </script>
 
 <Label label="Captures" {headless}>
+	<svelte:fragment slot="header">
+		{#if addButton}
+			<Button
+				size="xs2"
+				color="light"
+				variant="contained"
+				iconOnly
+				startIcon={{ icon: Plus }}
+				on:click={() =>
+					dispatch('openTriggers', {
+						kind: captureTriggerKindToTriggerKind(captureType),
+						config: {}
+					})}
+			/>
+		{/if}
+	</svelte:fragment>
 	<svelte:fragment slot="action">
 		{#if canHavePreprocessor}
 			<div>
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index c45a6eacd13c8..36997c392bce2 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -10,6 +10,8 @@
 	import type { FlowEditorContext } from '../flows/types'
 	import Toggle from '../Toggle.svelte'
 	import ConnectionIndicator from '$lib/components/common/alert/ConnectionIndicator.svelte'
+	import type { TriggerContext } from '$lib/components/triggers'
+	import { onDestroy } from 'svelte'
 	export let cloudDisabled: boolean
 	export let captureType: CaptureTriggerKind
 	export let isFlow: boolean = false
@@ -24,8 +26,10 @@
 		email: 'Email'
 	}
 
+	const { captureOn } = getContext<TriggerContext>('TriggerContext')
+
 	let args: Record<string, any> = {}
-	let captureMode = false
+
 	let active = false
 	let connectionInfo:
 		| {
@@ -42,16 +46,20 @@
 	$: newItem = initialPath === ''
 
 	let handleCapture: (() => Promise<void>) | undefined
+
+	onDestroy(() => {
+		$captureOn = false
+	})
 </script>
 
 <Section label={`${captureTypeLabels[captureType]} Configuration`}>
 	<svelte:fragment slot="action">
 		<div class=" flex flex-row grow w-min-0 gap-2 px-2 items-center justify-between">
-			<Toggle bind:checked={captureMode} options={{ left: 'Capture' }} size="xs" />
+			<Toggle bind:checked={$captureOn} options={{ left: 'Capture' }} size="xs" />
 			<div class="flex flex-row gap-2">
 				<ConnectionIndicator {connectionInfo} />
 
-				{#if captureMode}
+				{#if $captureOn}
 					<Button
 						size="xs2"
 						on:click={() => handleCapture?.()}
@@ -86,7 +94,7 @@
 							size="xs2"
 							on:click={() => {
 								dispatch('saveTrigger', {
-									config: { ...args, captureMode }
+									config: args
 								})
 							}}
 							startIcon={{ icon: Save }}
@@ -118,7 +126,7 @@
 			}
 		}}
 		bind:args
-		{captureMode}
+		captureMode={$captureOn}
 		bind:handleCapture
 		bind:active
 		{data}
diff --git a/frontend/src/routes/flows/dev/+page.svelte b/frontend/src/routes/flows/dev/+page.svelte
index 9e0b005da64f4..86e718ca14050 100644
--- a/frontend/src/routes/flows/dev/+page.svelte
+++ b/frontend/src/routes/flows/dev/+page.svelte
@@ -83,7 +83,8 @@
 		selectedTrigger: selectedTriggerStore,
 		triggersCount: triggersCount,
 		simplifiedPoll: writable(false),
-		defaultValues: writable(undefined)
+		defaultValues: writable(undefined),
+		captureOn: writable(undefined)
 	})
 
 	setContext<FlowEditorContext>('FlowEditorContext', {

From 09010782edcde81a2e2e27303bbf23578f5c6b74 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 4 Dec 2024 17:57:03 +0000
Subject: [PATCH 07/42] remove capture tab in input

---
 .../components/flows/content/FlowInput.svelte | 151 +++++++-----------
 1 file changed, 57 insertions(+), 94 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 97f0009ae59f2..5a09e5aeaed87 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -12,17 +12,13 @@
 	import EditableSchemaForm from '$lib/components/EditableSchemaForm.svelte'
 	import AddProperty from '$lib/components/schema/AddProperty.svelte'
 	import FlowInputViewer from '$lib/components/FlowInputViewer.svelte'
-	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
-	import Tab from '$lib/components/common/tabs/Tab.svelte'
-	import CapturePanel from '$lib/components/triggers/CapturePanel.svelte'
-	import { insertNewPreprocessorModule } from '../flowStateUtils'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import InputSchemaPicker from '$lib/components/flows/pickers/InputSchemaPicker.svelte'
 
 	export let noEditor: boolean
 	export let disabled: boolean
 
-	const { flowStore, flowStateStore, previewArgs, initialPath, pathStore, selectedId } =
+	const { flowStore, flowStateStore, previewArgs, initialPath, pathStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
 	let inputLibraryDrawer: Drawer
@@ -43,103 +39,70 @@
 		jsonPayload.closeDrawer()
 	}
 	const yOffset = 191
-
-	let tabSelected = 'input'
 </script>
 
 <FlowCard {noEditor} title="Flow Input">
 	{#if !disabled}
-		<Tabs bind:selected={tabSelected}>
-			<Tab value="input">Input form</Tab>
-			<Tab value="capture">Capture</Tab>
-		</Tabs>
-
-		{#if tabSelected === 'input'}
-			<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
-				<div class="text-sm">Copy input's schema from</div>
-				<Popover closeButton={false}>
-					<svelte:fragment slot="trigger">
-						<Button color="dark" size="xs" nonCaptureEvent>Captures</Button>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
-						<InputSchemaPicker isFlow={true} path={$pathStore} on:openTriggers />
-					</svelte:fragment>
-				</Popover>
-				<Button
-					color="dark"
-					size="xs"
-					on:click={() => {
-						jsonPayload.openDrawer()
-					}}
-				>
-					A JSON
-				</Button>
-				<Button
-					color="dark"
-					size="xs"
-					on:click={() => {
-						inputLibraryDrawer.openDrawer()
-					}}
-				>
-					Past Runs/Input library
-				</Button>
-				<Button
-					color="dark"
-					size="xs"
-					disabled={$flowStore.value.modules.length === 0 ||
-						$flowStore.value.modules[0].value.type == 'identity'}
-					on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
-				>
-					First step's inputs
-				</Button>
-			</div>
-			<div class="p-4 border-b">
-				<AddProperty
-					bind:schema={$flowStore.schema}
-					bind:this={addProperty}
-					on:change={() => {
-						$flowStore = $flowStore
-					}}
-				/>
-			</div>
-
-			<EditableSchemaForm
-				bind:schema={$flowStore.schema}
-				isFlowInput
-				on:edit={(e) => {
-					addProperty?.openDrawer(e.detail)
+		<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
+			<div class="text-sm">Copy input's schema from</div>
+			<Popover closeButton={false}>
+				<svelte:fragment slot="trigger">
+					<Button color="dark" size="xs" nonCaptureEvent>Capture</Button>
+				</svelte:fragment>
+				<svelte:fragment slot="content">
+					<InputSchemaPicker isFlow={true} path={$pathStore} on:openTriggers />
+				</svelte:fragment>
+			</Popover>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					jsonPayload.openDrawer()
 				}}
-				on:delete={(e) => {
-					addProperty?.handleDeleteArgument([e.detail])
+			>
+				A JSON
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				on:click={() => {
+					inputLibraryDrawer.openDrawer()
 				}}
-				offset={yOffset}
-				displayWebhookWarning
-			/>
-		{:else}
-			<CapturePanel
-				isFlow
-				path={$pathStore}
-				hasPreprocessor={!!$flowStore.value.preprocessor_module}
-				canHavePreprocessor
-				newItem={initialPath === ''}
-				on:openTriggers
-				on:applyArgs
-				on:addPreprocessor={async () => {
-					await insertNewPreprocessorModule(flowStore, flowStateStore, {
-						language: 'bun',
-						subkind: 'preprocessor'
-					})
-					$selectedId = 'preprocessor'
-				}}
-				on:updateSchema={(e) => {
-					const { schema, redirect } = e.detail
-					$flowStore.schema = schema
-					if (redirect) {
-						tabSelected = 'input'
-					}
+			>
+				Past Runs/Input library
+			</Button>
+			<Button
+				color="dark"
+				size="xs"
+				disabled={$flowStore.value.modules.length === 0 ||
+					$flowStore.value.modules[0].value.type == 'identity'}
+				on:click={() => copyFirstStepSchema($flowStateStore, flowStore)}
+			>
+				First step's inputs
+			</Button>
+		</div>
+		<div class="p-4 border-b">
+			<AddProperty
+				bind:schema={$flowStore.schema}
+				bind:this={addProperty}
+				on:change={() => {
+					$flowStore = $flowStore
 				}}
 			/>
-		{/if}
+		</div>
+
+		<EditableSchemaForm
+			bind:schema={$flowStore.schema}
+			isFlowInput
+			on:edit={(e) => {
+				addProperty?.openDrawer(e.detail)
+			}}
+			on:delete={(e) => {
+				addProperty?.handleDeleteArgument([e.detail])
+			}}
+			offset={yOffset}
+			displayWebhookWarning
+		/>
 	{:else}
 		<div class="p-4 border-b">
 			<FlowInputViewer schema={$flowStore.schema} />

From 29d84d9a802de3256ad0269c084a8c3b534a1f0f Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 9 Dec 2024 10:39:57 +0000
Subject: [PATCH 08/42] Allways show capture

---
 .../components/triggers/CapturePanel.svelte   |   1 +
 .../components/triggers/CaptureTable.svelte   | 281 +++++++++---------
 .../components/triggers/CaptureWrapper.svelte |  64 ++--
 .../triggers/RouteEditorConfigSection.svelte  |  10 +-
 .../triggers/TriggersEditorSection.svelte     |  98 +++---
 .../triggers/WebhooksConfigSection.svelte     |  44 +--
 .../WebsocketEditorConfigSection.svelte       |   6 +-
 7 files changed, 259 insertions(+), 245 deletions(-)

diff --git a/frontend/src/lib/components/triggers/CapturePanel.svelte b/frontend/src/lib/components/triggers/CapturePanel.svelte
index f7ec31ff9ce1e..529dd303fcdfa 100644
--- a/frontend/src/lib/components/triggers/CapturePanel.svelte
+++ b/frontend/src/lib/components/triggers/CapturePanel.svelte
@@ -279,6 +279,7 @@
 			const config = captureConfigs[selected]
 			if (config && config.error) {
 				const serverEnabled = getServerEnabled(config)
+				console.log('dbg serverEnabled', serverEnabled)
 				if (!serverEnabled) {
 					sendUserToast('Capture was stopped because of error: ' + config.error, true)
 					active = false
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index de0458ceb9acc..3fa1e26b611fb 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -24,6 +24,7 @@
 	export let captureType: CaptureTriggerKind = 'webhook'
 	export let headless = false
 	export let addButton = false
+	export let hideCapturesWhenEmpty = false
 
 	let captures: Capture[] = []
 	let selectedCaptures: any[] = []
@@ -74,154 +75,156 @@
 	refreshCaptures()
 </script>
 
-<Label label="Captures" {headless}>
-	<svelte:fragment slot="header">
-		{#if addButton}
-			<Button
-				size="xs2"
-				color="light"
-				variant="contained"
-				iconOnly
-				startIcon={{ icon: Plus }}
-				on:click={() =>
-					dispatch('openTriggers', {
-						kind: captureTriggerKindToTriggerKind(captureType),
-						config: {}
-					})}
-			/>
-		{/if}
-	</svelte:fragment>
-	<svelte:fragment slot="action">
-		{#if canHavePreprocessor}
-			<div>
-				<ToggleButtonGroup bind:selected={testKind}>
-					<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
-					<ToggleButton
-						value="preprocessor"
-						label="Preprocessor"
-						small
-						tooltip="When the runnable has a preprocessor, it receives additional information about the request"
-					/>
-				</ToggleButtonGroup>
-			</div>
-		{/if}
-	</svelte:fragment>
-	<div class="flex flex-col gap-1 mt-2">
-		{#if selectedCaptures.length === 0}
-			<div class="text-xs text-secondary">No {captureType} captures yet</div>
-		{:else}
-			{#each selectedCaptures as capture}
-				{@const payload = isObject(capture.payload) ? capture.payload : {}}
-				{@const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {}}
-				{@const payloadData =
-					testKind === 'preprocessor'
-						? {
-								...payload,
-								...triggerExtra
-						  }
-						: payload}
-				{@const schema =
-					isFlow && testKind === 'main'
-						? { required: [], properties: {}, ...convert(payloadData) }
-						: {}}
-				<div class="flex flex-row gap-1">
-					<div class="text-xs border p-2 rounded-md overflow-auto grow whitespace-nowrap">
-						{JSON.stringify(payloadData)}
-					</div>
-					<Button
-						size="xs2"
-						color="light"
-						variant="border"
-						on:click={() => {
-							copyToClipboard(JSON.stringify(payloadData))
-						}}
-						iconOnly
-						startIcon={{ icon: Clipboard }}
-					/>
+{#if selectedCaptures.length > 0 || !hideCapturesWhenEmpty}
+	<Label label="Captures" {headless}>
+		<svelte:fragment slot="header">
+			{#if addButton}
+				<Button
+					size="xs2"
+					color="light"
+					variant="contained"
+					iconOnly
+					startIcon={{ icon: Plus }}
+					on:click={() =>
+						dispatch('openTriggers', {
+							kind: captureTriggerKindToTriggerKind(captureType),
+							config: {}
+						})}
+				/>
+			{/if}
+		</svelte:fragment>
+		<svelte:fragment slot="action">
+			{#if canHavePreprocessor}
+				<div>
+					<ToggleButtonGroup bind:selected={testKind}>
+						<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
+						<ToggleButton
+							value="preprocessor"
+							label="Preprocessor"
+							small
+							tooltip="When the runnable has a preprocessor, it receives additional information about the request"
+						/>
+					</ToggleButtonGroup>
+				</div>
+			{/if}
+		</svelte:fragment>
+		<div class="flex flex-col gap-1 mt-2">
+			{#if selectedCaptures.length === 0}
+				<div class="text-xs text-secondary">No {captureType} captures yet</div>
+			{:else}
+				{#each selectedCaptures as capture}
+					{@const payload = isObject(capture.payload) ? capture.payload : {}}
+					{@const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {}}
+					{@const payloadData =
+						testKind === 'preprocessor'
+							? {
+									...payload,
+									...triggerExtra
+							  }
+							: payload}
+					{@const schema =
+						isFlow && testKind === 'main'
+							? { required: [], properties: {}, ...convert(payloadData) }
+							: {}}
+					<div class="flex flex-row gap-1">
+						<div class="text-xs border p-2 rounded-md overflow-auto grow whitespace-nowrap">
+							{JSON.stringify(payloadData)}
+						</div>
+						<Button
+							size="xs2"
+							color="light"
+							variant="border"
+							on:click={() => {
+								copyToClipboard(JSON.stringify(payloadData))
+							}}
+							iconOnly
+							startIcon={{ icon: Clipboard }}
+						/>
 
-					{#if isFlow && testKind === 'main'}
-						<CustomPopover>
-							<Button
-								size="xs"
-								color="light"
-								variant="border"
-								on:click={() => {
-									dispatch('updateSchema', { schema, redirect: true })
-								}}
-								wrapperClasses="h-full"
-							>
-								Apply schema
-							</Button>
+						{#if isFlow && testKind === 'main'}
+							<CustomPopover>
+								<Button
+									size="xs"
+									color="light"
+									variant="border"
+									on:click={() => {
+										dispatch('updateSchema', { schema, redirect: true })
+									}}
+									wrapperClasses="h-full"
+								>
+									Apply schema
+								</Button>
 
-							<svelte:fragment slot="overlay">
-								{#if schema}
-									<div class="min-w-[400px]">
-										<SchemaViewer {schema} />
-									</div>
-								{/if}
-							</svelte:fragment>
-						</CustomPopover>
-					{/if}
+								<svelte:fragment slot="overlay">
+									{#if schema}
+										<div class="min-w-[400px]">
+											<SchemaViewer {schema} />
+										</div>
+									{/if}
+								</svelte:fragment>
+							</CustomPopover>
+						{/if}
 
-					{#if testKind === 'preprocessor' && !hasPreprocessor}
-						<CustomPopover noPadding>
+						{#if testKind === 'preprocessor' && !hasPreprocessor}
+							<CustomPopover noPadding>
+								<Button
+									size="xs"
+									color="dark"
+									disabled
+									endIcon={{
+										icon: Info
+									}}
+									wrapperClasses="h-full"
+								>
+									Apply args
+								</Button>
+								<svelte:fragment slot="overlay">
+									<div class="text-sm p-2 flex flex-col gap-1 items-start">
+										<p>You need to add a preprocessor to use preprocessor captures as args</p>
+										<Button
+											size="xs"
+											color="dark"
+											on:click={() => {
+												dispatch('addPreprocessor')
+											}}
+										>
+											Add preprocessor
+										</Button>
+									</div>
+								</svelte:fragment>
+							</CustomPopover>
+						{:else}
 							<Button
 								size="xs"
 								color="dark"
-								disabled
-								endIcon={{
-									icon: Info
+								on:click={() => {
+									if (isFlow && testKind === 'main') {
+										dispatch('updateSchema', { schema, redirect: false })
+									}
+									dispatch('applyArgs', {
+										kind: testKind,
+										args: payloadData
+									})
 								}}
-								wrapperClasses="h-full"
+								disabled={testKind === 'preprocessor' && !hasPreprocessor}
 							>
-								Apply args
+								{isFlow && testKind === 'main' ? 'Apply schema and args' : 'Apply args'}
 							</Button>
-							<svelte:fragment slot="overlay">
-								<div class="text-sm p-2 flex flex-col gap-1 items-start">
-									<p>You need to add a preprocessor to use preprocessor captures as args</p>
-									<Button
-										size="xs"
-										color="dark"
-										on:click={() => {
-											dispatch('addPreprocessor')
-										}}
-									>
-										Add preprocessor
-									</Button>
-								</div>
-							</svelte:fragment>
-						</CustomPopover>
-					{:else}
+						{/if}
+
 						<Button
-							size="xs"
-							color="dark"
+							size="xs2"
+							color="red"
+							iconOnly
+							startIcon={{ icon: Trash2 }}
+							loading={deleteLoading === capture.id}
 							on:click={() => {
-								if (isFlow && testKind === 'main') {
-									dispatch('updateSchema', { schema, redirect: false })
-								}
-								dispatch('applyArgs', {
-									kind: testKind,
-									args: payloadData
-								})
+								deleteCapture(capture.id)
 							}}
-							disabled={testKind === 'preprocessor' && !hasPreprocessor}
-						>
-							{isFlow && testKind === 'main' ? 'Apply schema and args' : 'Apply args'}
-						</Button>
-					{/if}
-
-					<Button
-						size="xs2"
-						color="red"
-						iconOnly
-						startIcon={{ icon: Trash2 }}
-						loading={deleteLoading === capture.id}
-						on:click={() => {
-							deleteCapture(capture.id)
-						}}
-					/>
-				</div>
-			{/each}
-		{/if}
-	</div>
-</Label>
+						/>
+					</div>
+				{/each}
+			{/if}
+		</div>
+	</Label>
+{/if}
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index cd7831b81de43..69e310892ec70 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -23,8 +23,7 @@
 	export let hasPreprocessor: boolean
 	export let canHavePreprocessor: boolean
 	export let captureType: CaptureTriggerKind = 'webhook'
-	export let captureMode = false
-	export let active = false
+	export let captureActive = false
 	export let data: any = {}
 	export let connectionInfo:
 		| {
@@ -217,13 +216,14 @@
 			return acc
 		}, {})
 
-		if ((captureType === 'websocket' || captureType === 'kafka') && active) {
+		if ((captureType === 'websocket' || captureType === 'kafka') && captureActive) {
 			const config = captureConfigs[captureType]
+			console.log('dbg config', config)
 			if (config && config.error) {
 				const serverEnabled = getServerEnabled(config)
 				if (!serverEnabled) {
 					sendUserToast('Capture was stopped because of error: ' + config.error, true)
-					active = false
+					captureActive = false
 				}
 			}
 		}
@@ -233,10 +233,9 @@
 	let refreshCaptures: () => Promise<void>
 
 	async function capture() {
-		console.log('dbg capture')
 		let i = 0
-		active = true
-		while (active) {
+		captureActive = true
+		while (captureActive) {
 			if (i % 3 === 0) {
 				await CaptureService.pingCaptureConfig({
 					workspace: $workspaceStore!,
@@ -253,7 +252,7 @@
 	}
 
 	function stopAndSetDefaultArgs() {
-		active = false
+		captureActive = false
 		if (captureType in captureConfigs) {
 			const triggerConfig = captureConfigs[captureType].trigger_config
 			args = isObject(triggerConfig) ? triggerConfig : {}
@@ -270,7 +269,7 @@
 	$: captureType && stopAndSetDefaultArgs()
 
 	onDestroy(() => {
-		active = false
+		captureActive = false
 	})
 
 	function getServerEnabled(config: CaptureConfig) {
@@ -281,11 +280,11 @@
 	}
 
 	export async function handleCapture() {
-		if (!active) {
+		if (!captureActive) {
 			await setConfig()
 			capture()
 		} else {
-			active = false
+			captureActive = false
 		}
 	}
 
@@ -297,9 +296,9 @@
 	function updateConnectionInfo(
 		captureType: CaptureTriggerKind,
 		config: CaptureConfig | undefined,
-		active: boolean
+		captureActive: boolean
 	) {
-		if ((captureType === 'websocket' || captureType === 'kafka') && config && active) {
+		if ((captureType === 'websocket' || captureType === 'kafka') && config && captureActive) {
 			const serverEnabled = getServerEnabled(config)
 			const message = serverEnabled
 				? 'Websocket is connected'
@@ -312,7 +311,7 @@
 			connectionInfo = undefined
 		}
 	}
-	$: updateConnectionInfo(captureType, config, active)
+	$: updateConnectionInfo(captureType, config, captureActive)
 </script>
 
 <div class="flex flex-col gap-4 w-full">
@@ -328,7 +327,13 @@
 		{/if}
 
 		{#if captureType === 'websocket'}
-			<WebsocketEditorConfigSection url={''} can_write={true} headless={true} bind:args />
+			<WebsocketEditorConfigSection
+				url={''}
+				can_write={true}
+				headless={true}
+				bind:args
+				showCapture={captureActive}
+			/>
 		{:else if captureType === 'webhook'}
 			<WebhooksConfigSection
 				{isFlow}
@@ -337,25 +342,30 @@
 				token={data?.token}
 				{args}
 				scopes={data?.scopes}
-				{captureMode}
+				showCapture={captureActive}
 			/>
 		{:else if captureType === 'http'}
-			<RouteEditorConfigSection {path} {captureMode} can_write={true} bind:args headless />
+			<RouteEditorConfigSection
+				{path}
+				showCapture={captureActive}
+				can_write={true}
+				bind:args
+				headless
+			/>
 		{:else if captureType === 'email'}
 			<Label label="Email">
 				<ClipboardPanel content={emailAddress} />
 			</Label>
 		{/if}
 
-		{#if captureMode}
-			<CaptureTable
-				{captureType}
-				{hasPreprocessor}
-				{canHavePreprocessor}
-				{isFlow}
-				{path}
-				bind:refreshCaptures
-			/>
-		{/if}
+		<CaptureTable
+			{captureType}
+			{hasPreprocessor}
+			{canHavePreprocessor}
+			{isFlow}
+			{path}
+			bind:refreshCaptures
+			hideCapturesWhenEmpty={true}
+		/>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
index 892020566f092..31f2cc97e0e5b 100644
--- a/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
@@ -20,7 +20,7 @@
 	export let can_write: boolean = false
 	export let static_asset_config: { s3: string; storage?: string; filename?: string } | undefined =
 		undefined
-	export let captureMode = false
+	export let showCapture = false
 	export let initialRoutePath: string = ''
 	export let isFlow = true
 	export let path: string = ''
@@ -69,9 +69,9 @@
 
 	$: validateRoute(route_path, http_method)
 
-	$: fullRoute = getHttpRoute(route_path, captureMode)
+	$: fullRoute = getHttpRoute(route_path, showCapture)
 
-	$: captureMode && (http_method = 'post')
+	$: showCapture && (http_method = 'post')
 
 	export let route_path = ''
 
@@ -119,7 +119,7 @@
 			disabled={!($userStore?.is_admin || $userStore?.is_super_admin) ||
 				!can_write ||
 				!!static_asset_config ||
-				captureMode}
+				showCapture}
 		>
 			<ToggleButton label="GET" value="get" />
 			<ToggleButton label="POST" value="post" />
@@ -151,7 +151,7 @@
 				>{dirtyRoutePath ? routeError : ''}</div
 			>
 		</div>
-		{#if captureMode}
+		{#if showCapture}
 			<Label label="cUrl">
 				<CopyableCodeBlock
 					code={`curl \\
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 36997c392bce2..34372a380d920 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -8,10 +8,11 @@
 	import { createEventDispatcher, getContext } from 'svelte'
 	import { type CaptureTriggerKind } from '$lib/gen'
 	import type { FlowEditorContext } from '../flows/types'
-	import Toggle from '../Toggle.svelte'
 	import ConnectionIndicator from '$lib/components/common/alert/ConnectionIndicator.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
 	import { onDestroy } from 'svelte'
+	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
+
 	export let cloudDisabled: boolean
 	export let captureType: CaptureTriggerKind
 	export let isFlow: boolean = false
@@ -30,7 +31,7 @@
 
 	let args: Record<string, any> = {}
 
-	let active = false
+	let captureActive = false
 	let connectionInfo:
 		| {
 				status: 'connected' | 'disconnected' | 'error'
@@ -50,59 +51,59 @@
 	onDestroy(() => {
 		$captureOn = false
 	})
+
+	$: $captureOn && handleCapture?.()
 </script>
 
-<Section label={`${captureTypeLabels[captureType]} Configuration`}>
+<Section label={`${captureTypeLabels[captureType]} Prototype`}>
 	<svelte:fragment slot="action">
-		<div class=" flex flex-row grow w-min-0 gap-2 px-2 items-center justify-between">
-			<Toggle bind:checked={$captureOn} options={{ left: 'Capture' }} size="xs" />
-			<div class="flex flex-row gap-2">
-				<ConnectionIndicator {connectionInfo} />
+		<div class="flex flex-row grow w-min-0 gap-2 px-2 items-center justify-end">
+			<ConnectionIndicator {connectionInfo} />
 
-				{#if $captureOn}
+			<AnimatedButton animate={captureActive} baseRadius="6px">
+				<Button
+					size="xs2"
+					on:click={() => {
+						handleCapture?.()
+					}}
+					variant="border"
+					disabled={false}
+					color="light"
+					startIcon={{ icon: captureActive ? CircleStop : Play }}
+					btnClasses={captureActive ? 'text-blue-500 hover:text-blue-500' : ''}
+				>
+					Capture
+				</Button>
+			</AnimatedButton>
+
+			{#if !noSave}
+				{@const disabled = newItem || cloudDisabled}
+				<Popover notClickable>
 					<Button
 						size="xs2"
-						on:click={() => handleCapture?.()}
-						disabled={false}
-						color={active ? 'red' : 'dark'}
-						startIcon={{ icon: active ? CircleStop : Play }}
+						{disabled}
+						startIcon={{ icon: Save }}
+						on:click={() => {
+							dispatch('saveTrigger', {
+								config: args
+							})
+						}}
 					>
-						Capture
+						New {captureTypeLabels[captureType]}
 					</Button>
-				{/if}
-
-				{#if !noSave}
-					{#if newItem || cloudDisabled}
-						<Popover notClickable>
-							<Button
-								size="xs2"
-								disabled
-								startIcon={{ icon: Save }}
-								iconOnly
-								wrapperClasses="h-full"
-							/>
-							<svelte:fragment slot="text">
-								{#if newItem}
-									Deploy the runnable to enable trigger creation
-								{:else if cloudDisabled}
-									{capitalize(captureType)} triggers are disabled in the multi-tenant cloud
-								{/if}
-							</svelte:fragment>
-						</Popover>
-					{:else}
-						<Button
-							size="xs2"
-							on:click={() => {
-								dispatch('saveTrigger', {
-									config: args
-								})
-							}}
-							startIcon={{ icon: Save }}
-							iconOnly
-						/>
-					{/if}
-				{/if}
-			</div>
+					<svelte:fragment slot="text">
+						{#if disabled}
+							{#if newItem}
+								Deploy the runnable to enable trigger creation
+							{:else if cloudDisabled}
+								{capitalize(captureType)} triggers are disabled in the multi-tenant cloud
+							{/if}
+						{:else}
+							Create new {captureTypeLabels[captureType]} trigger from prototype
+						{/if}
+					</svelte:fragment>
+				</Popover>
+			{/if}
 		</div>
 	</svelte:fragment>
 
@@ -126,9 +127,8 @@
 			}
 		}}
 		bind:args
-		captureMode={$captureOn}
 		bind:handleCapture
-		bind:active
+		bind:captureActive
 		{data}
 		bind:connectionInfo
 	/>
diff --git a/frontend/src/lib/components/triggers/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/WebhooksConfigSection.svelte
index bdf295ed33370..eb3695c831c37 100644
--- a/frontend/src/lib/components/triggers/WebhooksConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/WebhooksConfigSection.svelte
@@ -30,7 +30,7 @@
 	export let args: any
 	export let triggerTokens: TriggerTokens | undefined = undefined
 	export let scopes: string[] = []
-	export let captureMode: boolean = false
+	export let showCapture: boolean = false
 
 	let webhooks: {
 		async: {
@@ -184,7 +184,7 @@ function waitForJobCompletion(UUID) {
 	}
 
 	function curlCode() {
-		if (captureMode) {
+		if (showCapture) {
 			return `curl \\
 -X POST ${url} \\
 -H 'Content-Type: application/json' \\
@@ -220,9 +220,9 @@ done`
 	function updateUrl(
 		webhookType: 'async' | 'sync',
 		requestType: 'hash' | 'path' | 'get_path',
-		captureMode
+		showCapture
 	) {
-		if (captureMode) {
+		if (showCapture) {
 			url = `${$page.url.origin}/api/w/${$workspaceStore}/capture_u/webhook/${
 				isFlow ? 'flow' : 'script'
 			}/${path}`
@@ -243,11 +243,11 @@ done`
 		}
 	}
 
-	$: updateUrl(webhookType, requestType, captureMode)
+	$: updateUrl(webhookType, requestType, showCapture)
 
 	let prevSelectedTab = selectedTab
-	function updateSelectedTab(captureMode: boolean) {
-		if (captureMode) {
+	function updateSelectedTab(showCapture: boolean) {
+		if (showCapture) {
 			prevSelectedTab = selectedTab
 			selectedTab = 'curl'
 		} else {
@@ -256,8 +256,8 @@ done`
 	}
 
 	let prevWebhookType = webhookType
-	function updateWebhookType(captureMode: boolean) {
-		if (captureMode) {
+	function updateWebhookType(showCapture: boolean) {
+		if (showCapture) {
 			prevWebhookType = webhookType
 			webhookType = 'async'
 		} else {
@@ -266,8 +266,8 @@ done`
 	}
 
 	let prevRequestType: 'hash' | 'path' | 'get_path'
-	function updateRequestType(captureMode: boolean) {
-		if (captureMode) {
+	function updateRequestType(showCapture: boolean) {
+		if (showCapture) {
 			prevRequestType = requestType
 			requestType = 'path'
 		} else {
@@ -275,9 +275,9 @@ done`
 		}
 	}
 
-	$: updateSelectedTab(captureMode)
-	$: updateWebhookType(captureMode)
-	$: updateRequestType(captureMode)
+	$: updateSelectedTab(showCapture)
+	$: updateWebhookType(showCapture)
+	$: updateRequestType(showCapture)
 </script>
 
 <UserSettings
@@ -293,7 +293,7 @@ done`
 
 <div class="flex flex-col gap-8">
 	{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
-		<Label label="Token" disabled={captureMode}>
+		<Label label="Token" disabled={showCapture}>
 			<div class="flex flex-row justify-between gap-2">
 				<input
 					bind:value={token}
@@ -314,7 +314,7 @@ done`
 	<div class="flex flex-col gap-2">
 		<div class="flex flex-row justify-between">
 			<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType} disabled={captureMode}>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType} disabled={showCapture}>
 				<ToggleButton
 					label="Async"
 					value="async"
@@ -329,7 +329,7 @@ done`
 		</div>
 		<div class="flex flex-row justify-between">
 			<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
-			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} disabled={captureMode}>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType} disabled={showCapture}>
 				<ToggleButton
 					label="POST by path"
 					value="path"
@@ -357,7 +357,7 @@ done`
 		<div
 			class={twMerge(
 				'flex flex-row justify-between',
-				captureMode ? 'opacity-60 pointer-events-none' : ''
+				showCapture ? 'opacity-60 pointer-events-none' : ''
 			)}
 		>
 			<div class="text-sm font-normal text-secondary flex flex-row items-center"
@@ -373,11 +373,11 @@ done`
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div>
 		<Tabs bind:selected={selectedTab}>
-			<Tab value="rest" size="xs" disabled={captureMode}>REST</Tab>
+			<Tab value="rest" size="xs" disabled={showCapture}>REST</Tab>
 			{#if SCRIPT_VIEW_SHOW_EXAMPLE_CURL}
 				<Tab value="curl" size="xs">Curl</Tab>
 			{/if}
-			<Tab value="fetch" size="xs" disabled={captureMode}>Fetch</Tab>
+			<Tab value="fetch" size="xs" disabled={showCapture}>Fetch</Tab>
 
 			<svelte:fragment slot="content">
 				{#key token}
@@ -407,7 +407,7 @@ done`
 								{#key requestType}
 									{#key webhookType}
 										{#key tokenType}
-											{#key captureMode}
+											{#key showCapture}
 												<div
 													class="flex flex-row flex-1 h-full border p-2 rounded-md overflow-auto relative"
 													on:click={(e) => {
@@ -448,7 +448,7 @@ done`
 			</svelte:fragment>
 		</Tabs>
 	</div>
-	{#if !captureMode}
+	{#if !showCapture}
 		<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="webhook" />
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/triggers/WebsocketEditorConfigSection.svelte b/frontend/src/lib/components/triggers/WebsocketEditorConfigSection.svelte
index 44ce13ee62ac6..49deab7037ca8 100644
--- a/frontend/src/lib/components/triggers/WebsocketEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/WebsocketEditorConfigSection.svelte
@@ -14,7 +14,7 @@
 	export let urlRunnableSchema: Record<string, unknown> = {}
 	export let can_write: boolean = false
 	export let headless: boolean = false
-	export let captureMode: boolean = false
+	export let showCapture: boolean = false
 
 	function updateArgs(url: string) {
 		args && (args.url = url)
@@ -31,10 +31,10 @@
 				url = ev.detail === 'runnable' ? '$script:' : ''
 				url_runnable_args = {}
 			}}
-			disabled={captureMode}
+			disabled={showCapture}
 		>
 			<ToggleButton value="static" label="Static URL" />
-			<ToggleButton value="runnable" label="Runnable result as URL" />
+			<ToggleButton value="runnable" label="Runnable result as URL" disabled={showCapture} />
 		</ToggleButtonGroup>
 	</div>
 	{#if url.startsWith('$')}

From c642852e8949d3697c08d6c0d7537b4c345e00d2 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 9 Dec 2024 10:41:58 +0000
Subject: [PATCH 09/42] remove useless logs

---
 frontend/src/lib/components/SchemaForm.svelte                | 3 ---
 frontend/src/lib/components/triggers/CapturePanel.svelte     | 1 -
 frontend/src/lib/components/triggers/CaptureTable.svelte     | 1 -
 frontend/src/lib/components/triggers/CaptureWrapper.svelte   | 1 -
 frontend/src/lib/components/triggers/RouteEditorInner.svelte | 1 -
 5 files changed, 7 deletions(-)

diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index b74b481f4376d..bbd226d0aef80 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -54,9 +54,6 @@
 		args = {}
 	}
 
-	$: console.log('args', args)
-	$: console.log('schema', schema)
-
 	export function setDefaults() {
 		const nargs = {}
 
diff --git a/frontend/src/lib/components/triggers/CapturePanel.svelte b/frontend/src/lib/components/triggers/CapturePanel.svelte
index 529dd303fcdfa..f7ec31ff9ce1e 100644
--- a/frontend/src/lib/components/triggers/CapturePanel.svelte
+++ b/frontend/src/lib/components/triggers/CapturePanel.svelte
@@ -279,7 +279,6 @@
 			const config = captureConfigs[selected]
 			if (config && config.error) {
 				const serverEnabled = getServerEnabled(config)
-				console.log('dbg serverEnabled', serverEnabled)
 				if (!serverEnabled) {
 					sendUserToast('Capture was stopped because of error: ' + config.error, true)
 					active = false
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index 3fa1e26b611fb..ab173d9bbb9d0 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -65,7 +65,6 @@
 	}>()
 
 	export async function refreshCaptures() {
-		console.log('dbg refreshCaptures')
 		captures = await CaptureService.listCaptures({
 			workspace: $workspaceStore!,
 			runnableKind: isFlow ? 'flow' : 'script',
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 69e310892ec70..24d95d4d73976 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -218,7 +218,6 @@
 
 		if ((captureType === 'websocket' || captureType === 'kafka') && captureActive) {
 			const config = captureConfigs[captureType]
-			console.log('dbg config', config)
 			if (config && config.error) {
 				const serverEnabled = getServerEnabled(config)
 				if (!serverEnabled) {
diff --git a/frontend/src/lib/components/triggers/RouteEditorInner.svelte b/frontend/src/lib/components/triggers/RouteEditorInner.svelte
index be0c76044d74e..34d5ca55f5299 100644
--- a/frontend/src/lib/components/triggers/RouteEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/RouteEditorInner.svelte
@@ -56,7 +56,6 @@
 		fixedScriptPath_?: string,
 		defaultValues?: Record<string, any>
 	) {
-		console.log('dbg openNew', defaultValues?.http_method)
 		drawerLoading = true
 		try {
 			drawer?.openDrawer()

From 9ee065fd671b56a351660755f4c5ef97e3644357 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 9 Dec 2024 12:04:57 +0000
Subject: [PATCH 10/42] Add email capture

---
 .../details/EmailTriggerConfigSection.svelte  | 108 +++++++++++
 .../details/EmailTriggerPanel.svelte          |  99 ++--------
 .../components/triggers/CaptureWrapper.svelte | 182 ++----------------
 3 files changed, 132 insertions(+), 257 deletions(-)
 create mode 100644 frontend/src/lib/components/details/EmailTriggerConfigSection.svelte

diff --git a/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte b/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte
new file mode 100644
index 0000000000000..9f91ea10b1735
--- /dev/null
+++ b/frontend/src/lib/components/details/EmailTriggerConfigSection.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import Button from '$lib/components/common/button/Button.svelte'
+	import Label from '$lib/components/Label.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import { AlertTriangle } from 'lucide-svelte'
+	import { workspaceStore } from '$lib/stores'
+	import { SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON } from '$lib/consts'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ClipboardPanel from './ClipboardPanel.svelte'
+	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import { base32 } from 'rfc4648'
+
+	export let token: string = ''
+	export let isFlow: boolean = false
+	export let hash: string | undefined = undefined
+	export let path: string
+	export let userSettings: any
+	export let emailDomain: string | null = null
+	export let captureActive: boolean = false
+
+	let requestType: 'hash' | 'path' = 'path'
+
+	function emailAddress(
+		requestType: 'hash' | 'path',
+		path: string,
+		hash: string | undefined,
+		isFlow: boolean,
+		token: string,
+		captureActive: boolean
+	) {
+		if (captureActive) {
+			const cleanedPath = path.replaceAll('/', '.')
+			const plainPrefix = `capture+${$workspaceStore}+${(isFlow ? 'flow.' : '') + cleanedPath}`
+			const encodedPrefix = base32
+				.stringify(new TextEncoder().encode(plainPrefix), {
+					pad: false
+				})
+				.toLowerCase()
+			return `${encodedPrefix}@${emailDomain}`
+		}
+		const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.')
+		const plainPrefix = `${$workspaceStore}+${
+			(requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash
+		}+${token}`
+		const encodedPrefix = base32
+			.stringify(new TextEncoder().encode(plainPrefix), {
+				pad: false
+			})
+			.toLowerCase()
+		return `${pathOrHash}+${encodedPrefix}@${emailDomain}`
+	}
+
+	export let email: string = ''
+
+	$: email = emailAddress(requestType, path, hash, isFlow, token, captureActive)
+</script>
+
+{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
+	<Label label="Token" disabled={captureActive}>
+		<div class="flex flex-row justify-between gap-2">
+			<input
+				bind:value={token}
+				placeholder="paste your token here once created to alter examples below"
+				class="!text-xs"
+			/>
+			<Button size="xs" color="light" variant="border" on:click={userSettings.openDrawer}>
+				Create an Email-specific Token
+				<Tooltip light>
+					The token will have a scope such that it can only be used to trigger this script. It is
+					safe to share as it cannot be used to impersonate you.
+				</Tooltip>
+			</Button>
+		</div>
+		{#if token === 'TOKEN_TO_CREATE'}
+			<div class="flex flex-row gap-1 text-xs text-red-500 items-center mt-1">
+				<AlertTriangle size="12" />
+				Create/input a valid token before copying the email address below
+			</div>
+		{/if}
+	</Label>
+{/if}
+
+{#if !isFlow}
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-row justify-between">
+			<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
+			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
+				<ToggleButton label="By path" value="path" />
+				<ToggleButton label="By hash" value="hash" />
+			</ToggleButtonGroup>
+		</div>
+	</div>
+{/if}
+
+{#key requestType}
+	{#key token}
+		<Label label="Email address">
+			<ClipboardPanel content={email} />
+		</Label>
+	{/key}
+{/key}
+
+<Alert title="Email trigger" size="xs">
+	To trigger the job by email, send an email to the address above. The job will receive two
+	arguments: `raw_email` containing the raw email as string, and `parsed_email` containing the
+	parsed email as an object.
+</Alert>
diff --git a/frontend/src/lib/components/details/EmailTriggerPanel.svelte b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
index fca824946fb69..42ac985b08b81 100644
--- a/frontend/src/lib/components/details/EmailTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
@@ -1,21 +1,14 @@
 <script lang="ts">
-	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
-	import { Button } from '$lib/components/common'
-	import { SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON } from '$lib/consts'
 	import UserSettings from '../UserSettings.svelte'
-	import ClipboardPanel from './ClipboardPanel.svelte'
 	import { generateRandomString } from '$lib/utils'
 	import HighlightTheme from '../HighlightTheme.svelte'
 	import Alert from '../common/alert/Alert.svelte'
 	import { SettingService } from '$lib/gen'
-	import { base32 } from 'rfc4648'
-	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
-	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import { AlertTriangle } from 'lucide-svelte'
 	import Skeleton from '../common/skeleton/Skeleton.svelte'
-	import Label from '$lib/components/Label.svelte'
 	import TriggerTokens from '../triggers/TriggerTokens.svelte'
+	import TriggersEditorSection from '../triggers/TriggersEditorSection.svelte'
+
 	let userSettings: UserSettings
 
 	export let token: string
@@ -25,44 +18,18 @@
 	export let path: string
 
 	let emailDomain: string | null = null
+	let triggerTokens: TriggerTokens | undefined = undefined
 
 	let loading = true
 	async function getEmailDomain() {
 		emailDomain =
 			((await SettingService.getGlobal({
 				key: 'email_domain'
-			})) as any) ?? null
+			})) as any) ?? 'mail.test.com'
 		loading = false
 	}
 
 	getEmailDomain()
-
-	let requestType: 'hash' | 'path' = 'path'
-
-	function emailAddress(
-		requestType: 'hash' | 'path',
-		path: string,
-		hash: string | undefined,
-		isFlow: boolean,
-		token: string
-	) {
-		const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.')
-		const plainPrefix = `${$workspaceStore}+${
-			(requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash
-		}+${token}`
-		const encodedPrefix = base32
-			.stringify(new TextEncoder().encode(plainPrefix), {
-				pad: false
-			})
-			.toLowerCase()
-		return `${pathOrHash}+${encodedPrefix}@${emailDomain}`
-	}
-
-	export let email: string = ''
-
-	$: email = emailAddress(requestType, path, hash, isFlow, token)
-
-	let triggerTokens: TriggerTokens | undefined = undefined
 </script>
 
 <HighlightTheme />
@@ -78,60 +45,18 @@
 	{scopes}
 />
 
-<div class="flex flex-col w-full gap-4">
+<div class="flex flex-col w-full gap-8">
 	{#if loading}
 		<Skeleton layout={[[18]]} />
 	{:else}
 		{#if emailDomain}
-			{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
-				<Label label="Token">
-					<div class="flex flex-row justify-between gap-2">
-						<input
-							bind:value={token}
-							placeholder="paste your token here once created to alter examples below"
-							class="!text-xs"
-						/>
-						<Button size="xs" color="light" variant="border" on:click={userSettings.openDrawer}>
-							Create an Email-specific Token
-							<Tooltip light>
-								The token will have a scope such that it can only be used to trigger this script. It
-								is safe to share as it cannot be used to impersonate you.
-							</Tooltip>
-						</Button>
-					</div>
-					{#if token === 'TOKEN_TO_CREATE'}
-						<div class="flex flex-row gap-1 text-xs text-red-500 items-center mt-1">
-							<AlertTriangle size="12" />
-							Create/input a valid token before copying the email address below
-						</div>
-					{/if}
-				</Label>
-			{/if}
-
-			{#if !isFlow}
-				<div class="flex flex-col gap-2">
-					<div class="flex flex-row justify-between">
-						<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
-						<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
-							<ToggleButton label="By path" value="path" />
-							<ToggleButton label="By hash" value="hash" />
-						</ToggleButtonGroup>
-					</div>
-				</div>
-			{/if}
-
-			{#key requestType}
-				{#key token}
-					<Label label="Email address">
-						<ClipboardPanel content={email} />
-					</Label>
-				{/key}
-			{/key}
-			<Alert title="Email trigger" size="xs">
-				To trigger the job by email, send an email to the address above. The job will receive two
-				arguments: `raw_email` containing the raw email as string, and `parsed_email` containing the
-				parsed email as an object.
-			</Alert>
+			<TriggersEditorSection
+				cloudDisabled={false}
+				captureType="email"
+				{isFlow}
+				noSave
+				data={{ emailDomain, userSettings, token, hash, path }}
+			/>
 		{:else}
 			<div>
 				<Alert title="Email triggers are disabled" size="xs" type="warning">
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 24d95d4d73976..c78d6ff5d0936 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -1,23 +1,16 @@
 <script lang="ts">
-	import { base32 } from 'rfc4648'
-	import SchemaForm from '../SchemaForm.svelte'
 	import { workspaceStore } from '$lib/stores'
-	import {
-		CaptureService,
-		SettingService,
-		type CaptureConfig,
-		type CaptureTriggerKind
-	} from '$lib/gen'
+	import { CaptureService, type CaptureConfig, type CaptureTriggerKind } from '$lib/gen'
 	import { onDestroy } from 'svelte'
 	import { capitalize, isObject, sendUserToast, sleep } from '$lib/utils'
-	import Label from '../Label.svelte'
-	import ClipboardPanel from '../details/ClipboardPanel.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import Alert from '../common/alert/Alert.svelte'
 	import RouteEditorConfigSection from './RouteEditorConfigSection.svelte'
 	import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
 	import WebhooksConfigSection from './WebhooksConfigSection.svelte'
 	import CaptureTable from './CaptureTable.svelte'
+	import EmailTriggerConfigSection from '../details/EmailTriggerConfigSection.svelte'
+
 	export let isFlow: boolean
 	export let path: string
 	export let hasPreprocessor: boolean
@@ -38,134 +31,6 @@
 
 	$: captureType && (isValid = true)
 
-	const schemas = {
-		http: {
-			$schema: 'http://json-schema.org/draft-07/schema#',
-			type: 'object',
-			properties: {
-				route_path: {
-					type: 'string',
-					description: "':myparam' for path params",
-					title: 'Custom route path',
-					pattern: '^[\\w-:]+(/[\\w-:]+)*$',
-					customErrorMessage: 'Invalid route path'
-				}
-			},
-			required: ['route_path']
-		},
-		websocket: {
-			$schema: 'http://json-schema.org/draft-07/schema#',
-			type: 'object',
-			properties: {
-				url: {
-					type: 'string',
-					title: 'URL',
-					pattern: '^(ws:|wss:)//[^\\s]+$',
-					customErrorMessage: 'Invalid websocket URL'
-				}
-			},
-			required: ['url']
-		},
-		kafka: {
-			$schema: 'http://json-schema.org/draft-07/schema#',
-			type: 'object',
-			properties: {
-				brokers: {
-					type: 'array',
-					items: {
-						type: 'string'
-					},
-					nullable: false,
-					title: 'Brokers'
-				},
-				security: {
-					type: 'object',
-					title: 'Security',
-					oneOf: [
-						{
-							type: 'object',
-							title: 'PLAINTEXT',
-							properties: {
-								label: {
-									enum: ['PLAINTEXT'],
-									type: 'string'
-								}
-							}
-						},
-						{
-							type: 'object',
-							order: ['mechanism', 'username', 'password'],
-							title: 'SASL_PLAINTEXT',
-							required: ['mechanism', 'username', 'password'],
-							properties: {
-								label: {
-									enum: ['SASL_PLAINTEXT'],
-									type: 'string'
-								},
-								password: {
-									type: 'string',
-									password: true
-								},
-								username: {
-									type: 'string'
-								},
-								mechanism: {
-									enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
-									type: 'string',
-									disableCreate: true
-								}
-							}
-						},
-						{
-							type: 'object',
-							title: 'SSL',
-							properties: {
-								label: {
-									enum: ['SSL'],
-									type: 'string'
-								}
-							}
-						},
-						{
-							type: 'object',
-							order: ['mechanism', 'username', 'password'],
-							title: 'SASL_SSL',
-							required: ['mechanism', 'username', 'password'],
-							properties: {
-								label: {
-									enum: ['SASL_SSL'],
-									type: 'string'
-								},
-								password: {
-									type: 'string',
-									password: true
-								},
-								username: {
-									type: 'string'
-								},
-								mechanism: {
-									enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
-									type: 'string',
-									disableCreate: true
-								}
-							}
-						}
-					]
-				},
-				topics: {
-					type: 'array',
-					items: {
-						type: 'string'
-					},
-					nullable: false,
-					title: 'Topics'
-				},
-				group_id: { type: 'string', title: 'Group ID' }
-			},
-			required: ['brokers', 'security', 'topics', 'group_id']
-		}
-	}
-
 	export async function setConfig() {
 		await CaptureService.setCaptureConfig({
 			requestBody: {
@@ -178,29 +43,6 @@
 		})
 	}
 
-	let emailDomain: string | undefined = undefined
-
-	async function getEmailDomain() {
-		emailDomain =
-			((await SettingService.getGlobal({
-				key: 'email_domain'
-			})) as any) ?? undefined
-	}
-
-	getEmailDomain()
-
-	function getEmailAddress(emailDomain: string | undefined) {
-		const cleanedPath = path.replaceAll('/', '.')
-		const plainPrefix = `capture+${$workspaceStore}+${(isFlow ? 'flow.' : '') + cleanedPath}`
-		const encodedPrefix = base32
-			.stringify(new TextEncoder().encode(plainPrefix), {
-				pad: false
-			})
-			.toLowerCase()
-		return `${encodedPrefix}@${emailDomain}`
-	}
-	$: emailAddress = getEmailAddress(emailDomain)
-
 	let captureConfigs: {
 		[key: string]: CaptureConfig
 	} = {}
@@ -319,12 +161,6 @@
 			{capitalize(captureType)} triggers are disabled in the multi-tenant cloud.
 		</Alert>
 	{:else}
-		{#if captureType in schemas && false}
-			{#key captureType}
-				<SchemaForm schema={schemas[captureType]} bind:args bind:isValid />
-			{/key}
-		{/if}
-
 		{#if captureType === 'websocket'}
 			<WebsocketEditorConfigSection
 				url={''}
@@ -352,9 +188,15 @@
 				headless
 			/>
 		{:else if captureType === 'email'}
-			<Label label="Email">
-				<ClipboardPanel content={emailAddress} />
-			</Label>
+			<EmailTriggerConfigSection
+				hash={data?.hash}
+				token={data?.token}
+				{path}
+				{isFlow}
+				userSettings={data?.userSettings}
+				emailDomain={data?.emailDomain}
+				{captureActive}
+			/>
 		{/if}
 
 		<CaptureTable

From c79bffb4b58bc20733a729c62db3b6c112e622e5 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 9 Dec 2024 13:27:57 +0000
Subject: [PATCH 11/42] Add kafka capture into triggers

---
 frontend/src/lib/components/Label.svelte      |   8 +-
 .../components/triggers/CaptureWrapper.svelte |   4 +-
 .../triggers/KafkaTriggerEditorInner.svelte   |  92 +------
 .../KafkaTriggersConfigSection.svelte         | 232 ++++++++++++++++++
 .../triggers/KafkaTriggersPanel.svelte        |  51 ++--
 .../triggers/TriggersEditorSection.svelte     |   1 +
 6 files changed, 282 insertions(+), 106 deletions(-)
 create mode 100644 frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte

diff --git a/frontend/src/lib/components/Label.svelte b/frontend/src/lib/components/Label.svelte
index 24acffca29303..dec8f69aae636 100644
--- a/frontend/src/lib/components/Label.svelte
+++ b/frontend/src/lib/components/Label.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
+	import Required from './Required.svelte'
+
 	export let label: string | undefined = undefined
 	export let primary = false
 	export let disabled = false
 	export let headless = false
+	export let required = false
 </script>
 
 <div class={twMerge(disabled ? 'opacity-60 pointer-events-none' : '', $$props.class)}>
 	<div class="flex flex-row justify-between items-center w-full">
 		{#if !headless}
-			<div class="flex flex-row items-center gap-1">
+			<div class="flex flex-row items-center gap-2">
 				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
+				{#if required}
+					<Required required={true} />
+				{/if}
 				<slot name="header" />
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index c78d6ff5d0936..c645dbd0d926a 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -10,6 +10,7 @@
 	import WebhooksConfigSection from './WebhooksConfigSection.svelte'
 	import CaptureTable from './CaptureTable.svelte'
 	import EmailTriggerConfigSection from '../details/EmailTriggerConfigSection.svelte'
+	import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte'
 
 	export let isFlow: boolean
 	export let path: string
@@ -24,7 +25,6 @@
 				message?: string
 		  }
 		| undefined = undefined
-
 	export let args: Record<string, any> = {}
 
 	let isValid = true
@@ -197,6 +197,8 @@
 				emailDomain={data?.emailDomain}
 				{captureActive}
 			/>
+		{:else if captureType === 'kafka'}
+			<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} />
 		{/if}
 
 		<CaptureTable
diff --git a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
index 42f69aa896402..0de8a82760adc 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
@@ -10,11 +10,10 @@
 	import { canWrite, emptyString, sendUserToast } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
-	import { Loader2, Save, X, Plus } from 'lucide-svelte'
+	import { Loader2, Save } from 'lucide-svelte'
 	import Label from '$lib/components/Label.svelte'
 	import Toggle from '../Toggle.svelte'
-	import { fade } from 'svelte/transition'
-	import ResourcePicker from '../ResourcePicker.svelte'
+	import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte'
 
 	let drawer: Drawer
 	let is_flow: boolean = false
@@ -218,85 +217,14 @@
 					</Label>
 				</div>
 
-				<Section label="Kafka">
-					<div class="flex flex-col w-full gap-4">
-						<div class="block grow w-full">
-							<div class="text-secondary text-sm mb-1">
-								Resource
-								<Required required={true} />
-							</div>
-							<ResourcePicker
-								resourceType="kafka"
-								bind:value={kafka_resource_path}
-								{defaultValues}
-							/>
-						</div>
-						<label class="block grow w-full">
-							<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-								<div>
-									Topics
-									<Required required={true} />
-								</div>
-							</div>
-
-							<div class="flex flex-col gap-4 mt-1">
-								{#each topics as v, i}
-									<div class="flex w-full gap-2 items-center">
-										<input type="text" bind:value={v} />
-
-										<button
-											transition:fade|local={{ duration: 100 }}
-											class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
-											aria-label="Clear"
-											on:click={() => {
-												topics = topics.filter((_, index) => index !== i)
-											}}
-											class:hidden={topics.length === 1}
-										>
-											<X size={14} />
-										</button>
-									</div>
-								{/each}
-
-								<div class="flex items-baseline">
-									<Button
-										variant="border"
-										color="light"
-										size="xs"
-										on:click={() => {
-											if (topics == undefined || !Array.isArray(topics)) {
-												topics = []
-											}
-											topics = topics.concat('')
-										}}
-										startIcon={{ icon: Plus }}
-									>
-										Add topic
-									</Button>
-								</div>
-							</div>
-							<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
-								{topicsError}
-							</div>
-						</label>
-
-						<label class="block grow w-full">
-							<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-								<div>
-									Group ID
-									<Required required={true} />
-								</div>
-							</div>
-							<div class="mt-1">
-								<input type="text" bind:value={group_id} on:focus={() => (dirtyGroupId = true)} />
-							</div>
-
-							<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
-								{groupIdError}
-							</div>
-						</label>
-					</div>
-				</Section>
+				<KafkaTriggersConfigSection
+					{kafka_resource_path}
+					{topics}
+					{group_id}
+					{topicsError}
+					{groupIdError}
+					{defaultValues}
+				/>
 
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
new file mode 100644
index 0000000000000..a86801294a4b5
--- /dev/null
+++ b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
@@ -0,0 +1,232 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition'
+	import ResourcePicker from '../ResourcePicker.svelte'
+	import { X, Plus, Boxes } from 'lucide-svelte'
+	import Section from '$lib/components/Section.svelte'
+	import Required from '$lib/components/Required.svelte'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
+	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import Label from '$lib/components/Label.svelte'
+	import SchemaForm from '../SchemaForm.svelte'
+
+	let isValid: boolean = false
+
+	export let kafka_resource_path: string = ''
+	export let topics: string[] = ['']
+	export let group_id: string = ''
+	export let topicsError: string = ''
+	export let groupIdError: string = ''
+	export let defaultValues: Record<string, any> | undefined = undefined
+	export let dirtyGroupId: boolean = false
+	export let headless: boolean = false
+	export let args: Record<string, any> | undefined = undefined
+	export let staticInputDisabled: boolean = true
+
+	let selected: 'resource' | 'static' = staticInputDisabled ? 'resource' : 'static'
+
+	const connnectionSchema = {
+		$schema: 'http://json-schema.org/draft-07/schema#',
+		type: 'object',
+		properties: {
+			brokers: {
+				type: 'array',
+				items: {
+					type: 'string'
+				},
+				nullable: false,
+				title: 'Brokers'
+			},
+			security: {
+				type: 'object',
+				title: 'Security',
+				oneOf: [
+					{
+						type: 'object',
+						title: 'PLAINTEXT',
+						properties: {
+							label: {
+								enum: ['PLAINTEXT'],
+								type: 'string'
+							}
+						}
+					},
+					{
+						type: 'object',
+						order: ['mechanism', 'username', 'password'],
+						title: 'SASL_PLAINTEXT',
+						required: ['mechanism', 'username', 'password'],
+						properties: {
+							label: {
+								enum: ['SASL_PLAINTEXT'],
+								type: 'string'
+							},
+							password: {
+								type: 'string',
+								password: true
+							},
+							username: {
+								type: 'string'
+							},
+							mechanism: {
+								enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
+								type: 'string',
+								disableCreate: true
+							}
+						}
+					},
+					{
+						type: 'object',
+						title: 'SSL',
+						properties: {
+							label: {
+								enum: ['SSL'],
+								type: 'string'
+							}
+						}
+					},
+					{
+						type: 'object',
+						order: ['mechanism', 'username', 'password'],
+						title: 'SASL_SSL',
+						required: ['mechanism', 'username', 'password'],
+						properties: {
+							label: {
+								enum: ['SASL_SSL'],
+								type: 'string'
+							},
+							password: {
+								type: 'string',
+								password: true
+							},
+							username: {
+								type: 'string'
+							},
+							mechanism: {
+								enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
+								type: 'string',
+								disableCreate: true
+							}
+						}
+					}
+				]
+			}
+		},
+		required: ['brokers', 'security']
+	}
+
+	const argsSchema = {
+		$schema: 'http://json-schema.org/draft-07/schema#',
+		type: 'object',
+		properties: {
+			topics: {
+				type: 'array',
+				items: {
+					type: 'string'
+				},
+				nullable: false,
+				title: 'Topics'
+			},
+			group_id: { type: 'string', title: 'Group ID' }
+		},
+		required: ['topics', 'group_id']
+	}
+
+	console.log(argsSchema)
+
+	function updateArgs(topics: string[], group_id: string) {
+		if (args) {
+			args.topics = topics
+			args.group_id = group_id
+		}
+	}
+
+	$: updateArgs(topics, group_id)
+</script>
+
+<Section label="Kafka" {headless}>
+	<div class="flex flex-col w-full gap-4">
+		<div class="block grow w-full">
+			<Label label="Connection">
+				<svelte:fragment slot="header">
+					{#if !staticInputDisabled}
+						<ToggleButtonGroup bind:selected>
+							<ToggleButton value="static" label="Static" small />
+							<ToggleButton value="resource" label="Resource" icon={Boxes} small />
+						</ToggleButtonGroup>
+					{/if}
+				</svelte:fragment>
+
+				{#if selected === 'resource'}
+					<ResourcePicker resourceType="kafka" bind:value={kafka_resource_path} {defaultValues} />
+				{:else}
+					<SchemaForm schema={connnectionSchema} bind:args bind:isValid />
+				{/if}
+			</Label>
+		</div>
+		<label class="block grow w-full">
+			<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+				<div>
+					Topics
+					<Required required={true} />
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-4 mt-1">
+				{#each topics as v, i}
+					<div class="flex w-full gap-2 items-center">
+						<input type="text" bind:value={v} />
+
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
+							aria-label="Clear"
+							on:click={() => {
+								topics = topics.filter((_, index) => index !== i)
+							}}
+							class:hidden={topics.length === 1}
+						>
+							<X size={14} />
+						</button>
+					</div>
+				{/each}
+
+				<div class="flex items-baseline">
+					<Button
+						variant="border"
+						color="light"
+						size="xs"
+						on:click={() => {
+							if (topics == undefined || !Array.isArray(topics)) {
+								topics = []
+							}
+							topics = topics.concat('')
+						}}
+						startIcon={{ icon: Plus }}
+					>
+						Add topic
+					</Button>
+				</div>
+			</div>
+			<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+				{topicsError}
+			</div>
+		</label>
+
+		<label class="block grow w-full">
+			<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+				<div>
+					Group ID
+					<Required required={true} />
+				</div>
+			</div>
+			<div class="mt-1">
+				<input type="text" bind:value={group_id} on:focus={() => (dirtyGroupId = true)} />
+			</div>
+
+			<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
+				{groupIdError}
+			</div>
+		</label>
+	</div>
+</Section>
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
index 799456c31d67b..e34d8c2c8f2c5 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Button } from '../common'
 	import { enterpriseLicense, userStore, workspaceStore } from '$lib/stores'
 	import { KafkaTriggerService, type KafkaTrigger } from '$lib/gen'
-	import Skeleton from '../common/skeleton/Skeleton.svelte'
 	import { canWrite } from '$lib/utils'
 	import Alert from '../common/alert/Alert.svelte'
 	import type { TriggerContext } from '../triggers'
 	import { getContext, onMount } from 'svelte'
 	import KafkaTriggerEditor from './KafkaTriggerEditor.svelte'
 	import { isCloudHosted } from '$lib/cloud'
-	import KafkaIcon from '../icons/KafkaIcon.svelte'
+	import TriggersEditorSection from './TriggersEditorSection.svelte'
+	import Section from '$lib/components/Section.svelte'
+	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 
 	export let isFlow: boolean
 	export let path: string
@@ -50,6 +50,15 @@
 			console.error('impossible to load kafka triggers', e)
 		}
 	}
+
+	let data = {
+		kafkaTriggers: [],
+		newItem
+	}
+
+	function saveTrigger(path: string, args?: Record<string, any>) {
+		kafkaTriggerEditor?.openNew(isFlow, path, args)
+	}
 </script>
 
 <KafkaTriggerEditor
@@ -69,23 +78,24 @@
 	</Alert>
 {:else}
 	<div class="flex flex-col gap-4">
+		<TriggersEditorSection
+			on:saveTrigger={(e) => {
+				saveTrigger(path, e.detail.config)
+			}}
+			cloudDisabled={false}
+			captureType="kafka"
+			{isFlow}
+			{data}
+		/>
+
 		{#if newItem}
 			<Alert title="Triggers disabled" type="warning" size="xs">
 				Deploy the {isFlow ? 'flow' : 'script'} to add kafka triggers.
 			</Alert>
-		{:else}
-			<Button
-				on:click={() => kafkaTriggerEditor?.openNew(isFlow, path)}
-				variant="border"
-				color="light"
-				size="xs"
-				startIcon={{ icon: KafkaIcon }}
-			>
-				New Kafka Trigger
-			</Button>
-			{#if kafkaTriggers}
+		{:else if kafkaTriggers}
+			<Section label="Kafka Triggers">
 				{#if kafkaTriggers.length == 0}
-					<div class="text-xs text-secondary"> No kafka triggers </div>
+					<div class="text-xs text-secondary text-center"> No kafka triggers </div>
 				{:else}
 					<div class="flex flex-col divide-y pt-2">
 						{#each kafkaTriggers as kafkaTrigger (kafkaTrigger.path)}
@@ -95,10 +105,7 @@
 									{kafkaTrigger.kafka_resource_path}
 								</div>
 								<div class="flex justify-end">
-									<button
-										on:click={() => kafkaTriggerEditor?.openEdit(kafkaTrigger.path, isFlow)}
-										class="px-2"
-									>
+									<button on:click={() => saveTrigger(kafkaTrigger.path)} class="px-2">
 										{#if kafkaTrigger.canWrite}
 											Edit
 										{:else}
@@ -110,9 +117,9 @@
 						{/each}
 					</div>
 				{/if}
-			{:else}
-				<Skeleton layout={[[8]]} />
-			{/if}
+			</Section>
+		{:else}
+			<Skeleton layout={[[8]]} />
 		{/if}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 34372a380d920..28b3029fbaa4b 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -126,6 +126,7 @@
 				console.log('dbg redirect')
 			}
 		}}
+		on:saveTrigger
 		bind:args
 		bind:handleCapture
 		bind:captureActive

From 49f141e96c75de9361a73a076991a01cefcedd21 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 9 Dec 2024 21:33:43 +0000
Subject: [PATCH 12/42] Add edit option in capture table

---
 .../components/triggers/CaptureTable.svelte   | 23 +++++++++++--------
 .../components/triggers/CaptureWrapper.svelte |  1 +
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index ab173d9bbb9d0..d5b6f0debfb9b 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -25,6 +25,7 @@
 	export let headless = false
 	export let addButton = false
 	export let hideCapturesWhenEmpty = false
+	export let canEdit = false
 
 	let captures: Capture[] = []
 	let selectedCaptures: any[] = []
@@ -211,16 +212,18 @@
 							</Button>
 						{/if}
 
-						<Button
-							size="xs2"
-							color="red"
-							iconOnly
-							startIcon={{ icon: Trash2 }}
-							loading={deleteLoading === capture.id}
-							on:click={() => {
-								deleteCapture(capture.id)
-							}}
-						/>
+						{#if canEdit}
+							<Button
+								size="xs2"
+								color="red"
+								iconOnly
+								startIcon={{ icon: Trash2 }}
+								loading={deleteLoading === capture.id}
+								on:click={() => {
+									deleteCapture(capture.id)
+								}}
+							/>
+						{/if}
 					</div>
 				{/each}
 			{/if}
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index c645dbd0d926a..48d26e9634faf 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -209,6 +209,7 @@
 			{path}
 			bind:refreshCaptures
 			hideCapturesWhenEmpty={true}
+			canEdit={true}
 		/>
 	{/if}
 </div>

From f4267daa1e5ebc0cba8b6b586df92a7cc5cedbe5 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 12:11:49 +0000
Subject: [PATCH 13/42] use light header for arg input

---
 frontend/src/lib/components/ArgInput.svelte   |   2 +
 .../src/lib/components/FieldHeader.svelte     |  10 +-
 .../src/lib/components/ResourcePicker.svelte  |   2 +-
 frontend/src/lib/components/SchemaForm.svelte |   2 +
 frontend/src/lib/components/Subsection.svelte |  55 ++++++++
 .../toggleButton-v2/ToggleButton.svelte       |   2 +-
 .../KafkaTriggersConfigSection.svelte         | 123 ++++++------------
 7 files changed, 110 insertions(+), 86 deletions(-)
 create mode 100644 frontend/src/lib/components/Subsection.svelte

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index e19a48967ec9e..e4c43f17ae09c 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -95,6 +95,7 @@
 		| { type: 'hash'; hash: string }
 		| undefined = undefined
 	export let otherArgs: Record<string, any> = {}
+	export let lightHeader = false
 
 	let oneOfSelected: string | undefined = undefined
 	async function updateOneOfSelected(oneOf: SchemaProperty[] | undefined) {
@@ -345,6 +346,7 @@
 				{contentEncoding}
 				{format}
 				{simpleTooltip}
+				{lightHeader}
 			/>
 		{/if}
 
diff --git a/frontend/src/lib/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte
index 0dea7e0a14f89..2bbbacf1989c5 100644
--- a/frontend/src/lib/components/FieldHeader.svelte
+++ b/frontend/src/lib/components/FieldHeader.svelte
@@ -14,10 +14,18 @@
 	export let labelClass: string = ''
 	export let prettify = false
 	export let simpleTooltip: string | undefined = undefined
+	export let lightHeader = false
 </script>
 
 <div class="inline-flex flex-row items-baseline truncated">
-	<span class={twMerge(disabled ? 'text-tertiary' : '', 'font-semibold', labelClass)}>
+	<span
+		class={twMerge(
+			disabled ? 'text-tertiary' : '',
+			'font-semibold',
+			lightHeader ? 'text-secondary text-sm font-normal' : '',
+			labelClass
+		)}
+	>
 		{#if prettify}
 			{label.replace(/_/g, ' ').split(' ').map(capitalize).join(' ')}
 		{:else}
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index b2c9ac6807295..95a4928f9cdc9 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -187,7 +187,7 @@
 					{disabled}
 					color="light"
 					variant="border"
-					size="sm"
+					size="xs"
 					on:click={() => appConnect?.open?.(resourceType)}
 					startIcon={{ icon: Plus }}
 					iconOnly={collection?.length > 0}
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index bbd226d0aef80..f6384ba906c7d 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -45,6 +45,7 @@
 		| { type: 'inline'; path?: string; lang: Script['language']; code: string }
 		| { type: 'hash'; hash: string }
 		| undefined = undefined
+	export let lightHeader = false
 
 	const dispatch = createEventDispatcher()
 
@@ -262,6 +263,7 @@
 										orderEditable={dndConfig != undefined}
 										otherArgs={args}
 										{helperScript}
+										{lightHeader}
 									>
 										<svelte:fragment slot="actions">
 											<slot name="actions" />
diff --git a/frontend/src/lib/components/Subsection.svelte b/frontend/src/lib/components/Subsection.svelte
new file mode 100644
index 0000000000000..a3dd13bde11f0
--- /dev/null
+++ b/frontend/src/lib/components/Subsection.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { enterpriseLicense } from '$lib/stores'
+	import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-svelte'
+	import Tooltip from './Tooltip.svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	export let label: string | undefined = undefined
+	export let tooltip: string | undefined = undefined
+	export let eeOnly = false
+
+	export let collapsable: boolean = false
+	export let collapsed: boolean = true
+	export let headless: boolean = false
+</script>
+
+<div class="w-full">
+	{#if !headless}
+		<div class="flex flex-row justify-between items-center mb-1">
+			<h3 class={twMerge('font-semibold flex flex-row items-center gap-2', 'text-sm')}>
+				{#if collapsable}
+					<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
+						{#if collapsed}
+							<ChevronRight size={16} />
+						{:else}
+							<ChevronDown size={16} />
+						{/if}
+						{label}
+					</button>
+				{:else}
+					{label}
+				{/if}
+
+				<slot name="header" />
+				{#if tooltip}
+					<Tooltip>{tooltip}</Tooltip>
+				{/if}
+				{#if eeOnly}
+					{#if !$enterpriseLicense}
+						<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap ml-8">
+							<AlertTriangle size={16} />
+							EE only <Tooltip>Enterprise Edition only feature</Tooltip>
+						</div>
+					{/if}
+				{/if}
+			</h3>
+			<slot name="action" />
+			{#if collapsable && collapsed}
+				<slot name="badge" />
+			{/if}
+		</div>
+	{/if}
+	<div class={collapsable && collapsed ? `hidden ${$$props.class}` : `${$$props.class}`}>
+		<slot />
+	</div>
+</div>
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
index e5bc62aa889fb..7f903debd8d86 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
@@ -48,7 +48,7 @@
 			{#if icon}
 				<svelte:component
 					this={icon}
-					size={14}
+					size={small ? 12 : 14}
 					color={$selected === value ? selectedColor : '#9CA3AF'}
 					{...iconProps}
 				/>
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
index a86801294a4b5..e81bda0b593b1 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
@@ -1,24 +1,22 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition'
 	import ResourcePicker from '../ResourcePicker.svelte'
-	import { X, Plus, Boxes } from 'lucide-svelte'
+	import { Boxes } from 'lucide-svelte'
 	import Section from '$lib/components/Section.svelte'
-	import Required from '$lib/components/Required.svelte'
-	import Button from '$lib/components/common/button/Button.svelte'
+	import Subsection from '$lib/components/Subsection.svelte'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import Label from '$lib/components/Label.svelte'
 	import SchemaForm from '../SchemaForm.svelte'
+	import { ResourceService } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
 
 	let isValid: boolean = false
 
-	export let kafka_resource_path: string = ''
-	export let topics: string[] = ['']
-	export let group_id: string = ''
+	export let topics: string[] = []
 	export let topicsError: string = ''
+	export let group_id: string = ''
 	export let groupIdError: string = ''
+	export let kafka_resource_path: string = ''
 	export let defaultValues: Record<string, any> | undefined = undefined
-	export let dirtyGroupId: boolean = false
 	export let headless: boolean = false
 	export let args: Record<string, any> | undefined = undefined
 	export let staticInputDisabled: boolean = true
@@ -134,25 +132,42 @@
 
 	console.log(argsSchema)
 
-	function updateArgs(topics: string[], group_id: string) {
-		if (args) {
-			args.topics = topics
-			args.group_id = group_id
+	async function getResourceValue(path: string) {
+		const value = await ResourceService.getResourceValueInterpolated({
+			workspace: $workspaceStore!,
+			path
+		})
+		return value as { brokers: string[]; security: string }
+	}
+
+	async function updateArgs(resourcePath: string) {
+		if (resourcePath != '' && resourcePath != undefined) {
+			const resourceValue = await getResourceValue(resourcePath)
+			if (!resourceValue) {
+				return
+			}
+			args = {
+				...args,
+				brokers: resourceValue.brokers,
+				security: resourceValue.security
+			}
 		}
 	}
 
-	$: updateArgs(topics, group_id)
+	$: updateArgs(kafka_resource_path)
+	$: topics = args?.topics
+	$: group_id = args?.group_id
 </script>
 
 <Section label="Kafka" {headless}>
 	<div class="flex flex-col w-full gap-4">
 		<div class="block grow w-full">
-			<Label label="Connection">
+			<Subsection label="Connection">
 				<svelte:fragment slot="header">
 					{#if !staticInputDisabled}
-						<ToggleButtonGroup bind:selected>
-							<ToggleButton value="static" label="Static" small />
-							<ToggleButton value="resource" label="Resource" icon={Boxes} small />
+						<ToggleButtonGroup bind:selected class="h-full">
+							<ToggleButton value="static" label="Static" small={true} />
+							<ToggleButton value="resource" label="Resource" icon={Boxes} small={true} />
 						</ToggleButtonGroup>
 					{/if}
 				</svelte:fragment>
@@ -160,73 +175,15 @@
 				{#if selected === 'resource'}
 					<ResourcePicker resourceType="kafka" bind:value={kafka_resource_path} {defaultValues} />
 				{:else}
-					<SchemaForm schema={connnectionSchema} bind:args bind:isValid />
+					<SchemaForm schema={connnectionSchema} bind:args bind:isValid lightHeader={true} />
 				{/if}
-			</Label>
+			</Subsection>
 		</div>
-		<label class="block grow w-full">
-			<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-				<div>
-					Topics
-					<Required required={true} />
-				</div>
-			</div>
 
-			<div class="flex flex-col gap-4 mt-1">
-				{#each topics as v, i}
-					<div class="flex w-full gap-2 items-center">
-						<input type="text" bind:value={v} />
-
-						<button
-							transition:fade|local={{ duration: 100 }}
-							class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
-							aria-label="Clear"
-							on:click={() => {
-								topics = topics.filter((_, index) => index !== i)
-							}}
-							class:hidden={topics.length === 1}
-						>
-							<X size={14} />
-						</button>
-					</div>
-				{/each}
-
-				<div class="flex items-baseline">
-					<Button
-						variant="border"
-						color="light"
-						size="xs"
-						on:click={() => {
-							if (topics == undefined || !Array.isArray(topics)) {
-								topics = []
-							}
-							topics = topics.concat('')
-						}}
-						startIcon={{ icon: Plus }}
-					>
-						Add topic
-					</Button>
-				</div>
-			</div>
-			<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
-				{topicsError}
-			</div>
-		</label>
-
-		<label class="block grow w-full">
-			<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-				<div>
-					Group ID
-					<Required required={true} />
-				</div>
-			</div>
-			<div class="mt-1">
-				<input type="text" bind:value={group_id} on:focus={() => (dirtyGroupId = true)} />
-			</div>
-
-			<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">
-				{groupIdError}
-			</div>
-		</label>
+		<div class="block grow w-full">
+			<Subsection headless={true}>
+				<SchemaForm schema={argsSchema} bind:args bind:isValid lightHeader={true} />
+			</Subsection>
+		</div>
 	</div>
 </Section>

From 3afd4d853eaabe19b76cfa4d017043ef2eb4d3de Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 13:18:16 +0000
Subject: [PATCH 14/42] Add prefilled group id

---
 frontend/src/lib/components/triggers/CaptureWrapper.svelte | 2 +-
 .../components/triggers/KafkaTriggersConfigSection.svelte  | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 48d26e9634faf..7fe4a74fd0efb 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -198,7 +198,7 @@
 				{captureActive}
 			/>
 		{:else if captureType === 'kafka'}
-			<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} />
+			<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} {path} />
 		{/if}
 
 		<CaptureTable
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
index e81bda0b593b1..aaaf1d6b45b4f 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
@@ -20,6 +20,7 @@
 	export let headless: boolean = false
 	export let args: Record<string, any> | undefined = undefined
 	export let staticInputDisabled: boolean = true
+	export let path: string = ''
 
 	let selected: 'resource' | 'static' = staticInputDisabled ? 'resource' : 'static'
 
@@ -137,7 +138,7 @@
 			workspace: $workspaceStore!,
 			path
 		})
-		return value as { brokers: string[]; security: string }
+		return value as { brokers: string[]; security: any }
 	}
 
 	async function updateArgs(resourcePath: string) {
@@ -154,6 +155,10 @@
 		}
 	}
 
+	$: path &&
+		args &&
+		(args.group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`)
+
 	$: updateArgs(kafka_resource_path)
 	$: topics = args?.topics
 	$: group_id = args?.group_id

From 8568665b907d7d7c0f8db86dc9cfc5d8d269679d Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 13:18:25 +0000
Subject: [PATCH 15/42] Change button label

---
 .../src/lib/components/triggers/TriggersEditorSection.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 28b3029fbaa4b..f97824534cced 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -72,7 +72,7 @@
 					startIcon={{ icon: captureActive ? CircleStop : Play }}
 					btnClasses={captureActive ? 'text-blue-500 hover:text-blue-500' : ''}
 				>
-					Capture
+					Live test
 				</Button>
 			</AnimatedButton>
 
@@ -89,7 +89,7 @@
 							})
 						}}
 					>
-						New {captureTypeLabels[captureType]}
+						Save
 					</Button>
 					<svelte:fragment slot="text">
 						{#if disabled}

From 12e19a5493d2fb6beacdebf390f67467bb7a6266 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 16:36:52 +0000
Subject: [PATCH 16/42] fix logic

---
 .../components/triggers/CaptureWrapper.svelte |  7 +--
 .../triggers/KafkaTriggerEditorInner.svelte   | 53 ++++++++-----------
 .../KafkaTriggersConfigSection.svelte         | 48 +++--------------
 .../triggers/KafkaTriggersPanel.svelte        |  5 +-
 4 files changed, 34 insertions(+), 79 deletions(-)

diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 7fe4a74fd0efb..902678f2fbb28 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -27,10 +27,6 @@
 		| undefined = undefined
 	export let args: Record<string, any> = {}
 
-	let isValid = true
-
-	$: captureType && (isValid = true)
-
 	export async function setConfig() {
 		await CaptureService.setCaptureConfig({
 			requestBody: {
@@ -93,6 +89,7 @@
 	}
 
 	function stopAndSetDefaultArgs() {
+		console.log('dbg stopAndSetDefaultArgs', args)
 		captureActive = false
 		if (captureType in captureConfigs) {
 			const triggerConfig = captureConfigs[captureType].trigger_config
@@ -198,7 +195,7 @@
 				{captureActive}
 			/>
 		{:else if captureType === 'kafka'}
-			<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} {path} />
+			<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} />
 		{/if}
 
 		<CaptureTable
diff --git a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
index 0de8a82760adc..7a8bd8ef48b1b 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
@@ -25,15 +25,13 @@
 	let fixedScriptPath = ''
 	let path: string = ''
 	let pathError = ''
-	let kafka_resource_path = ''
-	let group_id = ''
-	let topics: string[] = ['']
 	let dirtyGroupId = false
 	let enabled = false
 	let dirtyPath = false
 	let can_write = true
 	let drawerLoading = true
 	let defaultValues: Record<string, any> | undefined = undefined
+	let args: Record<string, any> = {}
 
 	const dispatch = createEventDispatcher()
 
@@ -67,9 +65,9 @@
 			is_flow = nis_flow
 			edit = false
 			itemKind = nis_flow ? 'flow' : 'script'
-			kafka_resource_path = ''
-			group_id = nDefaultValues?.group_id ?? ''
-			topics = nDefaultValues?.topics ?? ['']
+			args.kafka_resource_path = ''
+			args.group_id = nDefaultValues?.group_id ?? ''
+			args.topics = nDefaultValues?.topics ?? ['']
 			dirtyGroupId = false
 			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
@@ -93,9 +91,9 @@
 
 		is_flow = s.is_flow
 		path = s.path
-		kafka_resource_path = s.kafka_resource_path
-		group_id = s.group_id
-		topics = s.topics
+		args.kafka_resource_path = s.kafka_resource_path
+		args.group_id = s.group_id
+		args.topics = s.topics
 		enabled = s.enabled
 
 		can_write = canWrite(s.path, s.extra_perms, $userStore)
@@ -110,9 +108,9 @@
 					path,
 					script_path,
 					is_flow,
-					kafka_resource_path,
-					group_id,
-					topics
+					kafka_resource_path: args.kafka_resource_path,
+					group_id: args.group_id,
+					topics: args.topics
 				}
 			})
 			sendUserToast(`Kafka trigger ${path} updated`)
@@ -124,9 +122,9 @@
 					script_path,
 					is_flow,
 					enabled: true,
-					kafka_resource_path,
-					group_id,
-					topics
+					kafka_resource_path: args.kafka_resource_path,
+					group_id: args.group_id,
+					topics: args.topics
 				}
 			})
 			sendUserToast(`Kafka trigger ${path} created`)
@@ -138,12 +136,12 @@
 		drawer.closeDrawer()
 	}
 
-	$: topicsError = topics.some((b) => /[^[a-zA-Z0-9-_.]/.test(b)) ? 'Invalid topics' : ''
-	$: groupIdError = /[^a-zA-Z0-9-_.]/.test(group_id) ? 'Invalid group ID' : ''
-
+	$: topicsError = args.topics?.some((b) => /[^[a-zA-Z0-9-_.]/.test(b)) ? 'Invalid topics' : ''
+	$: groupIdError = /[^a-zA-Z0-9-_.]/.test(args.group_id) ? 'Invalid group ID' : ''
 	$: !dirtyGroupId &&
 		path &&
-		(group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`)
+		args.group_id == '' &&
+		(args.group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`)
 </script>
 
 <Drawer size="800px" bind:this={drawer}>
@@ -178,11 +176,11 @@
 					startIcon={{ icon: Save }}
 					disabled={pathError != '' ||
 						emptyString(script_path) ||
-						emptyString(kafka_resource_path) ||
-						topics.length < 1 ||
-						topics.some((t) => emptyString(t)) ||
+						emptyString(args.kafka_resource_path) ||
+						args.topics.length < 1 ||
+						args.topics.some((t) => emptyString(t)) ||
 						topicsError != '' ||
-						emptyString(group_id) ||
+						emptyString(args.group_id) ||
 						groupIdError != '' ||
 						!can_write}
 					on:click={updateTrigger}
@@ -217,14 +215,7 @@
 					</Label>
 				</div>
 
-				<KafkaTriggersConfigSection
-					{kafka_resource_path}
-					{topics}
-					{group_id}
-					{topicsError}
-					{groupIdError}
-					{defaultValues}
-				/>
+				<KafkaTriggersConfigSection bind:args {defaultValues} />
 
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
index aaaf1d6b45b4f..23e447fa9c1b2 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
@@ -6,21 +6,13 @@
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import SchemaForm from '../SchemaForm.svelte'
-	import { ResourceService } from '$lib/gen'
-	import { workspaceStore } from '$lib/stores'
 
 	let isValid: boolean = false
 
-	export let topics: string[] = []
-	export let topicsError: string = ''
-	export let group_id: string = ''
-	export let groupIdError: string = ''
-	export let kafka_resource_path: string = ''
 	export let defaultValues: Record<string, any> | undefined = undefined
 	export let headless: boolean = false
-	export let args: Record<string, any> | undefined = undefined
+	export let args: Record<string, any> = {}
 	export let staticInputDisabled: boolean = true
-	export let path: string = ''
 
 	let selected: 'resource' | 'static' = staticInputDisabled ? 'resource' : 'static'
 
@@ -130,38 +122,6 @@
 		},
 		required: ['topics', 'group_id']
 	}
-
-	console.log(argsSchema)
-
-	async function getResourceValue(path: string) {
-		const value = await ResourceService.getResourceValueInterpolated({
-			workspace: $workspaceStore!,
-			path
-		})
-		return value as { brokers: string[]; security: any }
-	}
-
-	async function updateArgs(resourcePath: string) {
-		if (resourcePath != '' && resourcePath != undefined) {
-			const resourceValue = await getResourceValue(resourcePath)
-			if (!resourceValue) {
-				return
-			}
-			args = {
-				...args,
-				brokers: resourceValue.brokers,
-				security: resourceValue.security
-			}
-		}
-	}
-
-	$: path &&
-		args &&
-		(args.group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`)
-
-	$: updateArgs(kafka_resource_path)
-	$: topics = args?.topics
-	$: group_id = args?.group_id
 </script>
 
 <Section label="Kafka" {headless}>
@@ -178,7 +138,11 @@
 				</svelte:fragment>
 
 				{#if selected === 'resource'}
-					<ResourcePicker resourceType="kafka" bind:value={kafka_resource_path} {defaultValues} />
+					<ResourcePicker
+						resourceType="kafka"
+						bind:value={args.kafka_resource_path}
+						{defaultValues}
+					/>
 				{:else}
 					<SchemaForm schema={connnectionSchema} bind:args bind:isValid lightHeader={true} />
 				{/if}
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
index e34d8c2c8f2c5..e430dbe0a470b 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
@@ -105,7 +105,10 @@
 									{kafkaTrigger.kafka_resource_path}
 								</div>
 								<div class="flex justify-end">
-									<button on:click={() => saveTrigger(kafkaTrigger.path)} class="px-2">
+									<button
+										on:click={() => kafkaTriggerEditor?.openEdit(kafkaTrigger.path, isFlow)}
+										class="px-2"
+									>
 										{#if kafkaTrigger.canWrite}
 											Edit
 										{:else}

From 49bc8dc3f129e28d0031adc97546de007d10cd87 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 17:03:48 +0000
Subject: [PATCH 17/42] Open resource drawer if prototype has fields

---
 .../triggers/KafkaTriggerEditorInner.svelte   | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
index 7a8bd8ef48b1b..8d942466885f9 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
@@ -65,7 +65,7 @@
 			is_flow = nis_flow
 			edit = false
 			itemKind = nis_flow ? 'flow' : 'script'
-			args.kafka_resource_path = ''
+			args.kafka_resource_path = nDefaultValues?.kafka_resource_path ?? ''
 			args.group_id = nDefaultValues?.group_id ?? ''
 			args.topics = nDefaultValues?.topics ?? ['']
 			dirtyGroupId = false
@@ -142,6 +142,21 @@
 		path &&
 		args.group_id == '' &&
 		(args.group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`)
+
+	function useDefaultValues() {
+		if (args.kafka_resource_path && args.kafka_resource_path != '') {
+			return false
+		}
+		if (!defaultValues) {
+			return false
+		}
+		console.log('dbg defaultValues', defaultValues)
+		return (
+			defaultValues.brokers &&
+			defaultValues.brokers.length > 0 &&
+			defaultValues.brokers.some((broker: string) => broker.trim() !== '')
+		)
+	}
 </script>
 
 <Drawer size="800px" bind:this={drawer}>
@@ -215,7 +230,10 @@
 					</Label>
 				</div>
 
-				<KafkaTriggersConfigSection bind:args {defaultValues} />
+				<KafkaTriggersConfigSection
+					bind:args
+					defaultValues={useDefaultValues() ? defaultValues : undefined}
+				/>
 
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">

From 4e43640ff5cbe5c1d75926c8cdee7ffe77b21de2 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 17:29:18 +0000
Subject: [PATCH 18/42] fix default completion

---
 .../components/triggers/CaptureWrapper.svelte |  3 ++-
 .../triggers/KafkaTriggerEditorInner.svelte   |  5 -----
 .../KafkaTriggersConfigSection.svelte         | 22 ++++++++++++++++++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 902678f2fbb28..4db15207b1677 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -89,13 +89,14 @@
 	}
 
 	function stopAndSetDefaultArgs() {
-		console.log('dbg stopAndSetDefaultArgs', args)
 		captureActive = false
 		if (captureType in captureConfigs) {
 			const triggerConfig = captureConfigs[captureType].trigger_config
 			args = isObject(triggerConfig) ? triggerConfig : {}
 		} else if (captureType === 'kafka') {
 			args = {
+				...args,
+				kafka_resource_path: '',
 				brokers: [''],
 				topics: [''],
 				group_id: `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
diff --git a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
index 8d942466885f9..c43d21c06138b 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
@@ -138,10 +138,6 @@
 
 	$: topicsError = args.topics?.some((b) => /[^[a-zA-Z0-9-_.]/.test(b)) ? 'Invalid topics' : ''
 	$: groupIdError = /[^a-zA-Z0-9-_.]/.test(args.group_id) ? 'Invalid group ID' : ''
-	$: !dirtyGroupId &&
-		path &&
-		args.group_id == '' &&
-		(args.group_id = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`)
 
 	function useDefaultValues() {
 		if (args.kafka_resource_path && args.kafka_resource_path != '') {
@@ -150,7 +146,6 @@
 		if (!defaultValues) {
 			return false
 		}
-		console.log('dbg defaultValues', defaultValues)
 		return (
 			defaultValues.brokers &&
 			defaultValues.brokers.length > 0 &&
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
index 23e447fa9c1b2..d5d467cc21a25 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
@@ -122,6 +122,21 @@
 		},
 		required: ['topics', 'group_id']
 	}
+
+	$: connectionArgs = {
+		get brokers() {
+			return args.brokers
+		},
+		set brokers(value) {
+			args.brokers = value
+		},
+		get security() {
+			return args.security
+		},
+		set security(value) {
+			args.security = value
+		}
+	}
 </script>
 
 <Section label="Kafka" {headless}>
@@ -144,7 +159,12 @@
 						{defaultValues}
 					/>
 				{:else}
-					<SchemaForm schema={connnectionSchema} bind:args bind:isValid lightHeader={true} />
+					<SchemaForm
+						schema={connnectionSchema}
+						bind:args={connectionArgs}
+						bind:isValid
+						lightHeader={true}
+					/>
 				{/if}
 			</Subsection>
 		</div>

From cf9749faf8a3d1b3356904f963dc18fe538e0455 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 17:34:00 +0000
Subject: [PATCH 19/42] Change name Prototype

---
 .../src/lib/components/triggers/TriggersEditorSection.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index f97824534cced..c461e33fb6b01 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -55,7 +55,7 @@
 	$: $captureOn && handleCapture?.()
 </script>
 
-<Section label={`${captureTypeLabels[captureType]} Prototype`}>
+<Section label={`New ${captureTypeLabels[captureType]} Trigger`}>
 	<svelte:fragment slot="action">
 		<div class="flex flex-row grow w-min-0 gap-2 px-2 items-center justify-end">
 			<ConnectionIndicator {connectionInfo} />

From 3987d5480e93df1c57bae19172ba7f6b953d87f4 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 18:25:10 +0000
Subject: [PATCH 20/42] Dissociate Editor Mode for triggers

---
 .../details/EmailTriggerPanel.svelte          |   5 +-
 .../flows/content/FlowEditorPanel.svelte      |   1 -
 .../triggers/KafkaTriggersPanel.svelte        |   5 +-
 .../components/triggers/RoutesPanel.svelte    |   5 +-
 .../components/triggers/TriggersEditor.svelte |   8 +-
 .../triggers/TriggersEditorSection.svelte     | 108 ++++++++++--------
 .../triggers/TriggersWrapper.svelte           |  56 +++++++++
 .../components/triggers/WebhooksPanel.svelte  |  14 ++-
 .../triggers/WebsocketTriggersPanel.svelte    |   5 +-
 9 files changed, 147 insertions(+), 60 deletions(-)
 create mode 100644 frontend/src/lib/components/triggers/TriggersWrapper.svelte

diff --git a/frontend/src/lib/components/details/EmailTriggerPanel.svelte b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
index 42ac985b08b81..4319f70ba5573 100644
--- a/frontend/src/lib/components/details/EmailTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
@@ -16,6 +16,7 @@
 	export let isFlow: boolean = false
 	export let hash: string | undefined = undefined
 	export let path: string
+	export let isEditor: boolean = false
 
 	let emailDomain: string | null = null
 	let triggerTokens: TriggerTokens | undefined = undefined
@@ -52,10 +53,12 @@
 		{#if emailDomain}
 			<TriggersEditorSection
 				cloudDisabled={false}
-				captureType="email"
+				triggerType="email"
 				{isFlow}
 				noSave
 				data={{ emailDomain, userSettings, token, hash, path }}
+				{isEditor}
+				{path}
 			/>
 		{:else}
 			<div>
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index adb699054a495..368ed7820ac5b 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -66,7 +66,6 @@
 		{noEditor}
 		disabled={disabledFlowInputs}
 		on:openTriggers={(ev) => {
-			console.log('dbg openTriggers', ev.detail)
 			$selectedId = 'triggers'
 			selectedTrigger.set(ev.detail.kind)
 			defaultValues.set(ev.detail.config)
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
index e430dbe0a470b..a190178f271df 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
@@ -14,6 +14,7 @@
 	export let isFlow: boolean
 	export let path: string
 	export let newItem: boolean = false
+	export let isEditor: boolean = false
 
 	let kafkaTriggerEditor: KafkaTriggerEditor
 
@@ -83,9 +84,11 @@
 				saveTrigger(path, e.detail.config)
 			}}
 			cloudDisabled={false}
-			captureType="kafka"
+			triggerType="kafka"
 			{isFlow}
 			{data}
+			{path}
+			{isEditor}
 		/>
 
 		{#if newItem}
diff --git a/frontend/src/lib/components/triggers/RoutesPanel.svelte b/frontend/src/lib/components/triggers/RoutesPanel.svelte
index e0fe43502b884..d007674e81454 100644
--- a/frontend/src/lib/components/triggers/RoutesPanel.svelte
+++ b/frontend/src/lib/components/triggers/RoutesPanel.svelte
@@ -13,6 +13,7 @@
 	export let isFlow: boolean
 	export let path: string
 	export let newItem: boolean = false
+	export let isEditor: boolean = false
 
 	let routeEditor: RouteEditor
 
@@ -63,8 +64,10 @@
 			routeEditor?.openNew(isFlow, path, e.detail.config)
 		}}
 		cloudDisabled={false}
-		captureType="http"
+		triggerType="http"
 		{isFlow}
+		{path}
+		{isEditor}
 	/>
 	<Section label="Routes">
 		{#if !newItem}
diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index 787378657b043..10f9d5f4e6651 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -50,6 +50,7 @@
 								args={{}}
 								token=""
 								{newItem}
+								isEditor={true}
 							/>
 						</div>
 					{/if}
@@ -61,25 +62,26 @@
 								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
 								path={currentPath}
 								{isFlow}
+								isEditor={true}
 							/>
 						</div>
 					{/if}
 
 					{#if $selectedTrigger === 'routes'}
 						<div class="p-4">
-							<RoutesPanel {newItem} path={currentPath} {isFlow} />
+							<RoutesPanel {newItem} path={currentPath} {isFlow} isEditor={true} />
 						</div>
 					{/if}
 
 					{#if $selectedTrigger === 'websockets'}
 						<div class="p-4">
-							<WebsocketTriggersPanel {newItem} path={currentPath} {isFlow} />
+							<WebsocketTriggersPanel {newItem} path={currentPath} {isFlow} isEditor={true} />
 						</div>
 					{/if}
 
 					{#if $selectedTrigger === 'kafka'}
 						<div class="p-4">
-							<KafkaTriggersPanel {newItem} path={currentPath} {isFlow} />
+							<KafkaTriggersPanel {newItem} path={currentPath} {isFlow} isEditor={true} />
 						</div>
 					{/if}
 
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index c461e33fb6b01..4fd48afb51744 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -12,12 +12,15 @@
 	import type { TriggerContext } from '$lib/components/triggers'
 	import { onDestroy } from 'svelte'
 	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
+	import TriggersWrapper from './TriggersWrapper.svelte'
 
 	export let cloudDisabled: boolean
-	export let captureType: CaptureTriggerKind
+	export let triggerType: CaptureTriggerKind
 	export let isFlow: boolean = false
 	export let data: any = {}
 	export let noSave = false
+	export let isEditor: boolean = false
+	export let path: string = ''
 
 	const captureTypeLabels: Record<CaptureTriggerKind, string> = {
 		http: 'Route',
@@ -41,10 +44,11 @@
 
 	const dispatch = createEventDispatcher()
 
-	const { flowStore, initialPath, pathStore, selectedId } =
-		getContext<FlowEditorContext>('FlowEditorContext')
+	const { flowStore, initialPath, selectedId } =
+		getContext<FlowEditorContext>('FlowEditorContext') || {}
 
-	$: newItem = initialPath === ''
+	let newItem = false
+	$: initialPath && (newItem = initialPath === '')
 
 	let handleCapture: (() => Promise<void>) | undefined
 
@@ -55,26 +59,28 @@
 	$: $captureOn && handleCapture?.()
 </script>
 
-<Section label={`New ${captureTypeLabels[captureType]} Trigger`}>
+<Section label={`New ${captureTypeLabels[triggerType]} Trigger`}>
 	<svelte:fragment slot="action">
 		<div class="flex flex-row grow w-min-0 gap-2 px-2 items-center justify-end">
-			<ConnectionIndicator {connectionInfo} />
+			{#if isEditor}
+				<ConnectionIndicator {connectionInfo} />
 
-			<AnimatedButton animate={captureActive} baseRadius="6px">
-				<Button
-					size="xs2"
-					on:click={() => {
-						handleCapture?.()
-					}}
-					variant="border"
-					disabled={false}
-					color="light"
-					startIcon={{ icon: captureActive ? CircleStop : Play }}
-					btnClasses={captureActive ? 'text-blue-500 hover:text-blue-500' : ''}
-				>
-					Live test
-				</Button>
-			</AnimatedButton>
+				<AnimatedButton animate={captureActive} baseRadius="6px">
+					<Button
+						size="xs2"
+						on:click={() => {
+							handleCapture?.()
+						}}
+						variant="border"
+						disabled={false}
+						color="light"
+						startIcon={{ icon: captureActive ? CircleStop : Play }}
+						btnClasses={captureActive ? 'text-blue-500 hover:text-blue-500' : ''}
+					>
+						Live test
+					</Button>
+				</AnimatedButton>
+			{/if}
 
 			{#if !noSave}
 				{@const disabled = newItem || cloudDisabled}
@@ -96,10 +102,10 @@
 							{#if newItem}
 								Deploy the runnable to enable trigger creation
 							{:else if cloudDisabled}
-								{capitalize(captureType)} triggers are disabled in the multi-tenant cloud
+								{capitalize(triggerType)} triggers are disabled in the multi-tenant cloud
 							{/if}
 						{:else}
-							Create new {captureTypeLabels[captureType]} trigger from prototype
+							Create new {captureTypeLabels[triggerType]} trigger from prototype
 						{/if}
 					</svelte:fragment>
 				</Popover>
@@ -107,30 +113,34 @@
 		</div>
 	</svelte:fragment>
 
-	<CaptureWrapper
-		path={$pathStore}
-		{isFlow}
-		{captureType}
-		hasPreprocessor={!!$flowStore.value.preprocessor_module}
-		canHavePreprocessor
-		on:applyArgs
-		on:addPreprocessor={async () => {
-			console.log('dbg add preprocessor')
-			$selectedId = 'preprocessor'
-		}}
-		on:updateSchema={(e) => {
-			const { schema, redirect } = e.detail
-			$flowStore.schema = schema
-			if (redirect) {
-				//tabSelected = 'input'
-				console.log('dbg redirect')
-			}
-		}}
-		on:saveTrigger
-		bind:args
-		bind:handleCapture
-		bind:captureActive
-		{data}
-		bind:connectionInfo
-	/>
+	{#if isEditor}
+		<CaptureWrapper
+			{path}
+			{isFlow}
+			captureType={triggerType}
+			hasPreprocessor={!!$flowStore.value.preprocessor_module}
+			canHavePreprocessor
+			on:applyArgs
+			on:addPreprocessor={async () => {
+				console.log('dbg add preprocessor')
+				$selectedId = 'preprocessor'
+			}}
+			on:updateSchema={(e) => {
+				const { schema, redirect } = e.detail
+				$flowStore.schema = schema
+				if (redirect) {
+					//tabSelected = 'input'
+					console.log('dbg redirect')
+				}
+			}}
+			on:saveTrigger
+			bind:args
+			bind:handleCapture
+			bind:captureActive
+			{data}
+			bind:connectionInfo
+		/>
+	{:else}
+		<TriggersWrapper {path} {isFlow} {triggerType} {cloudDisabled} {args} {data} />
+	{/if}
 </Section>
diff --git a/frontend/src/lib/components/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/triggers/TriggersWrapper.svelte
new file mode 100644
index 0000000000000..a2fee7365fa40
--- /dev/null
+++ b/frontend/src/lib/components/triggers/TriggersWrapper.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { type CaptureTriggerKind } from '$lib/gen'
+	import { capitalize } from '$lib/utils'
+	import Alert from '../common/alert/Alert.svelte'
+	import RouteEditorConfigSection from './RouteEditorConfigSection.svelte'
+	import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte'
+	import WebhooksConfigSection from './WebhooksConfigSection.svelte'
+	import EmailTriggerConfigSection from '../details/EmailTriggerConfigSection.svelte'
+	import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte'
+
+	export let triggerType: CaptureTriggerKind = 'webhook'
+	export let cloudDisabled: boolean = false
+	export let args: any
+	export let isFlow: boolean = false
+	export let path: string = ''
+	export let data: any = {}
+</script>
+
+<div class="flex flex-col gap-4 w-full">
+	{#if cloudDisabled}
+		<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+			{capitalize(triggerType)} triggers are disabled in the multi-tenant cloud.
+		</Alert>
+	{:else if triggerType === 'websocket'}
+		<WebsocketEditorConfigSection
+			url={''}
+			can_write={true}
+			headless={true}
+			bind:args
+			showCapture={false}
+		/>
+	{:else if triggerType === 'webhook'}
+		<WebhooksConfigSection
+			{isFlow}
+			{path}
+			hash={data?.hash}
+			token={data?.token}
+			{args}
+			scopes={data?.scopes}
+			showCapture={false}
+		/>
+	{:else if triggerType === 'http'}
+		<RouteEditorConfigSection {path} showCapture={false} can_write={true} bind:args headless />
+	{:else if triggerType === 'email'}
+		<EmailTriggerConfigSection
+			hash={data?.hash}
+			token={data?.token}
+			{path}
+			{isFlow}
+			userSettings={data?.userSettings}
+			emailDomain={data?.emailDomain}
+		/>
+	{:else if triggerType === 'kafka'}
+		<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} />
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/triggers/WebhooksPanel.svelte b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
index 78d948791854c..93145c92f48b7 100644
--- a/frontend/src/lib/components/triggers/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
@@ -10,13 +10,13 @@
 	export let hash: string | undefined = undefined
 	export let path: string
 	export let newItem: boolean = false
+	export let isEditor: boolean = false
 
 	let data: any = {
 		hash,
 		token,
 		scopes,
-		args,
-		path
+		args
 	}
 </script>
 
@@ -31,5 +31,13 @@
 		</Alert>
 	{/if}
 
-	<TriggersEditorSection cloudDisabled={false} captureType="webhook" {isFlow} {data} noSave />
+	<TriggersEditorSection
+		cloudDisabled={false}
+		triggerType="webhook"
+		{isFlow}
+		{data}
+		noSave
+		{path}
+		{isEditor}
+	/>
 </div>
diff --git a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
index 6ca12cc56963c..327a672c47f5d 100644
--- a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
@@ -14,6 +14,7 @@
 	export let isFlow: boolean
 	export let path: string
 	export let newItem: boolean = false
+	export let isEditor: boolean = false
 
 	let wsTriggerEditor: WebsocketTriggerEditor
 
@@ -70,8 +71,10 @@
 				wsTriggerEditor?.openNew(isFlow, path)
 			}}
 			cloudDisabled={false}
-			captureType="websocket"
+			triggerType="websocket"
 			{isFlow}
+			{path}
+			{isEditor}
 		/>
 
 		<Section label="Websockets">

From fa6e07f0a36ebf8a17b0a0340e745491bb7c5107 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 18:42:40 +0000
Subject: [PATCH 21/42] Fix bug for script

---
 .../src/lib/components/triggers/TriggersEditorSection.svelte    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 4fd48afb51744..2ac00d3affd47 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -118,7 +118,7 @@
 			{path}
 			{isFlow}
 			captureType={triggerType}
-			hasPreprocessor={!!$flowStore.value.preprocessor_module}
+			hasPreprocessor={isFlow && !!$flowStore.value.preprocessor_module}
 			canHavePreprocessor
 			on:applyArgs
 			on:addPreprocessor={async () => {

From 5b58a0a509c860bdc305ea87cc1fa4868d39c159 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 19:40:58 +0000
Subject: [PATCH 22/42] Fix apply args

---
 .../src/lib/components/ScriptBuilder.svelte   | 14 ++++++++++++-
 .../src/lib/components/ScriptEditor.svelte    | 16 ++++-----------
 .../details/EmailTriggerPanel.svelte          |  1 +
 .../flows/content/FlowEditorPanel.svelte      |  1 +
 .../components/triggers/CaptureWrapper.svelte |  1 +
 .../triggers/KafkaTriggersPanel.svelte        |  1 +
 .../components/triggers/RoutesPanel.svelte    |  1 +
 .../components/triggers/TriggersEditor.svelte | 20 ++++++++++++++++---
 .../components/triggers/WebhooksPanel.svelte  |  1 +
 .../triggers/WebsocketTriggersPanel.svelte    |  1 +
 .../(logged)/flows/get/[...path]/+page.svelte |  2 +-
 11 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 904080a61b42a..d3f7ff70e6c42 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -61,7 +61,7 @@
 	import { writable } from 'svelte/store'
 	import { defaultScriptLanguages, processLangs } from '$lib/scripts'
 	import DefaultScripts from './DefaultScripts.svelte'
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { createEventDispatcher, setContext, tick } from 'svelte'
 	import CustomPopover from './CustomPopover.svelte'
 	import Summary from './Summary.svelte'
 	import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui'
@@ -90,6 +90,8 @@
 	let deployedBy: string | undefined = undefined // Author
 	let confirmCallback: () => void = () => {} // What happens when user clicks `override` in warning
 	let open: boolean = false // Is confirmation modal open
+	let args: Record<string, any> = initialArgs // Test args input
+	let selectedInputTab: 'main' | 'capture' = 'main'
 
 	let metadataOpen =
 		!neverShowMeta &&
@@ -1210,6 +1212,14 @@
 						</TabContent>
 						<TabContent value="triggers">
 							<TriggersEditor
+								on:applyArgs={async (e) => {
+									selectedInputTab = 'main'
+									metadataOpen = false
+									// TODO: that sucks, but don't know how to avoid it
+									await tick()
+									await tick()
+									args = e.detail.args ?? {}
+								}}
 								{initialPath}
 								schema={script.schema}
 								noEditor={true}
@@ -1394,6 +1404,7 @@
 		</div>
 
 		<ScriptEditor
+			bind:selectedTab={selectedInputTab}
 			{customUi}
 			collabMode
 			edit={initialPath != ''}
@@ -1419,6 +1430,7 @@
 			kind={script.kind}
 			{template}
 			tag={script.tag}
+			bind:args
 		/>
 	</div>
 {:else}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 74b85c70d9558..9410240e4fedf 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -13,7 +13,7 @@
 	import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte'
 	import TestJobLoader from './TestJobLoader.svelte'
 	import JobProgressBar from '$lib/components/jobs/JobProgressBar.svelte'
-	import { createEventDispatcher, onDestroy, onMount, tick } from 'svelte'
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 	import { Button } from './common'
 	import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte'
 	import WindmillIcon from './icons/WindmillIcon.svelte'
@@ -54,6 +54,8 @@
 	export let saveToWorkspace = false
 	export let watchChanges = false
 	export let customUi: ScriptEditorWhitelabelCustomUi = {}
+	export let args: Record<string, any> = initialArgs
+	export let selectedTab: 'main' | 'preprocessor' | 'capture' = 'main'
 
 	let jobProgressReset: () => void
 
@@ -75,9 +77,6 @@
 
 	let testJobLoader: TestJobLoader
 
-	// Test args input
-	let args: Record<string, any> = initialArgs
-
 	let isValid: boolean = true
 	let scriptProgress = undefined
 
@@ -244,7 +243,6 @@
 		url.search = ''
 		return `${url}?collab=1` + (edit ? '' : `&path=${path}`)
 	}
-	let selectedTab: 'main' | 'preprocessor' | 'capture' = 'main'
 
 	$: selectedTab && inferSchema(code)
 
@@ -390,13 +388,7 @@
 						{hasPreprocessor}
 						isFlow={false}
 						on:openTriggers
-						on:applyArgs={async (e) => {
-							selectedTab = e.detail.kind
-							// TODO: that sucks, but don't know how to avoid it
-							await tick()
-							await tick()
-							args = e.detail.args ?? {}
-						}}
+						on:applyArgs
 						canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
 						on:addPreprocessor={() => {
 							const code = editor?.getCode()
diff --git a/frontend/src/lib/components/details/EmailTriggerPanel.svelte b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
index 4319f70ba5573..bc2fad5815884 100644
--- a/frontend/src/lib/components/details/EmailTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
@@ -59,6 +59,7 @@
 				data={{ emailDomain, userSettings, token, hash, path }}
 				{isEditor}
 				{path}
+				on:applyArgs
 			/>
 		{:else}
 			<div>
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 368ed7820ac5b..901f4571143ac 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -83,6 +83,7 @@
 	<FlowPreprocessorModule {noEditor} />
 {:else if $selectedId === 'triggers'}
 	<TriggersEditor
+		on:applyArgs
 		currentPath={$pathStore}
 		{initialPath}
 		schema={$flowStore.schema}
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 4db15207b1677..aa07ed58f08fc 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -208,6 +208,7 @@
 			bind:refreshCaptures
 			hideCapturesWhenEmpty={true}
 			canEdit={true}
+			on:applyArgs
 		/>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
index a190178f271df..4fbdc3e284fa6 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
@@ -83,6 +83,7 @@
 			on:saveTrigger={(e) => {
 				saveTrigger(path, e.detail.config)
 			}}
+			on:applyArgs
 			cloudDisabled={false}
 			triggerType="kafka"
 			{isFlow}
diff --git a/frontend/src/lib/components/triggers/RoutesPanel.svelte b/frontend/src/lib/components/triggers/RoutesPanel.svelte
index d007674e81454..08010d898eedc 100644
--- a/frontend/src/lib/components/triggers/RoutesPanel.svelte
+++ b/frontend/src/lib/components/triggers/RoutesPanel.svelte
@@ -63,6 +63,7 @@
 		on:saveTrigger={(e) => {
 			routeEditor?.openNew(isFlow, path, e.detail.config)
 		}}
+		on:applyArgs
 		cloudDisabled={false}
 		triggerType="http"
 		{isFlow}
diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index 10f9d5f4e6651..0c1fc41a5a3a9 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -44,6 +44,7 @@
 					{#if $selectedTrigger === 'webhooks'}
 						<div class="p-4">
 							<WebhooksPanel
+								on:applyArgs
 								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
 								path={currentPath}
 								{isFlow}
@@ -58,6 +59,7 @@
 					{#if $selectedTrigger === 'emails'}
 						<div class="p-4">
 							<EmailTriggerPanel
+								on:applyArgs
 								token=""
 								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
 								path={currentPath}
@@ -69,19 +71,31 @@
 
 					{#if $selectedTrigger === 'routes'}
 						<div class="p-4">
-							<RoutesPanel {newItem} path={currentPath} {isFlow} isEditor={true} />
+							<RoutesPanel on:applyArgs{newItem} path={currentPath} {isFlow} isEditor={true} />
 						</div>
 					{/if}
 
 					{#if $selectedTrigger === 'websockets'}
 						<div class="p-4">
-							<WebsocketTriggersPanel {newItem} path={currentPath} {isFlow} isEditor={true} />
+							<WebsocketTriggersPanel
+								on:applyArgs
+								{newItem}
+								path={currentPath}
+								{isFlow}
+								isEditor={true}
+							/>
 						</div>
 					{/if}
 
 					{#if $selectedTrigger === 'kafka'}
 						<div class="p-4">
-							<KafkaTriggersPanel {newItem} path={currentPath} {isFlow} isEditor={true} />
+							<KafkaTriggersPanel
+								on:applyArgs
+								{newItem}
+								path={currentPath}
+								{isFlow}
+								isEditor={true}
+							/>
 						</div>
 					{/if}
 
diff --git a/frontend/src/lib/components/triggers/WebhooksPanel.svelte b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
index 93145c92f48b7..04e0f55df5442 100644
--- a/frontend/src/lib/components/triggers/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
@@ -32,6 +32,7 @@
 	{/if}
 
 	<TriggersEditorSection
+		on:applyArgs
 		cloudDisabled={false}
 		triggerType="webhook"
 		{isFlow}
diff --git a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
index 327a672c47f5d..453842b307b2e 100644
--- a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
@@ -67,6 +67,7 @@
 {:else}
 	<div class="flex flex-col gap-4">
 		<TriggersEditorSection
+			on:applyArgs
 			on:saveTrigger={(e) => {
 				wsTriggerEditor?.openNew(isFlow, path)
 			}}
diff --git a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
index b69de584a7819..c2e1ed94df7ec 100644
--- a/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte
@@ -547,7 +547,7 @@
 			</div>
 		</svelte:fragment>
 
-		<svelte:fragment slot="emails">
+		<svelte:fragment slot="email">
 			<div class="p-2">
 				<EmailTriggerPanel
 					bind:token

From e5911ef9731b35b90b34d6d95575a597eee78aae Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 19:51:54 +0000
Subject: [PATCH 23/42] fix apply schema

---
 frontend/src/lib/components/triggers/CaptureWrapper.svelte     | 1 +
 .../src/lib/components/triggers/TriggersEditorSection.svelte   | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index aa07ed58f08fc..f4280eca82e08 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -209,6 +209,7 @@
 			hideCapturesWhenEmpty={true}
 			canEdit={true}
 			on:applyArgs
+			on:updateSchema
 		/>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 2ac00d3affd47..8bcc292291f23 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -129,8 +129,7 @@
 				const { schema, redirect } = e.detail
 				$flowStore.schema = schema
 				if (redirect) {
-					//tabSelected = 'input'
-					console.log('dbg redirect')
+					$selectedId = 'Input'
 				}
 			}}
 			on:saveTrigger

From d1015a9d6927d7ff9aa8108df8e0e926153efbf4 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 22:34:40 +0000
Subject: [PATCH 24/42] Add capture table to script

---
 .../src/lib/components/ScriptEditor.svelte    |   3 +-
 .../components/scriptEditor/LogPanel.svelte   | 352 ++++++++++--------
 .../components/triggers/CaptureTable.svelte   |  16 +-
 3 files changed, 201 insertions(+), 170 deletions(-)

diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 9410240e4fedf..ad9a5b2fc9724 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -471,7 +471,7 @@
 								</div>
 							</div>
 						</Pane>
-						<Pane size={67}>
+						<Pane size={67} class="relative">
 							<LogPanel
 								{lang}
 								previewJob={testJob}
@@ -480,6 +480,7 @@
 								{editor}
 								{diffEditor}
 								{args}
+								{path}
 							>
 								{#if scriptProgress}
 									<!-- Put to the slot in logpanel -->
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 8b7a59c44d59c..6edbd01ed1d98 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -28,6 +28,7 @@
 	import Head from '../table/Head.svelte'
 	import WorkflowTimeline from '../WorkflowTimeline.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
+	import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
 
 	export let lang: Preview['language'] | undefined
 	export let previewIsLoading = false
@@ -37,6 +38,7 @@
 	export let diffEditor: DiffEditor | undefined = undefined
 	export let args: Record<string, any> | undefined = undefined
 	export let workspace: string | undefined = undefined
+	export let path: string = ''
 
 	type DrawerContent = {
 		mode: 'json' | Preview['language'] | 'plain'
@@ -87,170 +89,192 @@
 	</DrawerContent>
 </Drawer>
 
-<Tabs bind:selected={selectedTab} class="mt-1">
-	<Tab value="logs" size="xs">Logs & Result</Tab>
-	<Tab value="history" size="xs">History</Tab>
+<div class="h-full flex flex-col">
+	<Tabs bind:selected={selectedTab} class="pt-1" wrapperClass="flex-none">
+		<Tab value="logs" size="xs">Logs & Result</Tab>
+		<Tab value="history" size="xs">History</Tab>
+		<Tab value="captures" size="xs">Captures</Tab>
 
-	<svelte:fragment slot="content">
-		<!--
-			TabContent would wrap it in an extra div which is undesirable in this situation
-			because SplitPanesWrapper uses the parent element as a reference point.
-		-->
-		{#if selectedTab === 'logs'}
-			<SplitPanesWrapper>
-				<Splitpanes horizontal>
-					{#if previewJob?.is_flow_step == false && previewJob?.flow_status && !(typeof previewJob.flow_status == 'object' && '_metadata' in previewJob.flow_status)}
-						<Pane class="relative">
-							<WorkflowTimeline
-								flow_status={asWorkflowStatus(previewJob.flow_status)}
-								flowDone={previewJob.type == 'CompletedJob'}
-							/>
-						</Pane>
-					{/if}
-					<Pane class="relative">
-						<LogViewer
-							jobId={previewJob?.id}
-							duration={previewJob?.['duration_ms']}
-							mem={previewJob?.['mem_peak']}
-							content={previewJob?.logs}
-							isLoading={previewJob?.['running'] == false && previewIsLoading}
-							tag={previewJob?.tag}
-						/>
-					</Pane>
-					<Pane>
-						<slot></slot>
-						{#if previewJob != undefined && 'result' in previewJob}
-							<div class="relative w-full h-full p-2">
-								<div class="relative">
-									<DisplayResult
-										bind:forceJson
-										workspaceId={previewJob?.workspace_id}
-										jobId={previewJob?.id}
-										result={previewJob.result}
-									>
-										<svelte:fragment slot="copilot-fix">
-											{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
-												<ScriptFix
-													error={JSON.stringify(previewJob.result.error)}
-													{lang}
-													{editor}
-													{diffEditor}
-													{args}
-												/>
+		<svelte:fragment slot="content">
+			<div class="grow min-h-0">
+				{#if selectedTab === 'logs'}
+					<SplitPanesWrapper>
+						<Splitpanes horizontal>
+							{#if previewJob?.is_flow_step == false && previewJob?.flow_status && !(typeof previewJob.flow_status == 'object' && '_metadata' in previewJob.flow_status)}
+								<Pane class="relative">
+									<WorkflowTimeline
+										flow_status={asWorkflowStatus(previewJob.flow_status)}
+										flowDone={previewJob.type == 'CompletedJob'}
+									/>
+								</Pane>
+							{/if}
+							<Pane class="relative">
+								<LogViewer
+									jobId={previewJob?.id}
+									duration={previewJob?.['duration_ms']}
+									mem={previewJob?.['mem_peak']}
+									content={previewJob?.logs}
+									isLoading={previewJob?.['running'] == false && previewIsLoading}
+									tag={previewJob?.tag}
+								/>
+							</Pane>
+							<Pane>
+								<slot />
+								{#if previewJob != undefined && 'result' in previewJob}
+									<div class="relative w-full h-full p-2">
+										<div class="relative">
+											<DisplayResult
+												bind:forceJson
+												workspaceId={previewJob?.workspace_id}
+												jobId={previewJob?.id}
+												result={previewJob.result}
+											>
+												<svelte:fragment slot="copilot-fix">
+													{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
+														<ScriptFix
+															error={JSON.stringify(previewJob.result.error)}
+															{lang}
+															{editor}
+															{diffEditor}
+															{args}
+														/>
+													{/if}
+												</svelte:fragment>
+											</DisplayResult>
+										</div>
+									</div>
+								{:else}
+									<div class="text-sm text-tertiary p-2 flex justify-between items-center">
+										<span>
+											{#if previewIsLoading}
+												<Loader2 class="animate-spin" />
+											{:else}
+												Test to see the result here
 											{/if}
-										</svelte:fragment>
-									</DisplayResult>
-								</div>
-							</div>
-						{:else}
-							<div class="text-sm text-tertiary p-2 flex justify-between items-center">
-								<span>
-									{#if previewIsLoading}
-										<Loader2 class="animate-spin" />
-									{:else}
-										Test to see the result here
-									{/if}
-								</span>
-								<Tooltip
-									documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
-								>
-									The result renderer in Windmill supports rich display rendering, allowing you to
-									customize the display format of your results.
-								</Tooltip>
-							</div>
-						{/if}
-					</Pane>
-				</Splitpanes>
-			</SplitPanesWrapper>
-		{/if}
-		{#if selectedTab === 'history'}
-			<div>
-				<DataTable size="xs" noBorder>
-					<Head>
-						<tr>
-							<Cell first>Id</Cell>
-							<Cell>Created at</Cell>
-							<Cell>Success</Cell>
-							<Cell>Result</Cell>
-							<Cell>Code</Cell>
-							<Cell last>Logs</Cell>
-						</tr>
-					</Head>
-					<tbody class="divide-y">
-						{#each pastPreviews as { id, created_at, success }}
-							<tr>
-								<Cell first>
-									<a
-										class="pr-3"
-										href="{base}/run/{id}?workspace={workspace ?? $workspaceStore}"
-										target="_blank">{id.substring(30)}</a
-									>
-								</Cell>
-								<Cell>{displayDate(created_at)}</Cell>
-								<Cell>
-									{#if success}
-										<CheckCircle2 size={10} class="text-green-600" />
-									{:else}
-										<XCircle size={10} class="text-red-700" />
-									{/if}
-								</Cell>
-								<Cell>
-									<button
-										class="text-xs"
-										on:click|preventDefault={() => {
-											openDrawer({ mode: 'json', content: undefined, title: 'Result' })
-											JobService.getCompletedJobResult({
-												workspace: workspace ?? $workspaceStore ?? 'NO_W',
-												id
-											}).then((res) => {
-												drawerContent && (drawerContent.content = res)
-											})
-										}}
-									>
-										See Result
-									</button>
-								</Cell>
-								<Cell>
-									<button
-										class="text-xs"
-										on:click|preventDefault={async () => {
-											const code = (
-												await JobService.getCompletedJob({
-													workspace: workspace ?? $workspaceStore ?? 'NO_W',
-													id
-												})
-											).raw_code
-											openDrawer({
-												mode: lang ?? 'plain',
-												content: String(code),
-												title: `Code ${lang}`
-											})
-										}}
-									>
-										View code
-									</button>
-								</Cell>
-								<Cell last>
-									<button
-										class="text-xs"
-										on:click|preventDefault={async () => {
-											const logs = await (
-												await fetch(
-													OpenAPI.BASE + `/w/${workspace ?? $workspaceStore}/jobs_u/get_logs/${id}`
-												)
-											).text()
-											console.log(logs)
-											openDrawer({ mode: 'plain', content: String(logs), title: `Logs for ${id}` })
-										}}
-									>
-										View logs
-									</button>
-								</Cell>
-							</tr>
-						{/each}
-					</tbody>
-				</DataTable>
+										</span>
+										<Tooltip
+											documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
+										>
+											The result renderer in Windmill supports rich display rendering, allowing you
+											to customize the display format of your results.
+										</Tooltip>
+									</div>
+								{/if}
+							</Pane>
+						</Splitpanes>
+					</SplitPanesWrapper>
+				{/if}
+				{#if selectedTab === 'history'}
+					<div>
+						<DataTable size="xs" noBorder>
+							<Head>
+								<tr>
+									<Cell first>Id</Cell>
+									<Cell>Created at</Cell>
+									<Cell>Success</Cell>
+									<Cell>Result</Cell>
+									<Cell>Code</Cell>
+									<Cell last>Logs</Cell>
+								</tr>
+							</Head>
+							<tbody class="divide-y">
+								{#each pastPreviews as { id, created_at, success }}
+									<tr>
+										<Cell first>
+											<a
+												class="pr-3"
+												href="{base}/run/{id}?workspace={workspace ?? $workspaceStore}"
+												target="_blank">{id.substring(30)}</a
+											>
+										</Cell>
+										<Cell>{displayDate(created_at)}</Cell>
+										<Cell>
+											{#if success}
+												<CheckCircle2 size={10} class="text-green-600" />
+											{:else}
+												<XCircle size={10} class="text-red-700" />
+											{/if}
+										</Cell>
+										<Cell>
+											<button
+												class="text-xs"
+												on:click|preventDefault={() => {
+													openDrawer({ mode: 'json', content: undefined, title: 'Result' })
+													JobService.getCompletedJobResult({
+														workspace: workspace ?? $workspaceStore ?? 'NO_W',
+														id
+													}).then((res) => {
+														drawerContent && (drawerContent.content = res)
+													})
+												}}
+											>
+												See Result
+											</button>
+										</Cell>
+										<Cell>
+											<button
+												class="text-xs"
+												on:click|preventDefault={async () => {
+													const code = (
+														await JobService.getCompletedJob({
+															workspace: workspace ?? $workspaceStore ?? 'NO_W',
+															id
+														})
+													).raw_code
+													openDrawer({
+														mode: lang ?? 'plain',
+														content: String(code),
+														title: `Code ${lang}`
+													})
+												}}
+											>
+												View code
+											</button>
+										</Cell>
+										<Cell last>
+											<button
+												class="text-xs"
+												on:click|preventDefault={async () => {
+													const logs = await (
+														await fetch(
+															OpenAPI.BASE +
+																`/w/${workspace ?? $workspaceStore}/jobs_u/get_logs/${id}`
+														)
+													).text()
+													console.log(logs)
+													openDrawer({
+														mode: 'plain',
+														content: String(logs),
+														title: `Logs for ${id}`
+													})
+												}}
+											>
+												View logs
+											</button>
+										</Cell>
+									</tr>
+								{/each}
+							</tbody>
+						</DataTable>
+					</div>
+				{/if}
+				{#if selectedTab === 'captures'}
+					<div class="h-full">
+						<CaptureTable
+							captureType={'all'}
+							hasPreprocessor={false}
+							canHavePreprocessor={false}
+							isFlow={false}
+							{path}
+							hideCapturesWhenEmpty={false}
+							canEdit={true}
+							on:applyArgs
+							on:updateSchema
+							headless={true}
+						/>
+					</div>
+				{/if}
 			</div>
-		{/if}
-	</svelte:fragment>
-</Tabs>
+		</svelte:fragment>
+	</Tabs>
+</div>
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index d5b6f0debfb9b..f3f88e6525087 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -21,7 +21,7 @@
 	export let hasPreprocessor = false
 	export let canHavePreprocessor = false
 	export let isFlow = false
-	export let captureType: CaptureTriggerKind = 'webhook'
+	export let captureType: CaptureTriggerKind | 'all' = 'all'
 	export let headless = false
 	export let addButton = false
 	export let hideCapturesWhenEmpty = false
@@ -33,7 +33,13 @@
 
 	$: hasPreprocessor && (testKind = 'preprocessor')
 
-	$: selectedCaptures = captures.filter((c) => c.trigger_kind === captureType)
+	function filterCaptures(captures: Capture[], captureType: CaptureTriggerKind | 'all') {
+		if (captureType === 'all') {
+			return captures
+		}
+		return captures.filter((c) => c.trigger_kind === captureType)
+	}
+	$: selectedCaptures = filterCaptures(captures, captureType)
 
 	let deleteLoading: number | null = null
 	async function deleteCapture(id: number) {
@@ -76,9 +82,9 @@
 </script>
 
 {#if selectedCaptures.length > 0 || !hideCapturesWhenEmpty}
-	<Label label="Captures" {headless}>
+	<Label label="Captures" {headless} class="flex flex-col h-full">
 		<svelte:fragment slot="header">
-			{#if addButton}
+			{#if addButton && captureType !== 'all'}
 				<Button
 					size="xs2"
 					color="light"
@@ -108,7 +114,7 @@
 				</div>
 			{/if}
 		</svelte:fragment>
-		<div class="flex flex-col gap-1 mt-2">
+		<div class="flex flex-col gap-1 pt-2 grow overflow-y-auto">
 			{#if selectedCaptures.length === 0}
 				<div class="text-xs text-secondary">No {captureType} captures yet</div>
 			{:else}

From 34ed0a6dfda5b3c80070913a1e249cdbe663611b Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 22:43:22 +0000
Subject: [PATCH 25/42] fix apply args

---
 .../src/lib/components/ScriptBuilder.svelte   | 19 +++++++++++--------
 .../src/lib/components/ScriptEditor.svelte    |  1 +
 .../components/scriptEditor/LogPanel.svelte   |  2 +-
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index d3f7ff70e6c42..03f57955ae981 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -616,6 +616,15 @@
 		}
 		return lang
 	}
+
+	async function applyArgs(e) {
+		selectedInputTab = 'main'
+		metadataOpen = false
+		// TODO: that sucks, but don't know how to avoid it
+		await tick()
+		await tick()
+		args = e.detail.args ?? {}
+	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -1212,14 +1221,7 @@
 						</TabContent>
 						<TabContent value="triggers">
 							<TriggersEditor
-								on:applyArgs={async (e) => {
-									selectedInputTab = 'main'
-									metadataOpen = false
-									// TODO: that sucks, but don't know how to avoid it
-									await tick()
-									await tick()
-									args = e.detail.args ?? {}
-								}}
+								on:applyArgs={applyArgs}
 								{initialPath}
 								schema={script.schema}
 								noEditor={true}
@@ -1420,6 +1422,7 @@
 				selectedTriggerStore.set(ev.detail.kind)
 				triggerDefaultValuesStore.set(ev.detail.config)
 			}}
+			on:applyArgs={applyArgs}
 			bind:editor
 			bind:this={scriptEditor}
 			bind:schema={script.schema}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index ad9a5b2fc9724..3689106678e33 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -481,6 +481,7 @@
 								{diffEditor}
 								{args}
 								{path}
+								on:applyArgs
 							>
 								{#if scriptProgress}
 									<!-- Put to the slot in logpanel -->
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 6edbd01ed1d98..22fce766bd6b8 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -259,7 +259,7 @@
 					</div>
 				{/if}
 				{#if selectedTab === 'captures'}
-					<div class="h-full">
+					<div class="h-full px-2">
 						<CaptureTable
 							captureType={'all'}
 							hasPreprocessor={false}

From cb73706e2868a3ea922875eaf52f7be8607e233f Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 23:39:42 +0000
Subject: [PATCH 26/42] Add capture button for script

---
 .../src/lib/components/ScriptBuilder.svelte   | 16 ++--
 .../flows/content/FlowEditorPanel.svelte      |  7 ++
 .../components/flows/content/FlowInput.svelte | 17 +++-
 .../flows/pickers/InputSchemaPicker.svelte    | 14 +++-
 .../components/meltComponents/Popover.svelte  |  5 +-
 .../components/triggers/CaptureButton.svelte  | 80 +++++++++++++++++++
 6 files changed, 127 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/lib/components/triggers/CaptureButton.svelte

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 03f57955ae981..52f780e9a2c57 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -68,6 +68,7 @@
 	import DeployOverrideConfirmationModal from '$lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte'
 	import TriggersEditor from './triggers/TriggersEditor.svelte'
 	import type { ScheduleTrigger, TriggerContext, TriggerKind } from './triggers'
+	import CaptureButton from '$lib/components/triggers/CaptureButton.svelte'
 
 	export let script: NewScript
 	export let fullyLoaded: boolean = true
@@ -625,6 +626,13 @@
 		await tick()
 		args = e.detail.args ?? {}
 	}
+
+	function openTriggers(ev) {
+		metadataOpen = true
+		selectedTab = 'triggers'
+		selectedTriggerStore.set(ev.detail.kind)
+		triggerDefaultValuesStore.set(ev.detail.config)
+	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -1313,6 +1321,7 @@
 				{/if}
 
 				<div class="flex flex-row gap-x-1 lg:gap-x-2">
+					<CaptureButton on:openTriggers={openTriggers} />
 					{#if customUi?.topBar?.diff != false}
 						<Button
 							color="light"
@@ -1416,12 +1425,7 @@
 			on:saveDraft={() => {
 				saveDraft()
 			}}
-			on:openTriggers={(ev) => {
-				metadataOpen = true
-				selectedTab = 'triggers'
-				selectedTriggerStore.set(ev.detail.kind)
-				triggerDefaultValuesStore.set(ev.detail.config)
-			}}
+			on:openTriggers={openTriggers}
 			on:applyArgs={applyArgs}
 			bind:editor
 			bind:this={scriptEditor}
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 901f4571143ac..2877428a181a9 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -72,6 +72,13 @@
 			captureOn.set(true)
 		}}
 		on:applyArgs
+		on:updateSchema={(e) => {
+			const { schema, redirect } = e.detail
+			$flowStore.schema = schema
+			if (redirect) {
+				$selectedId = 'Input'
+			}
+		}}
 	/>
 {:else if $selectedId === 'Result'}
 	<p class="p-4 text-secondary">The result of the flow will be the result of the last node.</p>
diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 5a09e5aeaed87..171456bbf3e57 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -14,10 +14,13 @@
 	import FlowInputViewer from '$lib/components/FlowInputViewer.svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import InputSchemaPicker from '$lib/components/flows/pickers/InputSchemaPicker.svelte'
+	import { createEventDispatcher } from 'svelte'
 
 	export let noEditor: boolean
 	export let disabled: boolean
 
+	const dispatch = createEventDispatcher()
+
 	const { flowStore, flowStateStore, previewArgs, initialPath, pathStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
@@ -25,6 +28,7 @@
 	let jsonPayload: Drawer
 	let pendingJson: string
 	let addProperty: AddProperty | undefined = undefined
+	let capturePopoverOpen = false
 
 	function importJson() {
 		const parsed = JSON.parse(pendingJson)
@@ -45,12 +49,21 @@
 	{#if !disabled}
 		<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
 			<div class="text-sm">Copy input's schema from</div>
-			<Popover closeButton={false}>
+			<Popover closeButton={false} bind:open={capturePopoverOpen}>
 				<svelte:fragment slot="trigger">
 					<Button color="dark" size="xs" nonCaptureEvent>Capture</Button>
 				</svelte:fragment>
 				<svelte:fragment slot="content">
-					<InputSchemaPicker isFlow={true} path={$pathStore} on:openTriggers />
+					<InputSchemaPicker
+						isFlow={true}
+						path={$pathStore}
+						on:openTriggers
+						on:applyArgs
+						on:updateSchema={(e) => {
+							capturePopoverOpen = false
+							dispatch('updateSchema', e.detail)
+						}}
+					/>
 				</svelte:fragment>
 			</Popover>
 			<Button
diff --git a/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte b/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
index e156524e37b0d..3b5386914d10b 100644
--- a/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
@@ -11,9 +11,9 @@
 	export let path: string
 </script>
 
-<div class="w-[650px] flex flex-row divide-x overflow-hidden">
+<div class="w-[650px] max-h-[200px] flex flex-row divide-x">
 	<div class="w-40">
-		<div class="flex flex-col bg-surface-secondary">
+		<div class="flex flex-col bg-surface-secondary h-full">
 			<button
 				class={`${selected === 'webhook' ? 'bg-surface' : ''} p-2`}
 				on:click={() => (selected = 'webhook')}
@@ -63,6 +63,14 @@
 		</div>
 	</div>
 	<div class="grow p-2">
-		<CaptureTable captureType={selected} {isFlow} {path} addButton={true} on:openTriggers />
+		<CaptureTable
+			captureType={selected}
+			{isFlow}
+			{path}
+			addButton={true}
+			on:openTriggers
+			on:applyArgs
+			on:updateSchema
+		/>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
index 4129971cc8a33..579a0949cb6ef 100644
--- a/frontend/src/lib/components/meltComponents/Popover.svelte
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -5,6 +5,7 @@
 
 	export let open = false
 	export let closeButton: boolean = true
+	export let displayArrow: boolean = false
 
 	const {
 		elements: { trigger, content, arrow, close },
@@ -23,7 +24,9 @@
 
 {#if open}
 	<div use:melt={$content} transition:fade={{ duration: 100 }} class="content">
-		<div use:melt={$arrow} />
+		{#if displayArrow}
+			<div use:melt={$arrow} />
+		{/if}
 		<slot name="content" />
 		{#if closeButton}
 			<button class="close" use:melt={$close}>
diff --git a/frontend/src/lib/components/triggers/CaptureButton.svelte b/frontend/src/lib/components/triggers/CaptureButton.svelte
new file mode 100644
index 0000000000000..99a9c39da6a5b
--- /dev/null
+++ b/frontend/src/lib/components/triggers/CaptureButton.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	import { Button } from '$lib/components/common'
+	import { Webhook, Route, Unplug, Mail } from 'lucide-svelte'
+	import KafkaIcon from '$lib/components/icons/KafkaIcon.svelte'
+	import { enterpriseLicense } from '$lib/stores'
+	import { type CaptureTriggerKind } from '$lib/gen'
+	import { createEventDispatcher } from 'svelte'
+	import { captureTriggerKindToTriggerKind } from '../triggers'
+
+	let selected: CaptureTriggerKind = 'webhook'
+	let isOpen = false
+
+	const dispatch = createEventDispatcher()
+
+	function handleClick(kind: CaptureTriggerKind) {
+		selected = kind
+		dispatch('openTriggers', {
+			kind: captureTriggerKindToTriggerKind(kind),
+			config: {}
+		})
+		isOpen = false
+	}
+</script>
+
+<Popover closeButton={false} bind:open={isOpen}>
+	<svelte:fragment slot="trigger">
+		<Button color="light" variant="border" size="xs" nonCaptureEvent>Capture</Button>
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div class="flex flex-col bg-surface">
+			<button
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('webhook')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Webhook size={16} />
+					<p class="text-xs text-secondary">Webhook</p>
+				</div>
+			</button>
+			<button
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('http')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Route size={16} />
+					<p class="text-xs text-secondary">HTTP</p>
+				</div>
+			</button>
+			<button
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('websocket')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Unplug size={16} />
+					<p class="text-xs text-secondary">Websocket</p>
+				</div>
+			</button>
+			<button
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('email')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<Mail size={16} />
+					<p class="text-xs text-secondary">Email</p>
+				</div>
+			</button>
+			<button
+				disabled={!$enterpriseLicense}
+				class="hover:bg-surface-hover p-2 transition-colors duration-150"
+				on:click={() => handleClick('kafka')}
+			>
+				<div class="flex flex-row items-center gap-2">
+					<KafkaIcon size={16} />
+					<p class="text-xs text-secondary">Kafka</p>
+				</div>
+			</button>
+		</div>
+	</svelte:fragment>
+</Popover>

From ed85e93bb2498ba77ceb905057b412319f23323c Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 23:44:20 +0000
Subject: [PATCH 27/42] Delete capture tab

---
 frontend/src/lib/components/ScriptEditor.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 3689106678e33..09d922cc815db 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -378,7 +378,6 @@
 								<Tab value="preprocessor">Preprocessor</Tab>
 							</div>
 						{/if}
-						<Tab value="capture">Capture</Tab>
 					</Tabs>
 				</div>
 				{#if selectedTab === 'capture'}

From 7eee6c611e8181346547402872e9bb3560735e00 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 10 Dec 2024 23:50:14 +0000
Subject: [PATCH 28/42] Set capture on when opening triggers capture

---
 frontend/src/lib/components/ScriptBuilder.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 52f780e9a2c57..10872e0bc7f95 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -140,13 +140,14 @@
 
 	const triggerDefaultValuesStore = writable<Record<string, any> | undefined>(undefined)
 
+	const captureOn = writable<boolean | undefined>(undefined)
 	setContext<TriggerContext>('TriggerContext', {
 		selectedTrigger: selectedTriggerStore,
 		primarySchedule: primaryScheduleStore,
 		triggersCount,
 		simplifiedPoll,
 		defaultValues: triggerDefaultValuesStore,
-		captureOn: writable(undefined)
+		captureOn: captureOn
 	})
 
 	const enterpriseLangs = ['bigquery', 'snowflake', 'mssql']
@@ -632,6 +633,7 @@
 		selectedTab = 'triggers'
 		selectedTriggerStore.set(ev.detail.kind)
 		triggerDefaultValuesStore.set(ev.detail.config)
+		captureOn.set(true)
 	}
 </script>
 

From b86180b4e93fafe5989da2707293d58bad6857e7 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 00:00:49 +0000
Subject: [PATCH 29/42] fix connection indicator

---
 frontend/src/lib/components/triggers/CaptureWrapper.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index f4280eca82e08..3539f04bf57df 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -140,8 +140,8 @@
 		if ((captureType === 'websocket' || captureType === 'kafka') && config && captureActive) {
 			const serverEnabled = getServerEnabled(config)
 			const message = serverEnabled
-				? 'Websocket is connected'
-				: `Websocket is not connected${config.error ? ': ' + config.error : ''}`
+				? `${capitalize(captureType)} is connected`
+				: `${capitalize(captureType)} is not connected${config.error ? ': ' + config.error : ''}`
 			connectionInfo = {
 				status: serverEnabled ? 'connected' : 'disconnected',
 				message

From 952518d5ee2385944530c03e19aa6b23ecf25eed Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 00:22:33 +0000
Subject: [PATCH 30/42] fix minor issues

---
 frontend/src/lib/components/scriptEditor/LogPanel.svelte   | 2 +-
 frontend/src/lib/components/triggers/CaptureButton.svelte  | 2 --
 frontend/src/lib/components/triggers/CaptureTable.svelte   | 7 ++++---
 .../lib/components/triggers/KafkaTriggerEditorInner.svelte | 3 ---
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 22fce766bd6b8..d3e41a2f73957 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -261,7 +261,7 @@
 				{#if selectedTab === 'captures'}
 					<div class="h-full px-2">
 						<CaptureTable
-							captureType={'all'}
+							showAll={true}
 							hasPreprocessor={false}
 							canHavePreprocessor={false}
 							isFlow={false}
diff --git a/frontend/src/lib/components/triggers/CaptureButton.svelte b/frontend/src/lib/components/triggers/CaptureButton.svelte
index 99a9c39da6a5b..863123a5e5a49 100644
--- a/frontend/src/lib/components/triggers/CaptureButton.svelte
+++ b/frontend/src/lib/components/triggers/CaptureButton.svelte
@@ -8,13 +8,11 @@
 	import { createEventDispatcher } from 'svelte'
 	import { captureTriggerKindToTriggerKind } from '../triggers'
 
-	let selected: CaptureTriggerKind = 'webhook'
 	let isOpen = false
 
 	const dispatch = createEventDispatcher()
 
 	function handleClick(kind: CaptureTriggerKind) {
-		selected = kind
 		dispatch('openTriggers', {
 			kind: captureTriggerKindToTriggerKind(kind),
 			config: {}
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index f3f88e6525087..320587771b21d 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -21,11 +21,12 @@
 	export let hasPreprocessor = false
 	export let canHavePreprocessor = false
 	export let isFlow = false
-	export let captureType: CaptureTriggerKind | 'all' = 'all'
+	export let captureType: CaptureTriggerKind = 'webhook'
 	export let headless = false
 	export let addButton = false
 	export let hideCapturesWhenEmpty = false
 	export let canEdit = false
+	export let showAll = false
 
 	let captures: Capture[] = []
 	let selectedCaptures: any[] = []
@@ -34,7 +35,7 @@
 	$: hasPreprocessor && (testKind = 'preprocessor')
 
 	function filterCaptures(captures: Capture[], captureType: CaptureTriggerKind | 'all') {
-		if (captureType === 'all') {
+		if (showAll) {
 			return captures
 		}
 		return captures.filter((c) => c.trigger_kind === captureType)
@@ -84,7 +85,7 @@
 {#if selectedCaptures.length > 0 || !hideCapturesWhenEmpty}
 	<Label label="Captures" {headless} class="flex flex-col h-full">
 		<svelte:fragment slot="header">
-			{#if addButton && captureType !== 'all'}
+			{#if addButton && !showAll}
 				<Button
 					size="xs2"
 					color="light"
diff --git a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
index c43d21c06138b..7b2beec502ea8 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggerEditorInner.svelte
@@ -25,7 +25,6 @@
 	let fixedScriptPath = ''
 	let path: string = ''
 	let pathError = ''
-	let dirtyGroupId = false
 	let enabled = false
 	let dirtyPath = false
 	let can_write = true
@@ -45,7 +44,6 @@
 			itemKind = isFlow ? 'flow' : 'script'
 			edit = true
 			dirtyPath = false
-			dirtyGroupId = false
 			await loadTrigger()
 		} catch (err) {
 			sendUserToast(`Could not load kafka trigger: ${err}`, true)
@@ -68,7 +66,6 @@
 			args.kafka_resource_path = nDefaultValues?.kafka_resource_path ?? ''
 			args.group_id = nDefaultValues?.group_id ?? ''
 			args.topics = nDefaultValues?.topics ?? ['']
-			dirtyGroupId = false
 			initialScriptPath = ''
 			fixedScriptPath = fixedScriptPath_ ?? ''
 			script_path = fixedScriptPath

From 8ec6f8b9ad2321e67d026b61e5a81a9e02455b3d Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 10:24:20 +0000
Subject: [PATCH 31/42] Add preprocessor logic

---
 .../src/lib/components/ScriptBuilder.svelte   | 35 ++++++++++++++++++-
 .../src/lib/components/ScriptEditor.svelte    |  5 +--
 .../details/EmailTriggerPanel.svelte          |  5 +++
 .../flows/content/FlowEditorPanel.svelte      | 10 ++++++
 .../components/scriptEditor/LogPanel.svelte   |  9 ++---
 .../components/triggers/CaptureTable.svelte   | 13 +++++--
 .../components/triggers/CaptureWrapper.svelte |  2 ++
 .../triggers/KafkaTriggersPanel.svelte        |  5 +++
 .../components/triggers/RoutesPanel.svelte    |  3 ++
 .../components/triggers/TriggersEditor.svelte | 14 ++++++++
 .../triggers/TriggersEditorSection.svelte     | 11 +++---
 .../components/triggers/WebhooksPanel.svelte  |  5 +++
 .../triggers/WebsocketTriggersPanel.svelte    |  4 +++
 13 files changed, 106 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 10872e0bc7f95..db7d499f1becd 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -69,6 +69,10 @@
 	import TriggersEditor from './triggers/TriggersEditor.svelte'
 	import type { ScheduleTrigger, TriggerContext, TriggerKind } from './triggers'
 	import CaptureButton from '$lib/components/triggers/CaptureButton.svelte'
+	import {
+		BUN_PREPROCESSOR_MODULE_CODE,
+		PYTHON_PREPROCESSOR_MODULE_CODE
+	} from '$lib/script_helpers'
 
 	export let script: NewScript
 	export let fullyLoaded: boolean = true
@@ -92,7 +96,8 @@
 	let confirmCallback: () => void = () => {} // What happens when user clicks `override` in warning
 	let open: boolean = false // Is confirmation modal open
 	let args: Record<string, any> = initialArgs // Test args input
-	let selectedInputTab: 'main' | 'capture' = 'main'
+	let selectedInputTab: 'main' | 'capture' | 'preprocessor' = 'main'
+	let hasPreprocessor = false
 
 	let metadataOpen =
 		!neverShowMeta &&
@@ -635,6 +640,27 @@
 		triggerDefaultValuesStore.set(ev.detail.config)
 		captureOn.set(true)
 	}
+
+	function addPreprocessor() {
+		const code = editor?.getCode()
+		if (code) {
+			const preprocessorCode =
+				script.language === 'python3'
+					? PYTHON_PREPROCESSOR_MODULE_CODE
+					: BUN_PREPROCESSOR_MODULE_CODE
+			const mainIndex = code.indexOf(
+				script.language === 'python3' ? 'def main' : 'export async function main'
+			)
+			if (mainIndex === -1) {
+				editor?.setCode(code + preprocessorCode)
+			} else {
+				editor?.setCode(
+					code.slice(0, mainIndex) + preprocessorCode + '\n' + code.slice(mainIndex) + '\n\n'
+				)
+			}
+		}
+		selectedInputTab = 'preprocessor'
+	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -1232,12 +1258,17 @@
 						<TabContent value="triggers">
 							<TriggersEditor
 								on:applyArgs={applyArgs}
+								on:addPreprocessor={addPreprocessor}
 								{initialPath}
 								schema={script.schema}
 								noEditor={true}
 								isFlow={false}
 								currentPath={script.path}
 								newItem={initialPath == ''}
+								canHavePreprocessor={script.language === 'bun' ||
+									script.language === 'deno' ||
+									script.language === 'python3'}
+								{hasPreprocessor}
 							/>
 							<!-- <ScriptSchedules {initialPath} schema={script.schema} schedule={scheduleStore} /> -->
 						</TabContent>
@@ -1429,6 +1460,7 @@
 			}}
 			on:openTriggers={openTriggers}
 			on:applyArgs={applyArgs}
+			on:addPreprocessor={addPreprocessor}
 			bind:editor
 			bind:this={scriptEditor}
 			bind:schema={script.schema}
@@ -1440,6 +1472,7 @@
 			{template}
 			tag={script.tag}
 			bind:args
+			bind:hasPreprocessor
 		/>
 	</div>
 {:else}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 09d922cc815db..161f83c8a4dca 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -56,6 +56,7 @@
 	export let customUi: ScriptEditorWhitelabelCustomUi = {}
 	export let args: Record<string, any> = initialArgs
 	export let selectedTab: 'main' | 'preprocessor' | 'capture' = 'main'
+	export let hasPreprocessor = false
 
 	let jobProgressReset: () => void
 
@@ -130,8 +131,6 @@
 		})
 	}
 
-	let hasPreprocessor = false
-
 	export async function inferSchema(code: string, nlang?: SupportedLanguage) {
 		let nschema = schema ?? emptySchema()
 
@@ -480,7 +479,9 @@
 								{diffEditor}
 								{args}
 								{path}
+								{hasPreprocessor}
 								on:applyArgs
+								on:addPreprocessor
 							>
 								{#if scriptProgress}
 									<!-- Put to the slot in logpanel -->
diff --git a/frontend/src/lib/components/details/EmailTriggerPanel.svelte b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
index bc2fad5815884..74c28cc56a5c5 100644
--- a/frontend/src/lib/components/details/EmailTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
@@ -17,6 +17,8 @@
 	export let hash: string | undefined = undefined
 	export let path: string
 	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
 	let emailDomain: string | null = null
 	let triggerTokens: TriggerTokens | undefined = undefined
@@ -59,7 +61,10 @@
 				data={{ emailDomain, userSettings, token, hash, path }}
 				{isEditor}
 				{path}
+				{canHavePreprocessor}
+				{hasPreprocessor}
 				on:applyArgs
+				on:addPreprocessor
 			/>
 		{:else}
 			<div>
diff --git a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
index 2877428a181a9..d432c43d24822 100644
--- a/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+++ b/frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
@@ -13,6 +13,7 @@
 	import { dfs } from '../dfs'
 	import FlowPreprocessorModule from './FlowPreprocessorModule.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
+	import { insertNewPreprocessorModule } from '../flowStateUtils'
 
 	export let noEditor = false
 	export let enableAi = false
@@ -91,12 +92,21 @@
 {:else if $selectedId === 'triggers'}
 	<TriggersEditor
 		on:applyArgs
+		on:addPreprocessor={async () => {
+			await insertNewPreprocessorModule(flowStore, flowStateStore, {
+				language: 'bun',
+				subkind: 'preprocessor'
+			})
+			$selectedId = 'preprocessor'
+		}}
 		currentPath={$pathStore}
 		{initialPath}
 		schema={$flowStore.schema}
 		{noEditor}
 		newItem={newFlow}
 		isFlow={true}
+		hasPreprocessor={!!$flowStore.value.preprocessor_module}
+		canHavePreprocessor={true}
 	/>
 {:else if $selectedId.startsWith('subflow:')}
 	<div class="p-4"
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index d3e41a2f73957..039fa923be731 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -39,6 +39,7 @@
 	export let args: Record<string, any> | undefined = undefined
 	export let workspace: string | undefined = undefined
 	export let path: string = ''
+	export let hasPreprocessor: boolean = false
 
 	type DrawerContent = {
 		mode: 'json' | Preview['language'] | 'plain'
@@ -259,18 +260,18 @@
 					</div>
 				{/if}
 				{#if selectedTab === 'captures'}
-					<div class="h-full px-2">
+					<div class="h-full p-2">
 						<CaptureTable
 							showAll={true}
-							hasPreprocessor={false}
-							canHavePreprocessor={false}
+							{hasPreprocessor}
+							canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
 							isFlow={false}
 							{path}
 							hideCapturesWhenEmpty={false}
 							canEdit={true}
 							on:applyArgs
 							on:updateSchema
-							headless={true}
+							on:addPreprocessor
 						/>
 					</div>
 				{/if}
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index 320587771b21d..2c0a833701dab 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -16,6 +16,7 @@
 	import { type CaptureTriggerKind } from '$lib/gen'
 	import type { Capture } from '$lib/gen'
 	import { captureTriggerKindToTriggerKind } from '../triggers'
+	import { twMerge } from 'tailwind-merge'
 
 	export let path: string
 	export let hasPreprocessor = false
@@ -27,6 +28,7 @@
 	export let hideCapturesWhenEmpty = false
 	export let canEdit = false
 	export let showAll = false
+	export let maxHeight: number | undefined = undefined
 
 	let captures: Capture[] = []
 	let selectedCaptures: any[] = []
@@ -83,7 +85,14 @@
 </script>
 
 {#if selectedCaptures.length > 0 || !hideCapturesWhenEmpty}
-	<Label label="Captures" {headless} class="flex flex-col h-full">
+	<Label
+		label="Captures"
+		{headless}
+		class={twMerge(
+			'flex flex-col h-full divide-y gap-1',
+			maxHeight ? `max-h-[${maxHeight}px]` : ''
+		)}
+	>
 		<svelte:fragment slot="header">
 			{#if addButton && !showAll}
 				<Button
@@ -103,7 +112,7 @@
 		<svelte:fragment slot="action">
 			{#if canHavePreprocessor}
 				<div>
-					<ToggleButtonGroup bind:selected={testKind}>
+					<ToggleButtonGroup bind:selected={testKind} class="h-full">
 						<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
 						<ToggleButton
 							value="preprocessor"
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 3539f04bf57df..df446abaa8ae6 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -210,6 +210,8 @@
 			canEdit={true}
 			on:applyArgs
 			on:updateSchema
+			on:addPreprocessor
+			maxHeight={300}
 		/>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
index 4fbdc3e284fa6..e29fb2002d5eb 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
@@ -15,6 +15,8 @@
 	export let path: string
 	export let newItem: boolean = false
 	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
 	let kafkaTriggerEditor: KafkaTriggerEditor
 
@@ -84,12 +86,15 @@
 				saveTrigger(path, e.detail.config)
 			}}
 			on:applyArgs
+			on:addPreprocessor
 			cloudDisabled={false}
 			triggerType="kafka"
 			{isFlow}
 			{data}
 			{path}
 			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
 		/>
 
 		{#if newItem}
diff --git a/frontend/src/lib/components/triggers/RoutesPanel.svelte b/frontend/src/lib/components/triggers/RoutesPanel.svelte
index 08010d898eedc..0139ba7ebec5a 100644
--- a/frontend/src/lib/components/triggers/RoutesPanel.svelte
+++ b/frontend/src/lib/components/triggers/RoutesPanel.svelte
@@ -14,6 +14,7 @@
 	export let path: string
 	export let newItem: boolean = false
 	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
 
 	let routeEditor: RouteEditor
 
@@ -64,11 +65,13 @@
 			routeEditor?.openNew(isFlow, path, e.detail.config)
 		}}
 		on:applyArgs
+		on:addPreprocessor
 		cloudDisabled={false}
 		triggerType="http"
 		{isFlow}
 		{path}
 		{isEditor}
+		{canHavePreprocessor}
 	/>
 	<Section label="Routes">
 		{#if !newItem}
diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index 0c1fc41a5a3a9..ee38fcd883bb2 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -20,6 +20,8 @@
 	export let initialPath: string
 	export let schema: any
 	export let isFlow: boolean
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
 	const { selectedTrigger, simplifiedPoll } = getContext<TriggerContext>('TriggerContext')
 </script>
@@ -45,6 +47,7 @@
 						<div class="p-4">
 							<WebhooksPanel
 								on:applyArgs
+								on:addPreprocessor
 								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
 								path={currentPath}
 								{isFlow}
@@ -52,6 +55,8 @@
 								token=""
 								{newItem}
 								isEditor={true}
+								{canHavePreprocessor}
+								{hasPreprocessor}
 							/>
 						</div>
 					{/if}
@@ -60,11 +65,14 @@
 						<div class="p-4">
 							<EmailTriggerPanel
 								on:applyArgs
+								on:addPreprocessor
 								token=""
 								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
 								path={currentPath}
 								{isFlow}
 								isEditor={true}
+								{canHavePreprocessor}
+								{hasPreprocessor}
 							/>
 						</div>
 					{/if}
@@ -79,10 +87,13 @@
 						<div class="p-4">
 							<WebsocketTriggersPanel
 								on:applyArgs
+								on:addPreprocessor
 								{newItem}
 								path={currentPath}
 								{isFlow}
 								isEditor={true}
+								{canHavePreprocessor}
+								{hasPreprocessor}
 							/>
 						</div>
 					{/if}
@@ -91,10 +102,13 @@
 						<div class="p-4">
 							<KafkaTriggersPanel
 								on:applyArgs
+								on:addPreprocessor
 								{newItem}
 								path={currentPath}
 								{isFlow}
 								isEditor={true}
+								{canHavePreprocessor}
+								{hasPreprocessor}
 							/>
 						</div>
 					{/if}
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 8bcc292291f23..21f712edc6baa 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -21,6 +21,8 @@
 	export let noSave = false
 	export let isEditor: boolean = false
 	export let path: string = ''
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
 	const captureTypeLabels: Record<CaptureTriggerKind, string> = {
 		http: 'Route',
@@ -118,13 +120,10 @@
 			{path}
 			{isFlow}
 			captureType={triggerType}
-			hasPreprocessor={isFlow && !!$flowStore.value.preprocessor_module}
-			canHavePreprocessor
+			{hasPreprocessor}
+			{canHavePreprocessor}
 			on:applyArgs
-			on:addPreprocessor={async () => {
-				console.log('dbg add preprocessor')
-				$selectedId = 'preprocessor'
-			}}
+			on:addPreprocessor
 			on:updateSchema={(e) => {
 				const { schema, redirect } = e.detail
 				$flowStore.schema = schema
diff --git a/frontend/src/lib/components/triggers/WebhooksPanel.svelte b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
index 04e0f55df5442..c2f5554cc3166 100644
--- a/frontend/src/lib/components/triggers/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
@@ -11,6 +11,8 @@
 	export let path: string
 	export let newItem: boolean = false
 	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
 	let data: any = {
 		hash,
@@ -33,6 +35,7 @@
 
 	<TriggersEditorSection
 		on:applyArgs
+		on:addPreprocessor
 		cloudDisabled={false}
 		triggerType="webhook"
 		{isFlow}
@@ -40,5 +43,7 @@
 		noSave
 		{path}
 		{isEditor}
+		{canHavePreprocessor}
+		{hasPreprocessor}
 	/>
 </div>
diff --git a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
index 453842b307b2e..0191e2068ac25 100644
--- a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
@@ -15,6 +15,8 @@
 	export let path: string
 	export let newItem: boolean = false
 	export let isEditor: boolean = false
+	export let canHavePreprocessor: boolean = false
+	export let hasPreprocessor: boolean = false
 
 	let wsTriggerEditor: WebsocketTriggerEditor
 
@@ -71,11 +73,13 @@
 			on:saveTrigger={(e) => {
 				wsTriggerEditor?.openNew(isFlow, path)
 			}}
+			on:addPreprocessor
 			cloudDisabled={false}
 			triggerType="websocket"
 			{isFlow}
 			{path}
 			{isEditor}
+			{canHavePreprocessor}
 		/>
 
 		<Section label="Websockets">

From 68b22d36c37037567291ee8c972b3c7725742a77 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 10:34:44 +0000
Subject: [PATCH 32/42] Use slot in log Panel for captures

---
 .../src/lib/components/ScriptEditor.svelte    | 22 ++++++++++++++----
 .../components/scriptEditor/LogPanel.svelte   | 23 ++++---------------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 161f83c8a4dca..12987f780968e 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -33,6 +33,7 @@
 		BUN_PREPROCESSOR_MODULE_CODE,
 		PYTHON_PREPROCESSOR_MODULE_CODE
 	} from '$lib/script_helpers'
+	import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
 
 	// Exported
 	export let schema: Schema | any = emptySchema()
@@ -478,10 +479,7 @@
 								{editor}
 								{diffEditor}
 								{args}
-								{path}
-								{hasPreprocessor}
-								on:applyArgs
-								on:addPreprocessor
+								showCaptures={true}
 							>
 								{#if scriptProgress}
 									<!-- Put to the slot in logpanel -->
@@ -492,6 +490,22 @@
 										compact={true}
 									/>
 								{/if}
+								<svelte:fragment slot="capturesTab">
+									<div class="h-full p-2">
+										<CaptureTable
+											showAll={true}
+											{hasPreprocessor}
+											canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
+											isFlow={false}
+											path={path ?? ''}
+											hideCapturesWhenEmpty={false}
+											canEdit={true}
+											on:applyArgs
+											on:updateSchema
+											on:addPreprocessor
+										/>
+									</div>
+								</svelte:fragment>
 							</LogPanel>
 						</Pane>
 					</Splitpanes>
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 039fa923be731..2c1c6ba18c3b0 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -28,7 +28,6 @@
 	import Head from '../table/Head.svelte'
 	import WorkflowTimeline from '../WorkflowTimeline.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
 
 	export let lang: Preview['language'] | undefined
 	export let previewIsLoading = false
@@ -38,8 +37,7 @@
 	export let diffEditor: DiffEditor | undefined = undefined
 	export let args: Record<string, any> | undefined = undefined
 	export let workspace: string | undefined = undefined
-	export let path: string = ''
-	export let hasPreprocessor: boolean = false
+	export let showCaptures: boolean = false
 
 	type DrawerContent = {
 		mode: 'json' | Preview['language'] | 'plain'
@@ -94,7 +92,9 @@
 	<Tabs bind:selected={selectedTab} class="pt-1" wrapperClass="flex-none">
 		<Tab value="logs" size="xs">Logs & Result</Tab>
 		<Tab value="history" size="xs">History</Tab>
-		<Tab value="captures" size="xs">Captures</Tab>
+		{#if showCaptures}
+			<Tab value="captures" size="xs">Captures</Tab>
+		{/if}
 
 		<svelte:fragment slot="content">
 			<div class="grow min-h-0">
@@ -260,20 +260,7 @@
 					</div>
 				{/if}
 				{#if selectedTab === 'captures'}
-					<div class="h-full p-2">
-						<CaptureTable
-							showAll={true}
-							{hasPreprocessor}
-							canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
-							isFlow={false}
-							{path}
-							hideCapturesWhenEmpty={false}
-							canEdit={true}
-							on:applyArgs
-							on:updateSchema
-							on:addPreprocessor
-						/>
-					</div>
+					<slot name="capturesTab" />
 				{/if}
 			</div>
 		</svelte:fragment>

From d4df0fddfa834920f20f48a8cccce3d3e5cdabd5 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 11:07:35 +0000
Subject: [PATCH 33/42] handle capture refresh in script

---
 frontend/src/lib/components/ScriptBuilder.svelte   |  7 +++++++
 frontend/src/lib/components/ScriptEditor.svelte    |  2 ++
 .../components/details/EmailTriggerPanel.svelte    |  1 +
 .../lib/components/triggers/CaptureTable.svelte    |  8 +++++++-
 .../lib/components/triggers/CaptureWrapper.svelte  | 13 ++++++++-----
 .../components/triggers/KafkaTriggersPanel.svelte  |  1 +
 .../src/lib/components/triggers/RoutesPanel.svelte |  1 +
 .../lib/components/triggers/TriggersEditor.svelte  | 14 +++++++++++++-
 .../triggers/TriggersEditorSection.svelte          |  1 +
 .../lib/components/triggers/WebhooksPanel.svelte   |  1 +
 .../triggers/WebsocketTriggersPanel.svelte         |  2 ++
 11 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index db7d499f1becd..db1c43dc6fb30 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -661,6 +661,8 @@
 		}
 		selectedInputTab = 'preprocessor'
 	}
+
+	let shouldRefreshCaptures = false
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -1259,6 +1261,10 @@
 							<TriggersEditor
 								on:applyArgs={applyArgs}
 								on:addPreprocessor={addPreprocessor}
+								on:refreshCaptures={() => {
+									console.log('dbg refreshCaptures')
+									shouldRefreshCaptures = true
+								}}
 								{initialPath}
 								schema={script.schema}
 								noEditor={true}
@@ -1473,6 +1479,7 @@
 			tag={script.tag}
 			bind:args
 			bind:hasPreprocessor
+			bind:shouldRefreshCaptures
 		/>
 	</div>
 {:else}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 12987f780968e..84f2e9e979493 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -58,6 +58,7 @@
 	export let args: Record<string, any> = initialArgs
 	export let selectedTab: 'main' | 'preprocessor' | 'capture' = 'main'
 	export let hasPreprocessor = false
+	export let shouldRefreshCaptures = false
 
 	let jobProgressReset: () => void
 
@@ -503,6 +504,7 @@
 											on:applyArgs
 											on:updateSchema
 											on:addPreprocessor
+											bind:shouldRefreshCaptures
 										/>
 									</div>
 								</svelte:fragment>
diff --git a/frontend/src/lib/components/details/EmailTriggerPanel.svelte b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
index 74c28cc56a5c5..3edc6840177b3 100644
--- a/frontend/src/lib/components/details/EmailTriggerPanel.svelte
+++ b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
@@ -65,6 +65,7 @@
 				{hasPreprocessor}
 				on:applyArgs
 				on:addPreprocessor
+				on:refreshCaptures
 			/>
 		{:else}
 			<div>
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index 2c0a833701dab..b420d4f2014f5 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -29,6 +29,7 @@
 	export let canEdit = false
 	export let showAll = false
 	export let maxHeight: number | undefined = undefined
+	export let shouldRefreshCaptures = false
 
 	let captures: Capture[] = []
 	let selectedCaptures: any[] = []
@@ -74,7 +75,7 @@
 		}
 	}>()
 
-	export async function refreshCaptures() {
+	async function refreshCaptures() {
 		captures = await CaptureService.listCaptures({
 			workspace: $workspaceStore!,
 			runnableKind: isFlow ? 'flow' : 'script',
@@ -82,6 +83,11 @@
 		})
 	}
 	refreshCaptures()
+
+	$: if (shouldRefreshCaptures) {
+		refreshCaptures()
+		shouldRefreshCaptures = false
+	}
 </script>
 
 {#if selectedCaptures.length > 0 || !hideCapturesWhenEmpty}
diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index df446abaa8ae6..2648674b6c84c 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { workspaceStore } from '$lib/stores'
 	import { CaptureService, type CaptureConfig, type CaptureTriggerKind } from '$lib/gen'
-	import { onDestroy } from 'svelte'
+	import { onDestroy, createEventDispatcher } from 'svelte'
 	import { capitalize, isObject, sendUserToast, sleep } from '$lib/utils'
 	import { isCloudHosted } from '$lib/cloud'
 	import Alert from '../common/alert/Alert.svelte'
@@ -26,6 +26,7 @@
 		  }
 		| undefined = undefined
 	export let args: Record<string, any> = {}
+	export let shouldRefreshCaptures = false
 
 	export async function setConfig() {
 		await CaptureService.setCaptureConfig({
@@ -39,6 +40,8 @@
 		})
 	}
 
+	const dispatch = createEventDispatcher()
+
 	let captureConfigs: {
 		[key: string]: CaptureConfig
 	} = {}
@@ -67,8 +70,6 @@
 	}
 	getCaptureConfigs()
 
-	let refreshCaptures: () => Promise<void>
-
 	async function capture() {
 		let i = 0
 		captureActive = true
@@ -82,7 +83,7 @@
 				})
 				await getCaptureConfigs()
 			}
-			refreshCaptures()
+			shouldRefreshCaptures = true
 			i++
 			await sleep(1000)
 		}
@@ -109,6 +110,8 @@
 
 	onDestroy(() => {
 		captureActive = false
+		dispatch('refreshCaptures')
+		shouldRefreshCaptures = true
 	})
 
 	function getServerEnabled(config: CaptureConfig) {
@@ -205,7 +208,7 @@
 			{canHavePreprocessor}
 			{isFlow}
 			{path}
-			bind:refreshCaptures
+			bind:shouldRefreshCaptures
 			hideCapturesWhenEmpty={true}
 			canEdit={true}
 			on:applyArgs
diff --git a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
index e29fb2002d5eb..1b84a616407ef 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersPanel.svelte
@@ -87,6 +87,7 @@
 			}}
 			on:applyArgs
 			on:addPreprocessor
+			on:refreshCaptures
 			cloudDisabled={false}
 			triggerType="kafka"
 			{isFlow}
diff --git a/frontend/src/lib/components/triggers/RoutesPanel.svelte b/frontend/src/lib/components/triggers/RoutesPanel.svelte
index 0139ba7ebec5a..25bdecc3bc043 100644
--- a/frontend/src/lib/components/triggers/RoutesPanel.svelte
+++ b/frontend/src/lib/components/triggers/RoutesPanel.svelte
@@ -66,6 +66,7 @@
 		}}
 		on:applyArgs
 		on:addPreprocessor
+		on:refreshCaptures
 		cloudDisabled={false}
 		triggerType="http"
 		{isFlow}
diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index ee38fcd883bb2..e7dbbabb55233 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -48,6 +48,7 @@
 							<WebhooksPanel
 								on:applyArgs
 								on:addPreprocessor
+								on:refreshCaptures
 								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
 								path={currentPath}
 								{isFlow}
@@ -66,6 +67,7 @@
 							<EmailTriggerPanel
 								on:applyArgs
 								on:addPreprocessor
+								on:refreshCaptures
 								token=""
 								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
 								path={currentPath}
@@ -79,7 +81,15 @@
 
 					{#if $selectedTrigger === 'routes'}
 						<div class="p-4">
-							<RoutesPanel on:applyArgs{newItem} path={currentPath} {isFlow} isEditor={true} />
+							<RoutesPanel
+								on:applyArgs
+								on:refreshCaptures
+								on:addPreprocessor
+								{newItem}
+								path={currentPath}
+								{isFlow}
+								isEditor={true}
+							/>
 						</div>
 					{/if}
 
@@ -88,6 +98,7 @@
 							<WebsocketTriggersPanel
 								on:applyArgs
 								on:addPreprocessor
+								on:refreshCaptures
 								{newItem}
 								path={currentPath}
 								{isFlow}
@@ -103,6 +114,7 @@
 							<KafkaTriggersPanel
 								on:applyArgs
 								on:addPreprocessor
+								on:refreshCaptures
 								{newItem}
 								path={currentPath}
 								{isFlow}
diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
index 21f712edc6baa..0c802b42ceb71 100644
--- a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditorSection.svelte
@@ -132,6 +132,7 @@
 				}
 			}}
 			on:saveTrigger
+			on:refreshCaptures
 			bind:args
 			bind:handleCapture
 			bind:captureActive
diff --git a/frontend/src/lib/components/triggers/WebhooksPanel.svelte b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
index c2f5554cc3166..f938bcc1f3667 100644
--- a/frontend/src/lib/components/triggers/WebhooksPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebhooksPanel.svelte
@@ -36,6 +36,7 @@
 	<TriggersEditorSection
 		on:applyArgs
 		on:addPreprocessor
+		on:refreshCaptures
 		cloudDisabled={false}
 		triggerType="webhook"
 		{isFlow}
diff --git a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
index 0191e2068ac25..8dc630ef23322 100644
--- a/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
+++ b/frontend/src/lib/components/triggers/WebsocketTriggersPanel.svelte
@@ -74,12 +74,14 @@
 				wsTriggerEditor?.openNew(isFlow, path)
 			}}
 			on:addPreprocessor
+			on:refreshCaptures
 			cloudDisabled={false}
 			triggerType="websocket"
 			{isFlow}
 			{path}
 			{isEditor}
 			{canHavePreprocessor}
+			{hasPreprocessor}
 		/>
 
 		<Section label="Websockets">

From 7c6558baddb3be81bb4140d546b07326a18f1947 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 11:41:32 +0000
Subject: [PATCH 34/42] Delete capture tab from script editor

---
 .../src/lib/components/ScriptBuilder.svelte   |   2 +-
 .../src/lib/components/ScriptEditor.svelte    | 253 ++++++++----------
 2 files changed, 110 insertions(+), 145 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index db1c43dc6fb30..486bc277ab067 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -96,7 +96,7 @@
 	let confirmCallback: () => void = () => {} // What happens when user clicks `override` in warning
 	let open: boolean = false // Is confirmation modal open
 	let args: Record<string, any> = initialArgs // Test args input
-	let selectedInputTab: 'main' | 'capture' | 'preprocessor' = 'main'
+	let selectedInputTab: 'main' | 'preprocessor' = 'main'
 	let hasPreprocessor = false
 
 	let metadataOpen =
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 84f2e9e979493..b02fb3ad1fc52 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -28,11 +28,6 @@
 	import Tabs from './common/tabs/Tabs.svelte'
 	import Tab from './common/tabs/Tab.svelte'
 	import { slide } from 'svelte/transition'
-	import CapturePanel from './triggers/CapturePanel.svelte'
-	import {
-		BUN_PREPROCESSOR_MODULE_CODE,
-		PYTHON_PREPROCESSOR_MODULE_CODE
-	} from '$lib/script_helpers'
 	import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
 
 	// Exported
@@ -56,7 +51,7 @@
 	export let watchChanges = false
 	export let customUi: ScriptEditorWhitelabelCustomUi = {}
 	export let args: Record<string, any> = initialArgs
-	export let selectedTab: 'main' | 'preprocessor' | 'capture' = 'main'
+	export let selectedTab: 'main' | 'preprocessor' = 'main'
 	export let hasPreprocessor = false
 	export let shouldRefreshCaptures = false
 
@@ -245,6 +240,8 @@
 		return `${url}?collab=1` + (edit ? '' : `&path=${path}`)
 	}
 
+	$: showTabs = hasPreprocessor
+	$: !hasPreprocessor && (selectedTab = 'main')
 	$: selectedTab && inferSchema(code)
 
 	let argsRender = 0
@@ -371,147 +368,115 @@
 		</Pane>
 		<Pane size={40} minSize={10}>
 			<div class="flex flex-col h-full">
-				<div transition:slide={{ duration: 200 }}>
-					<Tabs bind:selected={selectedTab}>
-						<Tab value="main">Main</Tab>
-						{#if hasPreprocessor}
-							<div transition:slide={{ duration: 200, axis: 'x' }}>
-								<Tab value="preprocessor">Preprocessor</Tab>
-							</div>
-						{/if}
-					</Tabs>
-				</div>
-				{#if selectedTab === 'capture'}
-					<CapturePanel
-						path={path ?? ''}
-						newItem={!edit}
-						{hasPreprocessor}
-						isFlow={false}
-						on:openTriggers
-						on:applyArgs
-						canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
-						on:addPreprocessor={() => {
-							const code = editor?.getCode()
-							if (code) {
-								const preprocessorCode =
-									lang === 'python3'
-										? PYTHON_PREPROCESSOR_MODULE_CODE
-										: BUN_PREPROCESSOR_MODULE_CODE
-								const mainIndex = code.indexOf(
-									lang === 'python3' ? 'def main' : 'export async function main'
-								)
-								if (mainIndex === -1) {
-									editor?.setCode(code + preprocessorCode)
-								} else {
-									editor?.setCode(
-										code.slice(0, mainIndex) +
-											preprocessorCode +
-											'\n' +
-											code.slice(mainIndex) +
-											'\n\n'
-									)
-								}
-							}
-						}}
-					/>
-				{:else}
-					<div class="flex justify-center pt-1">
-						{#if testIsLoading}
-							<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
-								<WindmillIcon
-									white={true}
-									class="mr-2 text-white"
-									height="16px"
-									width="20px"
-									spin="fast"
-								/>
-								Cancel
-							</Button>
-						{:else}
-							<Button
-								color="dark"
-								on:click={() => {
-									runTest()
-								}}
-								btnClasses="w-full"
-								size="xs"
-								startIcon={{
-									icon: Play,
-									classes: 'animate-none'
-								}}
-								shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
-							>
-								{#if testIsLoading}
-									Running
-								{:else}
-									Test
-								{/if}
-							</Button>
-						{/if}
-					</div>
-					<Splitpanes horizontal class="!max-h-[calc(100%-43px)]">
-						<Pane size={33}>
-							<div class="px-2">
-								<div class="break-words relative font-sans">
-									{#key argsRender}
-										<SchemaForm
-											helperScript={{
-												type: 'inline',
-												code,
-												//@ts-ignore
-												lang
-											}}
-											compact
-											{schema}
-											bind:args
-											bind:isValid
-											showSchemaExplorer
-										/>
-									{/key}
+				{#if showTabs}
+					<div transition:slide={{ duration: 200 }}>
+						<Tabs bind:selected={selectedTab}>
+							<Tab value="main">Main</Tab>
+							{#if hasPreprocessor}
+								<div transition:slide={{ duration: 200, axis: 'x' }}>
+									<Tab value="preprocessor">Preprocessor</Tab>
 								</div>
+							{/if}
+						</Tabs>
+					</div>
+				{/if}
+
+				<div class="flex justify-center pt-1">
+					{#if testIsLoading}
+						<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
+							<WindmillIcon
+								white={true}
+								class="mr-2 text-white"
+								height="16px"
+								width="20px"
+								spin="fast"
+							/>
+							Cancel
+						</Button>
+					{:else}
+						<Button
+							color="dark"
+							on:click={() => {
+								runTest()
+							}}
+							btnClasses="w-full"
+							size="xs"
+							startIcon={{
+								icon: Play,
+								classes: 'animate-none'
+							}}
+							shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
+						>
+							{#if testIsLoading}
+								Running
+							{:else}
+								Test
+							{/if}
+						</Button>
+					{/if}
+				</div>
+				<Splitpanes horizontal class="!max-h-[calc(100%-43px)]">
+					<Pane size={33}>
+						<div class="px-2">
+							<div class="break-words relative font-sans">
+								{#key argsRender}
+									<SchemaForm
+										helperScript={{
+											type: 'inline',
+											code,
+											//@ts-ignore
+											lang
+										}}
+										compact
+										{schema}
+										bind:args
+										bind:isValid
+										showSchemaExplorer
+									/>
+								{/key}
 							</div>
-						</Pane>
-						<Pane size={67} class="relative">
-							<LogPanel
-								{lang}
-								previewJob={testJob}
-								{pastPreviews}
-								previewIsLoading={testIsLoading}
-								{editor}
-								{diffEditor}
-								{args}
-								showCaptures={true}
-							>
-								{#if scriptProgress}
-									<!-- Put to the slot in logpanel -->
-									<JobProgressBar
-										job={testJob}
-										bind:scriptProgress
-										bind:reset={jobProgressReset}
-										compact={true}
+						</div>
+					</Pane>
+					<Pane size={67} class="relative">
+						<LogPanel
+							{lang}
+							previewJob={testJob}
+							{pastPreviews}
+							previewIsLoading={testIsLoading}
+							{editor}
+							{diffEditor}
+							{args}
+							showCaptures={true}
+						>
+							{#if scriptProgress}
+								<!-- Put to the slot in logpanel -->
+								<JobProgressBar
+									job={testJob}
+									bind:scriptProgress
+									bind:reset={jobProgressReset}
+									compact={true}
+								/>
+							{/if}
+							<svelte:fragment slot="capturesTab">
+								<div class="h-full p-2">
+									<CaptureTable
+										showAll={true}
+										{hasPreprocessor}
+										canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
+										isFlow={false}
+										path={path ?? ''}
+										hideCapturesWhenEmpty={false}
+										canEdit={true}
+										on:applyArgs
+										on:updateSchema
+										on:addPreprocessor
+										bind:shouldRefreshCaptures
 									/>
-								{/if}
-								<svelte:fragment slot="capturesTab">
-									<div class="h-full p-2">
-										<CaptureTable
-											showAll={true}
-											{hasPreprocessor}
-											canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
-											isFlow={false}
-											path={path ?? ''}
-											hideCapturesWhenEmpty={false}
-											canEdit={true}
-											on:applyArgs
-											on:updateSchema
-											on:addPreprocessor
-											bind:shouldRefreshCaptures
-										/>
-									</div>
-								</svelte:fragment>
-							</LogPanel>
-						</Pane>
-					</Splitpanes>
-				{/if}
+								</div>
+							</svelte:fragment>
+						</LogPanel>
+					</Pane>
+				</Splitpanes>
 			</div>
 		</Pane>
 	</Splitpanes>

From 09ac57401beae1c0ac7152a1ebcd04022b3d4f37 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 11:51:49 +0000
Subject: [PATCH 35/42] reset kafka resource on toggle static

---
 .../triggers/KafkaTriggersConfigSection.svelte         | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
index d5d467cc21a25..21554fd44c396 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
@@ -137,6 +137,16 @@
 			args.security = value
 		}
 	}
+
+	function restOnSelected(selected: 'resource' | 'static') {
+		if (selected === 'static') {
+			args.kafka_resource_path = undefined
+		} else {
+			args.brokers = undefined
+			args.security = undefined
+		}
+	}
+	$: restOnSelected(selected)
 </script>
 
 <Section label="Kafka" {headless}>

From 4a63ae7a96498ac8c11dd8cdc5196c8fe1f3e771 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 12:07:12 +0000
Subject: [PATCH 36/42] fix minor issue

---
 frontend/src/lib/components/triggers/CaptureWrapper.svelte      | 1 +
 .../src/lib/components/triggers/RouteEditorConfigSection.svelte | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/triggers/CaptureWrapper.svelte b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
index 2648674b6c84c..e0fa0fdedf672 100644
--- a/frontend/src/lib/components/triggers/CaptureWrapper.svelte
+++ b/frontend/src/lib/components/triggers/CaptureWrapper.svelte
@@ -183,6 +183,7 @@
 		{:else if captureType === 'http'}
 			<RouteEditorConfigSection
 				{path}
+				{isFlow}
 				showCapture={captureActive}
 				can_write={true}
 				bind:args
diff --git a/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
index 31f2cc97e0e5b..a0abd215eecbf 100644
--- a/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/RouteEditorConfigSection.svelte
@@ -22,7 +22,7 @@
 		undefined
 	export let showCapture = false
 	export let initialRoutePath: string = ''
-	export let isFlow = true
+	export let isFlow = false
 	export let path: string = ''
 	export let headless: boolean = false
 

From e661127cd021c264a3a0a178245c82b6ae7190a4 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 12:34:10 +0000
Subject: [PATCH 37/42] Allow resource in kafka capture

---
 .../KafkaTriggersConfigSection.svelte         | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
index 21554fd44c396..31296fad7d0ba 100644
--- a/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/KafkaTriggersConfigSection.svelte
@@ -6,6 +6,8 @@
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import SchemaForm from '../SchemaForm.svelte'
+	import { ResourceService } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
 
 	let isValid: boolean = false
 
@@ -141,12 +143,34 @@
 	function restOnSelected(selected: 'resource' | 'static') {
 		if (selected === 'static') {
 			args.kafka_resource_path = undefined
-		} else {
+		}
+	}
+	$: restOnSelected(selected)
+
+	async function updateArgsFromResource(resourcePath: string) {
+		if (!resourcePath) return
+		try {
+			const res = await ResourceService.getResourceValueInterpolated({
+				workspace: $workspaceStore!,
+				path: resourcePath
+			})
+
+			if (!res) {
+				return
+			}
+
+			if (typeof res === 'object' && 'brokers' in res && 'security' in res) {
+				args.brokers = res.brokers
+				args.security = res.security
+			}
+		} catch (error) {
+			console.error('Failed to fetch resource:', error)
+			// Optionally reset the values
 			args.brokers = undefined
 			args.security = undefined
 		}
 	}
-	$: restOnSelected(selected)
+	$: updateArgsFromResource(args.kafka_resource_path)
 </script>
 
 <Section label="Kafka" {headless}>

From 9f946aa88cb456f5733918afa6197f6a0550077d Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 12:45:13 +0000
Subject: [PATCH 38/42] use simple capture button in flow

---
 .../components/flows/content/FlowInput.svelte | 27 +------
 .../flows/pickers/InputSchemaPicker.svelte    | 76 -------------------
 .../components/triggers/CaptureButton.svelte  | 11 ++-
 3 files changed, 13 insertions(+), 101 deletions(-)
 delete mode 100644 frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte

diff --git a/frontend/src/lib/components/flows/content/FlowInput.svelte b/frontend/src/lib/components/flows/content/FlowInput.svelte
index 171456bbf3e57..18c9af99a9a0e 100644
--- a/frontend/src/lib/components/flows/content/FlowInput.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInput.svelte
@@ -12,23 +12,18 @@
 	import EditableSchemaForm from '$lib/components/EditableSchemaForm.svelte'
 	import AddProperty from '$lib/components/schema/AddProperty.svelte'
 	import FlowInputViewer from '$lib/components/FlowInputViewer.svelte'
-	import Popover from '$lib/components/meltComponents/Popover.svelte'
-	import InputSchemaPicker from '$lib/components/flows/pickers/InputSchemaPicker.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import CaptureButton from '$lib/components/triggers/CaptureButton.svelte'
 
 	export let noEditor: boolean
 	export let disabled: boolean
 
-	const dispatch = createEventDispatcher()
-
-	const { flowStore, flowStateStore, previewArgs, initialPath, pathStore } =
+	const { flowStore, flowStateStore, previewArgs, initialPath } =
 		getContext<FlowEditorContext>('FlowEditorContext')
 
 	let inputLibraryDrawer: Drawer
 	let jsonPayload: Drawer
 	let pendingJson: string
 	let addProperty: AddProperty | undefined = undefined
-	let capturePopoverOpen = false
 
 	function importJson() {
 		const parsed = JSON.parse(pendingJson)
@@ -49,23 +44,7 @@
 	{#if !disabled}
 		<div class="flex flex-row items-center gap-2 px-4 py-2 border-b">
 			<div class="text-sm">Copy input's schema from</div>
-			<Popover closeButton={false} bind:open={capturePopoverOpen}>
-				<svelte:fragment slot="trigger">
-					<Button color="dark" size="xs" nonCaptureEvent>Capture</Button>
-				</svelte:fragment>
-				<svelte:fragment slot="content">
-					<InputSchemaPicker
-						isFlow={true}
-						path={$pathStore}
-						on:openTriggers
-						on:applyArgs
-						on:updateSchema={(e) => {
-							capturePopoverOpen = false
-							dispatch('updateSchema', e.detail)
-						}}
-					/>
-				</svelte:fragment>
-			</Popover>
+			<CaptureButton on:openTriggers dark={true} />
 			<Button
 				color="dark"
 				size="xs"
diff --git a/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte b/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
deleted file mode 100644
index 3b5386914d10b..0000000000000
--- a/frontend/src/lib/components/flows/pickers/InputSchemaPicker.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-	import { type CaptureTriggerKind } from '$lib/gen'
-	import CaptureTable from '$lib/components/triggers/CaptureTable.svelte'
-	import { Webhook, Route, Unplug, Mail } from 'lucide-svelte'
-	import KafkaIcon from '$lib/components/icons/KafkaIcon.svelte'
-	import { enterpriseLicense } from '$lib/stores'
-
-	let selected: CaptureTriggerKind = 'webhook'
-
-	export let isFlow = false
-	export let path: string
-</script>
-
-<div class="w-[650px] max-h-[200px] flex flex-row divide-x">
-	<div class="w-40">
-		<div class="flex flex-col bg-surface-secondary h-full">
-			<button
-				class={`${selected === 'webhook' ? 'bg-surface' : ''} p-2`}
-				on:click={() => (selected = 'webhook')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<Webhook size={16} />
-					<p class="text-xs text-secondary">Webhook</p>
-				</div>
-			</button>
-			<button
-				class={`${selected === 'http' ? 'bg-surface' : ''} p-2`}
-				on:click={() => (selected = 'http')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<Route size={16} />
-					<p class="text-xs text-secondary">HTTP</p>
-				</div>
-			</button>
-			<button
-				class={`${selected === 'websocket' ? 'bg-surface' : ''} p-2`}
-				on:click={() => (selected = 'websocket')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<Unplug size={16} />
-					<p class="text-xs text-secondary">Websocket</p>
-				</div>
-			</button>
-			<button
-				class={`${selected === 'email' ? 'bg-surface' : ''} p-2`}
-				on:click={() => (selected = 'email')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<Mail size={16} />
-					<p class="text-xs text-secondary">Email</p>
-				</div>
-			</button>
-			<button
-				disabled={!$enterpriseLicense}
-				class={`${selected === 'kafka' ? 'bg-surface' : ''} p-2`}
-				on:click={() => (selected = 'kafka')}
-			>
-				<div class="flex flex-row items-center gap-2">
-					<KafkaIcon size={16} />
-					<p class="text-xs text-secondary">Kafka</p>
-				</div>
-			</button>
-		</div>
-	</div>
-	<div class="grow p-2">
-		<CaptureTable
-			captureType={selected}
-			{isFlow}
-			{path}
-			addButton={true}
-			on:openTriggers
-			on:applyArgs
-			on:updateSchema
-		/>
-	</div>
-</div>
diff --git a/frontend/src/lib/components/triggers/CaptureButton.svelte b/frontend/src/lib/components/triggers/CaptureButton.svelte
index 863123a5e5a49..ffc31ef80e9ca 100644
--- a/frontend/src/lib/components/triggers/CaptureButton.svelte
+++ b/frontend/src/lib/components/triggers/CaptureButton.svelte
@@ -8,6 +8,8 @@
 	import { createEventDispatcher } from 'svelte'
 	import { captureTriggerKindToTriggerKind } from '../triggers'
 
+	export let dark = false
+
 	let isOpen = false
 
 	const dispatch = createEventDispatcher()
@@ -23,7 +25,14 @@
 
 <Popover closeButton={false} bind:open={isOpen}>
 	<svelte:fragment slot="trigger">
-		<Button color="light" variant="border" size="xs" nonCaptureEvent>Capture</Button>
+		<Button
+			color={dark ? 'dark' : 'light'}
+			variant={dark ? 'contained' : 'border'}
+			size="xs"
+			nonCaptureEvent
+		>
+			Capture
+		</Button>
 	</svelte:fragment>
 	<svelte:fragment slot="content">
 		<div class="flex flex-col bg-surface">

From 473c30760adce09c9e086be0e43887f0ef875806 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 12:46:02 +0000
Subject: [PATCH 39/42] Remove capture panel

---
 .../components/triggers/CapturePanel.svelte   | 622 ------------------
 1 file changed, 622 deletions(-)
 delete mode 100644 frontend/src/lib/components/triggers/CapturePanel.svelte

diff --git a/frontend/src/lib/components/triggers/CapturePanel.svelte b/frontend/src/lib/components/triggers/CapturePanel.svelte
deleted file mode 100644
index f7ec31ff9ce1e..0000000000000
--- a/frontend/src/lib/components/triggers/CapturePanel.svelte
+++ /dev/null
@@ -1,622 +0,0 @@
-<script lang="ts">
-	import {
-		Circle,
-		CircleStop,
-		Clipboard,
-		Info,
-		Mail,
-		Play,
-		Route,
-		Save,
-		Trash2,
-		Unplug,
-		Webhook
-	} from 'lucide-svelte'
-	import { base32 } from 'rfc4648'
-	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
-	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import KafkaIcon from '../icons/KafkaIcon.svelte'
-	import SchemaForm from '../SchemaForm.svelte'
-	import { enterpriseLicense, workspaceStore } from '$lib/stores'
-	import {
-		CaptureService,
-		SettingService,
-		type Capture,
-		type CaptureConfig,
-		type CaptureTriggerKind
-	} from '$lib/gen'
-	import Button from '../common/button/Button.svelte'
-	import { capitalize, copyToClipboard, isObject, sendUserToast, sleep } from '$lib/utils'
-	import { createEventDispatcher, onDestroy } from 'svelte'
-	import { captureTriggerKindToTriggerKind, type TriggerKind } from '../triggers'
-	import Label from '../Label.svelte'
-	import ClipboardPanel from '../details/ClipboardPanel.svelte'
-	import CopyableCodeBlock from '../details/CopyableCodeBlock.svelte'
-	import { bash } from 'svelte-highlight/languages'
-	import Popover from '../Popover.svelte'
-	import { isCloudHosted } from '$lib/cloud'
-	import Alert from '../common/alert/Alert.svelte'
-	import CustomPopover from '../CustomPopover.svelte'
-	import { page } from '$app/stores'
-	import { convert } from '@redocly/json-to-json-schema'
-	import SchemaViewer from '../SchemaViewer.svelte'
-
-	export let isFlow: boolean
-	export let path: string
-	export let hasPreprocessor: boolean
-	export let canHavePreprocessor: boolean
-	export let newItem: boolean
-
-	const dispatch = createEventDispatcher<{
-		openTriggers: {
-			kind: TriggerKind
-			config: Record<string, any>
-		}
-		applyArgs: {
-			kind: 'main' | 'preprocessor'
-			args: Record<string, any> | undefined
-		}
-		addPreprocessor: null
-		updateSchema: {
-			schema: any
-			redirect: boolean
-		}
-	}>()
-
-	let selected: CaptureTriggerKind = 'webhook'
-	let args: Record<string, any> = {}
-	let active = false
-	let isValid = true
-	let testKind: 'preprocessor' | 'main' = 'main'
-
-	$: hasPreprocessor && (testKind = 'preprocessor')
-
-	$: selected && (isValid = true)
-
-	const schemas = {
-		http: {
-			$schema: 'http://json-schema.org/draft-07/schema#',
-			type: 'object',
-			properties: {
-				route_path: {
-					type: 'string',
-					description: "':myparam' for path params",
-					title: 'Custom route path',
-					pattern: '^[\\w-:]+(/[\\w-:]+)*$',
-					customErrorMessage: 'Invalid route path'
-				}
-			},
-			required: ['route_path']
-		},
-		websocket: {
-			$schema: 'http://json-schema.org/draft-07/schema#',
-			type: 'object',
-			properties: {
-				url: {
-					type: 'string',
-					title: 'URL',
-					pattern: '^(ws:|wss:)//[^\\s]+$',
-					customErrorMessage: 'Invalid websocket URL'
-				}
-			},
-			required: ['url']
-		},
-		kafka: {
-			$schema: 'http://json-schema.org/draft-07/schema#',
-			type: 'object',
-			properties: {
-				brokers: {
-					type: 'array',
-					items: {
-						type: 'string'
-					},
-					nullable: false,
-					title: 'Brokers'
-				},
-				security: {
-					type: 'object',
-					title: 'Security',
-					oneOf: [
-						{
-							type: 'object',
-							title: 'PLAINTEXT',
-							properties: {
-								label: {
-									enum: ['PLAINTEXT'],
-									type: 'string'
-								}
-							}
-						},
-						{
-							type: 'object',
-							order: ['mechanism', 'username', 'password'],
-							title: 'SASL_PLAINTEXT',
-							required: ['mechanism', 'username', 'password'],
-							properties: {
-								label: {
-									enum: ['SASL_PLAINTEXT'],
-									type: 'string'
-								},
-								password: {
-									type: 'string',
-									password: true
-								},
-								username: {
-									type: 'string'
-								},
-								mechanism: {
-									enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
-									type: 'string',
-									disableCreate: true
-								}
-							}
-						},
-						{
-							type: 'object',
-							title: 'SSL',
-							properties: {
-								label: {
-									enum: ['SSL'],
-									type: 'string'
-								}
-							}
-						},
-						{
-							type: 'object',
-							order: ['mechanism', 'username', 'password'],
-							title: 'SASL_SSL',
-							required: ['mechanism', 'username', 'password'],
-							properties: {
-								label: {
-									enum: ['SASL_SSL'],
-									type: 'string'
-								},
-								password: {
-									type: 'string',
-									password: true
-								},
-								username: {
-									type: 'string'
-								},
-								mechanism: {
-									enum: ['PLAIN', 'SCRAM-SHA-256', 'SCRAM-SHA-512'],
-									type: 'string',
-									disableCreate: true
-								}
-							}
-						}
-					]
-				},
-				topics: {
-					type: 'array',
-					items: {
-						type: 'string'
-					},
-					nullable: false,
-					title: 'Topics'
-				},
-				group_id: { type: 'string', title: 'Group ID' }
-			},
-			required: ['brokers', 'security', 'topics', 'group_id']
-		}
-	}
-
-	async function setConfig() {
-		await CaptureService.setCaptureConfig({
-			requestBody: {
-				trigger_kind: selected,
-				path,
-				is_flow: isFlow,
-				trigger_config: args && Object.keys(args).length > 0 ? args : undefined
-			},
-			workspace: $workspaceStore!
-		})
-	}
-
-	let emailDomain: string | undefined = undefined
-
-	async function getEmailDomain() {
-		emailDomain =
-			((await SettingService.getGlobal({
-				key: 'email_domain'
-			})) as any) ?? undefined
-	}
-
-	getEmailDomain()
-
-	function getEmailAddress(emailDomain: string | undefined) {
-		const cleanedPath = path.replaceAll('/', '.')
-		const plainPrefix = `capture+${$workspaceStore}+${(isFlow ? 'flow.' : '') + cleanedPath}`
-		const encodedPrefix = base32
-			.stringify(new TextEncoder().encode(plainPrefix), {
-				pad: false
-			})
-			.toLowerCase()
-		return `${encodedPrefix}@${emailDomain}`
-	}
-	$: emailAddress = getEmailAddress(emailDomain)
-
-	function webhook() {
-		return `${$page.url.origin}/api/w/${$workspaceStore}/capture_u/webhook/${
-			isFlow ? 'flow' : 'script'
-		}/${path}`
-	}
-	const webhookUrl = webhook()
-
-	function getHttpRoute(route_path: string | undefined) {
-		return `${$page.url.origin}/api/w/${$workspaceStore}/capture_u/http/${
-			isFlow ? 'flow' : 'script'
-		}/${path.replaceAll('/', '.')}/${route_path ?? ''}`
-	}
-	$: httpRoute = getHttpRoute(args?.route_path)
-
-	let captures: Capture[] = []
-	async function refreshCaptures() {
-		captures = await CaptureService.listCaptures({
-			workspace: $workspaceStore!,
-			runnableKind: isFlow ? 'flow' : 'script',
-			path
-		})
-	}
-	refreshCaptures()
-
-	let captureConfigs: {
-		[key: string]: CaptureConfig
-	} = {}
-	async function getCaptureConfigs() {
-		const captureConfigsList = await CaptureService.getCaptureConfigs({
-			workspace: $workspaceStore!,
-			runnableKind: isFlow ? 'flow' : 'script',
-			path
-		})
-
-		captureConfigs = captureConfigsList.reduce((acc, c) => {
-			acc[c.trigger_kind] = c
-			return acc
-		}, {})
-
-		if ((selected === 'websocket' || selected === 'kafka') && active) {
-			const config = captureConfigs[selected]
-			if (config && config.error) {
-				const serverEnabled = getServerEnabled(config)
-				if (!serverEnabled) {
-					sendUserToast('Capture was stopped because of error: ' + config.error, true)
-					active = false
-				}
-			}
-		}
-	}
-	getCaptureConfigs()
-
-	async function capture() {
-		let i = 0
-		active = true
-		while (active) {
-			if (i % 3 === 0) {
-				await CaptureService.pingCaptureConfig({
-					workspace: $workspaceStore!,
-					triggerKind: selected,
-					runnableKind: isFlow ? 'flow' : 'script',
-					path
-				})
-				await getCaptureConfigs()
-			}
-			refreshCaptures()
-			i++
-			await sleep(1000)
-		}
-	}
-
-	let deleteLoading: number | null = null
-	async function deleteCapture(id: number) {
-		deleteLoading = id
-		try {
-			await CaptureService.deleteCapture({
-				workspace: $workspaceStore!,
-				id
-			})
-			refreshCaptures()
-		} finally {
-			deleteLoading = null
-		}
-	}
-
-	function stopAndSetDefaultArgs() {
-		active = false
-		if (selected in captureConfigs) {
-			const triggerConfig = captureConfigs[selected].trigger_config
-			args = isObject(triggerConfig) ? triggerConfig : {}
-		} else if (selected === 'kafka') {
-			args = {
-				brokers: [''],
-				topics: [''],
-				group_id: `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`
-			}
-		} else {
-			args = {}
-		}
-	}
-	$: selected && stopAndSetDefaultArgs()
-
-	onDestroy(() => {
-		active = false
-	})
-
-	function getServerEnabled(config: CaptureConfig) {
-		return (
-			!!config.last_server_ping &&
-			new Date(config.last_server_ping).getTime() > new Date().getTime() - 15 * 1000
-		)
-	}
-
-	let config: CaptureConfig | undefined
-	$: config = captureConfigs[selected]
-
-	$: cloudDisabled = (selected === 'websocket' || selected === 'kafka') && isCloudHosted()
-
-	$: selectedCaptures = captures.filter((c) => c.trigger_kind === selected)
-</script>
-
-<div class="flex flex-col gap-4 p-2">
-	<div class="flex flex-row gap-2 justify-between">
-		<ToggleButtonGroup bind:selected>
-			<ToggleButton value="webhook" label="Webhook" icon={Webhook} small />
-			<ToggleButton value="http" label="HTTP" icon={Route} small />
-			<ToggleButton value="websocket" label="Websocket" icon={Unplug} small />
-			<ToggleButton
-				value="kafka"
-				label={'Kafka' + (!$enterpriseLicense ? ' (ee)' : '')}
-				disabled={!$enterpriseLicense}
-				icon={KafkaIcon}
-			/>
-			<ToggleButton value="email" label="Email" icon={Mail} />
-		</ToggleButtonGroup>
-
-		<div class="flex gap-1">
-			{#if (selected === 'websocket' || selected === 'kafka') && config && active}
-				{@const serverEnabled = getServerEnabled(config)}
-				<div class="self-center">
-					{#if serverEnabled}
-						<Popover notClickable>
-							<span class="flex h-4 w-4">
-								<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
-							</span>
-							<div slot="text"> Websocket is connected </div>
-						</Popover>
-					{:else}
-						<Popover notClickable>
-							<span class="flex h-4 w-4">
-								<Circle
-									class="text-red-600 animate-ping absolute inline-flex fill-current"
-									size={12}
-								/>
-								<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
-							</span>
-							<div slot="text">
-								Websocket is not connected{config.error ? ': ' + config.error : ''}
-							</div>
-						</Popover>
-					{/if}
-				</div>
-			{/if}
-			<Button
-				size="xs2"
-				on:click={async () => {
-					if (!active) {
-						await setConfig()
-						capture()
-					} else {
-						active = false
-					}
-				}}
-				disabled={!isValid || cloudDisabled}
-				color={active ? 'red' : 'dark'}
-				startIcon={{ icon: active ? CircleStop : Play }}
-			>
-				Capture
-			</Button>
-			{#if newItem || cloudDisabled}
-				<Popover notClickable>
-					<Button size="xs2" disabled startIcon={{ icon: Save }} iconOnly wrapperClasses="h-full" />
-					<svelte:fragment slot="text">
-						{#if newItem}
-							Deploy the runnable to enable trigger creation
-						{:else if cloudDisabled}
-							{capitalize(selected)} triggers are disabled in the multi-tenant cloud
-						{/if}
-					</svelte:fragment>
-				</Popover>
-			{:else}
-				<Button
-					size="xs2"
-					on:click={() =>
-						dispatch('openTriggers', {
-							kind: captureTriggerKindToTriggerKind(selected),
-							config: args
-						})}
-					startIcon={{ icon: Save }}
-					iconOnly
-				/>
-			{/if}
-		</div>
-	</div>
-	{#if cloudDisabled}
-		<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
-			{capitalize(selected)} triggers are disabled in the multi-tenant cloud.
-		</Alert>
-	{:else}
-		{#if selected in schemas}
-			{#key selected}
-				<SchemaForm schema={schemas[selected]} bind:args bind:isValid />
-			{/key}
-		{/if}
-
-		{#if selected === 'webhook'}
-			<Label label="URL">
-				<ClipboardPanel content={webhookUrl} />
-			</Label>
-			<Label label="Example curl">
-				<CopyableCodeBlock
-					code={`curl \\
--X POST ${webhookUrl} \\
--H 'Content-Type: application/json' \\
--d '{"foo": 42}'`}
-					language={bash}
-				/>
-			</Label>
-		{:else if selected === 'http'}
-			<Label label="URL">
-				<ClipboardPanel content={httpRoute} />
-			</Label>
-			<Label label="Example curl">
-				<CopyableCodeBlock
-					code={`curl \\
--X POST ${httpRoute} \\
--H 'Content-Type: application/json' \\
--d '{"foo": 42}'`}
-					language={bash}
-				/>
-			</Label>
-		{:else if selected === 'email'}
-			<Label label="Email">
-				<ClipboardPanel content={emailAddress} />
-			</Label>
-		{/if}
-
-		<Label label="Captures">
-			<svelte:fragment slot="action">
-				{#if canHavePreprocessor}
-					<div>
-						<ToggleButtonGroup bind:selected={testKind}>
-							<ToggleButton value="main" label={isFlow ? 'Flow' : 'Main'} small />
-							<ToggleButton
-								value="preprocessor"
-								label="Preprocessor"
-								small
-								tooltip="When the runnable has a preprocessor, it receives additional information about the request"
-							/>
-						</ToggleButtonGroup>
-					</div>
-				{/if}
-			</svelte:fragment>
-			<div class="flex flex-col gap-1 mt-2">
-				{#if selectedCaptures.length === 0}
-					<div class="text-xs text-secondary">No {selected} captures yet</div>
-				{:else}
-					{#each selectedCaptures as capture}
-						{@const payload = isObject(capture.payload) ? capture.payload : {}}
-						{@const triggerExtra = isObject(capture.trigger_extra) ? capture.trigger_extra : {}}
-						{@const payloadData =
-							testKind === 'preprocessor'
-								? {
-										...payload,
-										...triggerExtra
-								  }
-								: payload}
-						{@const schema =
-							isFlow && testKind === 'main'
-								? { required: [], properties: {}, ...convert(payloadData) }
-								: {}}
-						<div class="flex flex-row gap-1">
-							<div class="text-xs border p-2 rounded-md overflow-auto grow whitespace-nowrap">
-								{JSON.stringify(payloadData)}
-							</div>
-							<Button
-								size="xs2"
-								color="light"
-								variant="border"
-								on:click={() => {
-									copyToClipboard(JSON.stringify(payloadData))
-								}}
-								iconOnly
-								startIcon={{ icon: Clipboard }}
-							/>
-
-							{#if isFlow && testKind === 'main'}
-								<CustomPopover>
-									<Button
-										size="xs"
-										color="light"
-										variant="border"
-										on:click={() => {
-											dispatch('updateSchema', { schema, redirect: true })
-										}}
-										wrapperClasses="h-full"
-									>
-										Apply schema
-									</Button>
-
-									<svelte:fragment slot="overlay">
-										{#if schema}
-											<div class="min-w-[400px]">
-												<SchemaViewer {schema} />
-											</div>
-										{/if}
-									</svelte:fragment>
-								</CustomPopover>
-							{/if}
-
-							{#if testKind === 'preprocessor' && !hasPreprocessor}
-								<CustomPopover noPadding>
-									<Button
-										size="xs"
-										color="dark"
-										disabled
-										endIcon={{
-											icon: Info
-										}}
-										wrapperClasses="h-full"
-									>
-										Apply args
-									</Button>
-									<svelte:fragment slot="overlay">
-										<div class="text-sm p-2 flex flex-col gap-1 items-start">
-											<p>You need to add a preprocessor to use preprocessor captures as args</p>
-											<Button
-												size="xs"
-												color="dark"
-												on:click={() => {
-													dispatch('addPreprocessor')
-												}}
-											>
-												Add preprocessor
-											</Button>
-										</div>
-									</svelte:fragment>
-								</CustomPopover>
-							{:else}
-								<Button
-									size="xs"
-									color="dark"
-									on:click={() => {
-										if (isFlow && testKind === 'main') {
-											dispatch('updateSchema', { schema, redirect: false })
-										}
-										dispatch('applyArgs', {
-											kind: testKind,
-											args: payloadData
-										})
-									}}
-									disabled={testKind === 'preprocessor' && !hasPreprocessor}
-								>
-									{isFlow && testKind === 'main' ? 'Apply schema and args' : 'Apply args'}
-								</Button>
-							{/if}
-
-							<Button
-								size="xs2"
-								color="red"
-								iconOnly
-								startIcon={{ icon: Trash2 }}
-								loading={deleteLoading === capture.id}
-								on:click={() => {
-									deleteCapture(capture.id)
-								}}
-							/>
-						</div>
-					{/each}
-				{/if}
-			</div>
-		</Label>
-	{/if}
-</div>

From 5d4a3c3794eb18c6f6d66f3a9e1586b7b55fb402 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 12:57:42 +0000
Subject: [PATCH 40/42] Polish route trigger editor

---
 .../triggers/RouteEditorInner.svelte          | 62 +++++++++++--------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/frontend/src/lib/components/triggers/RouteEditorInner.svelte b/frontend/src/lib/components/triggers/RouteEditorInner.svelte
index 34d5ca55f5299..5995e19c691f2 100644
--- a/frontend/src/lib/components/triggers/RouteEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/RouteEditorInner.svelte
@@ -334,34 +334,46 @@
 					{/if}
 				</Section>
 
-				<Section label="Settings">
+				<Section label="Advanced">
 					<div class="flex flex-col gap-4">
 						<div class="flex flex-row justify-between">
-							<div class="text-sm font-semibold flex flex-row items-center">Request type</div>
-							<ToggleButtonGroup class="w-auto" bind:selected={is_async} disabled={!can_write}>
-								<ToggleButton
-									label="Async"
-									value={true}
-									tooltip="The returning value is the uuid of the job assigned to execute the job."
-								/>
-								<ToggleButton
-									label="Sync"
-									value={false}
-									tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-								/>
-							</ToggleButtonGroup>
-						</div>
-						<div class="flex flex-row justify-between">
-							<div class="text-sm font-semibold flex flex-row items-center">Authentication</div>
-							<ToggleButtonGroup class="w-auto" bind:selected={requires_auth} disabled={!can_write}>
-								<ToggleButton label="None" value={false} />
-								<ToggleButton
-									label="Required"
-									value={true}
-									tooltip="Requires authentication with read access on the route"
-								/>
-							</ToggleButtonGroup>
+							<Label label="Request type" class="w-full">
+								<svelte:fragment slot="action">
+									<ToggleButtonGroup
+										class="w-auto h-full"
+										bind:selected={is_async}
+										disabled={!can_write}
+									>
+										<ToggleButton
+											label="Async"
+											value={true}
+											tooltip="The returning value is the uuid of the job assigned to execute the job."
+										/>
+										<ToggleButton
+											label="Sync"
+											value={false}
+											tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+										/>
+									</ToggleButtonGroup>
+								</svelte:fragment>
+							</Label>
 						</div>
+						<Label label="Authentication" class="w-full">
+							<svelte:fragment slot="action">
+								<ToggleButtonGroup
+									class="w-auto h-full"
+									bind:selected={requires_auth}
+									disabled={!can_write}
+								>
+									<ToggleButton label="None" value={false} />
+									<ToggleButton
+										label="Required"
+										value={true}
+										tooltip="Requires authentication with read access on the route"
+									/>
+								</ToggleButtonGroup>
+							</svelte:fragment>
+						</Label>
 					</div>
 				</Section>
 			</div>

From a861bfe197457ef0d71ab0fb40606e8226c05253 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 13:34:32 +0000
Subject: [PATCH 41/42] Fix resource saving

---
 .../lib/components/ResourceEditorDrawer.svelte | 18 +++++++++++++++---
 .../src/lib/components/ScriptBuilder.svelte    |  1 -
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/ResourceEditorDrawer.svelte b/frontend/src/lib/components/ResourceEditorDrawer.svelte
index b7c80ec840501..c5ee96daa1b22 100644
--- a/frontend/src/lib/components/ResourceEditorDrawer.svelte
+++ b/frontend/src/lib/components/ResourceEditorDrawer.svelte
@@ -10,7 +10,8 @@
 	let resource_type: string | undefined = undefined
 	let defaultValues: Record<string, any> | undefined = undefined
 
-	let resourceEditor: { editResource: () => void } | undefined = undefined
+	let resourceEditor: { editResource: () => void; createResource: () => void } | undefined =
+		undefined
 
 	let path: string | undefined = undefined
 
@@ -32,10 +33,17 @@
 		defaultValues = nDefaultValues
 		drawer.openDrawer?.()
 	}
+
+	let mode: 'edit' | 'new' = newResource ? 'new' : 'edit'
+
+	$: path ? (mode = 'edit') : (mode = 'new')
 </script>
 
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
+	<DrawerContent
+		title={mode == 'edit' ? 'Edit ' + path : 'Add a resourcee'}
+		on:close={drawer.closeDrawer}
+	>
 		{#await import('./ResourceEditor.svelte')}
 			<Loader2 class="animate-spin" />
 		{:then Module}
@@ -53,7 +61,11 @@
 			<Button
 				startIcon={{ icon: Save }}
 				on:click={() => {
-					resourceEditor?.editResource()
+					if (mode == 'edit') {
+						resourceEditor?.editResource()
+					} else {
+						resourceEditor?.createResource()
+					}
 					drawer.closeDrawer()
 				}}
 				disabled={!canSave}
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 486bc277ab067..7b21746f2015d 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1262,7 +1262,6 @@
 								on:applyArgs={applyArgs}
 								on:addPreprocessor={addPreprocessor}
 								on:refreshCaptures={() => {
-									console.log('dbg refreshCaptures')
 									shouldRefreshCaptures = true
 								}}
 								{initialPath}

From 2a44cf377855e0df5224266c9e05e5899d48f158 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Wed, 11 Dec 2024 13:43:24 +0000
Subject: [PATCH 42/42] Remove excessive padding

---
 .../components/triggers/TriggersEditor.svelte | 242 +++++++++---------
 1 file changed, 120 insertions(+), 122 deletions(-)

diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index e7dbbabb55233..bde0e1a314afe 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -27,133 +27,131 @@
 </script>
 
 <FlowCard {noEditor} title="Triggers">
-	<div class="pt-4">
-		{#if !$simplifiedPoll}
-			<Tabs bind:selected={$selectedTrigger}>
-				<Tab value="webhooks" selectedClass="text-primary font-semibold">Webhooks</Tab>
-				<Tab value="schedules" selectedClass="text-primary text-sm font-semibold">Schedules</Tab>
-				<Tab value="routes" selectedClass="text-primary text-sm font-semibold">Routes</Tab>
-				<Tab value="websockets" selectedClass="text-primary text-sm font-semibold">Websockets</Tab>
-				<Tab value="kafka" selectedClass="text-primary text-sm font-semibold">Kafka</Tab>
-				<Tab value="emails" selectedClass="text-primary text-sm font-semibold">Email</Tab>
-				{#if isFlow}
-					<Tab value="scheduledPoll" selectedClass="text-primary text-sm font-semibold"
-						>Scheduled Poll</Tab
-					>
-				{/if}
+	{#if !$simplifiedPoll}
+		<Tabs bind:selected={$selectedTrigger}>
+			<Tab value="webhooks" selectedClass="text-primary font-semibold">Webhooks</Tab>
+			<Tab value="schedules" selectedClass="text-primary text-sm font-semibold">Schedules</Tab>
+			<Tab value="routes" selectedClass="text-primary text-sm font-semibold">Routes</Tab>
+			<Tab value="websockets" selectedClass="text-primary text-sm font-semibold">Websockets</Tab>
+			<Tab value="kafka" selectedClass="text-primary text-sm font-semibold">Kafka</Tab>
+			<Tab value="emails" selectedClass="text-primary text-sm font-semibold">Email</Tab>
+			{#if isFlow}
+				<Tab value="scheduledPoll" selectedClass="text-primary text-sm font-semibold"
+					>Scheduled Poll</Tab
+				>
+			{/if}
 
-				<svelte:fragment slot="content">
-					{#if $selectedTrigger === 'webhooks'}
-						<div class="p-4">
-							<WebhooksPanel
-								on:applyArgs
-								on:addPreprocessor
-								on:refreshCaptures
-								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
-								path={currentPath}
-								{isFlow}
-								args={{}}
-								token=""
-								{newItem}
-								isEditor={true}
-								{canHavePreprocessor}
-								{hasPreprocessor}
-							/>
-						</div>
-					{/if}
+			<svelte:fragment slot="content">
+				{#if $selectedTrigger === 'webhooks'}
+					<div class="p-4">
+						<WebhooksPanel
+							on:applyArgs
+							on:addPreprocessor
+							on:refreshCaptures
+							scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
+							path={currentPath}
+							{isFlow}
+							args={{}}
+							token=""
+							{newItem}
+							isEditor={true}
+							{canHavePreprocessor}
+							{hasPreprocessor}
+						/>
+					</div>
+				{/if}
 
-					{#if $selectedTrigger === 'emails'}
-						<div class="p-4">
-							<EmailTriggerPanel
-								on:applyArgs
-								on:addPreprocessor
-								on:refreshCaptures
-								token=""
-								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
-								path={currentPath}
-								{isFlow}
-								isEditor={true}
-								{canHavePreprocessor}
-								{hasPreprocessor}
-							/>
-						</div>
-					{/if}
+				{#if $selectedTrigger === 'emails'}
+					<div class="p-4">
+						<EmailTriggerPanel
+							on:applyArgs
+							on:addPreprocessor
+							on:refreshCaptures
+							token=""
+							scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
+							path={currentPath}
+							{isFlow}
+							isEditor={true}
+							{canHavePreprocessor}
+							{hasPreprocessor}
+						/>
+					</div>
+				{/if}
 
-					{#if $selectedTrigger === 'routes'}
-						<div class="p-4">
-							<RoutesPanel
-								on:applyArgs
-								on:refreshCaptures
-								on:addPreprocessor
-								{newItem}
-								path={currentPath}
-								{isFlow}
-								isEditor={true}
-							/>
-						</div>
-					{/if}
+				{#if $selectedTrigger === 'routes'}
+					<div class="p-4">
+						<RoutesPanel
+							on:applyArgs
+							on:refreshCaptures
+							on:addPreprocessor
+							{newItem}
+							path={currentPath}
+							{isFlow}
+							isEditor={true}
+						/>
+					</div>
+				{/if}
 
-					{#if $selectedTrigger === 'websockets'}
-						<div class="p-4">
-							<WebsocketTriggersPanel
-								on:applyArgs
-								on:addPreprocessor
-								on:refreshCaptures
-								{newItem}
-								path={currentPath}
-								{isFlow}
-								isEditor={true}
-								{canHavePreprocessor}
-								{hasPreprocessor}
-							/>
-						</div>
-					{/if}
+				{#if $selectedTrigger === 'websockets'}
+					<div class="p-4">
+						<WebsocketTriggersPanel
+							on:applyArgs
+							on:addPreprocessor
+							on:refreshCaptures
+							{newItem}
+							path={currentPath}
+							{isFlow}
+							isEditor={true}
+							{canHavePreprocessor}
+							{hasPreprocessor}
+						/>
+					</div>
+				{/if}
 
-					{#if $selectedTrigger === 'kafka'}
-						<div class="p-4">
-							<KafkaTriggersPanel
-								on:applyArgs
-								on:addPreprocessor
-								on:refreshCaptures
-								{newItem}
-								path={currentPath}
-								{isFlow}
-								isEditor={true}
-								{canHavePreprocessor}
-								{hasPreprocessor}
-							/>
-						</div>
-					{/if}
+				{#if $selectedTrigger === 'kafka'}
+					<div class="p-4">
+						<KafkaTriggersPanel
+							on:applyArgs
+							on:addPreprocessor
+							on:refreshCaptures
+							{newItem}
+							path={currentPath}
+							{isFlow}
+							isEditor={true}
+							{canHavePreprocessor}
+							{hasPreprocessor}
+						/>
+					</div>
+				{/if}
 
-					{#if $selectedTrigger === 'schedules'}
-						<div class="p-4">
-							<RunPageSchedules
-								{schema}
-								{isFlow}
-								path={initialPath}
-								{newItem}
-								can_write={canWrite(currentPath, {}, $userStore)}
-							/>
-						</div>
-					{/if}
+				{#if $selectedTrigger === 'schedules'}
+					<div class="p-4">
+						<RunPageSchedules
+							{schema}
+							{isFlow}
+							path={initialPath}
+							{newItem}
+							can_write={canWrite(currentPath, {}, $userStore)}
+						/>
+					</div>
+				{/if}
 
-					{#if $selectedTrigger === 'scheduledPoll'}
-						<div class="p-4">
-							<ScheduledPollPanel />
-						</div>
-					{/if}
-				</svelte:fragment>
-			</Tabs>
-		{:else}
-			<div class="px-4 pb-2">
-				<RunPageSchedules
-					{schema}
-					{isFlow}
-					path={initialPath}
-					{newItem}
-					can_write={canWrite(currentPath, {}, $userStore)}
-				/>
-			</div>
-		{/if}
-	</div>
+				{#if $selectedTrigger === 'scheduledPoll'}
+					<div class="p-4">
+						<ScheduledPollPanel />
+					</div>
+				{/if}
+			</svelte:fragment>
+		</Tabs>
+	{:else}
+		<div class="px-4 pb-2">
+			<RunPageSchedules
+				{schema}
+				{isFlow}
+				path={initialPath}
+				{newItem}
+				can_write={canWrite(currentPath, {}, $userStore)}
+			/>
+		</div>
+	{/if}
 </FlowCard>