windmill-components 1.522.0 → 1.531.1

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) {

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

@@ -4,24 +4,8 @@ interface Props {
     defaultNewTokenLabel?: string;
     defaultNewTokenWorkspace?: string;
     scopes?: string[];
+    onTokenCreated: (token: string) => void;
 }
-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 TokensTable: $$__sveltets_2_IsomorphicComponent<Props, {
-    tokenCreated: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type TokensTable = InstanceType<typeof TokensTable>;
+declare const TokensTable: import("svelte").Component<Props, {}, "">;
+type TokensTable = ReturnType<typeof TokensTable>;
 export default TokensTable;