windmill-components 1.677.1 → 1.695.0

package/package/components/offboarding-utils.js

@@ -0,0 +1,102 @@
+export function pl(n, singular) {
+    return `${n} ${singular}${n === 1 ? '' : 's'}`;
+}
+function triggerCount(triggers) {
+    if (!triggers)
+        return 0;
+    return Object.values(triggers).reduce((s, arr) => s + arr.length, 0);
+}
+export function countPaths(p) {
+    if (!p)
+        return 0;
+    return ((p.scripts?.length ?? 0) +
+        (p.flows?.length ?? 0) +
+        (p.apps?.length ?? 0) +
+        (p.resources?.length ?? 0) +
+        (p.variables?.length ?? 0) +
+        (p.schedules?.length ?? 0) +
+        triggerCount(p.triggers));
+}
+const TRIGGER_TABLE_TO_ROUTE = {
+    http_trigger: 'routes',
+    websocket_trigger: 'websocket_triggers',
+    kafka_trigger: 'kafka_triggers',
+    postgres_trigger: 'postgres_triggers',
+    mqtt_trigger: 'mqtt_triggers',
+    nats_trigger: 'nats_triggers',
+    sqs_trigger: 'sqs_triggers',
+    gcp_trigger: 'gcp_triggers',
+    azure_trigger: 'azure_triggers',
+    email_trigger: 'email_triggers'
+};
+const TRIGGER_TABLE_TO_LABEL = {
+    http_trigger: 'http trigger',
+    websocket_trigger: 'websocket trigger',
+    kafka_trigger: 'kafka trigger',
+    postgres_trigger: 'postgres trigger',
+    mqtt_trigger: 'mqtt trigger',
+    nats_trigger: 'nats trigger',
+    sqs_trigger: 'sqs trigger',
+    gcp_trigger: 'gcp trigger',
+    azure_trigger: 'azure trigger',
+    email_trigger: 'email trigger'
+};
+export function flattenPaths(p) {
+    if (!p)
+        return [];
+    const result = [];
+    for (const [kind, list] of Object.entries(p)) {
+        if (kind === 'triggers' && list && typeof list === 'object' && !Array.isArray(list)) {
+            for (const [triggerType, paths] of Object.entries(list)) {
+                for (const path of paths)
+                    result.push({ kind: triggerType, path });
+            }
+        }
+        else if (Array.isArray(list)) {
+            for (const path of list)
+                result.push({ kind, path });
+        }
+    }
+    return result;
+}
+export function triggerLabel(triggerType) {
+    return TRIGGER_TABLE_TO_LABEL[triggerType] ?? triggerType;
+}
+export function kindLabel(kind) {
+    if (TRIGGER_TABLE_TO_LABEL[kind])
+        return TRIGGER_TABLE_TO_LABEL[kind];
+    // "scripts" -> "script", "flows" -> "flow", etc.
+    return kind.replace(/s$/, '');
+}
+export function itemHref(kind, path) {
+    switch (kind) {
+        case 'scripts':
+            return `/scripts/get/${path}`;
+        case 'flows':
+            return `/flows/get/${path}`;
+        case 'apps':
+            return `/apps/get/${path}`;
+        case 'resources':
+            return `/resources#/resource/${path}`;
+        case 'variables':
+            return `/variables#${path}`;
+        case 'schedules':
+            return `/schedules#${path}`;
+        default: {
+            const route = TRIGGER_TABLE_TO_ROUTE[kind];
+            if (route)
+                return `/${route}#${path}`;
+            return undefined;
+        }
+    }
+}
+export function downloadCsv(rows, filename) {
+    const csv = rows.map((r) => r.map((c) => `"${c.replace(/"/g, '""')}"`).join(',')).join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}

package/package/components/progressBar/ProgressBar.svelte

@@ -3,7 +3,7 @@ import { linear } from 'svelte/easing';
 import { twMerge } from 'tailwind-merge';
 import { Loader2 } from 'lucide-svelte';
 import { fade } from 'svelte/transition';
