windmill-components 1.558.4 → 1.596.0

package/package/components/copilot/prompts/genPrompt.js

@@ -46,17 +46,20 @@ export const GEN_PROMPT = {
         "php": {
             "prompt": "<contextual_information>\nYou have to write a function in php called \"main\". Specify the parameter types. Do not call the main function. You should generally return the result. The script must start with `<?php`.\nYou can take as parameters resources which are classes containing credentials or configuration information. For Windmill to correctly detect the resources to be passed, the resource type name has to be exactly as specified in the following list:\n<resourceTypes>\n{resourceTypes}\n</resourceTypes>\nYou need to define the type of the resources that are needed before the main function, but only include them if they are actually needed to achieve the function purpose.\nBefore defining each type, check if the class already exists using class_exists.\nThe resource type name has to be exactly as specified.\nIf you need to import libraries, you need to specify them as comments in the following manner before the main function:\n```\n// require:\n// mylibrary/mylibrary\n// myotherlibrary/myotherlibrary@optionalversion\n```\nNo need to require autoload, it is already done.\n<contextual_information>\nMy instructions: {description}"
         },
-        "frontend": {
-            "prompt": "Write client-side javascript code that should {description}. \n\n<contextual_information>\nYou can access the context object with the ctx global variable. \nThe app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'\nYou can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)\nYou can use the openModal and closeModal functions to open and close a modal: openModal(id: string), closeModal(id: string)\nYou can use the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)\nYou can use the recompute function to recompute a component: recompute(id: string)\nYou can use the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)\nYou can use the setSelectedIndex function to select a row in a table or an AG Grid table: setSelectedIndex(id: string, index: number)\nThe setValue function is meant to set or force the value of a component: setValue(id: string, value: any)\nYou can validate a specific field of a form: validate(id: string, key: string)\nYou can validate all fields of a form: validateAll(id: string, key: string)\nYou can invalidate a specific field of a form: invalidate(id: string, key: string, error: string)\n</contextual_information>"
-        },
-        "transformer": {
-            "prompt": "Write client-side javascript code that should process the variable `result` according to the following instructions: {description}.\nThe variable `result` is available globally.\nAt the end of the code, the processed result has to be returned.\n\n<contextual_information>\nYou can access the context object with the ctx global variable. \nThe app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'\nYou can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)\nYou can use the openModal and closeModal functions to open and close a modal: openModal(id: string), closeModal(id: string)\nYou can use the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)\nYou can use the recompute function to recompute a component: recompute(id: string)\nYou can use the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)\nYou can use the setSelectedIndex function to select a row in a table or an AG Grid table: setSelectedIndex(id: string, index: number)\nThe setValue function is meant to set or force the value of a component: setValue(id: string, value: any)\nYou can validate a specific field of a form: validate(id: string, key: string)\nYou can validate all fields of a form: validateAll(id: string, key: string)\nYou can invalidate a specific field of a form: invalidate(id: string, key: string, error: string)\n</contextual_information>"
-        },
         "csharp": {
             "prompt": "<contextual_information>\nYou have to write C# code with a public static Main method inside a class. The class name is irrelevant. Specify the parameter types. Do not call the main function. You should generally return the result.\nNuGet packages can be added using the format: #r \"nuget: PackageName, Version\" at the top of the script.\nThe Main method signature should be: public static ReturnType Main(parameter types...)\nArguments are used to generate the input specification and create the frontend UI for the script.\n</contextual_information>\nMy instructions: {description}"
         },
         "java": {
             "prompt": "<contextual_information>\nYou have to write Java code with a Main public class and a public static main() method. The return type can be Object or void. Do not call the main function. You should generally return the result.\nDependencies can be added using the format: //requirements://groupId:artifactId:version at the top of the script.\nThe method signature should be: public static Object main(parameter types...)\nArguments are used to generate the input specification and create the frontend UI for the script.\n</contextual_information>\nMy instructions: {description}"
+        },
+        "frontend": {
+            "prompt": "Write client-side javascript code that should {description}. \n\n<contextual_information>\nYou can access the context object with the ctx global variable. \nThe app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'\nYou can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)\nYou can use the openModal and closeModal functions to open and close a modal: openModal(id: string), closeModal(id: string)\nYou can use the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)\nYou can use the recompute function to recompute a component: recompute(id: string)\nYou can use the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)\nYou can use the setSelectedIndex function to select a row in a table or an AG Grid table: setSelectedIndex(id: string, index: number)\nThe setValue function is meant to set or force the value of a component: setValue(id: string, value: any)\nYou can validate a specific field of a form: validate(id: string, key: string)\nYou can validate all fields of a form: validateAll(id: string, key: string)\nYou can invalidate a specific field of a form: invalidate(id: string, key: string, error: string)\n</contextual_information>"
+        },
+        "transformer": {
+            "prompt": "Write client-side javascript code that should process the variable `result` according to the following instructions: {description}.\nThe variable `result` is available globally.\nAt the end of the code, the processed result has to be returned.\n\n<contextual_information>\nYou can access the context object with the ctx global variable.\nThe app state is a store that can be used to store data. You can access and update the state object with the state global variable like this: state.foo = 'bar'\nYou can use the goto function to navigate to a specific URL: goto(path: string, newTab?: boolean)\nYou can use the openModal and closeModal functions to open and close a modal: openModal(id: string), closeModal(id: string)\nYou can use the setTab function to manually set the tab of a Tab component: setTab(id: string, index: string)\nYou can use the recompute function to recompute a component: recompute(id: string)\nYou can use the getAgGrid function to get the ag-grid instance of a table: getAgGrid(id: string)\nYou can use the setSelectedIndex function to select a row in a table or an AG Grid table: setSelectedIndex(id: string, index: number)\nThe setValue function is meant to set or force the value of a component: setValue(id: string, value: any)\nYou can validate a specific field of a form: validate(id: string, key: string)\nYou can validate all fields of a form: validateAll(id: string, key: string)\nYou can invalidate a specific field of a form: invalidate(id: string, key: string, error: string)\n</contextual_information>"
+        },
+        "duckdb": {
+            "prompt": "<contextual_information>\nYou have to write a statement for DuckDB. Arguments are defined with comments like `-- $age (text) = 20` or `-- $name (text)` (one per row) and used in the statement with $age, $name, etc. To use Ducklake, attach it with `ATTACH 'ducklake' AS dl;` (for main ducklake) or `ATTACH 'ducklake://name' AS dl;` for named ducklakes. To connect to external databases, use `ATTACH '$res:path/to/resource' AS db (TYPE postgres);`. To read S3 files, use `SELECT * FROM read_csv('s3:///path/to/file.csv');` for default storage or `SELECT * FROM read_csv('s3://secondary_storage_name/path/to/file.csv');` for named storage.\n</contextual_information>\nMy instructions: {description}"
         }
     }
 };

