windmill-components 1.558.4 → 1.596.0

package/package/components/propertyPicker/PropPicker.svelte

@@ -11,12 +11,13 @@ export let pickableProperties;
 export let displayContext = true;
 export let error = false;
 export let allowCopy = false;
-export let alwaysOn = false;
 export let previousId = undefined;
+export let flow_env = undefined;
 let variables = {};
 let resources = {};
 let displayVariable = false;
 let displayResources = false;
+let displayFlowEnv = false;
 let allResultsCollapsed = true;
 let collapsableInitialState;
 let filterActive = false;
@@ -27,6 +28,7 @@ const { pickablePropertiesFiltered } = getContext('PropPickerContext');
 $: $pickablePropertiesFiltered = pickableProperties;
 let flowInputsFiltered = pickableProperties.flow_input;
 let resultByIdFiltered = pickableProperties.priorIds;
+let flowEnvFiltered = pickableProperties.flow_env;
 let timeout;
 function onSearch(search) {
     filterActive = false;
@@ -42,6 +44,8 @@ function onSearch(search) {
             search === EMPTY_STRING
                 ? pickableProperties.priorIds
                 : keepByKey(pickableProperties.priorIds, search);
+        flowEnvFiltered =
+            search === EMPTY_STRING ? pickableProperties.flow_env : keepByKey(pickableProperties.flow_env, search);
     }, 50);
 }
 $: suggestedPropsFiltered =