-let { error = undefined, index, subIndex, subLength, nextInProgress = false, subIndexIsPercent = false, compact = false, hideStepTitle = false, slim = false, length, class: className = '', textPosition = 'top', stepId, showStepId = false, isWaitingForEvents = false, isCanceled = false, isScheduled = false } = $props();
+let { error = undefined, index, subIndex, subLength, nextInProgress = false, subIndexIsPercent = false, compact = false, hideStepTitle = false, slim = false, length, class: className = '', textPosition = 'top', stepId, showStepId = false, isWaitingForEvents = false, isCanceled = false, isScheduled = false, isSkipped = false } = $props();
 let duration = 200;
 let percent = new Tween(0, { duration, easing: linear });
 export function resetP() {
@@ -87,13 +87,15 @@ const status = $derived(error != undefined ? 'error' : finished ? 'done' : 'runn
 				: 'text-blue-700 dark:text-blue-200'}"
 		>
 			<div class={twMerge(slim ? 'text-xs' : 'text-sm', 'flex items-center gap-1')}>
-				{#if status == 'running' && !isCanceled && !isScheduled}
+				{#if status == 'running' && !isCanceled && !isScheduled && !isSkipped}
 					<Loader2 class="animate-spin" size={14} />
 				{/if}
-				{#key status + isWaitingForEvents + stepId + isCanceled + isScheduled}
+				{#key status + isWaitingForEvents + stepId + isCanceled + isScheduled + isSkipped}
 					<span in:fade={{ duration: 150 }}>
 						{#if status == 'error'}
 							Error occurred
+						{:else if isSkipped}
+							Skipped
 						{:else if status == 'done' && isCanceled}
 							Canceled
 						{:else if status == 'done'}
@@ -109,9 +111,11 @@ const status = $derived(error != undefined ? 'error' : finished ? 'done' : 'runn
 						{:else if hideStepTitle}
 							{isCanceled ? 'Canceled' : 'Running'}
 						{:else if subIndexIsPercent}
-							{(isCanceled ? 'Canceled at ' : '') + `Step ${index + 1} (${subIndex !== undefined ? subIndex + '%' : ''})`}
+							{(isCanceled ? 'Canceled at ' : '') +
+								`Step ${index + 1} (${subIndex !== undefined ? subIndex + '%' : ''})`}
 						{:else}
-							{(isCanceled ? 'Canceled at ' : '') + `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
+							{(isCanceled ? 'Canceled at ' : '') +
+								`Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
 						{/if}
 					</span>
 				{/key}

package/package/components/progressBar/ProgressBar.svelte.d.ts

@@ -16,6 +16,7 @@ interface Props {
     isWaitingForEvents?: boolean;
     isCanceled?: boolean;
     isScheduled?: boolean;
+    isSkipped?: boolean;
 }
 declare const ProgressBar: import("svelte").Component<Props, {
     resetP: () => void;

package/package/components/raw_apps/DeleteAfterUsePopup.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">import Toggle from '../Toggle.svelte';
+import { Button, SecondsInput } from '../common';
+import { Trash } from 'lucide-svelte';
+import Popover from '../meltComponents/Popover.svelte';
+import { autoPlacement } from '@floating-ui/core';
+let { delete_after_secs = $bindable(), btnProps } = $props();
+const enabled = $derived(typeof delete_after_secs === 'number' && delete_after_secs >= 0);
+</script>
+
+<Popover
+	floatingConfig={{
+		middleware: [
+			autoPlacement({
+				allowedPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end', 'top', 'bottom']
+			})
+		]
+	}}
+	closeButton
+	contentClasses="block text-primary p-4"
+>
+	{#snippet trigger()}
+		<Button
+			nonCaptureEvent={true}
+			btnClasses={enabled
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primary hover:bg-hover'}
+			color="light"
+			variant="contained"
+			size="xs2"
+			iconOnly
+			startIcon={{ icon: Trash }}
+			title="Delete job metadata after the job completes"
+			{...btnProps}
+		/>
+	{/snippet}
+	{#snippet content()}
+		<Toggle
+			checked={enabled}
+			on:change={() => {
+				delete_after_secs = enabled ? undefined : 0
+			}}
+			options={{
+				right: 'Delete job metadata after the job completes'
+			}}
+		/>
+		<div class="mt-4">
+			<span class="text-xs font-bold">Delay before deletion</span>
+			<SecondsInput bind:seconds={delete_after_secs} disabled={!enabled} />
+			<span class="text-2xs text-tertiary block mt-1">0 = immediate</span>
+		</div>
+	{/snippet}
+</Popover>

package/package/components/raw_apps/DeleteAfterUsePopup.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../common';
+import type { ComponentProps } from 'svelte';
+interface Props {
+    delete_after_secs: number | undefined;
+    btnProps?: ComponentProps<typeof Button>;
+}
+declare const DeleteAfterUsePopup: import("svelte").Component<Props, {}, "delete_after_secs">;
+type DeleteAfterUsePopup = ReturnType<typeof DeleteAfterUsePopup>;
+export default DeleteAfterUsePopup;

package/package/components/raw_apps/RawAppBackgroundRunner.svelte

@@ -64,7 +64,11 @@ let listener = async (event) => {
                     ? Object.fromEntries(Object.entries(runnable?.fields ?? {})
                         .filter(([k, v]) => v.type == 'static')
                         .map(([k, v]) => [k, v?.['value']]))
-                    : undefined
+                    : undefined,
+                force_viewer_sensitive_inputs: editor
+                    ? undefinedIfEmpty(Object.keys(runnable?.fields ?? {}).filter((k) => runnable?.fields?.[k]?.type == 'user' && runnable?.fields?.[k]?.sensitive))
+                    : undefined,
+                force_viewer_delete_after_secs: editor ? runnable?.delete_after_secs : undefined
             }, undefined);
             let job = { component: runnable_id, created_at: Date.now(), job: uuid };
             if (event.data.type == 'backendAsync') {

package/package/components/raw_apps/RawAppDataTableDrawer.svelte

@@ -26,7 +26,7 @@ const datatables = resource([], async () => {
     if (!$workspaceStore)
         return [];
     try {
-        return await WorkspaceService.listDataTables({ workspace: $workspaceStore });
+        return (await WorkspaceService.listDataTables({ workspace: $workspaceStore })).map((d) => d.name);
     }
     catch (e) {
         console.error('Failed to load datatables:', e);

package/package/components/raw_apps/RawAppEditor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Pane, Splitpanes } from 'svelte-splitpanes';
 import RawAppInlineScriptsPanel from './RawAppInlineScriptsPanel.svelte';
 import RawAppEditorHeader from './RawAppEditorHeader.svelte';
+import RawAppYamlEditor, {} from './RawAppYamlEditor.svelte';
 import { WorkspaceService } from '../../gen';
 import DiffDrawer from '../DiffDrawer.svelte';
 import { encodeState } from '../../utils';
@@ -14,16 +15,72 @@ import RawAppSidebar from './RawAppSidebar.svelte';
 import { isRunnableByName, isRunnableByPath } from '../apps/inputType';
 import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
 import { onMount, untrack } from 'svelte';
+import { createAppSelectedContext } from '../copilot/chat/context';
 import { rawAppLintStore } from './lintStore';
 import { dbSchemas } from '../../stores';
 import { runScriptAndPollResult } from '../jobs/utils';
 import { RawAppHistoryManager } from './RawAppHistoryManager.svelte';
 import { sendUserToast } from '../../utils';
-import { parseDataTableRef, formatDataTableRef, DEFAULT_DATA } from './dataTableRefUtils';
+import { buildDataTableWhitelist, parseDataTableRef, formatDataTableRef, isDatatableTableAllowed, DEFAULT_DATA } from './dataTableRefUtils';
 let { files = $bindable({}), runnables = $bindable({}), data = $bindable(DEFAULT_DATA), newApp, policy, summary = $bindable(''), path, newPath = undefined, savedApp = $bindable(undefined), diffDrawer = undefined } = $props();
 export const version = undefined;
 // Convert to object format for child components
 let dataTableRefsObjects = $derived(data.tables.map(parseDataTableRef));
+let dataTableWhitelist = $derived(buildDataTableWhitelist(dataTableRefsObjects));
+function countTables(schemas) {
+    return Object.values(schemas).reduce((acc, tables) => acc + tables.length, 0);
+}
+function withTableCount(datatable) {
+    return {
+        datatable_name: datatable.datatable_name,
+        schemas: datatable.schemas,
+        tableCount: countTables(datatable.schemas),
+        ...(datatable.error && { error: datatable.error })
+    };
+}
+function isDatatableTableWhitelisted(datatableName, schemaName, tableName) {
+    return isDatatableTableAllowed(dataTableWhitelist, datatableName, schemaName, tableName);
+}
+function filterDatatableTables(allTables) {
+    if (dataTableWhitelist.datatables.size === 0) {
+        return allTables.map(withTableCount);
+    }
+    const results = [];
+    for (const datatable of allTables) {
+        if (!dataTableWhitelist.datatables.has(datatable.datatable_name)) {
+            continue;
+        }
+        if (dataTableWhitelist.allTablesDatatables.has(datatable.datatable_name)) {
+            results.push(withTableCount(datatable));
+            continue;
+        }
+        const allowedTables = dataTableWhitelist.tables.get(datatable.datatable_name);
+        if (!allowedTables) {
+            results.push(withTableCount({
+                datatable_name: datatable.datatable_name,
+                schemas: {},
+                error: datatable.error
+            }));
+            continue;
+        }
+        const filteredSchemas = {};
+        for (const [schemaName, tableNames] of Object.entries(datatable.schemas)) {
+            const allowedTablesInSchema = allowedTables.get(schemaName);
+            if (!allowedTablesInSchema)
+                continue;
+            const filteredTables = tableNames.filter((tableName) => allowedTablesInSchema.has(tableName));
+            if (filteredTables.length > 0) {
+                filteredSchemas[schemaName] = filteredTables;
+            }
+        }
+        results.push(withTableCount({
+            datatable_name: datatable.datatable_name,
+            schemas: filteredSchemas,
+            error: datatable.error
+        }));
+    }
+    return results;
+}
 // Initialize history manager
 const historyManager = new RawAppHistoryManager({
     maxEntries: 50,
@@ -47,7 +104,23 @@ function saveFrontendDraft() {
     }, 500);
 }
 let iframe = $state(undefined);
+let yamlEditorDrawer = $state(undefined);
 let sidebarPanelSize = $state(15);
+function handleYamlApply(update) {
+    if (update.summary !== undefined) {
+        summary = update.summary;
+    }
+    if (update.files !== undefined) {
+        files = update.files;
+    }
+    if (update.runnables !== undefined) {
+        runnables = update.runnables;
+    }
+    if (update.data !== undefined) {
+        data = update.data;
+    }
+    historyManager.manualSnapshot(files ?? {}, runnables, summary, data, true);
+}
 let jobs = $state([]);
 let jobsById = $state({});
 // Helper function to convert internal Runnable to BackendRunnable format
@@ -101,13 +174,52 @@ function convertToBackendRunnable(key, runnable) {
     return backendRunnable;
 }
 let iframeLoaded = $state(false); // @hmr:keep
+// Suppresses iframe-sourced events for a short window after we re-push files,
+// to keep the iframe's boot-time messages from clobbering the user's state.
+// suppressIframeSetFiles is held across an entire iframe reload (e.g. theme switch);
+// the timer is reset on every reload so rapid toggles don't clear it prematurely.
 let suppressSetActiveDocument = false;
+let suppressIframeSetFiles = false;
+let suppressTimer;
+let sharedUiFiles = $state({});
+let sharedUiVersion = $state(0);
+let sharedUiLoaded = $state(false);
+async function loadSharedUi() {
+    if (!$workspaceStore)
+        return;
+    try {
+        const res = (await WorkspaceService.getSharedUi({
+            workspace: $workspaceStore
+        }));
+        sharedUiFiles = res.files ?? {};
+        sharedUiVersion = res.version ?? 0;
+    }
+    catch (e) {
+        console.warn('Failed to load shared UI for raw app editor:', e);
+        sharedUiFiles = {};
+    }
+    finally {
+        sharedUiLoaded = true;
+    }
+}
+function setSharedUiInIframe() {
+    const filesSnap = $state.snapshot(sharedUiFiles);
+    iframe?.contentWindow?.postMessage({
+        type: 'setSharedUi',
+        files: filesSnap,
+        version: sharedUiVersion
+    }, '*');
+}
 function populateFiles() {
     if (files) {
-        // Suppress iframe's automatic setActiveDocument for a short window
-        // after sending files, to prevent it from resetting to App.tsx.
         suppressSetActiveDocument = true;
-        setTimeout(() => { suppressSetActiveDocument = false; }, 500);
+        if (suppressTimer !== undefined)
+            clearTimeout(suppressTimer);
+        suppressTimer = setTimeout(() => {
+            suppressSetActiveDocument = false;
+            suppressIframeSetFiles = false;
+            suppressTimer = undefined;
+        }, 500);
         const doc = untrack(() => selectedDocument);
         if (doc) {
             setFilesAndSelectInIframe(files, doc);
@@ -142,6 +254,7 @@ onMount(() => {
     aiChatManager.saveAndClear();
     aiChatManager.changeMode(AIMode.APP);
     rawAppLintStore.enable();
+    loadSharedUi();
     // Initialize aiChatManager.datatableCreationPolicy from stored data
     aiChatManager.datatableCreationPolicy = {
         enabled: data.datatable !== undefined,
@@ -305,38 +418,14 @@ $effect(() => {
             };
         },
         getSelectedContext: () => {
-            const baseContext = {
+            return createAppSelectedContext({
                 inspectorElement: inspectorElement,
-                selectionExcluded: selectionExcludedFromPrompt,
-                toggleSelectionExcluded: toggleSelectionExcluded,
                 clearInspector: clearInspectorSelection,
-                clearRunnable: handleClearRunnable,
                 codeSelection: codeSelection,
                 clearCodeSelection: () => {
                     codeSelection = undefined;
                 }
-            };
-            if (selectedRunnable) {
-                const runnable = convertToBackendRunnable(selectedRunnable, runnables[selectedRunnable]);
-                return {
-                    type: 'backend',
-                    backendKey: selectedRunnable,
-                    backendRunnable: runnable,
-                    ...baseContext
-                };
-            }
-            if (selectedDocument) {
-                return {
-                    type: 'frontend',
-                    frontendPath: selectedDocument,
-                    frontendContent: files?.[selectedDocument],
-                    ...baseContext
-                };
-            }
-            return {
-                type: 'none',
-                ...baseContext
-            };
+            });
         },
         snapshot: () => {
             // Force create snapshot for AI - it needs a restore point
@@ -347,79 +436,38 @@ $effect(() => {
             console.log('reverting to snapshot', id);
             handleHistorySelect(id);
         },
-        getDatatables: async () => {
+        listDatatableTables: async () => {
             if (!$workspaceStore) {
                 return [];
             }
-            // Get all datatable schemas from the backend
-            const allSchemas = await WorkspaceService.listDataTableSchemas({
+            const tables = await WorkspaceService.listDataTableTables({
                 workspace: $workspaceStore
             });
-            // Get unique datatable names from dataTableRefs (the whitelisted tables)
-            const whitelistedDatatables = new Set(dataTableRefsObjects.map((ref) => ref.datatable));
-            // If no datatables are configured, return all available datatables
-            // This allows users to see all datatables in the @ context menu
-            if (whitelistedDatatables.size === 0) {
-                return allSchemas;
-            }
-            // Build a map of whitelisted tables per datatable: datatable -> schema -> Set<table>
-            const whitelistedTables = new Map();
-            for (const ref of dataTableRefsObjects) {
-                if (!ref.table)
-                    continue;
-                if (!whitelistedTables.has(ref.datatable)) {
-                    whitelistedTables.set(ref.datatable, new Map());
-                }
-                const schemaKey = ref.schema || 'public';
-                const schemaMap = whitelistedTables.get(ref.datatable);
-                if (!schemaMap.has(schemaKey)) {
-                    schemaMap.set(schemaKey, new Set());
-                }
-                schemaMap.get(schemaKey).add(ref.table);
+            return filterDatatableTables(tables);
+        },
+        getDatatableTableSchema: async (datatableName, schemaName, tableName) => {
+            if (!$workspaceStore) {
+                return {};
             }
-            // Filter schemas to only include whitelisted datatables and tables
-            const results = [];
-            for (const schema of allSchemas) {
-                if (!whitelistedDatatables.has(schema.datatable_name)) {
-                    continue;
-                }
-                const allowedTables = whitelistedTables.get(schema.datatable_name);
-                if (!allowedTables) {
-                    // Include the datatable but with empty schemas
-                    results.push({
-                        datatable_name: schema.datatable_name,
-                        schemas: {},
-                        error: schema.error
-                    });
-                    continue;
-                }
-                // Filter schemas to only include whitelisted tables
-                const filteredSchemas = {};
-                for (const [schemaName, tables] of Object.entries(schema.schemas)) {
-                    const allowedTablesInSchema = allowedTables.get(schemaName);
-                    if (!allowedTablesInSchema)
-                        continue;
-                    const filteredTables = {};
-                    for (const [tableName, columns] of Object.entries(tables)) {
-                        if (allowedTablesInSchema.has(tableName)) {
-                            filteredTables[tableName] = columns;
-                        }
-                    }
-                    if (Object.keys(filteredTables).length > 0) {
-                        filteredSchemas[schemaName] = filteredTables;
-                    }
-                }
-                results.push({
-                    datatable_name: schema.datatable_name,
-                    schemas: filteredSchemas,
-                    error: schema.error
+            if (!isDatatableTableWhitelisted(datatableName, schemaName, tableName)) {
+                const tableRef = formatDataTableRef({
+                    datatable: datatableName,
+                    schema: schemaName === 'public' ? undefined : schemaName,
+                    table: tableName
                 });
+                throw new Error(`Table '${tableRef}' is not configured in this app`);
             }
-            return results;
+            const schema = await WorkspaceService.getDataTableTableSchema({
+                workspace: $workspaceStore,
+                datatableName,
+                schemaName,
+                tableName
+            });
+            return schema.columns;
         },
         getAvailableDatatableNames: () => {
             // Get unique datatable names from dataTableRefs
-            return [...new Set(dataTableRefsObjects.map((ref) => ref.datatable))];
+            return [...dataTableWhitelist.datatables];
         },
         execDatatableSql: async (datatableName, sql, newTable) => {
             if (!$workspaceStore) {
@@ -450,6 +498,7 @@ $effect(() => {
                         delete $dbSchemas[resourcePath];
                     }
                 }
+                void aiChatManager.refreshDatatables();
                 // Check if result is an array (SELECT) or something else
                 if (Array.isArray(result)) {
                     return { success: true, result };
@@ -474,6 +523,7 @@ $effect(() => {
             if (!data.tables.includes(newRef)) {
                 data.tables = [...data.tables, newRef];
                 saveFrontendDraft();
+                void aiChatManager.refreshDatatables();
             }
         }
     });
@@ -481,11 +531,7 @@ $effect(() => {
 let selectedRunnable = $state(undefined);
 let selectedDocument = $state(undefined);
 let inspectorElement = $state(undefined);
-let selectionExcludedFromPrompt = $state(false);
 let codeSelection = $state(undefined);
-function toggleSelectionExcluded() {
-    selectionExcludedFromPrompt = !selectionExcludedFromPrompt;
-}
 let modules = $state({});
 // Normalize Windows-style path separators to Linux-style
 function normalizeFilePaths(filesObj) {
@@ -495,6 +541,10 @@ function normalizeFilePaths(filesObj) {
 }
 function listener(e) {
     if (e.data.type === 'setFiles') {
+        // Ignore setFiles from the iframe while it's reloading (e.g. theme switch);
+        // the iframe boots with its default template and would otherwise clobber the user's files.
+        if (suppressIframeSetFiles)
+            return;
         // Normalize Windows-style path separators to Linux-style
         const normalizedFiles = normalizeFilePaths(e.data.files);
         // Only mark pending changes if files actually changed (ignore echo from setFilesInIframe)
@@ -565,12 +615,41 @@ $effect(() => {
         iframeLoaded = true;
     });
 });
+$effect(() => {
+    // Toggling dark mode changes the iframe src, causing it to reload.
+    // Reset iframeLoaded so the populate effect refires after the new load,
+    // and suppress the iframe's initial setFiles (default template) until then.
+    void darkMode;
+    untrack(() => {
+        if (iframe && iframeLoaded) {
+            iframeLoaded = false;
+            suppressIframeSetFiles = true;
+            // Cancel any pending clear from a prior reload — otherwise on rapid
+            // toggles the previous timer can fire mid-reload and drop suppression
+            // before the iframe has finished booting.
+            if (suppressTimer !== undefined) {
+                clearTimeout(suppressTimer);
+                suppressTimer = undefined;
+            }
+        }
+    });
+});
 $effect(() => {
     iframe && iframeLoaded && files && populateFiles();
 });
 $effect(() => {
     iframe && iframeLoaded && runnables && populateRunnables();
 });
+$effect(() => {
+    // Re-push the shared UI whenever the iframe (re)loads or the
+    // fetched files change. We gate on `sharedUiLoaded` so the empty
+    // initial state isn't sent before the API call resolves.
+    if (iframe && iframeLoaded && sharedUiLoaded) {
+        // Touch the version so reassignments after a refresh re-fire this.
+        void sharedUiVersion;
+        untrack(() => setSharedUiInIframe());
+    }
+});
 function clearInspectorSelection() {
     inspectorElement = undefined;
     iframe?.contentWindow?.postMessage({ type: 'inspectorClear' }, '*');
@@ -584,21 +663,16 @@ function handleSelectFile(path) {
         path: path
     }, '*');
 }
-function handleClearRunnable() {
-    selectedRunnable = undefined;
-}
 // Track previous values for change detection
 let prevSelectedRunnable = undefined;
 let prevSelectedDocument = undefined;
-// Clear inspector and reset exclusion when selection changes
+// Clear inspector when selection changes
 $effect(() => {
     if (selectedRunnable !== prevSelectedRunnable || selectedDocument !== prevSelectedDocument) {
         // Only clear if we're actually switching to something different
         if (prevSelectedRunnable !== undefined || prevSelectedDocument !== undefined) {
             clearInspectorSelection();
         }
-        // Reset exclusion when switching files/runnables
-        selectionExcludedFromPrompt = false;
         prevSelectedRunnable = selectedRunnable;
         prevSelectedDocument = selectedDocument;
     }
@@ -694,6 +768,16 @@ function handleKeydown(e) {
 		canRedo={historyManager.canRedo}
 		onUndo={handleUndo}
 		onRedo={handleRedo}
+		onOpenYamlEditor={() => yamlEditorDrawer?.openDrawer()}
+	/>
+
+	<RawAppYamlEditor
+		bind:drawer={yamlEditorDrawer}
+		{summary}
+		{files}
+		{runnables}
+		{data}
+		onApply={handleYamlApply}
 	/>
 
 	<Splitpanes id="o2" class="grow min-h-0">