windmill-components 1.511.1 → 1.522.0

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -7,18 +7,21 @@ import { base } from '../base';
 import { enterpriseLicense, workspaceStore } from '../stores';
 import MsTeamsIcon from './icons/MSTeamsIcon.svelte';
 import { emptySchema, emptyString, sendUserToast, tryEvery } from '../utils';
+import Description from './Description.svelte';
+import MultiSelect from './select/MultiSelect.svelte';
 import { FlowService, JobService, ScriptService, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
 import { hubBaseUrlStore } from '../stores';
 import { CheckCircle2, Loader2, RotateCw, XCircle, RefreshCcw } from 'lucide-svelte';
 import { hubPaths } from '../hub';
+import { isCloudHosted } from '../cloud';
 const slackRecoveryHandler = hubPaths.slackRecoveryHandler;
 const slackHandlerScriptPath = hubPaths.slackErrorHandler;
 const slackSuccessHandler = hubPaths.slackSuccessHandler;
 const teamsRecoveryHandler = hubPaths.teamsRecoveryHandler;
 const teamsHandlerScriptPath = hubPaths.teamsErrorHandler;
 const teamsSuccessHandler = hubPaths.teamsSuccessHandler;
-let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable(), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip } = $props();
+let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable('custom'), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip, } = $props();
 let customHandlerSchema = $state();
 let slackHandlerSchema = $state();
 let isFetching = $state(false);
@@ -27,6 +30,8 @@ let teams_team_name = $state(undefined);
 let workspaceConnectedToSlack = $state(undefined);
 let workspaceConnectedToTeams = $state(undefined);
 let connectionTestJob = $state();
