windmill-components 1.613.5 → 1.623.2

package/package/components/graph/FlowGraphV2.svelte

@@ -75,7 +75,6 @@ const selectedId = $derived(selectionManager.getSelectedId());
 const noteEditorContext = getNoteEditorContext();
 // Function to calculate extra gap needed for notes below the lowest flow nodes
 function calculateNoteGap(notes) {
-    console.log('calculateNoteGap', notes);
     if (!notes || notes.length === 0) {
         return 0;
     }
@@ -404,6 +403,9 @@ async function updateStores() {
         ...graph.edges
     ];
     await tick();
+    updateHeight();
+}
+function updateHeight() {
     if (nodes.length === 0) {
         height = minHeight;
     }
@@ -413,6 +415,10 @@ async function updateStores() {
         height = Math.max(maxBottom - minY, minHeight);
     }
 }
+$effect(() => {
+    minHeight;
+    untrack(() => updateHeight());
+});
 const nodeTypes = {
     input2: InputNode,
     module: ModuleNode,

package/package/components/graph/renderers/triggers/TriggersBadge.svelte

@@ -11,28 +11,38 @@ import { twMerge } from 'tailwind-merge';
 import SchedulePollIcon from '../../../icons/SchedulePollIcon.svelte';
 import TriggerLabel from '../../../triggers/TriggerLabel.svelte';
 import CountBadge from '../../../common/badge/CountBadge.svelte';
+import NextcloudIcon from '../../../icons/NextcloudIcon.svelte';
 const { triggersState, triggersCount } = getContext('TriggerContext');
 let { selected, showOnlyWithCount, 
 // @ts-ignore - This is an output-only prop used with bind:
 numberOfTriggers = $bindable(0), small = true, vertical = false, limit, showDraft = true, onSelect } = $props();
 let menuOpen = $state(false);
-const triggerTypeConfig = {
-    webhook: { icon: Webhook, countKey: 'webhook_count' },
-    schedule: { icon: Calendar, countKey: 'schedule_count' },
-    http: { icon: Route, countKey: 'http_routes_count' },
-    websocket: { icon: Unplug, countKey: 'websocket_count' },
-    postgres: { icon: Database, countKey: 'postgres_count' },
-    kafka: { icon: KafkaIcon, countKey: 'kafka_count', disabled: !$enterpriseLicense },
-    default_email: { icon: Mail, countKey: 'default_email_count' },
-    email: { icon: Mail, countKey: 'email_count' },
-    nats: { icon: NatsIcon, countKey: 'nats_count', disabled: !$enterpriseLicense },
-    mqtt: { icon: MqttIcon, countKey: 'mqtt_count', disabled: !$enterpriseLicense },
-    sqs: { icon: AwsIcon, countKey: 'sqs_count', disabled: !$enterpriseLicense },
-    gcp: { icon: GoogleCloudIcon, countKey: 'gcp_count', disabled: !$enterpriseLicense },
-    poll: { icon: SchedulePollIcon },
-    cli: { icon: Terminal }
-};
-const allTypes = [
+let availableNativeServices = $state([]);
+let triggerTypeConfig = $derived(() => {
+    const baseConfig = {
+        webhook: { icon: Webhook, countKey: 'webhook_count' },
+        schedule: { icon: Calendar, countKey: 'schedule_count' },
+        http: { icon: Route, countKey: 'http_routes_count' },
+        websocket: { icon: Unplug, countKey: 'websocket_count' },
+        postgres: { icon: Database, countKey: 'postgres_count' },
+        kafka: { icon: KafkaIcon, countKey: 'kafka_count', disabled: !$enterpriseLicense },
+        default_email: { icon: Mail, countKey: 'default_email_count' },
+        email: { icon: Mail, countKey: 'email_count' },
+        nats: { icon: NatsIcon, countKey: 'nats_count', disabled: !$enterpriseLicense },
+        mqtt: { icon: MqttIcon, countKey: 'mqtt_count', disabled: !$enterpriseLicense },
+        sqs: { icon: AwsIcon, countKey: 'sqs_count', disabled: !$enterpriseLicense },
+        gcp: { icon: GoogleCloudIcon, countKey: 'gcp_count', disabled: !$enterpriseLicense },
+        poll: { icon: SchedulePollIcon },
+        cli: { icon: Terminal },
+        nextcloud: { icon: NextcloudIcon, countKey: 'nextcloud_count' }
+    };
+    // Add native trigger services that are available
+    for (const { service, icon } of availableNativeServices) {
+        baseConfig[service] = { icon };
+    }
+    return baseConfig;
+});
+let allTypes = $derived([
     'webhook',
     'schedule',
     'http',
@@ -46,8 +56,9 @@ const allTypes = [
     'gcp',
     'email',
     'poll',
-    'cli'
-];
+    'cli',
+    'nextcloud'
+]);
 function camelCaseToWords(s) {
     const result = s.replace(/([A-Z])/g, ' $1');
     return result.charAt(0).toUpperCase() + result.slice(1).toLowerCase();
@@ -77,10 +88,10 @@ let allTriggerTypes = $derived.by(() => {
     const types = !noTriggers ? Object.keys(triggersGrouped) : allTypes;
     //filter out types if showOnlyTriggersWithCount is true and there are no triggers for that type
     return types.filter((type) => (!showOnlyTriggersWithCount ||
-        ((triggerTypeConfig[type].countKey &&
-            ($triggersCount?.[triggerTypeConfig[type].countKey] ?? 0)) ||
+        ((triggerTypeConfig()[type]?.countKey &&
+            ($triggersCount?.[triggerTypeConfig()[type].countKey] ?? 0)) ||
             0) > 0) &&
-        !triggerTypeConfig[type].disabled);
+        !triggerTypeConfig()[type]?.disabled);
 });
 let triggersToDisplay = $derived(limit ? allTriggerTypes.slice(0, limit) : allTriggerTypes);
 let extraTriggers = $derived(limit && allTriggerTypes.length > limit
@@ -187,7 +198,10 @@ $effect(() => {
 </Menubar>
 
 {#snippet triggerButton({ type, isSelected, meltElement = undefined, singleItem = false })}
-	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig[type]}
+	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig()[type] || {
+		icon: Database,
+		countKey: undefined
+	}}
 
 	<MeltButton
 		aiId={`trigger-button-${type}`}
@@ -228,7 +242,10 @@ $effect(() => {
 {/snippet}
 
 {#snippet simpleTriggerItem({ item, type })}
-	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig[type]}
+	{@const { icon: SvelteComponent, countKey } = triggerTypeConfig()[type] || {
+		icon: Database,
+		countKey: undefined
+	}}
 	<MenuItem {item} class={itemClass}>
 		<div class="flex flex-row items-center gap-2">
 			<SvelteComponent size={14} />

package/package/components/home/ItemsList.svelte

@@ -305,7 +305,8 @@ $effect(() => {
 			<TextInput
 				inputProps={{
 					autofocus: true,
-					placeholder: HOME_SEARCH_PLACEHOLDER
+					placeholder: HOME_SEARCH_PLACEHOLDER,
+					id: 'home-search-input'
 				}}
 				size="md"
 				bind:value={filter}

package/package/components/home/treeViewUtils.js

@@ -46,7 +46,7 @@ export function groupItems(items) {
         if ('folderName' in a && 'username' in b) {
             return 1;
         }
-        return (a['username'] ?? a['folderName']).localeCompare(b['username'] ?? b['folderName']);
+        return (a['username'] ?? a['folderName'] ?? '').localeCompare(b['username'] ?? b['folderName']);
     });
     sortGroup(root);
     return root;

package/package/components/icons/NextcloudIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">"use strict";
-let { size = undefined, height: heightProp = 24, width: widthProp = 24 } = $props();
+let { size = undefined, height: heightProp = 24, width: widthProp = 24, color = undefined, class: clazz = '' } = $props();
 const { width, height } = $derived(size ? { width: size, height: size } : { width: widthProp, height: heightProp });
 </script>
 
@@ -9,7 +9,8 @@ const { width, height } = $derived(size ? { width: size, height: size } : { widt
 	{width}
 	{height}
 	xmlns="http://www.w3.org/2000/svg"
-	style="fill:currentcolor;"
+	class={clazz}
+	fill={color ?? 'currentColor'}
 >
 	<path
 		d="M12.018 6.537c-2.5 0-4.6 1.712-5.241 4.015-.56-1.232-1.793-2.105-3.225-2.105A3.569 3.569 0 0 0 0 12a3.569 3.569 0 0 0 3.552 3.553c1.432 0 2.664-.874 3.224-2.106.641 2.304 2.742 4.016 5.242 4.016 2.487 0 4.576-1.693 5.231-3.977.569 1.21 1.783 2.067 3.198 2.067A3.568 3.568 0 0 0 24 12a3.569 3.569 0 0 0-3.553-3.553c-1.416 0-2.63.858-3.199 2.067-.654-2.284-2.743-3.978-5.23-3.977zm0 2.085c1.878 0 3.378 1.5 3.378 3.378 0 1.878-1.5 3.378-3.378 3.378A3.362 3.362 0 0 1 8.641 12c0-1.878 1.5-3.378 3.377-3.378zm-8.466 1.91c.822 0 1.467.645 1.467 1.468s-.644 1.467-1.467 1.468A1.452 1.452 0 0 1 2.085 12c0-.823.644-1.467 1.467-1.467zm16.895 0c.823 0 1.468.645 1.468 1.468s-.645 1.468-1.468 1.468A1.452 1.452 0 0 1 18.98 12c0-.823.644-1.467 1.467-1.467z"

package/package/components/icons/NextcloudIcon.svelte.d.ts

@@ -2,6 +2,8 @@ interface Props {
     size?: number;
     height?: number;
     width?: number;
+    color?: string | undefined;
+    class?: string;
 }
 declare const NextcloudIcon: import("svelte").Component<Props, {}, "">;
 type NextcloudIcon = ReturnType<typeof NextcloudIcon>;

package/package/components/icons/PocketIdIcon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">"use strict";
+let { size = undefined, height: heightProp = 24, width: widthProp = 24, class: clazz = '' } = $props();
+const { width, height } = $derived(size ? { width: size, height: size } : { width: widthProp, height: heightProp });
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {width} {height} class={clazz}>
+	<circle cx="256" cy="256" r="256" fill="#fff"/>
+	<path d="M268.6 102.4c64.4 0 116.8 52.4 116.8 116.7 0 25.3-8 49.4-23 69.6-14.8 19.9-35 34.3-58.4 41.7l-6.5 2-15.5-76.2 4.3-2c14-6.7 23-21.1 23-36.6 0-22.4-18.2-40.6-40.6-40.6S228 195.2 228 217.6c0 15.5 9 29.8 23 36.6l4.2 2-25 153.4h-69.5V102.4z" fill="#191919"/>
+</svg>

package/package/components/icons/PocketIdIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    size?: number;
+    height?: number;
+    width?: number;
+    class?: string;
+}
+declare const PocketIdIcon: import("svelte").Component<Props, {}, "">;
+type PocketIdIcon = ReturnType<typeof PocketIdIcon>;
+export default PocketIdIcon;

package/package/components/icons/index.js

@@ -103,6 +103,7 @@ import ApifyIcon from './ApifyIcon.svelte';
 import McpIcon from './McpIcon.svelte';
 import SageIcon from './SageIcon.svelte';
 import ZohoIcon from './ZohoIcon.svelte';
+import PocketIdIcon from './PocketIdIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -210,6 +211,7 @@ export const APP_TO_ICON_COMPONENT = {
     mqtt: MqttIcon,
     apify: ApifyIcon,
     mcp: McpIcon,
-    zoho: ZohoIcon
+    zoho: ZohoIcon,
+    pocketid: PocketIdIcon
 }; // to generate correct svelte package types
 export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, OracleDBIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, Auth0Icon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon, XeroIcon, KafkaIcon, NatsIcon, MqttIcon, ApifyIcon, McpIcon, ZohoIcon };

package/package/components/instanceSettings.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonType } from './common/button/model';
-export declare const OTEL_TRACING_PROXY_LANGUAGES: readonly ["python3", "deno", "bun", "go", "bash", "rust", "csharp", "nu", "ruby"];
+export declare const OTEL_TRACING_PROXY_LANGUAGES: readonly ["nativets", "python3", "deno", "bun", "go", "bash", "rust", "csharp", "nu", "ruby"];
 export interface Setting {
     label: string;
     description?: string;

package/package/components/instanceSettings.js

@@ -1,5 +1,6 @@
 // Languages that support HTTP request tracing via OTEL proxy
 export const OTEL_TRACING_PROXY_LANGUAGES = [
+    'nativets',
     'python3',
     'deno',
     'bun',

package/package/components/raw_apps/RawAppDataTableDrawer.svelte

@@ -14,7 +14,6 @@ let selectedDatatable = $state(undefined);
 // For DB manager
 let dbManagerContent = $state();
 let hasReplResult = $state(false);
-let isRefreshing = $state(false);
 let windowWidth = $state(window.innerWidth);
 let expand = $state(false);
 // Multi-select mode: selected tables
@@ -136,7 +135,6 @@ const canAdd = $derived(selectedDatatable && selectedTables.length > 0);
 					bind:this={dbManagerContent}
 					input={dbInput}
 					bind:hasReplResult
-					bind:isRefreshing
 					bind:selectedSchemaKey
 					bind:selectedTableKey
 					multiSelectMode={true}
@@ -184,7 +182,7 @@ const canAdd = $derived(selectedDatatable && selectedTables.length > 0);
 			</Button>
 
 			<Button
-				loading={isRefreshing}
+				loading={dbManagerContent?.isLoading() ?? false}
 				on:click={() => dbManagerContent?.refresh()}
 				startIcon={{ icon: RefreshCcw }}
 				size="xs"

package/package/components/raw_apps/datatableUtils.svelte.js

@@ -36,7 +36,7 @@ export function createSchemasResource(getDatatable) {
         let dbSchema = schemas[resourcePath];
         if (!dbSchema) {
             try {
-                await getDbSchemas('postgresql', resourcePath, workspace, schemas, (msg) => console.error('Schema error:', msg));
+                schemas[resourcePath] = await getDbSchemas('postgresql', resourcePath, workspace, (msg) => console.error('Schema error:', msg));
                 dbSchema = get(dbSchemas)[resourcePath];
             }
             catch (e) {

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -111,9 +111,9 @@ let suggestedFileExtensions = $state([
 {#if resourceIsTextFile}
 	<label
 		for="format-extension"
-		class="text-base font-medium whitespace-nowrap flex items-center gap-4"
+		class="text-xs font-semibold text-emphasis whitespace-nowrap flex items-center gap-4"
 	>
-		File extension :
+		File extension:
 		<Select
 			autofocus
 			items={safeSelectItems(suggestedFileExtensions)}

package/package/components/select/MultiSelect.svelte

@@ -90,7 +90,7 @@ export function getFilteredInputText() {
 	{#if allowClear && !hideMainClearBtn && !!value?.length}
 		<CloseButton
 			noBg
-			class="mr-1 remove-all bg-transparent text-hint"
+			class="ml-2 remove-all bg-transparent text-hint"
 			small
 			on:close={(e) => (clearValue(), e.stopPropagation())}
 		/>

package/package/components/select/SelectDropdown.svelte

@@ -3,6 +3,8 @@ import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
 import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { PlusIcon } from 'lucide-svelte';
+import { useReducedMotion } from '../../svelte5Utils.svelte';
+import { watch } from 'runed';
 let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', itemLabelWrapperClasses = '', itemButtonWrapperClasses = '', header, getInputRect, onSelectValue, startSnippet, endSnippet, bottomSnippet } = $props();
 let processedItems = $derived(!filterText
     ? _processedItems
@@ -10,6 +12,7 @@ let processedItems = $derived(!filterText
 let listEl = $state();
 let dropdownPos = $state(computeDropdownPos());
 let keyArrowPos = $state();
+let reducedMotion = useReducedMotion();
 function computeDropdownPos() {
     if (!getInputRect || !listEl)
         return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
@@ -47,13 +50,20 @@ $effect(() => {
 // Also CSS transitions are smoother because they do not rely on JS / animation frames
 let uiState = $state({ domExists: open, visible: open, timeout: null });
 let initial = true;
-$effect(() => {
-    let isOpen = open && !disabled;
+watch(() => open && !disabled, (isOpen) => {
     untrack(() => {
         if (initial) {
             initial = false;
             return;
         }
+        if (reducedMotion.val) {
+            uiState = {
+                domExists: open && !disabled,
+                visible: open && !disabled,
+                timeout: null
+            };
+            return;
+        }
         if (uiState.timeout)
             clearTimeout(uiState.timeout);
         uiState = {
@@ -102,6 +112,7 @@ $effect(() => {
 	{#if uiState.domExists}
 		<div
 			class={twMerge(
+				open ? 'select-dropdown-open' : 'select-dropdown-closed',
 				disablePortal ? 'absolute z-[5002]' : 'fixed z-[10000]',
 				'text-primary text-sm select-none',
 				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
@@ -114,7 +125,8 @@ $effect(() => {
 		>
 			<div
 				class={twMerge(
-					'overflow-clip rounded-md drop-shadow-base transition-height',
+					'overflow-clip rounded-md drop-shadow-base',
+					!reducedMotion.val ? 'transition-height' : '',
 					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
 				)}
 				style="height: {uiState.visible ? dropdownPos.height : 0}px;"

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -38,7 +38,7 @@ async function renameWorkspace() {
             }
         });
         open = false;
-        sendUserToast(`Renamed workspace to ${newName}. Reloading...`);
+        sendUserToast(`Moved workspace to ${newName}. Old workspace archived. Reloading...`);
         await new Promise((resolve) => setTimeout(resolve, 1000));
         window.location.href = '/workspace_settings?tab=general&workspace=' + newId;
     }
@@ -76,12 +76,13 @@ export let open = false;
 
 <Modal bind:open title="Change workspace ID">
 	<div class="flex flex-col gap-4">
-		<Alert type="info" title="Changing the workspace ID may take a few minutes to complete">
-			Once finished, please update your webhook calls and adjust your CLI sync configuration
-			accordingly.
-		</Alert>
-		<Alert type="warning" title="Running jobs and queued flow steps will not be migrated.">
-			Make sure that all your jobs are completed before changing the workspace ID.
+		<Alert type="warning" title="What happens">
+			<ul class="list-disc list-inside text-xs mt-1 space-y-1">
+				<li>All content (scripts, flows, apps, resources, etc.) moves to the new ID</li>
+				<li>Old workspace is archived with completed jobs, logs, and audit history</li>
+				<li>Running jobs will be canceled</li>
+			</ul>
+			<p class="text-xs mt-2">Remember to update webhook URLs and CLI sync config afterward.</p>
 		</Alert>
 		<p class="text-secondary text-xs"
 			>Current ID <br /> <span class="text-emphasis">{$workspaceStore ?? ''}</span></p

package/package/components/settings/CreateToken.svelte

@@ -16,7 +16,7 @@ import TextInput from '../text_input/TextInput.svelte';
 import Select from '../select/Select.svelte';
 import { mcpEndpointTools } from '../../mcpEndpointTools';
 import InfoIcon from 'lucide-svelte/icons/info';
-let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined) } = $props();
+let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined), displayCreateToken = true } = $props();
 // MCP clients do not allow names longer than 60 characters, here we use 55 because final tool name server side will add ~5 characters
 const MAX_PATH_LENGTH = 55;
 let newToken = $state(undefined);
@@ -628,11 +628,11 @@ function clearAllEndpoints() {
 		</div>
 	</div>
 
-	{#if newToken}
+	{#if newToken && displayCreateToken}
 		<TokenDisplay token={newToken} />
 	{/if}
 
-	{#if newMcpToken}
+	{#if newMcpToken && displayCreateToken}
 		<TokenDisplay token={newMcpToken} mcpUrl={`${mcpBaseUrl}${newMcpToken}`} />
 	{/if}
 </div>

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -72,11 +72,12 @@ function canConvertToGroup(user) {
 }
 async function loadSettings() {
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
-    auto_invite_domain = settings.auto_invite_domain;
-    operatorOnly = settings.auto_invite_operator;
-    autoAdd = settings.auto_add;
-    autoAddInstanceGroups = settings.auto_add_instance_groups || [];
-    autoAddInstanceGroupsRoles = settings.auto_add_instance_groups_roles || {};
+    const autoInvite = settings.auto_invite;
+    auto_invite_domain = autoInvite?.enabled ? (autoInvite?.domain ?? '*') : undefined;
+    operatorOnly = autoInvite?.operator ?? false;
+    autoAdd = autoInvite?.mode === 'add';
+    autoAddInstanceGroups = autoInvite?.instance_groups || [];
+    autoAddInstanceGroupsRoles = autoInvite?.instance_groups_roles || {};
 }
 let getUsagePromise = undefined;
 let usage = $state(undefined);

package/package/components/sidebar/MenuButton.svelte

@@ -60,16 +60,24 @@ const Element = href ? 'a' : 'button';
 		>
 			{#if icon}
 				{@const SvelteComponent = icon}
-				<div
-					style="background-color: {color}"
-					class={twMerge('rounded-full center-center', color ? 'p-1 -ml-1' : '')}
-				>
+				{#if color}
+					<svg width="26" height="26" viewBox="0 0 26 26" class="flex-shrink-0 -ml-[5px]">
+						<circle cx="13" cy="13" r="13" fill={color} />
+						<foreignObject x="5" y="5" width="16" height="16">
+							<SvelteComponent
+								size={16}
+								class={twMerge(sidebarClasses.text, 'transition-colors', iconClasses)}
+								{...iconProps}
+							/>
+						</foreignObject>
+					</svg>
+				{:else}
 					<SvelteComponent
 						size={16}
 						class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
 						{...iconProps}
 					/>
-				</div>
+				{/if}
 			{/if}
 
 			<div class="flex flex-col text-left grow min-w-0">

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -89,12 +89,12 @@ function showActivity(url) {
 						title={user}
 					>
 						<span class="text-sm font-medium leading-none text-white"
-							>{user.substring(0, 2).toLocaleUpperCase()}</span
+							>{user?.substring(0, 2).toLocaleUpperCase()}</span
 						>
 					</span>
 					<div class="flex flex-col">
 						<span class="text-xs text-primary truncate">{user}</span>
-						<span class="text-2xs text-secondary truncate">{showActivity(url)}</span>
+						<span class="text-2xs text-secondary truncate">{showActivity(url ?? '')}</span>
 					</div>
 				</div>
 			{/each}

package/package/components/sidebar/SidebarContent.svelte

@@ -2,7 +2,7 @@
 import { superadmin, usedTriggerKinds, userStore, workspaceStore, isCriticalAlertsUIOpen, enterpriseLicense, devopsRole, tutorialsToDo, skippedAll } from '../../stores';
 import { syncTutorialsTodos } from '../../tutorialUtils';
 import { SIDEBAR_SHOW_SCHEDULES } from '../../consts';
-import { BookOpen, HardHat, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, GraduationCap, HelpCircle, Home, LogOut, Newspaper, Play, Route, ServerCog, Settings, UserCog, Plus, Unplug, AlertCircle, Database, Pyramid, Trash2, MailIcon } from 'lucide-svelte';
+import { BookOpen, ServerCog, Boxes, Calendar, DollarSign, Eye, Logs, FolderCog, FolderOpen, Github, GraduationCap, HelpCircle, Home, LogOut, Newspaper, Play, Route, Settings, UserCog, Plus, Unplug, AlertCircle, Database, Pyramid, Trash2, MailIcon } from 'lucide-svelte';
 import UserMenu from './UserMenu.svelte';
 import DiscordIcon from '../icons/brands/Discord.svelte';
 import { WorkspaceService } from '../../gen';
@@ -20,6 +20,7 @@ import KafkaIcon from '../icons/KafkaIcon.svelte';
 import NatsIcon from '../icons/NatsIcon.svelte';
 import MqttIcon from '../icons/MqttIcon.svelte';
 import AwsIcon from '../icons/AwsIcon.svelte';
+import { getAvailableNativeTriggerServices, getServiceConfig, getServiceIcon } from '../triggers/native/utils';
 import { Menubar, Menu, MenuSingleItem, MenuItem, MeltButton } from '../meltComponents';
 import MenuButton from './MenuButton.svelte';
 import GoogleCloudIcon from '../icons/GoogleCloudIcon.svelte';
@@ -38,6 +39,23 @@ async function deleteFork() {
 let hasNewChangelogs = $state(false);
 let recentChangelogs = $state([]);
 let lastOpened = localStorage.getItem('changelogsLastOpened');
+let availableNativeServices = $state([]);
+async function loadAvailableNativeTriggers() {
+    try {
+        const services = await getAvailableNativeTriggerServices($workspaceStore);
+        const serviceData = await Promise.all(services.map(async (service) => ({
+            service,
+            icon: await getServiceIcon(service),
+            config: getServiceConfig(service)
+        })));
+        availableNativeServices = serviceData;
+    }
+    catch (err) {
+        console.error('Failed to load available native trigger services:', err);
+        availableNativeServices = [];
+    }
+}
+loadAvailableNativeTriggers();
 onMount(async () => {
     if (lastOpened) {
         // @ts-ignore
@@ -255,6 +273,16 @@ let defaultExtraTriggerLinks = $derived([
         aiDescription: 'Button to navigate to Email triggers'
     }
 ]);
+let nativeTriggerLinks = $derived(availableNativeServices.map(({ service, icon, config }) => ({
+    label: config?.serviceDisplayName || service,
+    href: `/native_triggers/${service}`,
+    icon: icon,
+    disabled: $userStore?.operator,
+    kind: service,
+    aiId: `sidebar-menu-link-${service}`,
+    aiDescription: `Button to navigate to ${config?.serviceDisplayName || service} triggers`
+})));
+let allTriggerLinks = $derived([...defaultExtraTriggerLinks, ...nativeTriggerLinks]);
 let triggerMenuLinks = $derived([
     {
         label: 'Schedules',
@@ -264,9 +292,9 @@ let triggerMenuLinks = $derived([
         aiId: 'sidebar-menu-link-schedules',
         aiDescription: 'Button to navigate to schedules'
     },
-    ...defaultExtraTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href))
+    ...allTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href))
 ]);
-let extraTriggerLinks = $derived(defaultExtraTriggerLinks.filter((link) => {
+let extraTriggerLinks = $derived(allTriggerLinks.filter((link) => {
     return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind);
 }));
 let secondaryMenuLinks = $derived([
@@ -345,7 +373,7 @@ let secondaryMenuLinks = $derived([
     {
         label: 'Workers',
         href: `${base}/workers`,
-        icon: HardHat,
+        icon: ServerCog,
         disabled: $userStore?.operator,
         aiId: 'sidebar-menu-link-workers',
         aiDescription: 'Button to navigate to workers'

package/package/components/sidebar/UserMenu.svelte

@@ -4,7 +4,7 @@ import { userStore, usageStore, workspaceUsageStore, isPremiumStore, workspaceSt
 import { USER_SETTINGS_HASH } from './settings';
 import { isCloudHosted } from '../../cloud';
 import { twMerge } from 'tailwind-merge';
-import { Crown, HardHat, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte';
+import { Crown, ServerCog, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte';
 import DarkModeObserver from '../DarkModeObserver.svelte';
 import MenuButton from './MenuButton.svelte';
 import { Menu, MenuItem } from '../meltComponents';
@@ -35,7 +35,7 @@ const itemClass = twMerge('text-secondary text-left font-normal text-xs ', 'flex
 				{#if $userStore?.is_admin}
 					Admin of this workspace <Crown size={14} />
 				{:else if $userStore?.operator}
-					Operator in this workspace <HardHat size={14} />
+					Operator in this workspace <ServerCog size={14} />
 				{/if}
 			</span>
 		</div>

package/package/components/table/DataTable.svelte

@@ -10,7 +10,7 @@ let footerHeight = $state(0);
 let tableHeight = $state(0);
 const dispatch = createEventDispatcher();
 let tableContainer = $state();
-let { paginated = false, currentPage = $bindable(1), showNext = true, showPrev = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, containerClass = '', children, emptyMessage } = $props();
+let { paginated = false, currentPage = $bindable(1), showNext = true, showPrev = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, containerClass = '', children, emptyMessage, preventXOverflow = false } = $props();
 setContext('datatable', {
     size
 });
@@ -69,7 +69,11 @@ $effect(() => {
 	bind:clientHeight={tableHeight}
 >
 	<List justify="between" gap="none" hFull={true}>
-		<div class="w-full overflow-auto h-fit" bind:this={tableContainer} onscroll={handleScroll}>
+		<div
+			class={twMerge('w-full overflow-auto h-fit', preventXOverflow ? 'overflow-x-hidden' : '')}
+			bind:this={tableContainer}
+			onscroll={handleScroll}
+		>
 			<table class={tableFixed ? 'table-fixed w-full' : 'min-w-full'}>
 				{@render children?.()}
 			</table>

package/package/components/table/DataTable.svelte.d.ts

@@ -22,6 +22,7 @@ interface Props {
     loading?: boolean;
     loadingMore?: boolean;
     containerClass?: string;
+    preventXOverflow?: boolean;
     children?: import('svelte').Snippet;
     emptyMessage?: import('svelte').Snippet;
 }