windmill-components 1.687.0 → 1.695.0

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/RawAppEditor.svelte

@@ -15,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,
@@ -118,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);
@@ -159,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,
@@ -322,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
@@ -364,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) {
@@ -467,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 };
@@ -491,6 +523,7 @@ $effect(() => {
             if (!data.tables.includes(newRef)) {
                 data.tables = [...data.tables, newRef];
                 saveFrontendDraft();
+                void aiChatManager.refreshDatatables();
             }
         }
     });
@@ -498,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) {
@@ -512,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)
@@ -582,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' }, '*');
@@ -601,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;
     }

package/package/components/raw_apps/RawAppInlineScriptEditor.svelte

@@ -10,6 +10,8 @@ import { emptySchema, getLocalSetting, sendUserToast, storeLocalSetting } from '
 import { scriptLangToEditorLang } from '../../scripts';
 import DiffEditor from '../DiffEditor.svelte';
 import CacheTtlPopup from '../apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte';
+import TagPopup from '../apps/editor/inlineScriptsPanel/TagPopup.svelte';
+import DeleteAfterUsePopup from './DeleteAfterUsePopup.svelte';
 import { computeFields } from '../apps/editor/inlineScriptsPanel/utils';
 import EditorBar from '../EditorBar.svelte';
 import { LanguageIcon } from '../common/languageIcons';
@@ -22,7 +24,7 @@ import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { editor as meditor } from 'monaco-editor';
 import { DebugConsole, getDAPClient, debugState, resetDAPClient, getDebugServerUrl, isDebuggable, getDebugFileExtension, fetchContextualVariables, signDebugRequest, getDebugErrorMessage } from '../debug';
 import TextInput from '../text_input/TextInput.svelte';
