windmill-components 1.309.7 → 1.339.2

package/package/components/FlowMetadata.svelte

@@ -1,5 +1,6 @@
-<script>import JobStatus from './JobStatus.svelte';
-import { displayDate } from '../utils';
+<script>import {} from '../gen';
+import JobStatus from './JobStatus.svelte';
+import { displayDate, truncateRev } from '../utils';
 import ScheduleEditor from './ScheduleEditor.svelte';
 import TimeAgo from './TimeAgo.svelte';
 import { workspaceStore } from '../stores';
@@ -8,48 +9,46 @@ import { Clock, MemoryStick, Calendar, Bot, User, Code2 } from 'lucide-svelte';
 import BarsStaggered from './icons/BarsStaggered.svelte';
 export let job;
 const SMALL_ICON_SIZE = 14;
-let scheduleEditor;
+export let scheduleEditor;
 </script>
 
-<ScheduleEditor bind:this={scheduleEditor} />
-
 <div
-	class="rounded-md p-3 bg-surface-secondary shadow-sm sm:text-sm md:text-base"
+	class="rounded-md p-3 bg-surface-secondary shadow-sm sm:text-sm md:text-base overflow-x-auto"
 	style="min-height: 150px;"
 >
 	<JobStatus {job} />
 	<div class="flex flex-row gap-2 items-center">
