windmill-components 1.511.1 → 1.531.0

package/package/components/schema/FlowPropertyEditor.svelte

@@ -57,6 +57,7 @@ function renameVariant(name, selected) {
     }
 }
 let initialObjectSelected = $state(Object.keys(properties ?? {}).length == 0 ? 'resource' : 'custom-object');
+let isDynSelect = $derived(format?.startsWith('dynselect-') ?? false);
 </script>
 
 <div class="flex flex-col gap-2">
@@ -182,13 +183,16 @@ let initialObjectSelected = $state(Object.keys(properties ?? {}).length == 0 ? '
 				bind:schema={
 					() => {
 						if (oneOf?.[idx]) {
+							let properties = Object.fromEntries(
+								Object.entries(oneOf[idx].properties ?? {}).filter(
+									([k]) => k !== 'label' && k !== 'kind'
+								)
+							)
 							return {
 								...oneOf[idx],
-								properties: Object.fromEntries(
-									Object.entries(oneOf[idx].properties ?? {}).filter(
-										([k]) => k !== 'label' && k !== 'kind'
-									)
-								)
+								properties: properties,
+								order: Object.keys(properties),
+								required: oneOf[idx].required ?? []
 							}
 						}
 					},
@@ -197,7 +201,6 @@ let initialObjectSelected = $state(Object.keys(properties ?? {}).length == 0 ? '
 							const tagKey = oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
 								? 'kind'
 								: 'label'
-
 							oneOf[idx] = {
 								...(v ?? {}),
 								type: 'object',
@@ -217,7 +220,7 @@ let initialObjectSelected = $state(Object.keys(properties ?? {}).length == 0 ? '
 				}}
 			/>
 		{/if}
-	{:else if type === 'object' && format !== 'resource-s3_object'}
+	{:else if type === 'object' && format !== 'resource-s3_object' && !isDynSelect}
 		<Tabs
 			bind:selected={initialObjectSelected}
 			on:selected={(e) => {
@@ -258,7 +261,7 @@ let initialObjectSelected = $state(Object.keys(properties ?? {}).length == 0 ? '
 		</Tabs>
 	{/if}
 
-	{#if !(type === 'object' && oneOf && oneOf.length >= 2) && !(type == 'object' && initialObjectSelected == 'custom-object')}
+	{#if !(type === 'object' && oneOf && oneOf.length >= 2) && !(type == 'object' && initialObjectSelected == 'custom-object') && !isDynSelect}
 		<Label label="Default">
 			<ArgInput
 				noDefaultOnSelectFirst

package/package/components/schema/FlowPropertyEditor.svelte.d.ts

@@ -47,6 +47,6 @@ declare const FlowPropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     requiredChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "disabled" | "properties" | "defaultValue" | "oneOf" | "format" | "showExpr" | "order" | "nullable" | "requiredProperty">;
+}, {}, {}, "disabled" | "properties" | "defaultValue" | "oneOf" | "format" | "order" | "nullable" | "showExpr" | "requiredProperty">;
 type FlowPropertyEditor = InstanceType<typeof FlowPropertyEditor>;
 export default FlowPropertyEditor;

package/package/components/schema/PropertyEditor.svelte

@@ -198,8 +198,6 @@ $effect(() => {
 									/>
 								</div>
 							{/if}
-						{:else if type == 'object' && format?.startsWith('dynselect-')}
-							<div class="text-tertiary text-xs">No settings available for Dynamic Select</div>
 						{:else if type == 'object' && !format?.startsWith('resource-') && !isFlowInput && !isAppInput}
 							<div class="border">
 								<EditableSchemaForm

package/package/components/schema/PropertyEditor.svelte.d.ts

@@ -46,6 +46,6 @@ declare const PropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "description" | "title" | "properties" | "placeholder" | "pattern" | "extra" | "oneOf" | "format" | "contentEncoding" | "customErrorMessage" | "order" | "enum_" | "itemsType">;
+}, "description" | "title" | "properties" | "placeholder" | "pattern" | "extra" | "oneOf" | "format" | "order" | "enum_" | "contentEncoding" | "itemsType" | "customErrorMessage">;
 type PropertyEditor = InstanceType<typeof PropertyEditor>;
 export default PropertyEditor;

package/package/components/schema/SchemaFormDND.svelte

@@ -3,7 +3,7 @@ import { dragHandle } from '@windmill-labs/svelte-dnd-action';
 import SchemaForm from '../SchemaForm.svelte';
 import { GripVertical } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
-let { dndType = undefined, schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false } = $props();
+let { dndType = undefined, schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -66,6 +66,7 @@ $effect(() => {
 	{onlyMaskPassword}
 	{disablePortal}
 	{disabled}
+	{helperScript}
 	bind:schema
 	dndConfig={disableDnd
 		? undefined

package/package/components/schema/SchemaFormDND.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Schema } from '../../common';
 import type { SchemaDiff } from './schemaUtils.svelte';
+import type { DynamicSelect } from '../../utils';
 interface Props {
     dndType?: string | undefined;
     schema: Schema;
@@ -19,6 +20,7 @@ interface Props {
     nestedClasses?: string;
     isValid?: boolean;
     noVariablePicker?: boolean;
+    helperScript?: DynamicSelect.HelperScript;
 }
 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/scriptEditor/LogPanel.svelte

@@ -49,6 +49,7 @@ let forceJson = $state(false);
 				result={drawerContent.content}
 				customUi={customUi?.displayResult}
 				language={lang}
+				result_stream={previewJob?.result_stream}
 			/>
 		{:else if drawerContent?.mode === 'plain'}
 			<pre
@@ -60,7 +61,6 @@ let forceJson = $state(false);
 		{/if}
 	</DrawerContent>
 </Drawer>
-
 <div class="h-full flex flex-col">
 	<Tabs bind:selected={selectedTab} class="pt-1" wrapperClass="flex-none">
 		<Tab value="logs" size="xs">Logs & Result</Tab>
@@ -98,9 +98,9 @@ let forceJson = $state(false);
 							</Pane>
 							<Pane>
 								{@render children?.()}
-								{#if previewJob != undefined && 'result' in previewJob}
+								{#if previewJob != undefined && (previewJob.result_stream || previewJob.result)}
 									<div class="relative w-full h-full p-2">
-										<div class="relative">
+										<div class="relative h-full">
 											<DisplayResult
 												bind:forceJson
 												workspaceId={previewJob?.workspace_id}
@@ -108,6 +108,8 @@ let forceJson = $state(false);
 												result={previewJob.result}
 												customUi={customUi?.displayResult}
 												language={lang}
+												result_stream={previewJob?.result_stream}
+												fixTableSizingToParent
 											>
 												{#snippet copilot_fix()}
 													{#if lang && editor && diffEditor && args && previewJob && !previewJob.success && getStringError(previewJob.result)}

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -5,7 +5,11 @@ import type { PreviewPanelUi } from '../custom_ui';
 interface Props {
     lang: Preview['language'] | undefined;
     previewIsLoading?: boolean;
-    previewJob: Job | undefined;
+    previewJob: (Job & {
+        result_stream?: string;
+        result?: any;
+        success?: boolean;
+    }) | undefined;
     pastPreviews?: CompletedJob[];
     editor?: Editor | undefined;
     diffEditor?: DiffEditor | undefined;

package/package/components/search/RunsSearch.svelte

@@ -8,7 +8,7 @@ import { Alert } from '../common';
 import QuickMenuItem from './QuickMenuItem.svelte';
 import { goto } from '$app/navigation';
 import { displayDateOnly } from '../../utils';
-import JobPreview from '../runs/JobPreview.svelte';
+import JobPreview from '../runs/JobRunsPreview.svelte';
 let debounceTimeout = undefined;
 const debouncePeriod = 1000;
 let loadingCompletedRuns = $state(false);

package/package/components/select/Select.svelte

@@ -6,8 +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), groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem } = $props();
-let disabled = $derived(_disabled || loading);
+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), groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet } = $props();
+let disabled = $derived(_disabled || (loading && !value));
 let inputEl = $state();
 let processedItems = $derived.by(() => {
     let args = { items, createText, filterText, groupBy, onCreateItem, sortBy };
@@ -67,12 +67,14 @@ function clearValue() {
 		{disabled}
 		type="text"
 		bind:value={() => filterText, (v) => (filterText = v)}
-		placeholder={loading ? 'Loading...' : (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
+		placeholder={loading && !value
+			? 'Loading...'
+			: (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
 		style={containerStyle}
 		class={twMerge(
 			'!bg-surface text-ellipsis',
 			open ? '' : 'cursor-pointer',
-			value && !loading ? '!placeholder-primary' : '',
+			!loading && value ? '!placeholder-primary' : '',
 			(clearable || RightIcon) && !disabled && value ? '!pr-8' : '',
 			inputClass ?? ''
 		)}
@@ -91,5 +93,6 @@ function clearValue() {
 		getInputRect={inputEl && (() => inputEl!.getBoundingClientRect())}
 		{listAutoWidth}
 		{noItemsMsg}
+		{startSnippet}
 	/>
 </div>

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

@@ -1,3 +1,5 @@
+import { type Snippet } from 'svelte';
+import { type ProcessedItem } from './utils.svelte';
 declare class __sveltets_Render<Item extends {
     label?: string;
     value: any;
@@ -27,6 +29,9 @@ declare class __sveltets_Render<Item extends {
         onBlur?: (() => void) | undefined;
         onClear?: (() => void) | undefined;
         onCreateItem?: ((value: string) => void) | undefined;
+        startSnippet?: Snippet<[{
+            item: ProcessedItem<Item["value"]>;
+        }]> | undefined;
     };
     events(): {};
     slots(): {};

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 } = $props();
+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 = $derived(!filterText
     ? _processedItems
     : _processedItems?.filter((item) => item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())));
@@ -102,6 +102,7 @@ $effect(() => {
 								onSelectValue(item)
 							}}
 						>
+							{@render startSnippet?.({ item })}
 							{item.label || '\xa0'}
 							{#if item.subtitle}
 								<div class="text-xs text-tertiary">{item.subtitle}</div>

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

@@ -15,6 +15,9 @@ declare class __sveltets_Render<T> {
         header?: Snippet;
         getInputRect?: (() => DOMRect) | undefined;
         onSelectValue: (item: ProcessedItem<T>) => void;
+        startSnippet?: Snippet<[{
+            item: ProcessedItem<T>;
+        }]> | undefined;
     };
     events(): {};
     slots(): {};

package/package/components/settings/CreateToken.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">import { userWorkspaces, workspaceStore } from '../../stores';
-import { Button } from '../common';
+import { Badge, Button } from '../common';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 import Toggle from '../Toggle.svelte';
-import { IntegrationService, UserService } from '../../gen';
-import { createEventDispatcher } from 'svelte';
+import { FlowService, IntegrationService, ScriptService, UserService } from '../../gen';
 import MultiSelect from '../select/MultiSelect.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
 import TokenDisplay from './TokenDisplay.svelte';
 import ScopeSelector from './ScopeSelector.svelte';
+import Alert from '../common/alert/Alert.svelte';
+import FolderPicker from '../FolderPicker.svelte';
 let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined) } = $props();
 let newToken = $state(undefined);
 let newMcpToken = $state(undefined);
@@ -21,9 +22,12 @@ let newMcpScope = $state('favorites');
 let loadingApps = $state(false);
 let errorFetchApps = $state(false);
 let allApps = $state([]);
+let loadingRunnables = $state(false);
+let includedRunnables = $state([]);
+let selectedFolder = $state('');
+let runnablesCache = new Map();
 let customScopes = $state([]);
 let showCustomScopes = $state(false);
-const dispatch = createEventDispatcher();
 function ensureCurrentWorkspaceIncluded(workspacesList, currentWorkspace) {
     if (!currentWorkspace) {
         return workspacesList;
@@ -42,7 +46,13 @@ async function createToken(mcpMode = false) {
         }
         let tokenScopes = scopes;
         if (mcpMode) {
-            tokenScopes = [`mcp:${newMcpScope}`];
+            if (newMcpScope === 'folder') {
+                const folderPath = `f/${selectedFolder}/*`;
+                tokenScopes = [`mcp:all:${folderPath}`];
+            }
+            else {
+                tokenScopes = [`mcp:${newMcpScope}`];
+            }
             if (newMcpApps.length > 0) {
                 tokenScopes.push(`mcp:hub:${newMcpApps.join(',')}`);
             }
@@ -64,10 +74,7 @@ async function createToken(mcpMode = false) {
         else {
             newToken = `${createdToken}`;
         }
-        dispatch('tokenCreated', newToken ?? newMcpToken);
-        if (onTokenCreated) {
-            onTokenCreated(newToken ?? newMcpToken ?? '');
-        }
+        onTokenCreated(newToken ?? newMcpToken ?? '');
         mcpCreationMode = false;
     }
     catch (err) {
@@ -76,6 +83,8 @@ 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 noScriptsOrFlowsAvailableWarning = $derived(includedRunnables.length === 0 ? warning : '');
 $effect(() => {
     if (mcpCreationMode) {
         getAllApps();
@@ -103,6 +112,64 @@ async function getAllApps() {
         loadingApps = false;
     }
 }
+async function getScripts(favoriteOnly = false, workspace, folder) {
+    if (!workspace) {
+        return [];
+    }
+    const pathStart = folder ? `f/${folder}` : undefined;
+    const scripts = await ScriptService.listScripts({
+        starredOnly: favoriteOnly,
+        workspace,
+        pathStart
+    });
+    return scripts.map((x) => x.path);
+}
+async function getFlows(favoriteOnly = false, workspace, folder) {
+    if (!workspace) {
+        return [];
+    }
+    const pathStart = folder ? `f/${folder}` : undefined;
+    const flows = await FlowService.listFlows({
+        starredOnly: favoriteOnly,
+        workspace,
+        pathStart
+    });
+    return flows.map((x) => x.path);
+}
+async function getScriptsAndFlows(favoriteOnly = false, workspace, folder) {
+    const cacheKey = `${workspace}-${favoriteOnly}${folder ? `-${folder}` : ''}`;
+    if (runnablesCache.has(cacheKey)) {
+        includedRunnables = runnablesCache.get(cacheKey) || [];
+        return;
+    }
+    try {
+        loadingRunnables = true;
+        const [scripts, flows] = await Promise.all([getScripts(favoriteOnly, workspace, folder), getFlows(favoriteOnly, workspace, folder)]);
+        const combined = [...scripts, ...flows];
+        runnablesCache.set(cacheKey, combined);
+        includedRunnables = combined;
+    }
+    finally {
+        loadingRunnables = false;
+    }
+}
+$effect(() => {
+    if (mcpCreationMode) {
+        const workspace = newTokenWorkspace || $workspaceStore;
+        if (workspace) {
+            const folderParam = selectedFolder.length > 0 ? selectedFolder : undefined;
+            getScriptsAndFlows(newMcpScope === 'favorites', workspace, folderParam);
+        }
+    }
+    else {
+        includedRunnables = [];
+    }
+});
+$effect(() => {
+    if (mcpCreationMode && newMcpScope !== 'folder') {
+        selectedFolder = '';
+    }
+});
 </script>
 
 <div>
@@ -189,10 +256,23 @@ async function getAllApps() {
 								label="All scripts/flows"
 								tooltip="Make all your scripts and flows available as tools"
 							/>
+							<ToggleButton
+								{item}
+								value="folder"
+								label="Folder"
+								tooltip="Make all scripts and flows in the selected folder available as tools"
+							/>
 						{/snippet}
 					</ToggleButtonGroup>
 				</div>
 
+				{#if newMcpScope === 'folder'}
+					<div>
+						<span class="block mb-1">Select Folder</span>
+						<FolderPicker bind:folderName={selectedFolder} />
+					</div>
+				{/if}
+
 				<div>
 					<span class="block mb-1">Hub scripts (optional)</span>
 					{#if loadingApps}
@@ -241,6 +321,46 @@ async function getAllApps() {
 					</select>
 				</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>
+						<div class="flex flex-wrap gap-1">
+
+						{#if includedRunnables.length <= 5}
+							{#each includedRunnables as scriptOrFlow}
+								<Badge rounded small color="blue">{scriptOrFlow}</Badge>
+							{/each}
+						{: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}
+						</div>
+					{/if}
+				</div>
+			{/if}
+			{/if}
+
 		</div>
 
 		<div class="mt-4 flex justify-end gap-2 flex-row">
@@ -253,7 +373,7 @@ async function getAllApps() {
 			</Button>
 			<Button
 				on:click={() => createToken(mcpCreationMode)}
-				disabled={mcpCreationMode && newTokenWorkspace == undefined}
+				disabled={mcpCreationMode && (newTokenWorkspace == undefined || (newMcpScope === 'folder' && !selectedFolder))}
 			>
 				New token
 			</Button>
@@ -261,10 +381,10 @@ async function getAllApps() {
 	</div>
 
 	{#if newToken}
-		<TokenDisplay token={newToken} type="token" />
+		<TokenDisplay token={newToken} />
 	{/if}
 
 	{#if newMcpToken}
-		<TokenDisplay token={newMcpToken} type="mcp" mcpUrl={`${mcpBaseUrl}${newMcpToken}`} />
+		<TokenDisplay token={newMcpToken} mcpUrl={`${mcpBaseUrl}${newMcpToken}`} />
 	{/if}
 </div>

package/package/components/settings/CreateToken.svelte.d.ts

@@ -4,26 +4,9 @@ interface Props {
     newTokenLabel?: string;
     defaultNewTokenWorkspace?: string;
     scopes?: string[];
-    onTokenCreated?: (token: string) => void;
+    onTokenCreated: (token: string) => void;
     displayCreateToken?: boolean;
 }
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CreateToken: $$__sveltets_2_IsomorphicComponent<Props, {
-    tokenCreated: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "newTokenLabel">;
-type CreateToken = InstanceType<typeof CreateToken>;
+declare const CreateToken: import("svelte").Component<Props, {}, "newTokenLabel">;
+type CreateToken = ReturnType<typeof CreateToken>;
 export default CreateToken;

package/package/components/settings/TokenDisplay.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">import { copyToClipboard } from '../../utils';
 import { Clipboard } from 'lucide-svelte';
-import ClipboardPanel from '../details/ClipboardPanel.svelte';
 import Alert from '../common/alert/Alert.svelte';
-let { token, type = 'token', mcpUrl, title, onCopy } = $props();
+let { token, mcpUrl, title, onCopy } = $props();
 function handleCopyClick() {
     copyToClipboard(token);
     onCopy?.();
 }
-const displayTitle = $derived(title || (type === 'mcp' ? 'MCP URL Generated Successfully' : 'Token Created Successfully'));
+const displayTitle = $derived(title || (mcpUrl ? 'MCP URL Generated Successfully' : 'Token Created Successfully'));
+const label = $derived(mcpUrl ? 'Your MCP Server URL' : 'Your Token');
+const info = $derived(`Make sure to copy your ${mcpUrl ? 'MCP Server URL' : 'personal access token'} now. You won\'t be able to see it again!`);
+const tokenOrUrl = $derived(mcpUrl ? mcpUrl : token);
 const colorScheme = {
     gradient: 'from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20',
     border: 'border-blue-200 dark:border-blue-700',
@@ -24,7 +26,7 @@ const colorScheme = {
 <div class="border rounded-lg mb-6 p-4 bg-gradient-to-r {colorScheme.gradient} {colorScheme.border} shadow-sm">
 	<div class="flex items-start gap-3">
 		<div class="flex-shrink-0 w-8 h-8 {colorScheme.iconBg} rounded-full flex items-center justify-center mt-0.5">
-			{#if type === 'mcp'}
+			{#if mcpUrl}
 				<svg class="w-4 h-4 {colorScheme.iconColor}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
 				</svg>
@@ -39,24 +41,16 @@ const colorScheme = {
 				{displayTitle}
 			</h4>
 			
-			{#if type === 'mcp' && mcpUrl}
 				<div class="space-y-3">
 					<div>
 						<!-- svelte-ignore a11y_label_has_associated_control -->
-						<label class="block text-xs font-medium {colorScheme.labelColor} mb-1">
-							Your MCP Server URL:
-						</label>
-						<ClipboardPanel content={mcpUrl} />
-					</div>
-					<div>
-						<!-- svelte-ignore a11y_label_has_associated_control -->
-						<label class="block text-xs font-medium {colorScheme.labelColor} mb-1">
-							Your Token:
+						<label class="block text-xs font-medium {colorScheme.labelColor} mb-1 mt-4">
+							{label}
 						</label>
 						<div class="bg-white dark:bg-gray-800 rounded-md p-3 border {colorScheme.border}">
 							<div class="flex items-center justify-between gap-2">
 								<code class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all flex-1">
-									{token}
+									{tokenOrUrl}
 								</code>
 								<button 
 									onclick={handleCopyClick} 
@@ -69,35 +63,17 @@ const colorScheme = {
 						</div>
 					</div>
 					<Alert type="warning" title="Important" size="xs">
-						Make sure to copy both the URL and token now. You won't be able to see them again!
-					</Alert>
-					<div class="{colorScheme.infoBg} rounded-md p-2 border {colorScheme.infoBorder}">
-						<p class="text-xs {colorScheme.infoText}">
-							<strong>Next steps:</strong> Use this URL in your MCP-compatible client (like Claude Desktop) to access your Windmill scripts and flows as tools.
-						</p>
-					</div>
-				</div>
-			{:else}
-				<div class="bg-white dark:bg-gray-800 rounded-md p-3 border {colorScheme.border}">
-					<div class="flex items-center justify-between gap-2">
-						<code class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all flex-1">
-							{token}
-						</code>
-						<button 
-							onclick={handleCopyClick} 
-							class="flex-shrink-0 p-1.5 text-gray-500 hover:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
-							title="Copy token"
-						>
-							<Clipboard size={16} />
-						</button>
-					</div>
-				</div>
-				<div class="mt-3">
-					<Alert type="warning" title="Important" size="xs">
-						Make sure to copy your personal access token now. You won't be able to see it again!
+						{info}
 					</Alert>
+					{#if mcpUrl}
+						<div class="{colorScheme.infoBg} rounded-md p-2 border {colorScheme.infoBorder}">
+							<p class="text-xs {colorScheme.infoText}">
+								<strong>Next steps:</strong> Use this URL in your MCP-compatible client (like Claude Desktop) to access your Windmill scripts and flows as tools.
+							</p>
+						</div>
+					{/if}
 				</div>
-			{/if}
+			
 		</div>
 	</div>
 </div>

package/package/components/settings/TokenDisplay.svelte.d.ts

@@ -1,6 +1,5 @@
 interface Props {
     token: string;
-    type?: 'token' | 'mcp';
     mcpUrl?: string;
     title?: string;
     onCopy?: () => void;

package/package/components/settings/TokensTable.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">import TableCustom from '../TableCustom.svelte';
 import { displayDate } from '../../utils';
 import { UserService } from '../../gen';
-import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../../toast';
 import CreateToken from './CreateToken.svelte';
-let { showMcpMode = false, openWithMcpMode = false, defaultNewTokenLabel, defaultNewTokenWorkspace, scopes } = $props();
+let { showMcpMode = false, openWithMcpMode = false, defaultNewTokenLabel, defaultNewTokenWorkspace, scopes, onTokenCreated } = $props();
 // --- Local State ---
 let tokens = $state([]);
 let tokenPage = $state(1);
 let newTokenLabel = $state(defaultNewTokenLabel);
-const dispatch = createEventDispatcher();
 $effect(() => {
     listTokens();
 });
 function handleTokenCreated(token) {
-    dispatch('tokenCreated', token);
+    onTokenCreated(token);
     listTokens();
 }
 async function handleDeleteClick(tokenPrefix) {