windmill-components 1.537.1 → 1.542.4

package/package/components/AIProviderPicker.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">import {} from 'svelte';
+import Select from './select/Select.svelte';
+import { fetchAvailableModels, AI_PROVIDERS } from './copilot/lib';
+import { workspaceStore } from '../stores';
+import { get } from 'svelte/store';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ResourcePicker from './ResourcePicker.svelte';
+let { value = $bindable(), disabled = false, actions } = $props();
+// Initialize value if undefined
+if (!value) {
+    const providers = Object.keys(AI_PROVIDERS);
+    value = {
+        kind: providers.length > 0 ? providers[0] : undefined,
+        resource: undefined,
+        model: undefined
+    };
+}
+let loading = $state(false);
+let availableModels = $state([]);
+let filterText = $state('');
+let modelsCache = new Map();
+// Reactive items for the Select component
+let items = $derived.by(() => {
+    const r = availableModels.map((model) => ({
+        label: model,
+        value: model
+    }));
+    if (value?.model && !availableModels.find((model) => model === value.model)) {
+        r.push({
+            label: value.model,
+            value: value.model
+        });
+    }
+    return r;
+});
+// Provider options for the toggle button group
+const providerOptions = Object.entries(AI_PROVIDERS).map(([key, details]) => ({
+    value: key,
+    label: details.label
+}));
+async function loadModels(signal) {
+    const provider = value?.kind;
+    const resourceValue = value?.resource;
+    const resourcePath = resourceValueToPath(resourceValue);
+    if (!provider || !resourcePath) {
+        return;
+    }
+    loading = true;
+    if (modelsCache.has(provider)) {
+        availableModels = modelsCache.get(provider) || [];
+        loading = false;
+        return;
+    }
+    try {
+        const workspace = get(workspaceStore) || '';
+        const models = await fetchAvailableModels(resourcePath, workspace, provider, signal);
+        if (signal?.aborted) {
+            return;
+        }
+        availableModels = models;
+        modelsCache.set(provider, models);
+    }
+    catch (e) {
+        if (signal?.aborted) {
+            return;
+        }
+        // Fall back to default models for this provider
+        const defaultModels = AI_PROVIDERS[provider]?.defaultModels || [];
+        availableModels = defaultModels;
+    }
+    finally {
+        if (!signal?.aborted) {
+            loading = false;
+        }
+    }
+}
+// Reload models when provider or resourcePath changes
+$effect(() => {
+    const abortController = new AbortController();
+    const provider = value?.kind;
+    const resourceValue = value?.resource;
+    const resourcePath = resourceValueToPath(resourceValue);
+    filterText = '';
+    if (provider && resourcePath) {
+        loadModels(abortController.signal);
+    }
+    else {
+        const defaultModels = provider ? AI_PROVIDERS[provider]?.defaultModels || [] : [];
+        availableModels = defaultModels;
+        loading = false;
+    }
+    return () => {
+        abortController.abort();
+    };
+});
+// Handle provider selection
+function onProviderChange(selectedProvider) {
+    if (value) {
+        value.kind = selectedProvider;
+        value.resource = undefined;
+        value.model = undefined;
+    }
+}
+// Helper functions to handle $res: prefix like ObjectResourceInput does
+function isResource(resourceValue) {
+    return (typeof resourceValue === 'string' &&
+        resourceValue.length >= '$res:'.length &&
+        resourceValue.startsWith('$res:'));
+}
+function resourceValueToPath(resourceValue) {
+    if (isResource(resourceValue)) {
+        return resourceValue.substring('$res:'.length);
+    }
+    return resourceValue;
+}
+function pathToResourceValue(path) {
+    if (path == undefined) {
+        return undefined;
+    }
+    else {
+        return `$res:${path}`;
+    }
+}
+</script>
+
+<div class="w-full flex flex-col gap-3">
+	<!-- Provider Selection -->
+	<div class="flex flex-col gap-2">
+		<ToggleButtonGroup selected={value?.kind} onSelected={onProviderChange} {disabled} wrap>
+			{#snippet children({ item })}
+				{#each providerOptions as option}
+					<ToggleButton value={option.value} label={option.label} {item} />
+				{/each}
+			{/snippet}
+		</ToggleButtonGroup>
+	</div>
+
+	<!-- Resource Selection -->
+	<div class="flex flex-col border border-gray-200 rounded-md p-2 gap-2">
+		<div class="flex flex-col gap-1">
+			<p class="text-sm font-medium text-primary">resource</p>
+			<ResourcePicker
+				bind:value={
+					() => resourceValueToPath(value?.resource),
+					(v) => {
+						if (value) {
+							value.resource = pathToResourceValue(v)
+						}
+					}
+				}
+				resourceType={value?.kind}
+				disabled={disabled || !value?.kind}
+				placeholder="Select resource"
+				selectFirst={true}
+			/>
+		</div>
+
+		<!-- Model Selection -->
+		<div class="flex flex-col gap-1">
+			<p class="text-sm font-medium text-primary">model</p>
+			<Select
+				{items}
+				bind:value={value.model}
+				placeholder="Select model"
+				disabled={disabled || !value?.kind || !resourceValueToPath(value?.resource)}
+				onCreateItem={(r) => {
+					availableModels.push(r)
+					value.model = r
+				}}
+				createText="Press enter to use custom model"
+				{loading}
+				clearable={false}
+				noItemsMsg={'No models available'}
+				bind:filterText
+			/>
+		</div>
+	</div>
+
+	{@render actions?.()}
+</div>

package/package/components/AIProviderPicker.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+import type { AIProvider } from '../gen';
+interface ProviderValue {
+    kind?: AIProvider;
+    resource?: string;
+    model?: string;
+}
+interface Props {
+    value: ProviderValue | undefined;
+    disabled?: boolean;
+    actions?: Snippet;
+}
+declare const AiProviderPicker: import("svelte").Component<Props, {}, "value">;
+type AiProviderPicker = ReturnType<typeof AiProviderPicker>;
+export default AiProviderPicker;

package/package/components/ArgInfo.svelte

@@ -86,14 +86,14 @@ async function getVariable(path) {
 	<div class="relative">
 		{#if JSON.stringify(value).length > 120}
 			<button
-				class="text-xs absolute top-0 right-4 text-tertiary"
+				class="text-xs absolute top-0 right-8 text-tertiary"
 				onclick={() => {
 					jsonViewerContent = value
 					jsonViewer?.toggleDrawer()
 				}}><Expand size={18} /></button
 			>
 		{/if}
-		<div class="max-h-60 overflow-auto">
+		<div class="max-h-60 overflow-auto" style="scrollbar-gutter: stable">
 			<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
 		</div>
 	</div>

package/package/components/ArgInput.svelte

@@ -23,13 +23,14 @@ import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import { deepEqual } from 'fast-equals';
-import DynSelect from './DynSelect.svelte';
+import DynamicInput from './DynamicInput.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import S3ArgInput from './common/fileUpload/S3ArgInput.svelte';
 import { base } from '../base';
 import { workspaceStore } from '../stores';
 import { getJsonSchemaFromResource } from './schema/jsonSchemaResource.svelte';
+import AIProviderPicker from './AIProviderPicker.svelte';
 let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
 $effect(() => {
     if (description == undefined) {
@@ -206,6 +207,10 @@ export function focus() {
         el.style.height = el.scrollHeight + 50 + 'px';
     }
 }
+const EMAIL_PATTERN = '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$';
+const IPV4_PATTERN = '^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';
+const UUID_PATTERN = '^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$';
+const IPV6_PATTERN = '^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$';
 function validateInput(pattern, v, required) {
     if (nullable && emptyString(v)) {
         error = '';
@@ -232,6 +237,18 @@ function validateInput(pattern, v, required) {
                 !valid && (valid = true);
             }
         }
+        else if (type == 'string' && format == 'email' && !testRegex(EMAIL_PATTERN, v)) {
+            error = 'invalid email address';
+        }
+        else if (type == 'string' && format == 'ipv4' && !testRegex(IPV4_PATTERN, v)) {
+            error = 'invalid IPv4 address';
+        }
+        else if (type == 'string' && format == 'ipv6' && !testRegex(IPV6_PATTERN, v)) {
+            error = 'invalid IPv6 address';
+        }
+        else if (type == 'string' && format == 'uuid' && !testRegex(UUID_PATTERN, v)) {
+            error = 'invalid UUID';
+        }
         else if (pattern && !testRegex(pattern, v)) {
             if (!emptyString(customErrorMessage)) {
                 error = customErrorMessage ?? '';
@@ -506,6 +523,19 @@ onDestroy(() => {
 					editTab="inputEditor"
 					noPreview
 					addPropertyInEditorTab
+					on:delete={(e) => {
+						// Handle property deletion
+						if (value && value.properties && value.properties[e.detail]) {
+							delete value.properties[e.detail]
+							// Also remove from order array if it exists
+							if (value.order) {
+								value.order = value.order.filter((key) => key !== e.detail)
+							}
+							// Update the value to trigger reactivity
+							value = { ...value }
+							dispatch('change')
+						}
+					}}
 				/>
 			{/await}
 		{:else if inputCat == 'object' && format?.startsWith('jsonschema-')}
@@ -733,14 +763,8 @@ onDestroy(() => {
 					/>
 				</div>
 			</div>
-		{:else if inputCat == 'dynselect'}
-			<DynSelect
-				name={label}
-				{otherArgs}
-				{helperScript}
-				bind:value
-				entrypoint={format?.substring('dynselect_'.length) ?? ''}
-			/>
+		{:else if inputCat == 'dynamic'}
+			<DynamicInput name={label} {otherArgs} {helperScript} bind:value format={format ?? ''} />
 		{:else if inputCat == 'resource-object' && resourceTypes == undefined}
 			<span class="text-2xs text-tertiary">Loading resource types...</span>
 		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
@@ -1084,6 +1108,8 @@ onDestroy(() => {
 					: undefined}
 				{showSchemaExplorer}
 			/>
+		{:else if inputCat == 'ai-provider'}
+			<AIProviderPicker bind:value {disabled} {actions} />
 		{:else if inputCat == 'email'}
 			<input
 				{autofocus}

package/package/components/ArgInput.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { EnumType, SchemaProperty } from '../common';
-import { type DynamicSelect } from '../utils';
+import { type DynamicInput as DynamicInputTypes } from '../utils';
 import type ItemPicker from './ItemPicker.svelte';
 import type SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
@@ -58,7 +58,7 @@ interface Props {
     orderEditable?: boolean;
     shouldDispatchChanges?: boolean;
     noDefaultOnSelectFirst?: boolean;
-    helperScript?: DynamicSelect.HelperScript;
+    helperScript?: DynamicInputTypes.HelperScript;
     otherArgs?: Record<string, any>;
     lightHeader?: boolean;
     diffStatus?: SchemaDiff | undefined;
@@ -99,8 +99,8 @@ declare const ArgInput: $$__sveltets_2_IsomorphicComponent<Props, {
     acceptChange: CustomEvent<any>;
     rejectChange: CustomEvent<any>;
     blur: CustomEvent<any>;
-    keydownCmdEnter: CustomEvent<any>;
     change: CustomEvent<any>;
+    keydownCmdEnter: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/package/components/AssignableTagsInner.svelte

@@ -23,6 +23,33 @@ async function loadCustomTags() {
     }
 }
 const dispatch = createEventDispatcher();
+const customTagRegex = /^([\w-]+)\(((?:[\w-]+\+)*[\w-]+|(?:\^[\w-]+)+)\)$/;
+const dynamicTagRegex = /\$args\[((?:\w+\.)*\w+)\]/;
+let dynamicTag = $derived.by(() => {
+    let r = newTag.trim();
+    if (r == '')
+        return undefined;
+    let matched = r.match(dynamicTagRegex);
+    return matched?.[1];
+});
+let extractedCustomTag = $derived.by(() => {
+    let r = newTag.trim();
+    if (r == '')
+        return undefined;
+    let matched = r.match(customTagRegex);
+    console.log(matched);
+    let tag = matched?.[1];
+    let workspaces_raw = matched?.[2];
+    let tag_type = workspaces_raw?.includes('^') ? 'exclude' : 'include';
+    if (tag_type == 'exclude') {
+        workspaces_raw = workspaces_raw?.slice(1);
+    }
+    let workspaces = workspaces_raw?.split(tag_type == 'include' ? '+' : '^');
+    if (!workspaces_raw || workspaces_raw?.length == 0) {
+        return undefined;
+    }
+    return { tag, workspaces, tag_type };
+});
 loadCustomTags();
 </script>
 
@@ -55,6 +82,53 @@ loadCustomTags();
 			{/each}
 		</div>
 		<input type="text" bind:value={newTag} />
+		{#if extractedCustomTag}
+			<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+				<div class="font-medium mb-1">Workspace specific tag</div>
+				<div>
+					<b>Tag:</b>
+					{extractedCustomTag.tag}
+				</div>
+				<div>
+					<b>Workspaces:</b>
+					{#if extractedCustomTag.tag_type == 'include'}
+						{extractedCustomTag.workspaces?.join(', ')}
+					{:else}
+						All workspaces except {extractedCustomTag.workspaces?.join(', ')}
+					{/if}
+				</div>
+			</div>
+		{:else if newTag.trim()}
+			{#if newTag.includes('(') || newTag.includes(')') || newTag.includes('+') || newTag.includes('^') || ((newTag.includes('.') || newTag.includes('$args[')) && !dynamicTag)}
+				<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+					<div class="font-medium mb-1 text-red-500">Invalid tag</div>
+					<div>
+						<b>Tag:</b>
+						{newTag.trim()}
+					</div>
+				</div>
+			{:else}
+				<div class="text-2xs text-tertiary p-2 bg-gray-50 rounded border">
+					<div class="font-medium mb-1">
+						{#if newTag.includes('$workspace') || newTag.includes('$args')}
+							Dynamic tag
+						{:else}
+							Simple tag
+						{/if}
+					</div>
+					<div>
+						<b>Tag:</b>
+						{newTag.trim()}
+					</div>
+					{#if newTag.includes('$workspace') && !dynamicTag}
+						<div>Interpolated tag based on workspace id the job was created in </div>
+					{/if}
+					{#if dynamicTag}
+						<div>Interpolated tag based on args input of <b>{dynamicTag}</b></div>
+					{/if}
+				</div>
+			{/if}
+		{/if}
 
 		<Button
 			variant="contained"
@@ -87,13 +161,25 @@ loadCustomTags();
 			></span
 		>
 		<span class="text-2xs text-tertiary"
-			>To exclude 'workspace1' and 'workspace2' from a tag, use <pre
-				class="inline">tag(^workspace1^workspace2)</pre
+			>To exclude 'workspace1' and 'workspace2' from a tag, use <pre class="inline"
+				>tag(^workspace1^workspace2)</pre
 			></span
 		>
 		<span class="text-2xs text-tertiary"
-			>For dynamic tags based on the workspace, use <pre class="inline">$workspace</pre>, e.g:
+			>For <a
+				href="https://www.windmill.dev/docs/core_concepts/worker_groups#dynamic-tag"
+				target="_blank">dynamic tags</a
+			>
+			based on the workspace, use <pre class="inline">$workspace</pre>, e.g:
 			<pre class="inline">tag-$workspace</pre></span
 		>
+		<span class="text-2xs text-tertiary"
+			>For <a
+				href="https://www.windmill.dev/docs/core_concepts/worker_groups#dynamic-tag"
+				target="_blank">dynamic tags</a
+			>
+			based on args input, use <pre class="inline">$args[a.b.c]</pre> where
+			<pre class="inline">a.b.c</pre> is the path to the value in the args object</span
+		>
 	{/if}
 </div>

package/package/components/ConcurrentJobsChart.svelte

@@ -1,14 +1,9 @@
 <script lang="ts">import 'chartjs-adapter-date-fns';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { Chart as ChartJS, CategoryScale, Legend, LineElement, LinearScale, PointElement, TimeScale, Title, Tooltip } from 'chart.js';
-import { createEventDispatcher } from 'svelte';
 import { getDbClockNow } from '../forLater';
 import { Line } from './chartjs-wrappers/chartJs';
-export let extendedJobs = undefined;
-export let maxIsNow = false;
-export let minTimeSet = undefined;
-export let maxTimeSet = undefined;
-const dispatch = createEventDispatcher();
+let { extendedJobs = undefined, maxIsNow = false, minTimeSet = undefined, maxTimeSet = undefined, onZoom } = $props();
 function calculateTimeSeries(extendedJobs) {
     const timeline = new Map();
     extendedJobs.jobs.forEach((j) => {
@@ -40,7 +35,7 @@ function calculateTimeSeries(extendedJobs) {
             }
             const s = timeline.get(startTime);
             s.count += 1;
-            s.id_started.push('unknoww');
+            s.id_started.push('unknown');
             if (j.duration_ms != undefined) {
                 const jc = j;
                 const endTime = startTime + jc.duration_ms;
@@ -79,32 +74,13 @@ function calculateTimeSeries(extendedJobs) {
     }
     return result;
 }
-let intervals = undefined;
-$: intervals = extendedJobs ? calculateTimeSeries(extendedJobs) : undefined;
 ChartJS.register(Title, Tooltip, Legend, zoomPlugin, LineElement, CategoryScale, LinearScale, PointElement, TimeScale);
-$: data = {
-    datasets: [
-        {
-            borderColor: '#4ade80',
-            backgroundColor: '#f8717100',
-            pointRadius: 0,
-            label: 'running',
-            showLine: true,
-            stepped: true,
-            data: intervals?.map((job) => ({
-                x: job.time,
-                y: job.count,
-                id: job.msg
-            })) ?? []
-        }
-    ]
-};
 const zoomOptions = {
     pan: {
         enabled: true,
         modifierKey: 'ctrl',
         onPanComplete: ({ chart }) => {
-            dispatch('zoom', {
+            onZoom({
                 min: addSeconds(new Date(chart.scales.x.min), -1),
                 max: addSeconds(new Date(chart.scales.x.max), 1)
             });
@@ -116,16 +92,13 @@ const zoomOptions = {
         },
         mode: 'x',
         onZoom: ({ chart }) => {
-            dispatch('zoom', {
+            onZoom({
                 min: addSeconds(new Date(chart.scales.x.min), -1),
                 max: addSeconds(new Date(chart.scales.x.max), 1)
             });
         }
     }
 };
-let minTime = addSeconds(new Date(), -300);
-let maxTime = getDbClockNow();
-$: computeMinMaxTime(intervals, minTimeSet, maxTimeSet);
 function minJobTime(intervals) {
     return intervals[0].time;
 }
@@ -136,31 +109,46 @@ function computeMinMaxTime(intervals, minTimeSet, maxTimeSet) {
     let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined;
     let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined;
     if (minTimeSetDate && maxTimeSetDate) {
-        minTime = minTimeSetDate;
-        maxTime = maxTimeSetDate;
-        return;
+        return { min: minTimeSetDate, max: maxTimeSetDate };
     }
     if (intervals == undefined || intervals?.length == 0) {
-        minTime = minTimeSetDate ?? addSeconds(new Date(), -300);
-        maxTime = maxTimeSetDate ?? getDbClockNow();
-        return;
+        const minTime = minTimeSetDate ?? addSeconds(new Date(), -300);
+        const maxTime = maxTimeSetDate ?? getDbClockNow();
+        return { min: minTime, max: maxTime };
     }
     const maxJob = maxIsNow ? getDbClockNow() : maxJobTime(intervals);
     const minJob = minJobTime(intervals);
     const diff = (maxJob.getTime() - minJob.getTime()) / 20000;
-    minTime = minTimeSetDate ?? addSeconds(minJob, -diff);
-    if (maxIsNow) {
-        maxTime = maxTimeSetDate ?? maxJob;
-    }
-    else {
-        maxTime = maxTimeSetDate ?? addSeconds(maxJob, diff);
-    }
+    const minTime = minTimeSetDate ?? addSeconds(minJob, -diff);
+    const maxTime = maxIsNow
+        ? (maxTimeSetDate ?? maxJob)
+        : (maxTimeSetDate ?? addSeconds(maxJob, diff));
+    return { min: minTime, max: maxTime };
 }
 function addSeconds(date, seconds) {
     date.setTime(date.getTime() + seconds * 1000);
     return date;
 }
-$: options = {
+const intervals = $derived(extendedJobs ? calculateTimeSeries(extendedJobs) : undefined);
+let data = $derived({
+    datasets: [
+        {
+            borderColor: '#4ade80',
+            backgroundColor: '#f8717100',
+            pointRadius: 0,
+            label: 'running',
+            showLine: true,
+            stepped: true,
+            data: intervals?.map((job) => ({
+                x: job.time,
+                y: job.count,
+                id: job.msg
+            })) ?? []
+        }
+    ]
+});
+const minMaxTimes = $derived(computeMinMaxTime(intervals, minTimeSet, maxTimeSet));
+let options = $derived({
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
@@ -182,8 +170,8 @@ $: options = {
             grid: {
                 display: false
             },
-            min: minTime,
-            max: maxTime
+            min: minMaxTimes.min,
+            max: minMaxTimes.max
         },
         y: {
             grid: {
@@ -204,7 +192,7 @@ $: options = {
         intersect: false,
         mode: 'index'
     }
-};
+});
 </script>
 
 <div class="relative max-h-40">

package/package/components/ConcurrentJobsChart.svelte.d.ts

@@ -1,27 +1,15 @@
 import 'chartjs-adapter-date-fns';
 import type { ExtendedJobs } from '../gen';
-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 ConcurrentJobsChart: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     extendedJobs?: ExtendedJobs | undefined;
     maxIsNow?: boolean;
     minTimeSet?: string | undefined;
     maxTimeSet?: string | undefined;
-}, {
-    zoom: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ConcurrentJobsChart = InstanceType<typeof ConcurrentJobsChart>;
+    onZoom: (zoom: {
+        min: Date;
+        max: Date;
+    }) => void;
+}
+declare const ConcurrentJobsChart: import("svelte").Component<Props, {}, "">;
+type ConcurrentJobsChart = ReturnType<typeof ConcurrentJobsChart>;
 export default ConcurrentJobsChart;

package/package/components/CustomPopover.svelte.d.ts

@@ -31,7 +31,7 @@ declare const CustomPopover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_P
     default: {};
     overlay: {};
 }>, {
-    click: MouseEvent;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {

package/package/components/DropdownSelect.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import DropdownV2 from './DropdownV2.svelte';
+import { ChevronDown } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+let { items = [], extraLabel, selected, selectedDisplayName, btnClasses } = $props();
+const filteredItems = $derived(items.filter((item) => item.id !== selected));
+</script>
+
+<DropdownV2 items={filteredItems}>
+	{#snippet buttonReplacement()}
+		<div
+			class={twMerge(
+				'p-2 h-8 flex flex-row items-center gap-2 border hover:bg-surface-hover cursor-pointer rounded-md',
+				btnClasses
+			)}
+		>
+			<div class="flex flex-row items-center gap-1 pr-2 justify-between w-full">
+				<span class="text-xs whitespace-nowrap">
+					{selectedDisplayName ?? items.find((item) => item.id === selected)?.displayName ?? ''}
+				</span>
+
+				{@render extraLabel?.()}
+			</div>
+			<ChevronDown size={12} />
+		</div>
+	{/snippet}
+</DropdownV2>