windmill-components 1.623.2 → 1.655.0

package/package/components/icons/RubyIcon.svelte

@@ -19,7 +19,7 @@ let { height = 24, width = 24 } = $props();
 			<cc:Work rdf:about=""
 				><dc:format>image/svg+xml</dc:format>
 				<!-- svelte-ignore element_invalid_self_closing_tag -->
-				<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work
+				<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type></cc:Work
 			></rdf:RDF
 		></metadata
 	><defs id="defs3489"
@@ -321,7 +321,7 @@ let { height = 24, width = 24 } = $props();
 		guidetolerance="10"
 		id="namedview3487"
 		showgrid="false"
-	/>
+	></sodipodi:namedview>
 	<linearGradient
 		id="XMLID_17_"
 		gradientUnits="userSpaceOnUse"

package/package/components/icons/WindmillIcon2.svelte

@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">import { run } from 'svelte/legacy';
 import { customIcon } from './store';
 let { white = false, size = '24px', color = undefined, spin = undefined, class: classNames = '' } = $props();

package/package/components/instanceSettings/IndexerJobIndexSettings.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import Tooltip from '../Tooltip.svelte';
+import IntegerInput from '../IntegerInput.svelte';
+import InputError from '../InputError.svelte';
+let { values, disabled = false, errors = {} } = $props();
+</script>
+
+<div class="space-y-6">
+	<div class="flex flex-col gap-1">
+		<label for="commit_job_max_batch_size" class="block text-xs font-semibold text-emphasis">
+			Commit max batch size <Tooltip>
+				The max amount of documents (here jobs) per commit. To optimize indexing throughput, it is
+				best to keep this as high as possible. However, especially when reindexing the whole
+				instance, it can be useful to have a limit on how many jobs can be written without being
+				committed. A commit will make the jobs available for search, constitute a "checkpoint" state
+				in the indexing and will be logged.
+			</Tooltip>
+		</label>
+		<IntegerInput
+			placeholder="100000"
+			id="commit_job_max_batch_size"
+			{disabled}
+			error={errors.commit_job_max_batch_size ?? ''}
+			value={$values['indexer_settings'].commit_job_max_batch_size}
+			oninput={(v) => {
+				if (v == null) {
+					const { commit_job_max_batch_size: _, ...rest } = $values['indexer_settings']
+					$values['indexer_settings'] = rest
+				} else {
+					$values['indexer_settings'] = {
+						...$values['indexer_settings'],
+						commit_job_max_batch_size: v
+					}
+				}
+			}}
+		/>
+		<InputError error={errors.commit_job_max_batch_size ?? ''} />
+	</div>
+	<div class="flex flex-col gap-1">
+		<label for="refresh_index_period" class="block text-xs font-semibold text-emphasis">
+			Refresh index period (s) <Tooltip>
+				The index will query new jobs periodically and write them on the index. This setting sets
+				that period.
+			</Tooltip></label
+		>
+		<IntegerInput
+			placeholder="300"
+			id="refresh_index_period"
+			{disabled}
+			error={errors.refresh_index_period ?? ''}
+			value={$values['indexer_settings'].refresh_index_period}
+			oninput={(v) => {
+				if (v == null) {
+					const { refresh_index_period: _, ...rest } = $values['indexer_settings']
+					$values['indexer_settings'] = rest
+				} else {
+					$values['indexer_settings'] = {
+						...$values['indexer_settings'],
+						refresh_index_period: v
+					}
+				}
+			}}
+		/>
+		<InputError error={errors.refresh_index_period ?? ''} />
+	</div>
+	<div class="flex flex-col gap-1">
+		<label for="max_indexed_job_log_size" class="block text-xs font-semibold text-emphasis">
+			Max indexed job log size (KB) <Tooltip>
+				Job logs are included when indexing, but to avoid the index size growing artificially, the
+				logs will be truncated after a size has been reached.
+			</Tooltip>
+		</label>
+		<IntegerInput
+			placeholder="1024"
+			id="max_indexed_job_log_size"
+			{disabled}
+			error={errors.max_indexed_job_log_size ?? ''}
+			value={$values['indexer_settings'].max_indexed_job_log_size != null
+				? $values['indexer_settings'].max_indexed_job_log_size / 1024
+				: undefined}
+			oninput={(v) => {
+				if (v == null) {
+					const { max_indexed_job_log_size: _, ...rest } = $values['indexer_settings']
+					$values['indexer_settings'] = rest
+				} else {
+					$values['indexer_settings'] = {
+						...$values['indexer_settings'],
+						max_indexed_job_log_size: v * 1024
+					}
+				}
+			}}
+		/>
+		<InputError error={errors.max_indexed_job_log_size ?? ''} />
+	</div>
+</div>