package/package/components/custom_ui.d.ts

@@ -19,6 +19,7 @@ export type FlowBuilderWhitelabelCustomUi = {
         earlyReturn?: boolean;
         workerGroup?: boolean;
         concurrency?: boolean;
+        debouncing?: boolean;
         cache?: boolean;
     };
     triggers?: boolean;
@@ -77,6 +78,7 @@ export type EditorBarUi = {
     s3object?: boolean;
     database?: boolean;
     ducklake?: boolean;
+    dataTable?: boolean;
 };
 export type EditableSchemaFormUi = {
     jsonOnly?: boolean;

package/package/components/dbOps.d.ts

@@ -1,13 +1,7 @@
-import { type ColumnDef, type DbType } from './apps/components/display/dbtable/utils';
+import { type ColumnDef } from './apps/components/display/dbtable/utils';
 import type { DBSchema } from '../stores';
-export type DbInput = {
-    type: 'database';
-    resourceType: DbType;
-    resourcePath: string;
-} | {
-    type: 'ducklake';
-    ducklake: string;
-};
+import type { DbInput, DbType } from './dbTypes';
+import { type CreateTableValues } from './apps/components/display/dbtable/queries/createTable';
 export type IDbTableOps = {
     dbType: DbType;
     tableKey: string;
@@ -41,25 +35,34 @@ export declare function dbTableOpsWithPreviewScripts({ input, tableKey, colDefs,
     colDefs: ColumnDef[];
     workspace: string;
 }): IDbTableOps;
-export type DbTableAction = {
-    action: () => void | Promise<void>;
-    displayName: string;
-    confirmTitle?: string;
-    confirmBtnText?: string;
-    icon?: any;
-    successText?: string;
+export type IDbSchemaOps = {
+    onDelete: (params: {
+        tableKey: string;
+        schema?: string;
+    }) => Promise<void>;
+    onCreate: (params: {
+        values: CreateTableValues;
+        schema?: string;
+    }) => Promise<void>;
+    previewCreateSql: (params: {
+        values: CreateTableValues;
+        schema?: string;
+    }) => string;
+    onCreateSchema: (params: {
+        schema: string;
+    }) => Promise<void>;
 };
-export type DbTableActionFactory = (params: {
-    tableKey: string;
-    refresh: () => void;
-}) => DbTableAction;
-export declare function dbDeleteTableActionWithPreviewScript({ workspace, input }: {
+export declare function dbSchemaOpsWithPreviewScripts({ workspace, input }: {
     workspace: string;
     input: DbInput;
-}): DbTableActionFactory;
+}): IDbSchemaOps;
 export declare function getDucklakeSchema({ workspace, ducklake }: {
     workspace: string;
     ducklake: string;
 }): Promise<DBSchema>;
 export declare function getDbType(input: DbInput): DbType;
-export declare function wrapDucklakeQuery(query: string, ducklake: string): string;
+export declare function getDatabaseArg(input: DbInput | undefined): {
+    database: string;
+} | {
+    database?: undefined;
+};

package/package/components/dbOps.js

@@ -5,13 +5,15 @@ import { makeCountQuery } from './apps/components/display/dbtable/queries/count'
 import { makeUpdateQuery } from './apps/components/display/dbtable/queries/update';
 import { makeDeleteQuery } from './apps/components/display/dbtable/queries/delete';
 import { makeInsertQuery } from './apps/components/display/dbtable/queries/insert';
-import { Trash2 } from 'lucide-svelte';
 import { makeDeleteTableQuery } from './apps/components/display/dbtable/queries/deleteTable';
 import { stringifySchema } from './copilot/lib';
+import { wrapDucklakeQuery } from './ducklake';
+import { assert } from '../utils';
+import { makeCreateTableQuery } from './apps/components/display/dbtable/queries/createTable';
 export function dbTableOpsWithPreviewScripts({ input, tableKey, colDefs, workspace }) {
     const dbType = getDbType(input);
     const language = getLanguageByResourceType(dbType);
-    const dbArg = input?.type === 'database' ? { database: '$res:' + input.resourcePath } : {};
+    const dbArg = getDatabaseArg(input);
     return {
         dbType,
         tableKey,
@@ -75,31 +77,40 @@ export function dbTableOpsWithPreviewScripts({ input, tableKey, colDefs, workspa
         }
     };
 }
-export function dbDeleteTableActionWithPreviewScript({ workspace, input }) {
-    const dbArg = input?.type === 'database' ? { database: '$res:' + input.resourcePath } : {};
-    return ({ tableKey, refresh }) => ({
-        confirmTitle: `Are you sure you want to delete '${tableKey}' ? This action is irreversible`,
-        displayName: 'Delete',
-        confirmBtnText: `Delete permanently`,
-        icon: Trash2,
-        successText: `Table '${tableKey}' deleted successfully`,
-        action: async () => {
-            const dbType = getDbType(input);
-            const language = getLanguageByResourceType(dbType);
-            let deleteQuery = makeDeleteTableQuery(tableKey, dbType);
+export function dbSchemaOpsWithPreviewScripts({ workspace, input }) {
+    const dbType = getDbType(input);
+    const dbArg = getDatabaseArg(input);
+    const language = getLanguageByResourceType(dbType);
+    return {
+        onDelete: async ({ tableKey, schema }) => {
+            let deleteQuery = makeDeleteTableQuery(tableKey, dbType, schema);
             if (input.type === 'ducklake')
                 deleteQuery = wrapDucklakeQuery(deleteQuery, input.ducklake);
             await runScriptAndPollResult({
                 workspace,
-                requestBody: {
-                    args: { ...dbArg },
-                    language,
-                    content: deleteQuery
-                }
+                requestBody: { args: { ...dbArg }, language, content: deleteQuery }
+            });
+        },
+        onCreate: async ({ values, schema }) => {
+            let query = makeCreateTableQuery(values, dbType, schema);
+            if (input?.type === 'ducklake')
+                query = wrapDucklakeQuery(query, input.ducklake);
+            await runScriptAndPollResult({
+                workspace,
+                requestBody: { args: dbArg, content: query, language }
+            });
+        },
+        previewCreateSql: ({ values, schema }) => makeCreateTableQuery(values, dbType, schema),
+        onCreateSchema: async ({ schema }) => {
+            let createSchemaQuery = `CREATE SCHEMA ${schema};`;
+            if (input.type === 'ducklake')
+                createSchemaQuery = wrapDucklakeQuery(createSchemaQuery, input.ducklake);
+            await runScriptAndPollResult({
+                workspace,
+                requestBody: { args: { ...dbArg }, language, content: createSchemaQuery }
             });
-            refresh();
         }
-    });
+    };
 }
 export async function getDucklakeSchema({ workspace, ducklake }) {
     let result = await runScriptAndPollResult({
@@ -110,11 +121,15 @@ export async function getDucklakeSchema({ workspace, ducklake }) {
             args: {}
         }
     });
-    const stringified = Array.isArray(result) && result.length && (result?.[0]?.['result'] ?? '[]');
-    if (!stringified)
+    let mainSchema = Array.isArray(result) && result.length && (result?.[0]?.['result'] ?? []);
+    // Safety for agent workers (duckdb ffi lib used to return JSON as stringified json)
+    if (typeof mainSchema === 'string')
+        mainSchema = JSON.parse(mainSchema);
+    if (!mainSchema)
         throw new Error('Failed to get Ducklake schema: ' + JSON.stringify(result));
+    assert('mainSchema is an object', typeof mainSchema === 'object');
     let schema = {
-        schema: { main: JSON.parse(stringified) },
+        schema: { main: mainSchema },
         publicOnly: true,
         lang: 'ducklake'
     };
@@ -144,7 +159,14 @@ export function getDbType(input) {
             return 'duckdb';
     }
 }
-export function wrapDucklakeQuery(query, ducklake) {
-    let attach = `ATTACH 'ducklake://${ducklake}' AS dl;USE dl;\n`;
-    return query.replace(/^(--.*\n)*/, (match) => match + attach);
+export function getDatabaseArg(input) {
+    if (input?.type === 'database') {
+        if (input.resourcePath.startsWith('datatable://')) {
+            return { database: 'datatable://' + input.resourcePath };
+        }
+        else {
+            return { database: '$res:' + input.resourcePath };
+        }
+    }
+    return {};
 }

package/package/components/dbTypes.d.ts

@@ -0,0 +1,14 @@
+export type DbInput = {
+    type: 'database';
+    resourceType: DbType;
+    resourcePath: string;
+    specificSchema?: string;
+    specificTable?: string;
+} | {
+    type: 'ducklake';
+    ducklake: string;
+    specificTable?: string;
+};
+export type DbType = (typeof dbTypes)[number];
+export declare const dbTypes: readonly ["mysql", "ms_sql_server", "postgresql", "snowflake", "bigquery", "duckdb"];
+export declare const isDbType: (str?: string) => str is DbType;

package/package/components/dbTypes.js

@@ -0,0 +1,9 @@
+export const dbTypes = [
+    'mysql',
+    'ms_sql_server',
+    'postgresql',
+    'snowflake',
+    'bigquery',
+    'duckdb'
+];
+export const isDbType = (str) => !!str && dbTypes.includes(str);

package/package/components/details/ClipboardPanel.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">import { copyToClipboard } from '../../utils';
-import { Clipboard } from 'lucide-svelte';
+import { Copy } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
+import { inputSizeClasses } from '../text_input/TextInput.svelte';
 export let content;
 export let title = undefined;
-export let size = 'sm';
+export let size = 'md';
 export let disabled = false;
 </script>
 
@@ -15,7 +16,8 @@ export let disabled = false;
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={twMerge(
-		'grow min-w-0 w-full px-2 py-1 border flex items-center bg-surface-secondary text-primary justify-between rounded-md',
+		'grow min-w-0 w-full border flex items-center bg-surface-secondary hover:opacity-60 transition-opacity text-primary justify-between rounded-md',
+		inputSizeClasses[size],
 		$$props.class
 	)}
 	class:cursor-not-allowed={disabled}
@@ -28,8 +30,6 @@ export let disabled = false;
 		copyToClipboard(content)
 	}}
 >
-	<div class={twMerge('truncate whitespace-no-wrap grow', size === 'sm' ? 'text-xs' : 'text-sm')}
-		>{content}</div
-	>
-	<Clipboard size={12} class="flex-shrink-0" />
+	<div class={twMerge('truncate whitespace-no-wrap grow text-xs')}>{content}</div>
+	<Copy size={12} class="flex-shrink-0" />
 </div>

package/package/components/details/CopyableCodeBlock.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">import { copyToClipboard } from '../../utils';
-import { Clipboard } from 'lucide-svelte';
+import { Copy } from 'lucide-svelte';
 import Highlight from 'svelte-highlight';
-export let code;
-export let language;
-export let disabled = false;
+let { code, language, disabled = false, wrap = false } = $props();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="flex flex-col flex-1 border rounded-md relative"
+	class="flex flex-col flex-1 border rounded-md relative bg-surface-input"
 	class:cursor-not-allowed={disabled}
-	on:click={(e) => {
+	onclick={(e) => {
 		if (disabled) {
 			return
 		}
@@ -20,9 +18,13 @@ export let disabled = false;
 	}}
 >
 	<div class="absolute top-2 right-1 z-10 pointer-events-none">
-		<Clipboard size={14} class="w-8 cursor-pointer pointer-events-auto" />
+		<Copy size={14} class="w-8 cursor-pointer pointer-events-auto" />
 	</div>
-	<div class="p-2 overflow-auto w-full">
-		<Highlight {language} {code} class="pointer-events-none" />
+	<div class="p-2 w-full overflow-auto">
+		<Highlight
+			{language}
+			{code}
+			class="pointer-events-none {wrap ? 'whitespace-pre-wrap break-all pr-8' : ''}"
+		/>
 	</div>
 </div>

package/package/components/details/CopyableCodeBlock.svelte.d.ts

@@ -1,23 +1,10 @@
 import type { LanguageType } from 'svelte-highlight/languages';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CopyableCodeBlock: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     code: string;
     language: LanguageType<string>;
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CopyableCodeBlock = InstanceType<typeof CopyableCodeBlock>;
+    wrap?: boolean;
+}
+declare const CopyableCodeBlock: import("svelte").Component<Props, {}, "">;
+type CopyableCodeBlock = ReturnType<typeof CopyableCodeBlock>;
 export default CopyableCodeBlock;

package/package/components/details/DetailPageDetailPanel.svelte

@@ -8,17 +8,17 @@ let { flow_json = undefined, isOperator = false, selected = $bindable(), save_in
 
 <div class="flex flex-col h-full">
 	<Tabs bind:selected wrapperClass="flex-none w-full">
-		<Tab value="saved_inputs">Inputs library</Tab>
+		<Tab value="saved_inputs" label="Inputs library" />
 		{#if !isOperator}
-			<Tab value="triggers">Triggers</Tab>
+			<Tab value="triggers" label="Triggers" />
 		{/if}
 		{#if flow_json}
-			<Tab value="raw">Export</Tab>
+			<Tab value="raw" label="Export" />
 		{:else}
-			<Tab value="script">Script</Tab>
+			<Tab value="script" label="Script" />
 		{/if}
 		{#if selected == 'flow_step'}
-			<Tab value="flow_step">Step</Tab>
+			<Tab value="flow_step" label="Step" />
 		{/if}
 
 		{#snippet content()}

package/package/components/details/DetailPageHeader.svelte

@@ -16,7 +16,7 @@ const dispatch = createEventDispatcher();
 			<div class="grow px-2 inline-flex items-center gap-4 min-w-0">
 				<div
 					class={twMerge(
-						'text-lg min-w-24 font-bold truncate',
+						'text-lg min-w-24 font-semibold text-emphasis truncate',
 						$userStore?.operator ? 'pl-10' : ''
 					)}
 				>
@@ -46,7 +46,7 @@ const dispatch = createEventDispatcher();
 				{/if}
 				{@render trigger_badges?.()}
 			</div>
-			<div class="flex gap-1 md:gap-2 items-center">
+			<div class="flex gap-1 items-center">
 				{#if menuItems.length > 0}
 					{#key menuItems}
 						<DropdownV2
@@ -57,6 +57,7 @@ const dispatch = createEventDispatcher();
 								type: item.color === 'red' ? 'delete' : 'action'
 							}))}
 							placement="bottom-end"
+							size="md"
 						/>
 					{/key}
 				{/if}
@@ -69,7 +70,7 @@ const dispatch = createEventDispatcher();
 					<Button
 						{...btn.buttonProps}
 						startIcon={{ icon: btn.buttonProps.startIcon }}
-						btnClasses="hidden md:flex items-center gap-1"
+						btnClasses="hidden md:flex items-center gap-1 whitespace-nowrap"
 					>
 						{btn.label}
 					</Button>
@@ -77,7 +78,7 @@ const dispatch = createEventDispatcher();
 						{...btn.buttonProps}
 						startIcon={{ icon: btn.buttonProps.startIcon }}
 						iconOnly
-						btnClasses="flex md:hidden items-center gap-1"
+						btnClasses="flex md:hidden items-center gap-1 whitespace-nowrap"
 					>
 						{btn.label}
 					</Button>

package/package/components/details/DetailPageLayout.svelte

@@ -45,17 +45,17 @@ const useDesktopLayout = $derived(clientWidth >= 768 && !forceSmallScreen);
 			{@render header?.()}
 			<div class="grow min-h-0 w-full flex flex-col">
 				<Tabs bind:selected={mobileTab} wrapperClass="flex-none">
-					<Tab value="form">{isChatMode ? 'Chat' : 'Run form'}</Tab>
+					<Tab value="form" label={isChatMode ? 'Chat' : 'Run form'} />
 					{#if !isChatMode}
-						<Tab value="saved_inputs">Inputs</Tab>
+						<Tab value="saved_inputs" label="Inputs" />
 					{/if}
 					{#if !isOperator}
-						<Tab value="triggers">Triggers</Tab>
+						<Tab value="triggers" label="Triggers" />
 					{/if}
 					{#if flow_json}
-						<Tab value="raw">Export</Tab>
+						<Tab value="raw" label="Export" />
 					{:else}
-						<Tab value="script">Script</Tab>
+						<Tab value="script" label="Script" />
 					{/if}
 
 					{#snippet content()}

package/package/components/details/ErrorHandlerToggleButton.svelte

@@ -44,9 +44,9 @@ async function toggleErrorHandler() {
 	title={errorHandlerMuted === undefined || !errorHandlerMuted
 		? 'Disable workspace error handler for this script'
 		: 'Enable workspace error handler for this script'}
-	size="xs"
+	unifiedSize="md"
 	on:click={toggleErrorHandler}
-	color="light"
+	variant="subtle"
 	startIcon={{
 		icon: errorHandlerMuted === undefined || !errorHandlerMuted ? Bell : BellOff
 	}}

package/package/components/details/ErrorHandlerToggleButtonV2.svelte

@@ -7,7 +7,7 @@ export let scriptOrFlowPath;
 export let errorHandlerMuted;
 export let textDisabled = false;
 let toggleState = errorHandlerMuted;
-export let color = 'nord';
+export let color = undefined;
 async function toggleErrorHandler() {
     toggleState = !toggleState;
     if ($workspaceStore !== undefined) {
@@ -40,20 +40,20 @@ async function toggleErrorHandler() {
         toggleState = errorHandlerMuted;
         sendUserToast(errorHandlerMuted ? 'Workspace error handler muted' : 'Workspace error handler active', false);
     }
-    toggleState = false;
 }
 </script>
 
 <Toggle
+	textClass="font-medium"
 	{color}
-	textClass="font-normal text-sm"
 	size="xs"
 	checked={toggleState}
 	on:change={toggleErrorHandler}
 	options={{
 		right: 'Mute',
 		rightTooltip: 'Disable workspace error handler, EE only',
-		rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/error_handling#workspace-error-handler'
+		rightDocumentationLink:
+			'https://www.windmill.dev/docs/core_concepts/error_handling#workspace-error-handler'
 	}}
 	{textDisabled}
 />

package/package/components/details/ErrorHandlerToggleButtonV2.svelte.d.ts

@@ -16,7 +16,7 @@ declare const ErrorHandlerToggleButtonV2: $$__sveltets_2_IsomorphicComponent<{
     scriptOrFlowPath: string;
     errorHandlerMuted: boolean | undefined;
     textDisabled?: boolean;
-    color?: "nord" | "red" | "blue";
+    color?: "nord" | "red" | "blue" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/package/components/details/createAppFromScript.js

@@ -282,7 +282,7 @@ export function createAppFromScript(path, schema) {
                             fieldType: 'any',
                             fields: convertSchemaToFields(schema),
                             runnable: {
-                                type: 'runnableByPath',
+                                type: 'path',
                                 path: path,
                                 runType: 'script',
                                 schema: schema,
@@ -831,7 +831,7 @@ export function createAppFromFlow(path, schema) {
                             fieldType: 'any',
                             fields: convertSchemaToFields(schema),
                             runnable: {
-                                type: 'runnableByPath',
+                                type: 'path',
                                 path: path,
                                 runType: 'flow',
                                 schema: schema,

package/package/components/ducklake.d.ts

@@ -0,0 +1 @@
+export declare function wrapDucklakeQuery(query: string, ducklake: string): string;

package/package/components/ducklake.js

@@ -0,0 +1,4 @@
+export function wrapDucklakeQuery(query, ducklake) {
+    let attach = `ATTACH 'ducklake://${ducklake}' AS dl;USE dl;\n`;
+    return query.replace(/^(--.*\n)*/, (match) => match + attach);
+}

package/package/components/flows/CreateActionsApp.svelte

@@ -19,13 +19,14 @@ async function importRaw() {
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		id="create-app-button"
 		aiId="apps-create-actions-app"
 		aiDescription="Create a new low-code app"
-		size="sm"
-		spacingSize="xl"
+		unifiedSize="lg"
 		startIcon={{ icon: Plus }}
+		endIcon={{ icon: LayoutDashboard }}
 		href="{base}/apps/add?nodraft=true"
-		color="marine"
+		variant="accent"
 		dropdownItems={[
 			{
 				label: 'Import low-code app from YAML',
@@ -47,9 +48,7 @@ async function importRaw() {
 			// }
 		]}
 	>
-		<div class="flex flex-row items-center">
-			App <LayoutDashboard class="ml-1.5" size={18} />
-		</div>
+		<div class="flex flex-row items-center"> App </div>
 	</Button>
 </div>
 

package/package/components/flows/CreateActionsFlow.svelte

@@ -21,14 +21,14 @@ async function importRaw() {
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
 	<Button
+		id="create-flow-button"
 		aiId="flows-create-actions-flow"
 		aiDescription="Create a new flow"
-		size="sm"
-		spacingSize="xl"
+		unifiedSize="lg"
 		startIcon={{ icon: Plus }}
 		endIcon={{ icon: BarsStaggered }}
 		href="{base}/flows/add?nodraft=true"
-		color="marine"
+		variant="accent"
 		dropdownItems={[
 			{
 				label: 'Import from YAML',