windmill-components 1.550.0 → 1.555.1

package/package/components/select/Select.svelte.d.ts

@@ -18,12 +18,15 @@ declare function $$render<Item extends {
         inputClass?: string;
         disablePortal?: boolean;
         loading?: boolean;
+        error?: boolean;
         autofocus?: boolean;
         RightIcon?: any;
         createText?: string;
         noItemsMsg?: string;
         open?: boolean;
         id?: string;
+        itemLabelWrapperClasses?: string;
+        itemButtonWrapperClasses?: string;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onFocus?: () => void;
@@ -32,6 +35,14 @@ declare function $$render<Item extends {
         onCreateItem?: (value: string) => void;
         startSnippet?: Snippet<[{
             item: ProcessedItem<Item["value"]>;
+            close: () => void;
+        }]>;
+        endSnippet?: Snippet<[{
+            item: ProcessedItem<Item["value"]>;
+            close: () => void;
+        }]>;
+        bottomSnippet?: Snippet<[{
+            close: () => void;
         }]>;
     };
     exports: {};

package/package/components/select/SelectDropdown.svelte

@@ -2,7 +2,7 @@
 import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
 import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', header, getInputRect, onSelectValue, startSnippet } = $props();
+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
     : _processedItems?.filter((item) => item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())));
@@ -11,15 +11,15 @@ let dropdownPos = $state(computeDropdownPos());
 let keyArrowPos = $state();
 function computeDropdownPos() {
     if (!getInputRect || !listEl)
-        return { width: 0, x: 0, y: 0 };
+        return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
     let inputR = getInputRect();
     const listR = listEl.getBoundingClientRect();
-    const openBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
+    const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
     let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
-    if (openBelow)
-        return { width: inputR.width, x: x, y: y + inputR.height };
+    if (isBelow)
+        return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow };
     else {
-        return { width: inputR.width, x: x, y: y - listR.height };
+        return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow };
     }
 }
 $effect(() => {
@@ -38,11 +38,47 @@ $effect(() => {
     [open, processedItems];
     untrack(() => (keyArrowPos = open && filterText ? 0 : undefined));
 });
+// We do not want to render the dropdown when it is closed for performance reasons
+// but we want to keep it in the DOM for a short time to allow for transitions to finish
+//
+// We do not use Svelte transitions because they can not animate in the opposite direction
+// when the dropdown is opens above the input
+// 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;
+    untrack(() => {
+        if (initial) {
+            initial = false;
+            return;
+        }
+        if (uiState.timeout)
+            clearTimeout(uiState.timeout);
+        uiState = {
+            domExists: true,
+            visible: !isOpen,
+            timeout: setTimeout(() => {
+                if (isOpen) {
+                    uiState.visible = true;
+                    uiState.timeout = null;
+                }
+                else if (!isOpen) {
+                    uiState.visible = false;
+                    uiState.timeout = setTimeout(() => {
+                        uiState.domExists = false;
+                        uiState.timeout = null;
+                    }, 500); // leave time for transition to finish
+                }
+            }, 0) // We need the height to be 0 then change immediately for the transition to play
+        };
+    });
+});
 </script>
 
 <svelte:window
 	on:keydown={(e) => {
-		if (!open || !processedItems?.length) return
+		if (!uiState.visible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
 		} else if (e.key === 'ArrowDown') {
@@ -62,55 +98,71 @@ $effect(() => {
 />
 
 <ConditionalPortal condition={!disablePortal} name="select-dropdown-portal">
-	{#if open && !disabled}
+	{#if uiState.domExists}
 		<div
 			class={twMerge(
 				disablePortal ? 'absolute' : 'fixed',
-				'flex flex-col z-[5001] max-h-64 overflow-y-auto bg-surface-secondary text-tertiary text-sm select-none border rounded-lg shadow-lg',
+				'z-[5001] text-tertiary text-sm select-none',
+				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
+				uiState.visible ? '' : 'pointer-events-none',
 				className
 			)}
 			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
-				? `min-width: ${dropdownPos.width}px;`
+				? `min-width: ${dropdownPos.width}px; height: ${dropdownPos.height}px;`
 				: ''}"
-			bind:this={listEl}
 		>
-			{@render header?.()}
-			{#if processedItems?.length === 0}
-				<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
-			{/if}
-			<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
-				{#each processedItems ?? [] as item, itemIndex}
-					{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
-						<li
-							class={twMerge(
-								'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
-								itemIndex === 0 ? 'mt-3' : 'mt-6'
-							)}
-						>
-							{item.__select_group}
-						</li>
+			<div
+				class={twMerge(
+					'overflow-clip rounded-md bg-surface-secondary shadow-lg transition-height',
+					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
+				)}
+				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
+			>
+				<div bind:this={listEl} class="flex flex-col max-h-64 border rounded-md overflow-clip">
+					{@render header?.()}
+					{#if processedItems?.length === 0}
+						<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
 					{/if}
-					<li>
-						<button
-							class={twMerge(
-								'py-2 px-4 w-full font-normal text-left text-primary',
-								itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
-								item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover'
-							)}
-							onclick={(e) => {
-								e.stopImmediatePropagation()
-								onSelectValue(item)
-							}}
-						>
-							{@render startSnippet?.({ item })}
-							{item.label || '\xa0'}
-							{#if item.subtitle}
-								<div class="text-xs text-tertiary">{item.subtitle}</div>
+					<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
+						{#each processedItems ?? [] as item, itemIndex}
+							{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
+								<li
+									class={twMerge(
+										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
+										itemIndex === 0 ? 'mt-3' : 'mt-6'
+									)}
+								>
+									{item.__select_group}
+								</li>
 							{/if}
-						</button>
-					</li>
-				{/each}
-			</ul>
+							<li>
+								<button
+									class={twMerge(
+										'py-2 px-4 w-full font-normal text-left text-primary',
+										itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
+										item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover',
+										itemButtonWrapperClasses
+									)}
+									onclick={(e) => {
+										e.stopImmediatePropagation()
+										onSelectValue(item)
+									}}
+								>
+									{@render startSnippet?.({ item, close: () => (open = false) })}
+									<span class={itemLabelWrapperClasses}>
+										{item.label || '\xa0'}
+									</span>
+									{@render endSnippet?.({ item, close: () => (open = false) })}
+									{#if item.subtitle}
+										<div class="text-xs text-tertiary">{item.subtitle}</div>
+									{/if}
+								</button>
+							</li>
+						{/each}
+					</ul>
+					{@render bottomSnippet?.({ close: () => (open = false) })}
+				</div>
+			</div>
 		</div>
 	{/if}
 </ConditionalPortal>

package/package/components/select/SelectDropdown.svelte.d.ts

@@ -12,11 +12,21 @@ declare function $$render<T>(): {
         noItemsMsg?: string;
         class?: string;
         ulClass?: string;
+        itemLabelWrapperClasses?: string;
+        itemButtonWrapperClasses?: string;
         header?: Snippet;
         getInputRect?: () => DOMRect;
         onSelectValue: (item: ProcessedItem<T>) => void;
         startSnippet?: Snippet<[{
             item: ProcessedItem<T>;
+            close: () => void;
+        }]>;
+        endSnippet?: Snippet<[{
+            item: ProcessedItem<T>;
+            close: () => void;
+        }]>;
+        bottomSnippet?: Snippet<[{
+            close: () => void;
         }]>;
     };
     exports: {};

package/package/components/select/utils.svelte.js

@@ -39,6 +39,8 @@ export function getLabel(item) {
 export function safeSelectItems(list) {
     if (!list)
         return [];
+    if (!Array.isArray(list))
+        return [];
     return list
         .filter((item) => item !== undefined && item !== null)
         .map((item) => {

package/package/components/settings/CreateToken.svelte

@@ -11,7 +11,11 @@ import TokenDisplay from './TokenDisplay.svelte';
 import ScopeSelector from './ScopeSelector.svelte';
 import Alert from '../common/alert/Alert.svelte';
 import FolderPicker from '../FolderPicker.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import Select from '../select/Select.svelte';
 let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined) } = $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);
 let newMcpToken = $state(undefined);
 let newTokenExpiration = $state(undefined);
@@ -83,8 +87,15 @@ async function createToken(mcpMode = false) {
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
 const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
-const warning = $derived(newMcpScope === 'favorites' ? `You do not have any favorite scripts or flows. You can favorite some scripts and flows to include them, or change the scope to "All scripts/flows" to include all your scripts and flows.` : 'Create your first scripts or flows to make them available via MCP.');
+const warning = $derived(newMcpScope === 'favorites'
+    ? `You do not have any favorite scripts or flows. You can favorite some scripts and flows to include them, or change the scope to "All scripts/flows" to include all your scripts and flows.`
+    : 'Create your first scripts or flows to make them available via MCP.');
 const noScriptsOrFlowsAvailableWarning = $derived(includedRunnables.length === 0 ? warning : '');
+const longPathRunnables = $derived(includedRunnables.filter((path) => path.length > MAX_PATH_LENGTH));
+const validRunnables = $derived(includedRunnables.filter((path) => path.length <= MAX_PATH_LENGTH));
+const longPathWarning = $derived(longPathRunnables.length > 0
+    ? `${longPathRunnables.length} script(s)/flow(s) have paths longer than 60 characters and will be excluded from MCP tools. Consider shortening the paths: ${longPathRunnables.slice(0, 3).join(', ')}${longPathRunnables.length > 3 ? ` and ${longPathRunnables.length - 3} more` : ''}`
+    : '');
 $effect(() => {
     if (mcpCreationMode) {
         getAllApps();
@@ -144,7 +155,10 @@ async function getScriptsAndFlows(favoriteOnly = false, workspace, folder) {
     }
     try {
         loadingRunnables = true;
-        const [scripts, flows] = await Promise.all([getScripts(favoriteOnly, workspace, folder), getFlows(favoriteOnly, workspace, folder)]);
+        const [scripts, flows] = await Promise.all([
+            getScripts(favoriteOnly, workspace, folder),
+            getFlows(favoriteOnly, workspace, folder)
+        ]);
         const combined = [...scripts, ...flows];
         runnablesCache.set(cacheKey, combined);
         includedRunnables = combined;
@@ -301,7 +315,11 @@ $effect(() => {
 
 			<div>
 				<span class="block mb-1">Label <span class="text-xs text-tertiary">(optional)</span></span>
-				<input type="text" bind:value={newTokenLabel} class="w-full" />
+				<TextInput
+					inputProps={{ type: 'text' }}
+					bind:value={newTokenLabel}
+					class="w-full !bg-surface"
+				/>
 			</div>
 
 			{#if !mcpCreationMode}
@@ -309,58 +327,66 @@ $effect(() => {
 					<span class="block mb-1"
 						>Expires In <span class="text-xs text-tertiary">(optional)</span></span
 					>
-					<select bind:value={newTokenExpiration} class="w-full">
-						<option value={undefined}>No expiration</option>
-						<option value={15 * 60}>15m</option>
-						<option value={30 * 60}>30m</option>
-						<option value={1 * 60 * 60}>1h</option>
-						<option value={1 * 24 * 60 * 60}>1d</option>
-						<option value={7 * 24 * 60 * 60}>7d</option>
-						<option value={30 * 24 * 60 * 60}>30d</option>
-						<option value={90 * 24 * 60 * 60}>90d</option>
-					</select>
+					<Select
+						bind:value={newTokenExpiration}
+						placeholder="No expiration"
+						inputClass="!bg-surface"
+						items={[
+							{ label: 'No expiration', value: undefined },
+							{ label: '15 minutes', value: 15 * 60 },
+							{ label: '30 minutes', value: 30 * 60 },
+							{ label: '1 hour', value: 1 * 60 * 60 },
+							{ label: '1 day', value: 1 * 24 * 60 * 60 },
+							{ label: '7 days', value: 7 * 24 * 60 * 60 },
+							{ label: '30 days', value: 30 * 24 * 60 * 60 },
+							{ label: '90 days', value: 90 * 24 * 60 * 60 }
+						]}
+					/>
 				</div>
 			{/if}
 			{#if mcpCreationMode && (newMcpScope !== 'folder' || selectedFolder.length > 0)}
-			{#if loadingRunnables}
-				<div class="flex flex-col gap-2 col-span-2 pr-4">
-					<span class="block text-xs text-tertiary">Scripts & Flows that will be available via MCP</span>
-					<div class="flex flex-wrap gap-1">
-						<Badge rounded small color="dark-gray" baseClass="animate-skeleton">Loading...</Badge>
-					</div>
-				</div>
-			{:else}
-				<div class="flex flex-col gap-2 col-span-2 pr-4">
-					{#if noScriptsOrFlowsAvailableWarning}
-					<Alert type="info" title="No scripts or flows available" size="xs">
-						{noScriptsOrFlowsAvailableWarning}
-					</Alert>
-					{:else}
-						<span class="block text-xs text-tertiary">Scripts & Flows that will be available via MCP</span>
+				{#if loadingRunnables}
+					<div class="flex flex-col gap-2 col-span-2 pr-4">
+						<span class="block text-xs text-tertiary"
+							>Scripts & Flows that will be available via MCP</span
+						>
 						<div class="flex flex-wrap gap-1">
-
-						{#if includedRunnables.length <= 5}
-							{#each includedRunnables as scriptOrFlow}
-								<Badge rounded small color="blue">{scriptOrFlow}</Badge>
-							{/each}
+							<Badge rounded small color="dark-gray" baseClass="animate-skeleton">Loading...</Badge>
+						</div>
+					</div>
+				{:else}
+					<div class="flex flex-col gap-2 col-span-2 pr-4">
+						{#if noScriptsOrFlowsAvailableWarning}
+							<Alert type="info" title="No scripts or flows available" size="xs">
+								{noScriptsOrFlowsAvailableWarning}
+							</Alert>
 						{:else}
-							{#each includedRunnables.slice(0, 3) as scriptOrFlow}
-								<Badge rounded small color="blue">{scriptOrFlow}</Badge>
-							{/each}
-							<Badge 
-								rounded 
-								small 
-								color="dark-gray" 
-							>
-								+{includedRunnables.length - 3} more
-							</Badge>
+							{#if longPathWarning}
+								<Alert type="warning" title="Some paths are too long" size="xs">
+									{longPathWarning}
+								</Alert>
 							{/if}
-						</div>
-					{/if}
-				</div>
-			{/if}
+							<span class="block text-xs text-tertiary"
+								>Scripts & Flows that will be available via MCP</span
+							>
+							<div class="flex flex-wrap gap-1">
+								{#if validRunnables.length <= 5}
+									{#each validRunnables as scriptOrFlow}
+										<Badge rounded small color="blue">{scriptOrFlow}</Badge>
+									{/each}
+								{:else}
+									{#each validRunnables.slice(0, 3) as scriptOrFlow}
+										<Badge rounded small color="blue">{scriptOrFlow}</Badge>
+									{/each}
+									<Badge rounded small color="dark-gray">
+										+{validRunnables.length - 3} more
+									</Badge>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{/if}
 			{/if}
-
 		</div>
 
 		<div class="mt-4 flex justify-end gap-2 flex-row">
@@ -373,7 +399,8 @@ $effect(() => {
 			</Button>
 			<Button
 				on:click={() => createToken(mcpCreationMode)}
-				disabled={mcpCreationMode && (newTokenWorkspace == undefined || (newMcpScope === 'folder' && !selectedFolder))}
+				disabled={mcpCreationMode &&
+					(newTokenWorkspace == undefined || (newMcpScope === 'folder' && !selectedFolder))}
 			>
 				New token
 			</Button>

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -39,8 +39,8 @@ let selectedNewInstanceGroup = $state(undefined);
 let selectedNewRole = $state('developer');
 // Available groups for dropdowns - filter out already configured groups
 let availableGroupItems = $derived(instanceGroups
-    .filter(group => !autoAddInstanceGroups.includes(group.name))
-    .map(group => ({
+    .filter((group) => !autoAddInstanceGroups.includes(group.name))
+    .map((group) => ({
     value: group.name,
     label: group.name + (group.summary ? ` - ${group.summary}` : '')
 })));
@@ -63,7 +63,7 @@ function canConvertToGroup(user) {
     // Check if user's email is in any configured instance group
     const userEmail = user.email;
     for (const groupName of autoAddInstanceGroups) {
-        const group = instanceGroups.find(g => g.name === groupName);
+        const group = instanceGroups.find((g) => g.name === groupName);
         if (group && group.emails && group.emails.includes(userEmail)) {
             return true;
         }
@@ -147,7 +147,7 @@ async function addInstanceGroup() {
     }
     catch (e) {
         // Rollback on error
-        autoAddInstanceGroups = autoAddInstanceGroups.filter(g => g !== groupToAdd);
+        autoAddInstanceGroups = autoAddInstanceGroups.filter((g) => g !== groupToAdd);
         delete autoAddInstanceGroupsRoles[groupToAdd];
         sendUserToast('Failed to add instance group', true);
     }
@@ -156,7 +156,7 @@ async function removeInstanceGroup(groupName) {
     const previousGroups = [...autoAddInstanceGroups];
     const previousRole = autoAddInstanceGroupsRoles[groupName];
     try {
-        autoAddInstanceGroups = autoAddInstanceGroups.filter(g => g !== groupName);
+        autoAddInstanceGroups = autoAddInstanceGroups.filter((g) => g !== groupName);
         delete autoAddInstanceGroupsRoles[groupName];
         await saveInstanceGroupSettings();
     }
@@ -324,8 +324,8 @@ $effect(() => {
 							}}
 						>
 							{#snippet children({ item })}
-								<ToggleButton value="invite" size="xs" label="Auto-invite" {item} />
-								<ToggleButton value="add" size="xs" label="Auto-add" {item} />
+								<ToggleButton value="invite" small label="Auto-invite" {item} />
+								<ToggleButton value="add" small label="Auto-add" {item} />
 							{/snippet}
 						</ToggleButtonGroup>
 					{/if}
@@ -425,9 +425,7 @@ $effect(() => {
 				{#snippet content()}
 					<div class="flex flex-col p-4 min-w-[500px]">
 						<div class="flex flex-col gap-4">
-							<span class="text-sm leading-6 font-semibold">
-								Auto-add instance groups
-							</span>
+							<span class="text-sm leading-6 font-semibold"> Auto-add instance groups </span>
 
 							<!-- Add new instance group form -->
 							{#if availableGroupItems.length > 0}
@@ -503,7 +501,7 @@ $effect(() => {
 											</thead>
 											<tbody>
 												{#each autoAddInstanceGroups as groupName (groupName)}
-													{@const group = instanceGroups.find(g => g.name === groupName)}
+													{@const group = instanceGroups.find((g) => g.name === groupName)}
 													<tr class="border-t border-gray-200 dark:border-gray-700">
 														<td class="py-2">
 															<div class="font-medium">{groupName}</div>
@@ -603,7 +601,8 @@ $effect(() => {
 					<Cell head>
 						Added via
 						<Tooltip>
-							Shows how the user was added to the workspace: manually, via domain auto-invite, or through an instance group.
+							Shows how the user was added to the workspace: manually, via domain auto-invite, or
+							through an instance group.
 						</Tooltip>
 					</Cell>
 				{/if}
@@ -630,9 +629,7 @@ $effect(() => {
 					{#if hasNonManualUsers && index > 0 && sortedUsers()[index - 1]?.added_via?.source !== 'instance_group' && added_via?.source === 'instance_group'}
 						<tr class="bg-surface-secondary">
 							<td colspan={hasNonManualUsers ? 8 : 7} class="px-4 py-2">
-								<div class="text-xs text-tertiary font-bold">
-									Instance group users
-								</div>
+								<div class="text-xs text-tertiary font-bold"> Instance group users </div>
 							</td>
 						</tr>
 					{/if}
@@ -763,7 +760,10 @@ $effect(() => {
 										>
 											Remove
 										</Button>
-										<Tooltip>Cannot remove users synced from instance groups. Either disable the user or remove them from the SCIM group.</Tooltip>
+										<Tooltip
+											>Cannot remove users synced from instance groups. Either disable the user or
+											remove them from the SCIM group.</Tooltip
+										>
 									</div>
 								{:else if canConvertToGroup(user)}
 									<Button
@@ -984,7 +984,10 @@ $effect(() => {
 		}}
 	>
 		<div class="flex flex-col w-full space-y-4">
-			<span>Are you sure you want to remove this instance group from auto-add? This will not remove users already added from this group.</span>
+			<span
+				>Are you sure you want to remove this instance group from auto-add? This will not remove
+				users already added from this group.</span
+			>
 		</div>
 	</ConfirmationModal>
 </div>

package/package/components/sidebar/CriticalAlertTable.svelte

@@ -7,6 +7,7 @@ import { AlertCircle, CheckCircle2 } from 'lucide-svelte';
 import { devopsRole } from '../../stores';
 import List from '../common/layout/List.svelte';
 import { Skeleton } from '../common';
+import Linkify from './Linkify.svelte';
 export let alerts;
 export let hideAcknowledged = false;
 export let goToNextPage;
@@ -107,7 +108,7 @@ $: availableHeight = (contentHeight - headerHeight - pageSize - 1) / pageSize;
 							</Cell>
 
 							<Cell wrap>
-								<div class="flex-shrink min-w-0 break-words">{message}</div>
+								<div class="flex-shrink min-w-0 break-words"><Linkify text={message} /></div>
 							</Cell>
 							<!-- Flexible width -->
 							<Cell wrap>{formatDate(created_at)}</Cell>

package/package/components/sidebar/Linkify.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">"use strict";
+let { text } = $props();
+// Function to convert text with URLs to HTML
+function linkifyText(text) {
+    // Regex to match URLs starting with http/https and ending with )
+    const urlRegex = /\(((https?:\/\/[^\s)]+))\)/g;
+    // Replace matched patterns with anchor tags
+    return text.replace(urlRegex, '(<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>)');
+}
+let processedText = $derived(linkifyText(text));
+</script>
+
+<!-- Use @html to render the HTML -->
+{@html processedText}

package/package/components/sidebar/Linkify.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Linkify: import("svelte").Component<{
+    text: any;
+}, {}, "">;
+type Linkify = ReturnType<typeof Linkify>;
+export default Linkify;

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -120,12 +120,17 @@ const groupedWorkspaces = $derived(() => {
 					<MenuItem
 						class={twMerge(
 							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
+							workspace.disabled && 'opacity-50 cursor-not-allowed',
 							$workspaceStore === workspace.id
 								? 'cursor-default bg-surface-selected'
-								: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
+								: workspace.disabled
+									? ''
+									: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
 						)}
 						onClick={async () => {
-							await toggleSwitchWorkspace(workspace.id)
+							if (!workspace.disabled) {
+								await toggleSwitchWorkspace(workspace.id)
+							}
 						}}
 						{item}
 					>
@@ -146,7 +151,7 @@ const groupedWorkspaces = $derived(() => {
 											isForked ? 'text-secondary' : 'text-primary'
 										)}
 									>
-										{workspace.name}
+										{workspace.name}{workspace.disabled ? ' (user disabled)' : ''}
 									</div>
 									<div
 										class={twMerge(

package/package/components/table/tableUtils.js

@@ -38,6 +38,6 @@ export function convertJsonToCsv(arr) {
         return csv;
     }
     catch (err) {
-        throw new Error('An error occured when generating CSV:' + err);
+        throw new Error('An error occurred when generating CSV:' + err);
     }
 }

package/package/components/text_input/TextInput.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">export function inputBorderClass({ error, forceFocus } = {}) {
+    return twMerge('transition-colors border', forceFocus
+        ? '!border-nord-900 dark:!border-nord-900'
+        : '!border-nord-400 dark:!border-nord-300 hover:!border-nord-900/50 hover:dark:!border-nord-900/50 focus:!border-nord-900 dark:focus:!border-nord-900', error
+        ? '!border-red-300 focus:!border-red-400 hover:!border-red-500 dark:!border-red-400/40 dark:hover:!border-red-600/40'
+        : '');
+}
+export const inputBaseClass = 'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint';
+</script>
+
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+export function focus() {
+    inputEl?.focus();
+}
+let inputEl = $state();
+let { inputProps, value = $bindable(), class: className = '', error } = $props();
+</script>
+
+<input
+	{...inputProps}
+	class={twMerge(
+		inputBaseClass,
+		'w-full',
+		'[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+		inputBorderClass({ error: !!error }),
+		className
+	)}
+	bind:this={inputEl}
+	bind:value
+/>