-		<Clock size={SMALL_ICON_SIZE} class="text-secondary" />
-		<span class="text-2xs text-secondary">
+		<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+		<span class="text-2xs text-secondary whitespace-nowrap">
 			{#if job['success'] != undefined}
 				Received job: {displayDate(job.created_at ?? '')}
 			{:else}
 				Received job <TimeAgo date={job.created_at ?? ''} />
 			{/if}
-			<Tooltip>{job?.created_at}</Tooltip>
+			<Tooltip small>{job?.created_at}</Tooltip>
 		</span>
 	</div>
 	{#if job && 'started_at' in job && job.started_at}
-		<div class="flex flex-row gap-2 items-center">
-			<Clock size={SMALL_ICON_SIZE} class="text-secondary" />
-			<span>
+		<div class="flex flex-row gap-2 items-center text-sm">
+			<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+			<span class="whitespace-nowrap">
 				Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
-				<Tooltip>{job?.started_at}</Tooltip>
+				<Tooltip small>{job?.started_at}</Tooltip>
 			</span>
 		</div>
 	{/if}
 	{#if job && job['mem_peak']}
-		<div class="flex flex-row gap-2 items-center">
-			<MemoryStick size={SMALL_ICON_SIZE} class="text-secondary" />
+		<div class="flex flex-row gap-2 items-center text-sm">
+			<MemoryStick size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 			<span> Mem peak: {(job['mem_peak'] / 1024).toPrecision(5)}MB</span>
 		</div>
 	{/if}
 	<div>
 		{#if job && job.parent_job}
 			{#if job.is_flow_step}
-				<div class="flex flex-row gap-2 items-center">
-					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary" />
-					<span>
+				<div class="flex flex-row gap-2 items-center text-sm">
+					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+					<span class="whitespace-nowrap">
 						Step of flow
 						<a href={`/run/${job.parent_job}?workspace=${$workspaceStore}`}>
 							{job.parent_job}
@@ -57,26 +56,27 @@ let scheduleEditor;
 					</span>
 				</div>
 			{:else}
-				<div class="flex flex-row gap-2 items-center">
-					<Bot size={SMALL_ICON_SIZE} class="text-secondary" />
-					<span>
+				<div class="flex flex-row gap-2 items-center text-sm">
+					<Bot size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+					<span class="whitespace-nowrap">
 						Triggered by parent
 						<a href={`/run/${job.parent_job}?workspace=${$workspaceStore}`}> {job.parent_job}</a>
 					</span>
 				</div>
 			{/if}
 		{:else if job && job.schedule_path}
-			<div class="flex flex-row gap-2 items-center">
-				<Calendar size={SMALL_ICON_SIZE} class="text-secondary" />
-				<span>
-					Triggered by the schedule:
-					<button
-						class="break-words text-sm text-blue-600 font-normal"
+			<div class="flex flex-row gap-2 w-full items-center text-sm">
+				<Calendar size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
+				<span class="whitespace-nowrap">
+					Schedule:
+					<a
+						href="#"
+						class="break-words text-blue-600 font-normal"
 						on:click={() =>
 							scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
 					>
-						{job.schedule_path}
-					</button>
+						{truncateRev(job.schedule_path, 40)}
+					</a>
 				</span>
 			</div>
 		{/if}
@@ -87,28 +87,33 @@ let scheduleEditor;
 			{@const viewHref = `${stem}/get/${isScript ? job?.script_hash : job?.script_path}`}
 			<div class="flex flex-row gap-2 items-center">
 				{#if isScript}
-					<Code2 size={SMALL_ICON_SIZE} class="text-secondary" />
+					<Code2 size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 				{:else}
 					<BarsStaggered size={SMALL_ICON_SIZE} class="text-secondary" />
 				{/if}
-				<span>
+				<span class="truncate text-sm">
 					<a href={viewHref}>{isScript ? job?.script_hash : job?.script_path}</a>
 				</span>
 			</div>
 		{/if}
 
-		<div class="flex flex-row gap-2 items-center">
-			<User size={SMALL_ICON_SIZE} class="text-secondary" />
+		<div class="flex items-center gap-2 text-sm">
+			<User size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 
 			<span>
-				By {job.created_by}
+				By {truncateRev(
+					job.created_by ?? 'unknown',
+					40
+				)}{#if (job?.created_by?.length ?? 0) > 40}<Tooltip small
+						><div class="break-all">{job.created_by}</div></Tooltip
+					>{/if}
 				{#if job.permissioned_as !== `u/${job.created_by}` && job.permissioned_as != job.created_by}
 					but permissioned as {job.permissioned_as}
 				{/if}
 			</span>
 		</div>
 	</div>
-	<div class="text-secondary text-2xs pt-2">
+	<div class="text-secondary text-2xs pt-2 whitespace-nowrap">
 		run id:
 		<a href={`/run/${job.id}?workspace=${job.workspace_id}`}> {job.id} </a>
 	</div>

package/package/components/FlowMetadata.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { Job } from '../gen';
+import { type Job } from '../gen';
+import ScheduleEditor from './ScheduleEditor.svelte';
 declare const __propDef: {
     props: {
         job: Job;
+        scheduleEditor: ScheduleEditor;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowPreviewContent.svelte

@@ -8,7 +8,7 @@ import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
 import CapturePayload from './flows/content/CapturePayload.svelte';
 import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte';
-import { emptyString } from '../utils';
+import { emptyString, sendUserToast } from '../utils';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import SavedInputs from './SavedInputs.svelte';
 import { dfs } from './flows/dfs';
@@ -46,11 +46,18 @@ function extractFlow(previewMode) {
 }
 let lastPreviewFlow = undefined;
 export async function runPreview(args, restartedFrom) {
-    lastPreviewFlow = JSON.stringify($flowStore);
-    jobProgressReset();
-    const newFlow = extractFlow(previewMode);
-    jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
-    isRunning = true;
+    try {
+        lastPreviewFlow = JSON.stringify($flowStore);
+        jobProgressReset();
+        const newFlow = extractFlow(previewMode);
+        jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
+        isRunning = true;
+    }
+    catch (e) {
+        sendUserToast('Could not run preview', true, undefined, e.toString());
+        isRunning = false;
+        jobId = undefined;
+    }
 }
 function onKeyDown(event) {
     if (open) {

package/package/components/FlowStatusViewerInner.svelte

@@ -35,6 +35,7 @@ export let reducedPolling = false;
 let jobResults = [];
 let jobFailures = [];
 let forloop_selected = '';
+let retry_selected = '';
 let timeout;
 let localModuleStates = writable({});
 let localDurationStatuses = writable({});
@@ -157,10 +158,11 @@ async function loadJobInProgress() {
             console.error(e);
         }
     }
-    if (job?.type !== 'CompletedJob' && errorCount < 4) {
+    if (job?.type !== 'CompletedJob' && errorCount < 4 && !destroyed) {
         timeout = setTimeout(() => loadJobInProgress(), reducedPolling ? 5000 : 1000);
     }
 }
+let destroyed = false;
 async function updateJobId() {
     if (jobId !== job?.id) {
         $localModuleStates = {};
@@ -192,6 +194,7 @@ async function updateJobId() {
 $: jobId && updateJobId();
 $: isListJob = flowJobIds != undefined && Array.isArray(flowJobIds?.flowJobs);
 onDestroy(() => {
+    destroyed = true;
     timeout && clearTimeout(timeout);
 });
 $: selected = isListJob ? 'sequence' : 'graph';
@@ -241,7 +244,8 @@ function onJobsLoaded(mod, job) {
                 duration_ms: job['duration_ms'],
                 started_at: started_at,
                 iteration: mod.iterator?.itered?.length,
-                iteration_total: mod.iterator?.itered?.length
+                iteration_total: mod.iterator?.itered?.length,
+                retries: mod?.failed_retries?.length
                 // retries: $flowStateStore?.raw_flow
             });
             setDurationStatusByJob(mod.id, job.id, {
@@ -413,6 +417,7 @@ function loadPreviousIters(lenToAdd) {
 							loading={job['running'] == true}
 							result={job.result}
 							logs={job.logs}
+							durationStates={localDurationStatuses}
 						/>
 					</div>
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === 'WaitingForEvents'}
@@ -574,6 +579,43 @@ function loadPreviousIters(lenToAdd) {
 							<div class="line w-8 h-10" />
 						{/if}
 						<li class="w-full border p-6 space-y-2 bg-blue-50/50 dark:bg-frost-900/50">
+							{#if render && Array.isArray(mod.failed_retries)}
+								{#each mod.failed_retries as failedRetry, j}
+									<Button
+										variant={retry_selected === failedRetry ? 'contained' : 'border'}
+										color="red"
+										btnClasses="w-full flex justify-start"
+										on:click={() => {
+											if (retry_selected == failedRetry) {
+												retry_selected = ''
+											} else {
+												retry_selected = failedRetry
+											}
+										}}
+										endIcon={{
+											icon: ChevronDown,
+											classes: retry_selected == failedRetry ? '!rotate-180' : ''
+										}}
+									>
+										<span class="truncate font-mono">
+											# Attempt {j + 1}: {failedRetry}
+										</span>
+									</Button>
+
+									<!-- <LogId id={loopJobId} /> -->
+									<div class="border p-6" class:hidden={retry_selected != failedRetry}>
+										<svelte:self
+											{childFlow}
+											globalModuleStates={[localModuleStates, ...globalModuleStates]}
+											globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
+											render={failedRetry == retry_selected}
+											reducedPolling={false}
+											{workspaceId}
+											jobId={failedRetry}
+										/>
+									</div>
+								{/each}
+							{/if}
 							{#if ['InProgress', 'Success', 'Failure'].includes(mod.type)}
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
 									<svelte:self
@@ -694,6 +736,7 @@ function loadPreviousIters(lenToAdd) {
 											col
 											result={job['result']}
 											logs={job.logs ?? ''}
+											durationStates={localDurationStatuses}
 										/>
 									{:else if selectedNode == 'start'}
 										{#if job.args}
@@ -739,6 +782,7 @@ function loadPreviousIters(lenToAdd) {
 											col
 											result={node.result}
 											logs={node.logs}
+											durationStates={localDurationStatuses}
 										/>
 									{:else}
 										<p class="p-2 text-tertiary italic"

package/package/components/HighlightCode.svelte

@@ -7,6 +7,7 @@ import graphql from 'svelte-highlight/languages/graphql';
 import javascript from 'svelte-highlight/languages/javascript';
 import sql from 'svelte-highlight/languages/sql';
 import powershell from 'svelte-highlight/languages/powershell';
+import php from 'svelte-highlight/languages/php';
 import { Button } from './common';
 import { copyToClipboard } from '../utils';
 import { ClipboardCopy } from 'lucide-svelte';
@@ -41,6 +42,8 @@ function getLang(lang) {
             return sql;
         case 'powershell':
             return powershell;
+        case 'php':
+            return php;
         default:
             return typescript;
     }

package/package/components/InputTransformForm.svelte

@@ -359,6 +359,9 @@ loadResourceTypes();
 					{itemPicker}
 					bind:pickForField
 					showSchemaExplorer
+					nullable={schema.properties[argName].nullable}
+					bind:title={schema.properties[argName].title}
+					bind:placeholder={schema.properties[argName].placeholder}
 				/>
 			{:else if arg.expr != undefined}
 				<div class="border mt-2">

package/package/components/InstanceSettings.svelte

@@ -12,10 +12,10 @@ import CloseButton from './common/CloseButton.svelte';
 import KeycloakSetting from './KeycloakSetting.svelte';
 import Alert from './common/alert/Alert.svelte';
 import { isCloudHosted } from '../cloud';
-import { capitalize } from '../utils';
+import { capitalize, classNames } from '../utils';
 import { enterpriseLicense } from '../stores';
 import CustomOauth from './CustomOauth.svelte';
-import { AlertTriangle, Plus } from 'lucide-svelte';
+import { AlertCircle, AlertTriangle, BadgeCheck, Info, Plus, X, BadgeX } from 'lucide-svelte';
 import CustomSso from './CustomSso.svelte';
 import AuthentikSetting from './AuthentikSetting.svelte';
 import AutheliaSetting from './AutheliaSetting.svelte';
@@ -23,6 +23,8 @@ import KanidmSetting from './KanidmSetting.svelte';
 import ZitadelSetting from './ZitadelSetting.svelte';
 import Password from './Password.svelte';
 import ObjectStoreConfigSettings from './ObjectStoreConfigSettings.svelte';
+import { fade } from 'svelte/transition';
+import Popover from './Popover.svelte';
 export let tab = 'Core';
 export let hideTabs = false;
 export let hideSave = false;
@@ -31,6 +33,7 @@ let initialOauths = {};
 let initialRequirePreexistingUserForOauth = false;
 let requirePreexistingUserForOauth = false;
 let ssoOrOauth = 'sso';
+let latestKeyRenewalAttempt = null;
 let serverConfig = {};
 let initialValues = {};
 loadSettings();
@@ -66,6 +69,7 @@ async function loadSettings() {
     if (values['base_url'] == undefined) {
         values['base_url'] = 'http://localhost';
     }
+    latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
 }
 export async function saveSettings() {
     if (values) {
@@ -121,7 +125,7 @@ function parseDate(license_key) {
         try {
             let i = parseInt(splitted[1]);
             let date = new Date(i * 1000);
-            return date.toDateString();
+            return date.toLocaleDateString();
         }
         catch { }
     }
@@ -152,6 +156,17 @@ async function sendStats() {
 }
 let clientName = '';
 let licenseKeyChanged = false;
+export async function renewLicenseKey() {
+    try {
+        await SettingService.renewLicenseKey();
+        sendUserToast('Key renewal successful');
+        loadSettings();
+    }
+    catch (err) {
+        latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
+        throw err;
+    }
+}
 </script>
 
 <div class="pb-8">
@@ -449,30 +464,162 @@ let licenseKeyChanged = false;
 																requestBody: { license_key: values[setting.key] }
 															})
 															sendUserToast('Valid key')
-														}}>Test Key</Button
+														}}
 													>
+														Test Key
+													</Button>
+													{#if $enterpriseLicense}
+														<Button on:click={renewLicenseKey} size="xs">Renew key</Button>
+													{/if}
 												</div>
-												{#if values[setting.key]?.length > 0}
-													{#if parseDate(values[setting.key])}
-														<span class="text-tertiary text-2xs"
-															>License key expires on {parseDate(values[setting.key])}</span
-														>
+												<div class="mt-1 flex flex-col gap-1 items-start">
+													{#if values[setting.key]?.length > 0}
+														{#if parseDate(values[setting.key])}
+															<div class="flex flex-row gap-1 items-center">
+																<Info size={12} class="text-tertiary" />
+																<span class="text-tertiary text-xs"
+																	>License key expires on {parseDate(values[setting.key])}</span
+																>
+															</div>
+														{/if}
 													{/if}
-												{/if}
-												{#if licenseKeyChanged}
-													<div class="text-yellow-600"
-														>Refresh page after setting license key and saving to unlock all
-														features</div
-													>
-												{/if}
+													{#if latestKeyRenewalAttempt}
+														{@const attemptedAt = new Date(
+															latestKeyRenewalAttempt.attempted_at
+														).toLocaleString()}
+														<div class="relative">
+															<Popover notClickable>
+																<div class="flex flex-row items-center gap-1">
+																	{#if latestKeyRenewalAttempt.result === 'success'}
+																		<BadgeCheck class="text-green-600" size={12} />
+																	{:else}
+																		<BadgeX class="text-red-600" size={12} />
+																	{/if}
+																	<span
+																		class={classNames(
+																			'text-xs',
+																			latestKeyRenewalAttempt.result === 'success'
+																				? 'text-green-600'
+																				: 'text-red-600'
+																		)}
+																	>
+																		{latestKeyRenewalAttempt.result === 'success'
+																			? 'Latest key renewal succeeded'
+																			: 'Latest key renewal failed'}
+																		on {attemptedAt}
+																	</span>
+																</div>
+																<div slot="text">
+																	{#if latestKeyRenewalAttempt.result === 'success'}
+																		<span class="text-green-300">
+																			Latest key renewal succeeded on {attemptedAt}
+																		</span>
+																	{:else}
+																		<span class="text-red-300">
+																			Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt.result.replace(
+																				'error: ',
+																				''
+																			)}
+																		</span>
+																	{/if}
+																	<br />
+																	As long as invoices are paid and usage corresponds to the subscription,
+																	the key is renewed daily with a validity of 35 days (grace period).
+																</div>
+															</Popover>
+														</div>
+													{/if}
+													{#if licenseKeyChanged && !$enterpriseLicense}
+														<div class="flex flex-row items-center gap-1">
+															<AlertCircle size={12} class="text-yellow-600" />
+															<span class="text-xs text-yellow-600">
+																Refresh page after setting and saving license key to unlock all
+																features
+															</span>
+														</div>
+													{/if}
+												</div>
 											{:else if setting.fieldType == 'email'}
 												<input
 													type="email"
 													placeholder={setting.placeholder}
 													bind:value={values[setting.key]}
 												/>
+											{:else if setting.fieldType == 'critical_error_channels'}
+												<div class="w-full">
+													<div class="flex max-w-md mt-1 gap-2 w-full items-center">
+														<select disabled>
+															<option>Tracing</option>
+														</select>
+														<input disabled />
+														<button
+															transition:fade|local={{ duration: 100 }}
+															class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
+															aria-label="Clear"
+															disabled
+														>
+															<X size={14} />
+														</button>
+													</div>
+													{#if $enterpriseLicense && Array.isArray(values[setting.key])}
+														{#each values[setting.key] ?? [] as v, i}
+															<div class="flex max-w-md mt-1 gap-2 w-full items-center">
+																<select>
+																	<option value="email">Email</option>
+																</select>
+																<input
+																	type="email"
+																	placeholder="Email address"
+																	on:input={(e) => {
+																		if (e.target?.['value']) {
+																			values[setting.key][i] = {
+																				email: e.target['value']
+																			}
+																		}
+																	}}
+																	value={v?.email ?? ''}
+																/>
+																<button
+																	transition:fade|local={{ duration: 100 }}
+																	class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
+																	aria-label="Clear"
+																	on:click={() => {
+																		values[setting.key] = values[setting.key].filter(
+																			(_, index) => index !== i
+																		)
+																	}}
+																>
+																	<X size={14} />
+																</button>
+															</div>
+														{/each}
+													{/if}
+												</div>
+												<div class="flex mt-2 gap-20 items-baseline">
+													<Button
+														variant="border"
+														color="light"
+														size="xs"
+														btnClasses="mt-1"
+														on:click={() => {
+															if (
+																values[setting.key] == undefined ||
+																!Array.isArray(values[setting.key])
+															) {
+																values[setting.key] = []
+															}
+															values[setting.key] = values[setting.key].concat('')
+														}}
+														id="arg-input-add-item"
+														startIcon={{ icon: Plus }}
+														disabled={!$enterpriseLicense}
+													>
+														Add item
+													</Button>
+												</div>
 											{:else if setting.fieldType == 'object_store_config'}
 												<ObjectStoreConfigSettings bind:bucket_config={values[setting.key]} />
+												<div class="mb-6" />
 											{:else if setting.fieldType == 'number'}
 												<input
 													type="number"

package/package/components/InstanceSettings.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         hideTabs?: boolean | undefined;
         hideSave?: boolean | undefined;
         saveSettings?: (() => Promise<void>) | undefined;
+        renewLicenseKey?: (() => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,5 +17,6 @@ export type InstanceSettingsEvents = typeof __propDef.events;
 export type InstanceSettingsSlots = typeof __propDef.slots;
 export default class InstanceSettings extends SvelteComponent<InstanceSettingsProps, InstanceSettingsEvents, InstanceSettingsSlots> {
     get saveSettings(): () => Promise<void>;
+    get renewLicenseKey(): () => Promise<void>;
 }
 export {};

package/package/components/JobLogs.svelte

@@ -0,0 +1,12 @@
+<script>import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import LogViewer from './LogViewer.svelte';
+export let jobId;
+let logs = undefined;
+$: jobId && loadLogs();
+async function loadLogs() {
+    logs = await JobService.getJobLogs({ workspace: $workspaceStore, id: jobId });
+}
+</script>
+
+<LogViewer content={logs} isLoading={false} tag={undefined} {jobId} />

package/package/components/JobLogs.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        jobId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobLogsProps = typeof __propDef.props;
+export type JobLogsEvents = typeof __propDef.events;
+export type JobLogsSlots = typeof __propDef.slots;
+export default class JobLogs extends SvelteComponent<JobLogsProps, JobLogsEvents, JobLogsSlots> {
+}
+export {};

package/package/components/JobStatus.svelte

@@ -37,7 +37,7 @@ export let job;
 	</div>
 {:else if job && 'running' in job}
 	<div class="flex flex-row gap-1 items-center">
-		<Badge icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
+		<Badge color="orange" icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
 		<NoWorkerWithTagWarning tag={job.tag} />
 	</div>
 {:else}

package/package/components/Label.svelte

@@ -1,7 +1,7 @@
 <script>export let label = undefined;
 </script>
 
-<div>
+<div class={$$props.class}>
 	<div class="flex flex-row justify-between items-center w-full">
 		<div class="flex flex-row items-center gap-1">
 			<span class="text-secondary text-sm leading-6">{label}</span>

package/package/components/Label.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string | undefined;
     };
     events: {