windmill-components 1.623.1 → 1.642.0

package/package/components/InstanceSettings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { scimSamlSetting, settings, settingsKeys } from './instanceSettings';
-import { Button, Tab, TabContent, Tabs } from './common';
+import { Alert, Button, Tab, TabContent, Tabs } from './common';
 import { SettingService, SettingsService } from '../gen';
 import { sendUserToast } from '../toast';
 import { deepEqual } from 'fast-equals';
@@ -10,16 +10,27 @@ import { setLicense } from '../enterpriseUtils';
 import AuthSettings from './AuthSettings.svelte';
 import InstanceSetting from './InstanceSetting.svelte';
 import { writable } from 'svelte/store';
-import { ExternalLink } from 'lucide-svelte';
-let { tab = $bindable('Core'), hideTabs = false, hideSave = false, closeDrawer = () => { } } = $props();
+import { ExternalLink, Loader2 } from 'lucide-svelte';
+import YAML from 'yaml';
+import Toggle from './Toggle.svelte';
+import SettingsFooter from './workspaceSettings/SettingsFooter.svelte';
+import SettingsPageHeader from './settings/SettingsPageHeader.svelte';
+let { tab = $bindable('Core'), hideTabs = false, closeDrawer = () => { }, authSubTab = $bindable('sso'), onNavigateToTab, quickSetup = false, yamlMode = $bindable(false), hasUnsavedChanges = $bindable(false) } = $props();
 let values = writable({});
-let initialOauths = {};
-let initialRequirePreexistingUserForOauth = false;
+let initialOauths = $state({});
+let initialRequirePreexistingUserForOauth = $state(false);
 let requirePreexistingUserForOauth = $state(false);
-let initialValues = {};
+let initialValues = $state({});
+let baseUrlIsFallback = $state(false);
 let snowflakeAccountIdentifier = $state('');
 let version = $state('');
 let loading = $state(true);
+export function getVersion() {
+    return version;
+}
+export function getLicenseKey() {
+    return $values?.['license_key'] ?? '';
+}
 loadSettings();
 loadVersion();
 const dispatch = createEventDispatcher();
@@ -27,41 +38,51 @@ async function loadVersion() {
     version = await SettingsService.backendVersion();
 }
 let oauths = $state({});
