windmill-components 1.623.1 → 1.642.0

package/package/components/DropdownV2.svelte

@@ -16,9 +16,9 @@ import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import { untrack } from 'svelte';
 import { fly } from 'svelte/transition';
 import { ButtonType } from './common/button/model';
-let { aiId = undefined, aiDescription = undefined, items = [], disabled = false, placement = 'bottom-end', usePointerDownOutside = false, closeOnOtherDropdownOpen = true, fixedHeight = true, hidePopup = false, open = $bindable(false), customWidth = undefined, customMenu = false, class: classNames = undefined, enableFlyTransition = false, size = 'md', btnText = '', buttonReplacement, menu, maxHeight = undefined } = $props();
+let { aiId = undefined, aiDescription = undefined, items = [], disabled = false, placement = 'bottom-end', usePointerDownOutside = false, closeOnOtherDropdownOpen = true, fixedHeight = true, hidePopup = false, open = $bindable(false), customWidth = undefined, customMenu = false, class: classNames = undefined, enableFlyTransition = false, size = 'md', btnText = '', btnId = undefined, buttonReplacement, menu, maxHeight = undefined } = $props();
 let buttonEl = $state(undefined);
-const { elements: { menu: menuEl, item, trigger }, states, ids: { menu: dropdownId } } = createDropdownMenu({
+const { elements: { menu: menuEl, item, trigger }, builders, states, ids: { menu: dropdownId } } = createDropdownMenu({
     positioning: {
         placement
     },
@@ -88,6 +88,7 @@ async function getMenuElements() {
 			}
 		}
 	}}
+	id={btnId}
 	data-menu
 >
 	{#if buttonReplacement}
@@ -99,7 +100,7 @@ async function getMenuElements() {
 			variant="subtle"
 			startIcon={{ icon: EllipsisVertical }}
 			btnClasses="bg-transparent"
-			iconOnly
+			iconOnly={!btnText}
 		>
 			{btnText}
 		</Button>
@@ -120,7 +121,7 @@ async function getMenuElements() {
 				class="bg-surface-tertiary dark:border w-56 origin-top-right rounded-lg shadow-lg focus:outline-none overflow-y-auto py-1"
 				style={`${customWidth ? `width: ${customWidth}px;` : ''} max-height: ${maxHeight || '50vh'};`}
 			>
-				<DropdownV2Inner {aiId} items={computeItems} meltItem={item} />
+				<DropdownV2Inner {aiId} items={computeItems} meltItem={item} {builders} />
 			</div>
 		{/if}
 	</div>

package/package/components/DropdownV2.svelte.d.ts

@@ -15,6 +15,7 @@ interface Props {
     customWidth?: number | undefined;
     customMenu?: boolean;
     class?: string | undefined;
+    btnId?: string | undefined;
     enableFlyTransition?: boolean;
     size?: ButtonType.UnifiedSize;
     btnText?: string;

package/package/components/DropdownV2Inner.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import MenuItem from './meltComponents/MenuItem.svelte';
+import DropdownSubmenuItem from './DropdownSubmenuItem.svelte';
 import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { Tooltip } from './meltComponents';
-let { aiId, items = [], meltItem } = $props();
+let { aiId, items = [], meltItem, builders } = $props();
 let computedItems = $state(undefined);
 async function computeItems() {
     if (typeof items === 'function') {
@@ -18,39 +19,46 @@ computeItems();
 {#if computedItems}
 	<div class="flex flex-col">
 		{#each computedItems ?? [] as item}
-			<MenuItem
-				onClick={(e) => item?.action?.(e)}
-				href={item?.href}
-				target={item?.hrefTarget}
-				disabled={item?.disabled}
-				class={twMerge(
-					'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
-					'data-[highlighted]:bg-surface-hover',
-					'flex flex-row gap-2 items-center rounded-sm',
-					item?.disabled && 'text-disabled cursor-not-allowed',
-					item?.type === 'delete' &&
-						!item?.disabled &&
-						'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300 '
-				)}
-				item={meltItem}
-				aiId={`${aiId ? `${aiId}-${item.displayName}` : undefined}`}
-				aiDescription={item.displayName}
-			>
-				{#if item.icon}
-					<item.icon size={14} color={item.iconColor} class="shrink-0" />
-				{/if}
-				<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
-					{item.displayName}
-				</p>
-				{@render item.extra?.()}
-				{#if item.tooltip}
-					<Tooltip>
-						{#snippet text()}
-							{item.tooltip}
-						{/snippet}
-					</Tooltip>
-				{/if}
-			</MenuItem>
+			{#if item.separatorTop}
+				<div class="my-1 border-t border-border-light"></div>
+			{/if}
+			{#if item.submenuItems && builders}
+				<DropdownSubmenuItem {item} {builders} {meltItem} />
+			{:else}
+				<MenuItem
+					onClick={(e) => item?.action?.(e)}
+					href={item?.href}
+					target={item?.hrefTarget}
+					disabled={item?.disabled}
+					class={twMerge(
+						'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
+						'data-[highlighted]:bg-surface-hover',
+						'flex flex-row gap-2 items-center rounded-sm',
+						item?.disabled && 'text-disabled cursor-not-allowed',
+						item?.type === 'delete' &&
+							!item?.disabled &&
+							'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300 '
+					)}
+					item={meltItem}
+					aiId={`${aiId ? `${aiId}-${item.displayName}` : undefined}`}
+					aiDescription={item.displayName}
+				>
+					{#if item.icon}
+						<item.icon size={14} color={item.iconColor} class="shrink-0" />
+					{/if}
+					<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
+						{item.displayName}
+					</p>
+					{@render item.extra?.()}
+					{#if item.tooltip}
+						<Tooltip>
+							{#snippet text()}
+								{item.tooltip}
+							{/snippet}
+						</Tooltip>
+					{/if}
+				</MenuItem>
+			{/if}
 		{/each}
 	</div>
 {:else}

package/package/components/DropdownV2Inner.svelte.d.ts

@@ -1,9 +1,10 @@
-import type { MenubarMenuElements } from '@melt-ui/svelte';
+import type { MenubarMenuElements, createDropdownMenu } from '@melt-ui/svelte';
 import type { Item } from '../utils';
 interface Props {
     aiId?: string;
     items?: Item[] | (() => Item[]) | (() => Promise<Item[]>);
     meltItem: MenubarMenuElements['item'];
+    builders?: ReturnType<typeof createDropdownMenu>['builders'];
 }
 declare const DropdownV2Inner: import("svelte").Component<Props, {}, "">;
 type DropdownV2Inner = ReturnType<typeof DropdownV2Inner>;

package/package/components/DucklakePicker.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">import { WorkspaceService } from '../gen';
-import { workspaceStore } from '../stores';
+import { globalDbManagerDrawer, workspaceStore } from '../stores';
 import Select from './select/Select.svelte';
-import DbManagerDrawer from './DBManagerDrawer.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
 import { usePromise } from '../svelte5Utils.svelte';
 let { value = $bindable(undefined), disabled = false, disablePortal = false, showSchemaExplorer = false, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined } = $props();
 let ducklakes = usePromise(() => WorkspaceService.listDucklakes({ workspace: $workspaceStore ?? '' }));
-let dbManagerDrawer = $state();
+let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 </script>
 
 <div class={className}>
@@ -27,6 +26,4 @@ let dbManagerDrawer = $state();
 			{dbManagerDrawer}
 		/>
 	{/if}
-
-	<DbManagerDrawer bind:this={dbManagerDrawer} />
 </div>

package/package/components/EEOnly.svelte

@@ -1,20 +1,10 @@
-<script lang="ts">import { Building } from 'lucide-svelte';
-import { twMerge } from 'tailwind-merge';
-import { Tooltip } from './meltComponents';
-let { class: className = '', children = undefined } = $props();
+<script lang="ts">import Tooltip from './meltComponents/Tooltip.svelte';
+import Badge from './common/badge/Badge.svelte';
+let { children = undefined } = $props();
 </script>
 
 <Tooltip>
-	<div
-		class={twMerge(
-			'flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap px-1',
-			className
-		)}
-		aria-label="Enterprise Edition only feature"
-		role="tooltip"
-	>
-		EE only <Building size={16} />
-	</div>
+	<Badge verySmall color="blue" class="px-2">EE</Badge>
 	{#snippet text()}
 		{#if children}
 			{@render children()}

package/package/components/EEOnly.svelte.d.ts

@@ -1,5 +1,4 @@
 interface Props {
-    class?: string;
     children?: import('svelte').Snippet;
 }
 declare const EEOnly: import("svelte").Component<Props, {}, "">;

package/package/components/Editor.svelte

@@ -1,6 +1,7 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+	import { typescriptDefaults } from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -23,7 +24,8 @@ import { createHash as randomHash } from '../editorLangUtils';
 import { workspaceStore } from '../stores';
 import { ResourceService, UserService, WorkspaceService } from '../gen';
 import { initializeVscode, keepModelAroundToAvoidDisposalOfWorkers, MONACO_Y_PADDING } from './vscode';
-import { initializeMode } from 'monaco-graphql/esm/initializeMode.js';
+// import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
+// import type { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js'
 import { editor as meditor, languages, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
 import EditorTheme from './EditorTheme.svelte';
 import { BIGQUERY_TYPES, DUCKDB_TYPES, MSSQL_TYPES, MYSQL_TYPES, ORACLEDB_TYPES, POSTGRES_TYPES, SNOWFLAKE_TYPES } from '../consts';
@@ -55,7 +57,7 @@ import { resource, useDebounce, watch } from 'runed';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = $state(null);
 let editor = $state(null);
-let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined, moduleId = undefined, enablePreprocessorSnippet = false, rawAppRunnableKey = undefined, preparedAssetsSqlQueries } = $props();
+let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined, moduleId = undefined, enablePreprocessorSnippet = false, rawAppRunnableKey = undefined, preparedAssetsSqlQueries, customTag } = $props();
 $effect.pre(() => {
     if (websocketAlive == undefined) {
         websocketAlive = {
@@ -77,7 +79,7 @@ let lastWsAttempt = new Date();
 let nbWsAttempt = 0;
 let disposeMethod;
 const dispatch = createEventDispatcher();
-let graphqlService = undefined;
+// let graphqlService: MonacoGraphQLAPI | undefined = undefined
 let dbSchema = $state(undefined);
 let destroyed = false;
 const uri = computeUri(untrack(() => filePath), scriptLang);
@@ -316,6 +318,24 @@ export async function format() {
 export function getScriptLang() {
     return scriptLang;
 }
+export function getEditor() {
+    return editor;
+}
+/** Get lint errors and warnings from the Monaco editor */
+export function getLintErrors() {
+    if (!model) {
+        return { errorCount: 0, warningCount: 0, errors: [], warnings: [] };
+    }
+    const markers = meditor.getModelMarkers({ resource: model.uri });
+    const errors = markers.filter((m) => m.severity === MarkerSeverity.Error);
+    const warnings = markers.filter((m) => m.severity === MarkerSeverity.Warning);
+    return {
+        errorCount: errors.length,
+        warningCount: warnings.length,
+        errors,
+        warnings
+    };
+}
 let command = undefined;
 let sqlTypeCompletor = $state(undefined);
 let resultCollectionCompletor = $state(undefined);
@@ -410,16 +430,7 @@ async function updateSchema(newSchemaRes) {
         const resourcePath = newSchemaRes.replace('$res:', '');
         dbSchema = $dbSchemas[resourcePath];
         if (dbSchema === undefined) {
-            if (lang === 'graphql') {
-                await getDbSchemas('graphql', resourcePath, $workspaceStore, $dbSchemas, (e) => {
-                    console.error('error getting graphql db schema', e);
-                });
-            }
-            else if (lang === 'sql') {
-                await getDbSchemas(scriptLang ?? '', resourcePath, $workspaceStore, $dbSchemas, (e) => {
-                    console.error(`error getting SQL (${scriptLang}) db schema`, e);
-                });
-            }
+            $dbSchemas[resourcePath] = await getDbSchemas(lang === 'graphql' ? 'graphql' : (scriptLang ?? ''), resourcePath, $workspaceStore, (e) => console.error(`error getting ${lang} (${scriptLang}) db schema`, e), { customTag });
         }
         dbSchema = $dbSchemas[resourcePath];
     }
@@ -431,7 +442,7 @@ function disposeSqlSchemaCompletor() {
     sqlSchemaCompletor?.dispose();
 }
 function disposeGaphqlService() {
-    graphqlService = undefined;
+    // graphqlService = undefined
 }
 function addDBSchemaCompletions() {
     const { lang: schemaLang, schema } = dbSchema || {};
@@ -440,14 +451,16 @@ function addDBSchemaCompletions() {
     }
     console.log('adding db schema completions', schemaLang);
     if (schemaLang === 'graphql') {
-        graphqlService ||= initializeMode();
-        console.log('setting schema config', schema);
-        graphqlService?.setSchemaConfig([
-            {
-                uri: 'my-schema.graphql',
-                introspectionJSON: schema
-            }
-        ]);
+        //graphql depreciated until https://github.com/graphql/graphiql/issues/4104 is fixed with monaco > 0.52.2
+        // languages.register({ id: 'graphql' })
+        // graphqlService ||= initializeMode()
+        // console.log('setting schema config', schema)
+        // graphqlService?.setSchemaConfig([
+        // 	{
+        // 		uri: 'my-schema.graphql',
+        // 		introspectionJSON: schema
+        // 	}
+        // ])
     }
     else {
         if (sqlSchemaCompletor) {
@@ -1067,7 +1080,7 @@ async function loadMonaco() {
         editor = meditor.create(divEl, {
             ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,
-            fontSize: !small ? 14 : 12,
+            fontSize: !small ? 13.5 : 12,
             lineNumbersMinChars,
             // overflowWidgetsDomNode: widgets,
             tabSize: lang == 'python' ? 4 : 2,
@@ -1084,6 +1097,38 @@ async function loadMonaco() {
         return;
     }
     keepModelAroundToAvoidDisposalOfWorkers();
+    // In VSCode webview (iframe), clipboard operations need special handling
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+            document.execCommand('cut');
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+            try {
+                // Use Clipboard API to read text, then insert via Monaco's API
+                const text = await navigator.clipboard.readText();
+                if (text && editor) {
+                    const selection = editor.getSelection();
+                    if (selection) {
+                        editor.executeEdits('paste', [
+                            {
+                                range: selection,
+                                text: text,
+                                forceMoveMarkers: true
+                            }
+                        ]);
+                    }
+                }
+            }
+            catch (e) {
+                // Clipboard API failed, try execCommand as fallback
+                document.execCommand('paste');
+            }
+        });
+    }
     // updateEditorKeybindingsMode(editor, 'vim', undefined)
     // Raw app lint collection: listen for marker changes and report to store
     let markerChangeDisposable = undefined;
@@ -1235,7 +1280,7 @@ function setTypescriptCustomTypes() {
         : 'string';
     const isDucklakeOptional = ducklakeNames.includes('main');
     const isDataTableOptional = datatableNames.includes('main');
-    let disposeTs = languages.typescript.typescriptDefaults.addExtraLib(`export {};
+    let disposeTs = typescriptDefaults.addExtraLib(`export {};
 			declare module 'windmill-client' {
 				import { type DatatableSqlTemplateFunction, type SqlTemplateFunction } from 'windmill-client';
 				export function ducklake(name${isDucklakeOptional ? '?' : ''}: ${ducklakeNameType}): SqlTemplateFunction;
@@ -1255,13 +1300,13 @@ async function setTypescriptRTNamespace() {
             workspace: $workspaceStore ?? ''
         });
         const namespace = formatResourceTypes(resourceTypes, scriptLang === 'bunnative' ? 'bun' : scriptLang);
-        languages.typescript.typescriptDefaults.addExtraLib(namespace, 'rt.d.ts');
+        typescriptDefaults.addExtraLib(namespace, 'rt.d.ts');
     }
 }
 async function setTypescriptExtraLibs() {
     if (extraLib) {
         const uri = mUri.parse('file:///extraLib.d.ts');
-        languages.typescript.typescriptDefaults.addExtraLib(extraLib, uri.toString());
+        typescriptDefaults.addExtraLib(extraLib, uri.toString());
     }
     if (lang === 'typescript' &&
         (scriptLang == 'bun' || scriptLang == 'tsx' || scriptLang == 'bunnative') &&
@@ -1271,7 +1316,7 @@ async function setTypescriptExtraLibs() {
             const path = 'file://' + _path;
             let uri = mUri.parse(path);
             console.log('adding library to runtime', path);
-            languages.typescript.typescriptDefaults.addExtraLib(code, path);
+            typescriptDefaults.addExtraLib(code, path);
             try {
                 await vscode.workspace.fs.writeFile(uri, new TextEncoder().encode(code));
             }

package/package/components/Editor.svelte.d.ts

@@ -6,6 +6,7 @@ import { editor as meditor, type IDisposable } from 'monaco-editor';
 import { type DepsToGet } from '../ata/index';
 import { type InferAssetsSqlQueryDetails } from '../infer';
 import { AIChatEditorHandler, type ReviewChangesOpts } from './copilot/chat/monaco-adapter';
+import type { ScriptLintResult } from './copilot/chat/shared';
 interface Props {
     code?: string;
     cmdEnterAction?: (() => void) | undefined;
@@ -38,6 +39,7 @@ interface Props {
     /** When set, enables raw app lint collection mode and reports Monaco markers to the lint store under this key */
     rawAppRunnableKey?: string | undefined;
     preparedAssetsSqlQueries?: InferAssetsSqlQueryDetails[] | undefined;
+    customTag?: string;
 }
 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> & {
@@ -79,6 +81,8 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     append: (code: string) => void;
     format: () => Promise<void>;
     getScriptLang: () => string | undefined;
+    getEditor: () => meditor.IStandaloneCodeEditor | null;
+    getLintErrors: () => ScriptLintResult;
     reviewAndApplyCode: (code: string, opts?: ReviewChangesOpts) => Promise<void>;
     reviewAppliedCode: (originalCode: string, opts?: {
         onFinishedReview?: () => void;

package/package/components/EditorBar.svelte

@@ -439,8 +439,7 @@ function windmillPathToCamelCaseName(path) {
 			}
 			editor.insertAtCursor(`v, _ := wmill.GetVariable("${path}")`)
 		} else if (lang == 'bash') {
-			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
-  "$BASE_INTERNAL_URL/api/w/$WM_WORKSPACE/variables/get_value/${path}" | jq -r .`)
+			editor.insertAtCursor(`wmill variable get ${path} --json | jq -r .value`)
 		} else if (lang == 'powershell') {
 			editor.insertAtCursor(`$Headers = @{\n"Authorization" = "Bearer $Env:WM_TOKEN"`)
 			editor.arrowDown()
@@ -516,8 +515,7 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 			}
 			editor.insertAtCursor(`r, _ := wmill.GetResource("${path}")`)
 		} else if (lang == 'bash') {
-			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
-  "$BASE_INTERNAL_URL/api/w/$WM_WORKSPACE/resources/get_value_interpolated/${path}" | jq`)
+			editor.insertAtCursor(`wmill resource get ${path} --json | jq .value`)
 		} else if (lang == 'powershell') {
 			editor.insertAtCursor(`$Headers = @{\n"Authorization" = "Bearer $Env:WM_TOKEN"`)
 			editor.arrowDown()
@@ -928,7 +926,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{#if customUi?.diffMode != false}
 				<div class="flex items-center px-3">
 					<Toggle
-						options={{ right: '' }}
+						options={{ right: 'Diff' }}
 						size="sm"
 						checked={diffMode}
 						disabled={!lastDeployedCode}

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -28,7 +28,7 @@ import ChannelSelector from './ChannelSelector.svelte';
 import { base } from '../base';
 import { enterpriseLicense, workspaceStore } from '../stores';
 import MsTeamsIcon from './icons/MSTeamsIcon.svelte';
-import { emptySchema, emptyString, sendUserToast, tryEvery } from '../utils';
+import { classNames, emptySchema, emptyString, sendUserToast, tryEvery } from '../utils';
 import MultiSelect from './select/MultiSelect.svelte';
 import { FlowService, JobService, ScriptService, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
@@ -45,7 +45,7 @@ const slackSuccessHandler = hubPaths.slackSuccessHandler;
 const teamsRecoveryHandler = hubPaths.teamsRecoveryHandler;
 const teamsHandlerScriptPath = hubPaths.teamsErrorHandler;
 const teamsSuccessHandler = hubPaths.teamsSuccessHandler;
-let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable('custom'), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip } = $props();
+let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable('custom'), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip, noMargin = false } = $props();
 let customHandlerSchema = $state();
 let slackHandlerSchema = $state();
 let teams_team_name = $state(undefined);
@@ -229,22 +229,27 @@ let handlerCache = $state({
     teams: undefined,
     email: undefined
 });
+let handlerPathCache = $state({});
 $effect(() => {
     if (lastHandlerSelected !== handlerSelected && lastHandlerSelected !== undefined) {
         if (lastHandlerSelected != 'custom') {
             const key = lastHandlerSelected === 'email' ? EMAIL_RECIPIENTS_KEY : CHANNEL_KEY;
             handlerCache[lastHandlerSelected] = handlerExtraArgs[key];
         }
+        handlerPathCache[lastHandlerSelected] = handlerPath;
         if (handlerSelected === 'custom') {
-            handlerExtraArgs[CHANNEL_KEY] = '';
-            handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = [];
-            handlerPath = undefined;
+            delete handlerExtraArgs[CHANNEL_KEY];
+            delete handlerExtraArgs[EMAIL_RECIPIENTS_KEY];
+            handlerPath = handlerPathCache['custom'];
         }
         else if (handlerSelected === 'email') {
             handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = handlerCache[handlerSelected] ?? [];
+            delete handlerExtraArgs[CHANNEL_KEY];
         }
         else {
             handlerExtraArgs[CHANNEL_KEY] = handlerCache[handlerSelected] ?? '';
+            delete handlerExtraArgs[EMAIL_RECIPIENTS_KEY];
+            handlerPath = handlerPathCache[handlerSelected];
         }
     }
     lastHandlerSelected = handlerSelected;
@@ -268,7 +273,7 @@ $effect(() => {
 });
 </script>
 
-<div class="mt-2 space-y-2">
+<div class={classNames('space-y-2', noMargin ? '' : 'mt-2')}>
 	<ToggleButtonGroup bind:selected={handlerSelected} disabled={!isEditable}>
 		{#snippet children({ item })}
 			<ToggleButton label="Slack" value="slack" {item} disabled={!isEditable} />
@@ -284,58 +289,62 @@ $effect(() => {
 		{/snippet}
 	</ToggleButtonGroup>
 
-	<div class="flex flex-col gap-6 p-4 rounded-md border">
+	<div class="flex flex-col gap-6 p-4 rounded-md shadow-sm bg-surface-tertiary">
 		{#if handlerSelected === 'custom'}
-			<div class="flex flex-row mb-6">
-				<ScriptPicker
-					disabled={!isEditable || !$enterpriseLicense}
-					kinds={['script', 'failure']}
-					allowFlow={true}
-					bind:scriptPath={handlerPath}
-					bind:itemKind={customHandlerKind}
-					allowRefresh={isEditable}
-					clearable
-				/>
+			<div class="flex flex-col gap-1">
+				<div class="flex flex-row">
+					<ScriptPicker
+						disabled={!isEditable || !$enterpriseLicense}
+						kinds={['script', 'failure']}
+						allowFlow={true}
+						bind:scriptPath={handlerPath}
+						bind:itemKind={customHandlerKind}
+						allowRefresh={isEditable}
+						clearable
+					/>
 
-				{#if !handlerPath}
-					<Button
-						btnClasses="ml-4 whitespace-nowrap"
-						variant="default"
-						size="xs"
-						href={customScriptTemplate}
-						disabled={!isEditable}
-						target="_blank"
-					>
-						Create from template
-					</Button>
+					{#if !handlerPath}
+						<Button
+							btnClasses="ml-4 whitespace-nowrap"
+							variant="default"
+							size="xs"
+							href={customScriptTemplate}
+							disabled={!isEditable}
+							target="_blank"
+						>
+							Create from template
+						</Button>
+					{/if}
+				</div>
+				{#if showScriptHelpText}
+					<div class="text-2xs text-secondary">
+						Example of error handler scripts can be found on <a
+							target="_blank"
+							href="{$hubBaseUrlStore}/failures"
+						>
+							Windmill Hub</a
+						>
+					</div>
 				{/if}
 			</div>
-			{#if showScriptHelpText}
-				<div class="text-2xs text-secondary">
-					Example of error handler scripts can be found on <a
-						target="_blank"
-						href="{$hubBaseUrlStore}/failures"
-					>
-						Windmill Hub</a
-					>
-				</div>
-			{/if}
 			{#if handlerPath}
-				<p class="font-semibold text-xs mt-6 mb-1">Extra arguments</p>
-				{#await import('./SchemaForm.svelte')}
-					<Loader2 class="animate-spin" />
-				{:then Module}
-					<Module.default
-						disabled={!isEditable}
-						schema={customHandlerSchema}
-						bind:args={handlerExtraArgs}
-						shouldHideNoInputs
-						className="text-xs"
-					/>
-				{/await}
-				{#if customHandlerSchema && customHandlerSchema.properties && Object.keys(customHandlerSchema.properties).length === 0}
-					<div class="text-xs texg-gray-700">This error handler takes no extra arguments</div>
-				{/if}
+				<div>
+					<p class="font-semibold text-xs mb-1">Extra arguments</p>
+					{#await import('./SchemaForm.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
+						<Module.default
+							disabled={!isEditable}
+							schema={customHandlerSchema}
+							bind:args={handlerExtraArgs}
+							shouldHideNoInputs
+							className="text-xs"
+						/>
+					{/await}
+					{#if customHandlerSchema && customHandlerSchema.properties && Object.keys(customHandlerSchema.properties).length === 0}
+						<div class="text-xs text-secondary">This error handler takes no extra arguments</div>
+					{/if}
+				</div>
 			{/if}
 		{:else if handlerSelected === 'slack'}
 			<!-- Slack Connection Status -->

package/package/components/ErrorOrRecoveryHandler.svelte.d.ts

@@ -12,6 +12,7 @@ interface Props {
     customScriptTemplate: string;
     customHandlerKind?: 'flow' | 'script';
     customTabTooltip?: import('svelte').Snippet;
+    noMargin?: boolean;
 }
 declare const ErrorOrRecoveryHandler: import("svelte").Component<Props, {}, "handlerSelected" | "handlerPath" | "handlerExtraArgs" | "customHandlerKind">;
 type ErrorOrRecoveryHandler = ReturnType<typeof ErrorOrRecoveryHandler>;

package/package/components/ExploreAssetButton.svelte

@@ -28,8 +28,7 @@ const assetUri = $derived(formatAsset(asset));
 	{btnClasses}
 	on:click={async () => {
 		if (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)) {
-			let resourcePath = asset.path.split('/').slice(0, 3).join('/')
-			let specificTable = asset.path.split('/')[3] as string | undefined
+			let [resourcePath, specificTable] = asset.path.split('?table=')
 			dbManagerDrawer?.openDrawer({
 				type: 'database',
 				resourceType: _resourceMetadata.resource_type,