windmill-components 1.558.3 → 1.596.0

package/package/components/HttpAgentWorkerDrawer.svelte

@@ -1,20 +1,29 @@
 <script lang="ts">import { AgentWorkersService } from '../gen';
 import { sendUserToast } from '../toast';
-import { Copy, Trash2, RefreshCw } from 'lucide-svelte';
+import { ExternalLink, RefreshCw, Trash } from 'lucide-svelte';
 import { Alert, Button, Tab, Tabs } from './common';
 import Section from './Section.svelte';
 import TagsToListenTo from './TagsToListenTo.svelte';
 import { enterpriseLicense, superadmin } from '../stores';
-import CollapseLink from './CollapseLink.svelte';
+import Label from './Label.svelte';
+import TextInput from './text_input/TextInput.svelte';
+import CopyableCodeBlock from './details/CopyableCodeBlock.svelte';
+import { shell, json } from 'svelte-highlight/languages';
+import TokenDisplay from './settings/TokenDisplay.svelte';
+import Description from './Description.svelte';
+import { defaultTags, nativeTags } from './worker_group';
 let { customTags = $bindable() } = $props();
 let selectedTags = $state(!$enterpriseLicense ? ['agent_test'] : []);
 let workerGroup = $state('agent');
 let token = $state('');
 let blacklistToken = $state('');
+let blacklistTokenError = $state('');
 let selectedTab = $state('create');
 let blacklistedTokens = $state(undefined);
 let isLoadingBlacklist = $state(false);
