windmill-components 1.623.1 → 1.623.2

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -8,19 +8,15 @@ import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
 import SchemaForm from './SchemaForm.svelte';
 import { twMerge } from 'tailwind-merge';
-export let isOwner;
-export let workspaceId;
-export let job;
-export let light = false;
-let default_payload = {};
-let resumeUrl = undefined;
-let cancelUrl = undefined;
-let description = undefined;
-let hide_cancel = false;
-$: approvalStep = (job?.flow_status?.step ?? 1) - 1;
-let defaultValues = {};
-$: job && getDefaultArgs();
-let schema = {};
+import { untrack } from 'svelte';
+let { isOwner, workspaceId, job, light = false } = $props();
+let default_payload = $state({});
+let resumeUrl = $state(undefined);
+let cancelUrl = $state(undefined);
+let description = $state(undefined);
+let hide_cancel = $state(false);
+let defaultValues = $state({});
+let schema = $state({});
 let lastJobId = undefined;
 async function getDefaultArgs() {
     let jobId = job?.flow_status?.modules?.[approvalStep]?.job;
@@ -44,7 +40,9 @@ async function getDefaultArgs() {
     hide_cancel = job?.raw_flow?.modules?.[approvalStep]?.suspend?.hide_cancel ?? false;
     schema = mergeSchema(job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? {}, job_result?.enums ?? {});
 }
+let loading = $state(false);
 async function continu(approve) {
+    loading = true;
     if ((resumeUrl && approve) || (cancelUrl && !approve)) {
         let split = (approve ? resumeUrl : cancelUrl).split('/');
         let signatureUrl = split.pop() ?? '';
@@ -103,6 +101,10 @@ async function continu(approve) {
         }
     }
 }
+let approvalStep = $derived((job?.flow_status?.step ?? 1) - 1);
+$effect(() => {
+    job && untrack(() => getDefaultArgs());
+});
 </script>
 
 <div class="w-full h-full mt-2 text-xs text-primary">
@@ -118,7 +120,8 @@ async function continu(approve) {
 				{#if cancelUrl && !hide_cancel}
 					<div>
 						<Button
-							title="Cancel the flow"
+							title="Cancel the step"
+							{loading}
 							iconOnly
 							startIcon={{ icon: X }}
 							variant="default"
@@ -128,12 +131,13 @@ async function continu(approve) {
 					</div>
 				{/if}
 				<div>
-					<Button variant="accent" on:click={() => continu(true)}
-						>Resume <Tooltip class="text-white"
-							>Since you are an owner of this flow, you can send resume events without necessarily
-							knowing the resume id sent by the approval step</Tooltip
-						></Button
-					>
+					<Button variant="accent" on:click={() => continu(true)} {loading}>
+						Resume
+						<Tooltip class="text-white">
+							Since you are an owner of this flow, you can send resume events without necessarily
+							knowing the resume id sent by the approval step
+						</Tooltip>
+					</Button>
 				</div>
 
 				{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
@@ -146,9 +150,9 @@ async function continu(approve) {
 						<SchemaForm onlyMaskPassword bind:args={default_payload} {defaultValues} {schema} />
 					</div>
 				{/if}
-				<Tooltip
-					>The payload is optional, it is passed to the following step through the `resume` variable</Tooltip
-				>
+				<Tooltip>
+					The payload is optional, it is passed to the following step through the `resume` variable
+				</Tooltip>
 			</div>
 		{:else}
 			You cannot resume the flow yourself without receiving the resume secret since you are not an

package/package/components/FlowStatusWaitingForEvents.svelte.d.ts

@@ -1,24 +1,10 @@
 import { type Job } from '../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowStatusWaitingForEvents: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     isOwner: boolean;
     workspaceId: string | undefined;
     job: Job;
     light?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowStatusWaitingForEvents = InstanceType<typeof FlowStatusWaitingForEvents>;
+}
+declare const FlowStatusWaitingForEvents: import("svelte").Component<Props, {}, "">;
+type FlowStatusWaitingForEvents = ReturnType<typeof FlowStatusWaitingForEvents>;
 export default FlowStatusWaitingForEvents;

package/package/components/FlowViewer.svelte

@@ -1,19 +1,92 @@
-<script lang="ts">import { Tab, Tabs, TabContent } from './common';
+<script lang="ts">import { FlowService } from '../gen';
+import { Tab, Tabs, TabContent } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
+import { Loader2 } from 'lucide-svelte';
+import { orderedYamlStringify, cleanValueProperties, replaceFalseWithUndefined } from '../utils';
+import { workspaceStore } from '../stores';
+import { watch } from 'runed';
 import HighlightTheme from './HighlightTheme.svelte';
 import FlowViewerInner from './FlowViewerInner.svelte';
 import FlowInputViewer from './FlowInputViewer.svelte';
-let { flow, initialOpen = undefined, noSide = false, noGraph = false, tab = $bindable(noGraph ? 'schema' : 'ui'), noSummary = false, noGraphDownload = false } = $props();
+let { flow, initialOpen = undefined, noSide = false, noGraph = false, availableVersions = undefined, initTab = undefined, noSummary = false, noGraphDownload = false, selectedVersionId = undefined } = $props();
 let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
 }
+let previousVersionId = $state(undefined);
+let previousFlow = $state(undefined);
+let tab = $state(initTab ?? 'diff');
+let previousFlowCache = {};
+async function loadPreviousFlow(version) {
+    try {
+        if (previousFlowCache[version]) {
+            previousFlow = previousFlowCache[version];
+            return;
+        }
+        previousFlow = await FlowService.getFlowVersion({
+            workspace: $workspaceStore,
+            version
+        });
+        previousFlowCache[version] = previousFlow;
+    }
+    catch (e) {
+        console.error(e);
+        previousFlow = undefined;
+    }
+}
+// Load previous flow when previousVersionId changes
+$effect.pre(() => {
+    if (previousVersionId !== undefined) {
+        loadPreviousFlow(previousVersionId);
+    }
+    else {
+        previousFlow = undefined;
+    }
+});
+$effect.pre(() => {
+    if (initTab) {
+        return;
+    }
+    if (availableVersions && availableVersions.length > 0) {
+        tab = 'diff';
+    }
+    else {
+        if (noGraph) {
+            tab = 'schema';
+        }
+        else {
+            tab = 'ui';
+        }
+    }
+});
+// Auto-select first available version and validate current selection
+watch([() => availableVersions, () => selectedVersionId], () => {
+    if (availableVersions && availableVersions.length > 0) {
+        previousVersionId = availableVersions[0].id;
+    }
+    else {
+        previousVersionId = undefined;
+    }
+});
+let currentFlowYaml = $derived.by(() => {
+    const metadata = structuredClone(cleanValueProperties(replaceFalseWithUndefined(flow)));
+    return orderedYamlStringify(metadata);
+});
+let previousFlowYaml = $derived.by(() => {
+    if (!previousFlow)
+        return undefined;
+    const metadata = structuredClone(cleanValueProperties(replaceFalseWithUndefined(previousFlow)));
+    return orderedYamlStringify(metadata);
+});
 </script>
 
 <HighlightTheme />
 
 <Tabs bind:selected={tab}>
+	{#if availableVersions && availableVersions.length > 0}
+		<Tab value="diff" label="Diff" />
+	{/if}
 	{#if !noGraph}
 		<Tab value="ui" label="Graph" />
 	{/if}
@@ -21,6 +94,34 @@ if (initialOpen) {
 	<Tab value="schema" label="Input Schema" />
 
 	{#snippet content()}
+		{#if availableVersions && availableVersions.length > 0}
+			<TabContent value="diff">
+				<div class="flex flex-col gap-2 h-full">
+					<div class="flex flex-row items-center gap-2 py-2">
+						<div class="text-xs">Compare with:</div>
+						<select bind:value={previousVersionId} class="!text-xs !w-40">
+							{#each availableVersions as version (version.id)}
+								<option value={version.id} class="!text-xs">
+									{version.deployment_msg ?? `Version ${version.id}`}
+								</option>
+							{/each}
+						</select>
+					</div>
+
+					{#if previousFlowYaml}
+						<div class="h-[calc(100vh-150px)] min-h-[400px]">
+							{#await import('./FlowDiffViewer.svelte')}
+								<Loader2 class="animate-spin" />
+							{:then Module}
+								<Module.default beforeYaml={previousFlowYaml} afterYaml={currentFlowYaml} />
+							{/await}
+						</div>
+					{:else}
+						<Loader2 class="animate-spin" />
+					{/if}
+				</div>
+			</TabContent>
+		{/if}
 		<TabContent value="ui">
 			<div class="flow-root w-full pb-4">
 				{#if !noSummary}

package/package/components/FlowViewer.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { FlowValue } from '../gen';
+import { type FlowValue } from '../gen';
+type TabValue = 'ui' | 'raw' | 'schema' | 'diff';
 interface Props {
     flow: {
         summary: string;
@@ -9,10 +10,15 @@ interface Props {
     initialOpen?: number | undefined;
     noSide?: boolean;
     noGraph?: boolean;
-    tab?: 'ui' | 'raw' | 'schema';
+    initTab?: TabValue;
     noSummary?: boolean;
     noGraphDownload?: boolean;
+    availableVersions?: Array<{
+        id: number;
+        deployment_msg?: string;
+    }>;
+    selectedVersionId?: number;
 }
-declare const FlowViewer: import("svelte").Component<Props, {}, "tab">;
+declare const FlowViewer: import("svelte").Component<Props, {}, "">;
 type FlowViewer = ReturnType<typeof FlowViewer>;
 export default FlowViewer;

package/package/components/ForkWorkspaceBanner.svelte

@@ -77,11 +77,11 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 </script>
 
 {#if isFork}
-	<div class="w-full bg-blue-50 dark:bg-blue-900/20 border-b border-blue-200 dark:border-blue-800">
+	<div class="w-full bg-blue-50 dark:bg-blue-900 text-xs rounded-b-md max-w-7xl mx-auto">
 		<div class="px-4 py-2">
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<GitFork class="w-4 h-4 text-blue-600 dark:text-blue-400" />
+					<GitFork class="w-4 h-4 text-accent" />
 					<div class="text-sm">
 						<span class="font-medium text-blue-900 dark:text-blue-100">
 							Fork of <b>{parentWorkspaceData?.name}</b> ({parentWorkspaceId})
@@ -97,17 +97,17 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 					{:else if comparison}
 						<div class="flex items-center gap-4 text-xs">
 							{#if comparison.summary.total_diffs > 0}
-								<span>
+								<span class="text-blue-700 dark:text-blue-100">
 									{forkAheadBehindMessage(
 										comparison.summary.total_ahead,
-										comparison.summary.total_behind,
+										comparison.summary.total_behind
 									)}
-									<span class="font-semibold underline">{parentWorkspaceId}</span> over {comparison.summary
-										.total_diffs} items:
+									<span class="font-semibold underline">{parentWorkspaceId}</span> over {comparison
+										.summary.total_diffs} items:
 								</span>
 								<div class="flex items-center gap-2">
 									{#if comparison.summary.scripts_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.scripts_changed} script{comparison.summary
 												.scripts_changed !== 1
 												? 's'
@@ -115,21 +115,21 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 										</span>
 									{/if}
 									{#if comparison.summary.flows_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.flows_changed} flow{comparison.summary.flows_changed !== 1
 												? 's'
 												: ''}
 										</span>
 									{/if}
 									{#if comparison.summary.apps_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.apps_changed} app{comparison.summary.apps_changed !== 1
 												? 's'
 												: ''}
 										</span>
 									{/if}
 									{#if comparison.summary.resources_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.resources_changed} resource{comparison.summary
 												.resources_changed !== 1
 												? 's'
@@ -137,13 +137,29 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 										</span>
 									{/if}
 									{#if comparison.summary.variables_changed > 0}
-										<span class="text-blue-700 dark:text-blue-300">
+										<span class="text-blue-700 dark:text-blue-100">
 											{comparison.summary.variables_changed} variable{comparison.summary
 												.variables_changed !== 1
 												? 's'
 												: ''}
 										</span>
 									{/if}
+									{#if comparison.summary.resource_types_changed > 0}
+										<span class="text-blue-700 dark:text-blue-100">
+											{comparison.summary.resource_types_changed} resource type{comparison.summary
+												.resource_types_changed !== 1
+												? 's'
+												: ''}
+										</span>
+									{/if}
+									{#if comparison.summary.folders_changed > 0}
+										<span class="text-blue-700 dark:text-blue-100">
+											{comparison.summary.folders_changed} folder{comparison.summary
+												.folders_changed !== 1
+												? 's'
+												: ''}
+										</span>
+									{/if}
 								</div>
 
 								{#if comparison.summary.conflicts > 0}
@@ -158,9 +174,12 @@ function forkAheadBehindMessage(changesAhead, changesBehind) {
 									</div>
 								{/if}
 							{:else if comparison.skipped_comparison}
-								<span class="text-blue-600 dark:text-blue-400"> This fork was created before the addition of certain windmill features, and therefore the changes with its parent workspace cannot be displayed.</span>
+								<span class="text-blue-600 dark:text-blue-200">
+									This fork was created before the addition of certain windmill features, and
+									therefore the changes with its parent workspace cannot be displayed.</span
+								>
 							{:else}
-								<span class="text-blue-600 dark:text-blue-400"> Everything is up to date </span>
+								<span class="text-blue-600 dark:text-blue-200"> Everything is up to date </span>
 							{/if}
 						</div>
 					{/if}

package/package/components/GraphqlSchemaViewer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
-import { editor as meditor } from 'monaco-editor';
+import { editor as meditor, KeyMod, KeyCode } from 'monaco-editor';
 import { onDestroy, onMount } from 'svelte';
 let divEl = null;
 let editor;
@@ -14,6 +14,13 @@ async function loadMonaco() {
         lineNumbers: 'off',
         minimap: { enabled: false }
     });
+    // In VSCode webview (iframe), clipboard operations need to use execCommand
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+    }
 }
 onMount(async () => {
     if (BROWSER) {

package/package/components/HistoricInputs.svelte

@@ -2,14 +2,14 @@
 import { sendUserToast } from '../utils.js';
 import RunningJobSchemaPicker from './schema/RunningJobSchemaPicker.svelte';
 import { createEventDispatcher, onDestroy } from 'svelte';
-import JobsLoader from './runs/JobsLoader.svelte';
+import { useJobsLoader } from './runs/useJobsLoader.svelte';
 import { DataTable } from './table';
 import HistoricList from './HistoricList.svelte';
 import { Loader2 } from 'lucide-svelte';
-let { runnableId = undefined, runnableType = undefined, loading = $bindable(false), selected = $bindable(undefined), showAuthor = false, placement = 'top-end', limitPayloadSize = false, searchArgs = undefined } = $props();
+import { workspaceStore } from '../stores';
+let { runnableId = undefined, runnableType = undefined, selected = $bindable(undefined), showAuthor = false, placement = 'top-end', limitPayloadSize = false, searchArgs = undefined } = $props();
 let historicList = $state(undefined);
 const dispatch = createEventDispatcher();
-let jobs = $state([]);
 let hasMoreCurrentRuns = false;
 let page = $state(1);
 async function handleSelected(data) {
@@ -29,6 +29,9 @@ async function handleSelected(data) {
         });
     }
 }
+export function loading() {
+    return jobsLoader?.loading ?? false;
+}
 onDestroy(() => {
     resetSelected(false);
 });
@@ -66,40 +69,35 @@ function getJobKinds(runnableType) {
     }
     return '';
 }
+let jobsLoader = useJobsLoader(() => ({
+    filters: {
+        show_skipped: false,
+        path: runnableId,
+        success: 'running',
+        arg: searchArgs ? JSON.stringify(searchArgs) : '',
+        per_page: 5
+    },
+    jobKinds: getJobKinds(runnableType),
+    syncQueuedRunsCount: false,
+    refreshRate: 10000,
+    computeMinAndMax: undefined,
+    currentWorkspace: $workspaceStore ?? '',
+    skip: !runnableId
+}));
+let jobs = $derived(jobsLoader?.jobs ?? []);
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if runnableId}
-	<JobsLoader
-		bind:jobs
-		path={runnableId}
-		showSkipped={false}
-		jobKinds={getJobKinds(runnableType)}
-		user={null}
-		label={null}
-		folder={null}
-		concurrencyKey={null}
-		tag={null}
-		success="running"
-		argFilter={searchArgs ? JSON.stringify(searchArgs) : undefined}
-		bind:loading
-		syncQueuedRunsCount={false}
-		refreshRate={10000}
-		computeMinAndMax={undefined}
-		perPage={5}
-	/>
-{/if}
-
 <div class="h-full max-h-full min-h-0 w-full flex flex-col gap-2 relative">
 	<div class="grow-0" data-schema-picker>
 		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
-			{#if loading}
+			{#if jobsLoader?.loading}
 				<div class="text-primary absolute top-2 right-2">
 					<Loader2 class="animate-spin" size={14} />
 				</div>
 			{/if}
-			{#if jobs?.length > 0}
+			{#if jobs.length > 0}
 				<colgroup>
 					<col class="w-8" />
 					<col class="w-16" />
@@ -115,7 +113,7 @@ function getJobKinds(runnableType) {
 							on:select={(e) => handleSelected(e.detail)}
 						/>
 					{/each}
-					{#if jobs?.length == 5}
+					{#if jobs.length == 5}
 						<tr class="text-left text-primary text-xs w-full">
 							<td class="w-full px-2" colspan="3">limited to 5 runs</td>
 						</tr>

package/package/components/HistoricInputs.svelte.d.ts

@@ -2,7 +2,6 @@ import { type RunnableType } from '../gen/index.js';
 interface Props {
     runnableId?: string | undefined;
     runnableType?: RunnableType | undefined;
-    loading?: boolean;
     selected?: string | undefined;
     showAuthor?: boolean;
     placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end';
@@ -27,8 +26,9 @@ declare const HistoricInputs: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
+    loading: () => boolean;
     refresh: (clearCurrentRuns?: boolean) => void;
     resetSelected: (dispatchEvent?: boolean) => void;
-}, "selected" | "loading">;
+}, "selected">;
 type HistoricInputs = InstanceType<typeof HistoricInputs>;
 export default HistoricInputs;

package/package/components/InfiniteList.svelte

@@ -7,7 +7,7 @@ let { loading = $bindable(false), items = $bindable(undefined), selectedItemId =
     bgSelected: '',
     bgHover: '',
     class: ''
-}, neverShowLoader = false, columns, extra_row, children, empty } = $props();
+}, neverShowLoader = false, preventXOverflow = false, customRow, columns, extra_row, children, empty } = $props();
 const perPage = 20;
 let hasMore = $state(false);
 let page = 1;
@@ -124,34 +124,41 @@ export async function setDeleteItemFn(fn) {
 	{rounded}
 	{noBorder}
 	{neverShowLoader}
+	{preventXOverflow}
 >
 	{@render columns?.()}
 
 	<tbody class="h-full w-full">
-		<Row
-			on:click={() => dispatch('select', 'extraRow')}
-			class={twMerge(
-				extraRowClasses.class,
-				selectedItemId === 'extraRow' ? extraRowClasses.bgSelected : extraRowClasses.bgHover,
-				'cursor-pointer rounded-md'
-			)}
-			on:hover={(e) => (hovered = e.detail ? 'extraRow' : undefined)}
-		>
-			{@render extra_row?.({ hover: hovered === 'extraRow' })}
-		</Row>
-		{#each items ?? [] as item, index}
-			{@const hover = item.id === hovered}
+		{#if extra_row}
 			<Row
-				on:click={() => dispatch('select', item)}
+				on:click={() => dispatch('select', 'extraRow')}
 				class={twMerge(
-					selectedItemId === item.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
-					'cursor-pointer rounded-md',
-					item.isNew && index === 0 ? 'animate-slideIn' : 'group'
+					extraRowClasses.class,
+					selectedItemId === 'extraRow' ? extraRowClasses.bgSelected : extraRowClasses.bgHover,
+					'cursor-pointer rounded-md'
 				)}
-				on:hover={(e) => (hovered = e.detail ? item.id : undefined)}
+				on:hover={(e) => (hovered = e.detail ? 'extraRow' : undefined)}
 			>
-				{@render children?.({ item, hover })}
+				{@render extra_row?.({ hover: hovered === 'extraRow' })}
 			</Row>
+		{/if}
+		{#each items ?? [] as item, index}
+			{@const hover = item.id === hovered}
+			{#if customRow}
+				{@render customRow?.({ item, hover })}
+			{:else}
+				<Row
+					on:click={() => dispatch('select', item)}
+					class={twMerge(
+						selectedItemId === item.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
+						'cursor-pointer rounded-md',
+						item.isNew && index === 0 ? 'animate-slideIn' : 'group'
+					)}
+					on:hover={(e) => (hovered = e.detail ? item.id : undefined)}
+				>
+					{@render children?.({ item, hover })}
+				</Row>
+			{/if}
 		{/each}
 	</tbody>
 

package/package/components/InfiniteList.svelte.d.ts

@@ -12,6 +12,8 @@ interface Props {
         class: string;
     };
     neverShowLoader?: boolean;
+    preventXOverflow?: boolean;
+    customRow?: import('svelte').Snippet<[any]>;
     columns?: import('svelte').Snippet;
     extra_row?: import('svelte').Snippet<[any]>;
     children?: import('svelte').Snippet<[any]>;

package/package/components/InstanceSetting.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">import { isCloudHosted } from '../cloud';
 import { enterpriseLicense, isCriticalAlertsUIOpen } from '../stores';
 import { AlertCircle, BadgeCheck, BadgeX, Info } from 'lucide-svelte';
+import { OTEL_TRACING_PROXY_LANGUAGES } from './instanceSettings';
+import { LanguageIcon } from './common/languageIcons';
 import Tooltip from './Tooltip.svelte';
 import ObjectStoreConfigSettings from './ObjectStoreConfigSettings.svelte';
 import { sendUserToast } from '../toast';
@@ -20,6 +22,7 @@ import LoadingIcon from './apps/svelte-select/lib/LoadingIcon.svelte';
 import EEOnly from './EEOnly.svelte';
 import CriticalAlertChannels from './instanceSettings/CriticalAlertChannels.svelte';
 import SmtpSettings from './instanceSettings/SmtpSettings.svelte';
+import SecretBackendConfig from './instanceSettings/SecretBackendConfig.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Label from './Label.svelte';
 let { setting, version, values, loading = true, openSmtpSettings, oauths } = $props();
@@ -799,6 +802,39 @@ if (setting.fieldType == 'select_python') {
 						</div> -->
 						{/if}
 					</div>
+				{:else if setting.fieldType == 'otel_tracing_proxy'}
+					{@const tracingProxyVal = $values[setting.key] ?? { enabled: false, enabled_languages: [...OTEL_TRACING_PROXY_LANGUAGES] }}
+					<div class="flex flex-col gap-4">
+						<Toggle
+							id="otel_tracing_proxy_enabled"
+							checked={tracingProxyVal.enabled ?? false}
+							on:change={(e) => {
+								$values[setting.key] = { ...tracingProxyVal, enabled: e.detail }
+							}}
+							options={{ right: 'Enabled' }}
+						/>
+						{#if tracingProxyVal.enabled}
+							<div class="flex flex-wrap gap-2">
+								{#each OTEL_TRACING_PROXY_LANGUAGES as lang (lang)}
+									{@const isEnabled = (tracingProxyVal.enabled_languages ?? []).includes(lang)}
+									<button
+										class="flex flex-col items-center gap-1 p-2 rounded border transition-all {isEnabled
+											? 'border-blue-500 bg-blue-500/10'
+											: 'border-gray-300 opacity-40 hover:opacity-70'}"
+										onclick={() => {
+											const current = tracingProxyVal.enabled_languages ?? []
+											const newLangs = isEnabled
+												? current.filter((l) => l !== lang)
+												: [...current, lang]
+											$values[setting.key] = { ...tracingProxyVal, enabled_languages: newLangs }
+										}}
+									>
+										<LanguageIcon {lang} size={24} />
+									</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
 				{:else if setting.fieldType == 'object_store_config'}
 					<ObjectStoreConfigSettings bind:bucket_config={$values[setting.key]} />
 					<div class="mb-6"></div>
@@ -855,6 +891,8 @@ if (setting.fieldType == 'select_python') {
 					TODO
 				{:else if setting.fieldType == 'smtp_connect'}
 					<SmtpSettings {values} disabled={loading} />
+				{:else if setting.fieldType == 'secret_backend'}
+					<SecretBackendConfig {values} disabled={loading} />
 				{/if}
 				{#if hasError}
 					<span class="text-red-500 dark:text-red-400 text-sm">