windmill-components 1.655.1 → 1.665.0

package/package/components/debug/debugUtils.d.ts

@@ -16,6 +16,11 @@ export declare function signDebugRequest(workspace: string, code: string, langua
     code: string;
     job_id: string;
 }>;
+/**
+ * Sign a multiplayer session request. Returns a JWT token that the
+ * multiplayer server will verify before accepting the WebSocket connection.
+ */
+export declare function signMultiplayerRequest(workspace: string): Promise<string>;
 /**
  * Get a user-friendly error message for debug errors
  */

package/package/components/debug/debugUtils.js

@@ -61,6 +61,26 @@ export async function signDebugRequest(workspace, code, language) {
     }
     return await response.json();
 }
+/**
+ * Sign a multiplayer session request. Returns a JWT token that the
+ * multiplayer server will verify before accepting the WebSocket connection.
+ */
+export async function signMultiplayerRequest(workspace) {
+    if (!workspace) {
+        throw new Error('No workspace selected');
+    }
+    const response = await fetch(`/api/w/${workspace}/debug/sign_multiplayer`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({})
+    });
+    if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || 'Failed to sign multiplayer session');
+    }
+    const data = await response.json();
+    return data.token;
+}
 /**
  * Get a user-friendly error message for debug errors
  */

package/package/components/debug/index.d.ts

@@ -45,7 +45,7 @@ export { default as DebugPanel } from './DebugPanel.svelte';
 export { default as DebugVariableViewer } from './DebugVariableViewer.svelte';
 export { default as DebugConsole } from './DebugConsole.svelte';
 export { DAPClient, getDAPClient, resetDAPClient, debugState, type DebugState, type Breakpoint, type StackFrame, type Variable, type Scope } from './dapClient';
