windmill-components 1.623.1 → 1.642.0

package/package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -34,6 +34,7 @@ interface Props {
     overrideCallback?: (() => CancelablePromise<void>) | undefined;
     overrideAutoRefresh?: boolean;
     replaceCallback?: boolean;
+    onSuccess?: (result: any) => void;
     children?: import('svelte').Snippet;
     nonRenderedPlaceholder?: import('svelte').Snippet;
 }
@@ -63,7 +64,6 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
     doneError: CustomEvent<any>;
     resultSet: CustomEvent<any>;
     handleError: CustomEvent<any>;
-    success: CustomEvent<any>;
     recompute: CustomEvent<any>;
     argsChanged: CustomEvent<any>;
 } & {

package/package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -235,8 +235,8 @@ async function executeSideEffect(sideEffect, success = true, errorMessage) {
 
 			initializing = false
 		}}
-		on:success={(e) => {
-			onSuccess(e.detail)
+		onSuccess={(result) => {
+			onSuccess(result)
 			handleSideEffect(true)
 		}}
 		on:handleError={(e) => handleSideEffect(false, e.detail)}

package/package/components/apps/components/helpers/eval.js

@@ -28,7 +28,7 @@ ${hasReturnAsLastLine
         : `
 return ${eval_string.startsWith('return ') ? eval_string.substring(7) : eval_string}`}
 
-}                                                                                                                   
+}
 `;
 }
 let functorCache = {};
@@ -150,7 +150,10 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
         controlComponents[id]?.sendMessage?.(message);
     }, (message, error) => {
         sendUserToast(message, error);
-    }, async (id) => waitJob(id), (id) => {
+    }, async (id) => {
+        const workspaceId = (context ?? {})?.ctx?.workspace;
+        return await waitJob(id, workspaceId);
+    }, (id) => {
         controlComponents[id]?.askNewResource?.();
     }, (input, filename) => {
         const handleError = (error) => {

package/package/components/apps/components/inputs/AppMultiSelectV2.svelte

@@ -145,10 +145,8 @@ $effect(() => {
 			disabled={resolvedConfig.disabled}
 			onCreateItem={resolvedConfig.create
 				? (item) => {
-						customItems.push(item)
-						selectedItems.push(item)
-						customItems = customItems
-						selectedItems = selectedItems
+						customItems = [...customItems, item]
+						selectedItems = [...selectedItems, item]
 					}
 				: undefined}
 			onOpen={() => ($selectedComponent = [id])}

package/package/components/apps/components/layout/AppModal.svelte

@@ -14,7 +14,7 @@ import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import Disposable from '../../../common/drawer/Disposable.svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-let { customCss = undefined, id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false, render, onOpenRecomputeIds = undefined, onCloseRecomputeIds = undefined, preclickAction } = $props();
+let { customCss = undefined, id, configuration, horizontalAlignment = undefined, verticalAlignment = undefined, noWFull = false, render, onOpenRecomputeIds = undefined, onCloseRecomputeIds = undefined, preclickAction, onClose = undefined } = $props();
 const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents, breakpoint } = getContext('AppViewerContext');
 let everRender = $state(render);
 $effect.pre(() => {
@@ -130,6 +130,7 @@ async function getMenuElements() {
 			onClose={() => {
 				outputs?.open.set(false)
 				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
+				onClose?.()
 			}}
 		>
 			{#snippet children({ handleClickAway, zIndex, open })}

package/package/components/apps/components/layout/AppModal.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     onOpenRecomputeIds?: string[] | undefined;
     onCloseRecomputeIds?: string[] | undefined;
     preclickAction?: (() => Promise<void>) | undefined;
+    onClose?: () => void;
 }
 declare const AppModal: import("svelte").Component<Props, {}, "">;
 type AppModal = ReturnType<typeof AppModal>;

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -608,13 +608,20 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 						startIcon={{ icon: Save }}
 						disabled={pathError != ''}
 						on:click={() => saveInitialDraft()}
+						unifiedSize="md"
+						variant="accent"
 					>
 						Save initial draft
 					</Button>
 				</div>
 			{/snippet}
 
-			<AppEditorHeaderDeployInitialDraft {summary} {appPath} bind:pathError bind:newEditedPath />
+			<AppEditorHeaderDeployInitialDraft
+				bind:summary={$summary}
+				bind:appPath={$appPath}
+				bind:pathError
+				bind:newEditedPath
+			/>
 		</DrawerContent>
 	</Drawer>
 {/if}

package/package/components/apps/editor/AppEditorHeaderDeploy.svelte

@@ -11,6 +11,7 @@ import { computeSecretUrl } from './appDeploy.svelte';
 import { base } from '../../../base';
 import { isCloudHosted } from '../../../cloud';
 import EEOnly from '../../EEOnly.svelte';
+import TextInput from '../../text_input/TextInput.svelte';
 let { policy, setPublishState, appPath, customPath = $bindable(), onLatest, savedApp, summary = $bindable(), deploymentMsg = $bindable(), customPathError = $bindable(), pathError = $bindable(), newEditedPath = $bindable(), newPath, hideSecretUrl = false } = $props();
 let dirtyCustomPath = $state(false);
 let path = $state(undefined);
@@ -76,44 +77,46 @@ $effect(() => {
 	</Alert>
 	<div class="py-2"></div>
 {/if}
-<span class="text-secondary text-sm font-bold">Summary</span>
-<div class="w-full pt-2">
+<label for="summary" class="text-emphasis text-xs font-semibold">Summary</label>
+<div class="w-full pt-1">
 	<!-- svelte-ignore a11y_autofocus -->
-	<input
-		autofocus
-		type="text"
-		placeholder="App summary"
-		class="text-sm w-full"
-		bind:value={summary}
-		onkeydown={(e) => {
-			e.stopPropagation()
-		}}
-		onkeyup={() => {
-			if (appPath == '' && summary?.length > 0 && !dirtyPath) {
-				path?.setName(
-					summary
-						.toLowerCase()
-						.replace(/[^a-z0-9_]/g, '_')
-						.replace(/-+/g, '_')
-						.replace(/^-|-$/g, '')
-				)
+	<TextInput
+		inputProps={{
+			id: 'summary',
+			autofocus: true,
+			placeholder: 'App summary',
+			onkeydown: (e) => {
+				e.stopPropagation()
+			},
+			onkeyup: () => {
+				if (appPath == '' && summary?.length > 0 && !dirtyPath) {
+					path?.setName(
+						summary
+							.toLowerCase()
+							.replace(/[^a-z0-9_]/g, '_')
+							.replace(/-+/g, '_')
+							.replace(/^-|-$/g, '')
+					)
+				}
 			}
 		}}
+		bind:value={summary}
 	/>
 </div>
-<div class="py-4"></div>
-<span class="text-secondary text-sm font-bold">Deployment message</span>
-<div class="w-full pt-2">
+<div class="py-6"></div>
+<label for="deploymentMsg" class="text-emphasis text-xs font-semibold">Deployment message</label>
+<div class="w-full pt-1">
 	<!-- svelte-ignore a11y_autofocus -->
-	<input
-		type="text"
-		placeholder="Optional deployment message"
-		class="text-sm w-full"
+	<TextInput
+		inputProps={{
+			id: 'deploymentMsg',
+			placeholder: 'Optional deployment message'
+		}}
 		bind:value={deploymentMsg}
 	/>
 </div>
-<div class="py-4"></div>
-<span class="text-secondary text-sm font-bold">Path</span>
+<div class="py-6"></div>
+<label for="path" class="text-emphasis text-xs font-semibold">Path</label>
 <Path
 	bind:this={path}
 	bind:dirty={dirtyPath}

package/package/components/apps/editor/AppEditorHeaderDeploy.svelte.d.ts

@@ -11,8 +11,8 @@ type $$ComponentProps = {
     pathError: string;
     newEditedPath: string;
     newPath: string;
-    hideSecretUrl: boolean;
+    hideSecretUrl?: boolean;
 };
-declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "customPath" | "deploymentMsg" | "customPathError" | "pathError" | "newEditedPath">;
+declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "pathError" | "customPath" | "deploymentMsg" | "customPathError" | "newEditedPath">;
 type AppEditorHeaderDeploy = ReturnType<typeof AppEditorHeaderDeploy>;
 export default AppEditorHeaderDeploy;

package/package/components/apps/editor/AppEditorHeaderDeployInitialDraft.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Alert } from '../../common';
 import Path from '../../Path.svelte';
-let { summary, appPath, pathError = $bindable(), newEditedPath = $bindable() } = $props();
+let { summary = $bindable(), appPath = $bindable(), pathError = $bindable(), newEditedPath = $bindable() } = $props();
 let path = $state(undefined);
 let dirtyPath = $state(false);
 </script>
@@ -19,11 +19,11 @@ let dirtyPath = $state(false);
 		onkeydown={(e) => {
 			e.stopPropagation()
 		}}
-		bind:value={$summary}
+		bind:value={summary}
 		onkeyup={() => {
-			if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
+			if (appPath == '' && summary?.length > 0 && !dirtyPath) {
 				path?.setName(
-					$summary
+					summary
 						.toLowerCase()
 						.replace(/[^a-z0-9_]/g, '_')
 						.replace(/-+/g, '_')

package/package/components/apps/editor/AppEditorHeaderDeployInitialDraft.svelte.d.ts

@@ -1,8 +1,8 @@
 declare const AppEditorHeaderDeployInitialDraft: import("svelte").Component<{
-    summary: any;
-    appPath: any;
+    summary?: any;
+    appPath?: any;
     pathError?: any;
     newEditedPath?: any;
-}, {}, "pathError" | "newEditedPath">;
+}, {}, "summary" | "appPath" | "pathError" | "newEditedPath">;
 type AppEditorHeaderDeployInitialDraft = ReturnType<typeof AppEditorHeaderDeployInitialDraft>;
 export default AppEditorHeaderDeployInitialDraft;

package/package/components/apps/editor/PublicApp.svelte

@@ -12,9 +12,12 @@ import { UserService } from '../../../gen';
 import { urlParamsToObject } from '../../../utils';
 import { goto } from '$app/navigation';
 import AppPreview from './AppPreview.svelte';
+import RawAppPreview from '../../raw_apps/RawAppPreview.svelte';
 import { twMerge } from 'tailwind-merge';
 import { writable } from 'svelte/store';
 let { notExists, noPermission, jwtError, onLoginSuccess, app, workspace } = $props();
+// Use workspace from props or from app.workspace_id (for custom path responses)
+let effectiveWorkspace = $derived(workspace ?? app?.workspace_id);
 setContext(IS_APP_PUBLIC_CONTEXT_KEY, true);
 const breakpoint = writable('lg');
 const darkMode = window.localStorage.getItem('dark-mode') ??
@@ -77,9 +80,9 @@ onMount(() => {
 {:else if noPermission}
 	<div class="px-4 mt-20 w-full text-center font-bold text-xl"> This app requires read access </div>
 	<div class="text-center mt-8 text-sm text-primary">
-		{#if $userStore}You are logged in but have no read access to this app{:else if globalUser && workspace}
+		{#if $userStore}You are logged in but have no read access to this app{:else if globalUser && effectiveWorkspace}
 			You are logged in but are not a member of the workspace <span class="text-xl font-bold"
-				>{workspace}</span
+				>{effectiveWorkspace}</span
 			> this app is part of
 		{:else}You must be logged in and have read access to this app{/if}</div
 	>
@@ -90,35 +93,51 @@ onMount(() => {
 	</div>
 {:else if app}
 	{#key app}
-		<div
-			class={twMerge(
-				'min-h-screen h-full w-full flex',
-				app?.value?.['css']?.['app']?.['viewer']?.class,
-				'wm-app-viewer'
-			)}
-			style={app?.value?.['css']?.['app']?.['viewer']?.style}
-		>
-			<AppPreview
-				noBackend={false}
-				context={{
-					email: $userStore?.email,
-					name: $userStore?.name,
-					groups: $userStore?.groups,
-					username: $userStore?.username,
-					query: urlParamsToObject(page.url.searchParams),
-					hash: page.url.hash.substring(1)
-				}}
-				{workspace}
-				summary={app.summary}
-				app={app.value}
-				appPath={app.path}
-				{breakpoint}
-				policy={app.policy}
-				isEditor={false}
-				replaceStateFn={(path) => goto(path)}
-				gotoFn={(path, opt) => goto(path, opt)}
+		{#if app.raw_app && effectiveWorkspace}
+			<RawAppPreview
+				workspace={effectiveWorkspace}
+				user={$userStore}
+				secret={app.bundle_secret}
+				path={app.path}
+				runnables={(app.value?.runnables ?? {}) as Record<string, Runnable>}
 			/>
-		</div>
+		{:else if app.raw_app && !effectiveWorkspace}
+			<div class="px-4 mt-20">
+				<Alert type="error" title="Configuration error">
+					Unable to load raw app: workspace information is missing.
+				</Alert>
+			</div>
+		{:else}
+			<div
+				class={twMerge(
+					'min-h-screen h-full w-full flex',
+					app?.value?.['css']?.['app']?.['viewer']?.class,
+					'wm-app-viewer'
+				)}
+				style={app?.value?.['css']?.['app']?.['viewer']?.style}
+			>
+				<AppPreview
+					noBackend={false}
+					context={{
+						email: $userStore?.email,
+						name: $userStore?.name,
+						groups: $userStore?.groups,
+						username: $userStore?.username,
+						query: urlParamsToObject(page.url.searchParams),
+						hash: page.url.hash.substring(1)
+					}}
+					workspace={effectiveWorkspace}
+					summary={app.summary}
+					app={app.value}
+					appPath={app.path}
+					{breakpoint}
+					policy={app.policy}
+					isEditor={false}
+					replaceStateFn={(path) => goto(path)}
+					gotoFn={(path, opt) => goto(path, opt)}
+				/>
+			</div>
+		{/if}
 	{/key}
 {:else}
 	<Skeleton layout={[[4], 0.5, [50]]} />

package/package/components/apps/editor/PublicApp.svelte.d.ts

@@ -6,6 +6,7 @@ type $$ComponentProps = {
     onLoginSuccess: () => void;
     app: (AppWithLastVersion & {
         value: any;
+        workspace_id?: string;
     }) | undefined;
     workspace: string | undefined;
 };

package/package/components/apps/editor/appPolicy.js

@@ -34,13 +34,14 @@ export async function updatePolicy(app, currentPolicy) {
         if (c.type === 'dbexplorercomponent') {
             let nr = [];
             let config = c.configuration;
-            const dbType = config?.type?.selected;
-            let pg = config?.type?.configuration?.[dbType];
+            const dbType = (config?.type?.selected === 'datatable' ? 'postgresql' : config?.type?.selected);
+            let pg = config?.type?.configuration?.[config?.type?.selected];
             if (pg && dbType) {
-                const { table, resource, ducklake } = pg;
+                const { table, resource, ducklake, datatable } = pg;
                 const tableValue = table.value;
                 const dbPath = resource?.value.split('$res:')[1] ??
-                    ducklake?.value?.split('ducklake://')[1];
+                    ducklake?.value?.split('ducklake://')[1] ??
+                    datatable?.value;
                 const columnDefs = c.configuration.columnDefs.value;
                 const whereClause = c.configuration.whereClause.value;
                 if (tableValue && dbPath && columnDefs) {

package/package/components/apps/editor/appUtils.d.ts

@@ -12,7 +12,7 @@ type GridItemLocation = {
     subgridItemIndex: number;
     subgridKey: string;
 };
-interface GridItemWithLocation {
+export interface GridItemWithLocation {
     location: GridItemLocation;
     item: GridItem;
     parent: string | undefined;

package/package/components/apps/editor/component/components.d.ts

@@ -4835,6 +4835,7 @@ export declare const components: {
                         readonly bigquery: "BigQuery";
                         readonly snowflake_oauth: "Snowflake OAuth";
                         readonly ducklake: "Ducklake";
+                        readonly datatable: "Data table";
                     };
                     readonly configuration: {
                         readonly postgresql: {
@@ -4898,6 +4899,16 @@ export declare const components: {
                                 readonly value: undefined;
                             };
                         };
+                        readonly datatable: {
+                            readonly datatable: StaticAppInput;
+                            readonly table: {
+                                readonly fieldType: "select";
+                                readonly subFieldType: "db-table";
+                                readonly type: "static";
+                                readonly selectOptions: readonly [];
+                                readonly value: undefined;
+                            };
+                        };
                     };
                 };
                 readonly columnDefs: StaticAppInput;

package/package/components/apps/editor/component/components.js

@@ -3547,7 +3547,8 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                         snowflake: 'Snowflake',
                         bigquery: 'BigQuery',
                         snowflake_oauth: 'Snowflake OAuth',
-                        ducklake: 'Ducklake'
+                        ducklake: 'Ducklake',
+                        datatable: 'Data table'
                     },
                     configuration: {
                         postgresql: {
@@ -3641,6 +3642,21 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 selectOptions: [],
                                 value: undefined
                             }
+                        },
+                        datatable: {
+                            datatable: {
+                                type: 'static',
+                                fieldType: 'datatable',
+                                subFieldType: 'datatable',
+                                value: ''
+                            },
+                            table: {
+                                fieldType: 'select',
+                                subFieldType: 'db-table',
+                                type: 'static',
+                                selectOptions: [],
+                                value: undefined
+                            }
                         }
                     }
                 },
@@ -3649,7 +3665,8 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     fieldType: 'array',
                     subFieldType: 'db-explorer',
                     value: [],
-                    loading: false
+                    loading: false,
+                    allowTypeChange: false
                 },
                 rowIdCol: {
                     type: 'static',

package/package/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -16,7 +16,7 @@ import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
 import Popover from '../../../Popover.svelte';
 import { tailwindClasses } from './tailwindUtils';
 import { deepEqual } from 'fast-equals';
-let { name, value = $bindable({}), forceStyle = false, forceClass = false, quickStyleProperties = undefined, componentType = undefined, tooltip = undefined, shouldDisplayLeft = false, shouldDisplayRight = false, overriden = false, overridding = false, wmClass = undefined } = $props();
+let { name, value = $bindable(), forceStyle = false, forceClass = false, quickStyleProperties = undefined, componentType = undefined, tooltip = undefined, shouldDisplayLeft = false, shouldDisplayRight = false, overriden = false, overridding = false, wmClass = undefined } = $props();
 const dispatch = createEventDispatcher();
 let isQuickMenuOpen = $state(false);
 let prevValue = structuredClone($state.snapshot(value));
@@ -27,6 +27,8 @@ $effect(() => {
     dispatch('change', value);
 });
 function toggleQuickMenu() {
+    if (!value)
+        return;
     try {
         if (!value.style) {
             value.style = '';

package/package/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte

@@ -46,7 +46,7 @@ let { cache_ttl = $bindable(), btnProps } = $props();
 				right: 'Cache the results for each possible inputs'
 			}}
 		/>
-		<div class="mb-4">
+		<div class="mt-6">
 			<span class="text-xs font-bold">How long to keep cache valid</span>
 
 			{#if cache_ttl}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -4,7 +4,7 @@ import { Button, Drawer, DrawerContent } from '../../../common';
 import { base } from '../../../../base';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
 import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
-import { emptySchema } from '../../../../utils';
+import { emptySchema, sendUserToast } from '../../../../utils';
 import { getContext, tick, untrack } from 'svelte';
 import { workspaceStore } from '../../../../stores';
 import { createEventDispatcher } from 'svelte';
@@ -13,17 +13,23 @@ import { computeFields } from './utils';
 import { inferArgs, loadSchema } from '../../../../infer';
 import AppRunButton from './AppRunButton.svelte';
 import { getScriptByPath } from '../../../../scripts';
-import { sendUserToast } from '../../../../toast';
 import { autoPlacement } from '@floating-ui/core';
 import { ExternalLink, Eye, GitFork, Pen, RefreshCw, Trash } from 'lucide-svelte';
 import { get } from 'svelte/store';
 import RunButton from '../../../RunButton.svelte';
 import Popover from '../../../meltComponents/Popover.svelte';
+import ScriptEditorDrawer from '../../../flows/content/ScriptEditorDrawer.svelte';
+import FlowEditorDrawer from '../../../flows/content/FlowEditorDrawer.svelte';
+import { ScriptService } from '../../../../gen';
 let { runnable = $bindable(), fields = $bindable(), id, rawApps = false, isLoading = false, onRun = async () => { }, onCancel = async () => { } } = $props();
 const viewerContext = getContext('AppViewerContext');
 let drawerFlowViewer = $state(undefined);
 let flowPath = $state('');
 let notFound = $state(false);
+// Key to force re-mounting of viewer components (bypasses FlowModuleScript cache)
+let refreshKey = $state(0);
+let scriptEditorDrawer = $state(undefined);
+let flowEditorDrawer = $state(undefined);
 const dispatch = createEventDispatcher();
 async function refreshScript(runnable) {
     try {
@@ -74,6 +80,33 @@ async function fork(path) {
         }
     });
 }
+async function openScriptEditor(path) {
+    try {
+        const script = await ScriptService.getScriptByPath({
+            workspace: $workspaceStore,
+            path
+        });
+        scriptEditorDrawer?.openDrawer(script.hash, () => {
+            // Increment refreshKey to force re-mounting of FlowModuleScript (bypasses cache)
+            refreshKey++;
+            // Refresh the schema
+            lastRunnable = undefined;
+            refresh(runnable);
+        });
+    }
+    catch (e) {
+        sendUserToast(`Failed to load script: ${e}`, true);
+    }
+}
+function openFlowEditor(path) {
+    flowEditorDrawer?.openDrawer(path, () => {
+        // Increment refreshKey to force re-mounting of FlowPathViewer (bypasses cache)
+        refreshKey++;
+        // Refresh the schema
+        lastRunnable = undefined;
+        refresh(runnable);
+    });
+}
 let lastRunnable = undefined;
 function refresh(runnable) {
     if (deepEqual(runnable, lastRunnable)) {
@@ -102,6 +135,28 @@ $effect(() => {
 	</DrawerContent>
 </Drawer>
 
+<ScriptEditorDrawer
+	bind:this={scriptEditorDrawer}
+	on:save={() => {
+		// Increment refreshKey to force re-mounting of FlowModuleScript (bypasses cache)
+		refreshKey++
+		// Refresh the schema
+		lastRunnable = undefined
+		refresh(runnable)
+	}}
+/>
+
+<FlowEditorDrawer
+	bind:this={flowEditorDrawer}
+	on:save={() => {
+		// Increment refreshKey to force re-mounting of FlowPathViewer (bypasses cache)
+		refreshKey++
+		// Refresh the schema
+		lastRunnable = undefined
+		refresh(runnable)
+	}}
+/>
+
 <div class="p-2 h-full flex flex-col gap-2">
 	<div class="flex flex-row-reverse w-full gap-2">
 		{#if !rawApps}
@@ -115,7 +170,10 @@ $effect(() => {
 			size="xs"
 			startIcon={{ icon: RefreshCw }}
 			on:click={async () => {
-				sendUserToast('Refreshing inputs')
+				sendUserToast('Getting latest script version at that path')
+				// Increment refreshKey to force re-mounting of viewer components (bypasses cache)
+				refreshKey++
+				lastRunnable = undefined
 				refresh(runnable)
 				if (viewerContext) {
 					viewerContext.stateId.update((x) => x + 1)
@@ -149,10 +207,12 @@ $effect(() => {
 				variant="default"
 				size="xs"
 				startIcon={{ icon: Pen }}
-				endIcon={{ icon: ExternalLink }}
-				target="_blank"
-				href="{base}/flows/edit/{runnable.path}?nodraft=true">Edit</Button
+				on:click={() => {
+					openFlowEditor(runnable.path)
+				}}
 			>
+				Edit
+			</Button>
 			<Button
 				variant="default"
 				size="xs"
@@ -164,6 +224,16 @@ $effect(() => {
 				Details
 			</Button>
 		{:else}
+			<Button
+				size="xs"
+				variant="default"
+				startIcon={{ icon: Pen }}
+				on:click={() => {
+					openScriptEditor(runnable.path)
+				}}
+			>
+				Edit
+			</Button>
 			<Button
 				size="xs"
 				variant="default"
@@ -216,7 +286,7 @@ $effect(() => {
 		/>
 	</div>
 	<div class="w-full grow overflow-y-auto">
-		{#key viewerContext?.stateId ? get(viewerContext.stateId) : 0}
+		{#key `${viewerContext?.stateId ? get(viewerContext.stateId) : 0}-${refreshKey}`}
 			{#if notFound}
 				<div class="text-red-400"
 					>{runnable.runType} not found at {runnable.path} in workspace {$workspaceStore}</div

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { ConnectedAppInput, RowAppInput, RunnableByPath, StaticAppInput, UserAppInput } from '../../inputType';
+import type { ConnectedAppInput, RowAppInput, RunnableByPath, StaticAppInput, UserAppInput, CtxAppInput } from '../../inputType';
 interface Props {
     runnable: RunnableByPath;
-    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput> | undefined;
+    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | CtxAppInput> | undefined;
     id: string;
     rawApps?: boolean;
     isLoading?: boolean;