windmill-components 1.623.1 → 1.642.0

package/package/components/select/SelectDropdown.svelte

@@ -1,85 +1,29 @@
-<script lang="ts" generics="T">import { deepEqual } from 'fast-equals';
-import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
-import { untrack } from 'svelte';
+<script lang="ts" generics="T">import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { PlusIcon } from 'lucide-svelte';
-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();
+import GenericDropdown from './GenericDropdown.svelte';
+import { Debounced } from 'runed';
+let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', itemLabelWrapperClasses = '', itemButtonWrapperClasses = '', maxHeight = 256, header, getInputRect, onSelectValue, startSnippet, endSnippet, bottomSnippet, highlightFirstOnOpen = false } = $props();
 let processedItems = $derived(!filterText
     ? _processedItems
     : _processedItems?.filter((item) => item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())));
-let listEl = $state();
-let dropdownPos = $state(computeDropdownPos());
 let keyArrowPos = $state();
-function computeDropdownPos() {
-    if (!getInputRect || !listEl)
-        return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
-    let inputR = getInputRect();
-    const listR = listEl.getBoundingClientRect();
-    const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
-    let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
-    if (isBelow)
-        return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow };
-    else {
-        return { width: inputR.width, height: listR.height, x: x, y: y - listR.height, isBelow };
-    }
-}
-$effect(() => {
-    function updateDropdownPos() {
-        let nPos = computeDropdownPos();
-        if (!deepEqual(nPos, dropdownPos))
-            dropdownPos = nPos;
-        if (open)
-            requestAnimationFrame(updateDropdownPos);
-    }
-    if (open)
-        untrack(() => updateDropdownPos());
-});
 $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
-        };
-    });
+    untrack(() => (keyArrowPos = open && (filterText || highlightFirstOnOpen) ? 0 : undefined));
 });
