windmill-components 1.558.3 → 1.596.0

package/package/components/sqlTypeService.js

@@ -0,0 +1,146 @@
+/**
+ * Service for communicating SQL query type information to the TypeScript worker
+ *
+ * This module handles the communication between the Monaco editor and the
+ * custom TypeScript worker that injects SQL type annotations.
+ */
+import { languages, Uri, editor, MarkerSeverity } from 'monaco-editor';
+/**
+ * Cached promise for the TypeScript worker client
+ * We lazily initialize this when first needed
+ */
+let _workerClient;
+async function getWorkerClient() {
+    try {
+        // Get or create the worker client
+        if (!_workerClient) {
+            _workerClient = (await languages.typescript.getTypeScriptWorker());
+        }
+        return _workerClient;
+    }
+    catch (error) {
+        console.error('[SqlTypeService] Failed to get TypeScript worker client:', error);
+        _workerClient = undefined; // Reset on error
+        throw error;
+    }
+}
+export async function waitForWorkerInitialization(fileUri) {
+    const WORKER_INIT_TIMEOUT = 10000;
+    const MAX_RETRIES = 10;
+    const RETRY_DELAY = 300;
+    if (!fileUri.endsWith('.ts'))
+        fileUri += '.ts';
+    const uri = Uri.parse(fileUri);
+    const startTime = Date.now();
+    for (let retries = 0; retries < MAX_RETRIES; retries++) {
+        try {
+            let workerClient = await getWorkerClient();
+            await workerClient(uri);
+            return true;
+        }
+        catch (error) {
+            if (retries >= 5) {
+                console.warn(`[SqlTypeService] Worker not ready yet for ${uri.toString()}, retrying... (${retries + 1}/${MAX_RETRIES})`);
+            }
+            if (Date.now() - startTime > WORKER_INIT_TIMEOUT) {
+                throw new Error(`[SqlTypeService] Worker initialization timeout for ${uri.toString()}. Custom method not found after ${WORKER_INIT_TIMEOUT}ms`);
+            }
+            await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
+        }
+    }
+    throw new Error(`[SqlTypeService] Worker initialization failed for ${uri.toString()} after ${MAX_RETRIES} retries.`);
+}
+/**
+ * Update SQL query type information in the TypeScript worker
+ *
+ * This function sends the parsed SQL query details to the custom TypeScript worker,
+ * which will then inject type parameters into the code that TypeScript analyzes.
+ *
+ * @param fileUri - Monaco URI or string path of the file being edited
+ * @param queries - Array of SQL query details from the WASM parser
+ * @returns Promise that resolves when the update is complete
+ */
+export async function updateSqlQueriesInWorker(fileUri, queries) {
+    try {
+        if (!fileUri.endsWith('.ts'))
+            fileUri += '.ts';
+        const uri = Uri.parse(fileUri);
+        const uriString = uri.toString();
+        const workerClient = await getWorkerClient();
+        const worker = await workerClient(uri);
+        if (!worker) {
+            console.warn(`[SqlTypeService] Couldn't load worker for URI: ${uriString}`);
+            return;
+        }
+        const model = editor.getModel(uri);
+        if (!model) {
+            console.warn(`[SqlTypeService] No Monaco model found for URI: ${uriString}`);
+            return;
+        }
+        // Call our custom updateSqlQueries method if it exists
+        // This method is added by our sqlTypePlugin.worker.js
+        if (typeof worker.updateSqlQueries === 'function') {
+            await worker.updateSqlQueries(uriString, queries);
+            revalidateModel(model);
+        }
+        else {
+            console.warn('[SqlTypeService] Custom worker method updateSqlQueries not found. Is the custom worker loaded?');
+        }
+    }
+    catch (error) {
+        console.error('[SqlTypeService] Failed to update SQL queries in worker:', error);
+        // Don't throw - we want to fail gracefully if the worker isn't available
+    }
+}
+// https://stackoverflow.com/questions/56050816/is-there-a-way-to-trigger-validation-manually-in-monaco-editor
+// Trick to force re-validation of the model to show updated markers
+async function revalidateModel(model) {
+    if (!model || model.isDisposed())
+        return;
+    const getWorker = await languages.typescript.getTypeScriptWorker();
+    const worker = await getWorker(model.uri);
+    const diagnostics = (await Promise.all([
+        worker.getSyntacticDiagnostics(model.uri.toString()),
+        worker.getSemanticDiagnostics(model.uri.toString())
+    ])).reduce((a, it) => a.concat(it));
+    const markers = diagnostics.map((d) => {
+        const start = model.getPositionAt(d.start ?? 1);
+        const end = model.getPositionAt((d.start ?? 1) + (d.length ?? 0));
+        return {
+            severity: MarkerSeverity.Error,
+            startLineNumber: start.lineNumber,
+            startColumn: start.column,
+            endLineNumber: end.lineNumber,
+            endColumn: end.column,
+            message: flattenDiagnosticMessageText(d.messageText, '\n')
+        };
+    });
+    const owner = model.getLanguageId();
+    editor.setModelMarkers(model, owner, markers);
+}
+function flattenDiagnosticMessageText(messageText, newLine) {
+    if (typeof messageText === 'string') {
+        return messageText;
+    }
+    else if (messageText === undefined) {
+        return '';
+    }
+    else {
+        let result = '';
+        let indent = 0;
+        let stack = [messageText];
+        while (stack.length > 0) {
+            let messageText = stack.shift();
+            if (indent) {
+                result += newLine;
+                for (let i = 0; i < indent; i++) {
+                    result += '  ';
+                }
+            }
+            result += messageText.messageText;
+            indent++;
+            stack.push(...(messageText.next || []));
+        }
+        return result;
+    }
+}