-let { inlineScript = $bindable(), name = $bindable(undefined), id, fields = $bindable(undefined), path, onRun, editor = $bindable(undefined), lastDeployedCode, onSelectionChange } = $props();
+let { inlineScript = $bindable(), name = $bindable(undefined), id, fields = $bindable(undefined), path, onRun, editor = $bindable(undefined), lastDeployedCode, onSelectionChange, delete_after_secs = $bindable() } = $props();
 let diffEditor = $state();
 let validCode = $state(true);
 async function inferInlineScriptSchema(language, content, schema) {
@@ -74,8 +76,10 @@ let width = $state(0);
 let inferAssetsRes = resource([() => inlineScript?.language, () => inlineScript?.content], async () => inlineScript && inferAssets(inlineScript.language, inlineScript.content));
 let preparedSqlQueries = usePreparedAssetSqlQueries(() => inferAssetsRes.current?.sql_queries, () => $workspaceStore);
 $effect(() => {
-    if (inlineScript && inferAssetsRes.current)
-        inlineScript.assets = inferAssetsRes.current?.assets;
+    if (!inlineScript || !inferAssetsRes.current || inferAssetsRes.current.status === 'error')
+        return;
+    const newAssets = inferAssetsRes.current.assets;
+    inlineScript.assets = newAssets.length > 0 ? newAssets : undefined;
 });
 // Debug mode state
 const DEBUG_BETA_WARNING_KEY = 'debug_beta_warning_confirmed';
@@ -500,8 +504,10 @@ $effect(() => {
 			{/if}
 			<div class="flex w-full flex-row gap-2 items-center justify-end">
 				{#if inlineScript}
+					<TagPopup bind:tag={inlineScript.tag} />
 					<CacheTtlPopup bind:cache_ttl={inlineScript.cache_ttl} />
 				{/if}
+				<DeleteAfterUsePopup bind:delete_after_secs />
 
 				<Button
 					variant="default"

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

@@ -12,6 +12,7 @@ interface Props {
     onRun: () => Promise<void>;
     editor?: any | undefined;
     lastDeployedCode?: string | undefined;
+    delete_after_secs?: number | undefined;
     /** Called when code is selected in the editor */
     onSelectionChange?: (selection: {
         content: string;
@@ -57,6 +58,6 @@ declare const RawAppInlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props
     stepOut: () => Promise<void>;
     clearAllBreakpoints: () => void;
     toggleDebugMode: () => void;
-}, "name" | "fields" | "inlineScript" | "editor">;
+}, "name" | "fields" | "inlineScript" | "delete_after_secs" | "editor">;
 type RawAppInlineScriptEditor = InstanceType<typeof RawAppInlineScriptEditor>;
 export default RawAppInlineScriptEditor;

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -156,6 +156,7 @@ $effect(() => {
 					bind:inlineScript={runnable.inlineScript}
 					bind:name={runnable.name}
 					bind:fields={runnable.fields}
+					bind:delete_after_secs={runnable.delete_after_secs}
 					onRun={testPreview}
 					on:delete
 					path={appPath}

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

@@ -4,6 +4,7 @@ type RunnableWithInlineScript = RunnableWithFields & {
     inlineScript?: InlineScript & {
         language: ScriptLang;
     };
+    delete_after_secs?: number;
 };
 export type Runnable = RunnableWithInlineScript | undefined;
 interface Props {

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte

@@ -3,7 +3,7 @@ import { addWhitespaceBeforeCapitals, capitalize, classNames } from '../../utils
 import Tooltip from '../Tooltip.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import { Loader2, Pen, User, Shield } from 'lucide-svelte';
+import { Loader2, Pen, User, Shield, Lock } from 'lucide-svelte';
 import Toggle from '../Toggle.svelte';
 import StaticInputEditor from '../apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte';
 import { fieldTypeToTsType } from '../apps/utils';
@@ -11,10 +11,22 @@ import Select from '../select/Select.svelte';
 import { userStore, workspaceStore } from '../../stores';
 // Build ctx properties with current user's actual values
 let ctxProperties = $derived([
-    { value: 'username', label: 'Username', subtitle: `string — "${$userStore?.username ?? 'unknown'}"` },
+    {
+        value: 'username',
+        label: 'Username',
+        subtitle: `string — "${$userStore?.username ?? 'unknown'}"`
+    },
     { value: 'email', label: 'Email', subtitle: `string — "${$userStore?.email ?? 'unknown'}"` },
-    { value: 'groups', label: 'Groups', subtitle: `string[] — ${JSON.stringify($userStore?.groups ?? [])}` },
-    { value: 'workspace', label: 'Workspace', subtitle: `string — "${$workspaceStore ?? 'unknown'}"` },
+    {
+        value: 'groups',
+        label: 'Groups',
+        subtitle: `string[] — ${JSON.stringify($userStore?.groups ?? [])}`
+    },
+    {
+        value: 'workspace',
+        label: 'Workspace',
+        subtitle: `string — "${$workspaceStore ?? 'unknown'}"`
+    },
     { value: 'author', label: 'Author', subtitle: `string — "${$userStore?.email ?? 'unknown'}"` }
 ]);
 let { id, componentInput = $bindable(), key, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, loading = false, documentationLink = undefined } = $props();
@@ -83,7 +95,13 @@ run(() => {
 						{#snippet children({ item })}
 							<ToggleButton {item} value="user" icon={User} iconOnly tooltip="User Input" />
 							<ToggleButton {item} value="static" icon={Pen} iconOnly tooltip="Static" />
-							<ToggleButton {item} value="ctx" icon={Shield} iconOnly tooltip="Context (secure backend value)" />
+							<ToggleButton
+								{item}
+								value="ctx"
+								icon={Shield}
+								iconOnly
+								tooltip="Context (secure backend value)"
+							/>
 						{/snippet}
 					</ToggleButtonGroup>
 				{/if}
@@ -135,5 +153,30 @@ run(() => {
 				>
 			</div>
 		{/if}
+		{#if componentInput?.type === 'user'}
+			<div class="flex flex-row items-center gap-1">
+				<Toggle
+					size="xs"
+					checked={Boolean(componentInput.sensitive)}
+					on:change={(e) => {
+						if (e.detail) {
+							componentInput.sensitive = true
+						} else {
+							delete componentInput.sensitive
+						}
+					}}
+					textClass="!text-tertiary"
+					options={{
+						right: 'sensitive'
+					}}
+				/>
+				<Lock size={12} class="text-tertiary" />
+				<Tooltip
+					>The value is encrypted before being stored in the job's args, so it is not exposed in
+					plaintext to anyone with read access to the job. The script still receives the decrypted
+					value at runtime.</Tooltip
+				>
+			</div>
+		{/if}
 	</div>
 {/if}