windmill-components 1.558.4 → 1.596.0

package/package/components/SimpleEditor.svelte

@@ -25,7 +25,7 @@ import { allClasses } from './apps/editor/componentsPanel/cssUtils';
 import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte';
 import libStdContent from '../es6.d.ts.txt?raw';
 import domContent from '../dom.d.ts.txt?raw';
-import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers } from './vscode';
+import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers, MONACO_Y_PADDING } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import { vimMode, relativeLineNumbers } from '../stores';
 import { initVim } from './monaco_keybindings';
@@ -34,6 +34,7 @@ import { editorPositionMap } from '../utils';
 import { langToExt } from '../editorLangUtils';
 import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor';
 import { setMonacoJavascriptOptions, setMonacoJsonOptions } from './monacoLanguagesOptions';
+import { twMerge } from 'tailwind-merge';
 // import { createConfiguredEditor } from 'vscode/monaco'
 // import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 let divEl = null;
@@ -42,11 +43,11 @@ let model;
 let statusDiv = $state(null);
 let width = $state(0);
 let initialized = $state(false);
-let suggestion = $state('');
 let placeholderVisible = $state(false);
 let mounted = $state(false);
 let valueAfterDispose = undefined;
-let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', fakeMonacoPlaceholderClass = '', loadAsync = false, key, disabled = false, minHeight = 1000, renderLineHighlight = 'none', yPadding } = $props();
+let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key, disabled = false, minHeight = 1000, renderLineHighlight = 'none', suggestion } = $props();
+let yPadding = MONACO_Y_PADDING;
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 export function getCode() {
@@ -125,13 +126,6 @@ export function show() {
 export function hide() {
     divEl?.classList.add('hidden');
 }
-export function setSuggestion(value) {
-    suggestion = value;
-}
-let disableTabCond;
-$effect(() => {
-    disableTabCond?.set(!code && !!suggestion);
-});
 let vimDisposable = undefined;
 $effect(() => {
     if (allowVim && editor !== null && $vimMode && statusDiv) {
@@ -231,7 +225,7 @@ async function loadMonaco() {
             model,
             ...(yPadding !== undefined ? { padding: { bottom: yPadding, top: yPadding } } : {}),
             renderLineHighlight,
-            lineDecorationsWidth: 6,
+            lineDecorationsWidth: 0,
             lineNumbersMinChars: 2,
             fontSize: fontSize,
             quickSuggestions: disableSuggestions
@@ -260,7 +254,6 @@ async function loadMonaco() {
     keepModelAroundToAvoidDisposalOfWorkers();
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
-        suggestion = '';
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             updateCode();
@@ -279,8 +272,6 @@ async function loadMonaco() {
             updateCode();
             shouldBindKey && format && format();
         });
-        disableTabCond = editor.createContextKey('disableTabCond', !code);
-        editor.addCommand(KeyCode.Tab, function () { }, 'disableTabCond');
         editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {
             // CMD + slash (toggle comment) on some EU keyboards
             editor?.trigger('keyboard', 'editor.action.commentLine', {});
@@ -469,38 +460,32 @@ updatePlaceholderVisibility(code ?? '');
 </script>
 
 <EditorTheme />
-{#if editor && suggestion && code?.length === 0}
-	<div
-		class="absolute top-[0.05rem] left-[2.05rem] z-10 text-sm text-[#0007] italic font-mono dark:text-[#ffffff56] text-ellipsis overflow-hidden whitespace-nowrap"
-		style={`max-width: calc(${width}px - 2.05rem)`}
-	>
-		{suggestion}
-	</div>
-{/if}
-
-{#if !editor}
+{#if !editor || suggestion}
 	<FakeMonacoPlaceHolder
-		{code}
+		code={suggestion || code}
 		autoheight
 		lineNumbersWidth={hideLineNumbers ? 0 : (23 * fontSize) / 14}
 		lineNumbersOffset={fontSize == 14 ? -8 : -11}
 		{fontSize}
 		showNumbers={!hideLineNumbers}
-		class={fakeMonacoPlaceholderClass}
 	/>
 {/if}
-
 <div
 	bind:this={divEl}
-	class="relative {className} {!editor ? 'hidden' : ''} editor {disabled
-		? 'disabled'
-		: ''} simple-editor {!allowVim ? 'nonmain-editor' : ''}"
+	class={twMerge(
+		'relative editor simple-editor',
+		className,
+		suggestion ? 'absolute opacity-0 pointer-events-none' : '',
+		!editor ? 'hidden' : '',
+		disabled ? 'disabled' : '',
+		!allowVim ? 'nonmain-editor' : ''
+	)}
 	bind:clientWidth={width}
 >
 	{#if placeholder}
 		<div
 			id="placeholder"
-			class="absolute left-[24px] text-gray-500 text-sm pointer-events-none font-mono z-10 {placeholderVisible
+			class="absolute text-gray-500 text-sm pointer-events-none font-mono z-10 {placeholderVisible
 				? ''
 				: 'hidden'}"
 		>
@@ -508,13 +493,14 @@ updatePlaceholderVisibility(code ?? '');
 		</div>
 	{/if}
 </div>
+
 {#if allowVim && vimMode}
 	<div class="fixed bottom-0 z-30" bind:this={statusDiv}></div>
 {/if}
 
 <style>
 	.editor {
-		border-radius: 0.5rem;
+		border-radius: 0.375rem;
 		padding: 0px;
 }
 

package/package/components/SimpleEditor.svelte.d.ts

@@ -25,14 +25,13 @@ type $$ComponentProps = {
     allowVim?: boolean;
     tailwindClasses?: string[];
     class?: string;
-    fakeMonacoPlaceholderClass?: string;
     loadAsync?: boolean;
     initialCursorPos?: IPosition;
     key?: string;
     disabled?: boolean;
     minHeight?: number;
     renderLineHighlight?: 'all' | 'line' | 'gutter' | 'none';
-    yPadding?: number;
+    suggestion?: string;
 };
 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> & {
@@ -64,7 +63,6 @@ declare const SimpleEditor: $$__sveltets_2_IsomorphicComponent<$$ComponentProps,
     onDidChangeCursorSelection: (f: (e: meditor.ICursorSelectionChangedEvent) => void) => IDisposable | undefined;
     show: () => void;
     hide: () => void;
-    setSuggestion: (value: string) => void;
     setCursorToEnd: () => void;
 }, "code">;
 type SimpleEditor = InstanceType<typeof SimpleEditor>;

package/package/components/SqlRepl.svelte

@@ -50,7 +50,8 @@ import { untrack } from 'svelte';
 import { getLanguageByResourceType } from './apps/components/display/dbtable/utils';
 import StepHistory, {} from './flows/propPicker/StepHistory.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { getDbType, wrapDucklakeQuery } from './dbOps';
+import { getDatabaseArg, getDbType } from './dbOps';
+import { wrapDucklakeQuery } from './ducklake';
 let { input, onData, placeholderTableName } = $props();
 let dbType = $derived(getDbType(input));
 const DEFAULT_SQL = 'SELECT * FROM _';
@@ -66,6 +67,7 @@ let runHistory = $state([]);
 async function run({ doPostgresRowToJsonFix } = {}) {
     if (isRunning || !$workspaceStore)
         return;
+    const READ_OPS = ['SELECT', 'WITH', 'SHOW', 'EXPLAIN', 'DESCRIBE'];
     isRunning = true;
     try {
         const statements = splitSqlStatements(pruneComments(code));
@@ -80,14 +82,14 @@ async function run({ doPostgresRowToJsonFix } = {}) {
         if (doPostgresRowToJsonFix) {
             transformedCode = statements
                 .map((statement) => {
-                if (statement.trim().toUpperCase().startsWith('SELECT')) {
+                if (READ_OPS.some((op) => statement.trim().toUpperCase().startsWith(op))) {
                     return `SELECT row_to_json(__t__) FROM (${statement}) __t__`;
                 }
                 return statement;
             })
                 .join(';');
         }
-        const dbArg = input?.type === 'database' ? { database: '$res:' + input.resourcePath } : {};
+        const dbArg = getDatabaseArg(input);
         if (input?.type === 'ducklake') {
             transformedCode = wrapDucklakeQuery(transformedCode, input.ducklake);
         }
@@ -109,7 +111,7 @@ async function run({ doPostgresRowToJsonFix } = {}) {
         if (doPostgresRowToJsonFix) {
             result = result.map((row) => row['row_to_json']);
         }
-        if (statements[statements.length - 1].toUpperCase().trim().startsWith('SELECT')) {
+        if (READ_OPS.some((op) => statements[statements.length - 1].toUpperCase().trim().startsWith(op))) {
             runHistory.push({
                 created_at: new Date().toISOString(),
                 created_by: '',
@@ -156,8 +158,8 @@ let editor = $state(null);
 		{/await}
 		<Button
 			wrapperClasses="absolute z-10 bottom-2 right-6"
-			color={isRunning ? 'red' : undefined}
-			variant="border"
+			variant="accent"
+			destructive={isRunning}
 			shortCut={{ Icon: CornerDownLeft }}
 			on:click={() => run()}
 		>

package/package/components/SqlRepl.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type DbInput } from './dbOps';
+import type { DbInput } from './dbTypes';
 type Props = {
     input: DbInput;
     onData: (data: Record<string, any>[]) => void;

package/package/components/Star.svelte

@@ -39,14 +39,14 @@ const dispatch = createEventDispatcher();
 >
 	{#if starred}
 		{#if buttonHover}
-			<StarOff size={18} fill="currentcolor" />
+			<StarOff size={16} fill="currentcolor" />
 		{:else}
-			<Star size={18} fill="currentcolor" />
+			<Star size={16} fill="currentcolor" />
 		{/if}
 	{:else}
 		<Star
 			class={!buttonHover ? 'opacity-60' : ''}
-			size={18}
+			size={16}
 			fill={buttonHover ? 'currentcolor' : 'none'}
 		/>
 	{/if}

package/package/components/StringTypeNarrowing.svelte

@@ -326,10 +326,14 @@ function onEnumKeyChange(oldKey, newKey) {
 		/>
 	{/if}
 
-	{#if kind == 'none' || kind == 'pattern'}
+	{#if kind == 'none' || kind == 'pattern' || kind == 'format'}
 		<Toggle
 			size="xs"
-			options={{ right: 'Is Password' }}
+			options={{
+				right: 'Is Password/Sensitive',
+				rightTooltip:
+					'The value will be stored as an ephemeral secret variable in the user space of the caller of the job, only viewable by him.'
+			}}
 			checked={password}
 			on:change={(e) => {
 				if (e.detail) {

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -15,6 +15,6 @@ interface Props {
     overrideAllowKindChange?: boolean;
     originalType?: string | undefined;
 }
-declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "pattern" | "disableCreate" | "format" | "enum_" | "enumLabels" | "contentEncoding" | "customErrorMessage" | "minRows" | "disableVariablePicker" | "dateFormat">;
+declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "pattern" | "format" | "disableCreate" | "contentEncoding" | "enum_" | "enumLabels" | "customErrorMessage" | "minRows" | "disableVariablePicker" | "dateFormat">;
 type StringTypeNarrowing = ReturnType<typeof StringTypeNarrowing>;
 export default StringTypeNarrowing;

package/package/components/Subsection.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { enterpriseLicense } from '../stores';
-import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-svelte';
+import { ChevronDown, ChevronRight } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import { twMerge } from 'tailwind-merge';
+import EEOnly from './EEOnly.svelte';
 let { label = undefined, tooltip = undefined, eeOnly = false, collapsable = false, collapsed = $bindable(true), openInitially = false, headless = false, class: clazz = undefined, header, action, badge, children } = $props();
 if (openInitially && collapsable && collapsed) {
     collapsed = false;
@@ -31,10 +32,7 @@ if (openInitially && collapsable && collapsed) {
 				{/if}
 				{#if eeOnly}
 					{#if !$enterpriseLicense}
-						<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap ml-8">
-							<AlertTriangle size={16} />
-							EE only <Tooltip>Enterprise Edition only feature</Tooltip>
-						</div>
+						<EEOnly />
 					{/if}
 				{/if}
 			</h3>

package/package/components/Summary.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { Pen } from 'lucide-svelte';
+import TextInput from './text_input/TextInput.svelte';
 export let value;
 export let disabled = false;
 function blur(e) {
@@ -7,70 +8,20 @@ function blur(e) {
 </script>
 
 <div class="flex flex-row center-center gap-1 min-w-32 lg:min-w-64 w-full max-w-md">
-	<div class="relative w-full">
-		<input
-			title="Rename"
-			type="text"
-			placeholder="Untitled"
-			class="windmillapp app-title text-sm w-full font-semibold"
+	<div class="relative w-full flex">
+		<TextInput
+			inputProps={{
+				title: 'Rename',
+				type: 'text',
+				placeholder: 'Untitled',
+				disabled,
+				onkeydown: blur
+			}}
+			class="w-full font-semibold"
 			bind:value
-			{disabled}
-			on:keydown={blur}
 		/>
 		{#if !disabled}
 			<Pen class="absolute top-2 right-2 pen-icon -z-10 opacity-60" size={14} />
 		{/if}
 	</div>
 </div>
-
-<style global>
-	:global(.app-title) {
-		display: block !important;
-		width: 100% !important;
-		border-radius: 0.25rem !important;
-		border-width: 0px !important;
-		padding: 0.25rem !important;
-		padding-left: 0.5rem !important;
-		padding-right: 0.5rem !important;
-		font-size: 0.875rem !important;
-		line-height: 1.25rem !important;
-		font-weight: 600 !important
-}
-
-	:global(.app-title:hover) {
-		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-		--tw-ring-opacity: 1 !important;
-		--tw-ring-color: rgb(234 238 244 / var(--tw-ring-opacity, 1)) !important;
-		--tw-ring-offset-width: 0px !important
-}
-
-	:global(.app-title:focus) {
-		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-		--tw-ring-opacity: 1 !important;
-		--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1)) !important;
-		--tw-ring-offset-width: 0px !important;
-		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
-}
-
-	:global(.dark) :global(.app-title) {
-		--tw-border-opacity: 1 !important;
-		border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)) !important;
-		--tw-text-opacity: 1 !important;
-		color: rgb(var(--color-text-secondary) / var(--tw-text-opacity, 1)) !important
-}
-
-	:global(.dark) :global(.app-title:focus) {
-		--tw-ring-opacity: 1 !important;
-		--tw-ring-color: rgb(94 129 172 / var(--tw-ring-opacity, 1)) !important
-}
-
-	:global(.dark) :global(.app-title:hover) {
-		--tw-ring-opacity: 1 !important;
-		--tw-ring-color: rgb(54 77 110 / var(--tw-ring-opacity, 1)) !important
-}
-	:global(.app-title:focus) + :global(.pen-icon) {
-		display: none !important
-}</style>

package/package/components/SupabaseConnect.svelte

@@ -89,11 +89,8 @@ async function save() {
 		{#if step === 'init' || selectedDatabase == undefined}
 			<h2
 				>Connect an existing database <div class="inline-block ml-2"
-					><Button
-						variant="border"
-						color="light"
-						wrapperClasses="self-stretch"
-						on:click={listDatabases}><RotateCwIcon size={12} /></Button
+					><Button variant="default" wrapperClasses="self-stretch" on:click={listDatabases}
+						><RotateCwIcon size={12} /></Button
 					></div
 				>
 			</h2>
@@ -161,9 +158,9 @@ async function save() {
 		{#snippet actions()}
 			<div class="flex gap-1">
 				{#if step == 'resource' && selectedDatabase != undefined}
-					<Button variant="border" on:click={() => (step = 'init')}>Back</Button>
+					<Button variant="default" on:click={() => (step = 'init')}>Back</Button>
 
-					<Button {disabled} on:click={save}>Save</Button>
+					<Button {disabled} on:click={save} variant="accent">Save</Button>
 				{/if}
 			</div>
 		{/snippet}

package/package/components/SuperadminSettings.svelte

@@ -9,7 +9,7 @@ export function closeDrawer() {
 }
 </script>
 
-<Drawer bind:this={drawer} size="1200px">
+<Drawer bind:this={drawer} size="1000px">
 	<DrawerContent overflow_y={true} title="Instance settings" on:close={closeDrawer}>
 		<SuperadminSettingsInner {closeDrawer} />
 	</DrawerContent>

package/package/components/SuperadminSettingsInner.svelte

@@ -14,7 +14,7 @@ import InstanceSettings from './InstanceSettings.svelte';
 import { truncate } from '../utils';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
-import { userStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import { ExternalLink } from 'lucide-svelte';
 import { settingsKeys } from './instanceSettings';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
@@ -98,36 +98,40 @@ async function updateName(name, email) {
 <div class="flex flex-col h-full w-full">
 	<div>
 		<div class="flex justify-between">
-			<div class="text-xs pt-1 text-tertiary flex flex-col">
+			<div class="text-xs pt-1 text-primary flex flex-col">
 				<div>Windmill <Version /></div>
 			</div>
 			<div><Uptodate /></div></div
 		>
 	</div>
-	<div class="flex flex-row-reverse">
-		<Button
-			variant="border"
-			color="dark"
-			target="_blank"
-			href="{base}/?workspace=admins"
-			endIcon={{ icon: ExternalLink }}
-		>
-			Admins workspace
-		</Button>
-	</div>
+	{#if $workspaceStore !== 'admins'}
+		<div class="flex flex-row-reverse">
+			<Button
+				variant="default"
+				target="_blank"
+				href="{base}/?workspace=admins"
+				endIcon={{ icon: ExternalLink }}
+			>
+				Admins workspace
+			</Button>
+		</div>
+	{/if}
 	<div class="pt-4 h-full">
 		<Tabs bind:selected={tab}>
-			<Tab value="users" aiId="instance-settings-users" aiDescription="Instance users settings"
-				>Users</Tab
-			>
+			<Tab
+				value="users"
+				aiId="instance-settings-users"
+				aiDescription="Instance users settings"
+				label="Users"
+			/>
+
 			{#each settingsKeys as category}
 				<Tab
 					value={category}
 					aiId={`instance-settings-${category}`}
 					aiDescription={`Instance ${category} settings`}
-				>
-					{category}
-				</Tab>
+					label={category}
+				/>
 			{/each}
 			{#snippet content()}
 				<div class="pt-4"></div>
@@ -149,7 +153,7 @@ async function updateName(name, email) {
 								<Button
 									btnClasses="w-auto"
 									size="sm"
-									color="dark"
+									variant="accent"
 									on:click={() => {
 										automateUsernameModalOpen = true
 									}}
@@ -173,12 +177,12 @@ async function updateName(name, email) {
 							</div>
 						{/if}
 
-						<div class="py-2 mb-4">
+						<div class="py-2 mb-6">
 							<InviteGlobalUser on:new={() => listUsers(activeOnly)} />
 						</div>
 
 						<div class="flex flex-row justify-between">
-							<h3>All instance users</h3>
+							<h3 class="text-sm font-semibold text-emphasis">All instance users</h3>
 							<Toggle
 								bind:checked={activeOnly}
 								options={{
@@ -357,7 +361,7 @@ async function updateName(name, email) {
 					</div>
 				</TabContent>
 				<TabContent value="" values={settingsKeys}>
-					<InstanceSettings bind:this={instanceSettings} hideTabs hideSave {tab} {closeDrawer} />
+					<InstanceSettings bind:this={instanceSettings} hideTabs hideSave bind:tab {closeDrawer} />
 				</TabContent>
 			{/snippet}
 		</Tabs>
@@ -366,7 +370,7 @@ async function updateName(name, email) {
 {#if tab != 'users'}
 	<div class="absolute bottom-2 w-[95%]">
 		<Button
-			color="dark"
+			variant="accent"
 			on:click={() => {
 				instanceSettings?.saveSettings()
 			}}

package/package/components/TableCustom.svelte

@@ -19,7 +19,7 @@ const dispatch = createEventDispatcher();
 		</table>
 	</div>
 	{#if paginated}
-		<div class="sticky flex flex-row-reverse text-tertiary mb-6">
+		<div class="sticky flex flex-row-reverse text-primary mb-6">
 			<button
 				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
 				on:click={() => dispatch('next')}

package/package/components/TagList.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">import Badge from './common/badge/Badge.svelte';
+import Popover from './meltComponents/Popover.svelte';
+let { tags, maxVisible = undefined, class: clazz = undefined } = $props();
+const visibleTags = $derived(maxVisible ? tags.slice(0, maxVisible) : tags);
+const extraTags = $derived(maxVisible ? tags.slice(maxVisible) : []);
+const hasExtraTags = $derived(extraTags.length > 0);
+</script>
+
+{#if tags.length > 0}
+	<div class="flex items-center gap-1 min-w-0 {clazz} w-full">
+		<!-- Display visible tags -->
+		{#each visibleTags as tag (tag)}
+			<Badge color="blue" small wrapperClass="shrink min-w-0" class="truncate" title={tag}>
+				<span class="min-w-0 truncate">{tag}</span>
+			</Badge>
+		{/each}
+
+		<!-- Display +n badge with popover for extra tags -->
+		{#if hasExtraTags}
+			<Popover
+				floatingConfig={{
+					strategy: 'absolute',
+					placement: 'bottom-start'
+				}}
+				contentClasses="border border-light rounded-lg shadow-lg p-4 surface-tertiary max-w-xs"
+				openOnHover
+				debounceDelay={150}
+			>
+				{#snippet trigger()}
+					<Badge color="blue" small clickable>
+						+{extraTags.length}
+					</Badge>
+				{/snippet}
+				{#snippet content()}
+					<div class="flex flex-wrap gap-1">
+						{#each extraTags as tag (tag)}
+							<Badge color="blue" verySmall class="max-w-20 truncate" title={tag}>{tag}</Badge>
+						{/each}
+					</div>
+				{/snippet}
+			</Popover>
+		{/if}
+	</div>
+{:else}
+	<span class="text-secondary text-xs">No tags</span>
+{/if}

package/package/components/TagList.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    tags: string[];
+    maxVisible?: number;
+    class?: string | undefined;
+}
+declare const TagList: import("svelte").Component<Props, {}, "">;
+type TagList = ReturnType<typeof TagList>;
+export default TagList;

package/package/components/TagsToListenTo.svelte

@@ -1,22 +1,55 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
-import { defaultTags, nativeTags } from './worker_group';
+<script lang="ts">import { defaultTags, nativeTags } from './worker_group';
 import { safeSelectItems } from './select/utils.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
-import { superadmin } from '../stores';
-const dispatch = createEventDispatcher();
-let { worker_tags = $bindable([]), customTags = $bindable([]), disabled: _disabled = $bindable(false) } = $props();
-let disabled = $derived(_disabled || !$superadmin);
+import { superadmin, devopsRole } from '../stores';
+import { twMerge } from 'tailwind-merge';
+import { SettingService, WorkerService } from '../gen';
+import { CUSTOM_TAGS_SETTING } from '../consts';
+import { sendUserToast } from '../toast';
+let { worker_tags = $bindable([]), customTags = $bindable([]), disabled: _disabled = $bindable(false), class: clazz = '' } = $props();
+let disabled = $derived(_disabled || !($superadmin || $devopsRole));
+let multiSelect = $state(undefined);
+const searchText = $derived(multiSelect?.getFilteredInputText());
+async function createCustomTag(tag) {
+    const tagName = tag.trim().replaceAll(' ', '_');
+    // optimistic update
+    worker_tags = [...worker_tags, tagName];
+    try {
+        // Get current custom tags
+        const currentCustomTags = await WorkerService.getCustomTags({
+            showWorkspaceRestriction: Boolean($superadmin || $devopsRole)
+        });
+        // Check if tag already exists
+        if (currentCustomTags?.includes(tagName)) {
+            sendUserToast('Tag already exists', false);
+            return;
+        }
+        // Add new tag to the list
+        await SettingService.setGlobal({
+            key: CUSTOM_TAGS_SETTING,
+            requestBody: { value: [...(currentCustomTags ?? []), tagName] }
+        });
+        // Update local state if customTags is bound
+        if (customTags) {
+            customTags = [...customTags, tagName];
+        }
+        sendUserToast('Custom tag created and added successfully');
+    }
+    catch (err) {
+        // rollback optimistic update
+        worker_tags = worker_tags.filter((t) => t !== tagName);
+        sendUserToast(`Could not create custom tag: ${err}`, true);
+    }
+}
 </script>
 
 <MultiSelect
 	items={safeSelectItems([...(customTags ?? []), ...worker_tags, ...defaultTags, ...nativeTags])}
-	bind:value={
-		() => worker_tags,
-		(w) => ((worker_tags = w.map((s) => s.replaceAll(' ', '_'))), dispatch('dirty'))
-	}
+	bind:this={multiSelect}
+	bind:value={() => worker_tags, (w) => (worker_tags = w.map((s) => s.replaceAll(' ', '_')))}
 	{disabled}
-	class={disabled ? 'border-0' : ''}
+	class={twMerge(disabled ? 'border-0' : '', clazz)}
 	allowClear={!disabled}
-	onCreateItem={(c) => worker_tags.push(c)}
-	createText="Press Enter to use this tag"
+	onCreateItem={createCustomTag}
+	createText={searchText ? `Create custom tag: ${searchText}` : 'Create custom tag'}
 />