-async function loadSettings() {
-    loading = true;
-    async function getValue(key, storage) {
-        if (storage == 'setting') {
-            return SettingService.getGlobal({ key });
+/** Ensure object/array-typed settings have a non-null default for the form UI */
+const formDefaults = {
+    smtp_settings: {},
+    otel: {},
+    indexer_settings: {},
+    critical_error_channels: []
+};
+function applyFormDefaults(vals) {
+    for (const [key, defaultVal] of Object.entries(formDefaults)) {
+        if (vals[key] == undefined) {
+            vals[key] =
+                typeof defaultVal === 'object' ? JSON.parse(JSON.stringify(defaultVal)) : defaultVal;
         }
     }
-    initialOauths = (await SettingService.getGlobal({ key: 'oauths' })) ?? {};
-    requirePreexistingUserForOauth =
-        (await SettingService.getGlobal({ key: 'require_preexisting_user_for_oauth' })) ??
-            false;
+}
+async function loadSettings() {
+    loading = true;
+    // Bulk-load all settings in a single API call
+    const config = await SettingService.getInstanceConfig();
+    const gs = (config.global_settings ?? {});
+    initialOauths = gs['oauths'] ?? {};
+    requirePreexistingUserForOauth = gs['require_preexisting_user_for_oauth'] ?? false;
     initialRequirePreexistingUserForOauth = requirePreexistingUserForOauth;
     oauths = JSON.parse(JSON.stringify(initialOauths));
-    initialValues = Object.fromEntries((await Promise.all([...Object.values(settings), scimSamlSetting].map(async (y) => await Promise.all(y.map(async (x) => [x.key, await getValue(x.key, x.storage)]))))).flat());
-    let nvalues = JSON.parse(JSON.stringify(initialValues));
-    if (nvalues['base_url'] == undefined) {
-        nvalues['base_url'] = window.location.origin;
-    }
+    let nvalues = { ...gs };
+    baseUrlIsFallback = !nvalues['base_url'];
     if (nvalues['retention_period_secs'] == undefined) {
         nvalues['retention_period_secs'] = 60 * 60 * 24 * 30;
     }
-    if (nvalues['base_url'] == undefined) {
-        nvalues['base_url'] = 'http://localhost';
-    }
-    if (nvalues['smtp_settings'] == undefined) {
-        nvalues['smtp_settings'] = {};
-    }
-    if (nvalues['otel'] == undefined) {
-        nvalues['otel'] = {};
-    }
-    if (nvalues['indexer_settings'] == undefined) {
-        nvalues['indexer_settings'] = {};
+    applyFormDefaults(nvalues);
+    // Apply select/select_python defaults so initialValues matches what InstanceSetting's $effect does
+    for (const category of settingsKeys) {
+        for (const s of settings[category]) {
+            if ((s.fieldType === 'select' || s.fieldType === 'select_python') &&
+                nvalues[s.key] == undefined &&
+                s.defaultValue) {
+                nvalues[s.key] = s.defaultValue();
+            }
+        }
     }
-    if (nvalues['critical_error_channels'] == undefined) {
-        nvalues['critical_error_channels'] = [];
+    // Snapshot initialValues before applying the base_url fallback so that
+    // the dirty-check detects the unsaved default and enables the Save button.
+    initialValues = JSON.parse(JSON.stringify(nvalues));
+    if (baseUrlIsFallback) {
+        nvalues['base_url'] = window.location.origin;
     }
     $values = nvalues;
     loading = false;
@@ -72,6 +93,11 @@ async function loadSettings() {
     }
 }
 export async function saveSettings() {
+    if (yamlMode) {
+        if (!syncYamlToForm()) {
+            return;
+        }
+    }
     if (oauths?.snowflake_oauth &&
         oauths?.snowflake_oauth?.connect_config?.extra_params?.account_identifier !==
             snowflakeAccountIdentifier) {
@@ -99,43 +125,37 @@ export async function saveSettings() {
         if ($values['license_key'] && typeof $values['license_key'] === 'string') {
             $values['license_key'] = $values['license_key'].trim();
         }
-        const allSettings = [...Object.values(settings), scimSamlSetting].flatMap((x) => Object.entries(x));
+        // Check which settings require a page reload
+        const allSettings = [...Object.values(settings), scimSamlSetting].flat();
         let licenseKeySet = false;
-        await Promise.all(allSettings
-            .filter((x) => {
-            return (x[1].storage == 'setting' &&
-                !deepEqual(initialValues?.[x[1].key], $values?.[x[1].key]) &&
-                ($values?.[x[1].key] != '' ||
-                    initialValues?.[x[1].key] != undefined ||
-                    initialValues?.[x[1].key] != null));
-        })
-            .map(async ([_, x]) => {
-            if (x.key == 'license_key') {
-                licenseKeySet = true;
-            }
-            if (x.requiresReloadOnChange) {
-                shouldReloadPage = true;
+        for (const s of allSettings) {
+            if (s.storage === 'setting' && !deepEqual(initialValues?.[s.key], $values?.[s.key])) {
+                if (s.key === 'license_key') {
+                    licenseKeySet = true;
+                }
+                if (s.requiresReloadOnChange) {
+                    shouldReloadPage = true;
+                }
             }
-            return await SettingService.setGlobal({
-                key: x.key,
-                requestBody: { value: $values?.[x.key] }
-            });
-        }));
-        initialValues = JSON.parse(JSON.stringify($values));
+        }
+        // Build the full global_settings object for the bulk PUT
+        const globalSettings = { ...$values };
+        // Include oauths and require_preexisting_user_for_oauth
         if (!deepEqual(initialOauths, oauths)) {
-            await SettingService.setGlobal({
-                key: 'oauths',
-                requestBody: {
-                    value: oauths
-                }
-            });
-            initialOauths = JSON.parse(JSON.stringify(oauths));
+            globalSettings['oauths'] = oauths;
         }
         if (initialRequirePreexistingUserForOauth !== requirePreexistingUserForOauth) {
-            await SettingService.setGlobal({
-                key: 'require_preexisting_user_for_oauth',
-                requestBody: { value: requirePreexistingUserForOauth }
-            });
+            globalSettings['require_preexisting_user_for_oauth'] = requirePreexistingUserForOauth;
+        }
+        await SettingService.setInstanceConfig({
+            requestBody: { global_settings: globalSettings }
+        });
+        initialValues = JSON.parse(JSON.stringify($values));
+        initialOauths = JSON.parse(JSON.stringify(oauths));
+        initialRequirePreexistingUserForOauth = requirePreexistingUserForOauth;
+        baseUrlIsFallback = false;
+        if (yamlMode) {
+            yamlCodeInitial = yamlCode;
         }
         if (licenseKeySet) {
             setLicense();
@@ -181,6 +201,29 @@ async function sendStats() {
         sendingStats = false;
     }
 }
+let downloadingStats = $state(false);
+async function downloadStats() {
+    try {
+        downloadingStats = true;
+        const encryptedData = await SettingService.getStats();
+        const blob = new Blob([encryptedData], { type: 'application/octet-stream' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `windmill-telemetry-${new Date().toISOString().split('T')[0]}.enc`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        sendUserToast('Telemetry data downloaded');
+    }
+    catch (err) {
+        throw err;
+    }
+    finally {
+        downloadingStats = false;
+    }
+}
 function isValidTeamsChannel(value) {
     return (typeof value === 'object' &&
         value !== null &&
@@ -194,14 +237,505 @@ function isValidTeamsChannel(value) {
         value.channel_name.trim() !== '');
 }
 function openSmtpSettings() {
-    tab = 'SMTP';
+    if (onNavigateToTab) {
+        onNavigateToTab('SMTP');
+    }
+    else {
+        tab = 'SMTP';
+    }
+}
+// --- Dirty state tracking (YAML-based) ---
+function stripEmpty(obj) {
+    return Object.fromEntries(Object.entries(obj)
+        .filter(([_, v]) => v !== undefined && v !== '')
+        .map(([k, v]) => v != null && typeof v === 'object' && !Array.isArray(v) ? [k, stripEmpty(v)] : [k, v]));
+}
+function getSettingsForCategory(category) {
+    if (category === 'Auth/OAuth/SAML') {
+        return scimSamlSetting;
+    }
+    const base = settings[category] ?? [];
+    // In quick setup, reorder Core: base settings (without license_key), then extras from Jobs
+    if (quickSetup && category === 'Core') {
+        const licenseKey = base.find((s) => s.key === 'license_key');
+        const baseWithout = base.filter((s) => s.key !== 'license_key');
+        const jobSettings = settings['Jobs'] ?? [];
+        const jobIsolation = jobSettings.find((s) => s.key === 'job_isolation');
+        const retentionPeriod = jobSettings.find((s) => s.key === 'retention_period_secs');
+        const objectStorage = settings['Object Storage']?.find((s) => s.key === 'object_store_cache_config');
+        return [
+            ...baseWithout,
+            ...(jobIsolation ? [jobIsolation] : []),
+            ...(licenseKey ? [licenseKey] : []),
+            ...(retentionPeriod ? [retentionPeriod] : []),
+            ...(objectStorage ? [objectStorage] : [])
+        ];
+    }
+    return base;
+}
+function normalizeValue(value, key) {
+    if (value == null)
+        return undefined;
+    if (value === false)
+        return undefined;
+    if (typeof value === 'string' && value.trim() === '')
+        return undefined;
+    if (Array.isArray(value) && value.length === 0)
+        return undefined;
+    if (typeof value === 'object' && !Array.isArray(value)) {
+        // Recursively normalize: if all values in the object normalize to undefined,
+        // the object itself is effectively empty (e.g. {smtp_tls_implicit: false} ≡ {})
+        const hasNonEmpty = Object.values(value).some((v) => normalizeValue(v) !== undefined);
+        if (!hasNonEmpty)
+            return undefined;
+    }
+    // Key-specific defaults: these values are equivalent to "not set"
+    if (key === 'secret_backend') {
+        if (typeof value === 'object' &&
+            value?.type === 'Database' &&
+            Object.keys(value).length === 1) {
+            return undefined;
+        }
+    }
+    if (key === 'automate_username_creation' && value === true) {
+        return undefined;
+    }
+    if (key === 'critical_alerts_on_db_oversize' && typeof value === 'object') {
+        if (!value.enabled && (!value.value || value.value === 0)) {
+            return undefined;
+        }
+    }
+    return value;
+}
+function buildCategoryYaml(category, vals, oauthsObj, reqPreexisting) {
+    const categorySettings = getSettingsForCategory(category);
+    const obj = {};
+    for (const s of categorySettings) {
+        const normalized = normalizeValue(vals[s.key], s.key);
+        if (normalized !== undefined) {
+            obj[s.key] = vals[s.key];
+        }
+    }
+    if (category === 'Auth/OAuth/SAML') {
+        if (Object.keys(stripEmpty(oauthsObj)).length > 0) {
+            obj['oauths'] = oauthsObj;
+        }
+        if (reqPreexisting) {
+            obj['require_preexisting_user_for_oauth'] = reqPreexisting;
+        }
+    }
+    return YAML.stringify(obj);
+}
+let dirtyCategories = $derived.by(() => {
+    const result = {};
+    for (const category of settingsKeys) {
+        const initialYaml = buildCategoryYaml(category, initialValues, initialOauths, initialRequirePreexistingUserForOauth);
+        const currentYaml = buildCategoryYaml(category, $values, oauths, requirePreexistingUserForOauth);
+        result[category] = initialYaml !== currentYaml;
+    }
+    return result;
+});
+let invalidCategories = $derived.by(() => {
+    const currentValues = $values;
+    const result = {};
+    for (const category of settingsKeys) {
+        const categorySettings = getSettingsForCategory(category);
+        result[category] = categorySettings.some((s) => {
+            if (s.isValid && !s.isValid(currentValues?.[s.key]))
+                return true;
+            if (s.validate) {
+                const errors = s.validate(currentValues?.[s.key]);
+                return Object.keys(errors).length > 0;
+            }
+            return false;
+        });
+    }
+    return result;
+});
+export function isDirty(category) {
+    return dirtyCategories[category] ?? false;
+}
+export function discardCategory(category) {
+    if (category === 'Auth/OAuth/SAML') {
+        for (const s of scimSamlSetting) {
+            const v = initialValues[s.key];
+            $values[s.key] = v !== undefined ? JSON.parse(JSON.stringify(v)) : undefined;
+        }
+        oauths = JSON.parse(JSON.stringify(initialOauths));
+        requirePreexistingUserForOauth = initialRequirePreexistingUserForOauth;
+        const account_identifier = initialOauths?.snowflake_oauth?.connect_config?.extra_params?.account_identifier;
+        snowflakeAccountIdentifier = account_identifier ?? '';
+    }
+    else {
+        const categorySettings = getSettingsForCategory(category);
+        for (const s of categorySettings) {
+            const v = initialValues[s.key];
+            $values[s.key] = v !== undefined ? JSON.parse(JSON.stringify(v)) : undefined;
+        }
+    }
+}
+export function discardAll() {
+    // Reset all values to initial state (deep copy to avoid reference sharing)
+    $values = JSON.parse(JSON.stringify(initialValues));
+    oauths = JSON.parse(JSON.stringify(initialOauths));
+    requirePreexistingUserForOauth = initialRequirePreexistingUserForOauth;
+    const account_identifier = initialOauths?.snowflake_oauth?.connect_config?.extra_params?.account_identifier;
+    snowflakeAccountIdentifier = account_identifier ?? '';
+    if (yamlMode) {
+        syncFormToYaml();
+    }
+}
+export async function saveCategorySettings(category) {
+    // Category-specific pre-processing
+    if (category === 'Auth/OAuth/SAML') {
+        if (oauths?.snowflake_oauth &&
+            oauths?.snowflake_oauth?.connect_config?.extra_params?.account_identifier !==
+                snowflakeAccountIdentifier) {
+            setupSnowflakeUrls();
+        }
+    }
+    if (category === 'Alerts' && $values?.critical_error_channels) {
+        $values.critical_error_channels = $values.critical_error_channels.filter((entry) => {
+            if (!entry || typeof entry !== 'object')
+                return false;
+            if ('teams_channel' in entry)
+                return isValidTeamsChannel(entry.teams_channel);
+            if ('slack_channel' in entry)
+                return typeof entry.slack_channel === 'string' && entry.slack_channel.trim() !== '';
+            if ('email' in entry)
+                return typeof entry.email === 'string' && entry.email.trim() !== '';
+            return false;
+        });
+    }
+    if (category === 'Core' &&
+        $values?.['license_key'] &&
+        typeof $values['license_key'] === 'string') {
+        $values['license_key'] = $values['license_key'].trim();
+    }
+    let shouldReloadPage = false;
+    const categorySettings = getSettingsForCategory(category);
+    let licenseKeySet = false;
+    await Promise.all(categorySettings
+        .filter((x) => {
+        return (x.storage === 'setting' &&
+            !deepEqual(initialValues?.[x.key], $values?.[x.key]) &&
+            ($values?.[x.key] !== '' ||
+                initialValues?.[x.key] !== undefined ||
+                initialValues?.[x.key] !== null));
+    })
+        .map(async (x) => {
+        if (x.key === 'license_key')
+            licenseKeySet = true;
+        if (x.requiresReloadOnChange)
+            shouldReloadPage = true;
+        let value = $values?.[x.key];
+        if (x.fieldType === 'codearea' && typeof value === 'string' && value.trim() === '') {
+            value = undefined;
+        }
+        return await SettingService.setGlobal({
+            key: x.key,
+            requestBody: { value }
+        });
+    }));
+    // Update only the saved category's initial values
+    for (const s of categorySettings) {
+        const v = $values[s.key];
+        initialValues[s.key] = v !== undefined ? JSON.parse(JSON.stringify(v)) : undefined;
+    }
+    if (categorySettings.some((s) => s.key === 'base_url')) {
+        baseUrlIsFallback = false;
+    }
+    // Handle Auth/OAuth/SAML-specific saves
+    if (category === 'Auth/OAuth/SAML') {
+        if (!deepEqual(stripEmpty(initialOauths), stripEmpty(oauths))) {
+            await SettingService.setGlobal({
+                key: 'oauths',
+                requestBody: { value: oauths }
+            });
+            initialOauths = JSON.parse(JSON.stringify(oauths));
+        }
+        if (initialRequirePreexistingUserForOauth !== requirePreexistingUserForOauth) {
+            await SettingService.setGlobal({
+                key: 'require_preexisting_user_for_oauth',
+                requestBody: { value: requirePreexistingUserForOauth }
+            });
+            initialRequirePreexistingUserForOauth = requirePreexistingUserForOauth;
+        }
+    }
+    if (licenseKeySet)
+        setLicense();
+    if (shouldReloadPage) {
+        sendUserToast('Settings updated, reloading page...');
+        await sleep(1000);
+        window.location.reload();
+    }
+    else {
+        sendUserToast('Settings updated');
+        dispatch('saved');
+    }
+}
+let yamlCode = $state('');
+let yamlCodeInitial = $state('');
+let yamlEditor = $state(undefined);
+let yamlError = $state('');
+let showSensitive = $state(false);
+const SENSITIVE_UNCHANGED = '__SENSITIVE_AND_UNCHANGED__';
+const sensitiveKeys = new Set([
+    ...[...Object.values(settings), scimSamlSetting]
+        .flatMap((s) => Object.values(s))
+        .filter((s) => s.fieldType === 'password' || s.fieldType === 'license_key')
+        .map((s) => s.key),
+    'ducklake_user_pg_pwd',
+    'jwt_secret'
+]);
+// Settings that should never appear in YAML export/import
+const excludedKeys = new Set([]);
+// Nested fields inside object-valued settings that contain secrets.
+// Each entry maps a top-level key to its sensitive sub-field names.
+const nestedSensitiveFields = {
+    smtp_settings: ['smtp_password'],
+    secret_backend: ['token'],
+    object_store_cache_config: ['secret_key', 'serviceAccountKey'],
+    custom_instance_pg_databases: ['user_pwd'],
+    rsa_keys: ['private_key']
+};
+/** Returns SENSITIVE_UNCHANGED if the value is non-empty and matches the initial */
+function maskField(current, initial) {
+    if (current != null && current !== '' && current === initial)
+        return SENSITIVE_UNCHANGED;
+    return undefined;
+}
+function maskSensitive(obj) {
+    const masked = {};
+    for (const [key, value] of Object.entries(obj)) {
+        if (key === 'oauths' && typeof value === 'object' && value !== null) {
+            const maskedOauths = {};
+            for (const [provider, config] of Object.entries(value)) {
+                if (typeof config === 'object' && config !== null && 'secret' in config) {
+                    const m = maskField(config.secret, initialOauths?.[provider]?.secret);
+                    maskedOauths[provider] = m ? { ...config, secret: m } : config;
+                }
+                else {
+                    maskedOauths[provider] = config;
+                }
+            }
+            masked[key] = maskedOauths;
+        }
+        else if (key in nestedSensitiveFields && typeof value === 'object' && value !== null) {
+            const cp = { ...value };
+            const init = initialValues?.[key];
+            for (const field of nestedSensitiveFields[key]) {
+                const m = maskField(field === 'serviceAccountKey' ? JSON.stringify(cp[field]) : cp[field], field === 'serviceAccountKey' ? JSON.stringify(init?.[field]) : init?.[field]);
+                if (m)
+                    cp[field] = m;
+            }
+            masked[key] = cp;
+        }
+        else if (sensitiveKeys.has(key) && value != null && value !== '') {
+            masked[key] = value === initialValues?.[key] ? SENSITIVE_UNCHANGED : value;
+        }
+        else {
+            masked[key] = value;
+        }
+    }
+    return masked;
+}
+/**
+ * Builds a sorted YAML string of all instance settings.
+ * - normalize: strip keys whose values match the default (empty/falsy or key-specific defaults)
+ * - mask: replace sensitive values with placeholder (for display)
+ */
+function buildSettingsYaml(vals, oauthsObj, reqPreexisting, opts = {}) {
+    // Merge all settings (including oauths) into one object so they sort together
+    const merged = { ...vals };
+    if (oauthsObj && Object.keys(stripEmpty(oauthsObj)).length > 0) {
+        merged['oauths'] = oauthsObj;
+    }
+    if (reqPreexisting) {
+        merged['require_preexisting_user_for_oauth'] = reqPreexisting;
+    }
+    const obj = {};
+    for (const key of Object.keys(merged).sort()) {
+        if (excludedKeys.has(key))
+            continue;
+        if (opts.normalize && normalizeValue(merged[key], key) === undefined)
+            continue;
+        obj[key] = merged[key];
+    }
+    // Strip runtime-only `databases` sub-field from custom_instance_pg_databases
+    if (obj['custom_instance_pg_databases']?.databases) {
+        obj['custom_instance_pg_databases'] = { ...obj['custom_instance_pg_databases'] };
+        delete obj['custom_instance_pg_databases'].databases;
+    }
+    return YAML.stringify(opts.mask ? maskSensitive(obj) : obj);
+}
+function syncFormToYaml() {
+    yamlCode = buildSettingsYaml($values, oauths, requirePreexistingUserForOauth, {
+        normalize: true,
+        mask: !showSensitive
+    });
+    yamlCodeInitial = buildSettingsYaml(initialValues, initialOauths, initialRequirePreexistingUserForOauth, { normalize: true, mask: !showSensitive });
+    yamlEditor?.setCode(yamlCode);
+    yamlError = '';
+}
+function syncYamlToForm() {
+    try {
+        // Flush the editor's current content (bypasses the 200ms debounce in SimpleEditor)
+        const currentCode = yamlEditor?.getCode() ?? yamlCode;
+        if (currentCode !== yamlCode) {
+            yamlCode = currentCode;
+        }
+        const parsed = YAML.parse(yamlCode);
+        if (typeof parsed !== 'object' || parsed === null) {
+            sendUserToast('YAML must be a mapping (key: value)', true);
+            return false;
+        }
+        // Restore sensitive values that were not changed (placeholder → original value)
+        if ('oauths' in parsed && typeof parsed['oauths'] === 'object') {
+            for (const [provider, config] of Object.entries(parsed['oauths'])) {
+                if (typeof config === 'object' &&
+                    config !== null &&
+                    config.secret === SENSITIVE_UNCHANGED) {
+                    config.secret = initialOauths?.[provider]?.secret;
+                }
+            }
+            oauths = parsed['oauths'] ?? {};
+            delete parsed['oauths'];
+        }
+        if ('require_preexisting_user_for_oauth' in parsed) {
+            requirePreexistingUserForOauth = parsed['require_preexisting_user_for_oauth'] ?? false;
+            delete parsed['require_preexisting_user_for_oauth'];
+        }
+        // Restore unchanged sensitive settings (placeholder → original value)
+        for (const key of sensitiveKeys) {
+            if (key in parsed && parsed[key] === SENSITIVE_UNCHANGED) {
+                parsed[key] = initialValues?.[key];
+            }
+        }
+        // Restore nested sensitive fields
+        for (const [parentKey, fields] of Object.entries(nestedSensitiveFields)) {
+            if (parsed[parentKey] && typeof parsed[parentKey] === 'object') {
+                const init = initialValues?.[parentKey];
+                for (const field of fields) {
+                    if (parsed[parentKey][field] === SENSITIVE_UNCHANGED) {
+                        parsed[parentKey][field] = init?.[field];
+                    }
+                }
+            }
+        }
+        // Preserve excluded keys from current form state
+        for (const key of excludedKeys) {
+            if (key in $values) {
+                parsed[key] = $values[key];
+            }
+        }
+        // Preserve runtime-only `databases` sub-field in custom_instance_pg_databases
+        const existingDatabases = initialValues?.['custom_instance_pg_databases']?.databases;
+        if (existingDatabases && parsed['custom_instance_pg_databases']) {
+            parsed['custom_instance_pg_databases'].databases = existingDatabases;
+        }
+        $values = parsed;
+        applyFormDefaults($values);
+        yamlError = '';
+        return true;
+    }
+    catch (e) {
+        yamlError = String(e);
+        sendUserToast('Invalid YAML: ' + e, true);
+        return false;
+    }
 }
+let prevYamlMode = false;
+let prevLoading = true;
+$effect(() => {
+    if (yamlMode && !prevYamlMode) {
+        syncFormToYaml();
+    }
+    else if (!yamlMode && prevYamlMode) {
+        if (!syncYamlToForm()) {
+            // Reset toggle back to YAML on parse failure
+            yamlMode = true;
+        }
+    }
+    else if (yamlMode && prevLoading && !loading) {
+        // Settings just finished loading while in YAML mode
+        syncFormToYaml();
+    }
+    prevYamlMode = yamlMode;
+    prevLoading = loading;
+});
+function handleShowSensitiveToggle(checked) {
+    // Sync any in-progress edits back to form state before re-rendering
+    syncYamlToForm();
+    showSensitive = checked;
+    syncFormToYaml();
+}
+/** Call before entering diff mode to sync YAML edits into form state */
+export function syncBeforeDiff() {
+    if (yamlMode) {
+        return syncYamlToForm();
+    }
+    return true;
+}
+export function buildFullDiff() {
+    return {
+        original: buildSettingsYaml(initialValues, initialOauths, initialRequirePreexistingUserForOauth, { normalize: true }),
+        modified: buildSettingsYaml($values, oauths, requirePreexistingUserForOauth, {
+            normalize: true
+        })
+    };
+}
+$effect(() => {
+    if (yamlMode) {
+        // In YAML mode, compare editor content against snapshot taken on entry
+        hasUnsavedChanges = yamlCodeInitial !== '' && yamlCode !== yamlCodeInitial;
+    }
+    else {
+        // Reuse per-category dirty tracking instead of rebuilding full YAML
+        hasUnsavedChanges = Object.values(dirtyCategories).some(Boolean);
+    }
+});
 </script>
 
 <div class="pb-12">
-	<!-- svelte-ignore a11y_label_has_associated_control -->
-	{#if hideTabs}
-		{@render tabsContent()}
+	{#if yamlMode}
+		<div class="flex flex-row justify-between">
+			<p class="text-2xs text-tertiary">
+				Use this YAML to manage instance settings as code.
+				<a
+					href="https://www.windmill.dev/docs/advanced/instance_settings#kubernetes-operator"
+					target="_blank"
+					rel="noopener noreferrer">Learn more <ExternalLink size={12} class="inline-block" /></a
+				>
+			</p>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<div class="flex items-center justify-end gap-4 mb-2">
+				<Toggle
+					checked={showSensitive}
+					on:change={(e) => handleShowSensitiveToggle(e.detail)}
+					options={{ right: 'Show sensitive values' }}
+					size="xs"
+				/>
+			</div>
+		</div>
+		<div class="border rounded w-full h-[calc(100vh-12rem)]">
+			{#await import('./SimpleEditor.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					bind:this={yamlEditor}
+					class="h-full"
+					lang="yaml"
+					bind:code={yamlCode}
+					fixedOverflowWidgets={false}
+				/>
+			{/await}
+		</div>
+		{#if yamlError}
+			<div class="text-red-500 text-xs mt-1">{yamlError}</div>
+		{/if}
+	{:else if hideTabs}
+		{@render categoryContent(tab)}
 	{:else}
 		<Tabs bind:selected={tab}>
 			{#each settingsKeys as category}
@@ -210,127 +744,145 @@ function openSmtpSettings() {
 
 			{#snippet content()}
 				<div class="pt-4"></div>
-				{@render tabsContent()}
+				{#each Object.keys(settings) as category}
+					<TabContent value={category}>
+						{@render categoryContent(category)}
+					</TabContent>
+				{/each}
 			{/snippet}
 		</Tabs>
 	{/if}
 
-	{#snippet tabsContent()}
-		{#each Object.keys(settings) as category}
-			<TabContent value={category}>
-				{#if category == 'SMTP'}
-					<div class="text-secondary pb-4 text-xs">
-						Setting SMTP unlocks sending emails upon adding new users to the workspace or the
-						instance or sending critical alerts via email.
-						<a target="_blank" href="https://www.windmill.dev/docs/advanced/instance_settings#smtp"
-							>Learn more <ExternalLink size={12} class="inline-block" /></a
-						>
-					</div>
-				{:else if category == 'Indexer/Search'}
-					<div class="text-secondary pb-4 text-xs"
-						>The indexer service unlocks full text search across jobs and service logs. It requires
-						spinning up its own separate container
-						<a target="_blank" href="https://www.windmill.dev/docs/core_concepts/search_bar#setup"
-							>Learn how to <ExternalLink size={12} class="inline-block" /></a
-						></div
+	{#snippet categoryContent(category: string)}
+		{#if category == 'Core'}
+			<SettingsPageHeader
+				title="Core"
+				description="Configure the core settings of your Windmill instance."
+				link="https://www.windmill.dev/docs/advanced/instance_settings"
+			/>
+		{:else if category == 'SMTP'}
+			<SettingsPageHeader
+				title="SMTP"
+				description="Setting SMTP unlocks sending emails upon adding new users to the workspace or the instance or sending critical alerts via email."
+				link="https://www.windmill.dev/docs/advanced/instance_settings#smtp"
+			/>
+		{:else if category == 'Registries'}
+			<SettingsPageHeader
+				title="Registries"
+				description="Add private registries for Pip, Bun and npm."
+				link="https://www.windmill.dev/docs/advanced/imports"
+			/>
+			{#if !$enterpriseLicense}
+				<Alert type="info" title="Private registries configuration is an EE feature" class="mb-2" />
+			{/if}
+		{:else if category == 'Alerts'}
+			<SettingsPageHeader
+				title="Alerts"
+				description="Critical alerts automatically notify administrators about system events like job crashes, license issues, worker failures, and queue delays through email, Slack, or Teams."
+				link="https://www.windmill.dev/docs/core_concepts/critical_alerts"
+			/>
+		{:else if category == 'OTEL/Prom'}
+			<SettingsPageHeader
+				title="OTEL/Prometheus"
+				description="Configure OpenTelemetry and Prometheus metrics export for monitoring your Windmill instance."
+				link="https://www.windmill.dev/docs/core_concepts/otel"
+			/>
+		{:else if category == 'Indexer'}
+			<SettingsPageHeader
+				title="Indexer"
+				description="The indexer service unlocks full text search across jobs and service logs. It requires spinning up its own separate container."
+				link="https://www.windmill.dev/docs/core_concepts/search_bar#setup"
+			/>
+			{#if !$enterpriseLicense}
+				<Alert
+					type="info"
+					title="Full text search across jobs and service logs is an EE feature"
+					class="mb-2"
+				/>
+			{/if}
+		{:else if category == 'Telemetry'}
+			<SettingsPageHeader title="Telemetry" />
+			<div class="text-primary pb-4 text-xs">
+				Anonymous usage data is collected to help improve Windmill.
+				<br />The following information is collected:
+				<ul class="list-disc list-inside pl-2">
+					<li>version of your instances</li>
+					<li>instance base URL</li>
+					<li>job usage (language, total duration, count)</li>
+					<li>login type usage (login type, count)</li>
+					<li>worker usage (worker, worker instance, vCPUs, memory)</li>
+					<li>user usage (author count, operator count)</li>
+					<li>superadmin email addresses</li>
+					<li>vCPU usage</li>
+					<li>memory usage</li>
+					<li>development instance status</li>
+				</ul>
+			</div>
+			{#if $enterpriseLicense}
+				<div class="text-primary pb-4 text-xs">
+					On Enterprise Edition, you must send data to check that usage is in line with the terms of
+					the subscription. You can either enable telemetry or regularly send usage data by clicking
+					the button below. For air-gapped instances, you can download the telemetry data and send
+					it manually.
+				</div>
+				<div class="flex gap-2 mb-4">
+					<Button
+						on:click={sendStats}
+						variant="default"
+						btnClasses="w-auto"
+						loading={sendingStats}
+						size="xs"
 					>
-				{:else if category == 'Alerts'}
-					<div class="text-secondary pb-4 text-xs">
-						Critical alerts automatically notify administrators about system events like job crashes,
-						license issues, worker failures, and queue delays through email, Slack, or Teams.
-						<a target="_blank" href="https://www.windmill.dev/docs/core_concepts/critical_alerts"
-							>Learn more <ExternalLink size={12} class="inline-block" /></a
-						>
-					</div>
-				{:else if category == 'Registries'}
-					<div class="text-secondary pb-4 text-xs">
-						Add private registries for Pip, Bun and npm. <a
-							target="_blank"
-							href="https://www.windmill.dev/docs/advanced/imports">Learn more</a
-						>
-					</div>
-				{:else if category == 'Slack'}
-					<div class="text-secondary pb-4 text-xs">
-						Connecting your instance to a Slack workspace enables critical alerts to be sent to a
-						Slack channel.
-						<a target="_blank" href="https://www.windmill.dev/docs/misc/saml_and_scim">Learn more</a
-						>
-					</div>
-				{:else if category == 'SCIM/SAML'}
-					<div class="text-secondary pb-4 text-xs">
-						Setting up SAML and SCIM allows you to authenticate users using your identity provider.
-						<a target="_blank" href="https://www.windmill.dev/docs/advanced/instance_settings#slack"
-							>Learn more</a
-						>
-					</div>
-				{:else if category == 'Debug'}
-					<div class="text-secondary pb-4 text-xs">
-						Enable debug mode to get more detailed logs.
-					</div>
-				{:else if category == 'Telemetry'}
-					<div class="text-primary pb-4 text-xs">
-						Anonymous usage data is collected to help improve Windmill.
-						<br />The following information is collected:
-						<ul class="list-disc list-inside pl-2">
-							<li>version of your instances</li>
-							<li>instance base URL</li>
-							<li>job usage (language, total duration, count)</li>
-							<li>login type usage (login type, count)</li>
-							<li>worker usage (worker, worker instance, vCPUs, memory)</li>
-							<li>user usage (author count, operator count)</li>
-							<li>superadmin email addresses</li>
-							<li>vCPU usage</li>
-							<li>memory usage</li>
-							<li>development instance status</li>
-						</ul>
-					</div>
-					{#if $enterpriseLicense}
-						<div class="text-primary pb-4 text-xs">
-							On Enterprise Edition, you must send data to check that usage is in line with the
-							terms of the subscription. You can either enable telemetry or regularly send usage
-							data by clicking the button below.
-						</div>
-						<Button
-							on:click={sendStats}
-							variant="default"
-							btnClasses="w-auto"
-							wrapperClasses="mb-4"
-							loading={sendingStats}
-							size="xs"
-						>
-							Send usage
-						</Button>
-					{/if}
-				{:else if category == 'Auth/OAuth/SAML'}
-					<AuthSettings
-						bind:oauths
-						bind:snowflakeAccountIdentifier
-						bind:requirePreexistingUserForOauth
-						baseUrl={$values?.base_url}
+						Send usage
+					</Button>
+					<Button
+						on:click={downloadStats}
+						variant="default"
+						btnClasses="w-auto"
+						loading={downloadingStats}
+						size="xs"
 					>
-						{#snippet scim()}
-							<div class="flex-col flex gap-6 pb-4">
-								{#each scimSamlSetting as setting}
-									<InstanceSetting
-										on:closeDrawer={() => closeDrawer?.()}
-										{loading}
-										{setting}
-										{values}
-										{version}
-										{oauths}
-									/>
-								{/each}
-							</div>
-						{/snippet}
-					</AuthSettings>
-				{/if}
-
-				<div class="flex-col flex gap-6 pb-4">
-					{#each settings[category] as setting}
-						<!-- slack connect is handled with the alert channels settings, smtp_connect is handled in InstanceSetting -->
-						{#if setting.fieldType != 'slack_connect'}
+						Download usage
+					</Button>
+				</div>
+			{/if}
+		{:else if category == 'Jobs'}
+			<SettingsPageHeader
+				title="Jobs"
+				description="Configure default timeouts and retention policies for job execution."
+				link="https://www.windmill.dev/docs/advanced/instance_settings#jobs"
+			/>
+		{:else if category == 'Object Storage'}
+			<SettingsPageHeader
+				title="Object Storage"
+				description="Configure S3-compatible storage for large logs and distributed dependency caching."
+				link="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill"
+			/>
+		{:else if category == 'Private Hub'}
+			<SettingsPageHeader
+				title="Private Hub"
+				description="Connect to a Private Hub instance for sharing custom scripts and integrations."
+				link="https://www.windmill.dev/docs/core_concepts/private_hub"
+			/>
+		{:else if category == 'Secret Storage'}
+			<SettingsPageHeader
+				title="Secret Storage"
+				description="Configure where secrets (secret variables) are stored."
+				link="https://www.windmill.dev/docs/core_concepts/workspace_secret_encryption"
+			/>
+		{:else if category == 'Auth/OAuth/SAML'}
+			<AuthSettings
+				bind:oauths
+				bind:snowflakeAccountIdentifier
+				bind:requirePreexistingUserForOauth
+				baseUrl={$values?.base_url}
+				bind:tab={authSubTab}
+				{hideTabs}
+			>
+				{#snippet scim()}
+					<div class="flex-col flex gap-6 pb-4">
+						{#each scimSamlSetting as setting}
 							<InstanceSetting
-								{openSmtpSettings}
 								on:closeDrawer={() => closeDrawer?.()}
 								{loading}
 								{setting}
@@ -338,15 +890,74 @@ function openSmtpSettings() {
 								{version}
 								{oauths}
 							/>
-						{/if}
-					{/each}
-				</div>
-			</TabContent>
-		{/each}
+						{/each}
+					</div>
+				{/snippet}
+			</AuthSettings>
+		{/if}
+
+		<div class="flex-col flex gap-6 pb-6">
+			{#each settings[category] as setting}
+				<!-- slack connect is handled with the alert channels settings, smtp_connect is handled in InstanceSetting -->
+				{#if setting.fieldType != 'slack_connect' && !(quickSetup && setting.hideInQuickSetup) && !(quickSetup && category === 'Core' && setting.key === 'license_key')}
+					<InstanceSetting
+						{openSmtpSettings}
+						on:closeDrawer={() => closeDrawer?.()}
+						{loading}
+						{setting}
+						{values}
+						{version}
+						{oauths}
+						warning={setting.key === 'base_url' && baseUrlIsFallback
+							? 'Auto-detected from browser — not yet saved'
+							: undefined}
+					/>
+				{/if}
+				{#if quickSetup && category === 'Core' && setting.key === 'base_url'}
+					{@const licenseKeySetting = settings['Core'].find((s) => s.key === 'license_key')}
+					{#if licenseKeySetting}
+						<InstanceSetting
+							{openSmtpSettings}
+							on:closeDrawer={() => closeDrawer?.()}
+							{loading}
+							setting={licenseKeySetting}
+							{values}
+							{version}
+							{oauths}
+						/>
+					{/if}
+				{/if}
+			{/each}
+			{#if quickSetup && category === 'Core'}
+				{@const extraSettings = [
+					...settings['Jobs'].filter((s) => s.key === 'job_isolation'),
+					...settings['Jobs'].filter((s) => s.key === 'retention_period_secs'),
+					...(settings['Object Storage']?.filter((s) => s.key === 'object_store_cache_config') ??
+						[])
+				]}
+				{#each extraSettings as setting}
+					<InstanceSetting
+						{openSmtpSettings}
+						on:closeDrawer={() => closeDrawer?.()}
+						{loading}
+						{setting}
+						{values}
+						{version}
+						{oauths}
+					/>
+				{/each}
+			{/if}
+		</div>
+
+		{#if !loading && !quickSetup && !hideTabs}
+			<SettingsFooter
+				hasUnsavedChanges={dirtyCategories[category] ?? false}
+				disabled={invalidCategories[category] ?? false}
+				onSave={() => saveCategorySettings(category)}
+				onDiscard={() => discardCategory(category)}
+				saveLabel={`Save ${category.toLowerCase()} settings`}
+				class="bg-surface"
+			/>
+		{/if}
 	{/snippet}
 </div>
-
-{#if !hideSave}
-	<Button on:click={saveSettings} variant="accent">Save settings</Button>
-	<div class="pb-8"></div>
-{/if}