windmill-components 1.623.2 → 1.655.0

package/package/components/flows/map/InsertModuleInner.svelte

@@ -2,7 +2,7 @@
 let refreshCount = $state({ val: 0 });
 </script>
 
-<script lang="ts">import { createEventDispatcher, getContext } from 'svelte';
+<script lang="ts">import { createEventDispatcher, getContext, untrack } from 'svelte';
 import StepGenQuick from '../../copilot/StepGenQuick.svelte';
 import FlowInputsQuick from '../content/FlowInputsQuick.svelte';
 import ToggleHubWorkspaceQuick from '../../ToggleHubWorkspaceQuick.svelte';
@@ -11,7 +11,7 @@ import RefreshButton from '../../common/button/RefreshButton.svelte';
 const dispatch = createEventDispatcher();
 let { stop = false, funcDesc = $bindable(''), disableAi = false, kind = 'script', allowTrigger = true, toolMode = false } = $props();
 let customUi = getContext('customUi');
-let selectedKind = $state(kind);
+let selectedKind = $state(untrack(() => kind));
 let preFilter = $state('all');
 let loading = $state(false);
 let small = $derived(kind === 'preprocessor' || kind === 'failure');
@@ -47,7 +47,6 @@ let displayPath = $derived(width > 650 || height > 400);
 		{/if}
 		<RefreshButton
 			size="sm"
-			light
 			{loading}
 			onClick={() => {
 				refreshCount.val += 1
@@ -80,6 +79,13 @@ let displayPath = $derived(width > 650 || height > 400);
 							dispatch('close')
 						}}
 					/>
+					<TopLevelNode
+						label="AI Agent"
+						onSelect={() => {
+							dispatch('pickAiAgentTool')
+							dispatch('close')
+						}}
+					/>
 				{:else}
 					{#if customUi?.triggers != false && allowTrigger}
 						<TopLevelNode
@@ -153,27 +159,53 @@ let displayPath = $derived(width > 650 || height > 400);
 							}}
 						/>
 					{/if}
+					<TopLevelNode
+						label="AI Sandbox"
+						selected={selectedKind === 'aisandbox'}
+						onSelect={() => {
+							selectedKind = 'aisandbox'
+						}}
+					/>
 				{/if}
 			</div>
 		{/if}
 
-		<FlowInputsQuick
-			{selectedKind}
-			bind:loading
-			filter={funcDesc}
-			{disableAi}
-			{funcDesc}
-			{kind}
-			bind:owners
-			on:close={() => {
-				dispatch('close')
-			}}
-			on:new
-			on:pickScript
-			on:pickFlow
-			{preFilter}
-			{displayPath}
-			refreshCount={refreshCount.val}
-		/>
+		{#if selectedKind === 'aisandbox'}
+			<div class="h-full overflow-auto grow min-w-0 p-2 gap-1 flex flex-col">
+				<TopLevelNode
+					label="Claude Code"
+					onSelect={() => {
+						dispatch('close')
+						dispatch('new', {
+							kind: 'script',
+							inlineScript: {
+								language: 'bun',
+								kind: 'script',
+								subkind: 'claudesandbox'
+							}
+						})
+					}}
+				/>
+			</div>
+		{:else}
+			<FlowInputsQuick
+				{selectedKind}
+				bind:loading
+				filter={funcDesc}
+				{disableAi}
+				{funcDesc}
+				{kind}
+				bind:owners
+				on:close={() => {
+					dispatch('close')
+				}}
+				on:new
+				on:pickScript
+				on:pickFlow
+				{preFilter}
+				{displayPath}
+				refreshCount={refreshCount.val}
+			/>
+		{/if}
 	</div>
 </div>

package/package/components/flows/map/InsertModuleInner.svelte.d.ts

@@ -27,6 +27,7 @@ declare const InsertModuleInner: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
     pickMcpTool: CustomEvent<any>;
     pickWebsearchTool: CustomEvent<any>;
+    pickAiAgentTool: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "funcDesc">;

package/package/components/flows/map/MapItem.svelte

@@ -9,8 +9,8 @@ import { isTriggerStep } from '../../graph/graphBuilder.svelte';
 import { checkIfParentLoop } from '../utils.svelte';
 import { twMerge } from 'tailwind-merge';
 import { getGraphContext } from '../../graph/graphContext';
-let { onSelectedIteration, moduleId, mod = $bindable(), insertable, moduleAction = undefined, annotation = undefined, nodeState, moving = undefined, duration_ms = undefined, retries = undefined, flowJobs, editMode = false, onSelect, onTestUpTo, onUpdateMock, onEditInput, flowJob, isOwner = false, maximizeSubflow } = $props();
-const { selectionManager } = getGraphContext();
+let { onSelectedIteration, moduleId, mod = $bindable(), insertable, moduleAction = undefined, annotation = undefined, nodeState, duration_ms = undefined, retries = undefined, flowJobs, editMode = false, onSelect, onTestUpTo, onUpdateMock, onEditInput, flowJob, isOwner = false, maximizeSubflow, menuItems = undefined } = $props();
+const { selectionManager, moveManager } = getGraphContext();
 const flowEditorContext = getContext('FlowEditorContext');
 const { flowStore } = flowEditorContext || {};
 const dispatch = createEventDispatcher();
@@ -32,15 +32,25 @@ function handlePointerDown(e) {
         onSelect(mod.id);
     }
 }
