windmill-components 1.623.1 → 1.623.2

package/package/assets/tokens/tokens.json

@@ -226,7 +226,17 @@
 			"yellow-700": "#8a6e31",
 			"yellow-800": "#61512d",
 			"yellow-900": "#443d22",
-			"yellow-950": "#3a351a"
+			"yellow-950": "#3a351a",
+			"magenta-100": "#fae8fd",
+			"magenta-200": "#f0c6fb",
+			"magenta-300": "#e89ffa",
+			"magenta-400": "#de75f8",
+			"magenta-500": "#d551f5",
+			"magenta-600": "#bf41dd",
+			"magenta-700": "#b03dd8",
+			"magenta-800": "#963cc7",
+			"magenta-900": "#8537c0",
+			"magenta-950": "#6e2ba1"
 		}
 	},
 	"guidelines": { "mode-1": { "blue": "#5e81ac", "demo-background": "#ffffff00" } },

package/package/ata/apis.js

@@ -1,20 +1,80 @@
 //  https://github.com/jsdelivr/data.jsdelivr.com
 import pLimit from 'p-limit';
-export const getNPMVersionsForModule = (moduleName, resLimit) => {
+import { workspaceStore } from '../stores';
+import { get } from 'svelte/store';
+// Backend proxy fallback functions
+const getBackendProxyUrl = () => {
+    const workspace = get(workspaceStore);
+    if (!workspace) {
+        throw new Error('No workspace available');
+    }
+    return `/api/w/${workspace}/npm_proxy`;
+};
+const backendProxyApi = async (endpoint, resLimit) => {
+    if (isOverlimit(resLimit)) {
+        console.warn(`Exceeded limit of types downloaded for the needs of the assistant fetching: ${endpoint}, ${resLimit.usage}`);
+        return new Error('Exceeded limit of 100MB of data downloaded.');
+    }
+    try {
+        const baseUrl = getBackendProxyUrl();
+        const url = `${baseUrl}${endpoint}`;
+        return limit(() => fetch(url, { credentials: 'include' }).then((res) => {
+            if (res.ok) {
+                return res.text().then((text) => {
+                    resLimit.usage += text.length;
+                    console.log('resLimit (backend proxy)', url, resLimit.usage);
+                    return JSON.parse(text);
+                });
+            }
+            else {
+                return new Error('Backend proxy request failed');
+            }
+        }));
+    }
+    catch (e) {
+        return new Error('Backend proxy not available');
+    }
+};
+export const getNPMVersionsForModule = async (moduleName, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}`;
-    return api(url, resLimit, {
+    const result = await api(url, resLimit, {
         cache: 'no-store'
     });
+    // If jsdelivr fails, try backend proxy
+    if (result instanceof Error) {
+        console.log('jsdelivr failed for', moduleName, 'trying backend proxy');
+        return backendProxyApi(`/metadata/${encodeURIComponent(moduleName)}`, resLimit);
+    }
+    return result;
 };
-export const getNPMVersionForModuleReference = (moduleName, reference, resLimit) => {
+export const getNPMVersionForModuleReference = async (moduleName, reference, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/resolve/npm/${moduleName}@${reference}`;
-    return api(url, resLimit);
+    const result = await api(url, resLimit);
+    // If jsdelivr fails, try backend proxy
+    if (result instanceof Error) {
+        console.log('jsdelivr failed for', moduleName, reference, 'trying backend proxy');
+        return backendProxyApi(`/resolve/${encodeURIComponent(moduleName)}?tag=${encodeURIComponent(reference)}`, resLimit);
+    }
+    return result;
 };
 export const getFiletreeForModuleWithVersion = async (moduleName, version, raw, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}@${version}/flat`;
     const res = await api(url, resLimit);
     if (res instanceof Error) {
-        return res;
+        // Try backend proxy
+        console.log('jsdelivr failed for', moduleName, version, 'trying backend proxy');
+        const backendRes = await backendProxyApi(`/filetree/${encodeURIComponent(moduleName)}/${encodeURIComponent(version)}`, resLimit);
+        if (backendRes instanceof Error) {
+            return res;
+        }
+        else {
+            return {
+                ...backendRes,
+                moduleName,
+                version,
+                raw
+            };
+        }
     }
     else {
         return {
@@ -33,6 +93,19 @@ export const getDTSFileForModuleWithVersion = async (moduleName, version, file)
         return res.text();
     }
     else {
+        // Try backend proxy
+        console.log('jsdelivr failed for file', moduleName, version, file, 'trying backend proxy');
+        try {
+            const baseUrl = getBackendProxyUrl();
+            const proxyUrl = `${baseUrl}/file/${encodeURIComponent(moduleName)}/${encodeURIComponent(version)}${file}`;
+            const proxyRes = await limit(() => fetch(proxyUrl, { credentials: 'include' }));
+            if (proxyRes.ok) {
+                return proxyRes.text();
+            }
+        }
+        catch (e) {
+            console.log('Backend proxy failed for file', e);
+        }
         return new Error('OK');
     }
 };

package/package/cancelable-promise-utils.js

@@ -29,8 +29,10 @@ export var CancelablePromiseUtils;
     }
     CancelablePromiseUtils.map = map;
     function pipe(promise, f) {
-        promise.then((value) => {
-            f(value);
+        promise
+            .then((value) => f(value))
+            .catch(() => {
+            // we are just piping, ignore errors
         });
         return promise;
     }

package/package/components/AddUser.svelte

@@ -78,7 +78,7 @@ let selected = $state('developer');
 				<input type="text" onkeyup={handleKeyUp} placeholder="username" bind:value={username} />
 			{/if}
 
-			<span class="text-xs mb-1 pt-2 leading-6">Role</span>
+			<span class="text-xs mb-1 pt-6 leading-6">Role</span>
 			<ToggleButtonGroup bind:selected class="mb-4">
 				{#snippet children({ item })}
 					<ToggleButton

package/package/components/ApiConnectForm.svelte

@@ -11,6 +11,8 @@ import { Loader2 } from 'lucide-svelte';
 import { untrack } from 'svelte';
 import { base } from '../base';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
+import BedrockCredentialsCheck from './BedrockCredentialsCheck.svelte';
+import { isCloudHosted } from '../cloud';
 let { resourceType, resourceTypeInfo, args = $bindable({}), linkedSecret = $bindable(undefined), isValid = $bindable(true), linkedSecretCandidates = undefined, description = $bindable(undefined) } = $props();
 let schema = $state(emptySchema());
 let notFound = $state(false);
@@ -117,6 +119,7 @@ $effect(() => {
 			options={{
 				right: 'As JSON'
 			}}
+			class="as-json-toggle"
 		/>
 		<TestConnection {resourceType} {args} />
 		{#if resourceType == 'postgresql'}
@@ -181,6 +184,9 @@ $effect(() => {
 			onDescriptionUpdate={(newDescription) => (description = newDescription)}
 		/>
 	</div>
+	{#if resourceType?.includes('bedrock') && !isCloudHosted()}
+		<BedrockCredentialsCheck />
+	{/if}
 {:else}
 	<p class="text-primary font-normal text-xs mb-4"
 		>No corresponding resource type found in your workspace for {resourceType}. Define the value in

package/package/components/AppConnectDrawer.svelte

@@ -36,6 +36,7 @@ let darkMode = false;
 >
 	<DrawerContent
 		title="Add a resource"
+		id="add-resource-drawer"
 		on:close={drawer.closeDrawer}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"

package/package/components/AppConnectInner.svelte

@@ -470,6 +470,7 @@ let hubRtSync = usePromise(async () => {
 				placeholder="Search resource type"
 				bind:value={filter}
 				class="text-2xl grow"
+				id="search-resource-type"
 			/>
 		</div>
 

package/package/components/AuthSettings.svelte

@@ -7,6 +7,7 @@ import KeycloakSetting from './KeycloakSetting.svelte';
 import CustomSso from './CustomSso.svelte';
 import AuthentikSetting from './AuthentikSetting.svelte';
 import AutheliaSetting from './AutheliaSetting.svelte';
+import PocketIdSetting from './PocketIdSetting.svelte';
 import KanidmSetting from './KanidmSetting.svelte';
 import ZitadelSetting from './ZitadelSetting.svelte';
 import NextcloudSetting from './NextcloudSetting.svelte';
@@ -223,11 +224,12 @@ function generateOAuthDropdownItems() {
 				<KeycloakSetting bind:value={oauths['keycloak']} />
 				<AuthentikSetting bind:value={oauths['authentik']} />
 				<AutheliaSetting bind:value={oauths['authelia']} />
+				<PocketIdSetting bind:value={oauths['pocketid']} />
 				<KanidmSetting bind:value={oauths['kanidm']} />
 				<ZitadelSetting bind:value={oauths['zitadel']} />
 				<NextcloudSetting bind:value={oauths['nextcloud']} {baseUrl} />
 				{#each Object.keys(oauths) as k}
-					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud'].includes(k) && oauths[k] && 'login_config' in oauths[k]}
+					{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'auth0', 'keycloak', 'slack', 'kanidm', 'zitadel', 'nextcloud', 'pocketid'].includes(k) && oauths[k] && 'login_config' in oauths[k]}
 						{#if oauths[k]}
 							<div class="flex flex-col gap-2 pb-4">
 								<div class="flex flex-row items-center gap-2">

package/package/components/BedrockCredentialsCheck.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { tryEvery } from '../utils';
+import { Check, LoaderCircle, Server, X, Cpu } from 'lucide-svelte';
+import Button from './common/button/Button.svelte';
+let apiStatus = $state('idle');
+let apiResult = $state(null);
+let workerStatus = $state('idle');
+let workerResult = $state(null);
+let isChecking = $state(false);
+async function checkApiCredentials() {
+    apiStatus = 'loading';
+    apiResult = null;
+    try {
+        const response = await fetch(`/api/w/${$workspaceStore}/ai/check_bedrock_credentials`);
+        if (!response.ok) {
+            throw new Error(`HTTP error: ${response.status}`);
+        }
+        apiResult = await response.json();
+        apiStatus = apiResult?.available ? 'success' : 'error';
+    }
+    catch (err) {
+        apiResult = {
+            available: false,
+            error: err instanceof Error ? err.message : 'Unknown error'
+        };
+        apiStatus = 'error';
+    }
+}
+async function checkWorkerCredentials() {
+    workerStatus = 'loading';
+    workerResult = null;
+    try {
+        // Create minimal flow with AI agent dry_run step
+        const flowValue = {
+            modules: [
+                {
+                    id: 'a',
+                    value: {
+                        type: 'aiagent',
+                        input_transforms: {
+                            provider: {
+                                type: 'static',
+                                value: {
+                                    kind: 'aws_bedrock',
+                                    resource: {
+                                        api_key: 'dry_run_placeholder',
+                                        region: 'us-east-1'
+                                    },
+                                    model: 'dry_run_placeholder'
+                                }
+                            },
+                            user_message: { type: 'static', value: 'dry_run_placeholder' },
+                            output_type: { type: 'static', value: 'text' },
+                            credentials_check: { type: 'static', value: true }
+                        },
+                        tools: []
+                    }
+                }
+            ]
+        };
+        const job = await JobService.runFlowPreview({
+            workspace: $workspaceStore,
+            requestBody: {
+                value: flowValue,
+                args: {}
+            }
+        });
+        tryEvery({
+            tryCode: async () => {
+                const testResult = await JobService.getCompletedJob({
+                    workspace: $workspaceStore,
+                    id: job
+                });
+                if (testResult.success && testResult.result) {
+                    const result = testResult.result;
+                    if (result?.credentials_check && result?.credentials) {
+                        workerResult = {
+                            ...result.credentials,
+                            source: 'worker_process',
+                            worker: testResult.worker ?? undefined
+                        };
+                        workerStatus = workerResult.available ? 'success' : 'error';
+                    }
+                    else {
+                        workerResult = {
+                            available: false,
+                            error: 'Unexpected response format',
+                            worker: testResult.worker ?? undefined
+                        };
+                        workerStatus = 'error';
+                    }
+                }
+                else {
+                    workerResult = {
+                        available: false,
+                        error: testResult.result?.['error']?.['message'] ?? 'Job failed',
+                        worker: testResult.worker ?? undefined
+                    };
+                    workerStatus = 'error';
+                }
+            },
+            timeoutCode: async () => {
+                workerResult = {
+                    available: false,
+                    error: 'Timeout: job did not complete within 10s'
+                };
+                workerStatus = 'error';
+                try {
+                    await JobService.cancelQueuedJob({
+                        workspace: $workspaceStore,
+                        id: job,
+                        requestBody: {
+                            reason: 'Timeout checking Bedrock credentials'
+                        }
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                }
+            },
+            interval: 500,
+            timeout: 10000
+        });
+    }
+    catch (err) {
+        workerResult = {
+            available: false,
+            error: err instanceof Error ? err.message : 'Unknown error'
+        };
+        workerStatus = 'error';
+    }
+}
+async function checkBoth() {
+    if (isChecking)
+        return;
+    isChecking = true;
+    try {
+        await Promise.all([checkApiCredentials(), checkWorkerCredentials()]);
+    }
+    finally {
+        isChecking = false;
+    }
+}
+</script>
+
+<div class="flex flex-col gap-3 p-3 border rounded-md bg-surface-secondary">
+	<div class="flex items-center justify-between">
+		<h4 class="text-sm font-semibold">AWS Environment Credentials Check</h4>
+		<Button size="xs" variant="border" on:click={checkBoth} disabled={isChecking}>
+			{#if isChecking}
+				<LoaderCircle class="animate-spin mr-1.5 h-3.5 w-3.5" />
+			{/if}
+			Check Credentials
+		</Button>
+	</div>
+
+	<p class="text-xs text-secondary">
+		Check if AWS credentials are available from the environment. If available, you do not need to
+		configure credentials manually.
+	</p>
+
+	<div class="grid grid-cols-2 gap-3">
+		<!-- API Server Check -->
+		<div class="flex flex-col gap-1.5 p-2 border rounded bg-surface">
+			<div class="flex items-center gap-1.5 text-xs font-medium">
+				<Server class="h-3.5 w-3.5" />
+				<span>API Server</span>
+				{#if apiStatus === 'loading'}
+					<LoaderCircle class="animate-spin h-3.5 w-3.5 ml-auto text-blue-500" />
+				{:else if apiStatus === 'success'}
+					<Check class="h-3.5 w-3.5 ml-auto text-green-500" />
+				{:else if apiStatus === 'error'}
+					<X class="h-3.5 w-3.5 ml-auto text-red-500" />
+				{/if}
+			</div>
+
+			{#if apiResult}
+				<div class="text-xs">
+					{#if apiResult.available}
+						<div class="text-green-600 dark:text-green-400">
+							Available: {apiResult.access_key_id_prefix}
+						</div>
+						{#if apiResult.region}
+							<div class="text-secondary">Region: {apiResult.region}</div>
+						{/if}
+					{:else}
+						<div class="text-red-600 dark:text-red-400 break-words">
+							{apiResult.error ?? 'Not available'}
+						</div>
+					{/if}
+				</div>
+			{:else if apiStatus === 'idle'}
+				<div class="text-xs text-tertiary">Click "Check Credentials" to test</div>
+			{/if}
+		</div>
+
+		<!-- Worker Check -->
+		<div class="flex flex-col gap-1.5 p-2 border rounded bg-surface">
+			<div class="flex items-center gap-1.5 text-xs font-medium">
+				<Cpu class="h-3.5 w-3.5" />
+				<span>Worker</span>
+				{#if workerStatus === 'loading'}
+					<LoaderCircle class="animate-spin h-3.5 w-3.5 ml-auto text-blue-500" />
+				{:else if workerStatus === 'success'}
+					<Check class="h-3.5 w-3.5 ml-auto text-green-500" />
+				{:else if workerStatus === 'error'}
+					<X class="h-3.5 w-3.5 ml-auto text-red-500" />
+				{/if}
+			</div>
+
+			{#if workerResult}
+				<div class="text-xs">
+					{#if workerResult.available}
+						<div class="text-green-600 dark:text-green-400">
+							Available: {workerResult.access_key_id_prefix}
+						</div>
+						{#if workerResult.region}
+							<div class="text-secondary">Region: {workerResult.region}</div>
+						{/if}
+						{#if workerResult.source}
+							<div class="text-secondary">Source: {workerResult.source}</div>
+						{/if}
+						{#if workerResult.worker}
+							<div class="text-secondary">Worker: {workerResult.worker}</div>
+						{/if}
+					{:else}
+						<div class="text-red-600 dark:text-red-400 break-words">
+							{workerResult.error ?? 'Not available'}
+						</div>
+						{#if workerResult.worker}
+							<div class="text-secondary">Worker: {workerResult.worker}</div>
+						{/if}
+					{/if}
+				</div>
+			{:else if workerStatus === 'idle'}
+				<div class="text-xs text-tertiary">Click "Check Credentials" to test</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/package/components/BedrockCredentialsCheck.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const BedrockCredentialsCheck: import("svelte").Component<Record<string, never>, {}, "">;
+type BedrockCredentialsCheck = ReturnType<typeof BedrockCredentialsCheck>;
+export default BedrockCredentialsCheck;

package/package/components/CenteredModal.svelte

@@ -1,42 +1,50 @@
 <script lang="ts">import { setLicense } from '../enterpriseUtils';
 import { enterpriseLicense, whitelabelNameStore } from '../stores';
+import { twMerge } from 'tailwind-merge';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 import LoginPageHeader from './LoginPageHeader.svelte';
-export let subtitle = undefined;
-export let title = 'Windmill';
-export let disableLogo = false;
-export let large = false;
+let { subtitle = undefined, title = 'Windmill', disableLogo = false, large = false, centerVertically = true, loading = false, children } = $props();
 setLicense();
+let height = $state(0);
 </script>
 
-<div class="center-center min-h-screen p-4 relative bg-surface-secondary">
-	<div class="flex flex-col gap-2 items-center w-full">
+<div
+	class="flex justify-center h-screen p-4 relative bg-surface-secondary overflow-auto"
+	class:items-center={centerVertically}
+	style="scrollbar-gutter: stable both-edges;"
+	bind:clientHeight={height}
+>
+	<div class={twMerge("flex flex-col gap-2 items-center w-full pb-8  h-fit", height > 1080 ? 'pt-28' : 'pt-12')} >
 		{#if (!disableLogo && !$enterpriseLicense) || !$whitelabelNameStore}
 			<div class="hidden lg:block">
 				<div>
-					<WindmillIcon height="100px" width="100px" spin="slow" />
+					<WindmillIcon size={centerVertically ? 64 : 48} spin={loading ? 'fast' : 'slow'} />
 				</div>
-				<h2 class="text-center py-2 text-primary">Windmill</h2>
 			</div>
+		{:else}
+			<div class="pt-8"></div>
 		{/if}
 
-		<div
-			class="rounded-md bg-surface w-full {large
-				? 'max-w-5xl'
-				: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
-		>
-			<div class="mb-10">
-				<h1 class="text-center text-lg text-emphasis font-semibold">
-					{title}
-				</h1>
-				{#if subtitle}
-					<p class="text-sm font-semibold text-emphasis text-center mt-2">
-						{subtitle}
-					</p>
-				{/if}
-			</div>
-			<slot />
+		<div class="mb-4">
+			<h1 class="text-center text-lg text-emphasis font-semibold">
+				{title}
+			</h1>
+			{#if subtitle}
+				<p class="text-xs font-normal text-primary text-center mt-2">
+					{subtitle}
+				</p>
+			{/if}
 		</div>
+
+		{#if children}
+			<div
+				class="rounded-md bg-surface w-full {large
+					? 'max-w-5xl'
+					: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 z-10"
+			>
+				{@render children()}
+			</div>
+		{/if}
 	</div>
 
 	<LoginPageHeader />

package/package/components/CenteredModal.svelte.d.ts

@@ -1,32 +1,12 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const CenteredModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     subtitle?: string | undefined;
     title?: string;
     disableLogo?: boolean;
     large?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type CenteredModal = InstanceType<typeof CenteredModal>;
+    centerVertically?: boolean;
+    loading?: boolean;
+    children?: import('svelte').Snippet;
+}
+declare const CenteredModal: import("svelte").Component<Props, {}, "">;
+type CenteredModal = ReturnType<typeof CenteredModal>;
 export default CenteredModal;

package/package/components/CenteredPage.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
-let { class: clazz = '', children } = $props();
+let { class: clazz = '', id, children, wrapperClasses = '', handleOverflow = true } = $props();
 let width = $state(0);
 </script>
 
-<div class="pb-8">
+<div
+	class={twMerge('pb-8', wrapperClasses, handleOverflow ? 'h-full overflow-y-auto' : '')}
+	style={handleOverflow ? 'scrollbar-gutter: stable both-edges;' : ''}
+	{id}
+>
 	<div class={twMerge('max-w-7xl mx-auto px-4 sm:px-6 md:px-8', clazz)} bind:clientWidth={width}
 		>{@render children?.({ width })}</div
 	>

package/package/components/CenteredPage.svelte.d.ts

@@ -1,8 +1,11 @@
 interface Props {
     class?: string;
+    id?: string;
     children?: import('svelte').Snippet<[{
         width: number;
     }]>;
+    wrapperClasses?: string;
+    handleOverflow?: boolean;
 }
 declare const CenteredPage: import("svelte").Component<Props, {}, "">;
 type CenteredPage = ReturnType<typeof CenteredPage>;