-async function refreshToken(workerGroup, selectedTags) {
+let isGeneratingToken = $state(false);
+async function generateToken() {
+    isGeneratingToken = true;
     try {
         const newToken = await AgentWorkersService.createAgentToken({
             requestBody: {
@@ -24,10 +33,14 @@ async function refreshToken(workerGroup, selectedTags) {
             }
         });
         token = newToken;
+        sendUserToast('JWT token generated successfully');
     }
     catch (error) {
         sendUserToast('Error creating agent token: ' + error.toString(), true);
     }
+    finally {
+        isGeneratingToken = false;
+    }
 }
 async function loadBlacklistedTokens() {
     isLoadingBlacklist = true;
@@ -44,11 +57,26 @@ async function loadBlacklistedTokens() {
         isLoadingBlacklist = false;
     }
 }
+function validateBlacklistToken(token) {
+    if (!blacklistToken.trim()) {
+        blacklistTokenError = 'Token cannot be empty';
+    }
+    else if (token && !token.startsWith('jwt_agent_')) {
+        blacklistTokenError = 'Token must start with jwt_agent_';
+    }
+    else {
+        blacklistTokenError = '';
+    }
+}
 async function addToBlacklist() {
     if (!blacklistToken.trim()) {
         sendUserToast('Please enter a token to blacklist', true);
         return;
     }
+    if (blacklistTokenError) {
+        sendUserToast('Invalid token format', true);
+        return;
+    }
     try {
         await AgentWorkersService.blacklistAgentToken({
             requestBody: {
@@ -57,6 +85,7 @@ async function addToBlacklist() {
         });
         sendUserToast('Token successfully added to blacklist');
         blacklistToken = '';
+        blacklistTokenError = '';
         // Refresh the blacklist after adding a new token
         await loadBlacklistedTokens();
     }
@@ -85,11 +114,6 @@ async function removeFromBlacklist(tokenToRemove) {
         sendUserToast('Error removing token from blacklist: ' + error.toString(), true);
     }
 }
-$effect(() => {
-    if (selectedTags.length > 0 && $superadmin) {
-        refreshToken(workerGroup, selectedTags);
-    }
-});
 $effect(() => {
     if (selectedTab === 'blacklist' && $enterpriseLicense && $superadmin) {
         loadBlacklistedTokens();
@@ -98,200 +122,245 @@ $effect(() => {
 </script>
 
 <Tabs bind:selected={selectedTab}>
-	<Tab value="create">Create</Tab>
-	<Tab value="blacklist">Blacklist</Tab>
+	<Tab value="create" label="Create" />
+	<Tab value="blacklist" label="Blacklist" />
 	{#snippet content()}
-		<div class="flex flex-col gap-y-4 pt-2">
+		<div class="flex flex-col gap-y-6 pt-2">
 			{#if selectedTab === 'create'}
-				<Alert type="info" title="HTTP agent workers "
-					>Use HTTP agent workers only when the workers need to be deployed remotely OR with only
-					HTTP connectivity OR in untrusted environments. HTTP agent workers have more latency and
-					less capabilities than normal workers.</Alert
+				<Description
+					><a href="https://www.windmill.dev/docs/core_concepts/agent_workers" target="_blank"
+						>Agent workers <ExternalLink size={12} class="inline-block" /></a
+					> can be used to run jobs with remote workers with unreliable connectivity, workers behind
+					firewalls (HTTP-only), untrusted environments (no database access), or large deployments (thousands
+					of workers). They have more latency than normal workers. Follow the steps below to create an
+					agent worker.</Description
 				>
-				<div class="flex flex-col gap-y-4 mt-4">
-					<Section
+
+				<Section
+					label="1. Generate an agent worker token"
+					class="flex flex-col gap-y-6"
+					description="Generate a JWT token to authenticate the agent worker."
+				>
+					<Label
 						label="Worker group"
 						tooltip="This is only used to give a name prefix to the agent worker and to group workers in the workers page, no worker group config is passed to an agent worker."
 					>
 						<input class="max-w-md" type="text" bind:value={workerGroup} />
-					</Section>
-					<Section label="Tags to listen to" eeOnly>
-						{#if !$enterpriseLicense}
-							<div class="text-sm text-secondary mb-2 max-w-md">
-								Agent workers are only available in the enterprise edition. For evaluation purposes,
-								you can only use the tag `agent_test` tag and it is limited to 100 jobs.
-							</div>
-						{/if}
-						<TagsToListenTo
-							disabled={!$enterpriseLicense}
-							bind:worker_tags={selectedTags}
-							{customTags}
-						/>
-					</Section>
-
-					<Section label="Generated JWT token">
+					</Label>
+					<Label
+						label="Tags to listen to"
+						eeOnly
+						tooltip="Tags determine which jobs this worker can execute. They are encoded in the JWT token and cannot be changed by the worker. You can use dynamic tags like 'tag-$args[argName]' or 'tag-$workspace' to target different workers based on job arguments or workspace."
+					>
 						{#if !$enterpriseLicense}
-							<div class="text-sm text-secondary mb-2 max-w-md">
+							<div class="text-xs text-secondary mb-2 max-w-md">
 								Agent workers are only available in the enterprise edition. For evaluation purposes,
-								you can only use the tag `agent_test` tag and it is limited to 100 jobs.
+								you can only use the `agent_test` tag and it is limited to 100 jobs.
 							</div>
 						{/if}
-						<div class="relative max-w-md group">
-							<input
-								onclick={(e) => {
-									e.preventDefault()
-									e.stopPropagation()
-									if (token) {
-										navigator.clipboard.writeText(token)
-										sendUserToast('Copied to clipboard')
-									}
-								}}
-								placeholder="Select tags to generate a JWT token"
-								type="text"
-								disabled
-								value={token}
-								class="w-full pr-10 pl-3 py-2 text-sm text-gray-600 bg-gray-50 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-100 transition truncatere"
+						<div class="flex flex-row gap-2 w-full">
+							<TagsToListenTo
+								class="grow min-w-0"
+								disabled={!$enterpriseLicense}
+								bind:worker_tags={selectedTags}
+								{customTags}
 							/>
+							<Button
+								variant="default"
+								unifiedSize="md"
+								onclick={() => {
+									selectedTags = [...defaultTags, ...nativeTags, ...(customTags ?? [])]
+								}}>Add all tags</Button
+							>
+						</div>
+					</Label>
 
-							<button
-								class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 group-hover:text-blue-600 hover:scale-105 transition"
-								aria-label="Copy token to clipboard"
-								onclick={(e) => {
-									e.preventDefault()
-									e.stopPropagation()
-									if (token) {
-										navigator.clipboard.writeText(token)
-										sendUserToast('Copied to clipboard')
-									}
-								}}
+					{#if !token}
+						<div class="mb-4">
+							<Button
+								variant="accent"
+								unifiedSize="md"
+								disabled={selectedTags.length === 0 || !$superadmin || isGeneratingToken}
+								onclick={generateToken}
+								loading={isGeneratingToken}
 							>
-								<Copy size={18} />
-							</button>
+								{isGeneratingToken ? 'Generating...' : 'Generate token'}
+							</Button>
+							{#if selectedTags.length === 0}
+								<div class="text-xs text-secondary mt-2">
+									Please select at least one tag to generate a token.
+								</div>
+							{:else if !$superadmin}
+								<div class="text-xs text-secondary mt-2">
+									Only superadmins can generate JWT tokens.
+								</div>
+							{/if}
 						</div>
+					{:else}
+						<TokenDisplay
+							{token}
+							title="JWT Token Generated Successfully"
+							onClose={() => {
+								token = ''
+							}}
+						/>
+					{/if}
+				</Section>
+
+				<Section label="2. Create an agent worker" class="flex flex-col gap-y-2">
+					<p class="text-xs text-primary">
+						Set these environment variables for your agent worker.
+					</p>
+					<CopyableCodeBlock
+						code={`MODE=agent
+AGENT_TOKEN=<token>
+BASE_INTERNAL_URL=<base url>
+`}
+						language={shell}
+					/>
+					<p class="text-2xs text-secondary">
+						BASE_INTERNAL_URL: Base URL without trailing slash (e.g.,
+						<code>http://windmill.example.com</code>). Can be same as BASE_URL or private network
+						URL. <code>INIT_SCRIPT</code> can be passed as env variable if needed.
+					</p>
+					<Alert type="warning" size="sm" title="Agent Worker Limitations">
+						Ensure at least one normal worker is running and listening to the tags
+						<code>flow</code> and <code>dependency</code>
+						(or <code>flow-&lt;workspace&gt;</code> and
+						<code>dependency-&lt;workspace&gt;</code>
+						if using workspace-specific default tags), because agent workers
+						<strong>cannot run dependency jobs</strong>
+						nor execute the
+						<strong>flow state machine</strong>. They can, however, run subjobs within flows.
+					</Alert>
 
-						<div class="flex flex-col gap-2 text-sm mt-3 leading-relaxed">
-							Set the following environment variables:
-							<ul class="list-disc list-inside mt-1">
-								<li><code>MODE=agent</code></li>
-								<li><code>AGENT_TOKEN=&lt;token&gt;</code></li>
-								<li><code>BASE_INTERNAL_URL=&lt;base url&gt;</code></li>
-							</ul>
-							<p class="text-sm leading-relaxed">
-								to a worker to have it act as an HTTP agent worker.
-								<code>INIT_SCRIPT</code>, if needed, must be passed as an env variable.
+					<div class="mt-2"></div>
+					<Section small collapsable label="Automate JWT token generation">
+						<div class="text-xs text-primary">
+							<p class="mb-2">
+								Generate tokens programmatically using this endpoint with superadmin bearer token:
+							</p>
+							<code class="block mt-1 mb-2">POST /api/agent_workers/create_agent_token</code>
+							<p class="mb-2">Request body:</p>
+							<CopyableCodeBlock
+								code={`{
+  "worker_group": "agent",
+  "tags": ["tag1", "tag2"],
+  "exp": 1717334400
+}`}
+								language={json}
+							/>
+
+							<p class="mt-2">
+								<code>exp</code> is Unix timestamp. Response contains the JWT token.
 							</p>
-							<Alert type="warning" size="sm" title="Agent Worker Limitations">
-								Ensure at least one normal worker is running and listening to the tags
-								<code>flow</code> and <code>dependency</code>
-								(or <code>flow-&lt;workspace&gt;</code> and
-								<code>dependency-&lt;workspace&gt;</code>
-								if using workspace-specific default tags), because agent workers
-								<strong>cannot run dependency jobs</strong>
-								nor execute the
-								<strong>flow state machine</strong>. They can, however, run subjobs within flows.
-							</Alert>
-							<CollapseLink text="Automate JWT token generation" small>
-								<div class="text-xs mt-2">
-									Use the following API endpoint with a superadmin bearer token:
-									<code class="block mt-1 mb-2">POST /api/agent_workers/create_agent_token</code>
-									<pre class=" p-2 rounded-lg text-xs overflow-auto">
-	<code
-											>{`
-	  "worker_group": "agent",
-	  "tags": ["tag1", "tag2"],
-	  "exp": 1717334400
-	`}</code
-										>
-									</pre>
-									The JSON response will contain the generated JWT token.
-								</div>
-							</CollapseLink>
 						</div>
 					</Section>
-				</div>
+				</Section>
 			{:else if selectedTab === 'blacklist'}
-				<div class="flex flex-col gap-y-4 mt-4">
+				<div class="flex flex-col gap-y-4">
 					<Section label="Agent Token Blacklist" eeOnly>
 						{#if !$enterpriseLicense}
-							<div class="text-sm text-secondary mb-2 max-w-md">
+							<div class="text-xs text-secondary mb-2 max-w-md">
 								Token blacklist management is only available in the enterprise edition.
 							</div>
 						{:else}
-							<div class="text-sm text-secondary mb-4 max-w-md">
-								Add tokens to the blacklist to prevent them from being used by agent workers.
-								Blacklisted tokens may take up to 5 minutes to be effective because of caching.
+							<div class="text-xs text-secondary mb-4 max-w-md">
+								Revoke tokens to prevent agent workers from authenticating. Blacklisted tokens may
+								take up to 5 minutes to be effective because of caching.
 							</div>
 
 							<div class="flex flex-col gap-3 w-full mb-6">
-								<div>
-									<label class="block text-sm font-medium mb-1" for="blacklistTokenInput"
-										>Token</label
-									>
-									<input
-										id="blacklistTokenInput"
-										class="w-full"
-										type="text"
-										bind:value={blacklistToken}
-										placeholder="jwt_agent_eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3b3JrZXJfZ3JvdXAiOiJhZ2VudCIsInN1ZmZpeCI6bnVsbCwidGFncyI6WyJiYXNoIl0sImV4cCI6MTg0NDk1NDYxMX0.JQWb-_ERGaomukbl_cEPPmmCAEepTR79d9oIrKREscE"
-									/>
-								</div>
-								<div class="flex">
-									<Button color="red" on:click={addToBlacklist} disabled={!$superadmin}
-										>Blacklist</Button
-									>
-								</div>
-
-								{#if !$superadmin}
-									<div class="text-xs text-amber-600">
-										Only superadmins can manage the token blacklist.
+								<Label
+									label="Token"
+									for="blacklistTokenInput"
+									tooltip="Blacklisted tokens cannot be used by agent workers to authenticate. Useful for revoking compromised tokens or decommissioning workers."
+								>
+									<div class="flex gap-2">
+										<TextInput
+											size="md"
+											inputProps={{
+												id: 'blacklistTokenInput',
+												placeholder:
+													'jwt_agent_eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3b3JrZXJfZ3JvdXAiOiJhZ2VudCIsInN1ZmZpeCI6bnVsbCwidGFncyI6WyJiYXNoIl0sImV4cCI6MTg0NDk1NDYxMX0.JQWb-_ERGaomukbl_cEPPmmCAEepTR79d9oIrKREscE',
+												type: 'text',
+												disabled: !$superadmin,
+												oninput: (e) =>
+													validateBlacklistToken((e.target as HTMLInputElement)?.value ?? '')
+											}}
+											bind:value={blacklistToken}
+											error={blacklistTokenError}
+										/>
+										<Button
+											variant="accent"
+											unifiedSize="md"
+											on:click={addToBlacklist}
+											disabled={!$superadmin || blacklistTokenError !== ''}>Blacklist</Button
+										>
 									</div>
-								{/if}
+
+									{#if blacklistTokenError !== ''}
+										<div class="text-xs text-red-600">
+											{blacklistTokenError}
+										</div>
+									{/if}
+
+									{#if !$superadmin}
+										<div class="text-xs text-amber-600">
+											Only superadmins can manage the token blacklist.
+										</div>
+									{/if}
+								</Label>
 							</div>
 
 							<!-- Blacklisted Tokens List -->
-							<div class="border-t pt-6">
-								<div class="flex items-center justify-between mb-4">
-									<h3 class="text-lg font-medium">Blacklisted Tokens</h3>
-									<button
-										class="p-2 text-gray-500 hover:text-blue-600 hover:bg-gray-100 rounded-lg transition"
-										onclick={loadBlacklistedTokens}
+							<div class="pt-6">
+								<div class="flex items-center justify-between mb-2">
+									<h3 class="text-xs text-primary">Blacklisted tokens</h3>
+									<Button
+										variant="subtle"
+										unifiedSize="sm"
+										on:click={loadBlacklistedTokens}
 										disabled={isLoadingBlacklist}
 										title="Refresh blacklist"
-									>
-										<RefreshCw size={16} class={isLoadingBlacklist ? 'animate-spin' : ''} />
-									</button>
+										startIcon={{ icon: RefreshCw }}
+										iconProps={{ class: isLoadingBlacklist ? 'animate-spin' : '' }}
+									/>
 								</div>
 
 								{#if isLoadingBlacklist}
-									<div class="text-center py-4 text-gray-500"> Loading blacklisted tokens... </div>
+									<div class="text-center py-4 text-xs text-secondary">
+										Loading blacklisted tokens...
+									</div>
 								{:else if blacklistedTokens?.length === 0}
-									<div class="text-center py-4 text-gray-500">
+									<div class="text-center py-4 text-xs text-secondary">
 										No tokens are currently blacklisted.
 									</div>
 								{:else}
 									<div class="space-y-2">
-										{#each blacklistedTokens ?? [] as blacklistedToken}
+										{#each blacklistedTokens ?? [] as blacklistedToken (blacklistedToken.token)}
 											<div
-												class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border"
+												class="flex items-center justify-between p-3 surface-tertiary rounded-lg border border-light"
 											>
 												<div class="flex-1 min-w-0">
-													<div class="font-mono text-xs text-gray-700 pr-4 break-all">
+													<div class="font-mono text-2xs text-emphasis pr-4 break-all">
 														{blacklistedToken.token}
 													</div>
 													{#if blacklistedToken.expires_at}
-														<div class="text-xs text-gray-500 mt-1">
+														<div class="text-2xs text-secondary mt-1">
 															Expires: {new Date(blacklistedToken.expires_at).toLocaleString()}
 														</div>
 													{/if}
 												</div>
 												{#if $superadmin}
-													<button
-														class="ml-3 p-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition"
-														onclick={() => removeFromBlacklist(blacklistedToken.token)}
+													<Button
+														variant="subtle"
+														destructive
+														unifiedSize="sm"
+														on:click={() => removeFromBlacklist(blacklistedToken.token)}
 														title="Remove from blacklist"
-													>
-														<Trash2 size={16} />
-													</button>
+														startIcon={{ icon: Trash }}
+													/>
 												{/if}
 											</div>
 										{/each}

package/package/components/IconedPath.svelte

@@ -2,11 +2,10 @@
 import { Building } from 'lucide-svelte';
 import { Badge } from './common';
 import IconedResourceType from './IconedResourceType.svelte';
-export let path;
-export let hash = undefined;
+let { path, hash = undefined, class: clazz = undefined } = $props();
 </script>
 
-<div class="flex space-x-2 items-center w-full shrink min-w-0 {$$props.class}">
+<div class="flex space-x-2 items-center w-full shrink min-w-0 {clazz ?? ''}">
 	{#if path.startsWith('hub/')}
 		<div>
 			<IconedResourceType width="20px" height="20px" name={path.split('/')[2]} silent={true} />

package/package/components/IconedPath.svelte.d.ts

@@ -1,22 +1,8 @@
-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 IconedPath: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+interface Props {
     path: string;
-    hash?: string | undefined | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type IconedPath = InstanceType<typeof IconedPath>;
+    hash?: string | undefined;
+    class?: string | undefined;
+}
+declare const IconedPath: import("svelte").Component<Props, {}, "">;
+type IconedPath = ReturnType<typeof IconedPath>;
 export default IconedPath;

package/package/components/IconedResourceType.svelte

@@ -42,7 +42,7 @@
 	{/if}
 	{#if iconComponent}
 		{@const SvelteComponent = iconComponent}
-		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
+		<span class={isSelected ? 'text-secondary' : 'text-secondary'}>
 			<SvelteComponent {height} {width} size={widthInPixels} />
 		</span>
 	{:else if formatExtension}

package/package/components/InfiniteList.svelte.d.ts

@@ -41,6 +41,6 @@ declare const InfiniteList: $$__sveltets_2_IsomorphicComponent<Props, {
     deleteItem: (id: string) => Promise<void>;
     setLoader: (loader: (page: number, perPage: number) => Promise<any[]>) => Promise<void>;
     setDeleteItemFn: (fn: (id: any) => Promise<any>) => Promise<void>;
-}, "length" | "items" | "loading" | "selectedItemId" | "isEmpty">;
+}, "length" | "loading" | "items" | "selectedItemId" | "isEmpty">;
 type InfiniteList = InstanceType<typeof InfiniteList>;
 export default InfiniteList;