package/package/components/instanceSettings/IndexerJobIndexSettings.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Writable } from 'svelte/store';
+interface Props {
+    values: Writable<Record<string, any>>;
+    disabled?: boolean;
+    errors?: Record<string, string>;
+}
+declare const IndexerJobIndexSettings: import("svelte").Component<Props, {}, "">;
+type IndexerJobIndexSettings = ReturnType<typeof IndexerJobIndexSettings>;
+export default IndexerJobIndexSettings;

package/package/components/instanceSettings/IndexerLogIndexSettings.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">import Tooltip from '../Tooltip.svelte';
+import IntegerInput from '../IntegerInput.svelte';
+import InputError from '../InputError.svelte';
+let { values, disabled = false, errors = {} } = $props();
+</script>
+
+<div class="space-y-6">
+	<div class="flex flex-col gap-1">
+		<label for="commit_log_max_batch_size" class="block text-xs font-semibold text-emphasis"
+			>Commit max batch size <Tooltip>
+				The max amount of documents per commit. In this case 1 document is one log file representing
+				all logs during 1 minute for a specific host. To optimize indexing throughput, it is best to
+				keep this as high as possible. However, especially when reindexing the whole instance, it
+				can be useful to have a limit on how many logs can be written without being committed. A
+				commit will make the logs available for search, appear as a log line, and be a "checkpoint"
+				of the indexing progress.
+			</Tooltip>
+		</label>
+		<IntegerInput
+			placeholder="10000"
+			id="commit_log_max_batch_size"
+			{disabled}
+			error={errors.commit_log_max_batch_size ?? ''}
+			value={$values['indexer_settings'].commit_log_max_batch_size}
+			oninput={(v) => {
+				if (v == null) {
+					const { commit_log_max_batch_size: _, ...rest } = $values['indexer_settings']
+					$values['indexer_settings'] = rest
+				} else {
+					$values['indexer_settings'] = {
+						...$values['indexer_settings'],
+						commit_log_max_batch_size: v
+					}
+				}
+			}}
+		/>
+		<InputError error={errors.commit_log_max_batch_size ?? ''} />
+	</div>
+
+	<div class="flex flex-col gap-1">
+		<label for="refresh_log_index_period" class="block text-xs font-semibold text-emphasis">
+			Refresh index period (s) <Tooltip>
+				The index will query new service logs peridically and write them on the index. This setting
+				sets that period.
+			</Tooltip>
+		</label>
+		<IntegerInput
+			placeholder="300"
+			id="refresh_log_index_period"
+			{disabled}
+			error={errors.refresh_log_index_period ?? ''}
+			value={$values['indexer_settings'].refresh_log_index_period}
+			oninput={(v) => {
+				if (v == null) {
+					const { refresh_log_index_period: _, ...rest } = $values['indexer_settings']
+					$values['indexer_settings'] = rest
+				} else {
+					$values['indexer_settings'] = {
+						...$values['indexer_settings'],
+						refresh_log_index_period: v
+					}
+				}
+			}}
+		/>
+		<InputError error={errors.refresh_log_index_period ?? ''} />
+	</div>
+</div>

package/package/components/instanceSettings/IndexerLogIndexSettings.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Writable } from 'svelte/store';
+interface Props {
+    values: Writable<Record<string, any>>;
+    disabled?: boolean;
+    errors?: Record<string, string>;
+}
+declare const IndexerLogIndexSettings: import("svelte").Component<Props, {}, "">;
+type IndexerLogIndexSettings = ReturnType<typeof IndexerLogIndexSettings>;
+export default IndexerLogIndexSettings;

