windmill-components 1.542.5 → 1.555.0

package/package/components/select/MultiSelect.svelte

@@ -6,7 +6,8 @@ import CloseButton from '../common/CloseButton.svelte';
 import DraggableTags from './DraggableTags.svelte';
 import { Search } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-let { items, placeholder = 'Select items', value = $bindable(), class: className = '', style, listAutoWidth = true, disabled = false, disablePortal = false, createText, reorderable = true, noItemsMsg, selectedUlClass = '', placeholderClass = '', allowClear = true, onOpen, groupBy, sortBy, onCreateItem } = $props();
+import TextInput, { inputBorderClass } from '../text_input/TextInput.svelte';
+let { items, placeholder = 'Select items', value = $bindable(), class: className = '', style, listAutoWidth = true, disabled = false, disablePortal = false, createText, reorderable = true, noItemsMsg, selectedUlClass = '', placeholderClass = '', allowClear = true, hideMainClearBtn = false, onOpen, groupBy, sortBy, onCreateItem } = $props();
 let filterText = $state('');
 let open = $state(false);
 let wrapperEl = $state();
@@ -44,7 +45,8 @@ function clearValue() {
 <div
 	bind:this={wrapperEl}
 	class={twMerge(
-		'relative min-h-8 flex items-center w-full bg-surface border border-gray-300 rounded-md text-tertiary',
+		'relative min-h-10 flex items-center w-full bg-surface-secondary !text-secondary rounded-md',
+		inputBorderClass({ forceFocus: open && !disabled }),
 		disabled ? 'pointer-events-none' : '',
 		open && !disabled ? 'open' : '',
 		disabled ? 'disabled' : '',
@@ -58,7 +60,9 @@ function clearValue() {
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 
 	{#if value.length === 0}
-		<span class={twMerge('text-sm ml-2 h-full flex items-center flex-1', placeholderClass)}>
+		<span
+			class={twMerge('text-sm ml-4 h-full flex items-center flex-1 text-hint', placeholderClass)}
+		>
 			{placeholder}
 		</span>
 	{:else}
@@ -79,10 +83,10 @@ function clearValue() {
 			/>
 		</ul>
 	{/if}
-	{#if allowClear}
+	{#if allowClear && !hideMainClearBtn && !!value?.length}
 		<CloseButton
 			noBg
-			class="mr-1 remove-all"
+			class="mr-1 remove-all bg-transparent text-hint"
 			small
 			on:close={(e) => (clearValue(), e.stopPropagation())}
 		/>
@@ -108,12 +112,14 @@ function clearValue() {
 		{#snippet header()}
 			{#if processedItems.length - value.length > 0 || onCreateItem}
 				<div class="mx-2 mb-1 mt-2 flex items-center relative">
-					<input
+					<TextInput
 						bind:this={searchInputEl}
 						bind:value={filterText}
-						onblur={(e) => (e.preventDefault(), searchInputEl?.focus())}
-						placeholder="Search"
-						class="!pr-7"
+						inputProps={{
+							onblur: (e) => (e.preventDefault(), searchInputEl?.focus()),
+							placeholder: 'Search...'
+						}}
+						class="!pr-7 !bg-surface"
 					/>
 					<Search size={16} class="absolute right-2 text-tertiary" />
 				</div>

package/package/components/select/MultiSelect.svelte.d.ts

@@ -20,6 +20,7 @@ declare function $$render<Item extends {
         selectedUlClass?: string;
         placeholderClass?: string;
         allowClear?: boolean;
+        hideMainClearBtn?: boolean;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onOpen?: () => void;

package/package/components/select/Select.svelte

@@ -6,7 +6,8 @@ import { untrack } from 'svelte';
 import { getLabel, processItems } from './utils.svelte';
 import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet } = $props();
+import { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte';
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
 let disabled = $derived(_disabled || (loading && !value));
 let inputEl = $state();
 let processedItems = $derived.by(() => {
@@ -54,7 +55,7 @@ function clearValue() {
 		</div>
 	{:else if clearable && !disabled && value}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<CloseButton class="text-secondary" noBg small on:close={clearValue} />
+			<CloseButton class="bg-transparent text-hint" noBg small on:close={clearValue} />
 		</div>
 	{:else if RightIcon}
 		<div class="absolute z-10 right-2 h-full flex items-center">
@@ -72,10 +73,12 @@ function clearValue() {
 			: (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
 		style={containerStyle}
 		class={twMerge(
-			'!bg-surface text-ellipsis',
+			inputBaseClass,
+			inputBorderClass({ error, forceFocus: open }),
+			'w-full',
 			open ? '' : 'cursor-pointer',
-			!loading && value ? '!placeholder-primary' : '',
-			(clearable || RightIcon) && !disabled && value ? '!pr-8' : '',
+			!loading && value && !disabled ? '!placeholder-secondary' : 'placeholder-hint',
+			(clearable || RightIcon) && !disabled && value ? 'pr-8' : '',
 			inputClass ?? ''
 		)}
 		autocomplete="off"
@@ -94,6 +97,10 @@ function clearValue() {
 		getInputRect={inputEl && (() => inputEl!.getBoundingClientRect())}
 		{listAutoWidth}
 		{noItemsMsg}
+		{itemLabelWrapperClasses}
+		{itemButtonWrapperClasses}
 		{startSnippet}
+		{endSnippet}
+		{bottomSnippet}
 	/>
 </div>

package/package/components/select/Select.svelte.d.ts

@@ -18,12 +18,15 @@ declare function $$render<Item extends {
         inputClass?: string;
         disablePortal?: boolean;
         loading?: boolean;
+        error?: boolean;
         autofocus?: boolean;
         RightIcon?: any;
         createText?: string;
         noItemsMsg?: string;
         open?: boolean;
         id?: string;
+        itemLabelWrapperClasses?: string;
+        itemButtonWrapperClasses?: string;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onFocus?: () => void;
@@ -32,6 +35,14 @@ declare function $$render<Item extends {
         onCreateItem?: (value: string) => void;
         startSnippet?: Snippet<[{
             item: ProcessedItem<Item["value"]>;
+            close: () => void;
+        }]>;
+        endSnippet?: Snippet<[{
+            item: ProcessedItem<Item["value"]>;
+            close: () => void;
+        }]>;
+        bottomSnippet?: Snippet<[{
+            close: () => void;
         }]>;
     };
     exports: {};

package/package/components/select/SelectDropdown.svelte

@@ -2,7 +2,7 @@
 import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
 import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', header, getInputRect, onSelectValue, startSnippet } = $props();
+let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', itemLabelWrapperClasses = '', itemButtonWrapperClasses = '', header, getInputRect, onSelectValue, startSnippet, endSnippet, bottomSnippet } = $props();
 let processedItems = $derived(!filterText
     ? _processedItems
     : _processedItems?.filter((item) => item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())));
@@ -11,15 +11,15 @@ let dropdownPos = $state(computeDropdownPos());
 let keyArrowPos = $state();
 function computeDropdownPos() {
     if (!getInputRect || !listEl)
-        return { width: 0, x: 0, y: 0 };
+        return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
     let inputR = getInputRect();
     const listR = listEl.getBoundingClientRect();
-    const openBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
+    const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
     let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
-    if (openBelow)
-        return { width: inputR.width, x: x, y: y + inputR.height };
+    if (isBelow)
+        return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow };
     else {
-        return { width: inputR.width, x: x, y: y - listR.height };
+        return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow };
     }
 }
 $effect(() => {
@@ -38,11 +38,47 @@ $effect(() => {
     [open, processedItems];
     untrack(() => (keyArrowPos = open && filterText ? 0 : undefined));
 });
+// We do not want to render the dropdown when it is closed for performance reasons
+// but we want to keep it in the DOM for a short time to allow for transitions to finish
+//
+// We do not use Svelte transitions because they can not animate in the opposite direction
+// when the dropdown is opens above the input
+// Also CSS transitions are smoother because they do not rely on JS / animation frames
+let uiState = $state({ domExists: open, visible: open, timeout: null });
+let initial = true;
+$effect(() => {
+    let isOpen = open && !disabled;
+    untrack(() => {
+        if (initial) {
+            initial = false;
+            return;
+        }
+        if (uiState.timeout)
+            clearTimeout(uiState.timeout);
+        uiState = {
+            domExists: true,
+            visible: !isOpen,
+            timeout: setTimeout(() => {
+                if (isOpen) {
+                    uiState.visible = true;
+                    uiState.timeout = null;
+                }
+                else if (!isOpen) {
+                    uiState.visible = false;
+                    uiState.timeout = setTimeout(() => {
+                        uiState.domExists = false;
+                        uiState.timeout = null;
+                    }, 500); // leave time for transition to finish
+                }
+            }, 0) // We need the height to be 0 then change immediately for the transition to play
+        };
+    });
+});
 </script>
 
 <svelte:window
 	on:keydown={(e) => {
-		if (!open || !processedItems?.length) return
+		if (!uiState.visible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
 		} else if (e.key === 'ArrowDown') {
@@ -62,55 +98,71 @@ $effect(() => {
 />
 
 <ConditionalPortal condition={!disablePortal} name="select-dropdown-portal">
-	{#if open && !disabled}
+	{#if uiState.domExists}
 		<div
 			class={twMerge(
 				disablePortal ? 'absolute' : 'fixed',
-				'flex flex-col z-[5001] max-h-64 overflow-y-auto bg-surface-secondary text-tertiary text-sm select-none border rounded-lg shadow-lg',
+				'z-[5001] text-tertiary text-sm select-none',
+				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
+				uiState.visible ? '' : 'pointer-events-none',
 				className
 			)}
 			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
-				? `min-width: ${dropdownPos.width}px;`
+				? `min-width: ${dropdownPos.width}px; height: ${dropdownPos.height}px;`
 				: ''}"
-			bind:this={listEl}
 		>
-			{@render header?.()}
-			{#if processedItems?.length === 0}
-				<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
-			{/if}
-			<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
-				{#each processedItems ?? [] as item, itemIndex}
-					{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
-						<li
-							class={twMerge(
-								'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
-								itemIndex === 0 ? 'mt-3' : 'mt-6'
-							)}
-						>
-							{item.__select_group}
-						</li>
+			<div
+				class={twMerge(
+					'overflow-clip rounded-md bg-surface-secondary shadow-lg transition-height',
+					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
+				)}
+				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
+			>
+				<div bind:this={listEl} class="flex flex-col max-h-64 border rounded-md overflow-clip">
+					{@render header?.()}
+					{#if processedItems?.length === 0}
+						<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
 					{/if}
-					<li>
-						<button
-							class={twMerge(
-								'py-2 px-4 w-full font-normal text-left text-primary',
-								itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
-								item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover'
-							)}
-							onclick={(e) => {
-								e.stopImmediatePropagation()
-								onSelectValue(item)
-							}}
-						>
-							{@render startSnippet?.({ item })}
-							{item.label || '\xa0'}
-							{#if item.subtitle}
-								<div class="text-xs text-tertiary">{item.subtitle}</div>
+					<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
+						{#each processedItems ?? [] as item, itemIndex}
+							{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
+								<li
+									class={twMerge(
+										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
+										itemIndex === 0 ? 'mt-3' : 'mt-6'
+									)}
+								>
+									{item.__select_group}
+								</li>
 							{/if}
-						</button>
-					</li>
-				{/each}
-			</ul>
+							<li>
+								<button
+									class={twMerge(
+										'py-2 px-4 w-full font-normal text-left text-primary',
+										itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
+										item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover',
+										itemButtonWrapperClasses
+									)}
+									onclick={(e) => {
+										e.stopImmediatePropagation()
+										onSelectValue(item)
+									}}
+								>
+									{@render startSnippet?.({ item, close: () => (open = false) })}
+									<span class={itemLabelWrapperClasses}>
+										{item.label || '\xa0'}
+									</span>
+									{@render endSnippet?.({ item, close: () => (open = false) })}
+									{#if item.subtitle}
+										<div class="text-xs text-tertiary">{item.subtitle}</div>
+									{/if}
+								</button>
+							</li>
+						{/each}
+					</ul>
+					{@render bottomSnippet?.({ close: () => (open = false) })}
+				</div>
+			</div>
 		</div>
 	{/if}
 </ConditionalPortal>

package/package/components/select/SelectDropdown.svelte.d.ts

@@ -12,11 +12,21 @@ declare function $$render<T>(): {
         noItemsMsg?: string;
         class?: string;
         ulClass?: string;
+        itemLabelWrapperClasses?: string;
+        itemButtonWrapperClasses?: string;
         header?: Snippet;
         getInputRect?: () => DOMRect;
         onSelectValue: (item: ProcessedItem<T>) => void;
         startSnippet?: Snippet<[{
             item: ProcessedItem<T>;
+            close: () => void;
+        }]>;
+        endSnippet?: Snippet<[{
+            item: ProcessedItem<T>;
+            close: () => void;
+        }]>;
+        bottomSnippet?: Snippet<[{
+            close: () => void;
         }]>;
     };
     exports: {};

package/package/components/select/utils.svelte.js

@@ -39,6 +39,8 @@ export function getLabel(item) {
 export function safeSelectItems(list) {
     if (!list)
         return [];
+    if (!Array.isArray(list))
+        return [];
     return list
         .filter((item) => item !== undefined && item !== null)
         .map((item) => {

package/package/components/settings/CreateToken.svelte

@@ -11,7 +11,11 @@ import TokenDisplay from './TokenDisplay.svelte';
 import ScopeSelector from './ScopeSelector.svelte';
 import Alert from '../common/alert/Alert.svelte';
 import FolderPicker from '../FolderPicker.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import Select from '../select/Select.svelte';
 let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined) } = $props();
+// MCP clients do not allow names longer than 60 characters, here we use 55 because final tool name server side will add ~5 characters
+const MAX_PATH_LENGTH = 55;
 let newToken = $state(undefined);
 let newMcpToken = $state(undefined);
 let newTokenExpiration = $state(undefined);
@@ -83,8 +87,15 @@ async function createToken(mcpMode = false) {
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
 const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
-const warning = $derived(newMcpScope === 'favorites' ? `You do not have any favorite scripts or flows. You can favorite some scripts and flows to include them, or change the scope to "All scripts/flows" to include all your scripts and flows.` : 'Create your first scripts or flows to make them available via MCP.');
+const warning = $derived(newMcpScope === 'favorites'
+    ? `You do not have any favorite scripts or flows. You can favorite some scripts and flows to include them, or change the scope to "All scripts/flows" to include all your scripts and flows.`
+    : 'Create your first scripts or flows to make them available via MCP.');
 const noScriptsOrFlowsAvailableWarning = $derived(includedRunnables.length === 0 ? warning : '');
+const longPathRunnables = $derived(includedRunnables.filter((path) => path.length > MAX_PATH_LENGTH));
+const validRunnables = $derived(includedRunnables.filter((path) => path.length <= MAX_PATH_LENGTH));
+const longPathWarning = $derived(longPathRunnables.length > 0
+    ? `${longPathRunnables.length} script(s)/flow(s) have paths longer than 60 characters and will be excluded from MCP tools. Consider shortening the paths: ${longPathRunnables.slice(0, 3).join(', ')}${longPathRunnables.length > 3 ? ` and ${longPathRunnables.length - 3} more` : ''}`
+    : '');
 $effect(() => {
     if (mcpCreationMode) {
         getAllApps();
@@ -144,7 +155,10 @@ async function getScriptsAndFlows(favoriteOnly = false, workspace, folder) {
     }
     try {
         loadingRunnables = true;
-        const [scripts, flows] = await Promise.all([getScripts(favoriteOnly, workspace, folder), getFlows(favoriteOnly, workspace, folder)]);
+        const [scripts, flows] = await Promise.all([
+            getScripts(favoriteOnly, workspace, folder),
+            getFlows(favoriteOnly, workspace, folder)
+        ]);
         const combined = [...scripts, ...flows];
         runnablesCache.set(cacheKey, combined);
         includedRunnables = combined;
@@ -301,7 +315,11 @@ $effect(() => {
 
 			<div>
 				<span class="block mb-1">Label <span class="text-xs text-tertiary">(optional)</span></span>
-				<input type="text" bind:value={newTokenLabel} class="w-full" />
+				<TextInput
+					inputProps={{ type: 'text' }}
+					bind:value={newTokenLabel}
+					class="w-full !bg-surface"
+				/>
 			</div>
 
 			{#if !mcpCreationMode}
@@ -309,58 +327,66 @@ $effect(() => {
 					<span class="block mb-1"
 						>Expires In <span class="text-xs text-tertiary">(optional)</span></span
 					>
-					<select bind:value={newTokenExpiration} class="w-full">
-						<option value={undefined}>No expiration</option>
-						<option value={15 * 60}>15m</option>
-						<option value={30 * 60}>30m</option>
-						<option value={1 * 60 * 60}>1h</option>
-						<option value={1 * 24 * 60 * 60}>1d</option>
-						<option value={7 * 24 * 60 * 60}>7d</option>
-						<option value={30 * 24 * 60 * 60}>30d</option>
-						<option value={90 * 24 * 60 * 60}>90d</option>
-					</select>
+					<Select
+						bind:value={newTokenExpiration}
+						placeholder="No expiration"
+						inputClass="!bg-surface"
+						items={[
+							{ label: 'No expiration', value: undefined },
+							{ label: '15 minutes', value: 15 * 60 },
+							{ label: '30 minutes', value: 30 * 60 },
+							{ label: '1 hour', value: 1 * 60 * 60 },
+							{ label: '1 day', value: 1 * 24 * 60 * 60 },
+							{ label: '7 days', value: 7 * 24 * 60 * 60 },
+							{ label: '30 days', value: 30 * 24 * 60 * 60 },
+							{ label: '90 days', value: 90 * 24 * 60 * 60 }
+						]}
+					/>
 				</div>
 			{/if}
 			{#if mcpCreationMode && (newMcpScope !== 'folder' || selectedFolder.length > 0)}
-			{#if loadingRunnables}
-				<div class="flex flex-col gap-2 col-span-2 pr-4">
-					<span class="block text-xs text-tertiary">Scripts & Flows that will be available via MCP</span>
-					<div class="flex flex-wrap gap-1">
-						<Badge rounded small color="dark-gray" baseClass="animate-skeleton">Loading...</Badge>
-					</div>
-				</div>
-			{:else}
-				<div class="flex flex-col gap-2 col-span-2 pr-4">
-					{#if noScriptsOrFlowsAvailableWarning}
-					<Alert type="info" title="No scripts or flows available" size="xs">
-						{noScriptsOrFlowsAvailableWarning}
-					</Alert>
-					{:else}
-						<span class="block text-xs text-tertiary">Scripts & Flows that will be available via MCP</span>
+				{#if loadingRunnables}
+					<div class="flex flex-col gap-2 col-span-2 pr-4">
+						<span class="block text-xs text-tertiary"
+							>Scripts & Flows that will be available via MCP</span
+						>
 						<div class="flex flex-wrap gap-1">
-
-						{#if includedRunnables.length <= 5}
-							{#each includedRunnables as scriptOrFlow}
-								<Badge rounded small color="blue">{scriptOrFlow}</Badge>
-							{/each}
+							<Badge rounded small color="dark-gray" baseClass="animate-skeleton">Loading...</Badge>
+						</div>
+					</div>
+				{:else}
+					<div class="flex flex-col gap-2 col-span-2 pr-4">
+						{#if noScriptsOrFlowsAvailableWarning}
+							<Alert type="info" title="No scripts or flows available" size="xs">
+								{noScriptsOrFlowsAvailableWarning}
+							</Alert>
 						{:else}
-							{#each includedRunnables.slice(0, 3) as scriptOrFlow}
-								<Badge rounded small color="blue">{scriptOrFlow}</Badge>
-							{/each}
-							<Badge 
-								rounded 
-								small 
-								color="dark-gray" 
-							>
-								+{includedRunnables.length - 3} more
-							</Badge>
+							{#if longPathWarning}
+								<Alert type="warning" title="Some paths are too long" size="xs">
+									{longPathWarning}
+								</Alert>
 							{/if}
-						</div>
-					{/if}
-				</div>
-			{/if}
+							<span class="block text-xs text-tertiary"
+								>Scripts & Flows that will be available via MCP</span
+							>
+							<div class="flex flex-wrap gap-1">
+								{#if validRunnables.length <= 5}
+									{#each validRunnables as scriptOrFlow}
+										<Badge rounded small color="blue">{scriptOrFlow}</Badge>
+									{/each}
+								{:else}
+									{#each validRunnables.slice(0, 3) as scriptOrFlow}
+										<Badge rounded small color="blue">{scriptOrFlow}</Badge>
+									{/each}
+									<Badge rounded small color="dark-gray">
+										+{validRunnables.length - 3} more
+									</Badge>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{/if}
 			{/if}
-
 		</div>
 
 		<div class="mt-4 flex justify-end gap-2 flex-row">
@@ -373,7 +399,8 @@ $effect(() => {
 			</Button>
 			<Button
 				on:click={() => createToken(mcpCreationMode)}
-				disabled={mcpCreationMode && (newTokenWorkspace == undefined || (newMcpScope === 'folder' && !selectedFolder))}
+				disabled={mcpCreationMode &&
+					(newTokenWorkspace == undefined || (newMcpScope === 'folder' && !selectedFolder))}
 			>
 				New token
 			</Button>