windmill-components 1.542.5 → 1.555.0

package/package/components/InputTransformForm.svelte

@@ -8,6 +8,7 @@
 </script>
 
 <script lang="ts">import { createEventDispatcher, getContext, untrack } from 'svelte';
+import { computeShow } from '../utils';
 import ArgInput from './ArgInput.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte';
@@ -17,7 +18,6 @@ import { Button } from './common';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import { tick } from 'svelte';
-import { fade } from 'svelte/transition';
 import { buildPrefixRegex } from './flows/previousResults';
 import TemplateEditor from './TemplateEditor.svelte';
 import { setInputCat as computeInputCat, isCodeInjection } from '../utils';
@@ -27,11 +27,14 @@ import StepInputGen from './copilot/StepInputGen.svelte';
 import { twMerge } from 'tailwind-merge';
 import FlowPlugConnect from './FlowPlugConnect.svelte';
 import { deepEqual } from 'fast-equals';
-let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined) } = $props();
+import S3ArrayHelperButton from './S3ArrayHelperButton.svelte';
+import { inputBorderClass } from './text_input/TextInput.svelte';
+let { schema = $bindable(), arg = $bindable(), argName = $bindable(), headerTooltip = undefined, headerTooltipIconClass = '', HeaderTooltipIcon = InfoIcon, extraLib = $bindable('missing extraLib'), inputCheck = $bindable(true), previousModuleId, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noDynamicToggle = false, argExtra = {}, pickableProperties = undefined, enableAi = false, hideHelpButton = false, class: className = '', editor = $bindable(undefined), otherArgs = {}, helperScript = undefined } = $props();
 let monaco = $state(undefined);
 let monacoTemplate = $state(undefined);
 let argInput = $state(undefined);
 let focusedPrev = false;
+let hidden = $state(false);
 const variableMatch = (value) => value.match(/^variable\('([^']+)'\)$/);
 const resourceMatch = (value) => value.match(/^resource\('([^']+)'\)$/);
 const dispatch = createEventDispatcher();
@@ -144,6 +147,46 @@ function handleKeyUp(e) {
 function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql' || inputCat == 'yaml';
 }
+function appendPathToArrayExpr(currentExpr, path) {
+    const trimmedExpr = currentExpr?.trim() || '';
+    let newExpr = trimmedExpr;
+    if (trimmedExpr.startsWith('[') && trimmedExpr.endsWith(']')) {
+        // Parse existing array and append new item
+        const innerContent = trimmedExpr.slice(1, -1).trim();
+        if (innerContent) {
+            newExpr = `[${innerContent}, ${path}]`;
+        }
+        else {
+            newExpr = `[${path}]`;
+        }
+    }
+    else {
+        // Create new array with single item
+        newExpr = `[${path}]`;
+    }
+    arg.expr = newExpr;
+    arg.type = 'javascript';
+    // Update Monaco editor after setting the expression
+    tick().then(() => {
+        monaco?.setCode(newExpr);
+    });
+    // Dispatch change
+    dispatch('change', { argName, arg });
+}
+async function switchToJsAndConnect(onPath) {
+    // Switch to JavaScript mode
+    propertyType = 'javascript';
+    arg.type = 'javascript';
+    arg.expr = arg.expr || '[]';
+    arg.value = undefined;
+    // Wait for the component to re-render and Monaco to be available
+    await tick();
+    // Activate connect mode
+    focusProp?.(argName, 'connect', (path) => {
+        onPath(path);
+        return true;
+    });
+}
 function connectProperty(rawValue) {
     // Extract path from variable('x') or resource('x') format
     const varMatch = variableMatch(rawValue);
@@ -167,6 +210,41 @@ function connectProperty(rawValue) {
         monaco?.setCode(arg.expr);
     }
 }