-export { fetchContextualVariables, signDebugRequest, getDebugErrorMessage, isDebuggableLanguage, getDebugFileExtension } from './debugUtils';
+export { fetchContextualVariables, signDebugRequest, signMultiplayerRequest, getDebugErrorMessage, isDebuggableLanguage, getDebugFileExtension } from './debugUtils';
 /**
  * Language to debug endpoint path mapping.
  * Uses the unified DAP Debug Service with path-based routing.

package/package/components/debug/index.js

@@ -46,7 +46,8 @@ export { default as DebugVariableViewer } from './DebugVariableViewer.svelte';
 export { default as DebugConsole } from './DebugConsole.svelte';
 export { DAPClient, getDAPClient, resetDAPClient, debugState } from './dapClient';
 // Re-export shared utilities
-export { fetchContextualVariables, signDebugRequest, getDebugErrorMessage, isDebuggableLanguage, getDebugFileExtension } from './debugUtils';
+export { fetchContextualVariables, signDebugRequest, signMultiplayerRequest, getDebugErrorMessage, isDebuggableLanguage, getDebugFileExtension } from './debugUtils';
+import { buildWsUrl } from '../../wsUrl';
 /**
  * Language to debug endpoint path mapping.
  * Uses the unified DAP Debug Service with path-based routing.
@@ -67,12 +68,7 @@ export const DAP_ENDPOINT_PATHS = {
  */
 export function getDebugServerUrl(language) {
     const path = DAP_ENDPOINT_PATHS[language] || DAP_ENDPOINT_PATHS.python3;
-    if (typeof window === 'undefined') {
-        // SSR fallback
-        return `ws://localhost:3003${path}`;
-    }
-    const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-    return `${wsProtocol}://${window.location.host}/ws_debug${path}`;
+    return buildWsUrl(`/ws_debug${path}`);
 }
 /**
  * @deprecated Use isDebuggableLanguage instead

package/package/components/flows/CreateActionsFlow.svelte

@@ -5,69 +5,247 @@ import { Button } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import { importFlowStore } from './flowStore.svelte';
-import { Loader2, Plus } from 'lucide-svelte';
+import { importScriptStore } from '../scripts/scriptStore.svelte';
+import Modal from '../common/modal/Modal.svelte';
+import Toggle from '../Toggle.svelte';
+import Tabs from '../common/tabs/Tabs.svelte';
+import Tab from '../common/tabs/Tab.svelte';
+import { PythonIcon, TypeScriptIcon } from '../common/languageIcons';
+import { Code2, Loader2, Plus } from 'lucide-svelte';
 import YAML from 'yaml';
+const SKIP_FLOW_MODAL_KEY = 'windmill_skip_flow_modal';
 let drawer = $state(undefined);
+let wacDrawer = $state(undefined);
 let pendingRaw = $state(undefined);
+let pendingWacRaw = $state(undefined);
 let importType = $state('yaml');
+let wacImportType = $state('yaml');
+let flowModalOpen = $state(false);
+let wacHovered = $state(false);
+let skipModal = $state(typeof localStorage !== 'undefined' && localStorage.getItem(SKIP_FLOW_MODAL_KEY) === 'true');
 async function importRaw() {
     $importFlowStore =
         importType === 'yaml' ? YAML.parse(pendingRaw ?? '') : JSON.parse(pendingRaw ?? '');
     await goto('/flows/add');
     drawer?.closeDrawer?.();
 }
+async function importWacRaw() {
+    const parsed = wacImportType === 'yaml' ? YAML.parse(pendingWacRaw ?? '') : JSON.parse(pendingWacRaw ?? '');
+    $importScriptStore = parsed;
+    await goto(`${base}/scripts/add?import=true`);
+    wacDrawer?.closeDrawer?.();
+}
+function handleFlowClick() {
+    if (skipModal) {
+        goto(`${base}/flows/add?nodraft=true`);
+    }
+    else {
+        flowModalOpen = true;
+    }
+}
+function selectFlowEditor() {
+    flowModalOpen = false;
+    goto(`${base}/flows/add?nodraft=true`);
+}
+function selectWacPython() {
+    flowModalOpen = false;
+    goto(`${base}/scripts/add?nodraft=true&wac=python`);
+}
+function selectWacTypescript() {
+    flowModalOpen = false;
+    goto(`${base}/scripts/add?nodraft=true&wac=typescript`);
+}
+function toggleSkipModal() {
+    skipModal = !skipModal;
+    localStorage.setItem(SKIP_FLOW_MODAL_KEY, String(skipModal));
+}
 </script>
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-		<Button
-			id="create-flow-button"
-			aiId="flows-create-actions-flow"
-			aiDescription="Create a new flow"
-			unifiedSize="lg"
-			startIcon={{ icon: Plus }}
-			endIcon={{ icon: BarsStaggered }}
-			href="{base}/flows/add?nodraft=true"
-			variant="accent"
-			dropdownItems={[
-				{
-					label: 'Import from YAML',
-					onClick: () => {
-						drawer?.toggleDrawer?.()
-						importType = 'yaml'
-					}
-				},
-				{
-					label: 'Import from JSON',
-					onClick: () => {
-						drawer?.toggleDrawer?.()
-						importType = 'json'
-					}
+	<Button
+		id="create-flow-button"
+		aiId="flows-create-actions-flow"
+		aiDescription="Create a new flow"
+		unifiedSize="lg"
+		startIcon={{ icon: Plus }}
+		endIcon={{ icon: BarsStaggered }}
+		on:click={handleFlowClick}
+		variant="accent"
+		dropdownItems={[
+			{
+				label: 'Import Flow',
+				onClick: () => {
+					drawer?.toggleDrawer?.()
+				}
+			},
+			{
+				label: 'Workflow-as-Code in TypeScript',
+				onClick: () => selectWacTypescript()
+			},
+			{
+				label: 'Workflow-as-Code in Python',
+				onClick: () => selectWacPython()
+			},
+			{
+				label: 'Import Workflow-as-Code',
+				onClick: () => {
+					wacDrawer?.toggleDrawer?.()
 				}
-			]}
-		>
-			Flow
-		</Button>
+			}
+		]}
+	>
+		Flow
+	</Button>
+</div>
+
+<!-- Flow Type Selection Modal -->
+<Modal bind:open={flowModalOpen} title="Create a new flow">
+	<div class="flex flex-col gap-4 pr-4">
+		<div class="grid grid-cols-2 gap-8">
+			<!-- Flow Editor option -->
+			<button
+				class="flex flex-col items-center gap-3 p-6 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all cursor-pointer group"
+				onclick={selectFlowEditor}
+			>
+				<div
+					class="w-32 h-32 rounded-xl bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center group-hover:bg-blue-200 dark:group-hover:bg-blue-800/50 transition-colors"
+				>
+					<BarsStaggered size={32} class="text-blue-600 dark:text-blue-400" style="" />
+				</div>
+				<div class="text-center">
+					<h3 class="font-semibold text-primary">Flow Editor</h3>
+					<p class="text-xs text-tertiary mt-1">
+						Visual builder for composing scripts into workflows with branching, loops, and error
+						handling.
+					</p>
+				</div>
+			</button>
+
+			<!-- Workflow-as-Code option -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="relative rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-purple-500 dark:hover:border-purple-400 transition-all cursor-pointer overflow-hidden"
+				onmouseenter={() => (wacHovered = true)}
+				onmouseleave={() => (wacHovered = false)}
+			>
+				<!-- Alpha badge -->
+				<div
+					class="absolute top-2 right-2 z-10 px-2 py-0.5 rounded-full bg-purple-500 text-white text-2xs font-bold uppercase tracking-wide"
+				>
+					Alpha
+				</div>
+
+				<!-- Default state -->
+				<div
+					class="flex flex-col items-center gap-3 p-6 absolute inset-0 transition-all duration-300"
+					style="opacity: {wacHovered ? 0 : 1}; transform: scale({wacHovered ? 0.95 : 1})"
+				>
+					<div
+						class="w-32 h-32 rounded-xl bg-purple-100 dark:bg-purple-900/40 flex items-center justify-center transition-colors"
+					>
+						<Code2 size={32} class="text-purple-600 dark:text-purple-400" />
+					</div>
+					<div class="text-center">
+						<h3 class="font-semibold text-primary whitespace-nowrap">Workflow-as-Code</h3>
+						<p class="text-xs text-tertiary mt-1">
+							Write workflows as Python or TypeScript code as a regular Windmill script.
+						</p>
+					</div>
+				</div>
+
+				<!-- Hover state: split into TypeScript / Python -->
+				<div
+					class="flex flex-col h-full transition-all duration-300"
+					style="opacity: {wacHovered ? 1 : 0}; transform: scale({wacHovered ? 1 : 0.95})"
+				>
+					<button
+						class="flex-1 flex items-center justify-center gap-3 p-4 hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors border-b border-gray-200 dark:border-gray-700"
+						onclick={selectWacTypescript}
+					>
+						<div
+							class="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/40 flex items-center justify-center"
+						>
+							<TypeScriptIcon width={24} height={24} />
+						</div>
+						<span class="font-semibold text-sm text-primary">TypeScript</span>
+					</button>
+					<button
+						class="flex-1 flex items-center justify-center gap-3 p-4 hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors"
+						onclick={selectWacPython}
+					>
+						<div
+							class="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/40 flex items-center justify-center"
+						>
+							<PythonIcon width={24} height={24} />
+						</div>
+						<span class="font-semibold text-sm text-primary">Python</span>
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2 px-1">
+			<Toggle size="xs" checked={skipModal} on:change={toggleSkipModal} />
+			<span class="text-2xs text-tertiary">Always use the Flow editor (skip this modal)</span>
+		</div>
 	</div>
+</Modal>
 
-<!-- Raw JSON -->
+<!-- Import Drawer -->
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent
-		title={'Import flow from ' + (importType === 'yaml' ? 'YAML' : 'JSON')}
-		on:close={() => drawer?.toggleDrawer?.()}
-	>
-		{#await import('../SimpleEditor.svelte')}
-			<Loader2 class="animate-spin" />
-		{:then Module}
-			<Module.default
-				bind:code={pendingRaw}
-				lang={importType}
-				class="h-full"
-				fixedOverflowWidgets={false}
-			/>
-		{/await}
+	<DrawerContent title="Import flow from YAML/JSON" on:close={() => drawer?.toggleDrawer?.()}>
+		<Tabs bind:selected={importType}>
+			<Tab value="yaml" label="YAML" />
+			<Tab value="json" label="JSON" />
+			{#snippet content()}
+				<div class="relative pt-2 h-full">
+					{#key importType}
+						{#await import('../SimpleEditor.svelte')}
+							<Loader2 class="animate-spin" />
+						{:then Module}
+							<Module.default
+								bind:code={pendingRaw}
+								lang={importType}
+								class="h-full"
+								fixedOverflowWidgets={false}
+							/>
+						{/await}
+					{/key}
+				</div>
+			{/snippet}
+		</Tabs>
 		{#snippet actions()}
 			<Button size="sm" on:click={importRaw}>Import</Button>
 		{/snippet}
 	</DrawerContent>
 </Drawer>
+
+<!-- Import WAC Drawer -->
+<Drawer bind:this={wacDrawer} size="800px">
+	<DrawerContent title="Import Workflow-as-Code" on:close={() => wacDrawer?.toggleDrawer?.()}>
+		<Tabs bind:selected={wacImportType}>
+			<Tab value="yaml" label="YAML" />
+			<Tab value="json" label="JSON" />
+			{#snippet content()}
+				<div class="relative pt-2 h-full">
+					{#key wacImportType}
+						{#await import('../SimpleEditor.svelte')}
+							<Loader2 class="animate-spin" />
+						{:then Module}
+							<Module.default
+								bind:code={pendingWacRaw}
+								lang={wacImportType}
+								class="h-full"
+								fixedOverflowWidgets={false}
+							/>
+						{/await}
+					{/key}
+				</div>
+			{/snippet}
+		</Tabs>
+		{#snippet actions()}
+			<Button size="sm" on:click={importWacRaw}>Import</Button>
+		{/snippet}
+	</DrawerContent>
+</Drawer>

package/package/components/flows/DebounceLimit.svelte

@@ -4,10 +4,38 @@ import { SecondsInput } from '../common';
 import { enterpriseLicense } from '../../stores';
 import Label from '../Label.svelte';
 let { debounce_delay_s = $bindable(), debounce_key = $bindable(), debounce_args_to_accumulate = $bindable(), max_total_debouncing_time = $bindable(), max_total_debounces_amount = $bindable(), schema = undefined, placeholder, size = 'xs', color = undefined, fontClass = 'font-normal' } = $props();
-// Get list of array-type arguments from schema
+// Check if an originalType like "string | string[]" is a top-level
+// union where at least one member is an array type (ends with "[]").
+// Splits on "|" only at the top level (not inside {}, <>, or ()).
+function isUnionWithArray(originalType) {
+    if (!originalType)
+        return false;
+    let depth = 0;
+    const parts = [];
+    let cur = '';
+    for (const ch of originalType) {
+        if (ch === '{' || ch === '<' || ch === '(')
+            depth++;
+        else if (ch === '}' || ch === '>' || ch === ')')
+            depth--;
+        else if (ch === '|' && depth === 0) {
+            parts.push(cur.trim());
+            cur = '';
+            continue;
+        }
+        cur += ch;
+    }
+    parts.push(cur.trim());
+    // Match TS array syntax (T[]) and Python list syntax (list[T] / List[T])
+    return parts.length > 1 && parts.some((p) => p.endsWith('[]') || /^[Ll]ist\[.+\]$/.test(p));
+}
+// Get list of arguments eligible for accumulation from schema.
+// Includes array-type arguments and union types like T | T[]
+// whose scalar values are wrapped into single-element arrays
+// at aggregation time.
 let arrayArgs = $derived(schema?.properties
     ? Object.entries(schema.properties)
-        .filter(([_, prop]) => prop.type === 'array')
+        .filter(([_, prop]) => prop.type === 'array' || isUnionWithArray(prop.originalType))
         .map(([key, _]) => key)
     : []);
 // Single selected arg for UI (convert between single selection and array)
@@ -81,8 +109,8 @@ $effect(() => {
 			<Label label="Argument to accumulate (optional)">
 				{#snippet header()}
 					<Tooltip>
-						Select a list-type argument to accumulate across debounced executions. Values from
-						each debounced execution will be appended together.</Tooltip
+						Select a list-type argument to accumulate across debounced executions. Values from each
+						debounced execution will be appended together.</Tooltip
 					>
 				{/snippet}
 				<select disabled={!$enterpriseLicense} bind:value={selectedArg}>
@@ -101,8 +129,8 @@ $effect(() => {
 			<Label label="Max total debouncing time (optional)">
 				{#snippet header()}
 					<Tooltip>
-						Maximum total time (in seconds) that a job can be debounced before it must execute.
-						Once this time is reached, the job will run regardless of ongoing debouncing.</Tooltip
+						Maximum total time (in seconds) that a job can be debounced before it must execute. Once
+						this time is reached, the job will run regardless of ongoing debouncing.</Tooltip
 					>
 				{/snippet}
 				<SecondsInput disabled={!$enterpriseLicense} bind:seconds={max_total_debouncing_time} />
@@ -110,11 +138,16 @@ $effect(() => {
 			<Label label="Max total debounces amount (optional)">
 				{#snippet header()}
 					<Tooltip>
-						Maximum number of times a job can be debounced before it must execute. Once this
-						count is reached, the job will run regardless of ongoing debouncing.</Tooltip
+						Maximum number of times a job can be debounced before it must execute. Once this count
+						is reached, the job will run regardless of ongoing debouncing.</Tooltip
 					>
 				{/snippet}
-				<input type="number" disabled={!$enterpriseLicense} bind:value={max_total_debounces_amount} min="0" />
+				<input
+					type="number"
+					disabled={!$enterpriseLicense}
+					bind:value={max_total_debounces_amount}
+					min="0"
+				/>
 			</Label>
 		</div>
 	{/if}

package/package/components/flows/common/FlowCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import FlowCardHeader from './FlowCardHeader.svelte';
-let { title = undefined, summary = $bindable(undefined), noEditor, noHeader = false, flowModuleValue = undefined, header, action, children, isAgentTool = false } = $props();
+let { title = undefined, summary = $bindable(undefined), noEditor, noHeader = false, flowModuleValue = undefined, header, action, children, isAgentTool = false, siblingToolNames = undefined } = $props();
 </script>
 
 <div class="flex flex-col h-full">
@@ -13,6 +13,7 @@ let { title = undefined, summary = $bindable(undefined), noEditor, noHeader = fa
 				{flowModuleValue}
 				{action}
 				{isAgentTool}
+				{siblingToolNames}
 			>
 				{@render header?.()}
 			</FlowCardHeader>

package/package/components/flows/common/FlowCard.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     action?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
     isAgentTool?: boolean;
+    siblingToolNames?: 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> & {

package/package/components/flows/common/FlowCardHeader.svelte

@@ -12,9 +12,10 @@ import { hubBaseUrlStore, workspaceStore } from '../../../stores';
 import { Flag, Lock, RefreshCw, Unlock } from 'lucide-svelte';
 import { createEventDispatcher, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-import { validateToolName } from '../../graph/renderers/nodes/AIToolNode.svelte';
+import { getToolNameError } from '../../graph/renderers/nodes/AIToolNode.svelte';
 import { DEFAULT_HUB_BASE_URL, PRIVATE_HUB_MIN_VERSION } from '../../../hub';
-let { flowModuleValue = undefined, title = undefined, summary = $bindable(undefined), children, action, isAgentTool = false } = $props();
+let { flowModuleValue = undefined, title = undefined, summary = $bindable(undefined), children, action, isAgentTool = false, siblingToolNames = undefined } = $props();
+let toolNameError = $derived(isAgentTool ? getToolNameError(summary ?? '', undefined, siblingToolNames) : undefined);
 let latestHash = $state(undefined);
 // Extract version_id from hub path (format: hub/{version_id}/{app}/{summary})
 let hubVersionId = $derived(flowModuleValue?.type === 'script' && flowModuleValue.path?.startsWith('hub/')
@@ -72,6 +73,7 @@ $effect.pre(() => {
 						elementProps={{
 							placeholder: isAgentTool ? 'Tool name' : 'Summary'
 						}}
+						{siblingToolNames}
 					/>
 				{:else if flowModuleValue.type === 'script' && 'path' in flowModuleValue && flowModuleValue.path}
 					<IconedPath path={flowModuleValue.path} hash={flowModuleValue.hash} class="grow" />
@@ -142,14 +144,16 @@ $effect.pre(() => {
 							/>
 						</div>
 					{/if}
-					<input
-						bind:value={summary}
-						placeholder={isAgentTool ? 'Tool name' : 'Summary'}
-						class={twMerge(
-							'w-full grow',
-							isAgentTool && !validateToolName(summary ?? '') && '!border-red-400'
-						)}
-					/>
+					<div class="flex flex-col w-full grow">
+						<input
+							bind:value={summary}
+							placeholder={isAgentTool ? 'Tool name' : 'Summary'}
+							class={twMerge('w-full grow', toolNameError && '!border-red-400')}
+						/>
+						{#if toolNameError}
+							<p class="text-3xs text-red-400 leading-tight mt-0.5">{toolNameError}</p>
+						{/if}
+					</div>
 				{:else if flowModuleValue.type === 'flow'}
 					<Badge color="indigo" capitalize>flow</Badge>
 					<input bind:value={summary} placeholder="Summary" class="w-full grow" />

package/package/components/flows/common/FlowCardHeader.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     children?: import('svelte').Snippet;
     action?: import('svelte').Snippet;
     isAgentTool?: boolean;
+    siblingToolNames?: 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> & {

package/package/components/flows/content/AgentToolWrapper.svelte

@@ -2,7 +2,7 @@
 import FlowModuleComponent from './FlowModuleComponent.svelte';
 import McpToolEditor from './McpToolEditor.svelte';
 import WebsearchToolDisplay from './WebsearchToolDisplay.svelte';
-let { tool = $bindable(), noEditor = false, enableAi = false, parentModule = undefined, previousModule = undefined, forceTestTab, highlightArg } = $props();
+let { tool = $bindable(), noEditor = false, enableAi = false, parentModule = undefined, previousModule = undefined, forceTestTab, highlightArg, siblingToolNames = undefined } = $props();
 </script>
 
 {#if isFlowModuleTool(tool)}
@@ -21,6 +21,7 @@ let { tool = $bindable(), noEditor = false, enableAi = false, parentModule = und
 		forceTestTab={forceTestTab?.[tool.id]}
 		highlightArg={highlightArg?.[tool.id]}
 		isAgentTool={true}
+		{siblingToolNames}
 	/>
 {:else if isMcpTool(tool)}
 	<!-- MCP tool - use McpToolEditor -->

package/package/components/flows/content/AgentToolWrapper.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     previousModule?: FlowModule | undefined;
     forceTestTab?: Record<string, boolean>;
     highlightArg?: Record<string, string | undefined>;
+    siblingToolNames?: string[];
 }
 declare const AgentToolWrapper: import("svelte").Component<Props, {}, "tool">;
 type AgentToolWrapper = ReturnType<typeof AgentToolWrapper>;

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -42,6 +42,7 @@ let canMoveSelected = $derived(resolvedModuleIds.length > 0 &&
 		onDeleteSelected={() => flowModuleSchemaMap?.deleteMultiple(resolvedModuleIds)}
 		onDuplicateSelected={() => flowModuleSchemaMap?.duplicateMultiple(resolvedModuleIds)}
 		onMoveSelected={() => flowModuleSchemaMap?.moveMultiple(resolvedModuleIds)}
+		onCreateGroup={() => flowModuleSchemaMap?.createGroup(selectionManager.selectedIds)}
 		{canMoveSelected}
 		resolvedCount={resolvedModuleIds.length}
 	/>

package/package/components/flows/content/FlowInputs.svelte

@@ -251,7 +251,7 @@ let customUi = getContext('customUi');
 			{/each}
 		</div>
 
-		{#if !failureModule && !preprocessorModule}
+		{#if !failureModule && !preprocessorModule && customUi?.aiSandbox != false}
 			<h3 class="pb-2 pt-4">AI Sandbox</h3>
 			<div class="flex flex-row flex-wrap gap-2">
 				<FlowScriptPicker

package/package/components/flows/content/FlowInputsQuick.svelte

@@ -402,7 +402,7 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 			{/await}
 			<div class="pb-1"></div>
 		{/if}
-		{#if selectedKind === 'script' && preFilter === 'all' && !selected}
+		{#if selectedKind === 'script' && preFilter === 'all' && !selected && customUi?.aiSandbox != false}
 			<div class="pb-0 text-2xs font-normal text-secondary ml-2">AI Sandbox</div>
 			<FlowScriptPickerQuick
 				eeRestricted={false}