+// Expose whether the dropdown is visually open for keyboard nav guard.
+// We mirror the same logic GenericDropdown uses: open && !disabled.
+let isVisible = $derived(open && !disabled);
+// Dirty fix to prevent a rendering bug where the ul is present in the layout but
+// displays as empty. It only happens with overflow-y-auto set.
+let enableOverflowYAuto = new Debounced(() => isVisible, 15);
 </script>
 
 <svelte:window
 	on:keydown={(e) => {
-		if (!uiState.visible || !processedItems?.length) return
+		if (!isVisible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
 		} else if (e.key === 'ArrowDown') {
@@ -98,79 +42,68 @@ $effect(() => {
 	}}
 />
 
-<ConditionalPortal condition={!disablePortal} name="select-dropdown-portal">
-	{#if uiState.domExists}
-		<div
-			class={twMerge(
-				disablePortal ? 'absolute' : 'fixed',
-				'z-[5002] text-primary 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; height: ${dropdownPos.height}px;`
-				: ''}"
-		>
-			<div
-				class={twMerge(
-					'overflow-clip rounded-md drop-shadow-base 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 rounded-md bg-surface-input">
-					{@render header?.()}
-					{#if processedItems?.length === 0}
-						<div class="py-8 px-4 text-center text-primary text-xs">{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 border-border-light',
-										itemIndex === 0 ? 'mt-3' : 'mt-6'
-									)}
-								>
-									{item.__select_group}
-								</li>
-							{/if}
-							<li>
-								<button
-									class={twMerge(
-										'py-2 px-4 w-full font-normal text-left text-primary text-xs',
-										itemIndex === keyArrowPos || item.value === value
-											? 'bg-surface-secondary dark:bg-surface-tertiary'
-											: 'hover:bg-surface-hover',
-										endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
-										itemButtonWrapperClasses,
-										item.disabled ? 'cursor-not-allowed text-disabled' : ''
-									)}
-									onclick={(e) => {
-										e.stopImmediatePropagation()
-										if (!item.disabled) onSelectValue(item)
-									}}
-								>
-									{@render startSnippet?.({ item, close: () => (open = false) })}
-									<span class={itemLabelWrapperClasses}>
-										{item.label || '\xa0'}
-									</span>
-									{#if item.__is_create}
-										<PlusIcon class="inline ml-auto" size={16} />
-									{:else}
-										{@render endSnippet?.({ item, close: () => (open = false) })}
-									{/if}
-									{#if item.subtitle}
-										<div class="text-2xs text-secondary">{item.subtitle}</div>
-									{/if}
-								</button>
-							</li>
-						{/each}
-					</ul>
-					{@render bottomSnippet?.({ close: () => (open = false) })}
-				</div>
-			</div>
-		</div>
+<GenericDropdown
+	{listAutoWidth}
+	{disablePortal}
+	{open}
+	{disabled}
+	{maxHeight}
+	{getInputRect}
+	class={className}
+>
+	{@render header?.()}
+	{#if processedItems?.length === 0}
+		<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
 	{/if}
-</ConditionalPortal>
+	<ul
+		class={twMerge(
+			'flex-1 flex flex-col',
+			enableOverflowYAuto.current ? 'overflow-y-auto' : '',
+			ulClass
+		)}
+	>
+		{#each processedItems ?? [] as item, itemIndex (item.value)}
+			{#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 border-border-light',
+						itemIndex === 0 ? 'mt-3' : 'mt-6'
+					)}
+				>
+					{item.__select_group}
+				</li>
+			{/if}
+			<li>
+				<button
+					class={twMerge(
+						'py-2 px-4 w-full font-normal text-left text-primary text-xs',
+						itemIndex === keyArrowPos || item.value === value
+							? 'bg-surface-secondary dark:bg-surface-tertiary'
+							: 'hover:bg-surface-hover',
+						endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
+						itemButtonWrapperClasses,
+						item.disabled ? 'cursor-not-allowed text-disabled' : ''
+					)}
+					onclick={(e) => {
+						e.stopImmediatePropagation()
+						if (!item.disabled) onSelectValue(item)
+					}}
+				>
+					{@render startSnippet?.({ item, close: () => (open = false) })}
+					<span class={itemLabelWrapperClasses}>
+						{item.label || '\xa0'}
+					</span>
+					{#if item.__is_create}
+						<PlusIcon class="inline ml-auto" size={16} />
+					{:else}
+						{@render endSnippet?.({ item, close: () => (open = false) })}
+					{/if}
+					{#if item.subtitle}
+						<div class="text-2xs text-secondary">{item.subtitle}</div>
+					{/if}
+				</button>
+			</li>
+		{/each}
+	</ul>
+	{@render bottomSnippet?.({ close: () => (open = false) })}
+</GenericDropdown>

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

@@ -5,7 +5,7 @@ declare function $$render<T>(): {
         processedItems?: ProcessedItem<T>[];
         value: T | undefined;
         filterText?: string;
-        listAutoWidth?: Boolean;
+        listAutoWidth?: boolean;
         disabled?: boolean;
         disablePortal?: boolean;
         open: boolean;
@@ -14,6 +14,7 @@ declare function $$render<T>(): {
         ulClass?: string;
         itemLabelWrapperClasses?: string;
         itemButtonWrapperClasses?: string;
+        maxHeight?: number;
         header?: Snippet;
         getInputRect?: () => DOMRect;
         onSelectValue: (item: ProcessedItem<T>) => void;
@@ -28,6 +29,8 @@ declare function $$render<T>(): {
         bottomSnippet?: Snippet<[{
             close: () => void;
         }]>;
+        /** When true, the first item is highlighted when the dropdown opens (even without filterText) */
+        highlightFirstOnOpen?: boolean;
     };
     exports: {};
     bindings: "";

package/package/components/settings/AIPromptsModal.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import Modal2 from '../common/modal/Modal2.svelte';
+import Button from '../common/button/Button.svelte';
+import Label from '../Label.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { AIMode } from '../copilot/chat/AIChatManager.svelte';
+const MAX_CUSTOM_PROMPT_LENGTH = 5000;
+let { open = $bindable(false), customPrompts = $bindable(), onSave, onReset, hasChanges, isWorkspaceSettings = false } = $props();
+const placeholders = {
+    [AIMode.SCRIPT]: 'Enter custom instructions for script generation and editing',
+    [AIMode.FLOW]: 'Enter custom instructions for workflow creation and automation',
+    [AIMode.APP]: 'Enter custom instructions for UI and app development',
+    [AIMode.NAVIGATOR]: 'Enter custom instructions for navigation and guidance',
+    [AIMode.API]: 'Enter custom instructions for API interactions and integrations',
+    [AIMode.ASK]: 'Enter custom instructions for general questions and assistance'
+};
+const modeLabels = {
+    [AIMode.SCRIPT]: 'Script Mode',
+    [AIMode.FLOW]: 'Flow Mode',
+    [AIMode.APP]: 'App Mode',
+    [AIMode.NAVIGATOR]: 'Navigator Mode',
+    [AIMode.API]: 'API Mode',
+    [AIMode.ASK]: 'Ask Mode'
+};
+function handleSave() {
+    onSave?.();
+    open = false;
+}
+function handleReset() {
+    onReset();
+}
+</script>
+
+<Modal2
+	bind:isOpen={open}
+	title="Customize AI System Prompts"
+	fixedWidth="md"
+	fixedHeight="xxl"
+	target="#content"
+>
+	<div class="flex flex-col gap-6 h-full px-1 w-full">
+		<div class="grow min-h-0 overflow-y-auto" style="scrollbar-gutter: stable;">
+			<div class="text-xs text-secondary mb-6">
+				{#if isWorkspaceSettings}
+					Customize the system prompts for each AI mode. These prompts apply to all workspace
+					members.
+				{:else}
+					Customize the system prompts for each AI mode. These prompts are stored locally in your
+					browser and apply in addition to workspace-level prompts.
+				{/if}
+			</div>
+
+			{#each Object.values(AIMode) as mode}
+				<div class="flex flex-col gap-2 pb-4 last:border-b-0">
+					<Label label={modeLabels[mode]} for={`custom-prompt-${mode}`}>
+						<TextInput
+							bind:value={customPrompts[mode]}
+							underlyingInputEl="textarea"
+							inputProps={{
+								placeholder: placeholders[mode],
+								rows: 3,
+								maxlength: MAX_CUSTOM_PROMPT_LENGTH,
+								id: `custom-prompt-${mode}`
+							}}
+							class="min-h-12 resize-y"
+							size="sm"
+						/>
+						<div class="flex justify-end mt-1">
+							<span class="text-2xs text-hint">
+								{(customPrompts[mode] ?? '').length}/{MAX_CUSTOM_PROMPT_LENGTH} characters
+							</span>
+						</div>
+					</Label>
+				</div>
+			{/each}
+		</div>
+
+		<div class="flex justify-end gap-2">
+			<Button size="sm" variant="default" disabled={!hasChanges} onclick={handleReset}>
+				Reset
+			</Button>
+			{#if onSave}
+				<Button size="sm" variant="accent" disabled={!hasChanges} onclick={handleSave}>
+					Save Prompts
+				</Button>
+			{/if}
+		</div>
+	</div>
+</Modal2>

package/package/components/settings/AIPromptsModal.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    open?: boolean;
+    customPrompts: Record<string, string>;
+    onSave?: () => void;
+    onReset: () => void;
+    hasChanges: boolean;
+    isWorkspaceSettings?: boolean;
+}
+declare const AIPromptsModal: import("svelte").Component<Props, {}, "open" | "customPrompts">;
+type AIPromptsModal = ReturnType<typeof AIPromptsModal>;
+export default AIPromptsModal;

package/package/components/settings/ChangeWorkspaceColor.svelte

@@ -43,11 +43,14 @@ async function changeWorkspaceColor() {
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace color</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace color</p>
+	<p class="text-xs text-secondary font-normal">
+		Color to identify the current workspace in the list of workspaces
+	</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		{#if $workspaceColor}
 			<div
-				class="w-5 h-5 rounded-full border border-gray-300 dark:border-gray-600"
+				class="w-10 h-6 rounded-md border border-gray-300 dark:border-gray-600"
 				style="background-color: {$workspaceColor}"
 			></div>
 		{:else}
@@ -57,21 +60,17 @@ async function changeWorkspaceColor() {
 			on:click={() => {
 				open = true
 			}}
-			size="xs"
-			spacingSize="xs2"
-			color="light"
+			unifiedSize="sm"
+			variant="subtle"
 			iconOnly
 			startIcon={{
 				icon: Pen
 			}}
 		/>
 	</div>
-	<p class="text-2xs text-secondary font-normal">
-		Color to identify the current workspace in the list of workspaces
-	</p>
 </div>
 
-<Modal bind:open title="Change Workspace Color">
+<Modal bind:open title="Change workspace color">
 	<div class="flex flex-col gap-4">
 		<label class="block">
 			<span class="text-secondary text-sm">Workspace color</span>
@@ -91,14 +90,15 @@ async function changeWorkspaceColor() {
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
+	{#snippet actions()}
 		<Button
 			size="sm"
+			variant="accent"
 			on:click={() => {
 				changeWorkspaceColor()
 			}}
 		>
 			Save
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 </Modal>

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;
     }
@@ -53,7 +53,8 @@ export let open = false;
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace ID</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace ID</p>
+	<p class="text-xs text-secondary font-normal">Slug to uniquely identify your workspace</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		<p class="text-xs font-normal text-primary">{$workspaceStore ?? ''}</p>
 		{#if !isCloudHosted() || $superadmin}
@@ -61,9 +62,8 @@ export let open = false;
 				on:click={() => {
 					open = true
 				}}
-				size="xs"
-				spacingSize="xs2"
-				color="light"
+				unifiedSize="sm"
+				variant="subtle"
 				iconOnly
 				startIcon={{
 					icon: Pen
@@ -71,24 +71,27 @@ export let open = false;
 			/>
 		{/if}
 	</div>
-	<p class="text-xs text-secondary font-normal">Slug to uniquely identify your workspace</p>
 </div>
 
 <Modal bind:open title="Change workspace ID">
 	<div class="flex flex-col gap-4">
-		<Alert type="warning" title="Warning">
-			Renaming the workspace may take a few minutes to complete. Once finished, please update your
-			webhook calls and adjust your CLI sync configuration accordingly.
+		<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-sm"
-			>Current ID <br /> <span class="font-bold">{$workspaceStore ?? ''}</span></p
+		<p class="text-secondary text-xs"
+			>Current ID <br /> <span class="text-emphasis">{$workspaceStore ?? ''}</span></p
 		>
-		<label class="block">
-			<span class="text-secondary text-sm">New name</span>
+		<label class="flex flex-col gap-1">
+			<span class="text-emphasis text-xs">New name</span>
 			<input type="text" bind:value={newName} />
 		</label>
 		<label class="block">
-			<span class="text-secondary text-sm">New ID</span>
+			<span class="text-emphasis text-xs">New ID</span>
 			<input type="text" bind:value={newId} />
 			{#if errorId}
 				<div class="text-red-500 text-xs mt-1">{errorId}</div>
@@ -96,9 +99,9 @@ export let open = false;
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
+	{#snippet actions()}
 		<Button
-			size="sm"
+			variant="accent"
 			disabled={checking || errorId.length > 0 || !newName || !newId}
 			{loading}
 			on:click={() => {
@@ -107,5 +110,5 @@ export let open = false;
 		>
 			Save
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 </Modal>

package/package/components/settings/ChangeWorkspaceName.svelte

@@ -31,42 +31,41 @@ async function renameWorkspace() {
 </script>
 
 <div class="flex flex-col gap-1">
-	<p class="font-medium text-xs text-emphasis">Workspace name</p>
-	<div class="flex flex-row gap-0.5 items-center">
-		<p class="text-xs font-normal text-primary">{currentName}</p>
+	<p class="font-semibold text-xs text-emphasis">Workspace name</p>
+	<p class="text-xs text-secondary font-normal">Displayable name</p>
+	<div class="flex flex-row gap-2 items-center">
+		<p class="text-primary text-xs">{currentName}</p>
 		<Button
 			on:click={() => {
 				open = true
 			}}
-			size="xs"
-			spacingSize="xs2"
-			color="light"
+			unifiedSize="sm"
 			iconOnly
+			variant="subtle"
 			startIcon={{
 				icon: Pen
 			}}
 		/>
 	</div>
-
-	<p class="text-2xs text-secondary font-normal"> Displayable name </p>
 </div>
 
 <Modal bind:open title="Change workspace name">
 	<div class="flex flex-col gap-4 mt-4">
 		{#if currentName}
-			<p class="text-secondary text-sm"
-				>Current name <br /> <span class="font-bold">{currentName}</span></p
+			<p class="text-secondary text-xs"
+				>Current name <br /> <span class="text-emphasis">{currentName}</span></p
 			>
 		{/if}
-		<label class="block">
-			<span class="text-secondary text-sm">New name</span>
+		<label class="flex flex-col gap-1">
+			<span class="text-emphasis text-xs">New name</span>
 			<input type="text" bind:value={newName} />
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
+	{#snippet actions()}
 		<Button
 			size="sm"
+			variant="accent"
 			disabled={!newName}
 			on:click={() => {
 				renameWorkspace()
@@ -74,5 +73,5 @@ async function renameWorkspace() {
 		>
 			Save
 		</Button>
-	</svelte:fragment>
+	{/snippet}
 </Modal>

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);
@@ -135,7 +135,7 @@ async function createToken(mcpMode = false) {
     }
 }
 const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
-const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
+const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/mcp?token=`);
 const warning = $derived(newMcpScope === 'all'
     ? 'Create your first scripts or flows to make them available via MCP.'
     : newMcpScope === 'favorites'
@@ -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>