windmill-components 1.655.2 → 1.665.1

package/package/components/settings/Trashbin.svelte

@@ -0,0 +1,248 @@
+<script lang="ts">import { Button, Skeleton } from '../common';
+import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
+import DataTable from '../table/DataTable.svelte';
+import Head from '../table/Head.svelte';
+import Cell from '../table/Cell.svelte';
+import Row from '../table/Row.svelte';
+import { workspaceStore } from '../../stores';
+import { sendUserToast } from '../../toast';
+import { TrashService } from '../../services/trashService';
+import { Trash2, RotateCcw, FileCode2, GitFork, AppWindow, Clock, Variable, Database, Zap, RefreshCw } from 'lucide-svelte';
+import { untrack } from 'svelte';
+let items = $state(undefined);
+let deleteConfirmedCallback = $state(undefined);
+let deleteOpen = $derived(Boolean(deleteConfirmedCallback));
+let emptyConfirmOpen = $state(false);
+function getKindIcon(kind) {
+    if (kind === 'script')
+        return FileCode2;
+    if (kind === 'flow')
+        return GitFork;
+    if (kind === 'app')
+        return AppWindow;
+    if (kind === 'schedule')
+        return Clock;
+    if (kind === 'variable')
+        return Variable;
+    if (kind === 'resource')
+        return Database;
+    if (kind.endsWith('_trigger'))
+        return Zap;
+    return Trash2;
+}
+function getKindLabel(kind) {
+    if (kind === 'script')
+        return 'Script';
+    if (kind === 'flow')
+        return 'Flow';
+    if (kind === 'app')
+        return 'App';
+    if (kind === 'schedule')
+        return 'Schedule';
+    if (kind === 'variable')
+        return 'Variable';
+    if (kind === 'resource')
+        return 'Resource';
+    if (kind.endsWith('_trigger')) {
+        return (kind
+            .replace('_trigger', '')
+            .replace(/_/g, ' ')
+            .replace(/\b\w/g, (c) => c.toUpperCase()) + ' Trigger');
+    }
+    return kind;
+}
+function timeAgo(dateStr) {
+    const now = new Date();
+    const date = new Date(dateStr);
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    if (diffMins < 1)
+        return 'just now';
+    if (diffMins < 60)
+        return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24)
+        return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    return `${diffDays}d ago`;
+}
+function timeRemaining(dateStr) {
+    const now = new Date();
+    const expires = new Date(dateStr);
+    const diffMs = expires.getTime() - now.getTime();
+    if (diffMs <= 0)
+        return 'expired';
+    const diffHours = Math.floor(diffMs / 3600000);
+    if (diffHours < 1)
+        return '< 1h remaining';
+    if (diffHours < 24)
+        return `${diffHours}h remaining`;
+    const diffDays = Math.floor(diffHours / 24);
+    const remainingHours = diffHours % 24;
+    if (remainingHours === 0)
+        return `${diffDays}d remaining`;
+    return `${diffDays}d ${remainingHours}h remaining`;
+}
+async function loadItems() {
+    items = await TrashService.listTrash({
+        workspace: $workspaceStore
+    });
+}
+async function restoreItem(item) {
+    try {
+        await TrashService.restoreTrashItem({
+            workspace: $workspaceStore,
+            id: item.id
+        });
+        sendUserToast(`Restored ${getKindLabel(item.item_kind)} '${item.item_path}'`);
+        loadItems();
+    }
+    catch (e) {
+        sendUserToast(`Failed to restore: ${e}`, true);
+    }
+}
+async function permanentlyDelete(item) {
+    try {
+        await TrashService.permanentlyDeleteTrashItem({
+            workspace: $workspaceStore,
+            id: item.id
+        });
+        sendUserToast(`Permanently deleted '${item.item_path}'`);
+        loadItems();
+    }
+    catch (e) {
+        sendUserToast(`Failed to delete: ${e}`, true);
+    }
+}
+async function emptyAll() {
+    try {
+        const result = await TrashService.emptyTrash({ workspace: $workspaceStore });
+        sendUserToast(result);
+        loadItems();
+    }
+    catch (e) {
+        sendUserToast(`Failed to empty trash: ${e}`, true);
+    }
+}
+$effect(() => {
+    $workspaceStore;
+    untrack(() => loadItems());
+});
+</script>
+
+<div class="flex justify-end mb-4 gap-2">
+	<Button startIcon={{ icon: RefreshCw }} variant="default" size="xs" onclick={loadItems}>
+		Refresh
+	</Button>
+	<Button
+		startIcon={{ icon: Trash2 }}
+		variant="default"
+		size="xs"
+		onclick={() => {
+			emptyConfirmOpen = true
+		}}
+		disabled={!items || items.length === 0}
+	>
+		Empty Trashbin
+	</Button>
+</div>
+
+{#if items === undefined}
+	<Skeleton layout={[20, 8, 8, 8]} />
+{:else if items.length === 0}
+	<div class="flex flex-col items-center justify-center py-12 text-tertiary">
+		<Trash2 size={40} class="mb-3 opacity-50" />
+		<p class="text-base">Trashbin is empty</p>
+		<p class="text-sm mt-1">No recently deleted items.</p>
+	</div>
+{:else}
+	<DataTable size="sm">
+		<Head>
+			<tr>
+				<Cell head first>Type</Cell>
+				<Cell head>Path</Cell>
+				<Cell head>Deleted by</Cell>
+				<Cell head>Deleted</Cell>
+				<Cell head>Expires</Cell>
+				<Cell head last>Actions</Cell>
+			</tr>
+		</Head>
+		{#each items as item (item.id)}
+			{@const Icon = getKindIcon(item.item_kind)}
+			<Row>
+				<Cell first>
+					<div class="flex items-center gap-2">
+						<Icon size={14} />
+						<span class="text-xs">{getKindLabel(item.item_kind)}</span>
+					</div>
+				</Cell>
+				<Cell>
+					<span class="font-mono text-xs">{item.item_path}</span>
+				</Cell>
+				<Cell>
+					<span class="text-xs">{item.deleted_by}</span>
+				</Cell>
+				<Cell>
+					<span class="text-xs text-tertiary">{timeAgo(item.deleted_at)}</span>
+				</Cell>
+				<Cell>
+					<span class="text-xs text-tertiary">{timeRemaining(item.expires_at)}</span>
+				</Cell>
+				<Cell last>
+					<div class="flex gap-1">
+						<Button
+							startIcon={{ icon: RotateCcw }}
+							variant="default"
+							size="xs2"
+							onclick={() => restoreItem(item)}
+						>
+							Restore
+						</Button>
+						<Button
+							startIcon={{ icon: Trash2 }}
+							variant="default"
+							size="xs2"
+							onclick={() => {
+								deleteConfirmedCallback = () => permanentlyDelete(item)
+							}}
+						>
+							Delete
+						</Button>
+					</div>
+				</Cell>
+			</Row>
+		{/each}
+	</DataTable>
+{/if}
+
+<ConfirmationModal
+	open={deleteOpen}
+	title="Permanently delete"
+	confirmationText="Delete forever"
+	onCanceled={() => {
+		deleteConfirmedCallback = undefined
+	}}
+	onConfirmed={() => {
+		if (deleteConfirmedCallback) {
+			deleteConfirmedCallback()
+		}
+		deleteConfirmedCallback = undefined
+	}}
+>
+	<p>This item will be permanently deleted. This action cannot be undone.</p>
+</ConfirmationModal>
+
+<ConfirmationModal
+	open={emptyConfirmOpen}
+	title="Empty trashbin"
+	confirmationText="Empty trashbin"
+	onCanceled={() => {
+		emptyConfirmOpen = false
+	}}
+	onConfirmed={() => {
+		emptyAll()
+		emptyConfirmOpen = false
+	}}
+>
+	<p>All items in the trashbin will be permanently deleted. This action cannot be undone.</p>
+</ConfirmationModal>

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

@@ -0,0 +1,3 @@
+declare const Trashbin: import("svelte").Component<Record<string, never>, {}, "">;
+type Trashbin = ReturnType<typeof Trashbin>;
+export default Trashbin;

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">import { run } from 'svelte/legacy';
 import { enterpriseLicense, userStore, workspaceStore, awarenessStore } from '../../stores';
-import { BROWSER } from 'esm-env';
 import { WebsocketProvider } from 'y-websocket';
 import * as Y from 'yjs';
 import { page } from '$app/stores';
 import { slide } from 'svelte/transition';
-const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws';
+import { buildWsUrl } from '../../wsUrl';
+import { signMultiplayerRequest } from '../debug';
 let awareness = $state(undefined);
 let wsProvider = undefined;
 let connected = $state(false);
-function connectWorkspace(workspace) {
+async function connectWorkspace(workspace) {
+    let token;
+    try {
+        token = await signMultiplayerRequest(workspace);
+    }
+    catch (e) {
+        console.error('Failed to sign multiplayer request:', e);
+        return;
+    }
     const ydoc = new Y.Doc();
-    wsProvider = new WebsocketProvider(`${wsProtocol}://${window.location.host}/ws_mp/`, workspace, ydoc);
+    wsProvider = new WebsocketProvider(buildWsUrl('/ws_mp/'), workspace, ydoc, {
+        params: { token }
+    });
     wsProvider.on('sync', (isSynced) => {
         connected = true;
     });

package/package/components/triggers/DeleteTriggerButton.svelte

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

package/package/components/triggers/PermissionedAsLine.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">import OnBehalfOfSelector, {} from '../OnBehalfOfSelector.svelte';
+import { userStore, workspaceStore } from '../../stores';
+import { AlertTriangle } from 'lucide-svelte';
+let { permissionedAs, onPermissionedAsChange } = $props();
+const canPreserve = $derived($userStore?.is_admin || ($userStore?.groups ?? []).includes('wm_deployers'));
+const myPermissionedAs = $derived($userStore?.username ? `u/${$userStore.username}` : undefined);
+let onBehalfOfChoice = $state(undefined);
+let customPermissionedAs = $state(undefined);
+const effectivePermissionedAs = $derived.by(() => {
+    if (onBehalfOfChoice === 'target')
+        return permissionedAs;
+    if (onBehalfOfChoice === 'custom' && customPermissionedAs)
+        return customPermissionedAs;
+    return myPermissionedAs;
+});
+const willChange = $derived(permissionedAs !== undefined &&
+    effectivePermissionedAs !== undefined &&
+    permissionedAs !== effectivePermissionedAs);
+function handleSelect(choice, details) {
+    onBehalfOfChoice = choice;
+    if (choice === 'target') {
+        customPermissionedAs = undefined;
+        onPermissionedAsChange(permissionedAs, true);
+    }
+    else if (choice === 'custom' && details) {
+        customPermissionedAs = details.permissionedAs;
+        onPermissionedAsChange(details.permissionedAs, true);
+    }
+    else {
+        customPermissionedAs = undefined;
+        onPermissionedAsChange(undefined, false);
+    }
+}
+</script>
+
+{#if permissionedAs && $workspaceStore}
+	<div class="flex items-center gap-1.5 text-2xs text-tertiary mb-4">
+		<span>Permissioned as</span>
+		{#if canPreserve}
+			<OnBehalfOfSelector
+				targetWorkspace={$workspaceStore}
+				targetValue={permissionedAs}
+				selected={onBehalfOfChoice}
+				onSelect={handleSelect}
+				kind="trigger"
+				{canPreserve}
+				customValue={customPermissionedAs}
+				isDeployment={false}
+			/>
+			{#if willChange}
+				<AlertTriangle class="w-3.5 h-3.5 text-yellow-500" />
+				<span class="text-yellow-600 dark:text-yellow-400"
+					>will change from <strong>{permissionedAs}</strong> on save</span
+				>
+			{/if}
+		{:else}
+			<strong class="text-secondary">{permissionedAs}</strong>
+			{#if willChange}
+				<AlertTriangle class="w-3.5 h-3.5 text-yellow-500" />
+				<span class="text-yellow-600 dark:text-yellow-400"
+					>will change to <strong>{effectivePermissionedAs}</strong> on save</span
+				>
+			{/if}
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,9 @@
+interface Props {
+    /** Current permissioned_as value from the trigger (e.g., 'u/admin') */
+    permissionedAs: string | undefined;
+    /** Callback when user changes the permissioned_as selection */
+    onPermissionedAsChange: (permissionedAs: string | undefined, preserve: boolean) => void;
+}
+declare const PermissionedAsLine: import("svelte").Component<Props, {}, "">;
+type PermissionedAsLine = ReturnType<typeof PermissionedAsLine>;
+export default PermissionedAsLine;

package/package/components/triggers/TriggerEditorToolbar.svelte

@@ -77,7 +77,7 @@ const canSave = $derived((permissions === 'write' && edit) || permissions === 'c
 					{trigger?.isDraft ? 'Deploy' : 'Update'}
 				</Button>
 				{#snippet text()}
-								<span >
+					<span>
 						{#if !isDeployed}
 							Deploy the runnable to enable trigger creation
 						{:else if cloudDisabled}
@@ -86,7 +86,7 @@ const canSave = $derived((permissions === 'write' && edit) || permissions === 'c
 							Enter a valid config to {trigger?.isDraft ? 'deploy' : 'update'} the trigger
 						{/if}
 					</span>
-							{/snippet}
+				{/snippet}
 			</Tooltip>
 		{/if}
 	</div>

package/package/components/triggers/TriggerTokens.svelte

@@ -9,9 +9,9 @@ let { isFlow, path, labelPrefix } = $props();
 const { triggersCount } = getContext('TriggerContext');
 let tokens = $state(undefined);
 export async function listTokens() {
-    tokens = (isFlow
+    tokens = isFlow
         ? await FlowService.listTokensOfFlow({ workspace: $workspaceStore, path })
-        : await ScriptService.listTokensOfScript({ workspace: $workspaceStore, path })).filter((x) => x.label && x.label.startsWith(labelPrefix + '-'));
+        : await ScriptService.listTokensOfScript({ workspace: $workspaceStore, path });
     if (labelPrefix == 'email') {
         $triggersCount = { ...($triggersCount ?? {}), default_email_count: tokens?.length };
     }
@@ -34,7 +34,7 @@ run(() => {
 	<Label label="Existing {capitalize(labelPrefix)} Tokens">
 		{#if tokens}
 			{#if tokens.length == 0}
-				<div class="text-xs text-secondary">No {labelPrefix} specific tokens found</div>
+				<div class="text-xs text-secondary">No tokens with matching scopes found</div>
 			{:else}
 				<div class="flex flex-col divide-y pt-2">
 					<div class="grid grid-cols-6 text-2xs items-center py-2">

package/package/components/triggers/email/EmailTriggerEditorInner.svelte

@@ -12,6 +12,7 @@ import { Loader2 } from 'lucide-svelte';
 import Label from '../../Label.svelte';
 import EmailTriggerEditorConfigSection from './EmailTriggerEditorConfigSection.svelte';
 import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte';
+import PermissionedAsLine from '../PermissionedAsLine.svelte';
 import { getHandlerType, handleConfigChange } from '../utils';
 import { untrack } from 'svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
@@ -50,6 +51,9 @@ let mode = $state('enabled');
 let drawer = $state(undefined);
 let initialConfig = undefined;
 let deploymentLoading = $state(false);
+let permissionedAs = $state(undefined);
+let selectedPermissionedAs = $state(undefined);
+let preservePermissionedAs = $state(false);
 let optionTabSelected = $state('error_handler');
 let errorHandlerSelected = $state('slack');
 let suspendedJobsModal = $state(null);
@@ -142,6 +146,9 @@ function loadTriggerConfig(cfg) {
     retry = cfg?.retry;
     errorHandlerSelected = getHandlerType(error_handler_path ?? '');
     mode = cfg?.mode ?? 'enabled';
+    permissionedAs = cfg?.permissioned_as;
+    selectedPermissionedAs = undefined;
+    preservePermissionedAs = false;
 }
 async function loadTrigger(defaultConfig) {
     if (defaultConfig) {
@@ -188,7 +195,9 @@ function getEmailTriggerConfig() {
         error_handler_path,
         error_handler_args,
         retry,
-        mode
+        mode,
+        permissioned_as: selectedPermissionedAs,
+        preserve_permissioned_as: preservePermissionedAs || undefined
     };
     return nCfg;
 }
@@ -250,6 +259,15 @@ $effect(() => {
 			<Loader2 class="animate-spin" />
 		{/if}
 	{:else}
+		{#if edit}
+			<PermissionedAsLine
+				{permissionedAs}
+				onPermissionedAsChange={(pa, preserve) => {
+					selectedPermissionedAs = pa
+					preservePermissionedAs = preserve
+				}}
+			/>
+		{/if}
 		<div class="flex flex-col gap-12">
 			{#if mode === 'suspended'}
 				<TriggerSuspendedJobsAlert {suspendedJobsModal} />

package/package/components/triggers/email/utils.js

@@ -15,7 +15,9 @@ export async function saveEmailTriggerFromCfg(initialPath, emailCfg, edit, works
         error_handler_path: emailCfg.error_handler_path,
         error_handler_args: emailCfg.error_handler_path ? emailCfg.error_handler_args : undefined,
         mode: emailCfg.mode,
-        retry: emailCfg.retry
+        retry: emailCfg.retry,
+        permissioned_as: emailCfg.permissioned_as,
+        preserve_permissioned_as: emailCfg.preserve_permissioned_as
     };
     try {
         if (edit) {

package/package/components/triggers/gcp/GcpTriggerEditorInner.svelte

@@ -13,6 +13,7 @@ import Required from '../../Required.svelte';
 import GcpTriggerEditorConfigSection from './GcpTriggerEditorConfigSection.svelte';
 import { untrack } from 'svelte';
 import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte';
+import PermissionedAsLine from '../PermissionedAsLine.svelte';
 import { saveGcpTriggerFromCfg } from './utils';
 import { getHandlerType, handleConfigChange } from '../utils';
 import { deepEqual } from 'fast-equals';
@@ -47,6 +48,9 @@ let delivery_config = $state(undefined);
 let subscription_mode = $state('create_update');
 let initialConfig = undefined;
 let deploymentLoading = $state(false);
+let permissionedAs = $state(undefined);
+let selectedPermissionedAs = $state(undefined);
+let preservePermissionedAs = $state(false);
 let base_endpoint = $derived(`${window.location.origin}${base}`);
 let auto_acknowledge_msg = $state(true);
 let ack_deadline = $state();
@@ -150,6 +154,9 @@ async function loadTriggerConfig(cfg) {
     auto_acknowledge_msg = cfg?.auto_acknowledge_msg ?? true;
     ack_deadline = cfg?.ack_deadline;
     errorHandlerSelected = getHandlerType(error_handler_path ?? '');
+    permissionedAs = cfg?.permissioned_as;
+    selectedPermissionedAs = undefined;
+    preservePermissionedAs = false;
 }
 async function updateTrigger() {
     deploymentLoading = true;
@@ -186,7 +193,9 @@ function getGcpConfig() {
         error_handler_args,
         retry,
         auto_acknowledge_msg,
-        ack_deadline
+        ack_deadline,
+        permissioned_as: selectedPermissionedAs,
+        preserve_permissioned_as: preservePermissionedAs || undefined
     };
 }
 function getGcpCaptureConfig() {
@@ -304,6 +313,15 @@ $effect(() => {
 			<p>Loading...</p>
 		</div>
 	{:else}
+		{#if edit}
+			<PermissionedAsLine
+				{permissionedAs}
+				onPermissionedAsChange={(pa, preserve) => {
+					selectedPermissionedAs = pa
+					preservePermissionedAs = preserve
+				}}
+			/>
+		{/if}
 		<div class="flex flex-col gap-5">
 			{#if mode === 'suspended'}
 				<TriggerSuspendedJobsAlert {suspendedJobsModal} />
@@ -389,9 +407,11 @@ $effect(() => {
 
 			<Section label="Advanced" collapsable>
 				{#snippet header()}
-					<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
-						{ name: 'Manual Ack', active: !auto_acknowledge_msg }
-					]} />
+					<TriggerAdvancedBadges
+						{error_handler_path}
+						{retry}
+						extraBadges={[{ name: 'Manual Ack', active: !auto_acknowledge_msg }]}
+					/>
 				{/snippet}
 				<div class="flex flex-col gap-6">
 					<div class="min-h-96">

package/package/components/triggers/gcp/utils.js

@@ -24,6 +24,8 @@ export async function saveGcpTriggerFromCfg(initialPath, cfg, edit, workspace, u
             is_flow: cfg.is_flow,
             auto_acknowledge_msg: cfg.auto_acknowledge_msg,
             ack_deadline: cfg.ack_deadline,
+            permissioned_as: cfg.permissioned_as,
+            preserve_permissioned_as: cfg.preserve_permissioned_as,
             ...errorHandlerAndRetries
         };
         if (edit) {

package/package/components/triggers/http/RouteEditorConfigSection.svelte

@@ -4,7 +4,7 @@ import Section from '../../Section.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { userStore, workspaceStore } from '../../../stores';
-import { HttpTriggerService } from '../../../gen';
+import { HttpTriggerService, SettingService } from '../../../gen';
 // import { page } from '$app/state'
 import { getHttpRoute } from './utils';
 import { isCloudHosted } from '../../../cloud';
@@ -64,6 +64,23 @@ $effect.pre(() => {
 });
 let userIsAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin);
 let userCanEditConfig = $derived(userIsAdmin || isDraftOnly); // User can edit config if they are admin or if the trigger is a draft which will not be saved
+let globalHttpWorkspacedRoute = $state(false);
+async function loadGlobalHttpWorkspacedRouteSetting() {
+    try {
+        const setting = await SettingService.getGlobal({ key: 'http_route_workspaced_route' });
+        globalHttpWorkspacedRoute = setting ?? false;
+    }
+    catch (error) {
+        globalHttpWorkspacedRoute = false;
+    }
+}
+loadGlobalHttpWorkspacedRouteSetting();
+$effect.pre(() => {
+    if (globalHttpWorkspacedRoute && !workspaced_route) {
+        workspaced_route = true;
+        dirtyRoutePath = true;
+    }
+});
 </script>
 
 <div>
@@ -130,13 +147,15 @@ let userCanEditConfig = $derived(userIsAdmin || isDraftOnly); // User can edit c
 					<Toggle
 						size="sm"
 						checked={workspaced_route}
-						disabled={!can_write || !userCanEditConfig}
+						disabled={!can_write || !userCanEditConfig || globalHttpWorkspacedRoute}
 						on:change={() => {
 							workspaced_route = !workspaced_route
 							dirtyRoutePath = true
 						}}
 						options={{
-							right: 'Prefix with workspace',
+							right: globalHttpWorkspacedRoute
+								? 'Prefix with workspace (enforced by instance setting)'
+								: 'Prefix with workspace',
 							rightTooltip:
 								'Prefixes the route with the workspace ID (e.g., {base_url}/api/r/{workspace_id}/{route}). Note: deploying the HTTP trigger to another workspace updates the route workspace prefix accordingly.',
 							rightDocumentationLink:

package/package/components/triggers/http/RouteEditorInner.svelte

@@ -30,6 +30,7 @@ import { HubFlow } from '../../../hub';
 import RouteBodyTransformerOption from './RouteBodyTransformerOption.svelte';
 import TestingBadge from '../testingBadge.svelte';
 import TriggerEditorToolbar from '../TriggerEditorToolbar.svelte';
+import PermissionedAsLine from '../PermissionedAsLine.svelte';
 import { getHandlerType, handleConfigChange } from '../utils';
 import autosize from '../../../autosize';
 import { untrack } from 'svelte';
@@ -87,6 +88,9 @@ let variableEditor = $state(undefined);
 let drawer = $state(undefined);
 let initialConfig = undefined;
 let deploymentLoading = $state(false);
+let permissionedAs = $state(undefined);
+let selectedPermissionedAs = $state(undefined);
+let preservePermissionedAs = $state(false);
 let optionTabSelected = $state('request_options');
 let errorHandlerSelected = $state('slack');
 let suspendedJobsModal = $state(null);
@@ -251,6 +255,9 @@ function loadTriggerConfig(cfg) {
     error_handler_args = cfg?.error_handler_args ?? {};
     retry = cfg?.retry;
     errorHandlerSelected = getHandlerType(error_handler_path ?? '');
+    permissionedAs = cfg?.permissioned_as;
+    selectedPermissionedAs = undefined;
+    preservePermissionedAs = false;
 }
 async function loadTrigger(defaultConfig) {
     if (defaultConfig) {
@@ -313,7 +320,9 @@ function getRouteConfig() {
         description: routeDescription,
         error_handler_path,
         error_handler_args,
-        retry
+        retry,
+        permissioned_as: selectedPermissionedAs,
+        preserve_permissioned_as: preservePermissionedAs || undefined
     };
     return nCfg;
 }
@@ -400,6 +409,15 @@ $effect(() => {
 			<Loader2 class="animate-spin" />
 		{/if}
 	{:else}
+		{#if edit}
+			<PermissionedAsLine
+				{permissionedAs}
+				onPermissionedAsChange={(pa, preserve) => {
+					selectedPermissionedAs = pa
+					preservePermissionedAs = preserve
+				}}
+			/>
+		{/if}
 		<div class="flex flex-col gap-8">
 			{#if mode === 'suspended'}
 				<TriggerSuspendedJobsAlert {suspendedJobsModal} />
@@ -616,11 +634,15 @@ $effect(() => {
 			{#if !is_static_website}
 				<Section label="Advanced" collapsable>
 					{#snippet header()}
-						<TriggerAdvancedBadges {error_handler_path} {retry} extraBadges={[
-							{ name: 'Async', active: request_type === 'async' },
-							{ name: 'SSE', active: request_type === 'sync_sse' },
-							{ name: 'Authentication', active: authentication_method !== 'none' }
-						]} />
+						<TriggerAdvancedBadges
+							{error_handler_path}
+							{retry}
+							extraBadges={[
+								{ name: 'Async', active: request_type === 'async' },
+								{ name: 'SSE', active: request_type === 'sync_sse' },
+								{ name: 'Authentication', active: authentication_method !== 'none' }
+							]}
+						/>
 					{/snippet}
 					<div class="min-h-96">
 						<Tabs bind:selected={optionTabSelected}>