windmill-components 1.537.1 → 1.542.5

package/package/components/flows/content/FlowModuleTimeout.svelte

@@ -1,8 +1,27 @@
-<script lang="ts">import Section from '../../Section.svelte';
+<script lang="ts">import InputTransformForm from '../../InputTransformForm.svelte';
+import Section from '../../Section.svelte';
 import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
+import Label from '../../Label.svelte';
 import { Alert, SecondsInput } from '../../common';
-let { flowModule = $bindable() } = $props();
+import { emptySchema } from '../../../utils';
+import { getContext } from 'svelte';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import { getStepPropPicker } from '../previousResults';
+let { flowModule = $bindable(), previousModuleId } = $props();
+const { flowStore, flowStateStore, previewArgs } = getContext('FlowEditorContext');
+let schema = $state(emptySchema());
+schema.properties['timeout'] = {
+    type: 'number'
+};
+if (typeof flowModule.timeout === 'number') {
+    flowModule.timeout = {
+        type: 'static',
+        value: flowModule.timeout
+    };
+}
+let stepPropPicker = $derived(getStepPropPicker(flowStateStore.val, undefined, undefined, flowModule.id, flowStore.val, previewArgs.val, false));
+let editor = $state(undefined);
 let istimeoutEnabled = $derived(Boolean(flowModule.timeout));
 </script>
 
@@ -20,24 +39,45 @@ let istimeoutEnabled = $derived(Boolean(flowModule.timeout));
 			if (istimeoutEnabled && flowModule.timeout != undefined) {
 				flowModule.timeout = undefined
 			} else {
-				flowModule.timeout = 300
+				flowModule.timeout = {
+					type: 'static',
+					value: 300
+				}
 			}
 		}}
 		options={{
 			right: 'Add a custom timeout for this step'
 		}}
 	/>
