windmill-components 1.504.5 → 1.510.1

package/package/components/settings/TokenDisplay.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">import { copyToClipboard } from '../../utils';
+import { Clipboard } from 'lucide-svelte';
+import ClipboardPanel from '../details/ClipboardPanel.svelte';
+import Alert from '../common/alert/Alert.svelte';
+let { token, type = 'token', mcpUrl, title, onCopy } = $props();
+function handleCopyClick() {
+    copyToClipboard(token);
+    onCopy?.();
+}
+const displayTitle = $derived(title || (type === 'mcp' ? 'MCP URL Generated Successfully' : 'Token Created Successfully'));
+const colorScheme = {
+    gradient: 'from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20',
+    border: 'border-blue-200 dark:border-blue-700',
+    iconBg: 'bg-blue-100 dark:bg-blue-800',
+    iconColor: 'text-blue-600 dark:text-blue-300',
+    titleColor: 'text-blue-800 dark:text-blue-200',
+    labelColor: 'text-blue-700 dark:text-blue-300',
+    infoBg: 'bg-blue-50 dark:bg-blue-900/30',
+    infoBorder: 'border-blue-200 dark:border-blue-600',
+    infoText: 'text-blue-700 dark:text-blue-300'
+};
+</script>
+
+<div class="border rounded-lg mb-6 p-4 bg-gradient-to-r {colorScheme.gradient} {colorScheme.border} shadow-sm">
+	<div class="flex items-start gap-3">
+		<div class="flex-shrink-0 w-8 h-8 {colorScheme.iconBg} rounded-full flex items-center justify-center mt-0.5">
+			{#if type === 'mcp'}
+				<svg class="w-4 h-4 {colorScheme.iconColor}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
+				</svg>
+			{:else}
+				<svg class="w-4 h-4 {colorScheme.iconColor}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+				</svg>
+			{/if}
+		</div>
+		<div class="flex-1 min-w-0">
+			<h4 class="text-sm font-semibold {colorScheme.titleColor} mb-2">
+				{displayTitle}
+			</h4>
+			
+			{#if type === 'mcp' && mcpUrl}
+				<div class="space-y-3">
+					<div>
+						<!-- svelte-ignore a11y_label_has_associated_control -->
+						<label class="block text-xs font-medium {colorScheme.labelColor} mb-1">
+							Your MCP Server URL:
+						</label>
+						<ClipboardPanel content={mcpUrl} />
+					</div>
+					<div>
+						<!-- svelte-ignore a11y_label_has_associated_control -->
+						<label class="block text-xs font-medium {colorScheme.labelColor} mb-1">
+							Your Token:
+						</label>
+						<div class="bg-white dark:bg-gray-800 rounded-md p-3 border {colorScheme.border}">
+							<div class="flex items-center justify-between gap-2">
+								<code class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all flex-1">
+									{token}
+								</code>
+								<button 
+									onclick={handleCopyClick} 
+									class="flex-shrink-0 p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+									title="Copy token"
+								>
+									<Clipboard size={16} />
+								</button>
+							</div>
+						</div>
+					</div>
+					<Alert type="warning" title="Important" size="xs">
+						Make sure to copy both the URL and token now. You won't be able to see them again!
+					</Alert>
+					<div class="{colorScheme.infoBg} rounded-md p-2 border {colorScheme.infoBorder}">
+						<p class="text-xs {colorScheme.infoText}">
+							<strong>Next steps:</strong> Use this URL in your MCP-compatible client (like Claude Desktop) to access your Windmill scripts and flows as tools.
+						</p>
+					</div>
+				</div>
+			{:else}
+				<div class="bg-white dark:bg-gray-800 rounded-md p-3 border {colorScheme.border}">
+					<div class="flex items-center justify-between gap-2">
+						<code class="text-sm font-mono text-gray-800 dark:text-gray-200 break-all flex-1">
+							{token}
+						</code>
+						<button 
+							onclick={handleCopyClick} 
+							class="flex-shrink-0 p-1.5 text-gray-500 hover:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
+							title="Copy token"
+						>
+							<Clipboard size={16} />
+						</button>
+					</div>
+				</div>
+				<div class="mt-3">
+					<Alert type="warning" title="Important" size="xs">
+						Make sure to copy your personal access token now. You won't be able to see it again!
+					</Alert>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,10 @@
+interface Props {
+    token: string;
+    type?: 'token' | 'mcp';
+    mcpUrl?: string;
+    title?: string;
+    onCopy?: () => void;
+}
+declare const TokenDisplay: import("svelte").Component<Props, {}, "">;
+type TokenDisplay = ReturnType<typeof TokenDisplay>;
+export default TokenDisplay;

package/package/components/settings/TokensTable.svelte

@@ -1,111 +1,21 @@
 <script lang="ts">import TableCustom from '../TableCustom.svelte';
-import { displayDate, copyToClipboard } from '../../utils';
-import { IntegrationService, UserService } from '../../gen';
-import { Button } from '../common';
-import { Clipboard, Plus } from 'lucide-svelte';
-import { workspaceStore, userWorkspaces } from '../../stores';
+import { displayDate } from '../../utils';
+import { UserService } from '../../gen';
 import { createEventDispatcher } from 'svelte';
-import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import Toggle from '../Toggle.svelte';
-import ClipboardPanel from '../details/ClipboardPanel.svelte';
 import { sendUserToast } from '../../toast';
-import MultiSelect from '../select/MultiSelect.svelte';
-import { safeSelectItems } from '../select/utils.svelte';
+import CreateToken from './CreateToken.svelte';
 let { showMcpMode = false, openWithMcpMode = false, defaultNewTokenLabel, defaultNewTokenWorkspace, scopes } = $props();
 // --- Local State ---
 let tokens = $state([]);
 let tokenPage = $state(1);
 let newTokenLabel = $state(defaultNewTokenLabel);
-let newToken = $state(undefined);
-let newTokenExpiration = $state(undefined);
-let newTokenWorkspace = $state(defaultNewTokenWorkspace);
-let newMcpApps = $state([]);
-let displayCreateToken = $state(scopes != undefined);
-let mcpCreationMode = $state(false);
-let newMcpScope = $state('favorites');
-let newMcpToken = $state(undefined);
-let loadingApps = $state(false);
-let errorFetchApps = $state(false);
-let allApps = $state([]);
-function ensureCurrentWorkspaceIncluded(workspacesList, currentWorkspace) {
-    if (!currentWorkspace) {
-        return workspacesList;
-    }
-    const hasCurrentWorkspace = workspacesList.some((w) => w.id === currentWorkspace);
-    if (hasCurrentWorkspace) {
-        return workspacesList;
-    }
-    return [{ id: currentWorkspace, name: currentWorkspace }, ...workspacesList];
-}
-const workspaces = $derived(ensureCurrentWorkspaceIncluded($userWorkspaces, $workspaceStore));
-const mcpBaseUrl = $derived(`${window.location.origin}/api/mcp/w/${newTokenWorkspace}/sse?token=`);
 const dispatch = createEventDispatcher();
 $effect(() => {
-    if (openWithMcpMode) {
-        handleCreateClick('mcpUrl');
-    }
     listTokens();
 });
-$effect(() => {
-    if (mcpCreationMode) {
-        getAllApps();
-    }
-    else {
-        newMcpApps = [];
-    }
-});
-// --- Functions ---
-async function createToken(mcpMode = false) {
-    try {
-        let date;
-        if (newTokenExpiration) {
-            date = new Date(new Date().getTime() + newTokenExpiration * 1000);
-        }
-        let tokenScopes = scopes;
-        if (mcpMode) {
-            tokenScopes = [`mcp:${newMcpScope}`];
-            if (newMcpApps.length > 0) {
-                tokenScopes.push(`mcp:hub:${newMcpApps.join(',')}`);
-            }
-        }
-        const createdToken = await UserService.createToken({
-            requestBody: {
-                label: newTokenLabel,
-                expiration: date?.toISOString(),
-                scopes: tokenScopes,
-                workspace_id: mcpMode ? newTokenWorkspace || $workspaceStore : newTokenWorkspace
-            }
-        });
-        if (mcpMode) {
-            newMcpToken = `${createdToken}`;
-        }
-        else {
-            newToken = `${createdToken}`;
-        }
-        dispatch('tokenCreated', newToken ?? newMcpToken);
-        listTokens();
-        mcpCreationMode = false;
-        displayCreateToken = false;
-    }
-    catch (err) {
-        console.error('Failed to create token:', err);
-    }
-}
-function handleCreateClick(type) {
-    mcpCreationMode = type === 'mcpUrl';
-    displayCreateToken = true;
-    newMcpToken = undefined;
-    newToken = undefined;
-    newTokenExpiration = undefined;
-    newMcpApps = [];
-    newTokenLabel = type === 'mcpUrl' ? 'MCP token' : undefined;
-}
-function handleCreateTokenClick() {
-    handleCreateClick('token');
-}
-function handleCopyClick() {
-    copyToClipboard(newToken ?? '');
+function handleTokenCreated(token) {
+    dispatch('tokenCreated', token);
+    listTokens();
 }
 async function handleDeleteClick(tokenPrefix) {
     await UserService.deleteToken({ tokenPrefix });
@@ -127,266 +37,77 @@ function handlePreviousPage() {
     tokenPage -= 1;
     listTokens();
 }
-async function getAllApps() {
-    if (allApps.length > 0) {
-        return;
-    }
-    try {
-        loadingApps = true;
-        allApps = (await IntegrationService.listHubIntegrations({
-            kind: 'script'
-        })).map((x) => x.name);
-    }
-    catch (err) {
-        console.error('Hub is not available');
-        allApps = [];
-        errorFetchApps = true;
-    }
-    finally {
-        loadingApps = false;
-    }
-}
 </script>
 
-<div class="grid grid-cols-2 pt-8 pb-1" class:pt-8={scopes == undefined}>
-	<h2 class="py-0 my-0 border-b pt-3">Tokens</h2>
-	<div class="flex justify-end border-b pb-1 gap-2">
-		<Button
-			aiId="account-settings-create-token"
-			aiDescription="Create a new token to authenticate to the Windmill API"
-			size="sm"
-			startIcon={{ icon: Plus }}
-			btnClasses={displayCreateToken ? 'hidden' : ''}
-			on:click={handleCreateTokenClick}
-		>
-			Create token
-		</Button>
+<div class="flex flex-col min-h-0">
+	<div class="text-2xs text-tertiary italic pb-2 mt-2">
+		Authenticate to the Windmill API with access tokens.
 	</div>
-</div>
-<div class="text-2xs text-tertiary italic pb-6">
-	Authenticate to the Windmill API with access tokens.
-</div>
 
-<div>
-	{#if newToken}
-		<div
-			class="border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
-		>
-			<div>
-				Added token: <button onclick={handleCopyClick} class="inline-flex gap-2 items-center">
-					{newToken}
-					<Clipboard size={12} />
+	<CreateToken
+		{showMcpMode}
+		{openWithMcpMode}
+		bind:newTokenLabel
+		{defaultNewTokenWorkspace}
+		{scopes}
+		onTokenCreated={handleTokenCreated}
+	/>
+	<div class="overflow-auto flex-1 min-h-64">
+		<TableCustom>
+			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+			<tr slot="header-row">
+				<th>prefix</th>
+				<th>label</th>
+				<th>expiration</th>
+				<th>scopes</th>
+				<th></th>
+			</tr>
+			{#snippet body()}
+				<tbody>
+					{#if tokens && tokens.length > 0}
+						{#each tokens as { token_prefix, expiration, label, scopes }}
+							<tr>
+								<td class="grow">{token_prefix}****</td>
+								<td class="grow">{label ?? ''}</td>
+								<td class="grow">{displayDate(expiration ?? '')}</td>
+								<td class="grow">{scopes?.join(', ') ?? ''}</td>
+								<td class="grow">
+									<button
+										class="text-red-500 text-xs underline"
+										onclick={() => handleDeleteClick(token_prefix)}
+									>
+										Delete
+									</button>
+								</td>
+							</tr>
+						{/each}
+					{:else if tokens && tokens.length === 0}
+						<tr class="px-6">
+							<td class="text-secondary italic text-xs"> There are no tokens yet</td>
+						</tr>
+					{:else}
+						<tr><td>Loading...</td></tr>
+					{/if}
+				</tbody>
+			{/snippet}
+		</TableCustom>
+		<div class="flex flex-row-reverse gap-2 w-full">
+			{#if tokens?.length == 100}
+				<button
+					class="p-1 underline text-sm whitespace-nowrap text-center"
+					onclick={handleNextPage}
+				>
+					Next
 				</button>
-			</div>
-			<div class="pt-1 text-xs ml-2">
-				Make sure to copy your personal access token now. You won't be able to see it again!
-			</div>
-		</div>
-	{/if}
-
-	{#if newMcpToken}
-		<div
-			class="border rounded-md mb-6 px-2 py-2 bg-green-50 dark:bg-green-200 dark:text-green-800 flex flex-row flex-wrap"
-		>
-			<p class="text-sm mb-2">New MCP URL:</p>
-			<ClipboardPanel content={`${mcpBaseUrl}${newMcpToken}`} />
-			<p class="pt-1 text-xs">
-				Make sure to copy this URL now. You won't be able to see it again!
-			</p>
-		</div>
-	{/if}
-
-	{#if displayCreateToken}
-		<div class="py-3 px-3 border rounded-md mb-6 bg-surface-secondary min-w-min">
-			<h3 class="pb-3 font-semibold">Add a new token</h3>
-
-			{#if showMcpMode}
-				<div class="mb-4 flex flex-row flex-shrink-0">
-					<Toggle
-						on:change={(e) => {
-							mcpCreationMode = e.detail
-							if (e.detail) {
-								newTokenLabel = 'MCP token'
-								newTokenExpiration = undefined
-								newTokenWorkspace = $workspaceStore
-							} else {
-								newTokenLabel = undefined
-								newTokenExpiration = undefined
-								newTokenWorkspace = defaultNewTokenWorkspace
-							}
-						}}
-						checked={mcpCreationMode}
-						options={{
-							right: 'Generate MCP URL',
-							rightTooltip:
-								'Generate a new MCP URL to make your scripts and flows available as tools through your LLM clients.',
-							rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/mcp'
-						}}
-						size="xs"
-						aiId="account-settings-create-mcp-token"
-						aiDescription="Create a new MCP token to authenticate to the Windmill API"
-					/>
-				</div>
-			{/if}
-
-			{#if scopes != undefined}
-				<div class="mb-4">
-					<span class="block mb-1">Scope</span>
-					{#each scopes as scope}
-						<input disabled type="text" value={scope} class="mb-2 w-full" />
-					{/each}
-				</div>
 			{/if}
-
-			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-				{#if mcpCreationMode}
-					<div>
-						<span class="block mb-1">Scope</span>
-						<ToggleButtonGroup bind:selected={newMcpScope} allowEmpty={false}>
-							{#snippet children({ item })}
-								<ToggleButton
-									{item}
-									value="favorites"
-									label="Favorites only"
-									tooltip="Make only your favorite scripts and flows available as tools"
-								/>
-								<ToggleButton
-									{item}
-									value="all"
-									label="All scripts/flows"
-									tooltip="Make all your scripts and flows available as tools"
-								/>
-							{/snippet}
-						</ToggleButtonGroup>
-					</div>
-
-					<div>
-						<span class="block mb-1">Hub scripts (optional)</span>
-						{#if loadingApps}
-							<div>Loading...</div>
-						{:else if errorFetchApps}
-							<div>Error fetching apps</div>
-						{:else}
-							<MultiSelect
-								items={safeSelectItems(allApps)}
-								placeholder="Select apps"
-								bind:value={newMcpApps}
-								class="!bg-surface"
-							/>
-						{/if}
-					</div>
-
-					<div>
-						<span class="block mb-1">Workspace</span>
-						<select
-							bind:value={newTokenWorkspace}
-							disabled={workspaces.length === 1}
-							class="w-full !bg-surface"
-						>
-							{#each workspaces as workspace}
-								<option value={workspace.id}>{workspace.name}</option>
-							{/each}
-						</select>
-					</div>
-				{/if}
-
-				<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 !bg-surface" />
-				</div>
-
-				{#if !mcpCreationMode}
-					<div>
-						<span class="block mb-1"
-							>Expires In <span class="text-xs text-tertiary">(optional)</span></span
-						>
-						<select bind:value={newTokenExpiration} class="w-full !bg-surface">
-							<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>
-					</div>
-				{/if}
-			</div>
-
-			<div class="mt-4 flex justify-end gap-2 flex-row">
-				<Button
-					on:click={() => {
-						mcpCreationMode = false
-						displayCreateToken = false
-					}}
-				>
-					Cancel
-				</Button>
-				<Button
-					on:click={() => createToken(mcpCreationMode)}
-					disabled={mcpCreationMode && newTokenWorkspace == undefined}
+			{#if tokenPage > 1}
+				<button
+					class="p-1 underline text-sm whitespace-nowrap text-center"
+					onclick={handlePreviousPage}
 				>
-					New token
-				</Button>
-			</div>
+					Previous
+				</button>
+			{/if}
 		</div>
-	{/if}
-</div>
-
-<div class="overflow-auto">
-	<TableCustom>
-		<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-		<tr slot="header-row">
-			<th>prefix</th>
-			<th>label</th>
-			<th>expiration</th>
-			<th>scopes</th>
-			<th></th>
-		</tr>
-		{#snippet body()}
-			<tbody>
-				{#if tokens && tokens.length > 0}
-					{#each tokens as { token_prefix, expiration, label, scopes }}
-						<tr>
-							<td class="grow">{token_prefix}****</td>
-							<td class="grow">{label ?? ''}</td>
-							<td class="grow">{displayDate(expiration ?? '')}</td>
-							<td class="grow">{scopes?.join(', ') ?? ''}</td>
-							<td class="grow">
-								<button
-									class="text-red-500 text-xs underline"
-									onclick={() => handleDeleteClick(token_prefix)}
-								>
-									Delete
-								</button>
-							</td>
-						</tr>
-					{/each}
-				{:else if tokens && tokens.length === 0}
-					<tr class="px-6">
-						<td class="text-secondary italic text-xs"> There are no tokens yet</td>
-					</tr>
-				{:else}
-					<tr><td>Loading...</td></tr>
-				{/if}
-			</tbody>
-		{/snippet}
-	</TableCustom>
-	<div class="flex flex-row-reverse gap-2 w-full">
-		{#if tokens?.length == 100}
-			<button class="p-1 underline text-sm whitespace-nowrap text-center" onclick={handleNextPage}>
-				Next
-			</button>
-		{/if}
-		{#if tokenPage > 1}
-			<button
-				class="p-1 underline text-sm whitespace-nowrap text-center"
-				onclick={handlePreviousPage}
-			>
-				Previous
-			</button>
-		{/if}
 	</div>
 </div>

package/package/components/sidebar/CriticalAlertModal.svelte

@@ -74,6 +74,9 @@ async function saveGlobalMuteSetting() {
     childRef.refreshAlerts();
 }
 async function updateHasUnacknowledgedCriticalAlerts(sendToast = false) {
+    if (typeof document !== 'undefined' && document.visibilityState !== 'visible') {
+        return;
+    }
     if (checkingForNewAlerts)
         return;
     checkingForNewAlerts = true;

package/package/components/triggers/DeleteTriggerButton.svelte

@@ -9,7 +9,7 @@ let confirmationModalOpen = $state(false);
 </script>
 
 <ConfirmationModal
-	title="Are you sure you want to delete this draft trigger ?"
+	title={`Are you sure you want to delete this ${trigger?.isDraft ? 'draft' : 'deployed'} trigger ?`}
 	confirmationText="Delete"
 	open={confirmationModalOpen}
 	on:canceled={() => {

package/package/components/triggers/TriggerEditorToolbar.svelte

@@ -49,7 +49,7 @@ const canSave = $derived((permissions === 'write' && edit) || permissions === 'c
 				/>
 			</div>
 		{/if}
-		{#if trigger?.isDraft}
+		{#if trigger?.isDraft || permissions === 'create'}
 			<DeleteTriggerButton {onDelete} {trigger} />
 		{:else if !trigger?.isDraft && trigger?.draftConfig}
 			<Button
@@ -63,12 +63,12 @@ const canSave = $derived((permissions === 'write' && edit) || permissions === 'c
 				Reset changes
 			</Button>
 		{/if}
-		{#if canSave && trigger?.draftConfig}
+		{#if canSave}
 			<Tooltip placement="bottom-end" disablePopup={!saveDisabled && !cloudDisabled && isDeployed}>
 				<Button
 					size="xs"
 					startIcon={{ icon: Save }}
-					disabled={saveDisabled || cloudDisabled || !isDeployed}
+					disabled={saveDisabled || cloudDisabled || !isDeployed || !trigger?.draftConfig}
 					on:click={() => {
 						onUpdate?.()
 					}}

package/package/components/triggers/TriggerRetriesAndErrorHandler.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">import { enterpriseLicense } from '../../stores';
+import { emptyString } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+import ErrorOrRecoveryHandler from '../ErrorOrRecoveryHandler.svelte';
+import FlowRetries from '../flows/content/FlowRetries.svelte';
+import Tooltip from '../Tooltip.svelte';
+let { optionTabSelected, itemKind, can_write, errorHandlerSelected = $bindable(), error_handler_path = $bindable(), error_handler_args = $bindable(), retry = $bindable() } = $props();
+</script>
+
+{#if ['error_handler', 'retries'].includes(optionTabSelected) && itemKind !== 'script'}
+	<Alert type="info" title="Only available for scripts" class="mb-2">
+		Error Handler and Retries are only available for scripts. For flows, use the built-in <a
+			href="https://www.windmill.dev/docs/flows/flow_error_handler"
+			target="_blank">error handler</a
+		>
+		and <a href="https://www.windmill.dev/docs/flows/retries" target="_blank">retries</a>.
+	</Alert>
+{:else if optionTabSelected === 'error_handler'}
+	<ErrorOrRecoveryHandler
+		isEditable={can_write}
+		errorOrRecovery="error"
+		showScriptHelpText={true}
+		bind:handlerSelected={errorHandlerSelected}
+		bind:handlerPath={error_handler_path}
+		toggleText="Alert channel on error"
+		customScriptTemplate="/scripts/add?hub=hub%2F13953%2Fwindmill%2Ftrigger_error_handler_template"
+		customHandlerKind="script"
+		bind:handlerExtraArgs={error_handler_args}
+	>
+		{#snippet customTabTooltip()}
+			<Tooltip>
+				<div class="flex gap-20 items-start mt-3">
+					<div class="text-sm"
+						>The following args will be passed to the error handler:
+						<ul class="mt-1 ml-2">
+							<li><b>workspace_id</b>: The ID of the workspace that the trigger belongs to.</li>
+							<li><b>job_id</b>: The UUID of the job that errored.</li>
+							<li><b>path</b>: The path of the script or flow that failed.</li>
+							<li><b>is_flow</b>: Whether the runnable is a flow.</li>
+							<li
+								><b>trigger_path</b>: The path of the trigger in the format
+								trigger_type/trigger_path.</li
+							>
+							<li><b>error</b>: The error details.</li>
+							<li><b>started_at</b>: The start datetime of the latest job that failed.</li>
+						</ul>
+					</div>
+				</div>
+			</Tooltip>
+		{/snippet}</ErrorOrRecoveryHandler
+	>
+{:else if optionTabSelected === 'retries'}
+	{@const disabled = !can_write || emptyString($enterpriseLicense)}
+	<FlowRetries bind:flowModuleRetry={retry} {disabled} />
+{/if}

package/package/components/triggers/TriggerRetriesAndErrorHandler.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Retry } from '../../gen';
+type $$ComponentProps = {
+    optionTabSelected: 'error_handler' | 'retries' | string;
+    itemKind: 'script' | 'flow';
+    can_write: boolean;
+    errorHandlerSelected: 'custom' | 'slack' | 'teams';
+    error_handler_path: string | undefined;
+    error_handler_args: Record<string, any>;
+    retry: Retry | undefined;
+};
+declare const TriggerRetriesAndErrorHandler: import("svelte").Component<$$ComponentProps, {}, "retry" | "error_handler_path" | "error_handler_args" | "errorHandlerSelected">;
+type TriggerRetriesAndErrorHandler = ReturnType<typeof TriggerRetriesAndErrorHandler>;
+export default TriggerRetriesAndErrorHandler;