package/package/components/stepHistoryLoader.svelte.js

@@ -75,7 +75,7 @@ export class StepHistoryLoader {
                 const scriptPath = `path` in module.value
                     ? module.value.path
                     : (initialPath === '' ? path : initialPath) + '/' + module.id;
-                const previousJobId = await JobService.listJobs({
+                const previousJobId = await JobService.listCompletedJobs({
                     workspace: workspaceId,
                     scriptPathExact: scriptPath,
                     jobKinds: ['preview', 'script', 'flowpreview', 'flow', 'flowscript'].join(','),

package/package/components/table/Cell.svelte

@@ -13,7 +13,9 @@ const { size } = getContext('datatable');
 		if (shouldStopPropagation) e.stopPropagation()
 	}}
 	class={twMerge(
-		'text-left text-xs text-primary font-normal',
+		'text-left font-normal',
+		// Typography based on brand guidelines
+		head ? 'text-2xs text-primary' : 'text-xs text-primary',
 		wrap ? 'break-words' : 'whitespace-nowrap',
 		first ? 'sm:pl-6' : '',
 		last ? 'sm:pr-6' : '',
@@ -22,8 +24,7 @@ const { size } = getContext('datatable');
 		last && size === 'xs' ? 'sm:pr-3' : '',
 
 		numeric ? 'text-right' : '',
-		head ? 'font-semibold ' : '',
-		sticky ? `!p-0 sticky ${first ? 'left-0' : 'right-0'}` : 'px-2 py-3.5',
+		sticky ? `!p-0 sticky ${first ? 'left-0' : 'right-0'}` : 'px-2 py-2',
 		size === 'sm' ? 'px-1.5 py-2.5' : '',
 		size === 'lg' ? 'px-3 py-4' : '',
 		size === 'xs' ? 'px-1 py-1.5' : '',

package/package/components/table/DataTable.svelte

@@ -136,7 +136,7 @@ $effect(() => {
 		{/if}
 		{#if (loading || loadingMore) && !neverShowLoader}
 			<div
-				class="text-tertiary bg-surface border-t flex flex-row justify-center py-2 items-center gap-2"
+				class="text-primary bg-surface border-t flex flex-row justify-center py-2 items-center gap-2"
 			>
 				<Loader2 class="animate-spin" size={14} />
 				{#if loadingMore}

package/package/components/table/DownloadCsv.svelte

@@ -6,8 +6,8 @@ export let customText = undefined;
 </script>
 
 <Button
-	size="xs"
-	color="light"
+	unifiedSize="md"
+	variant="subtle"
 	startIcon={{ icon: Download }}
 	on:click={() => {
 		try {

package/package/components/text_input/TextInput.svelte

@@ -1,30 +1,49 @@
 <script module lang="ts">export function inputBorderClass({ error, forceFocus } = {}) {
-    return twMerge('transition-colors border', forceFocus
-        ? '!border-nord-900 dark:!border-nord-900'
-        : '!border-nord-400 dark:!border-nord-300 hover:!border-nord-900/50 hover:dark:!border-nord-900/50 focus:!border-nord-900 dark:focus:!border-nord-900', error
-        ? '!border-red-300 focus:!border-red-400 hover:!border-red-500 dark:!border-red-400/40 dark:hover:!border-red-600/40'
+    return twMerge('transition-colors border border-border-light', forceFocus
+        ? '!border-border-selected'
+        : '!border-border-light hover:!border-border-selected/50 focus:!border-border-selected', error
+        ? '!border-red-300 dark:!border-red-400/45 focus:!border-red-400 hover:!border-red-500 dark:hover:!border-red-400/75'
         : '');
 }
-export const inputBaseClass = 'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint';
+export const inputBaseClass = 'rounded-md focus:ring-0 no-default-style text-xs text-primary font-normal !bg-surface-input disabled:!bg-surface-disabled disabled:!border-transparent disabled:!text-disabled disabled:cursor-not-allowed shadow-none !placeholder-hint';
+import autosize from '../../autosize';
+import { ButtonType } from '../common/button/model';
+export const inputSizeClasses = {
+    xs: twMerge(ButtonType.UnifiedSizingClasses.xs, ButtonType.UnifiedMinHeightClasses.xs, 'px-1 !py-0.5'),
+    sm: twMerge(ButtonType.UnifiedSizingClasses.sm, ButtonType.UnifiedMinHeightClasses.sm, 'px-2 !py-0.5'),
+    md: twMerge(ButtonType.UnifiedSizingClasses.md, ButtonType.UnifiedMinHeightClasses.md, 'px-2'),
+    lg: twMerge(ButtonType.UnifiedSizingClasses.lg, ButtonType.UnifiedMinHeightClasses.lg, 'px-2')
+};
 </script>
 
-<script lang="ts">import { twMerge } from 'tailwind-merge';
+<script lang="ts" generics="UnderlyingInputElT extends 'input' | 'textarea' = 'input'">import { twMerge } from 'tailwind-merge';
 export function focus() {
     inputEl?.focus();
 }
 let inputEl = $state();
-let { inputProps, value = $bindable(), class: className = '', error } = $props();
+let { inputProps: _inputProps, value = $bindable(), class: className = '', error, size = 'md', unifiedHeight = true, underlyingInputEl: _underlyingInputEl } = $props();
+let underlyingInputEl = $derived(_underlyingInputEl ?? 'input');
+let inputProps = $derived(_inputProps);
+let fullClassName = $derived(twMerge(inputBaseClass, inputSizeClasses[size], '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', inputBorderClass({ error: !!error }), unifiedHeight ? ButtonType.UnifiedHeightClasses[size] : '', 'w-full', className));
 </script>
 
-<input
-	{...inputProps}
-	class={twMerge(
-		inputBaseClass,
-		'w-full',
-		'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-		inputBorderClass({ error: !!error }),
-		className
-	)}
-	bind:this={inputEl}
-	bind:value
-/>
+{#if underlyingInputEl === 'textarea'}
+	<!-- We hardcode the py value because since textareas can be multiline, we can't rely on
+ 	  	 the fact that it auto-centers -->
+	<textarea
+		class={twMerge('py-[0.45rem]', fullClassName)}
+		{...inputProps}
+		onpointerdown={(e) => e.stopImmediatePropagation()}
+		bind:this={inputEl}
+		bind:value
+		use:autosize
+	></textarea>
+{:else if underlyingInputEl === 'input'}
+	<input
+		{...inputProps}
+		class={fullClassName}
+		onpointerdown={(e) => e.stopImmediatePropagation()}
+		bind:this={inputEl}
+		bind:value
+	/>
+{/if}

package/package/components/text_input/TextInput.svelte.d.ts

@@ -2,16 +2,49 @@ export declare function inputBorderClass({ error, forceFocus }?: {
     error?: boolean;
     forceFocus?: boolean;
 }): string;
-export declare const inputBaseClass = "rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint";
-import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = {
-    inputProps?: HTMLInputAttributes;
-    value?: string;
+export declare const inputBaseClass = "rounded-md focus:ring-0 no-default-style text-xs text-primary font-normal !bg-surface-input disabled:!bg-surface-disabled disabled:!border-transparent disabled:!text-disabled disabled:cursor-not-allowed shadow-none !placeholder-hint";
+import { ButtonType } from '../common/button/model';
+export declare const inputSizeClasses: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+};
+import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/elements';
+type Props<UnderlyingInputElT extends 'input' | 'textarea'> = {
+    inputProps?: UnderlyingInputElT extends 'input' ? HTMLInputAttributes : HTMLTextareaAttributes;
+    value?: string | number;
     class?: string;
     error?: string | boolean;
+    size?: ButtonType.UnifiedSize;
+    unifiedHeight?: boolean;
+    underlyingInputEl?: UnderlyingInputElT;
+};
+declare function $$render<UnderlyingInputElT extends 'input' | 'textarea' = 'input'>(): {
+    props: Props<UnderlyingInputElT>;
+    exports: {
+        focus: () => void;
+    };
+    bindings: "value";
+    slots: {};
+    events: {};
 };
-declare const TextInput: import("svelte").Component<Props, {
-    focus: () => void;
-}, "value">;
-type TextInput = ReturnType<typeof TextInput>;
+declare class __sveltets_Render<UnderlyingInputElT extends 'input' | 'textarea' = 'input'> {
+    props(): ReturnType<typeof $$render<UnderlyingInputElT>>['props'];
+    events(): ReturnType<typeof $$render<UnderlyingInputElT>>['events'];
+    slots(): ReturnType<typeof $$render<UnderlyingInputElT>>['slots'];
+    bindings(): "value";
+    exports(): {
+        focus: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <UnderlyingInputElT extends 'input' | 'textarea' = 'input'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<UnderlyingInputElT>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<UnderlyingInputElT>['props']>, ReturnType<__sveltets_Render<UnderlyingInputElT>['events']>, ReturnType<__sveltets_Render<UnderlyingInputElT>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<UnderlyingInputElT>['bindings']>;
+    } & ReturnType<__sveltets_Render<UnderlyingInputElT>['exports']>;
+    <UnderlyingInputElT extends 'input' | 'textarea' = 'input'>(internal: unknown, props: ReturnType<__sveltets_Render<UnderlyingInputElT>['props']> & {}): ReturnType<__sveltets_Render<UnderlyingInputElT>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TextInput: $$IsomorphicComponent;
+type TextInput<UnderlyingInputElT extends 'input' | 'textarea' = 'input'> = InstanceType<typeof TextInput<UnderlyingInputElT>>;
 export default TextInput;

package/package/components/triggers/AddTriggersButton.svelte

@@ -3,7 +3,7 @@ import DropdownV2 from '../DropdownV2.svelte';
 import { SchedulePollIcon } from '../icons';
 import { isCloudHosted } from '../../cloud';
 import { CloudOff } from 'lucide-svelte';
-let { setDropdownWidthToButtonWidth = false, children, class: className, placement = 'bottom', isEditor = false, onAddDraftTrigger, onAddScheduledPoll, onClose } = $props();
+let { setDropdownWidthToButtonWidth = false, children, class: className, placement = 'bottom-start', isEditor = false, onAddDraftTrigger, onAddScheduledPoll, onClose } = $props();
 let dropdown;
 const cloudHosted = isCloudHosted();
 // Dropdown items for adding new triggers
@@ -59,8 +59,7 @@ const addTriggerItems = [
     {
         displayName: 'Email',
         action: () => onAddDraftTrigger?.('email'),
-        icon: triggerIconMap.email,
-        extra: cloudHosted ? extra : undefined
+        icon: triggerIconMap.email
     },
     {
         displayName: 'Scheduled Poll',

package/package/components/triggers/CaptureButton.svelte

@@ -81,9 +81,8 @@ let items = $derived([
 	{#snippet buttonReplacement()}
 		{#if small}
 			<Button
-				color="light"
 				size="xs"
-				variant="border"
+				variant="default"
 				wrapperClasses="h-full"
 				nonCaptureEvent
 				title="Test trigger"
@@ -95,7 +94,7 @@ let items = $derived([
 			</Button>
 		{:else}
 			<Button
-				color="dark"
+				variant="accent-secondary"
 				btnClasses="!rounded-l-none"
 				wrapperClasses="h-full"
 				nonCaptureEvent

package/package/components/triggers/CaptureSection.svelte

@@ -5,7 +5,7 @@
 import AnimatedButton from '../common/button/AnimatedButton.svelte';
 import PulseButton from '../common/button/PulseButton.svelte';
 import Button from '../common/button/Button.svelte';
-import { CircleStop, History, Play, Loader2 } from 'lucide-svelte';
+import { CircleStop, History, Play, Loader2, ExternalLink } from 'lucide-svelte';
 import ConnectionIndicator, {} from '../common/alert/ConnectionIndicator.svelte';
 import CaptureTable from './CaptureTable.svelte';
 import { createEventDispatcher, onDestroy, getContext, onMount, untrack } from 'svelte';
@@ -72,6 +72,7 @@ let capturePollingInterval = undefined;
 let lastCaptureId = undefined;
 let displayResult = $state(undefined);
 let toolbarLocation = $state(undefined);
+let showRawPayload = $state(false);
 function selectCapture(capture) {
     selectedCapture = capture;
     if (capture.main_args === 'WINDMILL_TOO_BIG' ||
@@ -164,13 +165,15 @@ async function loadBigPayload(capture) {
         isLoadingBigPayload = false;
     }
 }
-function getCapturePayload(capture) {
+function getCapturePayload(capture, showRawPayload) {
+    if (!capture)
+        return {};
     let payloadData = {};
     const preprocessor_args = isObject(capture.preprocessor_args) ? capture.preprocessor_args : {};
     if ('wm_trigger' in preprocessor_args) {
         // v1
         payloadData =
-            testKind === 'preprocessor'
+            testKind === 'preprocessor' || showRawPayload
                 ? {
                     ...(typeof capture.main_args === 'object' ? capture.main_args : {}),
                     ...preprocessor_args
@@ -179,10 +182,17 @@ function getCapturePayload(capture) {
     }
     else {
         // v2
-        payloadData = testKind === 'preprocessor' ? capture.preprocessor_args : capture.main_args;
+        payloadData =
+            testKind === 'preprocessor' || showRawPayload
+                ? capture.preprocessor_args
+                : capture.main_args;
     }
     return payloadData;
 }
+function toggleRawPayload() {
+    showRawPayload = !showRawPayload;
+}
+const payloadData = $derived(getCapturePayload(selectedCapture, showRawPayload));
 // Start or stop capture listening based on active state
 $effect(() => {
     if (captureInfo.active) {
@@ -211,21 +221,18 @@ onMount(() => {
 			<div class="flex flex-col gap-1 mb-4 w-full">
 				<div class="flex justify-center w-full">
 					<div class="relative h-fit">
-						<AnimatedButton
-							animate={captureInfo.active}
-							wrapperClasses={captureInfo.active ? 'm-[-2px]' : ''}
-							baseRadius="7px"
-						>
+						<AnimatedButton animate={captureInfo.active} baseRadius="6px">
 							<Button
 								size="xs"
 								on:click={() => dispatch('captureToggle', {})}
 								{disabled}
-								color={captureInfo.active ? 'light' : 'dark'}
-								btnClasses={captureInfo.active ? 'text-blue-500' : ''}
+								variant={captureInfo.active ? 'default' : 'accent-secondary'}
+								selected={captureInfo.active}
 								startIcon={captureInfo.active
 									? { icon: CircleStop }
 									: { icon: CaptureIcon, props: { variant: 'redDot' } }}
 								loading={captureLoading}
+								btnClasses={captureInfo.active ? '!bg-surface' : ''}
 							>
 								{#if captureInfo.active}
 									<p class="w-24" transition:fade={{ duration: 300 }}>Stop capturing</p>
@@ -322,16 +329,16 @@ onMount(() => {
 				{#if selectedCapture}
 					{@const SvelteComponent = triggerIconMap[captureType]}
 					<div
-						class={'min-w-16 text-secondary flex flex-row w-fit items-center gap-2 rounded-md bg-surface-secondary p-1 px-2 h-[27px]'}
+						class="min-w-16 text-primary flex flex-row w-fit items-center gap-2 rounded-md bg-surface-secondary p-1 px-2 h-[27px]"
 					>
 						<SvelteComponent size={12} />
-						<span class="text-xs text-secondary truncate">
+						<span class="text-xs truncate">
 							Capture {formatDateShort(selectedCapture?.created_at)}
 						</span>
 					</div>
 				{/if}
 
-				{#if selectedCapture}
+				{#if selectedCapture && !showRawPayload}
 					{@const label = isFlow && testKind === 'main' ? 'Test flow with args' : 'Apply args'}
 					{@const title =
 						isFlow && testKind === 'main'
@@ -341,7 +348,7 @@ onMount(() => {
 								: 'Apply args to inputs'}
 					<Button
 						size="xs2"
-						color="dark"
+						variant="accent"
 						btnClasses="h-[27px]"
 						dropdownItems={[
 							{
@@ -397,26 +404,73 @@ onMount(() => {
 				/>
 			{/if}
 		</div>
-		<div class="grow min-h-0 rounded-md w-full pl-2 py-1 pb-2 overflow-auto">
-			{#if isLoadingBigPayload}
-				<Loader2 class="animate-spin" />
-			{:else if selectedCapture?.main_args}
-				<div class="bg-surface rounded-md text-sm" class:animate-highlight={newCaptureReceived}>
-					<DisplayResult
-						bind:this={displayResult}
-						workspaceId={undefined}
-						jobId={undefined}
-						result={getCapturePayload(selectedCapture)}
-						externalToolbarAvailable
-						on:toolbar-location-changed={({ detail }) => {
-							toolbarLocation = detail
-						}}
-					/>
+		<div class="grow min-h-0 w-full pl-2 py-1 pb-2 flex flex-col">
+			<div class="flex-1 min-h-0 overflow-auto">
+				{#if isLoadingBigPayload}
+					<Loader2 class="animate-spin" />
+				{:else if selectedCapture?.main_args}
+					<div class="bg-surface rounded-md text-sm" class:animate-highlight={newCaptureReceived}>
+						{#if showRawPayload}
+							<Alert type="info" title="Raw payload displayed" size="xs" class="mt-2 mb-2">
+								<div class="flex flex-col gap-2">
+									<div>
+										Add a preprocessor to use the raw payload data in the flow.
+										<a
+											href="https://www.windmill.dev/docs/core_concepts/preprocessors"
+											target="_blank"
+											rel="noopener noreferrer"
+											class="underline"
+										>
+											Learn more about preprocessors
+											<ExternalLink size={12} class="inline-block" />
+										</a>
+									</div>
+									<div class="flex justify-end">
+										<Button
+											size="xs"
+											variant="accent"
+											wrapperClasses="w-fit"
+											onclick={() => {
+												if (selectedCapture) {
+													dispatch('addPreprocessor', {
+														args: $state.snapshot(payloadData)
+													})
+												} else {
+													dispatch('addPreprocessor')
+												}
+											}}
+										>
+											Add preprocessor
+										</Button>
+									</div>
+								</div>
+							</Alert>
+						{/if}
+						<DisplayResult
+							bind:this={displayResult}
+							workspaceId={undefined}
+							jobId={undefined}
+							result={payloadData}
+							externalToolbarAvailable
+							on:toolbar-location-changed={({ detail }) => {
+								toolbarLocation = detail
+							}}
+						/>
+					</div>
+				{:else}
+					<div class="text-center text-primary p-4 bg-surface rounded-md"
+						>No captures to show yet.</div
+					>
+				{/if}
+			</div>
+
+			{#if !hasPreprocessor && !isLoadingBigPayload && selectedCapture?.main_args}
+				<div class="mt-2 text-2xs text-secondary flex-shrink-0 text-right px-2">
+					{showRawPayload ? '' : 'Need more data about the trigger event?'}
+					<button onclick={toggleRawPayload} class="text-accent cursor-pointer">
+						{showRawPayload ? 'Show processed payload' : 'Show raw payload'}
+					</button>
 				</div>
-			{:else}
-				<div class="text-center text-tertiary p-4 bg-surface rounded-md"
-					>No captures to show yet.</div
-				>
 			{/if}
 		</div>
 	</Pane>

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

@@ -41,7 +41,9 @@ declare const CaptureSection: $$__sveltets_2_IsomorphicComponent<Props, {
         redirect: boolean;
         args?: boolean;
     }>;
-    addPreprocessor: CustomEvent<null>;
+    addPreprocessor: CustomEvent<{
+        args: Record<string, any>;
+    } | null>;
     testWithArgs: CustomEvent<Record<string, any>>;
     applyArgs: CustomEvent<{
         kind: "main" | "preprocessor";

package/package/components/triggers/CaptureTable.svelte

@@ -263,7 +263,7 @@ $effect(() => {
 									<CustomPopover noPadding>
 										<Button
 											size="xs2"
-											color="dark"
+											variant="accent"
 											disabled
 											endIcon={{
 												icon: Info
@@ -277,7 +277,7 @@ $effect(() => {
 												<p> You need to add a preprocessor to use preprocessor captures as args </p>
 												<Button
 													size="xs2"
-													color="dark"
+													variant="accent"
 													on:click={() => {
 														dispatch('addPreprocessor')
 													}}
@@ -346,7 +346,7 @@ $effect(() => {
 				</SchemaPickerRow>
 			{/snippet}
 			{#snippet empty()}
-				<div class="text-center text-xs text-tertiary py-2">No captures yet</div>
+				<div class="text-center text-xs text-primary py-2">No captures yet</div>
 			{/snippet}
 		</InfiniteList>
 	</div>

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

@@ -33,7 +33,9 @@ declare const CaptureTable: $$__sveltets_2_IsomorphicComponent<Props, {
         kind: "main" | "preprocessor";
         args: Record<string, any> | undefined;
     }>;
-    addPreprocessor: CustomEvent<null>;
+    addPreprocessor: CustomEvent<{
+        args: Record<string, any>;
+    } | undefined>;
     updateSchema: CustomEvent<{
         payloadData: any;
         redirect: boolean;

package/package/components/triggers/DeleteTriggerButton.svelte

@@ -23,22 +23,19 @@ let confirmationModalOpen = $state(false);
 	{#if trigger !== undefined}
 		{@const IconComponent = triggerIconMap[trigger.type]}
 		<div class="flex flex-row gap-2 items-center grow min-w-0 pr-2 rounded-md my-4">
-			<IconComponent
-				size={16}
-				class={twMerge(trigger.isDraft ? 'text-frost-400' : '', 'shrink-0')}
-			/>
+			<IconComponent size={16} class={twMerge(trigger.isDraft ? 'text-hint' : '', 'shrink-0')} />
 			<TriggerLabel {trigger} />
 		</div>
 	{/if}
 </ConfirmationModal>
 
 <Button
-	size="xs"
+	unifiedSize={small ? 'xs' : 'sm'}
+	variant="subtle"
+	destructive
 	startIcon={{ icon: Trash }}
 	iconOnly
-	color={'light'}
 	on:click={() => {
 		confirmationModalOpen = true
 	}}
-	btnClasses={twMerge(small ? 'px-1 py-1' : '', 'bg-transparent hover:bg-red-500 hover:text-white')}
 />

package/package/components/triggers/TestTriggerConnection.svelte

@@ -84,8 +84,7 @@ export async function testTriggerConnection() {
 		<Button
 			spacingSize="sm"
 			size="xs"
-			color="light"
-			variant="border"
+			variant="default"
 			on:click={testTriggerConnection}
 			loading={testLoading}
 			clickableWhileLoading