-	<div class="mb-4">
-		<span class="text-xs font-bold">Timeout duration</span>
-
-		{#if flowModule.timeout}
-			<SecondsInput bind:seconds={flowModule.timeout} />
+	<Label label="Timeout duration">
+		{#if flowModule.timeout && schema.properties['timeout']}
+			<div class="border">
+				<PropPickerWrapper
+					flow_input={stepPropPicker.pickableProperties.flow_input}
+					notSelectable
+					pickableProperties={stepPropPicker.pickableProperties}
+					on:select={({ detail }) => {
+						editor?.insertAtCursor(detail)
+						editor?.focus()
+					}}
+				>
+					<InputTransformForm
+						bind:arg={flowModule.timeout}
+						argName="timeout"
+						{schema}
+						{previousModuleId}
+						argExtra={{ seconds: true }}
+						bind:editor
+					/>
+				</PropPickerWrapper>
+			</div>
 		{:else}
 			<SecondsInput disabled />
+			<div class="text-secondary">OR use a dynamic expression</div>
 		{/if}
+	</Label>
 
-		<div class="mt-4"></div>
-
+	<div class="mt-4">
 		<Alert title="Only used when testing the full flow" type="info">
 			<p class="text-sm"> The timeout will be ignored when running "Test this step" </p>
 		</Alert>

package/package/components/flows/content/FlowModuleTimeout.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { FlowModule } from '../../../gen';
 interface Props {
     flowModule: FlowModule;
+    previousModuleId: string | undefined;
 }
 declare const FlowModuleTimeout: import("svelte").Component<Props, {}, "flowModule">;
 type FlowModuleTimeout = ReturnType<typeof FlowModuleTimeout>;

package/package/components/flows/content/FlowRetries.svelte

@@ -3,10 +3,31 @@ import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.sv
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 import { enterpriseLicense } from '../../../stores';
 import { AlertTriangle } from 'lucide-svelte';
-import { untrack } from 'svelte';
-let { flowModuleRetry = $bindable(), disabled = false } = $props();
+import { untrack, getContext } from 'svelte';
+import Toggle from '../../Toggle.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import Section from '../../Section.svelte';
+import { getStepPropPicker } from '../previousResults';
+import { NEVER_TESTED_THIS_FAR } from '../models';
+let { flowModule = $bindable(), flowModuleRetry = $bindable(), disabled = false } = $props();
+const flowEditorContext = getContext('FlowEditorContext');
+const { flowStateStore, flowStore, previewArgs } = flowEditorContext || {
+    flowStateStore: null,
+    flowStore: null,
+    previewArgs: null
+};
 let delayType = $state();
 let loaded = $state(false);
+let editor = $state(undefined);
+let stepPropPicker = $derived(flowModule && flowStateStore?.val && flowStore?.val && previewArgs?.val
+    ? getStepPropPicker(flowStateStore.val, undefined, undefined, flowModule.id, flowStore.val, previewArgs.val, false)
+    : null);
+let isRetryConditionEnabled = $derived(Boolean(flowModuleRetry?.retry_if));
+let result = $derived(flowModule && flowStateStore?.val
+    ? (flowStateStore.val[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_FAR)
+    : NEVER_TESTED_THIS_FAR);
 function setConstantRetries() {
     flowModuleRetry = {
         ...flowModuleRetry,
@@ -48,7 +69,7 @@ $effect(() => {
 const u32Max = 4294967295;
 </script>
 
-<div class="h-full flex flex-col">
+<div class="h-full flex flex-col gap-4">
 	<ToggleButtonGroup
 		bind:selected={delayType}
 		class={`h-10 ${disabled ? 'disabled' : ''}`}
@@ -69,6 +90,90 @@ const u32Max = 4294967295;
 			<ToggleButton light value="exponential" label="Exponential" {item} />
 		{/snippet}
 	</ToggleButtonGroup>
+
+	{#if delayType === 'constant' || delayType === 'exponential'}
+		<Section label="Retry Condition" class="w-full">
+			{#snippet header()}
+				<Tooltip>
+					Optional condition to determine when to retry. If not specified, will retry on any failure
+					within the configured attempt limits.
+				</Tooltip>
+			{/snippet}
+
+			<Toggle
+				checked={isRetryConditionEnabled}
+				on:change={() => {
+					if (!flowModuleRetry) {
+						return
+					}
+					if (isRetryConditionEnabled && flowModuleRetry.retry_if) {
+						const { retry_if, ...rest } = flowModuleRetry
+						flowModuleRetry = rest
+					} else {
+						flowModuleRetry = {
+							...flowModuleRetry,
+							retry_if: {
+								expr: 'error && error.name !== "PERMANENT_FAILURE"'
+							}
+						}
+					}
+				}}
+				options={{
+					right: 'Only retry if condition is met'
+				}}
+			/>
+
+			<div
+				class="w-full border p-2 mt-2 flex flex-col {flowModuleRetry?.retry_if
+					? ''
+					: 'bg-surface-secondary'}"
+			>
+				{#if flowModuleRetry?.retry_if}
+					<span class="mt-2 text-xs font-bold">Retry condition expression</span>
+					<span class="text-xs text-tertiary mb-2"
+						>Expression should return true to retry, false to skip retry</span
+					>
+					<div class="border w-full">
+						{#if stepPropPicker}
+							<PropPickerWrapper
+								notSelectable
+								pickableProperties={stepPropPicker.pickableProperties}
+								{result}
+								on:select={({ detail }) => {
+									editor?.insertAtCursor(detail)
+									editor?.focus()
+								}}
+							>
+								<SimpleEditor
+									bind:this={editor}
+									lang="javascript"
+									bind:code={flowModuleRetry.retry_if.expr}
+									class="few-lines-editor"
+									extraLib={`declare const result = ${JSON.stringify(result)};` +
+										`\ndeclare const flow_input = ${JSON.stringify(stepPropPicker.pickableProperties.flow_input || {})};`}
+								/>
+							</PropPickerWrapper>
+						{:else}
+							<SimpleEditor
+								bind:this={editor}
+								lang="javascript"
+								bind:code={flowModuleRetry.retry_if.expr}
+								class="few-lines-editor"
+								extraLib={`declare const result = ${JSON.stringify(result)};`}
+							/>
+						{/if}
+					</div>
+				{:else}
+					<span class="mt-2 text-xs font-bold">Retry condition expression</span>
+					<span class="text-xs text-tertiary mb-2"
+						>Expression should return true to retry, false to skip retry</span
+					>
+					<textarea disabled rows="3" class="min-h-[80px]"></textarea>
+				{/if}
+			</div>
+		</Section>
+	{/if}
+
 	<div class="flex h-[calc(100%-22px)]">
 		<div class="w-1/2 h-full overflow-auto pr-2">
 			{#if delayType === 'constant'}

package/package/components/flows/content/FlowRetries.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { Retry } from '../../../gen';
+import type { Retry, FlowModule } from '../../../gen';
 interface Props {
     flowModuleRetry: Retry | undefined;
     disabled?: boolean;
+    flowModule?: FlowModule;
 }
-declare const FlowRetries: import("svelte").Component<Props, {}, "flowModuleRetry">;
+declare const FlowRetries: import("svelte").Component<Props, {}, "flowModule" | "flowModuleRetry">;
 type FlowRetries = ReturnType<typeof FlowRetries>;
 export default FlowRetries;

package/package/components/flows/flowInfers.js

@@ -47,40 +47,7 @@ export async function loadSchemaFromModule(module) {
             properties: {
                 provider: {
                     type: 'object',
-                    oneOf: [
-                        {
-                            type: 'object',
-                            title: 'OpenAI',
-                            properties: {
-                                kind: { type: 'string', enum: ['OpenAI'] },
-                                resource: {
-                                    type: 'object',
-                                    format: 'resource-openai'
-                                },
-                                model: {
-                                    type: 'string',
-                                    enum: ['gpt-5', 'gpt-5-mini', 'gpt-5-nano', 'gpt-4.1', 'gpt-4o', 'gpt-4o-mini']
-                                }
-                            },
-                            required: ['kind', 'resource', 'model']
-                        },
-                        {
-                            type: 'object',
-                            title: 'Anthropic',
-                            properties: {
-                                kind: { type: 'string', enum: ['Anthropic'] },
-                                resource: {
-                                    type: 'object',
-                                    format: 'resource-anthropic'
-                                },
-                                model: {
-                                    type: 'string',
-                                    enum: ['claude-sonnet-4-0', 'claude-3-7-sonnet-latest', 'claude-3-5-haiku-latest']
-                                }
-                            },
-                            required: ['kind', 'resource', 'model']
-                        }
-                    ]
+                    format: 'ai-provider'
                 },
                 user_message: {
                     type: 'string'
@@ -94,6 +61,11 @@ export async function loadSchemaFromModule(module) {
                 temperature: {
                     type: 'number',
                     description: 'Controls randomness in text generation. Range: 0.0 (deterministic) to 2.0 (random).'
+                },
+                output_schema: {
+                    type: 'object',
+                    description: 'JSON schema that the AI agent will follow for its response format',
+                    format: 'json-schema'
                 }
             },
             required: ['provider', 'model', 'user_message'],
@@ -104,7 +76,8 @@ export async function loadSchemaFromModule(module) {
                 'user_message',
                 'system_prompt',
                 'max_completion_tokens',
-                'temperature'
+                'temperature',
+                'output_schema'
             ]
         };
         let input_transforms = mod.input_transforms ?? {};

package/package/components/flows/flowStore.d.ts

@@ -6,7 +6,51 @@ export declare const importFlowStore: import("svelte/store").Writable<Flow | und
 export declare function initFlow(flow: Flow, flowStore: StateStore<Flow>, flowStateStore: StateStore<FlowState>): Promise<void>;
 export declare function copyFirstStepSchema(flowState: FlowState, flowStore: StateStore<OpenFlow>): Promise<void>;
 export declare function getFirstStepSchema(flowState: FlowState, flow: OpenFlow): Promise<{
-    schema: import("../../common").Schema | undefined;
+    schema: {
+        $schema: string | undefined;
+        type: string;
+        properties: {
+            [x: string]: {
+                type: string | undefined;
+                description?: string | undefined;
+                pattern?: string | undefined;
+                default?: any;
+                enum?: string[] | undefined;
+                contentEncoding?: "base64" | "binary" | undefined;
+                format?: string | undefined;
+                items?: {
+                    type?: "string" | "number" | "bytes" | "object" | "resource" | undefined;
+                    contentEncoding?: "base64" | undefined;
+                    enum?: string[] | undefined;
+                    resourceType?: string | undefined;
+                    properties?: {
+                        [x: string]: /*elided*/ any;
+                    } | undefined;
+                } | undefined;
+                min?: number | undefined;
+                max?: number | undefined;
+                currency?: string | undefined;
+                currencyLocale?: string | undefined;
+                multiselect?: boolean | undefined;
+                customErrorMessage?: string | undefined;
+                properties?: {
+                    [x: string]: /*elided*/ any;
+                } | undefined;
+                required?: string[] | undefined;
+                showExpr?: string | undefined;
+                password?: boolean | undefined;
+                order?: string[] | undefined;
+                nullable?: boolean | undefined;
+                dateFormat?: string | undefined;
+                title?: string | undefined;
+                placeholder?: string | undefined;
+                oneOf?: /*elided*/ any[] | undefined;
+                originalType?: string | undefined;
+            };
+        };
+        order?: string[] | undefined;
+        required: string[];
+    } | undefined;
     mod: {
         id: string;
         summary: string | undefined;

package/package/components/flows/flowStore.js

@@ -29,7 +29,7 @@ export async function getFirstStepSchema(flowState, flow) {
     if (!firstModuleId || !flowState[firstModuleId]) {
         throw new Error('no first step found');
     }
-    const schema = structuredClone(flowState[firstModuleId].schema);
+    const schema = $state.snapshot(flowState[firstModuleId].schema);
     const v = flow.value.modules[0].value;
     if (v.type !== 'rawscript' && v.type !== 'script') {
         throw new Error('only scripts can be used as a input schema');

package/package/components/flows/map/FlowJobsMenu.svelte

@@ -106,7 +106,7 @@ $effect(() => {
 				</MeltButton>
 			{/snippet}
 
-			{#snippet children({ item })}
+			{#snippet children({ item: childrenItem })}
 				<div class="flex flex-col px-1">
 					<input type="number" bind:value={filter} onkeydown={onKeydown} />
 
@@ -115,7 +115,7 @@ $effect(() => {
 							<VirtualList height={300} width="100%" itemCount={items.length} itemSize={24}>
 								{#snippet header()}{/snippet}
 								{#snippet footer()}{/snippet}
-								{#snippet children({ index: idx, style })}
+								{#snippet item({ index: idx, style })}
 									<div {style}>
 										<MenuItem
 											class={twMerge(
@@ -133,7 +133,7 @@ $effect(() => {
 												})
 												menu?.close()
 											}}
-											{item}
+											item={childrenItem}
 										>
 											#{items[idx].index + 1}
 										</MenuItem>

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
 import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { AlertTriangle, Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, SkipForward, Pin, X, Play, Loader2 } from 'lucide-svelte';
+import { Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, SkipForward, Pin, X, Play, Loader2, TriangleAlert } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
@@ -336,60 +336,67 @@ let historyOpen = $derived.by(() => outputPickerInner?.getHistoryOpen?.() ?? fal
 		</div>
 
 		{#if deletable && !action}
-			<button
-				class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
-outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-red-400 hover:text-white
- {hover || selected ? '' : '!hidden'}"
-				title="Delete"
-				onclick={stopPropagation(
-					preventDefault((event) => dispatch('delete', { id, type: modType }))
-				)}
-				onpointerdown={stopPropagation(preventDefault(() => {}))}
+			<div
+				class="absolute -translate-y-[100%] top-2 -right-2 flex flex-row gap-1 p-1 min-w-[52px] h-7 group justify-end"
 			>
-				<X class="mx-[3px]" size={12} strokeWidth={2} />
-			</button>
-
-			{#if id !== 'preprocessor'}
+				{#if id !== 'preprocessor'}
+					<button
+						class={twMerge(
+							'trash center-center p-1 text-secondary shadow-sm bg-surface duration-0 hover:bg-blue-400 hover:text-white',
+							hover ? 'block' : '!hidden',
+							'shadow-md rounded-md',
+							'group-hover:block'
+						)}
+						onclick={stopPropagation(preventDefault((event) => dispatch('move')))}
+						title="Move"
+					>
+						<Move size={12} />
+					</button>
+				{/if}
 				<button
-					class="absolute -top-[10px] right-[60px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
-outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-blue-400 hover:text-white
- {hover ? '' : '!hidden'}"
-					onclick={stopPropagation(preventDefault((event) => dispatch('move')))}
-					title="Move"
+					class={twMerge(
+						'trash center-center text-secondary shadow-sm bg-surface duration-0 hover:bg-red-400 hover:text-white p-1',
+						selected || hover ? 'block' : '!hidden',
+						'group-hover:block',
+						'shadow-md rounded-md'
+					)}
+					title="Delete"
+					onclick={stopPropagation(
+						preventDefault((event) => dispatch('delete', { id, type: modType }))
+					)}
+					onpointerdown={stopPropagation(preventDefault(() => {}))}
 				>
-					<Move class="mx-[3px]" size={12} strokeWidth={2} />
+					<X size={12} />
 				</button>
-			{/if}
+			</div>
 
 			{#if (id && Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}).length > 0) || Boolean(warningMessage)}
-				<div class="absolute -top-[10px] -left-[10px]">
-					<Popover>
-						{#snippet text()}
-							<ul class="list-disc px-2">
-								{#if id}
-									{#each Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}) as m}
-										<li>
-											{m.message}
-										</li>
-									{/each}
-								{/if}
-							</ul>
-						{/snippet}
-						<div
-							class={twMerge(
-								'flex items-center justify-center h-full w-full rounded-md p-0.5 border  duration-0 ',
-								id &&
-									Object.values($flowInputsStore?.[id]?.flowStepWarnings || {})?.some(
-										(x) => x.type === 'error'
-									)
-									? 'border-red-600 text-red-600 bg-red-100 hover:bg-red-300'
-									: 'border-yellow-600 text-yellow-600 bg-yellow-100 hover:bg-yellow-300'
-							)}
-						>
-							<AlertTriangle size={14} strokeWidth={2} />
-						</div>
-					</Popover>
-				</div>
+				<Popover
+					class={twMerge(
+						'absolute -translate-y-[100%] top-1 -left-1',
+						'flex items-center justify-center rounded-b-none rounded-md p-1 shadow-md  duration-0 ',
+						id &&
+							Object.values($flowInputsStore?.[id]?.flowStepWarnings || {})?.some(
+								(x) => x.type === 'error'
+							)
+							? 'border-red-600 text-red-600 bg-red-100 hover:bg-red-300'
+							: ' text-yellow-600 bg-yellow-100 hover:bg-yellow-300'
+					)}
+				>
+					{#snippet text()}
+						<ul class="list-disc px-2">
+							{#if id}
+								{#each Object.values($flowInputsStore?.[id]?.flowStepWarnings || {}) as m}
+									<li>
+										{m.message}
+									</li>
+								{/each}
+							{/if}
+						</ul>
+					{/snippet}
+
+					<TriangleAlert size={12} strokeWidth={2} />
+				</Popover>
 			{/if}
 		{/if}
 	</div>
@@ -397,7 +404,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 	{#if editMode && enableTestRun && flowJob?.type !== 'QueuedJob'}
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="absolute top-1/2 -translate-y-1/2 -translate-x-[100%] -left-[0] flex items-center w-fit px-2 h-9 min-w-14"
+			class="absolute top-1/2 -translate-y-1/2 -translate-x-[100%] -left-[0] flex items-center w-fit px-1 h-9 min-w-9"
 			onmouseenter={() => (hover = true)}
 			onmouseleave={() => (hover = false)}
 		>
@@ -405,11 +412,11 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 				<div transition:fade={{ duration: 100 }}>
 					{#if !testIsLoading}
 						<Button
-							size="sm"
+							size="xs"
 							color="light"
 							title="Run"
 							variant="border"
-							btnClasses="p-1.5"
+							btnClasses="px-1 py-1.5"
 							on:click={() => {
 								outputPicker?.toggleOpen(true)
 								moduleTest?.loadArgsAndRunTest()
@@ -424,7 +431,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 									}
 								}
 							]}
-							dropdownBtnClasses="!w-4 px-1"
+							dropdownBtnClasses="!w-3 px-0.5"
 							bind:dropdownOpen={testRunDropdownOpen}
 						>
 							{#if testIsLoading}
@@ -438,7 +445,7 @@ outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration
 							size="xs"
 							color="red"
 							variant="contained"
-							btnClasses="!h-[25.5px] !w-[44.5px] !p-1.5 gap-0.5"
+							btnClasses="!h-[25.5px] !w-[36px] !p-1.5 gap-0.5"
 							on:click={async () => {
 								moduleTest?.cancelJob()
 							}}

package/package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -60,8 +60,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const FlowModuleSchemaItem: $$__sveltets_2_IsomorphicComponent<Props, {
     changeId: CustomEvent<any>;
     pointerdown: CustomEvent<any>;
-    delete: CustomEvent<any>;
     move: CustomEvent<any>;
+    delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;

package/package/components/flows/map/FlowModuleSchemaItemViewer.svelte

@@ -55,7 +55,7 @@ hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
 							onclick?.()
 						})
 					)}
-					title="Edit Id"><Pencil size={14} /></button
+					title="Edit Id"><Pencil size={12} /></button
 				>
 			{/if}
 		{:else if id?.startsWith('subflow:')}

package/package/components/flows/map/InsertModuleButton.svelte

@@ -75,6 +75,7 @@ shouldUsePortal={true} -->
 			on:new
 			on:pickFlow
 			on:pickScript
+			allowTrigger={index == 0}
 			{kind}
 		/>
 	{/snippet}

package/package/components/flows/map/InsertModuleInner.svelte

@@ -5,21 +5,18 @@ import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
 import TopLevelNode from '../pickers/TopLevelNode.svelte';
 // import type { Writable } from 'svelte/store'
 const dispatch = createEventDispatcher();
-export let stop = false;
-export let funcDesc = '';
-export let disableAi = false;
-export let kind = 'script';
-export let allowTrigger = true;
-export let scriptOnly = false;
+let { stop = false, funcDesc = $bindable(''), disableAi = false, kind = 'script', allowTrigger = true, scriptOnly = false } = $props();
 let customUi = getContext('customUi');
-let selectedKind = kind;
-let preFilter = 'all';
-let loading = false;
-let small = false;
-let width = 0;
-let height = 0;
-$: displayPath = width > 650 || height > 400;
-$: small = kind === 'preprocessor' || kind === 'failure';
+let selectedKind = $state(kind);
+let preFilter = $state('all');
+let loading = $state(false);
+let small = $state(false);
+let width = $state(0);
+let height = $state(0);
+let displayPath = $derived(width > 650 || height > 400);
+$effect(() => {
+    small = kind === 'preprocessor' || kind === 'failure';
+});
 </script>
 
 <!-- <Menu transitionDuration={0} pointerDown bind:show={open} noMinW {placement} let:close> -->
@@ -37,7 +34,7 @@ shouldUsePortal={true} -->
 		: 'w-[650px]'} pt-1 pr-1 pl-1 gap-1.5 resize overflow-auto {small
 		? 'min-w-[450px]'
 		: 'min-w-[650px]'} min-h-[400px]"
-	on:wheel={(e) => {
+	onwheel={(e) => {
 		e.stopPropagation()
 	}}
 	role="none"