windmill-components 1.665.1 → 1.677.1

package/package/components/WorkerGroup.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { TriangleAlert, Plus, RefreshCcwIcon, RotateCcw, Settings, Trash, X, ExternalLink, FileCode } from 'lucide-svelte';
+<script lang="ts">import { TriangleAlert, Plus, RefreshCcwIcon, RotateCcw, Settings, Trash, Power, X, ExternalLink, FileCode } from 'lucide-svelte';
 import { Alert, Button, Drawer } from './common';
 import Badge from './common/badge/Badge.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
-import { ConfigService, WorkspaceService } from '../gen';
+import { ConfigService, SettingService, WorkspaceService } from '../gen';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../toast';
@@ -155,6 +155,7 @@ let hasChanges = $derived.by(() => {
 });
 let openDelete = $state(false);
 let openClean = $state(false);
+let openRestart = $state(false);
 // Compute hashed tags for display (actual tags used by the worker)
 let hashedDedicatedTags = $state(new Map());
 $effect(() => {
@@ -243,6 +244,32 @@ $effect(() => {
 	</div>
 </ConfirmationModal>
 
+<ConfirmationModal
+	open={openRestart}
+	title="Restart workers"
+	confirmationText="Restart"
+	on:canceled={() => {
+		openRestart = false
+	}}
+	on:confirmed={async () => {
+		try {
+			await SettingService.restartWorkerGroup({ workerGroup: name })
+			sendUserToast(`Restart signal sent to worker group '${name}'`)
+			dispatch('reload')
+		} catch (e) {
+			sendUserToast(`Failed to restart worker group: ${e}`, true)
+		}
+		openRestart = false
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span
+			>Are you sure you want to restart all workers in worker group '{name}'? Workers will be
+			gracefully shut down and are expected to be restarted by their supervisor.</span
+		>
+	</div>
+</ConfirmationModal>
+
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		on:close={() => drawer?.closeDrawer()}
@@ -1114,6 +1141,17 @@ $effect(() => {
 						>
 							Clean cache
 						</Button>
+						<Button
+							unifiedSize="sm"
+							variant="subtle"
+							on:click={() => {
+								openRestart = true
+							}}
+							startIcon={{ icon: Power }}
+							destructive
+						>
+							Restart workers
+						</Button>
 					{:else}
 						<Dropdown
 							items={[
@@ -1126,6 +1164,13 @@ $effect(() => {
 									disabled: !config,
 									type: 'delete'
 								},
+								{
+									displayName: 'Restart workers',
+									action: () => {
+										openRestart = true
+									},
+									type: 'delete'
+								},
 								{
 									displayName: 'Delete config',
 									action: () => {

package/package/components/apps/editor/DeploymentHistory.svelte

@@ -2,20 +2,34 @@
 const bubble = createBubbler();
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
-import { classNames, displayDate, emptyString } from '../../../utils';
+import { classNames, cleanValueProperties, displayDate, emptyString, orderedYamlStringify, replaceFalseWithUndefined } from '../../../utils';
 import { AppService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { Skeleton } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import { createEventDispatcher, untrack } from 'svelte';
 import { Pencil, ArrowRight, X, Loader2 } from 'lucide-svelte';
+import Select from '../../select/Select.svelte';
 let { appPath } = $props();
 let loading = $state(false);
 let versions = $state([]);
 let selectedVersion = $state(undefined);
 let selected = $state(undefined);
+let previousVersion = $state(undefined);
+let selectedVersionIndex = $state(undefined);
+let previousVersionId = $state(undefined);
+let versionCache = $state({});
 let deploymentMsgUpdateMode = $state(false);
 let deploymentMsgUpdate = $state(undefined);
+async function getVersionApp(version) {
+    const cached = versionCache[version];
+    if (cached) {
+        return cached;
+    }
+    const app = await AppService.getAppByVersion({ workspace: $workspaceStore, id: version });
+    versionCache[version] = app;
+    return app;
+}
 async function loadVersions() {
     if (appPath === undefined) {
         return;
@@ -27,9 +41,17 @@ async function loadVersions() {
     });
     loading = false;
 }
-async function loadValue(version) {
-    let app = await AppService.getAppByVersion({ workspace: $workspaceStore, id: version });
-    selected = app;
+async function loadSelectedVersion(version) {
+    const app = await getVersionApp(version);
+    if (selectedVersion?.version === version) {
+        selected = app;
+    }
+}
+async function loadPreviousVersion(version) {
+    const app = await getVersionApp(version);
+    if (previousVersionId === version) {
+        previousVersion = app;
+    }
 }
 async function updateDeploymentMsg(appId, appVersion) {
     if (selectedVersion === undefined ||
@@ -50,14 +72,54 @@ async function updateDeploymentMsg(appId, appVersion) {
     deploymentMsgUpdateMode = false;
     loadVersions();
 }
+function toComparableVersionValue(app) {
+    return app.value;
+}
+function toVersionLabel(version) {
+    return emptyString(version.deployment_msg) ? `Version ${version.version}` : version.deployment_msg;
+}
+let availableVersions = $derived(selectedVersionIndex !== undefined ? versions.slice(selectedVersionIndex + 1) : []);
+let compareVersionItems = $derived(availableVersions.map((version) => ({
+    label: toVersionLabel(version),
+    value: version.version
+})));
+let selectedVersionYaml = $derived.by(() => {
+    if (!selected)
+        return undefined;
+    return orderedYamlStringify(replaceFalseWithUndefined(cleanValueProperties(toComparableVersionValue(selected))));
+});
+let previousVersionYaml = $derived.by(() => {
+    if (!previousVersion)
+        return undefined;
+    return orderedYamlStringify(replaceFalseWithUndefined(cleanValueProperties(toComparableVersionValue(previousVersion))));
+});
 const dispatch = createEventDispatcher();
 loadVersions();
 $effect(() => {
     selectedVersion?.version !== undefined &&
         untrack(() => {
-            selectedVersion && loadValue(selectedVersion.version);
+            selectedVersion && loadSelectedVersion(selectedVersion.version);
         });
 });
+$effect(() => {
+    if (previousVersionId === undefined) {
+        previousVersion = undefined;
+        return;
+    }
+    const version = previousVersionId;
+    untrack(() => {
+        loadPreviousVersion(version);
+    });
+});
+$effect(() => {
+    if (availableVersions.length === 0) {
+        previousVersionId = undefined;
+        return;
+    }
+    if (!availableVersions.some((version) => version.version === previousVersionId)) {
+        previousVersionId = availableVersions[0]?.version;
+    }
+});
 </script>
 
 <Splitpanes class="!overflow-visible">
@@ -67,7 +129,7 @@ $effect(() => {
 				{#if !loading}
 					{#if versions.length > 0}
 						<div class="flex gap-2 flex-col">
-							{#each versions ?? [] as version}
+							{#each versions ?? [] as version, versionIndex}
 								<!-- svelte-ignore a11y_click_events_have_key_events -->
 								<!-- svelte-ignore a11y_no_static_element_interactions -->
 								<div
@@ -77,12 +139,14 @@ $effect(() => {
 									)}
 									onclick={() => {
 										selectedVersion = version
+										selectedVersionIndex = versionIndex
+										previousVersionId = versions[versionIndex + 1]?.version
 										deploymentMsgUpdateMode = false
 										deploymentMsgUpdate = undefined
 									}}
 								>
 									<span class="text-xs truncate">
-										{#if emptyString(version.deployment_msg)}Version {version.version}{:else}{version.deployment_msg}{/if}
+										{toVersionLabel(version)}
 									</span>
 								</div>
 							{/each}
@@ -164,7 +228,10 @@ $effect(() => {
 						<div class="flex p-1 gap-2">
 							<Button
 								size="xs"
-								on:click={() => window.open(`/apps/add?template_id=${selectedVersion?.version}`)}
+								on:click={() =>
+									window.open(
+										`${selected?.raw_app ? '/apps_raw' : '/apps'}/add?template_id=${selectedVersion?.version}`
+									)}
 							>
 								Restore as fork
 							</Button>
@@ -174,11 +241,43 @@ $effect(() => {
 						</div>
 					</div>
 
-					{#await import('./AppPreview.svelte')}
-						<Loader2 class="animate-spin" />
-					{:then Module}
-						<Module.default noBackend app={selected.value} context={{}} />
-					{/await}
+					<div class="flex flex-col gap-2">
+						{#if availableVersions.length > 0}
+							<div class="flex flex-row items-center gap-2 py-2">
+								<div class="text-xs">Compare with:</div>
+								<Select
+									items={compareVersionItems}
+									bind:value={previousVersionId}
+									class="w-56"
+									size="sm"
+								/>
+							</div>
+
+							<div class="h-[calc(100vh-260px)] min-h-[420px]">
+								{#if previousVersionYaml && selectedVersionYaml}
+									{#await import('../../DiffEditor.svelte')}
+										<Loader2 class="animate-spin" />
+									{:then Module}
+										<Module.default
+											open={true}
+											automaticLayout
+											className="h-full"
+											defaultLang="yaml"
+											defaultOriginal={previousVersionYaml}
+											defaultModified={selectedVersionYaml}
+											readOnly
+										/>
+									{/await}
+								{:else}
+									<Loader2 class="animate-spin" />
+								{/if}
+							</div>
+						{:else}
+							<div class="text-sm p-2 text-primary">
+								No older deployment is available to compare with this version.
+							</div>
+						{/if}
+					</div>
 				{:else}
 					<Skeleton layout={[[40]]} />
 				{/if}

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

@@ -2,9 +2,11 @@
 const bubble = createBubbler();
 import { Button, Drawer, DrawerContent } from '../../../common';
 import { base } from '../../../../base';
+import FlowGraphViewer from '../../../FlowGraphViewer.svelte';
+import Skeleton from '../../../common/skeleton/Skeleton.svelte';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
 import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
-import { emptySchema, sendUserToast } from '../../../../utils';
+import { emptySchema, getHubFlowIdFromPath, isHubFlowPath, sendUserToast } from '../../../../utils';
 import { getContext, tick, untrack } from 'svelte';
 import { workspaceStore } from '../../../../stores';
 import { createEventDispatcher } from 'svelte';
@@ -20,18 +22,22 @@ 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();
+import { FlowService, ScriptService } from '../../../../gen';
+import { replaceScriptPlaceholderWithItsValues } from '../../../../hub';
+let { runnable = $bindable(), fields = $bindable(), id, rawApps = false, isLoading = false, onRun = async () => { }, onCancel = async () => { }, hubFlowPreview = $bindable(undefined) } = $props();
 const viewerContext = getContext('AppViewerContext');
 let drawerFlowViewer = $state(undefined);
 let flowPath = $state('');
+let drawerShowsHubFlow = $state(false);
 let notFound = $state(false);
+let hubFlowId = $derived(getHubFlowIdFromPath(runnable.path));
 // 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) {
+    hubFlowPreview = undefined;
     try {
         let { schema } = await getScriptByPath(runnable.path);
         if (!deepEqual(runnable.schema, schema)) {
@@ -48,7 +54,32 @@ async function refreshScript(runnable) {
     }
 }
 async function refreshFlow(runnable) {
+    hubFlowPreview = undefined;
     try {
+        const hubFlowId = getHubFlowIdFromPath(runnable.path);
+        if (hubFlowId !== undefined) {
+            const hub = await FlowService.getHubFlowById({ id: hubFlowId });
+            const flow = hub.flow ? structuredClone(hub.flow) : undefined;
+            if (flow?.value.preprocessor_module?.value.type === 'rawscript') {
+                flow.value.preprocessor_module.value.content = replaceScriptPlaceholderWithItsValues(String(hubFlowId), flow.value.preprocessor_module.value.content);
+            }
+            if (!flow) {
+                notFound = true;
+                return;
+            }
+            hubFlowPreview = flow;
+            const schema = flow.schema && typeof flow.schema === 'object' && Object.keys(flow.schema).length > 0
+                ? flow.schema
+                : emptySchema();
+            if (!deepEqual(runnable.schema, schema)) {
+                runnable.schema = schema;
+                if (!runnable.schema.order) {
+                    runnable.schema.order = Object.keys(runnable.schema.properties ?? {});
+                }
+                fields = computeFields(schema, false, fields ?? {});
+            }
+            return;
+        }
         const { schema } = (await loadSchema($workspaceStore ?? '', runnable.path, 'flow')) ?? emptySchema();
         if (!deepEqual(runnable.schema, schema)) {
             runnable.schema = schema;
@@ -119,6 +150,9 @@ function refresh(runnable) {
     else if (runnable.runType == 'flow') {
         refreshFlow(runnable);
     }
+    else {
+        hubFlowPreview = undefined;
+    }
     lastRunnable = runnable;
 }
 $effect(() => {
@@ -130,8 +164,34 @@ $effect(() => {
 </script>
 
 <Drawer bind:this={drawerFlowViewer} size="1200px">
-	<DrawerContent title="Flow {flowPath}" on:close={drawerFlowViewer.closeDrawer}>
-		<FlowPathViewer path={flowPath ?? ''} />
+	<DrawerContent
+		title="Flow {flowPath}"
+		on:close={() => {
+			flowPath = ''
+			drawerShowsHubFlow = false
+			drawerFlowViewer?.closeDrawer()
+		}}
+	>
+		{#if drawerShowsHubFlow}
+			<div class="flex flex-col flex-1 h-full min-h-0 overflow-auto">
+				{#if hubFlowPreview}
+					<FlowGraphViewer
+						triggerNode
+						provideTriggerContext
+						fillAvailableHeight
+						flow={{ ...hubFlowPreview, path: flowPath }}
+					/>
+				{:else if notFound}
+					<div class="p-4 text-red-400">Hub flow not found at {flowPath}</div>
+				{:else}
+					<div class="p-4">
+						<Skeleton layout={[[40]]} />
+					</div>
+				{/if}
+			</div>
+		{:else if flowPath}
+			<FlowPathViewer path={flowPath} fillAvailableHeight />
+		{/if}
 	</DrawerContent>
 </Drawer>
 
@@ -170,7 +230,7 @@ $effect(() => {
 			size="xs"
 			startIcon={{ icon: RefreshCw }}
 			on:click={async () => {
-				sendUserToast('Getting latest script version at that path')
+				sendUserToast('Getting latest runnable version at that path')
 				// Increment refreshKey to force re-mounting of viewer components (bypasses cache)
 				refreshKey++
 				lastRunnable = undefined
@@ -198,31 +258,45 @@ $effect(() => {
 				startIcon={{ icon: Eye }}
 				on:click={() => {
 					flowPath = runnable.path
+					drawerShowsHubFlow = isHubFlowPath(runnable.path)
 					drawerFlowViewer?.openDrawer()
 				}}
 			>
 				Expand
 			</Button>
-			<Button
-				variant="default"
-				size="xs"
-				startIcon={{ icon: Pen }}
-				on:click={() => {
-					openFlowEditor(runnable.path)
-				}}
-			>
-				Edit
-			</Button>
-			<Button
-				variant="default"
-				size="xs"
-				startIcon={{ icon: Eye }}
-				endIcon={{ icon: ExternalLink }}
-				target="_blank"
-				href="{base}/flows/get/{runnable.path}?workspace={$workspaceStore}"
-			>
-				Details
-			</Button>
+			{#if hubFlowId}
+				<Button
+					variant="default"
+					size="xs"
+					startIcon={{ icon: GitFork }}
+					endIcon={{ icon: ExternalLink }}
+					target="_blank"
+					href="{base}/flows/add?hub={hubFlowId}"
+				>
+					Fork
+				</Button>
+			{:else}
+				<Button
+					variant="default"
+					size="xs"
+					startIcon={{ icon: Pen }}
+					on:click={() => {
+						openFlowEditor(runnable.path)
+					}}
+				>
+					Edit
+				</Button>
+				<Button
+					variant="default"
+					size="xs"
+					startIcon={{ icon: Eye }}
+					endIcon={{ icon: ExternalLink }}
+					target="_blank"
+					href="{base}/flows/get/{runnable.path}?workspace={$workspaceStore}"
+				>
+					Details
+				</Button>
+			{/if}
 		{:else}
 			<Button
 				size="xs"
@@ -268,13 +342,20 @@ $effect(() => {
 					nonCaptureEvent={true}
 					btnClasses={'bg-surface text-primay hover:bg-hover'}
 					variant="default"
-					size="xs">Cache</Button
+					size="xs"
 				>
+					Cache
+				</Button>
 			{/snippet}
 			{#snippet content()}
-				Since this is a reference to a workspace {runnable.runType}, set the cache in the {runnable.runType}
-				settings directly by editing it. The cache will be shared by any app or flow that uses this
-				{runnable.runType}.
+				{#if runnable.runType == 'flow' && isHubFlowPath(runnable.path)}
+					Since this is a reference to a hub flow, cache settings are managed from the flow after
+					you fork it into your workspace.
+				{:else}
+					Since this is a reference to a workspace {runnable.runType}, set the cache in the
+					{runnable.runType} settings directly by editing it. The cache will be shared by any app or
+					flow that uses this {runnable.runType}.
+				{/if}
 			{/snippet}
 		</Popover>
 
@@ -285,18 +366,37 @@ $effect(() => {
 			class="!text-xs !rounded-xs"
 		/>
 	</div>
-	<div class="w-full grow overflow-y-auto">
+	<div class="w-full grow min-h-0 overflow-y-auto">
 		{#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
-				>
+				<div class="text-red-400">
+					{#if runnable.runType == 'flow' && isHubFlowPath(runnable.path)}
+						Hub flow not found at {runnable.path}
+					{:else}
+						{runnable.runType} not found at {runnable.path} in workspace {$workspaceStore}
+					{/if}
+				</div>
 			{:else if runnable.runType == 'script' || runnable.runType == 'hubscript'}
 				<div class="border">
 					<FlowModuleScript path={runnable.path} />
 				</div>
 			{:else if runnable.runType == 'flow'}
-				<FlowPathViewer path={runnable.path} />
+				{#if isHubFlowPath(runnable.path)}
+					{#if hubFlowPreview}
+						<div class="flex flex-col flex-1 h-full min-h-0 overflow-auto">
+							<FlowGraphViewer
+								triggerNode
+								provideTriggerContext
+								fillAvailableHeight
+								flow={{ ...hubFlowPreview, path: runnable.path }}
+							/>
+						</div>
+					{:else}
+						<Skeleton layout={[[40]]} />
+					{/if}
+				{:else}
+					<FlowPathViewer path={runnable.path} fillAvailableHeight />
+				{/if}
 			{:else}
 				Unrecognized runType {runnable.runType}
 			{/if}

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

@@ -1,4 +1,5 @@
 import type { ConnectedAppInput, RowAppInput, RunnableByPath, StaticAppInput, UserAppInput, CtxAppInput } from '../../inputType';
+import { type OpenFlow } from '../../../../gen';
 interface Props {
     runnable: RunnableByPath;
     fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | CtxAppInput> | undefined;
@@ -7,6 +8,7 @@ interface Props {
     isLoading?: boolean;
     onRun?: any;
     onCancel?: any;
+    hubFlowPreview?: OpenFlow | undefined;
 }
 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> & {
@@ -26,6 +28,6 @@ declare const InlineScriptRunnableByPath: $$__sveltets_2_IsomorphicComponent<Pro
     fork: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "runnable" | "fields">;
+}, {}, {}, "runnable" | "fields" | "hubFlowPreview">;
 type InlineScriptRunnableByPath = InstanceType<typeof InlineScriptRunnableByPath>;
 export default InlineScriptRunnableByPath;

package/package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -5,10 +5,10 @@ import InlineScriptList from './InlineScriptList.svelte';
 import WorkspaceScriptList from './WorkspaceScriptList.svelte';
 import WorkspaceFlowList from './WorkspaceFlowList.svelte';
 import { createEventDispatcher, untrack } from 'svelte';
-import { schemaToInputsSpec } from '../../../utils';
-import { defaultIfEmptyString, emptySchema } from '../../../../../utils';
+import { emptySchema } from '../../../../../utils';
 import { loadSchema } from '../../../../../infer';
 import { workspaceStore } from '../../../../../stores';
+import { buildPathRunnableSelection } from './runnableSelectorUtils';
 let { defaultUserInput = false, hideCreateScript = false, onlyFlow = false, rawApps = false, unusedInlineScripts = $bindable() } = $props();
 // const { app, workspace } = getContext<AppViewerContext>('AppViewerContext')
 let tab = $state(untrack(() => onlyFlow)
@@ -27,48 +27,24 @@ async function loadSchemaFromTriggerable(path, runType) {
     return schema ?? { schema: emptySchema(), summary: undefined };
 }
 async function pickScript(path) {
-    const schema = await loadSchemaFromTriggerable(path, 'script');
-    const fields = schemaToInputsSpec(schema.schema, defaultUserInput);
-    const runnable = {
-        type: 'path',
-        path,
-        runType: 'script',
-        schema: schema.schema,
-        name: defaultIfEmptyString(schema.summary, path)
-    };
+    const selection = buildPathRunnableSelection(path, 'script', await loadSchemaFromTriggerable(path, 'script'), defaultUserInput, rawApps);
     dispatch('pick', {
-        runnable,
-        fields
+        runnable: selection.runnable,
+        fields: selection.fields
     });
 }
 async function pickFlow(path) {
-    const schema = await loadSchemaFromTriggerable(path, 'flow');
-    const fields = schemaToInputsSpec(schema.schema, defaultUserInput);
-    const runnable = {
-        type: 'path',
-        path,
-        runType: 'flow',
-        schema,
-        name: defaultIfEmptyString(schema.summary, path)
-    };
+    const selection = buildPathRunnableSelection(path, 'flow', await loadSchemaFromTriggerable(path, 'flow'), defaultUserInput, rawApps);
     dispatch('pick', {
-        runnable,
-        fields
+        runnable: selection.runnable,
+        fields: selection.fields
     });
 }
 async function pickHubScript(path) {
-    const schema = await loadSchemaFromTriggerable(path, 'hubscript');
-    const fields = schemaToInputsSpec(schema.schema, defaultUserInput);
-    const runnable = {
-        type: 'path',
-        path,
-        runType: 'hubscript',
-        schema: schema.schema,
-        name: defaultIfEmptyString(schema.summary, path)
-    };
+    const selection = buildPathRunnableSelection(path, 'hubscript', await loadSchemaFromTriggerable(path, 'hubscript'), defaultUserInput, rawApps);
     dispatch('pick', {
-        runnable,
-        fields
+        runnable: selection.runnable,
+        fields: selection.fields
     });
 }
 function pickInlineScript(name) {

package/package/components/apps/editor/settingsPanel/mainInput/runnableSelectorUtils.d.ts

@@ -0,0 +1,10 @@
+import type { Schema } from '../../../../../common';
+import type { Runnable, StaticAppInput } from '../../../inputType';
+export type LoadedRunnableSchema = {
+    schema: Schema;
+    summary: string | undefined;
+};
+export declare function buildPathRunnableSelection(path: string, runType: 'script' | 'flow' | 'hubscript', loadedSchema: LoadedRunnableSchema, defaultUserInput: boolean, rawApps: boolean): {
+    runnable: Runnable;
+    fields: Record<string, StaticAppInput>;
+};

package/package/components/apps/editor/settingsPanel/mainInput/runnableSelectorUtils.js

@@ -0,0 +1,14 @@
+import { schemaToInputsSpec } from '../../../utils';
+import { defaultIfEmptyString } from '../../../../../utils';
+export function buildPathRunnableSelection(path, runType, loadedSchema, defaultUserInput, rawApps) {
+    return {
+        runnable: {
+            type: 'path',
+            path,
+            runType,
+            schema: loadedSchema.schema,
+            name: defaultIfEmptyString(loadedSchema.summary, path)
+        },
+        fields: schemaToInputsSpec(loadedSchema.schema, defaultUserInput || rawApps)
+    };
+}

package/package/components/apps/editor/settingsPanel/mainInput/runnableSelectorUtils.test.d.ts

@@ -0,0 +1 @@
+export {};