@@ -65,6 +69,7 @@ async function filterPickableProperties() {
         if (search === EMPTY_STRING) {
             flowInputsFiltered = pickableProperties.flow_input;
             resultByIdFiltered = pickableProperties.priorIds;
+            flowEnvFiltered = pickableProperties.flow_env;
         }
         filteringFlowInputsOrResult = '';
         return;
@@ -75,6 +80,9 @@ async function filterPickableProperties() {
     if (!$inputMatches?.some((match) => match.word === 'results')) {
         resultByIdFiltered = {};
     }
+    if (!$inputMatches?.some((match) => match.word === 'flow_env')) {
+        flowEnvFiltered = {};
+    }
     if ($inputMatches?.length == 1) {
         filteringFlowInputsOrResult = $inputMatches[0].value;
         if ($inputMatches[0].word === 'flow_input') {
@@ -93,6 +101,14 @@ async function filterPickableProperties() {
                 resultByIdFiltered = filtered;
             }
         }
+        else if ($inputMatches[0].word === 'flow_env') {
+            flowEnvFiltered = pickableProperties.flow_env;
+            let [, ...nestedKeys] = $inputMatches[0].value.split('.');
+            let filtered = filterNestedObject(flowEnvFiltered, nestedKeys);
+            if (Object.keys(filtered).length > 0) {
+                flowEnvFiltered = filtered;
+            }
+        }
     }
     else {
         filteringFlowInputsOrResult = '';
@@ -108,7 +124,12 @@ async function updateCollapsable() {
         return;
     }
     if (!collapsableInitialState) {
-        collapsableInitialState = { allResultsCollapsed, displayVariable, displayResources };
+        collapsableInitialState = {
+            allResultsCollapsed,
+            displayVariable,
+            displayResources,
+            displayFlowEnv
+        };
     }
     if ($inputMatches[0].word === 'variable') {
         await loadVariables();
@@ -120,6 +141,10 @@ async function updateCollapsable() {
         displayResources = true;
         return;
     }
+    if ($inputMatches[0].word === 'flow_env') {
+        displayFlowEnv = true;
+        return;
+    }
     if ($inputMatches[0].word === 'results') {
         allResultsCollapsed = false;
         return;
@@ -130,7 +155,8 @@ function resetCollapsable() {
         return;
     }
     ;
-    ({ allResultsCollapsed, displayVariable, displayResources } = collapsableInitialState);
+    ({ allResultsCollapsed, displayVariable, displayResources, displayFlowEnv } =
+        collapsableInitialState);
     collapsableInitialState = undefined;
 }
 async function updateFilterActive() {
@@ -142,6 +168,7 @@ async function updateFilterActive() {
     if (prev && !filterActive) {
         flowInputsFiltered = pickableProperties.flow_input;
         resultByIdFiltered = pickableProperties.priorIds;
+        flowEnvFiltered = pickableProperties.flow_env;
     }
 }
 async function updateState() {
@@ -149,24 +176,22 @@ async function updateState() {
     await filterPickableProperties();
     await updateCollapsable();
 }
-$: (search, $inputMatches, $propPickerConfig, pickableProperties, updateState());
+$: search, $inputMatches, $propPickerConfig, pickableProperties, updateState();
 onDestroy(() => {
     clearTimeout(timeout);
 });
+const categoryContentClasses = 'overflow-y-auto pb-4';
+const categoryTitleClasses = 'font-semibold text-xs text-emphasis';
 </script>
 
-<div class="flex flex-col h-full rounded">
+<div class="flex flex-col h-full">
 	<div class="px-1 pb-1">
 		<ClearableInput bind:value={search} placeholder="Search prop..." />
 	</div>
 	<!-- <div
 	class="px-2 pt-2 grow relative"
 	class:bg-surface-secondary={!$propPickerConfig && !alwaysOn} -->
-	<Scrollable
-		scrollableClass="grow relative min-h-0 px-1 xl:px-2 py-1 shrink {!$propPickerConfig && !alwaysOn
-			? 'bg-surface-secondary'
-			: ''}"
-	>
+	<Scrollable scrollableClass="grow relative min-h-0 px-1 xl:px-2 py-1 shrink">
 		<!-- <div
 			class="px-2 pt-2 grow relative"
 			class:bg-surface-secondary={!$propPickerConfig && !alwaysOn}
@@ -180,13 +205,8 @@ onDestroy(() => {
 			</div>
 		{/if}
 		{#if flowInputsFiltered && (Object.keys(flowInputsFiltered ?? {}).length > 0 || !filterActive)}
-			<div class="flex justify-between items-center space-x-1">
-				<span class="font-normal text-sm text-secondary"
-					><span class="font-mono">flow_input</span></span
-				>
-				<div class="flex space-x-2 items-center"></div>
-			</div>
-			<div class="overflow-y-auto pb-2">
+			<span class={categoryTitleClasses}>Flow Input</span>
+			<div class={categoryContentClasses}>
 				<ObjectViewer
 					{allowCopy}
 					pureViewer={!$propPickerConfig}
@@ -197,8 +217,8 @@ onDestroy(() => {
 			</div>
 		{/if}
 		{#if error}
-			<span class="font-normal text-sm text-secondary">Error</span>
-			<div class="overflow-y-auto pb-2">
+			<span class={categoryTitleClasses}>Error</span>
+			<div class={categoryContentClasses}>
 				<ObjectViewer
 					{allowCopy}
 					pureViewer={!$propPickerConfig}
@@ -215,8 +235,8 @@ onDestroy(() => {
 			</div>
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
 				{#if suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
-					<span class="font-normal text-sm text-secondary">Suggested Results</span>
-					<div class="overflow-y-auto pb-2">
+					<span class={categoryTitleClasses}>Suggested Results</span>
+					<div class={categoryContentClasses}>
 						<ObjectViewer
 							{allowCopy}
 							pureViewer={!$propPickerConfig}
@@ -227,8 +247,8 @@ onDestroy(() => {
 						/>
 					</div>
 				{/if}
-				<span class="font-normal text-sm text-tertiary font-mono">results</span>
-				<div class="overflow-y-auto pb-2">
+				<span class={categoryTitleClasses}>Results</span>
+				<div class={categoryContentClasses}>
 					<ObjectViewer
 						expandedEvenOnLevel0={previousId}
 						{allowCopy}
@@ -242,8 +262,8 @@ onDestroy(() => {
 			{/if}
 		{:else}
 			{#if pickableProperties.hasResume}
-				<span class="font-normal text-sm text-secondary">Resume payloads</span>
-				<div class="overflow-y-auto pb-2">
+				<span class={categoryTitleClasses}>Resume payloads</span>
+				<div class={categoryContentClasses}>
 					<ObjectViewer
 						{allowCopy}
 						pureViewer={!$propPickerConfig}
@@ -258,8 +278,8 @@ onDestroy(() => {
 			{/if}
 			{#if Object.keys(pickableProperties.priorIds).length > 0}
 				{#if !filterActive && suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
-					<span class="font-normal text-sm text-secondary">Suggested Results</span>
-					<div class="overflow-y-auto pb-2">
+					<span class={categoryTitleClasses}>Suggested Results</span>
+					<div class={categoryContentClasses}>
 						<ObjectViewer
 							{allowCopy}
 							pureViewer={!$propPickerConfig}
@@ -271,9 +291,8 @@ onDestroy(() => {
 					</div>
 				{/if}
 				{#if Object.keys(resultByIdFiltered ?? {}).length > 0}
-					<div class="overflow-y-auto pb-2 pt-2">
-						<span class="font-normal text-sm text-tertiary font-mono">results</span>
-
+					<span class={categoryTitleClasses}>Results</span>
+					<div class={categoryContentClasses}>
 						<ObjectViewer
 							{allowCopy}
 							pureViewer={!$propPickerConfig}
@@ -290,14 +309,12 @@ onDestroy(() => {
 
 		{#if displayContext}
 			{#if !filterActive || $inputMatches?.some((match) => match.word === 'variable')}
-				<div class="overflow-y-auto pb-2 pt-4">
-					<span class="font-normal text-xs text-secondary">Variables:</span>
-
+				<span class={categoryTitleClasses}>Variables</span>
+				<div class={categoryContentClasses}>
 					{#if displayVariable}
 						<Button
-							color="light"
 							size="xs2"
-							variant="border"
+							variant="default"
 							on:click={() => {
 								displayVariable = false
 							}}
@@ -314,9 +331,8 @@ onDestroy(() => {
 						/>
 					{:else}
 						<Button
-							color="light"
 							size="xs2"
-							variant="border"
+							variant="default"
 							on:click={async () => {
 								await loadVariables()
 								displayVariable = true
@@ -330,14 +346,12 @@ onDestroy(() => {
 				</div>
 			{/if}
 			{#if !filterActive || $inputMatches?.some((match) => match.word === 'resource')}
-				<div class="overflow-y-auto pb-2">
-					<span class="font-normal text-xs text-secondary">Resources:</span>
-
+				<span class={categoryTitleClasses}>Resources</span>
+				<div class={categoryContentClasses}>
 					{#if displayResources}
 						<Button
-							color="light"
 							size="xs2"
-							variant="border"
+							variant="default"
 							on:click={() => {
 								displayResources = false
 							}}
@@ -354,9 +368,8 @@ onDestroy(() => {
 						/>
 					{:else}
 						<Button
-							color="light"
 							size="xs2"
-							variant="border"
+							variant="default"
 							on:click={async () => {
 								await loadResources()
 								displayResources = true
@@ -369,6 +382,45 @@ onDestroy(() => {
 					{/if}
 				</div>
 			{/if}
+			{#if flow_env && Object.keys(flow_env).length > 0 && (!filterActive || $inputMatches?.some((match) => match.word === 'flow_env'))}
+				<div class="overflow-y-auto pb-2">
+					<span class="font-normal text-xs text-secondary">Flow Env Variables:</span>
+
+					{#if displayFlowEnv}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={() => {
+								displayFlowEnv = false
+							}}
+							wrapperClasses="inline-flex whitespace-nowrap w-fit"
+							btnClasses="font-mono h-4 text-2xs font-thin px-1 rounded-[0.275rem]">-</Button
+						>
+						<ObjectViewer
+							{allowCopy}
+							pureViewer={!$propPickerConfig}
+							rawKey={false}
+							json={flowEnvFiltered}
+							prefix="flow_env"
+							on:select
+						/>
+					{:else}
+						<Button
+							color="light"
+							size="xs2"
+							variant="border"
+							on:click={() => {
+								displayFlowEnv = true
+							}}
+							wrapperClasses="inline-flex whitespace-nowrap w-fit"
+							btnClasses="font-normal text-2xs rounded-[0.275rem] h-4 px-1"
+						>
+							{'{...}'}
+						</Button>
+					{/if}
+				</div>
+			{/if}
 		{/if}
 		<!-- </div> -->
 	</Scrollable>

package/package/components/propertyPicker/PropPicker.svelte.d.ts

@@ -17,8 +17,8 @@ declare const PropPicker: $$__sveltets_2_IsomorphicComponent<{
     displayContext?: boolean;
     error?: boolean;
     allowCopy?: boolean;
-    alwaysOn?: boolean;
     previousId?: string | undefined;
+    flow_env?: Record<string, any> | undefined;
 }, {
     select: any;
 } & {

package/package/components/propertyPicker/PropPickerResult.svelte

@@ -3,6 +3,7 @@ export let allowCopy = false;
 export let result;
 export let extraResults = undefined;
 export let flow_input = undefined;
+export let flow_env = undefined;
 </script>
 
 <div class="w-full px-2">
@@ -16,4 +17,10 @@ export let flow_input = undefined;
 			<ObjectViewer {allowCopy} json={flow_input} prefix="flow_input" on:select />
 		</div>
 	{/if}
+	{#if flow_env}
+		<span class="font-normal text-sm text-secondary">Flow Environment Variables</span>
+		<div class="overflow-y-auto w-full">
+			<ObjectViewer {allowCopy} json={flow_env} prefix="flow_env" on:select />
+		</div>
+	{/if}
 </div>

package/package/components/propertyPicker/PropPickerResult.svelte.d.ts

@@ -16,6 +16,7 @@ declare const PropPickerResult: $$__sveltets_2_IsomorphicComponent<{
     result: any;
     extraResults?: any;
     flow_input?: any;
+    flow_env?: any;
 }, {
     select: any;
 } & {

package/package/components/propertyPicker/WarningMessage.svelte

@@ -1,3 +1,3 @@
 <div class="flex px-2 bg-yellow-100 rounded-lg dark:bg-yellow-200" role="alert">
-	<div class="text-xs font-medium text-yellow-700 dark:text-yellow-800">Require testing flow</div>
+	<div class="text-xs font-semibold text-yellow-700 dark:text-yellow-800">Require testing flow</div>
 </div>

package/package/components/raw_apps/FileTreeNode.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">import { ChevronRight, ChevronDown, File, Folder, FileJson, FileCode, ImageIcon, Palette, Pencil, Trash2, Lock } from 'lucide-svelte';
+import Self from './FileTreeNode.svelte';
+let { node, onFileClick, onAddFile, onAddFolder, onRename, onDelete, selectedPath, pathToRename, pathToExpand, noEdit = false, level = 0 } = $props();
+let expanded = $state(level === 0); // Root folders start expanded
+let isHovered = $state(false);
+let isEditing = $state(false);
+let editValue = $state(node.name);
+let inputElement = $state();
+const isSelected = $derived(selectedPath === node.path);
+function toggleExpanded() {
+    if (node.isFolder) {
+        expanded = !expanded;
+    }
+}
+function handleClick() {
+    // Always notify about selection
+    onFileClick?.(node.path);
+    // Toggle expansion for folders
+    if (node.isFolder) {
+        toggleExpanded();
+    }
+}
+function handleEdit(e) {
+    e.stopPropagation();
+    isEditing = true;
+    editValue = node.name;
+}
+function handleDelete(e) {
+    e.stopPropagation();
+    onDelete?.(node.path);
+}
+function finishEdit() {
+    if (isEditing && editValue.trim() && editValue !== node.name) {
+        onRename?.(node.path, editValue.trim());
+    }
+    isEditing = false;
+}
+function handleInputKeydown(e) {
+    if (e.key === 'Enter') {
+        finishEdit();
+    }
+    else if (e.key === 'Escape') {
+        isEditing = false;
+        editValue = node.name;
+    }
+}
+function handleInputBlur() {
+    finishEdit();
+}
+$effect(() => {
+    if (isEditing && inputElement) {
+        inputElement.focus();
+        inputElement.select();
+    }
+});
+// Automatically enter edit mode for newly created files
+$effect(() => {
+    if (pathToRename === node.path && !isEditing) {
+        isEditing = true;
+        editValue = node.name;
+        // If this is a folder, expand it
+        if (node.isFolder) {
+            expanded = true;
+        }
+    }
+});
+// Expand parent folders when a child needs to be renamed
+$effect(() => {
+    if (pathToRename && node.isFolder && pathToRename.startsWith(node.path + '/')) {
+        expanded = true;
+    }
+});
+// Expand folder when pathToExpand matches this node or a parent of pathToExpand
+$effect(() => {
+    if (pathToExpand && node.isFolder) {
+        // Expand if this folder is the target or an ancestor of the target
+        if (node.path === pathToExpand || pathToExpand.startsWith(node.path + '/')) {
+            expanded = true;
+        }
+    }
+});
+const sortedChildren = $derived(node.children?.slice().sort((a, b) => {
+    // Folders first, then files
+    if (a.isFolder !== b.isFolder) {
+        return a.isFolder ? -1 : 1;
+    }
+    return a.name.localeCompare(b.name);
+}));
+function getFileExtension(filename) {
+    const parts = filename.split('.');
+    return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+}
+const fileIcon = $derived.by(() => {
+    if (node.isFolder) {
+        return { icon: Folder, className: 'text-secondary' };
+    }
+    const ext = getFileExtension(node.name);
+    switch (ext) {
+        case 'json':
+            return { icon: FileJson, className: 'text-yellow-500' };
+        case 'tsx':
+        case 'jsx':
+            return { icon: FileCode, className: 'text-blue-500' };
+        case 'ts':
+        case 'js':
+            return { icon: FileCode, className: 'text-blue-400' };
+        case 'svelte':
+            return { icon: FileCode, className: 'text-orange-500' };
+        case 'vue':
+            return { icon: FileCode, className: 'text-green-500' };
+        case 'css':
+        case 'scss':
+        case 'sass':
+        case 'less':
+            return { icon: Palette, className: 'text-pink-500' };
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+        case 'gif':
+        case 'svg':
+        case 'webp':
+        case 'ico':
+            return { icon: ImageIcon, className: 'text-purple-500' };
+        default:
+            return { icon: File, className: 'text-tertiary' };
+    }
+});
+</script>
+
+<div>
+	<div
+		role="group"
+		class="relative"
+		onmouseenter={() => (isHovered = true)}
+		onmouseleave={() => (isHovered = false)}
+	>
+		{#if isEditing}
+			<div
+				class="w-full flex items-center gap-1 px-2 py-1 text-xs rounded {isSelected
+					? 'bg-blue-100 dark:bg-blue-900/30'
+					: ''}"
+				style="padding-left: {level * 12}px"
+			>
+				{#if node.isFolder}
+					{@const IconComponent = fileIcon.icon}
+					<span class="flex-shrink-0 text-secondary">
+						{#if expanded}
+							<ChevronDown size={12} />
+						{:else}
+							<ChevronRight size={12} />
+						{/if}
+					</span>
+					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
+				{:else}
+					{@const IconComponent = fileIcon.icon}
+					<span class="flex-shrink-0"></span>
+					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
+				{/if}
+				<input
+					bind:this={inputElement}
+					bind:value={editValue}
+					onkeydown={handleInputKeydown}
+					onblur={handleInputBlur}
+					class="flex-1 min-w-0 bg-surface border border-blue-500 rounded px-1 text-primary font-mono focus:outline-none focus:ring-1 focus:ring-blue-500"
+					type="text"
+				/>
+			</div>
+		{:else}
+			<button
+				onclick={handleClick}
+				class="w-full flex items-center gap-1 px-2 py-1 text-xs hover:bg-surface-hover transition-colors rounded text-left {isSelected
+					? 'bg-blue-100 dark:bg-blue-900/30'
+					: ''}"
+				style="padding-left: {level * 12}px"
+			>
+				{#if node.isFolder}
+					{@const IconComponent = fileIcon.icon}
+					<span class="flex-shrink-0 text-secondary">
+						{#if expanded}
+							<ChevronDown size={12} />
+						{:else}
+							<ChevronRight size={12} />
+						{/if}
+					</span>
+					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
+				{:else}
+					{@const IconComponent = fileIcon.icon}
+					<span class="flex-shrink-0"></span>
+					<IconComponent size={12} class="flex-shrink-0 {fileIcon.className}" />
+				{/if}
+				<span class="truncate text-primary font-mono">{node.name}</span>
+			</button>
+
+			{#if isHovered && !isEditing}
+				<div
+					class="absolute right-1 top-1 flex gap-0.5 bg-surface rounded shadow-sm border border-gray-200 dark:border-gray-700"
+				>
+					{#if !noEdit}
+						<button
+							onclick={handleEdit}
+							class="p-0.5 hover:bg-surface-hover rounded transition-colors"
+							title="Rename"
+						>
+							<Pencil size={12} class="text-secondary" />
+						</button>
+						<button
+							onclick={handleDelete}
+							class="p-0.5 hover:bg-surface-hover rounded transition-colors"
+							title="Delete"
+						>
+							<Trash2 size={12} class="text-red-500" />
+						</button>
+					{:else}
+						<Lock size={12} class="text-secondary" />
+					{/if}
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	{#if node.isFolder && expanded && sortedChildren}
+		{#each sortedChildren as child (child.path)}
+			<Self
+				node={child}
+				{onFileClick}
+				{onAddFile}
+				{onAddFolder}
+				{onRename}
+				{onDelete}
+				{selectedPath}
+				{pathToRename}
+				{pathToExpand}
+				level={level + 1}
+			/>
+		{/each}
+	{/if}
+</div>

package/package/components/raw_apps/RawAppBackgroundRunner.svelte

@@ -2,6 +2,7 @@
 import { userStore } from '../../stores';
 import { waitJob } from '../waitJob';
 import { JobService } from '../../gen';
+import { undefinedIfEmpty } from '../../utils';
 let { iframe, path, runnables, jobs = $bindable([]), jobsById = $bindable({}), editor, workspace } = $props();
 let listener = async (event) => {
     const data = event.data;
@@ -19,26 +20,31 @@ let listener = async (event) => {
             console.log('e', e);
             result = e;
         }
-        if (event.data.type == 'runBg') {
+        if (event.data.type == 'backend') {
             respond({ result, error });
         }
         return result;
     }
-    if (event.data.type == 'runBg' || event.data.type == 'runBgAsync') {
+    if (event.data.type == 'backend' || event.data.type == 'backendAsync') {
         const runnable_id = data.runnable_id;
         let runnable = runnables[runnable_id];
         if (runnable) {
             const uuid = await executeRunnable(runnable, workspace, undefined, $userStore?.username, path, runnable_id, {
                 component: runnable_id,
-                args: data.v,
-                force_viewer_allow_user_resources: Object.keys(runnable.fields).filter((k) => runnable.fields[k]?.type == 'user' && runnable.fields[k]?.allowUserResources),
-                force_viewer_one_of_fields: {},
-                force_viewer_static_fields: Object.fromEntries(Object.entries(runnable.fields)
-                    .filter(([k, v]) => v.type == 'static')
-                    .map(([k, v]) => [k, v?.['value']]))
+                args: data.v ?? {},
+                force_viewer_allow_user_resources: editor
+                    ? undefinedIfEmpty(Object.keys(runnable?.fields ?? {}).filter((k) => runnable?.fields?.[k]?.type == 'user' &&
+                        runnable?.fields?.[k]?.allowUserResources))
+                    : undefined,
+                force_viewer_one_of_fields: undefined,
+                force_viewer_static_fields: editor
+                    ? Object.fromEntries(Object.entries(runnable?.fields ?? {})
+                        .filter(([k, v]) => v.type == 'static')
+                        .map(([k, v]) => [k, v?.['value']]))
+                    : undefined
             }, undefined);
             let job = { component: runnable_id, created_at: Date.now(), job: uuid };
-            if (event.data.type == 'runBgAsync') {
+            if (event.data.type == 'backendAsync') {
                 let result = uuid;
                 respond({ result });
             }

package/package/components/raw_apps/RawAppBackgroundRunner.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { HiddenRunnable, JobById } from '../apps/types';
+import type { JobById } from '../apps/types';
+import type { Runnable } from './rawAppPolicy';
 interface Props {
     iframe: HTMLIFrameElement | undefined;
     path: string;
-    runnables: Record<string, HiddenRunnable>;
+    runnables: Record<string, Runnable>;
     jobs?: string[];
     jobsById?: Record<string, JobById>;
     editor: boolean;