feat: allow selecting hub flows as raw app backend runnables (#8772)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button, Drawer, DrawerContent, Tab, Tabs } from '$lib/components/common'
 	import PickHubScript from '$lib/components/flows/pickers/PickHubScript.svelte'
+	import PickHubFlow from '$lib/components/flows/pickers/PickHubFlow.svelte'
 	import { Building, Globe2, MousePointer, Plus } from 'lucide-svelte'
 	import InlineScriptList from './InlineScriptList.svelte'
 	import type { InlineScript, Runnable, StaticAppInput } from '$lib/components/apps/inputType'
@@ -13,7 +14,12 @@
 	import { workspaceStore } from '$lib/stores'
 	import { buildPathRunnableSelection } from './runnableSelectorUtils'
 
-	type TabType = 'hubscripts' | 'workspacescripts' | 'workspaceflows' | 'inlinescripts'
+	type TabType =
+		| 'hubscripts'
+		| 'hubflows'
+		| 'workspacescripts'
+		| 'workspaceflows'
+		| 'inlinescripts'
 
 	interface Props {
 		defaultUserInput?: boolean
@@ -103,6 +109,21 @@
 		})
 	}
 
+	async function pickHubFlow(item: { flow_id: number }) {
+		const path = `hub/flows/${item.flow_id}`
+		const selection = buildPathRunnableSelection(
+			path,
+			'flow',
+			await loadSchemaFromTriggerable(path, 'flow'),
+			defaultUserInput,
+			rawApps
+		)
+		dispatch('pick', {
+			runnable: selection.runnable,
+			fields: selection.fields
+		})
+	}
+
 	function pickInlineScript(name: string) {
 		const unusedInlineScriptIndex = unusedInlineScripts?.findIndex((script) => script.name === name)
 		const unusedInlineScript = unusedInlineScripts?.[unusedInlineScriptIndex]
@@ -148,6 +169,7 @@
 					{#if !onlyFlow}
 						<Tab value="hubscripts" label="Hub Scripts" icon={Globe2} />
 					{/if}
+					<Tab value="hubflows" label="Hub Flows" icon={Globe2} />
 				</Tabs>
 				<div class="my-2"></div>
 				<div class="flex flex-col gap-y-16">
@@ -165,6 +187,8 @@
 							<WorkspaceFlowList on:pick={(e) => pickFlow(e.detail)} />
 						{:else if tab == 'hubscripts'}
 							<PickHubScript bind:filter on:pick={(e) => pickHubScript(e.detail.path)} />
+						{:else if tab == 'hubflows'}
+							<PickHubFlow bind:filter on:pick={(e) => pickHubFlow(e.detail)} />
 						{/if}
 					</div>
 				</div>

frontend/src/lib/infer.ts

@@ -7,7 +7,7 @@ import {
 } from '$lib/gen'
 import { get, writable } from 'svelte/store'
 import type { Schema, SupportedLanguage } from './common.js'
-import { emptySchema, sortObject } from './utils.js'
+import { emptySchema, getHubFlowIdFromPath, isHubFlowPath, sortObject } from './utils.js'
 import { tick } from 'svelte'
 
 import initTsParser, { parse_deno, parse_outputs } from 'windmill-parser-wasm-ts'
@@ -540,6 +540,20 @@ export async function loadSchema(
 
 		return { schema: script.schema as any, summary: script.summary }
 	} else if (runType === 'flow') {
+		if (isHubFlowPath(path)) {
+			const hubFlowId = getHubFlowIdFromPath(path)
+			if (hubFlowId === undefined) {
+				throw new Error(`Invalid hub flow path: ${path}`)
+			}
+			const hub = await FlowService.getHubFlowById({ id: hubFlowId })
+			const flow = hub.flow
+			const schema =
+				flow?.schema && typeof flow.schema === 'object' && Object.keys(flow.schema).length > 0
+					? (flow.schema as any)
+					: emptySchema()
+			return { schema, summary: flow?.summary }
+		}
+
 		const flow = await FlowService.getFlowByPath({
 			workspace,
 			path