+function handleFieldVisibility(schema, arg, otherArgs) {
+    const schemaProperty = schema?.properties?.[argName];
+    if (schemaProperty?.showExpr) {
+        // Build args object with current field value and other context
+        const currentValue = propertyType === 'static' ? arg?.value : arg?.expr;
+        // Convert otherArgs from InputTransform objects to their actual values
+        const contextArgs = {
+            [argName]: currentValue
+        };
+        // Extract values from InputTransform objects in otherArgs
+        Object.keys(otherArgs ?? {}).forEach((key) => {
+            const otherArg = otherArgs[key];
+            const otherArgValue = otherArg.type === 'static' ? otherArg.value : otherArg.expr;
+            contextArgs[key] = otherArgValue;
+        });
+        const shouldShow = computeShow(argName, schemaProperty.showExpr, contextArgs);
+        if (shouldShow) {
+            hidden = false;
+        }
+        else if (!hidden) {
+            hidden = true;
+            // Clear the arg value when hidden (following SchemaForm pattern)
+            if (arg) {
+                arg.value = undefined;
+                arg.expr = undefined;
+            }
+            // Make sure validation passes when hidden
+            inputCheck = true;
+        }
+    }
+    else {
+        // No showExpr, always show
+        hidden = false;
+    }
+}
 function onFocus() {
     focused = true;
     if (isStaticTemplate(inputCat)) {
@@ -257,21 +335,22 @@ $effect(() => {
 $effect(() => {
     schema?.properties?.[argName]?.default && untrack(() => setDefaultCode());
 });
+$effect.pre(() => {
+    // Monitor changes that affect field visibility
+    JSON.stringify(schema);
+    JSON.stringify(arg);
+    JSON.stringify(otherArgs);
+    untrack(() => handleFieldVisibility(schema, arg, otherArgs));
+});
 let connecting = $derived($propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect');
+let shouldShowS3ArrayHelper = $derived(inputCat === 'list' &&
+    ['s3object', 's3_object'].includes(schema?.properties?.[argName]?.items?.resourceType));
 </script>
 
 {#if arg != undefined}
-	<div
-		class={twMerge(
-			'pl-2 pt-2 pb-2 ml-2 relative hover:bg-surface hover:shadow-md transition-all duration-200',
-			$propPickerConfig?.propName == argName
-				? 'bg-surface border-l-4 border-blue-500 shadow-md rounded-l-md z-50 '
-				: 'hover:rounded-md',
-			className
-		)}
-	>
-		<div class="flex flex-row justify-between gap-1 pb-1 px-2">
-			<div class="flex flex-wrap grow">
+	<div class={twMerge('pt-2 pb-2 relative group', className)}>
+		<div class="flex flex-row justify-between gap-1 pb-1">
+			<div class="flex flex-wrap grow min-h-7 items-end">
 				<FieldHeader
 					label={argName}
 					simpleTooltip={headerTooltip}
@@ -286,7 +365,7 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 				{#if isStaticTemplate(inputCat)}
 					<div>
 						<span
-							class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 !py-0.5 rounded ml-2 {propertyType ==
+							class="border text-gray-400 dark:text-gray-500 text-2xs font-medium mr-2 px-1 !py-[1px] rounded ml-2.5 {propertyType ==
 								'static' && arg.type === 'javascript'
 								? 'visible'
 								: 'invisible'}"
@@ -297,7 +376,9 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 				{/if}
 			</div>
 			{#if !noDynamicToggle}
-				<div class="flex flex-row gap-x-2 gap-y-1 flex-wrap z-10 items-center">
+				<div
+					class="flex flex-row gap-x-2 z-10 absolute right-0 group-hover:bg-surface transition-colors"
+				>
 					{#if enableAi}
 						<StepInputGen
 							bind:this={stepInputGen}
@@ -326,14 +407,47 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 							}}
 							{pickableProperties}
 							{argName}
+							btnClass={twMerge(
+								'h-6 min-w-8 px-2',
+								'group-hover:opacity-100 transition-opacity',
+								!connecting ? 'opacity-0' : ''
+							)}
+						/>
+					{/if}
+
+					{#if propPickerWrapperContext}
+						<FlowPlugConnect
+							wrapperClasses={twMerge(
+								connecting ? 'h-5 w-7' : 'h-6 w-8',
+								'group-hover:opacity-100 transition-opacity p-0',
+								!connecting ? 'opacity-0' : ''
+							)}
+							id="flow-editor-plug"
+							{connecting}
+							on:click={() => {
+								if (
+									$propPickerConfig?.propName == argName &&
+									$propPickerConfig?.insertionMode == 'connect'
+								) {
+									clearFocus()
+								} else {
+									focusProp?.(argName, 'connect', (path) => {
+										connectProperty(path)
+										dispatch('change', { argName })
+										return true
+									})
+								}
+							}}
 						/>
 					{/if}
+
 					<div>
 						<ToggleButtonGroup
 							selected={propertyType}
 							on:selected={(e) => {
 								if (e.detail == propertyType) return
 								const staticTemplate = isStaticTemplate(inputCat)
+
 								if (e.detail === 'javascript') {
 									if (arg.expr == undefined) {
 										arg.expr = getDefaultExpr(
@@ -382,19 +496,20 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 									propertyType = 'static'
 								}
 							}}
+							class="h-6"
 						>
 							{#snippet children({ item })}
 								{#if isStaticTemplate(inputCat)}
 									<ToggleButton
-										tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 										light
+										small
+										tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 										value="static"
-										size="xs2"
 										label={'${}'}
 										{item}
 									/>
 								{:else}
-									<ToggleButton small label="Static" value="static" {item} />
+									<ToggleButton light small label="static" value="static" {item} />
 								{/if}
 
 								{#if codeInjectionDetected && propertyType == 'static'}
@@ -411,6 +526,7 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 									</Button>
 								{:else}
 									<ToggleButton
+										disabled={inputCat === 'dynamic'}
 										small
 										light
 										tooltip="JavaScript expression ('flow_input' or 'results')."
@@ -422,27 +538,6 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 							{/snippet}
 						</ToggleButtonGroup>
 					</div>
-
-					{#if propPickerWrapperContext}
-						<FlowPlugConnect
-							id="flow-editor-plug"
-							{connecting}
-							on:click={() => {
-								if (
-									$propPickerConfig?.propName == argName &&
-									$propPickerConfig?.insertionMode == 'connect'
-								) {
-									clearFocus()
-								} else {
-									focusProp?.(argName, 'connect', (path) => {
-										connectProperty(path)
-										dispatch('change', { argName })
-										return true
-									})
-								}
-							}}
-						/>
-					{/if}
 				</div>
 			{/if}
 		</div>
@@ -462,12 +557,7 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 			<div class="relative flex flex-row items-top gap-2 justify-between">
 				<div class="min-w-0 grow">
 					{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
-						{#if argName && schema?.properties?.[argName]?.description}
-							<div class="text-xs italic pb-1 text-secondary">
-								<pre class="font-main">{schema.properties[argName].description}</pre>
-							</div>
-						{/if}
-						<div class="mt-2 min-h-[28px]">
+						<div>
 							{#if arg}
 								<TemplateEditor
 									bind:this={monacoTemplate}
@@ -482,8 +572,16 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 										dispatch('change', { argName, arg })
 									}}
 									loadAsync
+									class="bg-surface-secondary"
 								/>
 							{/if}
+							{#if argName && schema?.properties?.[argName]?.description}
+								<div class="text-xs italic py-1 text-hint">
+									<pre class="font-main whitespace-normal"
+										>{schema.properties[argName].description}</pre
+									>
+								</div>
+							{/if}
 						</div>
 					{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
 						<ArgInput
@@ -524,15 +622,38 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 							nullable={schema.properties[argName].nullable}
 							bind:title={schema.properties[argName].title}
 							bind:placeholder={schema.properties[argName].placeholder}
-						/>
+							{helperScript}
+							otherArgs={Object.fromEntries(
+								Object.entries(otherArgs).map(([key, transform]) => [
+									key,
+									transform?.type === 'static' ? transform.value : transform?.expr
+								])
+							)}
+						>
+							{#snippet innerBottomSnippet()}
+								{#if shouldShowS3ArrayHelper}
+									<S3ArrayHelperButton
+										{connecting}
+										onClick={() =>
+											switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
+									/>
+								{/if}
+							{/snippet}
+						</ArgInput>
 					{:else if arg.expr != undefined}
-						<div class="border mt-2">
+						<div
+							class={`bg-surface-secondary rounded-md flex flex-col pl-4 ${inputBorderClass({ forceFocus: focused })}`}
+						>
 							<SimpleEditor
 								bind:this={monaco}
 								bind:code={arg.expr}
+								yPadding={8}
 								{extraLib}
 								lang="javascript"
 								shouldBindKey={false}
+								renderLineHighlight="none"
+								hideLineNumbers
+								fakeMonacoPlaceholderClass="mt-2"
 								on:focus={() => {
 									focused = true
 									focusProp?.(argName, 'insert', (path) => {
@@ -551,12 +672,36 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 							/>
 							<!-- <input type="text" bind:value={arg.expr} /> -->
 						</div>
+
+						{#if shouldShowS3ArrayHelper}
+							<S3ArrayHelperButton
+								class="mt-2"
+								{connecting}
+								onClick={() =>
+									focusProp?.(argName, 'connect', (path) => {
+										appendPathToArrayExpr(arg.expr, path)
+										return true
+									})}
+							/>
+						{/if}
+
+						{#if argName && schema?.properties?.[argName]?.description}
+							<div class="text-xs italic py-1 text-hint">
+								<pre class="font-main whitespace-normal"
+									>{schema.properties[argName].description}</pre
+								>
+							</div>
+						{/if}
+
 						{#if !hideHelpButton}
 							<DynamicInputHelpBox />
 						{/if}
+
 						<div class="mb-2"></div>
 					{:else}
-						Not recognized input type {argName} ({arg.expr}, {propertyType})
+						<span class="text-xs text-red-500">
+							Not recognized input type {argName} ({arg.expr}, {propertyType})
+						</span>
 						<div class="flex mt-2">
 							<Button
 								variant="border"
@@ -568,29 +713,6 @@ let connecting = $derived($propPickerConfig?.propName == argName && $propPickerC
 						>
 					{/if}
 				</div>
-
-				{#if $propPickerConfig?.propName == argName}
-					<div
-						class="text-blue-500 absolute top-2 lg:-right-2.5 -right-1"
-						in:fade={{ duration: 200 }}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="24"
-							viewBox="0 0 24 24"
-							fill="currentColor"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						>
-							<polyline points="24 24 12 12 24 0" />
-						</svg>
-					</div>
-				{:else}
-					<div class="w-0"></div>
-				{/if}
 			</div>
 		</div>
 	</div>

package/package/components/InputTransformForm.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Schema } from '../common';
+import type { DynamicInput as DynamicInputTypes } from '../utils';
 import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
 import type ItemPicker from './ItemPicker.svelte';
@@ -27,6 +28,8 @@ interface Props {
     hideHelpButton?: boolean;
     class?: string;
     editor?: SimpleEditor | undefined;
+    otherArgs?: Record<string, InputTransform>;
+    helperScript?: DynamicInputTypes.HelperScript | undefined;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/InputTransformSchemaForm.svelte

@@ -8,7 +8,8 @@ import InputTransformForm from './InputTransformForm.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import { Plus } from 'lucide-svelte';
-let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '' } = $props();
+import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte';
+let { schema = $bindable(), args = $bindable({}), isValid = $bindable(true), extraLib = $bindable('missing extraLib'), previousModuleId = undefined, filter = undefined, noDynamicToggle = false, pickableProperties = undefined, enableAi = false, class: clazz = '', helperScript = undefined } = $props();
 let inputCheck = $state({});
 $effect(() => {
     isValid = allTrue(inputCheck) ?? false;
@@ -43,9 +44,9 @@ $effect(() => {
 });
 </script>
 
-<div class="w-full {clazz}">
+<div class="w-full mb-6 {clazz}">
 	{#if enableAi}
-		<div class="px-0.5 pt-0.5">
+		<div class="mt-2">
 			<StepInputsGen
 				{pickableProperties}
 				argNames={keys
@@ -64,7 +65,7 @@ $effect(() => {
 	{#if keys.length > 0}
 		{#each keys as argName, index (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div class="pt-2 relative">
+				<ResizeTransitionWrapper class="mt-2 relative" innerClass="w-full" vertical>
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
@@ -80,8 +81,12 @@ $effect(() => {
 						{noDynamicToggle}
 						{pickableProperties}
 						{enableAi}
+						{helperScript}
+						otherArgs={Object.fromEntries(
+							Object.entries(args ?? {}).filter(([key]) => key !== argName)
+						)}
 					/>
-				</div>
+				</ResizeTransitionWrapper>
 			{/if}
 		{/each}
 	{:else}

package/package/components/InputTransformSchemaForm.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Schema } from '../common';
 import { type InputTransform } from '../gen';
+import { type DynamicInput as DynamicInputTypes } from '../utils';
 import type { PickableProperties } from './flows/previousResults';
 interface Props {
     schema: Schema | {
@@ -14,6 +15,7 @@ interface Props {
     pickableProperties?: PickableProperties | undefined;
     enableAi?: boolean;
     class?: string;
+    helperScript?: DynamicInputTypes.HelperScript;
 }
 declare const InputTransformSchemaForm: import("svelte").Component<Props, {
     setArgs: (nargs: Record<string, InputTransform | any>) => void;

package/package/components/InstanceSetting.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">import { isCloudHosted } from '../cloud';
 import { enterpriseLicense, isCriticalAlertsUIOpen } from '../stores';
-import { AlertCircle, AlertTriangle, BadgeCheck, BadgeX, Info, Plus, RefreshCcw, Slack, X } from 'lucide-svelte';
+import { AlertCircle, AlertTriangle, BadgeCheck, BadgeX, Info, Plus, Slack, X } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import ObjectStoreConfigSettings from './ObjectStoreConfigSettings.svelte';
 import { sendUserToast } from '../toast';
 import ConfirmButton from './ConfirmButton.svelte';
-import { ConfigService, IndexSearchService, SettingService, TeamsService } from '../gen';
+import { ConfigService, IndexSearchService, SettingService } from '../gen';
 import { Button, SecondsInput, Skeleton } from './common';
 import Password from './Password.svelte';
 import { classNames } from '../utils';
@@ -28,7 +28,6 @@ if ((setting.fieldType == 'select' || setting.fieldType == 'select_python') &&
     $values[setting.key] = 'default';
 }
 let latestKeyRenewalAttempt = $state(null);
-let isFetching = $state(false);
 function showSetting(setting, values) {
     if (setting == 'dev_instance') {
         if (values['license_key'] == undefined) {
@@ -120,29 +119,16 @@ async function fetch_available_python_versions() {
 if (setting.fieldType == 'select_python') {
     fetch_available_python_versions();
 }
-async function fetchTeams() {
-    if (isFetching)
-        return;
-    isFetching = true;
-    try {
-        $values['teams'] = await TeamsService.syncTeams();
-    }
-    catch (error) {
-        console.error('Error fetching teams:', error);
-    }
-    finally {
-        isFetching = false;
-    }
-}
 function handleTeamChange(teamItem, i) {
-    const team = (teamItem && $values['teams'].find((team) => team.team_id === teamItem.team_id)) || null;
     $values['critical_error_channels'][i] = {
-        teams_channel: {
-            team_id: team?.team_id,
-            team_name: team?.team_name,
-            channel_id: team?.channels[0]?.channel_id,
-            channel_name: team?.channels[0]?.channel_name
-        }
+        teams_channel: teamItem
+            ? {
+                team_id: teamItem.team_id,
+                team_name: teamItem.team_name,
+                channel_id: undefined, // Will be set when channel is selected
+                channel_name: undefined
+            }
+            : undefined
     };
 }
 function handleChannelChange(channel, i) {
@@ -320,20 +306,28 @@ function handleChannelChange(channel, i) {
 						</div>
 					{/if}
 				{:else if setting.fieldType == 'codearea'}
-					<SimpleEditor
-						autoHeight
-						class="editor"
-						lang={setting.codeAreaLang ?? 'txt'}
-						bind:code={$values[setting.key]}
-						fixedOverflowWidgets={false}
-					/>
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						onclick={(ev) => {
+							ev.stopPropagation() // this is to prevent wrapping label interference
+						}}
+					>
+						<SimpleEditor
+							autoHeight
+							class="editor"
+							lang={setting.codeAreaLang ?? 'txt'}
+							bind:code={$values[setting.key]}
+							fixedOverflowWidgets={false}
+						/></div
+					>
 				{:else if setting.fieldType == 'license_key'}
 					{@const { valid, expiration } = parseLicenseKey($values[setting.key] ?? '')}
 					<div class="flex gap-2">
 						<Password
 							small
 							placeholder={setting.placeholder}
-							on:keydown={() => {
+							onKeyDown={() => {
 								licenseKeyChanged = true
 							}}
 							bind:password={$values[setting.key]}
@@ -501,9 +495,6 @@ function handleChannelChange(channel, i) {
 														[e.target['value']]: ''
 													}
 												}
-												if (e.target?.['value'] === 'teams_channel') {
-													fetchTeams()
-												}
 											}}
 											value={(() => {
 												if (!v) return 'email'
@@ -535,8 +526,6 @@ function handleChannelChange(channel, i) {
 													containerClass="w-44"
 													minWidth="140px"
 													showRefreshButton={false}
-													placeholder="Select team"
-													teams={$values['teams']}
 													bind:selectedTeam={
 														() =>
 															$values['critical_error_channels'][i]?.teams_channel
@@ -555,12 +544,8 @@ function handleChannelChange(channel, i) {
 												{#if $values['critical_error_channels'][i]?.teams_channel?.team_id}
 													<ChannelSelector
 														containerClass=""
-														placeholder="Select channel"
-														channels={$values['teams'].find(
-															(team) =>
-																team.team_id ===
-																$values['critical_error_channels'][i]?.teams_channel?.team_id
-														)?.channels ?? []}
+														placeholder="Search channels"
+														teamId={$values['critical_error_channels'][i]?.teams_channel?.team_id}
 														bind:selectedChannel={
 															() =>
 																$values['critical_error_channels'][i]?.teams_channel?.channel_id
@@ -575,13 +560,10 @@ function handleChannelChange(channel, i) {
 																	: undefined,
 															(channel) => handleChannelChange(channel, i)
 														}
+														onError={(e) =>
+															sendUserToast('Failed to load channels: ' + e.message, true)}
 													/>
 												{/if}
-												<div>
-													<button onclick={fetchTeams} class="flex items-center gap-1 mt-2">
-														<RefreshCcw size={16} class={isFetching ? 'animate-spin' : ''} />
-													</button>
-												</div>
 											</div>
 										{:else}
 											<input
@@ -624,7 +606,8 @@ function handleChannelChange(channel, i) {
 								if ($values[setting.key] == undefined || !Array.isArray($values[setting.key])) {
 									$values[setting.key] = []
 								}
-								$values[setting.key] = $values[setting.key].concat('')
+								// Start with a typed default to avoid invalid primitives in the array
+								$values[setting.key] = $values[setting.key].concat({ email: '' })
 							}}
 							id="arg-input-add-item"
 							startIcon={{ icon: Plus }}
@@ -716,7 +699,7 @@ function handleChannelChange(channel, i) {
 										The max amount of documents (here jobs) per commit. To optimize indexing
 										throughput, it is best to keep this as high as possible. However, especially
 										when reindexing the whole instance, it can be useful to have a limit on how many
-										jobs can be written without being commited. A commit will make the jobs
+										jobs can be written without being committed. A commit will make the jobs
 										available for search, constitute a "checkpoint" state in the indexing and will
 										be logged.
 									</Tooltip>
@@ -775,7 +758,7 @@ function handleChannelChange(channel, i) {
 										representing all logs during 1 minute for a specific host. To optimize indexing
 										throughput, it is best to keep this as high as possible. However, especially
 										when reindexing the whole instance, it can be useful to have a limit on how many
-										logs can be written without being commited. A commit will make the logs
+										logs can be written without being committed. A commit will make the logs
 										available for search, appear as a log line, and be a "checkpoint" of the
 										indexing progress.
 									</Tooltip>