windmill-components 1.623.2 → 1.655.0

package/package/components/DurationMs.svelte.d.ts

@@ -1,22 +1,8 @@
-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 DurationMs: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     duration_ms: number;
     self_wait_time_ms?: number | undefined;
     aggregate_wait_time_ms?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DurationMs = InstanceType<typeof DurationMs>;
+}
+declare const DurationMs: import("svelte").Component<Props, {}, "">;
+type DurationMs = ReturnType<typeof DurationMs>;
 export default DurationMs;

package/package/components/DynamicInput.svelte

@@ -90,9 +90,9 @@ $effect(() => {
         }
     }
 });
-let lastArgs = $state.snapshot(otherArgs);
+let lastArgs = $state.snapshot(untrack(() => otherArgs));
 let timeout = $state();
-let nargs = $state($state.snapshot(otherArgs));
+let nargs = $state($state.snapshot(untrack(() => otherArgs)));
 $effect(() => {
     otherArgs;
     untrack(() => clearTimeout(timeout));

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

@@ -174,7 +174,7 @@ function renameProperty(oldName, key) {
         sendUserToast('Argument renamed');
     }
 }
-let jsonView = $state(customUi?.jsonOnly == true);
+let jsonView = $state(untrack(() => customUi)?.jsonOnly == true);
 let schemaString = $state(JSON.stringify(schema, null, '\t'));
 let error = $state(undefined);
 let editor = $state(undefined);
@@ -183,8 +183,8 @@ export function updateJson() {
     schemaString = JSON.stringify(schema, null, '\t');
     editor?.setCode(schemaString);
 }
-const editTabDefaultSize = noPreview ? 100 : 50;
-editPanelSize = editTab ? (editPanelInitialSize ?? editTabDefaultSize) : 0;
+const editTabDefaultSize = untrack(() => noPreview) ? 100 : 50;
+editPanelSize = untrack(() => editTab) ? (untrack(() => editPanelInitialSize) ?? editTabDefaultSize) : 0;
 let inputPanelSize = $state(100 - editPanelSize);
 let editPanelSizeSmooth = tweened(editPanelSize, {
     duration: 150
@@ -462,7 +462,7 @@ let dndType = $state(generateRandomString());
 												{argName}
 												{#if !uiOnly}
 													<div onclick={stopPropagation(preventDefault(bubble('click')))}>
-														<Popover placement="bottom-end" containerClasses="p-4" closeButton>
+														<Popover placement="bottom-end" closeButton>
 															{#snippet trigger()}
 																<Button
 																	variant="subtle"

package/package/components/Editor.svelte

@@ -57,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 = {
@@ -69,9 +69,9 @@ $effect.pre(() => {
         };
     }
 });
-let lang = $state(scriptLangToEditorLang(scriptLang));
-let filePath = $state(computePath(path));
-let initialPath = $state(path);
+let lang = $state(scriptLangToEditorLang(untrack(() => scriptLang)));
+let filePath = $state(computePath(untrack(() => path)));
+let initialPath = $state(untrack(() => path));
 let websockets = [];
 let languageClients = [];
 let websocketInterval;
@@ -82,7 +82,7 @@ const dispatch = createEventDispatcher();
 // let graphqlService: MonacoGraphQLAPI | undefined = undefined
 let dbSchema = $state(undefined);
 let destroyed = false;
-const uri = computeUri(untrack(() => filePath), scriptLang);
+const uri = computeUri(untrack(() => filePath), untrack(() => scriptLang));
 console.log('uri', uri);
 function computeUri(filePath, scriptLang) {
     let file;
@@ -430,7 +430,7 @@ async function updateSchema(newSchemaRes) {
         const resourcePath = newSchemaRes.replace('$res:', '');
         dbSchema = $dbSchemas[resourcePath];
         if (dbSchema === undefined) {
-            $dbSchemas[resourcePath] = await getDbSchemas(lang === 'graphql' ? 'graphql' : (scriptLang ?? ''), resourcePath, $workspaceStore, (e) => console.error(`error getting ${lang} (${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];
     }
@@ -1571,12 +1571,11 @@ $effect(() => {
         lineNumbers: $relativeLineNumbers ? 'relative' : 'on'
     });
 });
-let isTsWorkerInitialized = resource([() => lang, () => initialized, () => filePath], async () => {
+let isTsWorkerInitialized = resource([() => lang, () => initialized], async () => {
     if (lang !== 'typescript' || !initialized)
         return false;
-    console.log('[Editor.isTsWorkerInitialized] Waiting for TS Worker...');
-    await waitForWorkerInitialization(filePath);
-    console.log('[Editor.isTsWorkerInitialized] TS Worker initialized successfully');
+    // Use the stable model URI (computed once at mount), not filePath which changes on rename
+    await waitForWorkerInitialization(uri);
     return true;
 });
 // Update SQL query type information in the TypeScript worker
@@ -1586,18 +1585,17 @@ let handleSqlTypingInTs = useDebounce(function handleSqlTypingInTs() {
         return;
     if (!preparedAssetsSqlQueries || preparedAssetsSqlQueries.length === 0) {
         // Clear SQL queries if none exist
-        updateSqlQueriesInWorker(filePath, []);
+        updateSqlQueriesInWorker(uri, []);
         return;
     }
     // Send SQL query information to the custom TypeScript worker
     // The worker will inject type parameters into the code that TypeScript analyzes
     // Worker async function call freezes if we pass a Proxy, $state.snapshot() is very important here
-    updateSqlQueriesInWorker(filePath, $state.snapshot(preparedAssetsSqlQueries));
+    updateSqlQueriesInWorker(uri, $state.snapshot(preparedAssetsSqlQueries));
 }, 250);
 watch([
     () => preparedAssetsSqlQueries,
     () => lang,
-    () => filePath,
     () => isTsWorkerInitialized.current
 ], () => {
     handleSqlTypingInTs();

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

@@ -39,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> & {

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()
@@ -994,7 +992,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 	<div class="flex flex-row items-center gap-2 whitespace-nowrap">
 		{@render right?.()}
-		{#if scriptPath && !noHistory}
+		{#if scriptPath && !noHistory && customUi?.history != false}
 			<Button
 				unifiedSize="sm"
 				variant="subtle"
@@ -1018,7 +1016,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				Library
 			</Button>
 		{/if}
-		{#if saveToWorkspace}
+		{#if saveToWorkspace && customUi?.saveToWorkspace != false}
 			<Button
 				unifiedSize="sm"
 				variant="subtle"

package/package/components/EditorBar.svelte.d.ts

@@ -15,7 +15,7 @@ interface Props {
     iconOnly?: boolean;
     validCode?: boolean;
     kind?: 'script' | 'trigger' | 'approval';
-    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative';
+    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative' | 'claudesandbox';
     collabMode?: boolean;
     collabLive?: boolean;
     collabUsers?: {

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

@@ -1,27 +1,11 @@
-<script lang="ts">import {} from '../gen';
+<script lang="ts">import { run } from 'svelte/legacy';
+import {} from '../gen';
 import { isScriptPreview } from '../utils';
 import { onDestroy } from 'svelte';
-export let job = undefined;
-/** Execution duration of current active job (in ms) */
-export let executionDuration = 0;
-/** Is current job running more than specified value in `longDefinition` seconds */
-export let longRunning = false;
-/** What do we count as "long" (in ms)*/
-export let longDefinition = 30_000;
-/** How often component updates execution duration (in ms)
- *   Higher value -> more efficient component is, less accuracy it has
- *   Lower value -> less efficient component is, more accuracy it has
- */
-export let updateResolution = 5_000;
+let { job = undefined, executionDuration = $bindable(0), longRunning = $bindable(false), longDefinition = 30_000, updateResolution = 5_000 } = $props();
 let startedAt = undefined;
-let busy = false;
+let busy = $state(false);
 let interval;
-// Detect when execution of job started
-$: if (!busy &&
-    job &&
-    'running' in job &&
-    (job.job_kind == 'script' || isScriptPreview(job?.job_kind)))
-    start(job);
 function start(job) {
     busy = true;
     startedAt = new Date(job?.started_at ?? '').getTime();
@@ -42,4 +26,12 @@ onDestroy(() => {
     // Clear the interval when the component is destroyed
     clearInterval(interval);
 });
+// Detect when execution of job started
+run(() => {
+    if (!busy &&
+        job &&
+        'running' in job &&
+        (job.job_kind == 'script' || isScriptPreview(job?.job_kind)))
+        start(job);
+});
 </script>

package/package/components/ExecutionDuration.svelte.d.ts

@@ -1,28 +1,18 @@
 import { type Job } from '../gen';
-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 ExecutionDuration: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     job?: Job | undefined;
-    /** Execution duration of current active job (in ms) */ executionDuration?: number;
-    /** Is current job running more than specified value in `longDefinition` seconds */ longRunning?: boolean;
-    /** What do we count as "long" (in ms)*/ longDefinition?: number;
+    /** Execution duration of current active job (in ms) */
+    executionDuration?: number;
+    /** Is current job running more than specified value in `longDefinition` seconds */
+    longRunning?: boolean;
+    /** What do we count as "long" (in ms)*/
+    longDefinition?: number;
     /** How often component updates execution duration (in ms)
-         *   Higher value -> more efficient component is, less accuracy it has
-         *   Lower value -> less efficient component is, more accuracy it has
-         */ updateResolution?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ExecutionDuration = InstanceType<typeof ExecutionDuration>;
+ *   Higher value -> more efficient component is, less accuracy it has
+ *   Lower value -> less efficient component is, more accuracy it has
+ */
+    updateResolution?: number;
+}
+declare const ExecutionDuration: import("svelte").Component<Props, {}, "executionDuration" | "longRunning">;
+type ExecutionDuration = ReturnType<typeof ExecutionDuration>;
 export default ExecutionDuration;

package/package/components/ExploreAssetButton.svelte

@@ -2,6 +2,7 @@
     return (asset.kind === 'ducklake' ||
         asset.kind === 'datatable' ||
         asset.kind === 's3object' ||
+        asset.kind === 'volume' ||
         (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)));
 }
 </script>
@@ -9,13 +10,14 @@
 <script lang="ts">import { isDbType } from './dbTypes';
 import { formatAsset } from './assets/lib';
 import { Button, ButtonType } from './common';
-import DbManagerDrawer from './DBManagerDrawer.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
-import { userStore } from '../stores';
+import { VolumeService } from '../gen';
+import { globalDbManagerDrawer, userStore, workspaceStore } from '../stores';
 import { isS3Uri } from '../utils';
-import { Database, File } from 'lucide-svelte';
+import { Database, File, HardDriveIcon } from 'lucide-svelte';
 import DucklakeIcon from './icons/DucklakeIcon.svelte';
-const { asset, _resourceMetadata, s3FilePicker, dbManagerDrawer, onClick, class: className = '', noText = false, buttonVariant = 'default', btnClasses = '', disabled = false } = $props();
+const { asset, _resourceMetadata, s3FilePicker, onClick, class: className = '', noText = false, buttonVariant = 'default', btnClasses = '', disabled = false } = $props();
+let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 const assetUri = $derived(formatAsset(asset));
 </script>
 
@@ -28,8 +30,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,
@@ -38,6 +39,9 @@ const assetUri = $derived(formatAsset(asset));
 			})
 		} else if (asset.kind === 's3object' && isS3Uri(assetUri)) {
 			s3FilePicker?.open(assetUri)
+		} else if (asset.kind === 'volume') {
+			const storage = (await VolumeService.getVolumeStorage({ workspace: $workspaceStore! })) ?? undefined
+			s3FilePicker?.open({ s3: `volumes/${$workspaceStore}/${asset.path}/`, storage })
 		} else if (asset.kind === 'ducklake') {
 			let ducklake = asset.path.split('/')[0]
 			let specificTable = asset.path.split('/')[1] as string | undefined
@@ -65,9 +69,11 @@ const assetUri = $derived(formatAsset(asset));
 			? { icon: Database }
 			: asset.kind === 'ducklake'
 				? { icon: DucklakeIcon }
-				: undefined}
+				: asset.kind === 'volume'
+					? { icon: HardDriveIcon }
+					: undefined}
 >
-	{#if asset.kind === 's3object'}
+	{#if asset.kind === 's3object' || asset.kind === 'volume'}
 		<span class:hidden={noText}>Explore</span>
 	{:else if asset.kind === 'resource' || asset.kind === 'ducklake' || asset.kind === 'datatable'}
 		<span class:hidden={noText}>Manage</span>

package/package/components/ExploreAssetButton.svelte.d.ts

@@ -3,7 +3,6 @@ export declare function assetCanBeExplored(asset: Asset, _resourceMetadata?: {
 }): boolean;
 import { type Asset } from './assets/lib';
 import { ButtonType } from './common';
-import DbManagerDrawer from './DBManagerDrawer.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
 type $$ComponentProps = {
     asset: Asset;
@@ -11,7 +10,6 @@ type $$ComponentProps = {
         resource_type?: string;
     };
     s3FilePicker?: S3FilePicker;
-    dbManagerDrawer?: DbManagerDrawer;
     onClick?: () => void;
     class?: string;
     noText?: boolean;

package/package/components/FakeMonacoPlaceHolder.svelte

@@ -1,6 +1,7 @@
 <!-- Used to avoid height jitter when loading monaco asynchronously -->
 
-<script lang="ts">import { getOS } from '../utils';
+<script lang="ts">import { untrack } from 'svelte';
+import { getOS } from '../utils';
 import { MONACO_Y_PADDING } from './vscode';
 let { code, autoheight = false, lineNumbersWidth = 0, lineNumbersOffset = 0, class: className = '', showNumbers = true, fontSize = 13.5 } = $props();
 let yPadding = MONACO_Y_PADDING;
@@ -18,7 +19,7 @@ const CHAR_LIMIT = 5000;
 const GOLDEN_LINE_HEIGHT_RATIO = getOS() == 'macOS' ? 1.5 : 1.35;
 let lines = $derived(code?.substring(0, CHAR_LIMIT)?.split('\n') ?? []);
 const charWidth = 9; // try to match as closely as possible to monaco editor
-const lineHeight = fontSize * GOLDEN_LINE_HEIGHT_RATIO;
+const lineHeight = untrack(() => fontSize) * GOLDEN_LINE_HEIGHT_RATIO;
 let [clientWidth, clientHeight] = $state([0, 0]);
 let showHorizontalScrollbar = $derived(lines.some((line) => line.length * charWidth > clientWidth - 40));
 let [editorWidth, editorHeight] = $derived([

package/package/components/FieldHeader.svelte

@@ -3,19 +3,7 @@ import Required from './Required.svelte';
 import { capitalize, emptyString } from '../utils';
 import Tooltip from './meltComponents/Tooltip.svelte';
 import { InfoIcon } from 'lucide-svelte';
-export let label;
-export let format = '';
-export let contentEncoding = '';
-export let type = undefined;
-export let disabled = false;
-export let required = false;
-export let displayType = true;
-export let labelClass = '';
-export let prettify = false;
-export let simpleTooltip = undefined;
-export let lightHeader = false;
-export let SimpleTooltipIcon = InfoIcon;
-export let simpleTooltipIconClass = '';
+let { label, format = '', contentEncoding = '', type = undefined, disabled = false, required = false, displayType = true, labelClass = '', prettify = false, simpleTooltip = undefined, lightHeader = false, SimpleTooltipIcon = InfoIcon, simpleTooltipIconClass = '' } = $props();
 </script>
 
 <div class="inline-flex flex-row items-baseline truncated">
@@ -52,9 +40,11 @@ export let simpleTooltipIconClass = '';
 	{#if !emptyString(simpleTooltip)}
 		<Tooltip class="ml-2" placement="bottom">
 			<SimpleTooltipIcon size="14" class={'-mb-0.5 ' + simpleTooltipIconClass} />
-			<span class="text-xs" slot="text">
-				{simpleTooltip}
-			</span>
+			{#snippet text()}
+						<span class="text-xs" >
+					{simpleTooltip}
+				</span>
+					{/snippet}
 		</Tooltip>
 	{/if}
 </div>