+/** Whether this module should be faded because it or its parent subflow is being moved/dragged */
+let isPartOfMovingSubflow = $derived(moveManager?.draggedNodeIds?.has(mod.id) ?? false);
+let fadedClass = $derived(isPartOfMovingSubflow
+    ? moveManager?.movingModuleId
+        ? 'opacity-50'
+        : moveManager?.dragging
+            ? 'opacity-30'
+            : ''
+    : '');
 </script>
 
 {#if mod}
 	<div class="relative">
-		{#if moving == mod.id}
-			<div class="absolute z-10 right-20 top-0.5 center-center">
-				<Button variant="accent" on:click={() => dispatch('move')} size="xs" destructive
-					>Cancel move</Button
-				>
+		{#if moveManager?.movingModuleId == mod.id && !moveManager?.movingIds?.includes(mod.id)}
+			<div class="absolute z-10 inset-0 flex items-center justify-center">
+				<Button variant="accent" on:click={() => dispatch('move')} size="xs" destructive>
+					Cancel move
+					<kbd class="ml-1 text-2xs opacity-60 font-mono">Esc</kbd>
+				</Button>
 			</div>
 		{/if}
 
@@ -78,12 +88,13 @@ function handlePointerDown(e) {
 			</div>
 		{/if}
 
-		<div class={moving == mod.id ? 'opacity-50' : ''}>
+		<div class={fadedClass}>
 			{#if mod.value.type === 'forloopflow' || mod.value.type === 'whileloopflow'}
 				<FlowModuleSchemaItem
 					deletable={insertable}
 					{editMode}
 					{moduleAction}
+					{menuItems}
 					label={`${
 						mod.summary || (mod.value.type == 'forloopflow' ? 'For loop' : 'While loop')
 					}  ${mod.value.parallel ? '(parallel)' : ''} ${
@@ -118,6 +129,7 @@ function handlePointerDown(e) {
 					deletable={insertable}
 					{editMode}
 					{moduleAction}
+					{menuItems}
 					on:changeId
 					on:delete
 					on:move
@@ -137,6 +149,7 @@ function handlePointerDown(e) {
 					deletable={insertable}
 					{editMode}
 					{moduleAction}
+					{menuItems}
 					on:changeId
 					on:delete
 					on:move
@@ -156,6 +169,7 @@ function handlePointerDown(e) {
 					{retries}
 					{editMode}
 					{moduleAction}
+					{menuItems}
 					on:changeId
 					on:pointerdown={handlePointerDown}
 					on:delete
@@ -169,7 +183,6 @@ function handlePointerDown(e) {
 					deletable={insertable}
 					id={mod.id}
 					{...itemProps}
-					modType={mod.value.type}
 					{nodeState}
 					label={mod.summary ||
 						(mod.value.type === 'aiagent' ? 'AI Agent' : undefined) ||

package/package/components/flows/map/MapItem.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { FlowModule, Job } from '../../../gen';
-import { type onSelectedIteration } from '../../graph/graphBuilder.svelte';
+import { type Item } from '../../../utils';
+import { type OnSelectedIteration } from '../../graph/graphBuilder.svelte';
 import type { FlowNodeState } from '../../graph';
 import type { ModuleActionInfo } from '../flowDiff';
 interface Props {
@@ -9,7 +10,6 @@ interface Props {
     moduleAction: ModuleActionInfo | undefined;
     annotation?: string | undefined;
     nodeState?: FlowNodeState;
-    moving?: string | undefined;
     duration_ms?: number | undefined;
     retries?: number | undefined;
     flowJobs: {
@@ -19,7 +19,7 @@ interface Props {
         selectedManually: boolean | undefined;
     } | undefined;
     editMode?: boolean;
-    onSelectedIteration: onSelectedIteration;
+    onSelectedIteration: OnSelectedIteration;
     onSelect: (id: string | FlowModule) => void;
     onTestUpTo?: ((id: string) => void) | undefined;
     onUpdateMock?: (detail: {
@@ -33,6 +33,7 @@ interface Props {
     flowJob?: Job | undefined;
     isOwner?: boolean;
     maximizeSubflow?: () => void;
+    menuItems?: Item[];
 }
 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> & {

package/package/components/flows/map/VirtualItem.svelte

@@ -7,7 +7,10 @@ import { fade } from 'svelte/transition';
 import { Database, Square } from 'lucide-svelte';
 import FlowGraphPreviewButton from './FlowGraphPreviewButton.svelte';
 import { getNodeColorClasses, aiActionToNodeState } from '../../graph';
+import { getGraphContext } from '../../graph/graphContext';
 let { label = undefined, selected, selectable, id = undefined, center = true, hideId = false, preLabel = undefined, inputJson = undefined, prefix = '', nodeKind, cache = false, earlyStop = false, editMode = false, action = undefined, icon, onUpdateMock, onEditInput, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, showJobStatus = false, flowHasChanged = false } = $props();
+const flowGraphContext = getGraphContext();
+let isMultiSelected = $derived((flowGraphContext?.selectionManager?.selectedIds?.length ?? 0) > 1);
 const outputPickerVisible = $derived((nodeKind || (inputJson && Object.keys(inputJson).length > 0)) && editMode);
 let hoverButton = $state(false);
 const outputType = $derived(showJobStatus
@@ -58,7 +61,7 @@ let colorClasses = $derived(getNodeColorClasses(effectiveState, selected));
 					</div>
 				{/if}
 			</div>
-			{#if outputPickerVisible}
+			{#if outputPickerVisible && !isMultiSelected}
 				<OutputPicker
 					{selected}
 					{hover}
@@ -134,7 +137,7 @@ let colorClasses = $derived(getNodeColorClasses(effectiveState, selected));
 					hoverButton = false
 				}}
 			>
-				{#if outputPickerVisible}
+				{#if outputPickerVisible && !isMultiSelected}
 					<div transition:fade={{ duration: 100 }}>
 						<FlowGraphPreviewButton
 							{isRunning}

package/package/components/flows/missingInputWarnings.js

@@ -1,5 +1,6 @@
 import { parseOutputs } from '../../infer';
 import { dfs } from './dfs';
+const isAiTransform = (transform) => transform?.type === 'ai';
 function isInputFilled(inputTransforms, key, schema) {
     const required = schema?.required?.includes(key) ?? false;
     if (!required) {
@@ -7,6 +8,9 @@ function isInputFilled(inputTransforms, key, schema) {
     }
     if (inputTransforms.hasOwnProperty(key)) {
         const transform = inputTransforms[key];
+        if (isAiTransform(transform)) {
+            return true;
+        }
         if (transform?.type === 'static' &&
             (transform?.value === undefined || transform?.value === '' || transform?.value === null)) {
             return false;
@@ -19,6 +23,9 @@ function isInputFilled(inputTransforms, key, schema) {
     return true;
 }
 async function isConnectedToMissingModule(argName, input_transform, moduleIds) {
+    if (isAiTransform(input_transform)) {
+        return undefined;
+    }
     const val = input_transform.type === 'static' ? String(input_transform.value) : input_transform.expr;
     try {
         const outputs = await parseOutputs(val, true);

package/package/components/flows/multiSelectUtils.d.ts

@@ -0,0 +1,26 @@
+import type { FlowModule } from '../../gen';
+/**
+ * Filter raw selected node IDs down to the minimal set of top-level module IDs:
+ * 1. Filter out virtual graph nodes (Input, Result, Trigger, -start, -end, -branch-*, subflow:*, preprocessor, failure)
+ * 2. Verify each ID exists as a real module in the flow module tree
+ * 3. Deduplicate nested: if a container (loop/branch) AND its children are both selected, keep only the container
+ */
+export declare function resolveSelectedModuleIds(rawIds: string[], modules: FlowModule[]): string[];
+export type ModuleLocation = {
+    id: string;
+    parentArray: FlowModule[];
+    index: number;
+};
+/**
+ * For each ID, find its parent array (reference) and index using DFS.
+ */
+export declare function locateModules(ids: string[], modules: FlowModule[]): ModuleLocation[];
+/**
+ * Group locations that share the same parent array, sorted by index within each group.
+ */
+export declare function groupByParent(locations: ModuleLocation[]): ModuleLocation[][];
+/**
+ * True if all locations share the same parent array and have consecutive indices.
+ * Required for move to be valid.
+ */
+export declare function areContiguousSiblings(locations: ModuleLocation[]): boolean;

package/package/components/flows/multiSelectUtils.js

@@ -0,0 +1,122 @@
+import { dfs } from './dfs';
+/** Virtual/non-module node IDs that should be filtered out of multi-select operations */
+const VIRTUAL_ID_PREFIXES = ['Input', 'Result', 'Trigger', 'preprocessor', 'failure'];
+function isVirtualId(id) {
+    if (VIRTUAL_ID_PREFIXES.includes(id))
+        return true;
+    if (id.endsWith('-start') ||
+        id.endsWith('-end') ||
+        id.includes('-branch-') ||
+        id.startsWith('subflow:')) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Single DFS pass to build a map of moduleId → set of ancestor module IDs.
+ * Used to deduplicate nested selections (keep container, drop children).
+ */
+function buildAncestorMap(modules) {
+    const ancestors = new Map();
+    function walk(mods, parentAncestors) {
+        for (const mod of mods) {
+            ancestors.set(mod.id, parentAncestors);
+            const childAncestors = new Set([...parentAncestors, mod.id]);
+            const val = mod.value;
+            if (val.type === 'forloopflow' || val.type === 'whileloopflow') {
+                walk(val.modules, childAncestors);
+            }
+            else if (val.type === 'branchall') {
+                for (const branch of val.branches)
+                    walk(branch.modules, childAncestors);
+            }
+            else if (val.type === 'branchone') {
+                for (const branch of val.branches)
+                    walk(branch.modules, childAncestors);
+                walk(val.default, childAncestors);
+            }
+        }
+    }
+    walk(modules, new Set());
+    return ancestors;
+}
+/**
+ * Filter raw selected node IDs down to the minimal set of top-level module IDs:
+ * 1. Filter out virtual graph nodes (Input, Result, Trigger, -start, -end, -branch-*, subflow:*, preprocessor, failure)
+ * 2. Verify each ID exists as a real module in the flow module tree
+ * 3. Deduplicate nested: if a container (loop/branch) AND its children are both selected, keep only the container
+ */
+export function resolveSelectedModuleIds(rawIds, modules) {
+    // Step 1: Filter out virtual IDs
+    const candidateIds = rawIds.filter((id) => !isVirtualId(id));
+    // Step 2+3: Single DFS to build ancestor map (also verifies existence)
+    const ancestorMap = buildAncestorMap(modules);
+    const verifiedIds = candidateIds.filter((id) => ancestorMap.has(id));
+    // If any ancestor of this module is also selected, it's a nested child — drop it
+    const selectedSet = new Set(verifiedIds);
+    return verifiedIds.filter((id) => {
+        const ancestors = ancestorMap.get(id);
+        for (const ancestor of ancestors) {
+            if (selectedSet.has(ancestor))
+                return false;
+        }
+        return true;
+    });
+}
+/**
+ * For each ID, find its parent array (reference) and index using DFS.
+ */
+export function locateModules(ids, modules) {
+    const idSet = new Set(ids);
+    const locations = [];
+    dfs(modules, (mod, parentModules) => {
+        if (idSet.has(mod.id)) {
+            const index = parentModules.findIndex((m) => m.id === mod.id);
+            if (index !== -1) {
+                locations.push({ id: mod.id, parentArray: parentModules, index });
+            }
+        }
+    });
+    return locations;
+}
+/**
+ * Group locations that share the same parent array, sorted by index within each group.
+ */
+export function groupByParent(locations) {
+    const groups = new Map();
+    for (const loc of locations) {
+        const existing = groups.get(loc.parentArray);
+        if (existing) {
+            existing.push(loc);
+        }
+        else {
+            groups.set(loc.parentArray, [loc]);
+        }
+    }
+    // Sort each group by index
+    for (const group of groups.values()) {
+        group.sort((a, b) => a.index - b.index);
+    }
+    return Array.from(groups.values());
+}
+/**
+ * True if all locations share the same parent array and have consecutive indices.
+ * Required for move to be valid.
+ */
+export function areContiguousSiblings(locations) {
+    if (locations.length === 0)
+        return false;
+    if (locations.length === 1)
+        return true;
+    // All must share the same parent
+    const parent = locations[0].parentArray;
+    if (!locations.every((loc) => loc.parentArray === parent))
+        return false;
+    // Sort by index and check contiguity
+    const sorted = [...locations].sort((a, b) => a.index - b.index);
+    for (let i = 1; i < sorted.length; i++) {
+        if (sorted[i].index !== sorted[i - 1].index + 1)
+            return false;
+    }
+    return true;
+}

package/package/components/flows/pickers/FlowScriptPicker.svelte

@@ -21,6 +21,9 @@ const enterpriseLangs = ['bigquery', 'snowflake', 'mssql', 'oracledb'];
 				<LanguageIcon {lang} />
 			{/if}
 			<span class="text-xs">{label}</span>
+			{#if lang === 'claudesandbox'}
+				<span class="text-primary !text-xs">(new)</span>
+			{/if}
 		</div>
 	</Button>
 	{#snippet text()}

package/package/components/flows/pickers/FlowScriptPicker.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SupportedLanguage } from '../../../common';
 interface Props {
     disabled?: boolean;
     label: string;
-    lang?: SupportedLanguage | 'docker' | 'javascript' | undefined;
+    lang?: SupportedLanguage | 'docker' | 'javascript' | 'claudesandbox' | undefined;
     id?: string | 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> {

package/package/components/flows/pickers/FlowScriptPickerQuick.svelte

@@ -2,11 +2,7 @@
 import LanguageIcon from '../../common/languageIcons/LanguageIcon.svelte';
 import { sendUserToast } from '../../../toast';
 import { createEventDispatcher } from 'svelte';
-export let label;
-export let lang = undefined;
-export let selected = false;
-export let eeRestricted;
-export let enterpriseLangs = [];
+let { label, lang = undefined, selected = false, eeRestricted, enterpriseLangs = [] } = $props();
 const dispatch = createEventDispatcher();
 function handleKeydown(event) {
     if (selected && event.key === 'Enter') {
@@ -22,7 +18,7 @@ function click() {
 }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <Button
 	id={`flow-editor-new-${lang}`}
@@ -38,6 +34,9 @@ function click() {
 	{/if}
 	<span class="grow truncate text-left {eeRestricted ? 'text-disabled' : ''}">
 		{label}{#if eeRestricted}&nbsp;(EE){/if}
+		{#if lang === 'claudesandbox'}
+			<span class="text-primary !text-xs">(new)</span>
+		{/if}
 	</span>
 	{#if selected}
 		<kbd class="!text-xs">&crarr;</kbd>

package/package/components/flows/pickers/FlowScriptPickerQuick.svelte.d.ts

@@ -1,4 +1,11 @@
 import type { SupportedLanguage } from '../../../common';
+interface Props {
+    label: string;
+    lang?: SupportedLanguage | 'docker' | 'javascript' | 'claudesandbox' | undefined;
+    selected?: boolean;
+    eeRestricted: boolean;
+    enterpriseLangs?: string[];
+}
 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> & {
         $$bindings?: Bindings;
@@ -12,16 +19,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowScriptPickerQuick: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    lang?: SupportedLanguage | "docker" | "javascript" | undefined;
-    selected?: boolean;
-    eeRestricted: boolean;
-    enterpriseLangs?: string[];
-}, {
+declare const FlowScriptPickerQuick: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type FlowScriptPickerQuick = InstanceType<typeof FlowScriptPickerQuick>;
 export default FlowScriptPickerQuick;

package/package/components/flows/pickers/FlowToplevelNode.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { createEventDispatcher } from 'svelte';
 import TopLevelNode from './TopLevelNode.svelte';
-export let label;
-export let selected = false;
+let { label, selected = false } = $props();
 const dispatch = createEventDispatcher();
 function handleKeydown(event) {
     if (selected && event.key === 'Enter') {
@@ -14,6 +13,6 @@ function click() {
 }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <TopLevelNode {label} {selected} returnIcon onSelect={click} />

package/package/components/flows/pickers/FlowToplevelNode.svelte.d.ts

@@ -1,3 +1,7 @@
+interface Props {
+    label: string;
+    selected?: boolean;
+}
 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> & {
         $$bindings?: Bindings;
@@ -11,13 +15,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowToplevelNode: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    selected?: boolean;
-}, {
+declare const FlowToplevelNode: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type FlowToplevelNode = InstanceType<typeof FlowToplevelNode>;
 export default FlowToplevelNode;

package/package/components/flows/pickers/PickHubApp.svelte

@@ -6,6 +6,8 @@ import NoItemFound from '../../home/NoItemFound.svelte';
 import RowIcon from '../../common/table/RowIcon.svelte';
 import { loadHubApps } from '../../../hub';
 import TextInput from '../../text_input/TextInput.svelte';
+import { Alert } from '../../common';
+import { disableHubStore } from '../../../stores';
 let { filter = $bindable(''), syncQuery = false, children, size = 'md' } = $props();
 let hubApps = $state(undefined);
 let filteredItems = $state([]);
@@ -13,11 +15,23 @@ let appFilter = $state(undefined);
 const prefilteredItems = $derived(appFilter ? (hubApps ?? []).filter((i) => i.apps.includes(appFilter)) : (hubApps ?? []));
 const apps = $derived(Array.from(new Set(filteredItems?.flatMap((x) => x.apps) ?? [])).sort());
 const dispatch = createEventDispatcher();
+let hubNotAvailable = $state(false);
 onMount(async () => {
-    hubApps = await loadHubApps();
+    if ($disableHubStore)
+        return;
+    const result = await loadHubApps();
+    if (result === undefined) {
+        hubNotAvailable = true;
+    }
+    else {
+        hubApps = result;
+    }
 });
 </script>
 
+{#if $disableHubStore}
+	<!-- Hub disabled, show nothing -->
+{:else}
 <SearchItems
 	{filter}
 	items={prefilteredItems}
@@ -37,7 +51,11 @@ onMount(async () => {
 </div>
 <ListFilters {syncQuery} filters={apps} bind:selectedFilter={appFilter} resourceType />
 
-{#if hubApps}
+{#if hubNotAvailable}
+	<Alert type="warning" title="Hub not available">
+		Could not connect to the Windmill Hub. If you are in a closed environment, you can disable the Hub in the <a href="/#superadmin-settings?tab=private_hub">instance settings</a>.
+	</Alert>
+{:else if hubApps}
 	{#if filteredItems.length == 0}
 		<NoItemFound />
 	{:else}
@@ -76,3 +94,4 @@ onMount(async () => {
 		<Skeleton layout={[[4], 0.5]} />
 	{/each}
 {/if}
+{/if}