windmill-components 1.511.1 → 1.522.0

package/package/components/DeployWorkspace.svelte

@@ -567,7 +567,7 @@ async function showDiff(kind, path) {
 <div class="mt-6"></div>
 
 {#if !$enterpriseLicense}
-	<Alert type="error" title="Enterprise license required"
+	<Alert type="warning" title="Enterprise license required"
 		>Deploy to staging/prod from the web UI is only available with an enterprise license</Alert
 	>
 {:else if notSet == true}

package/package/components/DisplayResult.svelte

@@ -25,13 +25,14 @@ import HighlightTheme from './HighlightTheme.svelte';
 import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte';
 import { toJsonStr } from '../utils';
 import { userStore } from '../stores';
+import ResultStreamDisplay from './ResultStreamDisplay.svelte';
 const IMG_MAX_SIZE = 10000000;
 const TABLE_MAX_SIZE = 5000000;
 const DISPLAY_MAX_SIZE = 100000;
 const dispatch = createEventDispatcher();
 let resultKind = $state();
 let hasBigInt = $state(false);
-let { result, requireHtmlApproval = false, filename = undefined, disableExpand = false, jobId = undefined, workspaceId = undefined, hideAsJson = false, noControls = false, drawerOpen = $bindable(false), nodeId = undefined, language = undefined, appPath = undefined, customUi = undefined, isTest = true, externalToolbarAvailable = false, forceJson = $bindable(false), copilot_fix, children } = $props();
+let { result, requireHtmlApproval = false, filename = undefined, disableExpand = false, jobId = undefined, workspaceId = undefined, hideAsJson = false, noControls = false, drawerOpen = $bindable(false), nodeId = undefined, language = undefined, appPath = undefined, customUi = undefined, isTest = true, externalToolbarAvailable = false, forceJson = $bindable(false), result_stream = undefined, fixTableSizingToParent = false, copilot_fix, children, loading = false } = $props();
 let enableHtml = $state(false);
 let s3FileDisplayRawMode = $state(false);
 function isTableRow(result) {
@@ -352,7 +353,15 @@ $effect(() => {
 </script>
 
 <HighlightTheme />
-{#if is_render_all}
+
+{#if result_stream && result == undefined}
+	<div class="flex flex-col w-full gap-2">
+		<div class="flex items-center gap-2 text-tertiary">
+			<Loader2 class="animate-spin" size={16} /> Streaming result
+		</div>
+		<ResultStreamDisplay {result_stream} />
+	</div>
+{:else if is_render_all}
 	<div class="flex flex-col w-full gap-2">
 		{#if !noControls}
 			<div class="text-tertiary text-sm">
@@ -392,7 +401,9 @@ $effect(() => {
 	<div class="text-red-400">Non displayable object</div>
 {:else}
 	<div
-		class="inline-highlight relative grow {['plain', 'markdown'].includes(resultKind ?? '')
+		class="inline-highlight relative grow flex flex-col h-full {['plain', 'markdown'].includes(
+			resultKind ?? ''
+		)
 			? ''
 			: 'min-h-[160px]'}"
 	>
@@ -447,16 +458,31 @@ $effect(() => {
 					{/if}
 				</div>
 			</div>
-			<div class="grow">
+			<div class="grow relative">
 				{#if !forceJson && resultKind === 'table-col'}
 					{@const data = 'table-col' in result ? result['table-col'] : result}
-					<AutoDataTable objects={objectOfArraysToObjects(data)} />
+					<AutoDataTable
+						class={fixTableSizingToParent
+							? 'absolute inset-0 [&>div]:h-full [&>div]:min-h-[10rem]'
+							: ''}
+						objects={objectOfArraysToObjects(data)}
+					/>
 				{:else if !forceJson && resultKind === 'table-row'}
 					{@const data = 'table-row' in result ? result['table-row'] : result}
-					<AutoDataTable objects={arrayOfRowsToObjects(data)} />
+					<AutoDataTable
+						class={fixTableSizingToParent
+							? 'absolute inset-0 [&>div]:h-full [&>div]:min-h-[10rem]'
+							: ''}
+						objects={arrayOfRowsToObjects(data)}
+					/>
 				{:else if !forceJson && resultKind === 'table-row-object'}
 					{@const data = 'table-row-object' in result ? result['table-row-object'] : result}
-					<AutoDataTable objects={handleArrayOfObjectsHeaders(data)} />
+					<AutoDataTable
+						class={fixTableSizingToParent
+							? 'absolute inset-0 [&>div]:h-full [&>div]:min-h-[10rem]'
+							: ''}
+						objects={handleArrayOfObjectsHeaders(data)}
+					/>
 				{:else if !forceJson && resultKind === 'html'}
 					<div class="h-full">
 						{#if !requireHtmlApproval || enableHtml}
@@ -538,7 +564,7 @@ $effect(() => {
 				{:else if !forceJson && resultKind === 'plain'}<div class="h-full text-2xs"
 						><pre class="whitespace-pre-wrap"
 							>{typeof result === 'string' ? result : result?.['result']}</pre
-						>{#if !noControls}
+						>{#if !noControls && !loading}
 							<div class="flex">
 								<Button
 									on:click={() =>

package/package/components/DisplayResult.svelte.d.ts

@@ -11,12 +11,15 @@ interface Props {
     noControls?: boolean;
     drawerOpen?: boolean;
     nodeId?: string | undefined;
+    loading?: boolean | undefined;
     language?: string | undefined;
     appPath?: string | undefined;
     customUi?: DisplayResultUi | undefined;
     isTest?: boolean;
     externalToolbarAvailable?: boolean;
     forceJson?: boolean;
+    result_stream?: string | undefined;
+    fixTableSizingToParent?: boolean;
     copilot_fix?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
 }
@@ -40,6 +43,6 @@ declare const DisplayResult: $$__sveltets_2_IsomorphicComponent<Props, {
 }, {}, {
     openDrawer: () => void;
     getToolbarLocation: () => "external" | "self" | undefined;
-}, "drawerOpen" | "forceJson">;
+}, "forceJson" | "drawerOpen">;
 type DisplayResult = InstanceType<typeof DisplayResult>;
 export default DisplayResult;

package/package/components/DynSelect.svelte

@@ -15,63 +15,87 @@ function validSelectObject(x) {
 </script>
 
 <script lang="ts">import { usePromise } from '../svelte5Utils.svelte';
-import { deepEqual } from 'fast-equals';
-import JobLoader from './JobLoader.svelte';
+import JobLoader, {} from './JobLoader.svelte';
 import Select from './select/Select.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Loader2 } from 'lucide-svelte';
+import {} from '../utils';
+import { deepEqual } from 'fast-equals';
 import { untrack } from 'svelte';
-import { readFieldsRecursively } from '../utils';
-let { value = $bindable(), helperScript, entrypoint, args: _args, name } = $props();
-let args = $state(structuredClone($state.snapshot(_args)));
-$effect(() => {
-    readFieldsRecursively(_args, { excludeField: [name] });
-    untrack(() => !deepEqual(args, _args) && (args = $state.snapshot(_args)));
-});
+let { value = $bindable(), helperScript, entrypoint, otherArgs: otherArgs } = $props();
+let resultJobLoader = $state();
+let _items = usePromise(getItemsFromOptions, { clearValueOnRefresh: false });
+let items = $derived(_items.value);
+let filterText = $state('');
+let open = $state(false);
 async function getItemsFromOptions() {
     return new Promise((resolve, reject) => {
         let cb = {
-            done(res) {
-                if (!res || !Array.isArray(res)) {
-                    reject('Result was not an array');
+            doneResult({ result }) {
+                if (!result || !Array.isArray(result)) {
+                    if (result?.error?.message && result?.error?.name) {
+                        reject('Error in DynSelect function execution: ' +
+                            result?.error?.name +
+                            ' - ' +
+                            result?.error?.message);
+                    }
+                    else {
+                        reject('Result was not an array but ' + JSON.stringify(result, null, 2));
+                    }
                     return;
                 }
-                if (res.length == 0)
+                if (result.length == 0)
                     resolve([]);
-                if (res.every((x) => typeof x == 'string')) {
-                    res = res.map((x) => ({ label: x, value: x }));
+                if (result.every((x) => typeof x == 'string')) {
+                    result = result.map((x) => ({ label: x, value: x }));
                 }
-                else if (res.find((x) => validSelectObject(x) != undefined)) {
-                    reject(validSelectObject(res.find((x) => validSelectObject(x) != undefined)));
-                }
-                else {
-                    if (filterText != undefined && filterText != '')
-                        res = res.filter((x) => x['label'].includes(filterText));
-                    resolve(res);
+                else if (result.find((x) => validSelectObject(x) != undefined)) {
+                    reject(validSelectObject(result.find((x) => validSelectObject(x) != undefined)));
+                    return;
                 }
+                resolve(result);
             },
             cancel: () => reject(),
-            error: (err) => reject(err)
+            doneError({ id, error }) {
+                reject(error);
+            }
         };
         helperScript?.type == 'inline'
-            ? resultJobLoader?.runPreview(helperScript?.path ?? 'NO_PATH', helperScript.code, helperScript.lang, { ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, undefined, undefined, undefined, cb)
-            : resultJobLoader?.runScriptByHash(helperScript?.hash ?? 'NO_HASH', { ...args, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, cb);
+            ? resultJobLoader?.runPreview(helperScript?.path ?? 'NO_PATH', helperScript.code, helperScript.lang, { ...otherArgs, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, undefined, undefined, undefined, cb)
+            : resultJobLoader?.runScriptByHash(helperScript?.hash ?? 'NO_HASH', { ...otherArgs, filterText, _ENTRYPOINT_OVERRIDE: entrypoint }, cb);
     });
 }
-let _items = usePromise(getItemsFromOptions);
-let items = $derived(_items.value);
+let neverLoaded = $state(true);
+$effect(() => {
+    if (_items.value && value) {
+        if (!_items.value.find((x) => x.value == value)) {
+            value = undefined;
+        }
+    }
+});
+let lastArgs = $state.snapshot(otherArgs);
+let timeout = $state();
+let nargs = $state($state.snapshot(otherArgs));
+$effect(() => {
+    otherArgs;
+    untrack(() => clearTimeout(timeout));
+    timeout = setTimeout(() => {
+        nargs = $state.snapshot(otherArgs);
+    }, 1000);
+});
 $effect(() => {
     ;
-    [args, name, entrypoint, helperScript, filterText];
-    untrack(() => _items.refresh());
+    [filterText, entrypoint, helperScript];
+    if (resultJobLoader && (open || neverLoaded || !deepEqual(lastArgs, nargs))) {
+        neverLoaded = false;
+        lastArgs = $state.snapshot(otherArgs);
+        _items.refresh();
+    }
 });
-let resultJobLoader = $state();
-let filterText = $state('');
-let open = $state(false);
 </script>
 
 {#if helperScript}
-	<JobLoader bind:this={resultJobLoader} />
+	<JobLoader onlyResult bind:this={resultJobLoader} />
 
 	<div class="w-full flex-col flex">
 		<Select
@@ -85,7 +109,7 @@ let open = $state(false);
 		/>
 		{#if _items.error}
 			<div class="text-red-400 text-2xs">
-				error: <Tooltip>{JSON.stringify(_items.error)}</Tooltip>
+				error: <Tooltip>{_items.error}</Tooltip>
 			</div>
 		{/if}
 	</div>

package/package/components/DynSelect.svelte.d.ts

@@ -1,17 +1,9 @@
-import type { Script } from '../gen';
+import { type DynamicSelect } from '../utils';
 interface Props {
     value?: any;
-    helperScript?: {
-        type: 'inline';
-        path?: string;
-        lang: Script['language'];
-        code: string;
-    } | {
-        type: 'hash';
-        hash: string;
-    };
+    helperScript?: DynamicSelect.HelperScript;
     entrypoint: string;
-    args?: Record<string, any>;
+    otherArgs?: Record<string, any>;
     name: string;
 }
 declare const DynSelect: import("svelte").Component<Props, {}, "value">;

package/package/components/EditableSchemaForm.svelte

@@ -17,18 +17,38 @@ import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte
 import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
 import Toggle from './Toggle.svelte';
-import { emptyString } from '../utils';
+import { DynamicSelect, emptyString } from '../utils';
 import Popover from './meltComponents/Popover.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import { deepEqual } from 'fast-equals';
 import { tweened } from 'svelte/motion';
+import Section from './Section.svelte';
+import Editor from './Editor.svelte';
 // export let openEditTab: () => void = () => {}
 const dispatch = createEventDispatcher();
-let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', openEditTab, addProperty, runButton, extraTab } = $props();
+let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, openEditTab, addProperty, runButton, extraTab } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
     }
+    if (dynSelectLang === undefined) {
+        dynSelectLang = schema?.['x-windmill-dyn-select-lang'] || 'bun';
+    }
+    if (dynSelectCode === undefined) {
+        dynSelectCode = schema?.['x-windmill-dyn-select-code'] || '';
+    }
+});
+$effect(() => {
+    if (schema && dynSelectCode !== undefined && dynSelectLang !== undefined) {
+        if (dynSelectCode && dynSelectCode.trim()) {
+            schema['x-windmill-dyn-select-code'] = dynSelectCode.trim();
+            schema['x-windmill-dyn-select-lang'] = dynSelectLang;
+        }
+        else {
+            delete schema['x-windmill-dyn-select-code'];
+            delete schema['x-windmill-dyn-select-lang'];
+        }
+    }
 });
 export function setDefaults() {
     const nargs = {};
@@ -95,9 +115,11 @@ function computeSelected(property) {
         ? property.type
         : property.format === 'resource-s3_object'
             ? 'S3'
-            : property.oneOf && property.oneOf.length >= 2
-                ? 'oneOf'
-                : 'object';
+            : property.format?.startsWith('dynselect-')
+                ? 'dynselect'
+                : property.oneOf && property.oneOf.length >= 2
+                    ? 'oneOf'
+                    : 'object';
 }
 export function openField(key) {
     opened = key;
@@ -150,6 +172,7 @@ let jsonView = $state(customUi?.jsonOnly == true);
 let schemaString = $state(JSON.stringify(schema, null, '\t'));
 let error = $state(undefined);
 let editor = $state(undefined);
+let dynamicSelectEditor = $state(undefined);
 export function updateJson() {
     schemaString = JSON.stringify(schema, null, '\t');
     editor?.setCode(schemaString);
@@ -191,6 +214,37 @@ $effect(() => {
 $effect(() => {
     !!editTab ? openEditTabFn() : closeEditTab();
 });
+let dynSelectFunctions = $derived(Object.entries(schema?.properties ?? {})
+    .filter(([_, property]) => {
+    const props = property;
+    return (props.type === 'object' &&
+        (props.format?.startsWith('dynselect-') || props.format?.startsWith('dynselect_')));
+})
+    .map(([fieldName, _]) => fieldName.replace(/\s+/g, '_')));
+let typeOptions = [
+    ['String', 'string'],
+    ['Number', 'number'],
+    ['Integer', 'integer'],
+    ['Object', 'object'],
+    ['OneOf', 'oneOf'],
+    ['Array', 'array'],
+    ['Boolean', 'boolean'],
+    ['S3 Object', 'S3']
+];
+if (showDynSelectOpt) {
+    typeOptions.push(['DynSelect', 'dynselect']);
+}
+function initDynSelectFn(lang) {
+    const generateFn = DynamicSelect.getGenerateTemplateFn(lang);
+    return Object.entries(schema?.properties ?? {})
+        .map(([functionName]) => generateFn(functionName))
+        .join('');
+}
+function updateDynSelectCode(functionName, lang = 'bun') {
+    const generateFn = DynamicSelect.getGenerateTemplateFn(lang);
+    const code = generateFn(functionName);
+    dynSelectCode = dynSelectCode ? dynSelectCode.concat(code) : code;
+}
 </script>
 
 <div class="w-full h-full">
@@ -249,6 +303,11 @@ $effect(() => {
 								}
 								tick().then(() => dispatch('change', schema))
 							}}
+							helperScript={{
+								type: 'inline',
+								code: dynSelectCode!,
+								lang: dynSelectLang!
+							}}
 							prettifyHeader={isAppInput}
 							disabled={!!previewSchema}
 							{diff}
@@ -263,6 +322,57 @@ $effect(() => {
 						/>
 
 						{@render runButton?.()}
+
+						<div class="h-full">
+							{#if dynSelectFunctions.length > 0}
+								<Section
+									label="Dynamic select functions"
+									collapsable={true}
+									collapsed={false}
+									class="text-sm"
+								>
+									<div class="flex flex-col gap-2 h-full">
+										{#if dynSelectFunctions.length > 0}
+											<div class="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
+												<div class="text-sm font-medium text-blue-800 dark:text-blue-200 mb-2">
+													Expected Functions for Dynamic Select Fields:
+												</div>
+												<ul class="text-xs text-blue-700 dark:text-blue-300 space-y-1">
+													{#each dynSelectFunctions as functionName}
+														<li class="font-mono bg-blue-100 dark:bg-blue-800/30 px-2 py-1 rounded">
+															{functionName}()
+														</li>
+													{/each}
+												</ul>
+											</div>
+										{/if}
+										<ToggleButtonGroup
+											bind:selected={dynSelectLang}
+											on:selected={({ detail }) => {
+												dynSelectCode = initDynSelectFn(detail)
+											}}
+										>
+											{#snippet children({ item })}
+												<ToggleButton value="bun" label="Typescript (Bun)" {item} />
+												<ToggleButton value="python3" label="Python" {item} />
+											{/snippet}
+										</ToggleButtonGroup>
+										{#key dynSelectLang}
+											<div class="border w-full h-full">
+												<Editor
+													bind:this={dynamicSelectEditor}
+													class="flex flex-1 grow h-80 w-full"
+													scriptLang={dynSelectLang}
+													useWebsockets={false}
+													automaticLayout
+													bind:code={dynSelectCode}
+												/>
+											</div>
+										{/key}
+									</div>
+								</Section>
+							{/if}
+						</div>
 					</div>
 				</div>
 			</Pane>
@@ -424,6 +534,7 @@ $effect(() => {
 																				(v) => {
 																					const isS3 = v == 'S3'
 																					const isOneOf = v == 'oneOf'
+																					const isDynSelect = v == 'dynselect'
 
 																					const emptyProperty = {
 																						contentEncoding: undefined,
@@ -449,6 +560,15 @@ $effect(() => {
 																							type: 'object',
 																							format: 'resource-s3_object'
 																						}
+																					} else if (isDynSelect) {
+																						const functionName = argName.replace(/\s+/g, '_')
+																						schema.properties[argName] = {
+																							...emptyProperty,
+																							type: 'object',
+																							format: 'dynselect-' + functionName
+																						}
+																						updateDynSelectCode(argName, dynSelectLang)
+																						dynamicSelectEditor?.setCode(dynSelectCode || '')
 																					} else if (isOneOf) {
 																						schema.properties[argName] = {
 																							...emptyProperty,
@@ -498,7 +618,7 @@ $effect(() => {
 																			}}
 																		>
 																			{#snippet children({ item })}
-																				{#each [['String', 'string'], ['Number', 'number'], ['Integer', 'integer'], ['Object', 'object'], ['OneOf', 'oneOf'], ['Array', 'array'], ['Boolean', 'boolean'], ['S3 Object', 'S3']] as x}
+																				{#each typeOptions as x}
 																					<ToggleButton value={x[1]} label={x[0]} {item} />
 																				{/each}
 																			{/snippet}

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Schema } from '../common';
+import { type ScriptLang } from '../gen';
 import type { SchemaDiff } from './schema/schemaUtils.svelte';
 import type { EditableSchemaFormUi } from './custom_ui';
 interface Props {
@@ -27,6 +28,9 @@ interface Props {
     customUi?: EditableSchemaFormUi | undefined;
     pannelExtraButtonWidth?: number;
     class?: string;
+    dynSelectCode?: string | undefined;
+    dynSelectLang?: ScriptLang | undefined;
+    showDynSelectOpt?: boolean;
     openEditTab?: import('svelte').Snippet;
     addProperty?: import('svelte').Snippet;
     runButton?: import('svelte').Snippet;
@@ -59,6 +63,6 @@ declare const EditableSchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     openField: (key: string) => void;
     deleteField: (key: string) => void;
     updateJson: () => void;
-}, "args" | "schema" | "isValid" | "editPanelSize">;
+}, "args" | "schema" | "isValid" | "editPanelSize" | "dynSelectCode" | "dynSelectLang">;
 type EditableSchemaForm = InstanceType<typeof EditableSchemaForm>;
 export default EditableSchemaForm;

package/package/components/Editor.svelte

@@ -138,7 +138,7 @@ const dispatch = createEventDispatcher();
 let graphqlService = undefined;
 let dbSchema = $state(undefined);
 let destroyed = false;
-const uri = computeUri(filePath, scriptLang);
+const uri = computeUri(untrack(() => filePath), scriptLang);
 console.log('uri', uri);
 function computeUri(filePath, scriptLang) {
     let file;

package/package/components/EditorBar.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { run } from 'svelte/legacy';
-import { ResourceService, VariableService } from '../gen';
+import { ResourceService, VariableService, WorkspaceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { base } from '../base';
 import ItemPicker from './ItemPicker.svelte';
@@ -20,7 +20,7 @@ import { createEventDispatcher, untrack } from 'svelte';
 import { sendUserToast } from '../toast';
 import { getScriptByPath, scriptLangToEditorLang } from '../scripts';
 import Toggle from './Toggle.svelte';
-import { DiffIcon, DollarSign, File, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
+import { DatabaseIcon, DiffIcon, DollarSign, File, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
 import { capitalize, formatS3Object, toCamel } from '../utils';
 import ScriptVersionHistory from './ScriptVersionHistory.svelte';
 import ScriptGen from './copilot/ScriptGen.svelte';
@@ -29,6 +29,7 @@ import Popover from './Popover.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import EditorSettings from './EditorSettings.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
+import DucklakeIcon from './icons/DucklakeIcon.svelte';
 let { lang, editor, websocketAlive, iconOnly = false, validCode = true, kind = 'script', template = 'script', collabMode = false, collabLive = false, collabUsers = [], scriptPath = undefined, diffEditor = undefined, args, noHistory = false, saveToWorkspace = false, customUi = {}, lastDeployedCode = undefined, diffMode = false, showHistoryDrawer = $bindable(false), right, openAiChat = false } = $props();
 let contextualVariablePicker = $state();
 let variablePicker = $state();
@@ -37,6 +38,8 @@ let resourceTypePicker = $state();
 let variableEditor = $state();
 let resourceEditor = $state();
 let s3FilePicker = $state();
+let ducklakePicker = $state();
+let databasePicker = $state();
 let showContextVarPicker = $derived([
     'python3',
     'bash',
@@ -82,12 +85,13 @@ let showResourcePicker = $derived([
     'rust',
     'csharp',
     'nu',
-    'java',
-    'duckdb'
+    'java'
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showS3Picker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
     ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)));
+let showDucklakePicker = $derived(['duckdb'].includes(lang ?? ''));
+let showDatabasePicker = $derived(['duckdb'].includes(lang ?? ''));
 let showResourceTypePicker = $derived(['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
     lang === 'python3' ||
     lang === 'php');
@@ -551,6 +555,48 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 <ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
+{#if showDucklakePicker}
+	<ItemPicker
+		bind:this={ducklakePicker}
+		pickCallback={async (_, name) => {
+			const connStr = name == 'main' ? 'ducklake' : `ducklake://${name}`
+			editor?.insertAtCursor(`ATTACH '${connStr}' AS dl; USE dl;\n`)
+		}}
+		tooltip="Attach a Ducklake in your DuckDB script. Ducklake allows you to manipulate large data on S3 blob files through a traditional SQL interface."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/ducklake"
+		itemName="ducklake"
+		loadItems={async () =>
+			(await WorkspaceService.listDucklakes({ workspace: $workspaceStore ?? 'NO_W' })).map(
+				(path) => ({ path })
+			)}
+	/>
+{/if}
+
+{#if showDatabasePicker}
+	<ItemPicker
+		bind:this={databasePicker}
+		pickCallback={(path, _, resType) => {
+			if (!editor) return
+			if (lang == 'duckdb') {
+				let t = { postgresql: 'postgres', mysql: 'mysql', bigquery: 'bigquery' }[resType]
+				editor.insertAtCursor(`ATTACH 'res://${path}' AS db (TYPE ${t});`)
+			}
+			sendUserToast(`${path} inserted at cursor`)
+		}}
+		tooltip="Attach a database resource in your script. This allows you to query data from the database using SQL."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/resources_and_types"
+		itemName="Database"
+		buttons={{ 'Edit/View': (x) => resourceEditor?.initEdit(x) }}
+		extraField="description"
+		extraField2="resource_type"
+		loadItems={async () =>
+			await ResourceService.listResource({
+				workspace: $workspaceStore ?? 'NO_W',
+				resourceType: 'postgresql,mysql,bigquery'
+			})}
+	></ItemPicker>
+{/if}
+
 <S3FilePicker
 	bind:this={s3FilePicker}
 	readOnlyMode={false}
@@ -664,6 +710,38 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				</Button>
 			{/if}
 
+			{#if showDatabasePicker && customUi?.database != false}
+				<Button
+					aiId="editor-bar-add-database"
+					aiDescription="Add database"
+					title="Add database"
+					color="light"
+					on:click={() => databasePicker?.openDrawer()}
+					size="xs"
+					btnClasses="!font-medium text-tertiary"
+					spacingSize="md"
+					startIcon={{ icon: DatabaseIcon }}
+					{iconOnly}
+					>+Database
+				</Button>
+			{/if}
+
+			{#if showDucklakePicker && customUi?.ducklake != false}
+				<Button
+					aiId="editor-bar-use-ducklake"
+					aiDescription="Use Ducklake"
+					title="Use Ducklake"
+					color="light"
+					on:click={() => ducklakePicker?.openDrawer()}
+					size="xs"
+					btnClasses="!font-medium text-tertiary"
+					spacingSize="md"
+					startIcon={{ icon: DucklakeIcon }}
+					{iconOnly}
+					>+Ducklake
+				</Button>
+			{/if}
+
 			{#if customUi?.reset != false}
 				<Button
 					aiId="editor-bar-reset-content"