windmill-components 1.665.1 → 1.677.1

package/package/components/custom_ui.d.ts

@@ -46,6 +46,8 @@ export type FlowBuilderWhitelabelCustomUi = {
     tagLabel?: string;
     aiAgent?: boolean;
     aiSandbox?: boolean;
+    suggestIntegration?: boolean;
+    suggestScript?: boolean;
 };
 export type DisplayResultUi = {
     disableAiFix?: boolean;

package/package/components/details/DetailPageHeader.svelte

@@ -7,7 +7,7 @@ import { createEventDispatcher, getContext, tick } from 'svelte';
 import SummaryPathDisplay from '../SummaryPathDisplay.svelte';
 import { Calendar } from 'lucide-svelte';
 const { triggersCount, triggersState } = $state(getContext('TriggerContext'));
-let { mainButtons = [], menuItems = [], summary, path, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), onSaved, children, trigger_badges } = $props();
+let { mainButtons = [], menuItems = [], summary, path, tag, errorHandlerKind, scriptOrFlowPath, errorHandlerMuted = $bindable(), labels = $bindable(), onSaved, children, trigger_badges } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
@@ -18,7 +18,7 @@ const dispatch = createEventDispatcher();
 		>
 			<div class="grow px-2 inline-flex items-center gap-4 min-w-0">
 				<div class={twMerge('min-w-0', $userStore?.operator ? 'pl-10' : '')}>
