windmill-components 1.408.2 → 1.430.3

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

@@ -13,10 +13,10 @@ import Toggle from '../../Toggle.svelte';
 import { AppService, DraftService } from '../../../gen';
 import { redo, undo } from '../../../history';
 import { enterpriseLicense, workspaceStore } from '../../../stores';
-import { AlignHorizontalSpaceAround, BellOff, Bug, Clipboard, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, MoreVertical, RefreshCw, Save, Smartphone, FileClock } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, BellOff, Bug, Clipboard, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, MoreVertical, RefreshCw, Save, Smartphone, FileClock, Sun, Moon, SunMoon } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { classNames, cleanValueProperties, copyToClipboard, truncateRev, orderedJsonStringify } from '../../../utils';
+import { classNames, cleanValueProperties, copyToClipboard, truncateRev, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
 import { BG_PREFIX, allItems, toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import AppInputs from './AppInputs.svelte';
@@ -48,6 +48,8 @@ import { collectOneOfFields } from './appUtils';
 import Summary from '../../Summary.svelte';
 import ToggleEnable from '../../common/toggleButton-v2/ToggleEnable.svelte';
 import HideButton from './settingsPanel/HideButton.svelte';
+import DeployOverrideConfirmationModal from '../../common/confirmationModal/DeployOverrideConfirmationModal.svelte';
+import { computeS3FileInputPolicy, computeWorkspaceS3FileInputPolicy } from './appUtilsS3';
 async function hash(message) {
     try {
         const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -73,7 +75,11 @@ export let version = undefined;
 export let leftPanelHidden = false;
 export let rightPanelHidden = false;
 export let bottomPanelHidden = false;
-const { app, summary, breakpoint, appPath, jobs, jobsById, staticExporter, errorByComponent, openDebugRun, mode } = getContext('AppViewerContext');
+let deployedValue = undefined; // Value to diff against
+let deployedBy = undefined; // Author
+let confirmCallback = () => { }; // What happens when user clicks `override` in warning
+let open = false; // Is confirmation modal open
+const { app, summary, breakpoint, appPath, jobs, jobsById, staticExporter, errorByComponent, openDebugRun, mode, darkMode } = getContext('AppViewerContext');
 const { history, jobsDrawerOpen, refreshComponents } = getContext('AppEditorContext');
 const loading = {
     publish: false,
@@ -109,7 +115,9 @@ function collectStaticFields(fields) {
     }));
 }
 async function computeTriggerables() {
-    const allTriggers = (await Promise.all(allItems($app.grid, $app.subgrids)
+    const items = allItems($app.grid, $app.subgrids);
+    console.debug('items', items);
+    const allTriggers = (await Promise.all(items
         .flatMap((x) => {
         let c = x.data;
         let r = [
@@ -187,6 +195,29 @@ async function computeTriggerables() {
     delete policy.triggerables;
     const ntriggerables = Object.fromEntries(allTriggers.filter(Boolean));
     policy.triggerables_v2 = ntriggerables;
+    const s3_inputs = items
+        .filter((x) => x.data.type === 's3fileinputcomponent')
+        .map((x) => {
+        const c = x.data;
+        const config = c.configuration;
+        return computeS3FileInputPolicy(config?.type?.configuration?.s3, $app);
+    })
+        .filter(Boolean);
+    if (items.findIndex((x) => {
+        const c = x.data;
+        if (c.type === 'schemaformcomponent') {
+            return (Object.values(c.componentInput?.value?.properties ?? {}).findIndex((p) => p?.type === 'object' && p?.format === 'resource-s3_object') !== -1);
+        }
+        else if (c.type === 'formbuttoncomponent' || c.type === 'formcomponent') {
+            return (Object.values(c.componentInput?.fields ?? {}).findIndex((p) => p?.fieldType === 'object' && p?.format === 'resource-s3_object') !== -1);
+        }
+        else {
+            return false;
+        }
+    }) !== -1) {
+        s3_inputs.push(computeWorkspaceS3FileInputPolicy());
+    }
+    policy.s3_inputs = s3_inputs;
 }
 async function processRunnable(id, runnable, fields) {
     const staticInputs = collectStaticFields(fields);
@@ -253,6 +284,57 @@ async function createApp(path) {
         sendUserToast('Error creating app', e);
     }
 }
+async function handleUpdateApp(npath) {
+    // We have to make sure there is no updates when we clicked the button
+    await compareVersions();
+    if (onLatest) {
+        // Handle directly
+        await updateApp(npath);
+    }
+    else {
+        // There is onLatest, but we need more information while deploying
+        // We need it to show diff
+        // Handle through confirmation modal
+        await syncWithDeployed();
+        if (deployedValue &&
+            savedApp &&
+            $app &&
+            orderedJsonStringify(deployedValue) ===
+                orderedJsonStringify(replaceFalseWithUndefined({
+                    summary: $summary,
+                    value: $app,
+                    path: newPath || savedApp.draft?.path || savedApp.path,
+                    policy
+                }))) {
+            await updateApp(npath);
+        }
+        else {
+            confirmCallback = async () => {
+                open = false;
+                await updateApp(npath);
+            };
+            // Open confirmation modal
+            open = true;
+        }
+    }
+}
+async function syncWithDeployed() {
+    const deployedApp = await AppService.getAppByPath({
+        workspace: $workspaceStore,
+        path: appPath,
+        withStarredInfo: true
+    });
+    deployedBy = deployedApp.created_by;
+    // Strip off extra information
+    deployedValue = replaceFalseWithUndefined({
+        ...deployedApp,
+        id: undefined,
+        created_at: undefined,
+        created_by: undefined,
+        versions: undefined,
+        extra_perms: undefined
+    });
+}
 async function updateApp(npath) {
     await computeTriggerables();
     await AppService.updateApp({
@@ -462,11 +544,17 @@ async function compareVersions() {
     if (version === undefined) {
         return;
     }
-    const appHistory = await AppService.getAppHistoryByPath({
-        workspace: $workspaceStore,
-        path: appPath
-    });
-    onLatest = version === appHistory[0]?.version;
+    try {
+        const appVersion = await AppService.getAppLatestVersion({
+            workspace: $workspaceStore,
+            path: appPath
+        });
+        onLatest = version === appVersion?.version;
+    }
+    catch (e) {
+        console.error('Error comparing versions', e);
+        onLatest = true;
+    }
 }
 $: saveDrawerOpen && compareVersions();
 let selectedJobId = undefined;
@@ -579,14 +667,16 @@ let moreItems = [
     {
         displayName: 'Diff',
         icon: DiffIcon,
-        action: () => {
+        action: async () => {
             if (!savedApp) {
                 return;
             }
+            // deployedValue should be syncronized when we open Diff
+            await syncWithDeployed();
             diffDrawer?.openDrawer();
             diffDrawer?.setDiff({
                 mode: 'normal',
-                deployed: savedApp,
+                deployed: deployedValue ?? savedApp,
                 draft: savedApp.draft,
                 current: {
                     summary: $summary,
@@ -617,6 +707,20 @@ export function openTroubleshootPanel() {
     debugAppDrawerOpen = true;
 }
 const dispatch = createEventDispatcher();
+function setTheme(newDarkMode) {
+    let globalDarkMode = window.localStorage.getItem('dark-mode')
+        ? window.localStorage.getItem('dark-mode') === 'dark'
+        : window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (newDarkMode === true || (newDarkMode === null && globalDarkMode)) {
+        document.documentElement.classList.add('dark');
+    }
+    else if (newDarkMode === false) {
+        document.documentElement.classList.remove('dark');
+    }
+    $darkMode = newDarkMode ?? globalDarkMode;
+}
+let priorDarkMode = document.documentElement.classList.contains('dark');
+setTheme($app?.darkMode);
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -631,6 +735,23 @@ const dispatch = createEventDispatcher();
 		path: newPath || savedApp?.draft?.path || savedApp?.path,
 		policy
 	}}
+	additionalExitAction={() => {
+		setTheme(priorDarkMode)
+	}}
+/>
+
+<DeployOverrideConfirmationModal
+	bind:deployedBy
+	bind:confirmCallback
+	bind:open
+	{diffDrawer}
+	bind:deployedValue
+	currentValue={{
+		summary: $summary,
+		value: $app,
+		path: newPath || savedApp?.draft?.path || savedApp?.path,
+		policy
+	}}
 />
 
 {#if appPath == ''}
@@ -690,8 +811,8 @@ const dispatch = createEventDispatcher();
 <Drawer bind:open={saveDrawerOpen} size="800px">
 	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
 		{#if !onLatest}
-			<Alert title="You're not on the latest app version" type="warning">
-				By deploying, you may overwrite changes made by other users.
+			<Alert title="You're not on the latest app version. " type="warning">
+				By deploying, you may overwrite changes made by other users. Press 'Deploy' to see diff.
 			</Alert>
 			<div class="py-2" />
 		{/if}
@@ -747,15 +868,18 @@ const dispatch = createEventDispatcher();
 				variant="border"
 				color="light"
 				disabled={!savedApp || savedApp.draft_only}
-				on:click={() => {
+				on:click={async () => {
 					if (!savedApp) {
 						return
 					}
+					// deployedValue should be syncronized when we open Diff
+					await syncWithDeployed()
+
 					saveDrawerOpen = false
 					diffDrawer?.openDrawer()
 					diffDrawer?.setDiff({
 						mode: 'normal',
-						deployed: savedApp,
+						deployed: deployedValue ?? savedApp,
 						draft: savedApp.draft,
 						current: {
 							summary: $summary,
@@ -769,7 +893,7 @@ const dispatch = createEventDispatcher();
 								if (appPath == '') {
 									createApp(newPath)
 								} else {
-									updateApp(newPath)
+									handleUpdateApp(newPath)
 								}
 							}
 						}
@@ -788,7 +912,7 @@ const dispatch = createEventDispatcher();
 					if (appPath == '') {
 						createApp(newPath)
 					} else {
-						updateApp(newPath)
+						handleUpdateApp(newPath)
 					}
 				}}
 			>
@@ -1168,6 +1292,34 @@ const dispatch = createEventDispatcher();
 					/>
 				</ToggleButtonGroup>
 			{/if}
+			{#if $app}
+				<ToggleButtonGroup
+					class="h-[30px]"
+					on:selected={(e) => {
+						setTheme(e.detail)
+					}}
+					bind:selected={$app.darkMode}
+				>
+					<ToggleButton
+						icon={SunMoon}
+						value={undefined}
+						tooltip="The app mode between dark/light is automatic"
+						iconProps={{ size: 16 }}
+					/>
+					<ToggleButton
+						icon={Sun}
+						value={false}
+						tooltip="Force light mode"
+						iconProps={{ size: 16 }}
+					/>
+					<ToggleButton
+						tooltip="Force dark mode"
+						icon={Moon}
+						value={true}
+						iconProps={{ size: 16 }}
+					/>
+				</ToggleButtonGroup>
+			{/if}
 			<div class="flex flex-row gap-2">
 				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
 					<ToggleButton

package/package/components/apps/editor/AppExportButton.svelte

@@ -41,9 +41,8 @@ export function open(app_l) {
 							size="sm"
 							startIcon={{ icon: Clipboard }}
 							btnClasses="absolute top-2 right-2 w-min z-20"
-						>
-							Copy content
-						</Button>
+							iconOnly
+						/>
 						{#key rawType}
 							<Highlight
 								class="overflow-auto px-1 flex-1"

package/package/components/apps/editor/AppPreview.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, setContext } from 'svelte';
+<script>import { getContext, onDestroy, setContext } from 'svelte';
 import { get, writable } from 'svelte/store';
 import { buildWorld } from '../rx';
 import Button from '../../common/button/Button.svelte';
@@ -50,7 +50,23 @@ function resizeWindow() {
 }
 resizeWindow();
 const parentWidth = writable(0);
-const darkMode = writable(document.documentElement.classList.contains('dark'));
+let previousDarkMode = document.documentElement.classList.contains('dark');
+const darkMode = writable(app?.darkMode ?? previousDarkMode);
+onDestroy(() => {
+    setTheme(previousDarkMode);
+});
+function setTheme(darkMode) {
+    let globalDarkMode = window.localStorage.getItem('dark-mode')
+        ? window.localStorage.getItem('dark-mode') === 'dark'
+        : window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (darkMode === true || (darkMode === null && globalDarkMode)) {
+        document.documentElement.classList.add('dark');
+    }
+    else if (darkMode === false) {
+        document.documentElement.classList.remove('dark');
+    }
+}
+setTheme($darkMode);
 const state = writable({});
 let parentContext = getContext('AppViewerContext');
 let worldStore = buildWorld(ncontext);
@@ -110,7 +126,8 @@ setContext('AppViewerContext', {
         componentNumber: 0,
         refreshing: [],
         progress: 100
-    })
+    }),
+    panzoomActive: writable(false)
 });
 let previousSelectedIds = undefined;
 $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
@@ -125,7 +142,7 @@ $: width =
         : 'w-full min-w-[768px]';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 function onThemeChange() {
-    $darkMode = document.documentElement.classList.contains('dark');
+    $darkMode = app?.darkMode ?? document.documentElement.classList.contains('dark');
 }
 const cssId = 'wm-global-style';
 let css = undefined;
@@ -182,7 +199,7 @@ $: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 
 <svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
 
-<div class="relative h-full grow" bind:clientHeight={appHeight}>
+<div class="relative min-h-full grow" bind:clientHeight={appHeight}>
 	<div id="app-editor-top-level-drawer" />
 	<div id="app-editor-select" />
 

package/package/components/apps/editor/ComponentHeader.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, ArrowDownFromLine, Bug, Network, Pen, Plug2 } from 'lucide-svelte';
+import { Anchor, ArrowDownFromLine, Bug, Network, Pen, Plug } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import Popover from '../../Popover.svelte';
 import { Button, Popup } from '../../common';
@@ -8,6 +8,7 @@ import { connectOutput } from './appUtils';
 import TabsDebug from './TabsDebug.svelte';
 import ComponentOutputViewer from './contextPanel/ComponentOutputViewer.svelte';
 import DecisionTreeDebug from './DecisionTreeDebug.svelte';
+import AnimatedButton from '../../common/button/AnimatedButton.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -26,6 +27,7 @@ const MINIMUM_WIDTH = 20;
 let maxWidth = 10;
 let isManuallySelected = false;
 let componentIsDebugging = false;
+let id_width = 0;
 $: maxWidth = Math.max(Math.round(0.2 * componentContainerWidth), MINIMUM_WIDTH);
 const dispatch = createEventDispatcher();
 const { errorByComponent, openDebugRun, connectingInput } = getContext('AppViewerContext');
@@ -42,18 +44,35 @@ function checkComponentOptions() {
     };
     return Object.values(componentOptions).some((value) => value);
 }
+let connectingPopupHover = false;
+$: connectingPopupHover && dispatch('mouseover');
 </script>
 
 {#if connecting}
-	<div class="absolute z-50 left-6 -top-[11px] overflow-auto">
-		<Popup floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}>
+	<div
+		class="absolute z-50 overflow-auto -top-[18px]"
+		style="left: {id_width}px;"
+		data-connection-button
+	>
+		<Popup
+			floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}
+			bind:popupHover={connectingPopupHover}
+		>
 			<svelte:fragment slot="button">
-				<button
-					id={`connect-output-${component.id}`}
-					class="bg-red-500/70 border border-red-600 px-1 py-0.5"
-					title="Outputs"
-					aria-label="Open output"><Plug2 size={12} /></button
+				<AnimatedButton
+					animate={true}
+					baseRadius="9999px"
+					wrapperClasses="h-full w-full pt-2"
+					marginWidth="2px"
+					animationDuration="3s"
 				>
+					<div
+						id={`connect-output-${component.id}`}
+						class="h-[20px] w-[20px] bg-surface rounded-full center-center text-primary"
+						title="Outputs"
+						aria-label="Open output"><Plug size={12} /></div
+					>
+				</AnimatedButton>
 			</svelte:fragment>
 			<ComponentOutputViewer
 				suffix="connect"
@@ -77,15 +96,19 @@ function checkComponentOptions() {
 			draggable="false"
 			title={`Id: ${component.id}`}
 			class={twMerge(
-				'py-0.5 text-2xs w-fit h-full min-h-5 border rounded z-50 cursor-move flex flex-row flex-nowrap font-semibold items-center shadow',
+				'py-0.5 text-2xs w-fit h-full min-h-5 rounded z-50 cursor-move flex flex-row flex-nowrap font-semibold items-center shadow',
 				selected
-					? 'bg-indigo-500/90 border-indigo-500 text-white'
+					? 'bg-blue-600/90 text-white'
 					: $connectingInput.opened
-					? 'bg-red-500/90 border-red-600 text-white'
-					: 'bg-blue-500/90 border-blue-600 text-white'
+					? 'bg-[#f8aa4b]/90  text-white'
+					: 'bg-blue-400/90 text-white'
 			)}
 		>
-			<div class={`px-1 text-2xs w-full min-w-4 h-full truncate`} style="max-width: {maxWidth}px;">
+			<div
+				class={`px-1 text-2xs w-full min-w-4 h-full truncate`}
+				style="max-width: {maxWidth}px;"
+				bind:clientWidth={id_width}
+			>
 				{component.id}
 			</div>
 			{#if !connecting}
@@ -95,8 +118,8 @@ function checkComponentOptions() {
 						class={twMerge(
 							'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full',
 							fullHeight
-								? ' bg-indigo-800 text-indigo-200'
-								: 'text-white hover:bg-indigo-700 hover:text-indigo-200'
+								? 'bg-blue-300 text-blue-800'
+								: 'text-white hover:bg-blue-400 hover:text-white'
 						)}
 						on:click={() => dispatch('fillHeight')}
 						on:pointerdown|stopPropagation
@@ -108,9 +131,7 @@ function checkComponentOptions() {
 						title="Lock Position"
 						class={twMerge(
 							'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full',
-							locked
-								? ' bg-indigo-800 text-indigo-200'
-								: 'text-white hover:bg-indigo-700 hover:text-indigo-200'
+							locked ? 'bg-blue-300 text-blue-800' : 'text-white hover:bg-blue-400 hover:text-white'
 						)}
 						on:click={() => dispatch('lock')}
 						on:pointerdown|stopPropagation
@@ -127,10 +148,10 @@ function checkComponentOptions() {
 		{#if selected && !connecting && checkComponentOptions()}
 			<div
 				class={twMerge(
-					'px-1 py-0.5 text-2xs font-semibold w-fit min-h-5 border shadow rounded z-50 flex flex-row items-center flex-nowrap',
+					'px-1 py-0.5 text-2xs font-semibold w-fit min-h-5 shadow rounded z-50 flex flex-row items-center flex-nowrap',
 					isManuallySelected || componentIsDebugging
 						? 'bg-red-100 text-red-600 border-red-500'
-						: 'bg-indigo-100/90 border-indigo-200 text-indigo-600'
+						: 'bg-blue-100/90 border-blue-200 text-blue-600'
 				)}
 			>
 				{#if hasInlineEditor}
@@ -139,17 +160,13 @@ function checkComponentOptions() {
 						class={twMerge(
 							'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full',
 							inlineEditorOpened
-								? 'bg-indigo-300 text-indigo-800'
-								: 'text-indigo-600 hover:bg-indigo-300 hover:text-indigo-800'
+								? 'bg-blue-300 text-blue-800'
+								: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 						)}
 						on:click={() => dispatch('triggerInlineEditor')}
 						on:pointerdown|stopPropagation
 					>
-						{#if inlineEditorOpened}
-							<Pen aria-label="Unlock position" size={11} />
-						{:else}
-							<Pen aria-label="Lock position" size={11} />
-						{/if}
+						<Pen aria-label="Edit" size={11} />
 					</button>
 				{/if}
 				{#if component.type === 'conditionalwrapper'}
@@ -171,10 +188,10 @@ function checkComponentOptions() {
 					<button
 						title={'Open Decision Tree Editor'}
 						class={twMerge(
-							'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full',
+							'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full center-center',
 							componentIsDebugging
 								? 'text-red-600 hover:bg-red-300 hover:text-red-800'
-								: 'text-indigo-600 hover:bg-indigo-300 hover:text-indigo-800'
+								: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 						)}
 						on:click={() => {
 							const element = document.getElementById(`decision-tree-graph-editor`)

package/package/components/apps/editor/DecisionTreeDebug.svelte

@@ -54,7 +54,7 @@ $: onNodesChange(nodes);
 			'px-1 text-2xs font-bold rounded cursor-pointer w-fit h-full',
 			componentIsDebugging
 				? ' hover:bg-red-300 hover:text-red-800'
-				: ' hover:bg-indigo-300 hover:text-indigo-800'
+				: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 		)}
 		on:click={() => dispatch('triggerInlineEditor')}
 		on:pointerdown|stopPropagation

package/package/components/apps/editor/GridEditor.svelte

@@ -18,7 +18,7 @@ import { Loader2 } from 'lucide-svelte';
 import Popover from '../../Popover.svelte';
 export let policy;
 const { selectedComponent, app, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath, bgRuns, worldStore } = getContext('AppViewerContext');
-const { history, scale, componentActive } = getContext('AppEditorContext');
+const { history, componentActive } = getContext('AppEditorContext');
 let previousSelectedIds = undefined;
 $: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
     previousSelectedIds = $selectedComponent;
@@ -129,7 +129,10 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 		}}
 		bind:clientWidth={$parentWidth}
 	>
-		<div class="subgrid overflow-visible z-100" style={`transform: scale(${$scale / 100});`}>
+		<div
+			class="subgrid overflow-visible z-100 outline-dashed outline-2 outline-offset-4 outline-gray-300 dark:outline-gray-500"
+			style={`transform: scale(1);`}
+		>
 			<Grid
 				allIdsInPath={$allIdsInPath}
 				selectedIds={$selectedComponent}
@@ -169,6 +172,7 @@ export function moveComponentBetweenSubgrids(componentId, parentComponentId, sub
 						{ x, y }
 					)
 				}}
+				disableMove={!!$connectingInput.opened}
 			>
 				<ComponentWrapper
 					id={dataItem.id}

package/package/components/apps/editor/RunnableJobPanel.svelte

@@ -1,6 +1,6 @@
 <script>import { getContext } from 'svelte';
 import TestJobLoader from '../../TestJobLoader.svelte';
-import RunnalbeJobPanelInner from './RunnalbeJobPanelInner.svelte';
+import RunnableJobPanelInner from './RunnableJobPanelInner.svelte';
 export let float = true;
 export let hidden = false;
 export let testJob = undefined;
@@ -46,12 +46,12 @@ let resultDrawerOpen = false;
 			class="absolute z-[100] top-0 right-0 border-t h-full"
 			style="width: {$runnableJobEditorPanel.width}px; transform: translateX({$runnableJobEditorPanel.width}px);"
 		>
-			<RunnalbeJobPanelInner {frontendJob} {testJob} />
+			<RunnableJobPanelInner {testIsLoading} {frontendJob} {testJob} />
 		</div>
 	{:else}
 		<div class="flex flex-col w-full">
 			{#if $selectedComponentInEditor}
-				<RunnalbeJobPanelInner {frontendJob} {testJob} />
+				<RunnableJobPanelInner {testIsLoading} {frontendJob} {testJob} />
 			{:else if !hidden}
 				<div class="text-sm text-secondary text-center py-8 px-2 border-l h-full">
 					Logs and results will be displayed here

package/package/components/apps/editor/{RunnalbeJobPanelInner.svelte → RunnableJobPanelInner.svelte}

@@ -4,7 +4,7 @@ import { Splitpanes, Pane } from 'svelte-splitpanes';
 import { Loader2 } from 'lucide-svelte';
 export let frontendJob = false;
 export let testJob = undefined;
-let testIsLoading = false;
+export let testIsLoading = false;
 let logDrawerOpen = false;
 let resultDrawerOpen = false;
 </script>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { Job } from '../../../gen';
+declare const __propDef: {
+    props: {
+        frontendJob?: boolean | any;
+        testJob?: Job | any;
+        testIsLoading?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RunnableJobPanelInnerProps = typeof __propDef.props;
+export type RunnableJobPanelInnerEvents = typeof __propDef.events;
+export type RunnableJobPanelInnerSlots = typeof __propDef.slots;
+export default class RunnableJobPanelInner extends SvelteComponent<RunnableJobPanelInnerProps, RunnableJobPanelInnerEvents, RunnableJobPanelInnerSlots> {
+}
+export {};

package/package/components/apps/editor/SubGridEditor.svelte

@@ -168,6 +168,7 @@ export function moveToRoot(componentId, position) {
 							)
 						}
 					}}
+					disableMove={!!$connectingInput.opened}
 				>
 					<ComponentWrapper
 						id={dataItem.id}

package/package/components/apps/editor/TabsDebug.svelte

@@ -19,7 +19,7 @@ let selected = null;
 		'text-2xs font-bold w-fit h-full cursor-pointer rounded',
 		isManuallySelected
 			? 'hover:bg-red-200 hover:text-red-800'
-			: ' hover:text-indigo-800 hover:bg-indigo-300'
+			: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 	)}
 	on:click={() => dispatch('triggerInlineEditor')}
 	on:pointerdown|stopPropagation

package/package/components/apps/editor/appUtils.js

@@ -614,6 +614,7 @@ export function connectInput(connectingInput, componentId, path, componentType)
     if (connectingInput) {
         if (connectingInput.onConnect) {
             connectingInput.onConnect({ componentId, path });
+            sendUserToast(`Connected to ${componentId}.${path}`, false);
         }
         connectingInput = {
             opened: false,

package/package/components/apps/editor/appUtilsInfer.js

@@ -8,6 +8,7 @@ export async function inferDeps(code, worldOutputs, componentInput, app) {
             componentId == 'iter' ||
             componentId == 'group' ||
             componentId == 'file' ||
+            componentId == 'state' ||
             id in (worldOutputs[componentId] ?? {}))
             .map(([componentId, id]) => ({
             componentId: componentId,