+const EMAIL_RECIPIENTS_KEY = 'email_recipients';
+const CHANNEL_KEY = 'channel';
 async function loadSlackResources() {
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     if (!emptyString(settings.slack_name) && !emptyString(settings.slack_team_id)) {
@@ -166,6 +171,12 @@ function isTeamsHandler(scriptPath) {
         return scriptPath.startsWith('hub/') && scriptPath.endsWith('/schedule-success-handler-teams');
     }
 }
+function isEmailHandler(scriptPath) {
+    if (!scriptPath) {
+        return false;
+    }
+    return scriptPath.startsWith('hub/') && scriptPath.endsWith('/workspace-or-error-handler-email');
+}
 $effect(() => {
     if ($workspaceStore) {
         loadSlackResources();
@@ -181,21 +192,27 @@ $effect(() => {
     }
 });
 let lastHandlerSelected = $state(undefined);
-let channelCache = $state({
+let handlerCache = $state({
     slack: undefined,
-    teams: undefined
+    teams: undefined,
+    email: undefined
 });
 $effect(() => {
     if (lastHandlerSelected !== handlerSelected && lastHandlerSelected !== undefined) {
-        if (lastHandlerSelected === 'teams' || lastHandlerSelected === 'slack') {
-            channelCache[lastHandlerSelected] = handlerExtraArgs['channel'];
+        if (lastHandlerSelected != 'custom') {
+            const key = lastHandlerSelected === 'email' ? EMAIL_RECIPIENTS_KEY : CHANNEL_KEY;
+            handlerCache[lastHandlerSelected] = handlerExtraArgs[key];
         }
         if (handlerSelected === 'custom') {
-            handlerExtraArgs['channel'] = '';
+            handlerExtraArgs[CHANNEL_KEY] = '';
+            handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = [];
             handlerPath = undefined;
         }
+        else if (handlerSelected === 'email') {
+            handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = handlerCache[handlerSelected] ?? [];
+        }
         else {
-            handlerExtraArgs['channel'] = channelCache[handlerSelected] ?? '';
+            handlerExtraArgs[CHANNEL_KEY] = handlerCache[handlerSelected] ?? '';
         }
     }
     lastHandlerSelected = handlerSelected;
@@ -204,6 +221,7 @@ $effect(() => {
     handlerPath &&
         !isSlackHandler(handlerPath) &&
         !isTeamsHandler(handlerPath) &&
+        !isEmailHandler(handlerPath) &&
         loadHandlerScriptArgs(handlerPath, [
             'path',
             'workspace_id',
@@ -242,12 +260,18 @@ $effect(() => {
             'slack'
         ]).then((schema) => (slackHandlerSchema = schema));
 });
+$effect(() => {
+    if (handlerSelected === 'email') {
+        handlerPath = hubPaths.emailErrorHandler;
+    }
+});
 </script>
 
 <div>
 	<Tabs bind:selected={handlerSelected} class="mt-2 mb-4">
 		<Tab value="slack" disabled={!isEditable}>Slack</Tab>
 		<Tab value="teams" disabled={!isEditable}>Teams</Tab>
+		<Tab value="email" disabled={!isEditable}>Email</Tab>
 		<Tab value="custom" disabled={!isEditable}>
 			Custom
 			{@render customTabTooltip?.()}
@@ -274,8 +298,10 @@ $effect(() => {
 				size="xs"
 				href={customScriptTemplate}
 				disabled={!isEditable}
-				target="_blank">Create from template</Button
+				target="_blank"
 			>
+				Create from template
+			</Button>
 		{/if}
 	</div>
 	{#if showScriptHelpText}
@@ -503,4 +529,46 @@ $effect(() => {
 			{/if}
 		{/if}
 	{/if}
+{:else if handlerSelected === 'email'}
+	{#if isCloudHosted()}
+		<Alert type="info" title="Email notifications are not available in Cloud">
+			Email notifications for trigger failures are only available in self-hosted Windmill instances.
+		</Alert>
+	{:else}
+		<div class="flex flex-col gap-4 my-4">
+			<Description>
+				Configure email addresses to receive notifications when jobs fail. This feature requires
+				SMTP to be configured.
+			</Description>
+		</div>
+		<div class="flex flex-col gap-2 my-4">
+			<MultiSelect
+				items={[] as { label: string; value: string }[]}
+				bind:value={
+					() => handlerExtraArgs[EMAIL_RECIPIENTS_KEY] ?? [],
+					(recipients) => (handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = recipients)
+				}
+				placeholder="Enter email addresses..."
+				onCreateItem={(email) => {
+					const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+					if (!emailRegex.test(email)) {
+						sendUserToast('Invalid email format', true)
+						return
+					}
+					const currentArray = handlerExtraArgs[EMAIL_RECIPIENTS_KEY] ?? []
+					handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = [...currentArray, email]
+				}}
+				class="w-full"
+			/>
+			{#if handlerExtraArgs[EMAIL_RECIPIENTS_KEY]?.length > 0}
+				<span class="text-sm text-tertiary">
+					{handlerExtraArgs[EMAIL_RECIPIENTS_KEY]?.length} email{handlerExtraArgs[
+						EMAIL_RECIPIENTS_KEY
+					]?.length === 1
+						? ''
+						: 's'} configured
+				</span>
+			{/if}
+		</div>
+	{/if}
 {/if}

package/package/components/ErrorOrRecoveryHandler.svelte.d.ts

@@ -1,9 +1,10 @@
+import type { ErrorHandler } from '../gen/types.gen';
 interface Props {
     errorOrRecovery: 'error' | 'recovery' | 'success';
     isEditable: boolean;
     toggleText?: string;
     showScriptHelpText?: boolean;
-    handlerSelected: 'custom' | 'slack' | 'teams';
+    handlerSelected: ErrorHandler;
     handlerPath: string | undefined;
     handlerExtraArgs: Record<string, any>;
     customScriptTemplate: string;

package/package/components/ExploreAssetButton.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">export function assetCanBeExplored(asset, _resourceMetadata) {
-    return (asset.kind === 's3object' ||
+    return (asset.kind === 'ducklake' ||
+        asset.kind === 's3object' ||
         (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)));
 }
 </script>
@@ -12,12 +13,13 @@ import S3FilePicker from './S3FilePicker.svelte';
 import { userStore } from '../stores';
 import { isS3Uri } from '../utils';
 import { Database, File } from 'lucide-svelte';
-const { asset, _resourceMetadata, s3FilePicker, dbManagerDrawer, onClick, class: className = '', noText = false, buttonVariant = 'border', btnClasses = '' } = $props();
+import DucklakeIcon from './icons/DucklakeIcon.svelte';
+const { asset, _resourceMetadata, s3FilePicker, dbManagerDrawer, onClick, class: className = '', noText = false, buttonVariant = 'border', btnClasses = '', disabled = false } = $props();
 const assetUri = $derived(formatAsset(asset));
 </script>
 
 <Button
-	disabled={$userStore?.operator}
+	disabled={$userStore?.operator || disabled}
 	size="xs"
 	variant={buttonVariant}
 	spacingSize="xs2"
@@ -25,9 +27,15 @@ const assetUri = $derived(formatAsset(asset));
 	{btnClasses}
 	on:click={async () => {
 		if (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)) {
-			dbManagerDrawer?.openDrawer(_resourceMetadata.resource_type, asset.path)
+			dbManagerDrawer?.openDrawer({
+				type: 'database',
+				resourceType: _resourceMetadata.resource_type,
+				resourcePath: asset.path
+			})
 		} else if (asset.kind === 's3object' && isS3Uri(assetUri)) {
 			s3FilePicker?.open(assetUri)
+		} else if (asset.kind === 'ducklake') {
+			dbManagerDrawer?.openDrawer({ type: 'ducklake', ducklake: asset.path })
 		}
 		onClick?.()
 	}}
@@ -36,5 +44,7 @@ const assetUri = $derived(formatAsset(asset));
 		<span class:hidden={noText}>Explore</span> <File size={18} />
 	{:else if asset.kind === 'resource'}
 		<span class:hidden={noText}>Manage</span> <Database size={18} />
+	{:else if asset.kind === 'ducklake'}
+		<span class:hidden={noText}>Manage</span> <DucklakeIcon size={18} />
 	{/if}
 </Button>

package/package/components/ExploreAssetButton.svelte.d.ts

@@ -17,6 +17,7 @@ type $$ComponentProps = {
     noText?: boolean;
     buttonVariant?: ButtonType.Variant;
     btnClasses?: string;
+    disabled?: boolean;
 };
 declare const ExploreAssetButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type ExploreAssetButton = ReturnType<typeof ExploreAssetButton>;

package/package/components/FlowJobResult.svelte

@@ -7,7 +7,7 @@ import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { Drawer } from './common';
 import AllFlowLogs from './AllFlowLogs.svelte';
 import { untrack } from 'svelte';
-let { waitingForExecutor = false, result, logs = $bindable(), col = false, noBorder = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, refreshLog = false, durationStates, downloadLogs = true, tagLabel = undefined } = $props();
+let { waitingForExecutor = false, result, result_stream, logs = $bindable(), col = false, noBorder = false, loading, filename = undefined, jobId = undefined, tag = undefined, workspaceId = undefined, refreshLog = false, durationStates, downloadLogs = true, tagLabel = undefined } = $props();
 let lastJobId = $state(undefined);
 let drawer = $state(undefined);
 let iteration = 0;
@@ -62,8 +62,8 @@ $effect(() => {
 >
 	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>
-		{#if result !== undefined}
-			<DisplayResult {workspaceId} {jobId} {filename} {result} />
+		{#if result !== undefined || result_stream !== undefined}
+			<DisplayResult {workspaceId} {jobId} {filename} {result} {result_stream} />
 		{:else if loading}
 			<Loader2 class="animate-spin" />
 		{:else}

package/package/components/FlowJobResult.svelte.d.ts

@@ -3,6 +3,7 @@ import type { Writable } from 'svelte/store';
 interface Props {
     waitingForExecutor?: boolean;
     result: any;
+    result_stream?: string;
     logs: string | undefined;
     col?: boolean;
     noBorder?: boolean;

package/package/components/FlowPreviewContent.svelte

@@ -427,6 +427,14 @@ export function flowHasChanged() {
 										savedArgs = previewArgs.val
 									}}
 									bind:isValid
+									helperScript={flowStore.val.schema?.['x-windmill-dyn-select-code'] &&
+									flowStore.val.schema?.['x-windmill-dyn-select-lang']
+										? {
+												type: 'inline',
+												code: flowStore.val.schema['x-windmill-dyn-select-code'] as string,
+												lang: flowStore.val.schema['x-windmill-dyn-select-lang'] as ScriptLang
+											}
+										: undefined}
 								/>
 							</div>
 						{/key}
@@ -494,7 +502,7 @@ export function flowHasChanged() {
 					bind:rightColumnSelect
 					bind:isOwner
 					{render}
-					customUi={customUi}
+					{customUi}
 				/>
 			{:else}
 				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>

package/package/components/FlowPreviewResult.svelte

@@ -4,7 +4,7 @@ import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
 import FlowStatusWaitingForEvents from './FlowStatusWaitingForEvents.svelte';
 import { emptyString } from '../utils';
 import Badge from './common/badge/Badge.svelte';
-let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDurationStatuses, innerModules, suspendStatus, hideJobId, extra } = $props();
+let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDurationStatuses, innerModules, suspendStatus, hideJobId, extra, result_streams } = $props();
 </script>
 
 <FlowPreviewStatus {job} {hideJobId} {extra} />
@@ -76,6 +76,9 @@ let { job, workspaceId, isOwner, hideFlowResult, hideDownloadLogs, localDuration
 						<Loader2 class="animate-spin mt-0.5" /></span
 					></div
 				>
+				{#if mod.job && result_streams?.[mod.job]}
+					<pre class="text-xs text-primary">{result_streams?.[mod.job]}</pre>
+				{/if}
 			{/if}
 		{/each}
 	</div>

package/package/components/FlowPreviewResult.svelte.d.ts

@@ -15,6 +15,7 @@ interface Props {
     }>>;
     hideJobId?: boolean;
     extra?: import('svelte').Snippet;
+    result_streams?: Record<string, string | undefined>;
 }
 declare const FlowPreviewResult: import("svelte").Component<Props, {}, "">;
 type FlowPreviewResult = ReturnType<typeof FlowPreviewResult>;

package/package/components/FlowStatusViewerInner.svelte

@@ -27,7 +27,13 @@ import { createState } from '../svelte5Utils.svelte';
 import JobLoader from './JobLoader.svelte';
 const dispatch = createEventDispatcher();
 let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
-let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, globalRefreshes = $bindable({}), render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses, childFlow = false, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, parentRecursiveRefresh = $bindable({}), job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = writable({}), localDurationStatuses = writable({}), customUi } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, globalRefreshes = $bindable({}), render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses, childFlow = false, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, parentRecursiveRefresh = $bindable({}), job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = writable({}), localDurationStatuses = writable({}), customUi, onResultStreamUpdate = undefined } = $props();
+let resultStreams = $state({});
+if (onResultStreamUpdate == undefined) {
+    onResultStreamUpdate = ({ jobId, result_stream }) => {
+        resultStreams[jobId] = result_stream;
+    };
+}
 let recursiveRefresh = $state({});
 // Add support for the input args assets shown as an asset node
 const _flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
@@ -76,7 +82,9 @@ function updateModuleStates(moduleState, key, newValue, keepType) {
     if (newValue.selectedForloop != undefined &&
         state[key]?.selectedForloop != undefined &&
         newValue.selectedForloop != state[key].selectedForloop) {
-        if (newValue.type == 'InProgress' && state[key]?.type != 'InProgress') {
+        if (newValue.type == 'InProgress' &&
+            state[key]?.type != 'InProgress' &&
+            !(keepType && (state[key]?.type === 'Success' || state[key]?.type === 'Failure'))) {
             moduleState.update((state) => {
                 state[key].type = 'InProgress';
                 return state;
@@ -357,6 +365,9 @@ async function loadJobInProgress() {
                 jobLoader?.watchJob(jobId, {
                     change(newJob) {
                         setJob(newJob, true);
+                    },
+                    resultStreamUpdate({ id, result_stream }) {
+                        onResultStreamUpdate?.({ jobId: id, result_stream });
                     }
                 });
             }
@@ -685,7 +696,7 @@ $effect(() => {
 let selected = $derived(isListJob ? 'sequence' : 'graph');
 </script>
 
-<JobLoader noCode noLogs bind:this={jobLoader} />
+<JobLoader workspaceOverride={workspaceId} noCode noLogs bind:this={jobLoader} />
 {#if notAnonynmous}
 	<Alert type="error" title="Required Auth">
 		As a non logged in user, you can only see jobs ran by anonymous users like you
@@ -728,6 +739,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 					<DisplayResult
 						workspaceId={job?.workspace_id}
 						{jobId}
+						result_stream={job?.result_stream}
 						result={jobResults}
 						language={job?.language}
 					/>
@@ -745,6 +757,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 					{innerModules}
 					{suspendStatus}
 					{hideJobId}
+					result_streams={resultStreams}
 				/>
 			</div>
 		{/if}
@@ -836,6 +849,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 										storedListJobs[j] = job
 										innerJobLoaded(job, j, false, force)
 									}}
+									{onResultStreamUpdate}
 								/>
 							</div>
 						{/if}
@@ -911,6 +925,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 											{reducedPolling}
 											{workspaceId}
 											jobId={failedRetry}
+											{onResultStreamUpdate}
 										/>
 									</div>
 								{/each}
@@ -943,6 +958,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 											let { force, job } = e.detail
 											onJobsLoaded(mod, job, force)
 										}}
+										{onResultStreamUpdate}
 									/>
 								{:else if mod.flow_jobs?.length == 0 && mod.job == '00000000-0000-0000-0000-000000000000'}
 									<div class="text-secondary">no subflow (empty loop?)</div>
@@ -974,6 +990,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 											let { job, force } = e.detail
 											onJobsLoaded(mod, job, force)
 										}}
+										{onResultStreamUpdate}
 									/>
 								{/if}
 							{:else}
@@ -1197,6 +1214,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 											waitingForExecutor={node.type == 'WaitingForExecutor'}
 											refreshLog={node.type == 'InProgress'}
 											col
+											result_stream={resultStreams[node.job_id ?? '']}
 											result={node.result}
 											tag={node.tag}
 											logs={node.logs}

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -31,10 +31,16 @@ interface Props {
     subflowParentsDurationStatuses?: Writable<Record<string, DurationStatus>>[];
     isForloopSelected?: boolean;
     parentRecursiveRefresh?: Record<string, (clear: any, root: any) => Promise<void>>;
-    job?: Job | undefined;
+    job?: (Job & {
+        result_stream?: string;
+    }) | undefined;
     rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states';
     localModuleStates?: Writable<Record<string, GraphModuleState>>;
     localDurationStatuses?: Writable<Record<string, DurationStatus>>;
+    onResultStreamUpdate?: ({ jobId, result_stream }: {
+        jobId: string;
+        result_stream?: string;
+    }) => void;
     customUi?: {
         tagLabel?: string | undefined;
     };

package/package/components/FolderEditor.svelte

@@ -250,7 +250,7 @@ run(() => {
 										<div>
 											<ToggleButtonGroup
 												disabled={owner_name == 'u/' + $userStore?.username &&
-													!$userStore?.is_admin}
+													!($userStore?.is_admin || $userStore?.is_super_admin)}
 												selected={role}
 												on:selected={async (e) => {
 													const role = e.detail

package/package/components/GitDiffPreview.svelte

@@ -1,25 +1,21 @@
-<script lang="ts">"use strict";
-let { previewResult } = $props();
+<script lang="ts">let { previewResult } = $props();
+let added = $derived(previewResult?.changes?.filter(c => c.type === 'added').map(c => c.path) || []);
+let deleted = $derived(previewResult?.changes?.filter(c => c.type === 'deleted').map(c => c.path) || []);
+let edited = $derived(previewResult?.changes?.filter(c => c.type === 'edited').map(c => c.path) || []);
+export {};
 </script>
 
 <div class="border rounded p-2 text-xs max-h-40 overflow-y-auto bg-surface-secondary">
 	<div class="font-semibold text-[11px] mb-1 text-tertiary">Preview of changes:</div>
-	{#if !previewResult?.added?.length && !previewResult?.deleted?.length && !previewResult?.modified?.length && !previewResult?.yamlModified}
+
+	{#if !added.length && !deleted.length && !edited.length}
 		<div class="mt-2 text-tertiary">No changes found! The workspace is up to date.</div>
 	{:else}
-		{#if previewResult?.yamlModified}
-			<div class="mt-2">
-				<div class="text-yellow-600">Modified:</div>
-				<ul class="list-disc list-inside">
-					<li>wmill.yaml (Git sync settings)</li>
-				</ul>
-			</div>
-		{/if}
-		{#if previewResult?.added?.length}
+		{#if added.length}
 			<div class="mt-2">
 				<div class="text-green-600">Added:</div>
 				<ul class="list-disc list-inside">
-					{#each previewResult.added as file}
+					{#each added as file}
 						<li>
 							{file}{!file.includes('.') ? ' (dir)' : ''}
 						</li>
@@ -27,11 +23,11 @@ let { previewResult } = $props();
 				</ul>
 			</div>
 		{/if}
-		{#if previewResult?.deleted?.length}
+		{#if deleted.length}
 			<div class="mt-2">
 				<div class="text-red-600">Deleted:</div>
 				<ul class="list-disc list-inside">
-					{#each previewResult.deleted as file}
+					{#each deleted as file}
 						<li>
 							{file}{!file.includes('.') ? ' (dir)' : ''}
 						</li>
@@ -39,11 +35,11 @@ let { previewResult } = $props();
 				</ul>
 			</div>
 		{/if}
-		{#if previewResult?.modified?.length}
+		{#if edited.length}
 			<div class="mt-2">
-				<div class="text-yellow-600">Modified:</div>
+				<div class="text-yellow-600">Edited:</div>
 				<ul class="list-disc list-inside">
-					{#each previewResult.modified as file}
+					{#each edited as file}
 						<li>
 							{file}{!file.includes('.') ? ' (dir)' : ''}
 						</li>

package/package/components/GitDiffPreview.svelte.d.ts

@@ -1,12 +1,6 @@
-type DiffResult = {
-    added: string[];
-    deleted: string[];
-    modified: string[];
-    repoWmillYaml?: string;
-    yamlModified?: boolean;
-};
+import type { SyncResponse } from '../git-sync';
 type $$ComponentProps = {
-    previewResult: DiffResult | undefined;
+    previewResult: SyncResponse | undefined;
 };
 declare const GitDiffPreview: import("svelte").Component<$$ComponentProps, {}, "">;
 type GitDiffPreview = ReturnType<typeof GitDiffPreview>;

package/package/components/GitHubAppIntegration.svelte

@@ -12,7 +12,9 @@ let githubAppPopover = $state(null);
 let githubInstallationsNotInWorkspace = $derived(githubState.githubInstallations
     .filter((installation) => !githubState.workspaceGithubInstallations.some((workspaceInstallation) => workspaceInstallation.installation_id === installation.installation_id))
     .filter((installation, index, array) => array.findIndex((item) => item.installation_id === installation.installation_id) === index));
-let showGitHubApp = $derived(resourceType === 'git_repository' && $workspaceStore && $userStore?.is_admin);
+let showGitHubApp = $derived(resourceType === 'git_repository' &&
+    $workspaceStore &&
+    ($userStore?.is_admin || $userStore?.is_super_admin));
 // Load GitHub installations when conditions are met
 $effect(() => {
     if (showGitHubApp && $enterpriseLicense && $workspaceStore) {

package/package/components/IdEditorInput.svelte

@@ -1,20 +1,13 @@
-<script lang="ts">import { ArrowRight } from 'lucide-svelte';
+<script lang="ts">import { stopPropagation, createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+import { ArrowRight } from 'lucide-svelte';
 import { Button } from './common';
-import { createEventDispatcher } from 'svelte';
 import { forbiddenIds } from './flows/idUtils';
 import { slide } from 'svelte/transition';
-export let initialId;
-export let reservedIds = [];
-export let label = 'Component ID';
-export let value = initialId;
-export let buttonText = '';
-export let btnClasses = '!p-1 !w-[34px] !ml-1';
-export let acceptUnderScores = false;
-let error = '';
-const dispatch = createEventDispatcher();
+let { initialId, reservedIds = [], reservedPrefixes = [], label = 'Component ID', value = $bindable(initialId), buttonText = '', btnClasses = '!p-1 !w-[34px] !ml-1', acceptUnderScores = false, onSave, onClose } = $props();
+let error = $state('');
 const regex = acceptUnderScores ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/;
-$: validateId(value, reservedIds);
-function validateId(id, reservedIds) {
+function validateId(id, reservedIds, reservedPrefixes) {
     if (id == initialId) {
         error = '';
         return;
@@ -25,6 +18,9 @@ function validateId(id, reservedIds) {
     else if (forbiddenIds.includes(value)) {
         error = 'This ID is reserved';
     }
+    else if (reservedPrefixes.some((prefix) => value.startsWith(prefix))) {
+        error = 'This ID uses a reserved prefix';
+    }
     else if (reservedIds.some((rid) => rid === value)) {
         error = 'This ID is already in use';
     }
@@ -32,8 +28,13 @@ function validateId(id, reservedIds) {
         error = '';
     }
 }
-let inputDiv = undefined;
-$: inputDiv?.focus();
+let inputDiv = $state(undefined);
+$effect(() => {
+    validateId(value, reservedIds, reservedPrefixes);
+});
+$effect(() => {
+    inputDiv?.focus();
+});
 </script>
 
 <label class="block text-primary">
@@ -46,15 +47,17 @@ $: inputDiv?.focus();
 			type="text"
 			bind:value
 			class="!w-auto grow"
-			on:click|stopPropagation={() => {}}
-			on:keydown|stopPropagation={({ key }) => {
+			onclick={stopPropagation(() => {})}
+			onkeydown={(e) => {
+				e.stopPropagation()
+				let key = e.key
 				if (key === 'Enter' && error === '' && value !== initialId) {
-					dispatch('save', value)
+					onSave({ oldId: initialId, newId: value })
 				} else if (key == 'Escape') {
-					dispatch('close')
+					onClose?.()
 				}
 			}}
-			on:keypress|stopPropagation
+			onkeypress={stopPropagation(bubble('keypress'))}
 		/>
 		<Button
 			size="xs"
@@ -63,8 +66,8 @@ $: inputDiv?.focus();
 			{btnClasses}
 			aria-label="Save ID"
 			disabled={error != '' || value === initialId}
-			on:click={() => {
-				dispatch('save', value)
+			onclick={() => {
+				onSave({ oldId: initialId, newId: value })
 			}}
 		>
 			{buttonText}<ArrowRight size={18} />