-					<SummaryPathDisplay {summary} {path} {onSaved} kind={errorHandlerKind} />
+					<SummaryPathDisplay {summary} {path} bind:labels {onSaved} kind={errorHandlerKind} />
 				</div>
 				{#if tag}
 					<Badge>tag: {tag}</Badge>

package/package/components/details/DetailPageHeader.svelte.d.ts

@@ -19,6 +19,7 @@ interface Props {
     errorHandlerKind: 'flow' | 'script';
     scriptOrFlowPath: string;
     errorHandlerMuted: boolean | undefined;
+    labels?: string[] | undefined;
     onSaved?: (newPath: string) => void;
     children?: import('svelte').Snippet;
     trigger_badges?: import('svelte').Snippet;
@@ -40,6 +41,6 @@ declare const DetailPageHeader: $$__sveltets_2_IsomorphicComponent<Props, {
     seeTriggers: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "errorHandlerMuted">;
+}, {}, {}, "labels" | "errorHandlerMuted">;
 type DetailPageHeader = InstanceType<typeof DetailPageHeader>;
 export default DetailPageHeader;

package/package/components/flows/agentToolUtils.d.ts

@@ -51,6 +51,11 @@ export declare function createMcpTool(id: string): McpTool;
  * Create a Websearch tool
  */
 export declare function createWebsearchTool(id: string): WebsearchTool;
+/**
+ * Remove an AI agent tool by id, recursively traversing nested modules and nested AI agents.
+ * Returns true when a matching tool was found and removed.
+ */
+export declare function removeAgentToolByIdDeep(modules: FlowModule[], id: string, onRemove?: (tool: AgentTool) => void): boolean;
 /**
  * Convert a FlowModuleTool to a FlowModule for use with loadFlowModuleState etc.
  * Strips the extra `tool_type` field and maps AgentTool fields to FlowModule fields.

package/package/components/flows/agentToolUtils.js

@@ -78,6 +78,55 @@ export function createWebsearchTool(id) {
         }
     };
 }
+/**
+ * Remove an AI agent tool by id, recursively traversing nested modules and nested AI agents.
+ * Returns true when a matching tool was found and removed.
+ */
+export function removeAgentToolByIdDeep(modules, id, onRemove) {
+    for (const module of modules) {
+        if (module.value.type === 'forloopflow' || module.value.type === 'whileloopflow') {
+            if (removeAgentToolByIdDeep(module.value.modules, id, onRemove)) {
+                return true;
+            }
+            continue;
+        }
+        if (module.value.type === 'branchall') {
+            for (const branch of module.value.branches) {
+                if (removeAgentToolByIdDeep(branch.modules, id, onRemove)) {
+                    return true;
+                }
+            }
+            continue;
+        }
+        if (module.value.type === 'branchone') {
+            if (removeAgentToolByIdDeep(module.value.default, id, onRemove)) {
+                return true;
+            }
+            for (const branch of module.value.branches) {
+                if (removeAgentToolByIdDeep(branch.modules, id, onRemove)) {
+                    return true;
+                }
+            }
+            continue;
+        }
+        if (module.value.type !== 'aiagent') {
+            continue;
+        }
+        const toolIndex = module.value.tools.findIndex((tool) => tool.id === id);
+        if (toolIndex !== -1) {
+            const [removed] = module.value.tools.splice(toolIndex, 1);
+            onRemove?.(removed);
+            return true;
+        }
+        const nestedToolModules = module.value.tools
+            .filter(isFlowModuleTool)
+            .map((tool) => agentToolToFlowModule(tool));
+        if (removeAgentToolByIdDeep(nestedToolModules, id, onRemove)) {
+            return true;
+        }
+    }
+    return false;
+}
 /**
  * Convert a FlowModuleTool to a FlowModule for use with loadFlowModuleState etc.
  * Strips the extra `tool_type` field and maps AgentTool fields to FlowModule fields.

package/package/components/flows/agentToolUtils.test.d.ts

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

package/package/components/flows/agentToolUtils.test.js

@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest';
+vi.mock('../aiProviderStorage', () => ({
+    loadStoredConfig: () => undefined
+}));
+vi.mock('./flowInfers', () => ({
+    AI_AGENT_SCHEMA: { properties: {} }
+}));
+import { removeAgentToolByIdDeep } from './agentToolUtils';
+function makeRawModule(id) {
+    return {
+        id,
+        summary: id,
+        value: { type: 'rawscript', content: '', language: 'python3' }
+    };
+}
+function makeAiAgent(id, tools) {
+    return {
+        id,
+        summary: id,
+        value: {
+            type: 'aiagent',
+            tools,
+            input_transforms: {}
+        }
+    };
+}
+function makeFlowModuleTool(module) {
+    return {
+        id: module.id,
+        summary: module.summary,
+        value: {
+            tool_type: 'flowmodule',
+            ...module.value
+        }
+    };
+}
+describe('removeAgentToolByIdDeep', () => {
+    it('removes a direct tool from an ai agent', () => {
+        const tool = makeFlowModuleTool(makeRawModule('lookup_user'));
+        const agent = makeAiAgent('agent', [tool]);
+        const removed = [];
+        expect(removeAgentToolByIdDeep([agent], 'lookup_user', (x) => removed.push(x.id))).toBe(true);
+        expect(agent.value.tools).toEqual([]);
+        expect(removed).toEqual(['lookup_user']);
+    });
+    it('removes a nested tool from a nested ai agent tool', () => {
+        const nestedTool = makeFlowModuleTool(makeRawModule('create_ticket'));
+        const nestedAgent = makeAiAgent('support_agent', [nestedTool]);
+        const rootAgent = makeAiAgent('root_agent', [makeFlowModuleTool(nestedAgent)]);
+        const removed = [];
+        expect(removeAgentToolByIdDeep([rootAgent], 'create_ticket', (x) => removed.push(x.id))).toBe(true);
+        expect(rootAgent.value.tools[0].value.tools).toEqual([]);
+        expect(removed).toEqual(['create_ticket']);
+    });
+});

package/package/components/flows/content/FlowInput.svelte

@@ -568,6 +568,7 @@ function enableChatMode() {
 								bind:schema={flowStore.val.schema}
 								hiddenArgs={['user_message']}
 								isFlowInput
+								showSensitiveToggle
 								editTab={chatInputsEditTab ? 'inputEditor' : undefined}
 								showDynOpt
 								bind:dynCode
@@ -623,6 +624,7 @@ function enableChatMode() {
 						bind:this={editableSchemaForm}
 						bind:schema={flowStore.val.schema}
 						isFlowInput
+						showSensitiveToggle
 						on:delete={(e) => {
 							addPropertyV2?.handleDeleteArgument([e.detail])
 						}}

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

@@ -219,7 +219,7 @@ let aiLength = $derived(funcDesc?.length > 0 && !disableAi && selectedKind != 'f
 						bind:selectedFilter={selected}
 						resourceType
 					/>
-					{#if !selected}
+					{#if !selected && customUi?.suggestIntegration != false}
 						<div class="pl-2 py-1">
 							<a
 								href={`${$hubBaseUrlStore}?suggest_integration=true`}

package/package/components/flows/content/FlowLoop.svelte

@@ -25,7 +25,6 @@ import { emptySchema } from '../../../utils';
 import { slide } from 'svelte/transition';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
-import Badge from '../../common/badge/Badge.svelte';
 const { previewArgs, flowStateStore, flowStore, currentEditor } = getContext('FlowEditorContext');
 let { mod = $bindable(), parentModule, previousModule, noEditor, enableAi = false } = $props();
 let editor = $state(undefined);
@@ -143,17 +142,11 @@ let suggestion = $state(undefined);
 					<div class="flex-shrink-0">
 						<div class="mb-2 text-sm font-bold"
 							>Squash
-
-							<Badge
-								>Beta <Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
-									<span class="font-semibold"
-										>This can result in unexpected behavior, use at your own risk for now.</span
-									><br />
-									Squashing a for loop runs all iterations on the same worker, using a single runner
-									per step for the entire loop. This eliminates cold starts between iterations for supported
-									languages (Bun, Deno, and Python).
-								</Tooltip>
-							</Badge>
+							<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
+								Squashing a for loop runs all iterations on the same worker, using a single runner
+								per step for the entire loop. This eliminates cold starts between iterations for
+								supported languages (Bun, Deno, and Python).
+							</Tooltip>
 						</div>
 						<Toggle
 							bind:checked={mod.value.squash}

package/package/components/flows/content/FlowModuleScript.svelte

@@ -52,9 +52,11 @@ function toggleShowAll() {
 async function loadCode(path, hash) {
     try {
         notFound = false;
-        const script = hash
-            ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash })
-            : await getScriptByPath(path);
+        const script = path.startsWith('hub/')
+            ? await getScriptByPath(path)
+            : hash
+                ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash })
+                : await getScriptByPath(path);
         code = script.content;
         language = script.language;
         lock = script.lock;

package/package/components/flows/content/FlowPathViewer.svelte

@@ -6,7 +6,7 @@ import { FlowService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
-let { path, noSide = false } = $props();
+let { path, noSide = false, fillAvailableHeight = false } = $props();
 let flow = $state(undefined);
 const triggersCount = writable(undefined);
 setContext('TriggerContext', {
@@ -26,7 +26,7 @@ run(() => {
 
 <div class="flex flex-col flex-1 h-full overflow-auto">
 	{#if flow}
-		<FlowGraphViewer triggerNode={true} {noSide} {flow} />
+		<FlowGraphViewer triggerNode={true} {noSide} {flow} {fillAvailableHeight} />
 	{:else}
 		<Skeleton layout={[[40]]} />
 	{/if}

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

@@ -1,6 +1,7 @@
 interface Props {
     path: string;
     noSide?: boolean;
+    fillAvailableHeight?: boolean;
 }
 declare const FlowPathViewer: import("svelte").Component<Props, {}, "">;
 type FlowPathViewer = ReturnType<typeof FlowPathViewer>;

package/package/components/flows/content/FlowSettings.svelte

@@ -16,6 +16,7 @@ import ErrorHandlerToggleButtonV2 from '../../details/ErrorHandlerToggleButtonV2
 import WorkerTagPicker from '../../WorkerTagPicker.svelte';
 import MetadataGen from '../../copilot/MetadataGen.svelte';
 import Badge from '../../Badge.svelte';
+import LabelsInput from '../../LabelsInput.svelte';
 import AIFormSettings from '../../copilot/AIFormSettings.svelte';
 import { twMerge } from 'tailwind-merge';
 import { inputBaseClass, inputBorderClass } from '../../text_input/TextInput.svelte';
@@ -95,6 +96,7 @@ let numberOfAdvancedOptionsOn = $derived(activeAdvancedOptionNames.length);
 						}}
 					/>
 				</Label>
+				<LabelsInput bind:labels={(flowStore.val as any).labels} class="-mt-4" />
 
 				{#if !noEditor}
 					<Label label="Path">

package/package/components/flows/content/FlowWhileLoop.svelte

@@ -16,7 +16,6 @@ import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
 import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
-import Badge from '../../common/badge/Badge.svelte';
 const { flowStateStore } = getContext('FlowEditorContext');
 let { mod = $bindable(), previousModule, parentModule, noEditor } = $props();
 let selected = $state('early-stop');
@@ -90,17 +89,11 @@ useUiIntent(`whileloopflow-${mod.id}`, {
 					<div class="flex-shrink-0">
 						<div class="mb-2 text-sm font-bold"
 							>Squash
-
-							<Badge
-								>Beta <Tooltip documentationLink="https://www.windmill.dev/docs/flows/while_loops">
-									<span class="font-semibold"
-										>This can result in unexpected behavior, use at your own risk for now.</span
-									><br />
-									Squashing a for loop runs all iterations on the same worker, using a single runner
-									per step for the entire loop. This eliminates cold starts between iterations for supported
-									languages (Bun, Deno, and Python).
-								</Tooltip>
-							</Badge>
+							<Tooltip documentationLink="https://www.windmill.dev/docs/flows/while_loops">
+								Squashing a while loop runs all iterations on the same worker, using a single runner
+								per step for the entire loop. This eliminates cold starts between iterations for
+								supported languages (Bun, Deno, and Python).
+							</Tooltip>
 						</div>
 						<Toggle
 							bind:checked={mod.value.squash}

package/package/components/flows/flowInfers.js

@@ -130,9 +130,9 @@ export const AI_AGENT_SCHEMA = {
             format: 'json-schema',
             showExpr: "fields.output_type === 'text'"
         },
-        user_images: {
+        user_attachments: {
             type: 'array',
-            description: 'Array of images to give as input to the AI agent. Requires a configured workspace S3 storage.',
+            description: 'Array of files (images or PDFs) to give as input to the AI agent. Requires a configured workspace S3 storage.',
             items: {
                 type: 'object',
                 resourceType: 's3object'
@@ -163,13 +163,18 @@ export const AI_AGENT_SCHEMA = {
         'streaming',
         'memory',
         'output_schema',
-        'user_images',
+        'user_attachments',
         'max_completion_tokens',
         'temperature',
         'max_iterations'
     ]
 };
 function migrateAiAgentInputTransforms(inputTransforms) {
+    // Migrate user_images → user_attachments
+    if ('user_images' in inputTransforms && !('user_attachments' in inputTransforms)) {
+        inputTransforms.user_attachments = inputTransforms.user_images;
+        delete inputTransforms.user_images;
+    }
     // Check if this has the legacy format
     if ('messages_context_length' in inputTransforms && !('memory' in inputTransforms)) {
         const legacyValue = inputTransforms.messages_context_length;

package/package/components/flows/flowStore.svelte.d.ts

@@ -65,7 +65,7 @@ export declare function getFirstStepSchema(flowState: FlowState, flow: OpenFlow)
         id: string;
         summary: string | undefined;
         value: {
-            language?: "deno" | "bun" | "python3" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "php" | "rust" | "ansible" | "csharp" | "nu" | "java" | "ruby" | "duckdb" | undefined;
+            language?: "deno" | "bun" | "python3" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "oracledb" | "graphql" | "nativets" | "php" | "rust" | "ansible" | "csharp" | "nu" | "java" | "ruby" | "rlang" | "duckdb" | undefined;
             path?: string | undefined;
             type: "rawscript" | "script" | "flow" | "forloopflow" | "whileloopflow" | "branchone" | "branchall" | "aiagent" | "identity";
         };

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -21,7 +21,7 @@ import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import FlowStickyNode from './FlowStickyNode.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import { ModulesTestStates } from '../../modulesTest.svelte';
-import { flowModuleToAgentTool, createMcpTool, createWebsearchTool, createAiAgentTool, SPECIAL_TOOL_KINDS, agentToolToFlowModule } from '../agentToolUtils';
+import { flowModuleToAgentTool, createMcpTool, createWebsearchTool, createAiAgentTool, SPECIAL_TOOL_KINDS, agentToolToFlowModule, removeAgentToolByIdDeep } from '../agentToolUtils';
 import { loadFlowModuleState } from '../flowStateUtils.svelte';
 import { getNoteEditorContext } from '../../graph/noteEditor.svelte';
 import { GroupedModulesProxy } from '../../graph/groupedModulesProxy.svelte';
@@ -148,7 +148,7 @@ export async function insertNewModuleAtIndex(modules, index, kind, wsScript, wsF
  * Tools are always leaf nodes, so we just need to delete their state directly
  */
 function removeAgentToolById(tools, id) {
-    const index = tools.findIndex((tool) => tool.id == id);
+    const index = tools.findIndex((tool) => tool.id === id);
     if (index != -1) {
         const [removed] = tools.splice(index, 1);
         deleteFlowStateById(removed.id, flowStateStore);
@@ -257,6 +257,16 @@ function toggleNoteMode() {
     noteMode = !noteMode;
 }
 export function deleteMultiple(ids) {
+    const structureIds = [];
+    const toolIds = [];
+    for (const id of ids) {
+        if (findInStructure(proxy.items, id)) {
+            structureIds.push(id);
+        }
+        else {
+            toolIds.push(id);
+        }
+    }
     const deletingSet = new Set(ids);
     const allDeps = {};
     for (const id of ids) {
@@ -268,17 +278,28 @@ export function deleteMultiple(ids) {
         }
     }
     const opts = { displayState: groupDisplayState };
-    const { emptiedGroups, duplicateGroups, commit } = proxy.prepareMutation((tree) => {
-        for (const id of ids) {
-            const found = findInStructure(tree, id);
-            if (found)
-                found.parentChildren.splice(found.index, 1);
-        }
-    }, opts);
+    const { emptiedGroups, duplicateGroups, commit } = structureIds.length > 0
+        ? proxy.prepareMutation((tree) => {
+            for (const id of structureIds) {
+                const found = findInStructure(tree, id);
+                if (found)
+                    found.parentChildren.splice(found.index, 1);
+            }
+        }, opts)
+        : {
+            emptiedGroups: [],
+            duplicateGroups: [],
+            commit: () => { }
+        };
     const affectedGroups = [...emptiedGroups, ...duplicateGroups];
     const cb = () => {
         push(history, flowStore.val);
         commit({ removeDuplicates: duplicateGroups.length > 0 });
+        for (const id of toolIds) {
+            removeAgentToolByIdDeep(flowStore.val.value.modules, id, (removed) => {
+                deleteFlowStateById(removed.id, flowStateStore);
+            });
+        }
         for (const id of ids) {
             delete flowStateStore.val[id];
         }
@@ -531,6 +552,25 @@ $effect(() => {
 					return
 				}
 
+				if (!findInStructure(proxy.items, id)) {
+					const cb = () => {
+						push(history, flowStore.val)
+						selectNextId(id)
+						const removed = removeAgentToolByIdDeep(flowStore.val.value.modules, id, (tool) => {
+							deleteFlowStateById(tool.id, flowStateStore)
+						})
+						if (!removed) return
+						refreshStateStore(flowStore)
+						onDelete?.(id)
+					}
+					if (Object.keys(dependents).length > 0) {
+						deleteCallback = cb
+					} else {
+						cb()
+					}
+					return
+				}
+
 				const dsOpts = { displayState: groupDisplayState }
 				const { emptiedGroups, duplicateGroups, commit } = proxy.prepareMutation((tree) => {
 					const found = findInStructure(tree, id)

package/package/components/flows/pickers/PickHubScriptQuick.svelte

@@ -19,7 +19,7 @@ let listHubScriptsCached = createCache(async ({ filter, kind, appFilter }) => {
 });
 </script>
 
-<script lang="ts">import { createEventDispatcher, untrack } from 'svelte';
+<script lang="ts">import { createEventDispatcher, getContext, untrack } from 'svelte';
 import { Skeleton } from '../../common';
 import { classNames, createCache, sendUserToast } from '../../../utils';
 import { APP_TO_ICON_COMPONENT } from '../../icons';
@@ -31,6 +31,7 @@ import { disableHubStore, hubBaseUrlStore, userStore } from '../../../stores';
 import { get } from 'svelte/store';
 import Button from '../../common/button/Button.svelte';
 import { Alert } from '../../common';
+let customUi = getContext('customUi');
 let hubNotAvailable = $state(false);
 const dispatch = createEventDispatcher();
 let { kind = 'script', filter = $bindable(''), loading = $bindable(false), selected = undefined, appFilter = undefined, items = $bindable([]), displayPath = false, apps = $bindable([]), refreshCount = 0 } = $props();
@@ -118,7 +119,8 @@ $effect(() => {
 {:else if hubNotAvailable}
 	<div class="px-3 py-2 mt-2">
 		<Alert type="warning" title="Hub not available" size="xs">
-			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>.
+			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>
 	</div>
 {:else if loading}
@@ -180,7 +182,7 @@ $effect(() => {
 		<div class="text-2xs text-tercary font-extralight text-center py-2 px-3 items-center">
 			There are more items than being displayed. Refine your search.
 		</div>
-	{:else}
+	{:else if customUi?.suggestScript != false}
 		<div class="px-2 py-1">
 			<a
 				href={`${$hubBaseUrlStore}?suggest_script=true`}

package/package/components/flows/scheduleUtils.js

@@ -144,7 +144,8 @@ export async function saveScheduleFromCfg(scheduleCfg, edit, workspace) {
         cron_version: scheduleCfg.cron_version,
         dynamic_skip: scheduleCfg.dynamic_skip,
         permissioned_as: scheduleCfg.permissioned_as,
-        preserve_permissioned_as: scheduleCfg.preserve_permissioned_as
+        preserve_permissioned_as: scheduleCfg.preserve_permissioned_as,
+        labels: scheduleCfg.labels
     };
     try {
         if (edit) {

package/package/components/graph/FlowGraphV2.svelte

@@ -416,6 +416,18 @@ async function updateStores() {
         ...(assetNodesResult?.newAssetNodes ?? []),
         ...aiToolNodesResult.toolNodes
     ];
+    // Collect module IDs hidden inside collapsed groups so note cleanup preserves them
+    const collapsedModuleIds = new Set();
+    for (const n of finalNodes) {
+        if (n.type === 'collapsedGroup') {
+            const modules = n.data?.modules;
+            if (modules) {
+                for (const m of modules) {
+                    collapsedModuleIds.add(m.id);
+                }
+            }
+        }
+    }
     // Compute note nodes (no position remapping)
     let noteNodesResult = showNotes
         ? computeNoteNodes(finalNodes.map((n) => ({
@@ -427,7 +439,7 @@ async function updateStores() {
         })), notes ?? [], noteTextHeights, (noteId, height) => {
             noteTextHeights[noteId] = height;
             noteManager.render();
-        }, editMode, noteEditorContext)
+        }, editMode, noteEditorContext, collapsedModuleIds.size > 0 ? collapsedModuleIds : undefined)
         : undefined;
     // update nodes
     nodes = [...finalNodes, ...(noteNodesResult?.noteNodes ?? [])];

package/package/components/graph/WacDiagram.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">import { SvelteFlow, SvelteFlowProvider, Controls } from '@xyflow/svelte';
+import { parseWacDag } from '../../infer';
+import { dagToXyflow } from './wacDagLayout';
+import WacStepNode from './renderers/nodes/WacStepNode.svelte';
+import WacControlNode from './renderers/nodes/WacControlNode.svelte';
+import WacEdge from './renderers/edges/WacEdge.svelte';
+import { AlertTriangle, Workflow } from 'lucide-svelte';
+let { code, language } = $props();
+let nodes = $state.raw([]);
+let edges = $state.raw([]);
+let errors = $state([]);
+let empty = $state(true);
+let debounceTimer;
+$effect(() => {
+    const _code = code;
+    const _lang = language;
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(async () => {
+        const result = await parseWacDag(_code, _lang);
+        if (result === null) {
+            nodes = [];
+            edges = [];
+            errors = [];
+            empty = true;
+        }
+        else if ('errors' in result) {
+            nodes = [];
+            edges = [];
+            errors = result.errors;
+            empty = false;
+        }
+        else {
+            const dag = result;
+            const layout = dagToXyflow(dag);
+            nodes = layout.nodes;
+            edges = layout.edges;
+            errors = [];
+            empty = dag.nodes.length === 0;
+        }
+    }, 300);
+    return () => clearTimeout(debounceTimer);
+});
+const nodeTypes = {
+    wacStep: WacStepNode,
+    wacControl: WacControlNode
+};
+const edgeTypes = {
+    wacEdge: WacEdge
+};
+const proOptions = { hideAttribution: true };
+</script>
+
+<div class="w-full h-full">
+	{#if errors.length > 0}
+		<div class="p-4 flex flex-col gap-2">
+			{#each errors as error (error.line)}
+				<div class="flex items-start gap-2 text-xs text-red-500">
+					<AlertTriangle size={14} class="shrink-0 mt-0.5" />
+					<span>
+						{#if error.line > 0}
+							<span class="font-mono">L{error.line}:</span>
+						{/if}
+						{error.message}
+					</span>
+				</div>
+			{/each}
+		</div>
+	{:else if empty}
+		<div class="p-4 flex flex-col items-center justify-center h-full text-tertiary text-xs gap-2">
+			<Workflow size={24} />
+			<span>No workflow diagram</span>
+		</div>
+	{:else}
+		<SvelteFlowProvider>
+			<SvelteFlow
+				{nodes}
+				{edges}
+				{nodeTypes}
+				{edgeTypes}
+				fitView
+				fitViewOptions={{ padding: 0.2 }}
+				nodesDraggable={false}
+				elementsSelectable={false}
+				panOnDrag={true}
+				zoomOnScroll={true}
+				zoomOnPinch={true}
+				zoomOnDoubleClick={false}
+				preventScrolling={true}
+				{proOptions}
+				style="background: transparent;"
+			>
+				<Controls position="top-right" orientation="horizontal" showLock={false} />
+			</SvelteFlow>
+		</SvelteFlowProvider>
+	{/if}
+</div>

package/package/components/graph/WacDiagram.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    code: string;
+    language: string;
+}
+declare const WacDiagram: import("svelte").Component<Props, {}, "">;
+type WacDiagram = ReturnType<typeof WacDiagram>;
+export default WacDiagram;

package/package/components/graph/noteEditor.svelte.d.ts

@@ -78,7 +78,7 @@ export declare class NoteEditor {
     cleanupGroupNotes(flowNodes: {
         id: string;
         parentIds?: string[];
-    }[]): void;
+    }[], collapsedModuleIds?: Set<string>): void;
 }
 /**
  * Context type for NoteEditor