package/package/components/instanceSettings/IndexerMemorySettings.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">import { Button } from '../common';
+import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
+import { IndexSearchService } from '../../gen';
+import { sendUserToast } from '../../toast';
+import { displaySize } from '../../utils';
+import Tooltip from '../Tooltip.svelte';
+import IntegerInput from '../IntegerInput.svelte';
+import InputError from '../InputError.svelte';
+import Label from '../Label.svelte';
+import { Loader2, RefreshCw } from 'lucide-svelte';
+let { values, disabled = false, errors = {} } = $props();
+let clearJobsIndexModalOpen = $state(false);
+let clearServiceLogsIndexModalOpen = $state(false);
+let status = $state(undefined);
+let statusLoading = $state(true);
+let statusError = $state(false);
+function formatTimeAgo(isoDate) {
+    const diffMs = Date.now() - new Date(isoDate).getTime();
+    const diffSecs = Math.floor(diffMs / 1000);
+    if (diffSecs < 60)
+        return `${diffSecs}s ago`;
+    const diffMins = Math.floor(diffSecs / 60);
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    return `${diffHours}h ago`;
+}
+async function loadStatus() {
+    statusLoading = true;
+    statusError = false;
+    try {
+        status = await IndexSearchService.getIndexerStatus();
+    }
+    catch (e) {
+        status = undefined;
+        statusError = true;
+    }
+    finally {
+        statusLoading = false;
+    }
+}
+loadStatus();
+</script>
+
+<div class="space-y-6">
+	<div class="flex flex-col gap-1">
+		<label for="writer_memory_budget" class="block text-xs font-semibold text-emphasis">
+			Index writer memory budget (MB)
+			<Tooltip>
+				The allocated memory arena for the indexer. A bigger value means less writing to disk and
+				potentially higher indexing throughput
+			</Tooltip>
+		</label>
+		<IntegerInput
+			placeholder="300"
+			id="writer_memory_budget"
+			{disabled}
+			error={errors.writer_memory_budget ?? ''}
+			value={$values['indexer_settings'].writer_memory_budget != null
+				? $values['indexer_settings'].writer_memory_budget / (1024 * 1024)
+				: undefined}
+			oninput={(v) => {
+				if (v == null) {
+					const { writer_memory_budget: _, ...rest } = $values['indexer_settings']
+					$values['indexer_settings'] = rest
+				} else {
+					$values['indexer_settings'] = {
+						...$values['indexer_settings'],
+						writer_memory_budget: v * (1024 * 1024)
+					}
+				}
+			}}
+		/>
+		<InputError error={errors.writer_memory_budget ?? ''} />
+	</div>
+	<div class="flex flex-col gap-1">
+		<label for="max_index_time_window_secs" class="block text-xs font-semibold text-emphasis">
+			Index time window (days)
+			<Tooltip>
+				Maximum age of items to include in the index. Jobs and logs older than this window will not
+				be indexed and will be cleaned up from the index. Set to 0 to disable (index everything
+				within the retention period).
+			</Tooltip>
+		</label>
+		<IntegerInput
+			placeholder="7"
+			id="max_index_time_window_secs"
+			{disabled}
+			error={errors.max_index_time_window_secs ?? ''}
+			value={$values['indexer_settings'].max_index_time_window_secs != null
+				? Math.round($values['indexer_settings'].max_index_time_window_secs / 86400)
+				: undefined}
+			oninput={(v) => {
+				if (v == null) {
+					const { max_index_time_window_secs: _, ...rest } = $values['indexer_settings']
+					$values['indexer_settings'] = rest
+				} else {
+					$values['indexer_settings'] = {
+						...$values['indexer_settings'],
+						max_index_time_window_secs: v * 86400
+					}
+				}
+			}}
+		/>
+		<InputError error={errors.max_index_time_window_secs ?? ''} />
+	</div>
+	<Label label="Indexer status">
+		{#snippet action()}
+			<button
+				onclick={loadStatus}
+				disabled={statusLoading}
+				class="inline-flex items-center text-secondary hover:text-primary disabled:opacity-50"
+			>
+				{#if statusLoading}
+					<Loader2 size={14} class="animate-spin" />
+				{:else}
+					<RefreshCw size={14} />
+				{/if}
+			</button>
+		{/snippet}
+		{#if status}
+			<div class="flex flex-col gap-2">
+				{#each [{ label: 'Job indexer', entry: status.job_indexer }, { label: 'Service log indexer', entry: status.log_indexer }] as { label, entry } (label)}
+					<div class="flex flex-row items-center gap-2 text-xs">
+						<span
+							class="inline-block w-2 h-2 rounded-full {entry?.is_alive
+								? 'bg-green-500'
+								: 'bg-red-500'}"
+						></span>
+						<span class="text-primary font-medium">{label}:</span>
+						<span class="font-semibold {entry?.is_alive ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}">
+							{entry?.is_alive ? 'Running' : 'Stopped'}
+						</span>
+						{#if entry?.last_locked_at}
+							<span class="text-tertiary text-2xs">
+								Last active: {formatTimeAgo(entry.last_locked_at)}
+							</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{:else if statusError && !statusLoading}
+			<span class="text-2xs text-secondary">
+				Could not fetch indexer status. Search may not be enabled in this build.
+			</span>
+		{/if}
+	</Label>
+	<Label label="Index storage">
+		{#if status}
+			<div class="flex flex-col gap-1 text-2xs text-tertiary">
+				<span>
+					Jobs index:
+					{#if status.job_indexer?.storage?.disk_size_bytes != null}
+						Disk: {displaySize(status.job_indexer.storage.disk_size_bytes) ?? 'N/A'}
+					{/if}
+					{#if status.job_indexer?.storage?.s3_size_bytes != null}
+						{#if status.job_indexer?.storage?.disk_size_bytes != null}&middot;{/if}
+						S3: {displaySize(status.job_indexer.storage.s3_size_bytes) ?? 'N/A'}
+					{/if}
+				</span>
+				<span>
+					Service logs index:
+					{#if status.log_indexer?.storage?.disk_size_bytes != null}
+						Disk: {displaySize(status.log_indexer.storage.disk_size_bytes) ?? 'N/A'}
+					{/if}
+					{#if status.log_indexer?.storage?.s3_size_bytes != null}
+						{#if status.log_indexer?.storage?.disk_size_bytes != null}&middot;{/if}
+						S3: {displaySize(status.log_indexer.storage.s3_size_bytes) ?? 'N/A'}
+					{/if}
+				</span>
+			</div>
+		{/if}
+	</Label>
+	<Label label="Clear index">
+		<span class="text-xs text-secondary"
+			>These buttons will clear the whole index, and the service will start reindexing from scratch.
+			Full text search might be down during this time.</span
+		>
+		<div class="flex flex-col gap-3">
+			<div class="flex flex-row items-center gap-2">
+				<Button
+					variant="default"
+					unifiedSize="sm"
+					onclick={() => {
+						clearJobsIndexModalOpen = true
+					}}
+				>
+					Clear jobs index
+				</Button>
+			</div>
+			<div class="flex flex-row items-center gap-2">
+				<Button
+					variant="default"
+					unifiedSize="sm"
+					onclick={() => {
+						clearServiceLogsIndexModalOpen = true
+					}}
+				>
+					Clear service logs index
+				</Button>
+			</div>
+		</div>
+	</Label>
+	<ConfirmationModal
+		title="Clear jobs index"
+		confirmationText="Clear"
+		open={clearJobsIndexModalOpen}
+		type="danger"
+		on:canceled={() => {
+			clearJobsIndexModalOpen = false
+		}}
+		on:confirmed={async () => {
+			const r = await IndexSearchService.clearIndex({
+				idxName: 'JobIndex'
+			})
+			sendUserToast(r)
+			clearJobsIndexModalOpen = false
+		}}
+	>
+		Are you sure you want to clear the jobs index? The service will start reindexing from scratch.
+		Full text search might be down during this time.
+	</ConfirmationModal>
+	<ConfirmationModal
+		title="Clear service logs index"
+		confirmationText="Clear"
+		open={clearServiceLogsIndexModalOpen}
+		type="danger"
+		on:canceled={() => {
+			clearServiceLogsIndexModalOpen = false
+		}}
+		on:confirmed={async () => {
+			const r = await IndexSearchService.clearIndex({
+				idxName: 'ServiceLogIndex'
+			})
+			sendUserToast(r)
+			clearServiceLogsIndexModalOpen = false
+		}}
+	>
+		Are you sure you want to clear the service logs index? The service will start reindexing from
+		scratch. Full text search might be down during this time.
+	</ConfirmationModal>
+</div>

package/package/components/instanceSettings/IndexerMemorySettings.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Writable } from 'svelte/store';
+interface Props {
+    values: Writable<Record<string, any>>;
+    disabled?: boolean;
+    errors?: Record<string, string>;
+}
+declare const IndexerMemorySettings: import("svelte").Component<Props, {}, "">;
+type IndexerMemorySettings = ReturnType<typeof IndexerMemorySettings>;
+export default IndexerMemorySettings;

package/package/components/instanceSettings/SecretBackendConfig.svelte

@@ -56,7 +56,9 @@ function setBackendType(type) {
     }
 }
 function setAuthMethod(method) {
-    if (!method || !$values['secret_backend'] || $values['secret_backend'].type !== 'HashiCorpVault')
+    if (!method ||
+        !$values['secret_backend'] ||
+        $values['secret_backend'].type !== 'HashiCorpVault')
         return;
     if (method === 'token') {
         // Clear JWT role when switching to token auth
@@ -169,12 +171,8 @@ let baseUrl = $derived($values['base_url'] ?? 'https://your-windmill-instance.co
 
 <div class="space-y-6">
 	<!-- Backend Type Selector -->
-	<div class="flex flex-col gap-2">
-		<label class="block text-xs font-semibold text-emphasis">Backend Type</label>
-		<ToggleButtonGroup
-			selected={selectedType}
-			onSelected={(v) => setBackendType(v)}
-		>
+	<div class="flex flex-col gap-2 mt-1">
+		<ToggleButtonGroup selected={selectedType} onSelected={(v) => setBackendType(v)}>
 			{#snippet children({ item: toggleButton })}
 				<ToggleButton
 					value="Database"
@@ -263,11 +261,8 @@ let baseUrl = $derived($values['base_url'] ?? 'https://your-windmill-instance.co
 
 				<!-- Authentication Method Toggle -->
 				<div class="flex flex-col gap-2">
-					<label class="block text-xs font-semibold text-emphasis">Authentication Method</label>
-					<ToggleButtonGroup
-						selected={authMethod}
-						onSelected={(v) => setAuthMethod(v)}
-					>
+					<span class="block text-xs font-semibold text-emphasis">Authentication Method</span>
+					<ToggleButtonGroup selected={authMethod} onSelected={(v) => setAuthMethod(v)}>
 						{#snippet children({ item: toggleButton })}
 							<ToggleButton
 								value="jwt"
@@ -322,8 +317,11 @@ let baseUrl = $derived($values['base_url'] ?? 'https://your-windmill-instance.co
 							>
 							<div class="mt-2 p-2 bg-surface rounded text-2xs text-secondary space-y-2">
 								<p>Configure Vault to accept JWTs from Windmill:</p>
-								<div class="bg-gray-100 dark:bg-gray-800 p-2 rounded font-mono text-2xs overflow-x-auto">
-									<pre># Enable JWT auth method
+								<div
+									class="bg-gray-100 dark:bg-gray-800 p-2 rounded font-mono text-2xs overflow-x-auto"
+								>
+									<pre
+										># Enable JWT auth method
 vault auth enable jwt
 
 # Configure JWT auth with Windmill's JWKS endpoint
@@ -347,7 +345,8 @@ vault write auth/jwt/role/windmill-secrets \
   bound_audiences="{baseUrl}" \
   user_claim="email" \
   policies="windmill-secrets" \
-  ttl="1h"</pre>
+  ttl="1h"</pre
+									>
 								</div>
 								<p class="text-yellow-600 dark:text-yellow-400">
 									Replace <code>windmill-secrets</code> with your role name if different.
@@ -393,7 +392,7 @@ vault write auth/jwt/role/windmill-secrets \
 
 				<!-- Migration Section -->
 				<div class="flex flex-col gap-4 pt-4 border-t">
-					<label class="block text-xs font-semibold text-emphasis">Secret Migration</label>
+					<span class="block text-xs font-semibold text-emphasis">Secret Migration</span>
 					<span class="text-2xs text-secondary">
 						Migrate secrets between the database and HashiCorp Vault. Original values are NOT
 						deleted to allow for rollback.

package/package/components/instanceSettings/SettingCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+import { enterpriseLicense } from '../../stores';
+import EEOnly from '../EEOnly.svelte';
+import Tooltip from '../Tooltip.svelte';
+import { Button } from '../common';
+let { label, description, ee_only, tooltip, settingKey, actionButton, values, children, class: clazz } = $props();
+</script>
+
+<div
+	data-setting-key={settingKey}
+	class={twMerge('p-4 rounded-md bg-surface-tertiary shadow-sm flex flex-col gap-1', clazz)}
+>
+	{#if label}
+		<div class="flex items-center justify-between gap-2 w-full">
+			<div class="flex gap-1 items-baseline">
+				<span class="text-emphasis font-semibold text-xs">{label}</span>
+				{#if ee_only != undefined && !$enterpriseLicense}
+					{#if ee_only != ''}
+						<EEOnly>{ee_only}</EEOnly>
+					{:else}
+						<EEOnly />
+					{/if}
+				{/if}
+				{#if tooltip}
+					<Tooltip>{tooltip}</Tooltip>
+				{/if}
+			</div>
+			{#if actionButton}
+				<Button
+					disabled={ee_only != undefined && !$enterpriseLicense}
+					variant={actionButton.variant ?? 'default'}
+					unifiedSize="sm"
+					onclick={async () => await actionButton?.onclick(values ?? {})}
+				>
+					{actionButton.label}
+				</Button>
+			{/if}
+		</div>
+		{#if description}
+			<span class="text-secondary font-normal text-xs">
+				{@html description}
+			</span>
+		{/if}
+	{/if}
+
+	{@render children()}
+</div>

package/package/components/instanceSettings/SettingCard.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonType } from '../common/button/model';
+interface Props {
+    label?: string;
+    description?: string;
+    ee_only?: string;
+    tooltip?: string;
+    settingKey?: string;
+    actionButton?: {
+        label: string;
+        onclick: (values: Record<string, any>) => Promise<void>;
+        variant?: ButtonType.Variant;
+    };
+    values?: Record<string, any>;
+    children: import('svelte').Snippet;
+    class?: string;
+}
+declare const SettingCard: import("svelte").Component<Props, {}, "">;
+type SettingCard = ReturnType<typeof SettingCard>;
+export default SettingCard;

package/package/components/instanceSettings/SettingsSearchInput.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">import SearchItems from '../SearchItems.svelte';
+import SelectDropdown from '../select/SelectDropdown.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { Search } from 'lucide-svelte';
+import { extractMarkedLabel } from '../instanceSettings';
+import { twMerge } from 'tailwind-merge';
+import { untrack } from 'svelte';
+let { searchableItems, onSelect, class: className = '' } = $props();
+let settingsSearchFilter = $state('');
+let debouncedSearchFilter = $state('');
+let filteredSearchItems = $state([]);
+let searchInputEl = $state();
+// Debounce search to avoid running uFuzzy on every keystroke
+$effect(() => {
+    const val = settingsSearchFilter;
+    const timeout = setTimeout(() => untrack(() => (debouncedSearchFilter = val)), 150);
+    return () => clearTimeout(timeout);
+});
+const searchDropdownOpen = $derived(settingsSearchFilter.trim().length > 0 && filteredSearchItems.length > 0);
+let searchProcessedItems = $derived(filteredSearchItems.map((item) => ({
+    label: item.label,
+    value: item,
+    subtitle: item.category
+})));
+function handleSelect(item) {
+    settingsSearchFilter = '';
+    onSelect(item);
+}
+</script>
+
+<SearchItems
+	filter={debouncedSearchFilter}
+	items={searchableItems}
+	bind:filteredItems={filteredSearchItems}
+	f={(x) => x.label + ' ' + (x.description ?? '') + ' ' + x.category}
+/>
+
+<div class={twMerge('relative', className)}>
+	<div bind:this={searchInputEl} class="relative w-full">
+		<Search class="absolute left-2 top-1/2 -translate-y-1/2 text-tertiary" size={14} />
+		<TextInput
+			inputProps={{ placeholder: 'Search settings...' }}
+			bind:value={settingsSearchFilter}
+			class="pl-7 text-xs w-full"
+		/>
+	</div>
+	<SelectDropdown
+		processedItems={searchProcessedItems}
+		value={undefined}
+		open={searchDropdownOpen}
+		disablePortal
+		class="max-w-full"
+		itemLabelWrapperClasses="hidden"
+		itemButtonWrapperClasses="overflow-hidden"
+		getInputRect={searchInputEl ? () => searchInputEl!.getBoundingClientRect() : undefined}
+		onSelectValue={(item) => handleSelect(item.value)}
+		highlightFirstOnOpen
+		maxHeight={400}
+	>
+		{#snippet startSnippet({ item })}
+			<div class="text-xs truncate w-full min-w-0"
+				>{@html extractMarkedLabel(item.value.marked, item.value.label.length)}</div
+			>
+		{/snippet}
+	</SelectDropdown>
+</div>

package/package/components/instanceSettings/SettingsSearchInput.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type SearchableSettingItem } from '../instanceSettings';
+type $$ComponentProps = {
+    searchableItems: SearchableSettingItem[];
+    onSelect: (item: SearchableSettingItem) => void;
+    class?: string;
+};
+declare const SettingsSearchInput: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsSearchInput = ReturnType<typeof SettingsSearchInput>;
+export default SettingsSearchInput;