windmill-components 1.558.4 → 1.596.0

package/package/components/tutorials/{app/AppTutorial.svelte.d.ts → FlowBuilderLiveTutorial.svelte.d.ts}

@@ -1,3 +1,6 @@
+interface Props {
+    index: number;
+}
 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,17 +14,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AppTutorial: $$__sveltets_2_IsomorphicComponent<{
-    name: string;
-    index: number;
-    runTutorial?: () => void;
-}, {
+declare const FlowBuilderLiveTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     error: CustomEvent<any>;
     skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     runTutorial: () => void;
-}, string>;
-type AppTutorial = InstanceType<typeof AppTutorial>;
-export default AppTutorial;
+}, "">;
+type FlowBuilderLiveTutorial = InstanceType<typeof FlowBuilderLiveTutorial>;
+export default FlowBuilderLiveTutorial;

package/package/components/tutorials/SkipTutorials.svelte

@@ -7,9 +7,8 @@ const dispatch = createEventDispatcher();
 <div class="flex flex-row gap-2 justify-end w-full pt-6 pb-2">
 	<Button
 		size="xs"
-		color="light"
 		startIcon={{ icon: CheckCircle }}
-		variant="border"
+		variant="default"
 		btnClasses="font-normal"
 		on:click={() => {
 			dispatch('skipThis')
@@ -19,10 +18,9 @@ const dispatch = createEventDispatcher();
 	</Button>
 	<Button
 		size="xs"
-		color="light"
 		startIcon={{ icon: CheckCircle }}
 		btnClasses="font-normal"
-		variant="border"
+		variant="default"
 		on:click={() => {
 			dispatch('skipAll')
 		}}

package/package/components/tutorials/TroubleshootFlowTutorial.svelte

@@ -0,0 +1,410 @@
+<script lang="ts">import { getContext } from 'svelte';
+import Tutorial from './Tutorial.svelte';
+import { initFlow } from '../flows/flowStore.svelte';
+import { wait } from '../../utils';
+import { sendUserToast } from '../../toast';
+import { updateProgress } from '../../tutorialUtils';
+let { index } = $props();
+const { flowStore, flowStateStore } = getContext('FlowEditorContext');
+let tutorial = undefined;
+// Flags to track if steps are complete
+let stepComplete = $state({
+    1: false,
+    2: false,
+    3: false,
+    4: false,
+    5: false,
+    6: false,
+    7: false
+});
+// Constants for delays
+const DELAY_SHORT = 100;
+const DELAY_MEDIUM = 300;
+const DELAY_LONG = 500;
+// Constants for cursor animation
+const CURSOR_START_OFFSET = -100;
+const CURSOR_CLICK_SCALE = 0.8;
+// DOM Selectors
+const SELECTORS = {
+    testFlowButton: '#flow-editor-test-flow',
+    testFlowDrawer: '#flow-editor-test-flow-drawer',
+    flowPreviewContent: '#flow-preview-content',
+    stepB: '#b'
+};
+// Text constants
+const TEXT = {
+    convertToFahrenheit: 'Convert to Fahrenheit'
+};
+// Helper function to check if step is complete
+function checkStepComplete(step) {
+    if (!stepComplete[step]) {
+        sendUserToast('Please wait...', false, [], undefined, 3000);
+        return false;
+    }
+    return true;
+}
+// Helper function to create and animate a fake cursor
+async function createFakeCursor(startElement, endElement, transitionDuration = 1.5) {
+    const fakeCursor = document.createElement('div');
+    fakeCursor.style.cssText = `
+			position: fixed;
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			background-color: rgba(59, 130, 246, 0.8);
+			border: 2px solid white;
+			pointer-events: none;
+			z-index: 10000;
+			transition: all ${transitionDuration}s ease-in-out;
+		`;
+    document.body.appendChild(fakeCursor);
+    const endRect = endElement.getBoundingClientRect();
+    let startX, startY;
+    if (startElement) {
+        const startRect = startElement.getBoundingClientRect();
+        startX = startRect.left + startRect.width / 2;
+        startY = startRect.top + startRect.height / 2;
+    }
+    else {
+        startX = endRect.left + CURSOR_START_OFFSET;
+        startY = endRect.top + endRect.height / 2;
+    }
+    fakeCursor.style.left = `${startX}px`;
+    fakeCursor.style.top = `${startY}px`;
+    await wait(DELAY_SHORT);
+    fakeCursor.style.left = `${endRect.left + endRect.width / 2}px`;
+    fakeCursor.style.top = `${endRect.top + endRect.height / 2}px`;
+    await wait(transitionDuration * 1000);
+    return fakeCursor;
+}
+// Helper function to get element by selector (handles both querySelector and getElementById)
+function getElementBySelector(selector) {
+    // If selector starts with #, try getElementById first, then fallback to querySelector
+    if (selector.startsWith('#')) {
+        const id = selector.slice(1);
+        return document.getElementById(id) || document.querySelector(selector);
+    }
+    return document.querySelector(selector);
+}
+// Helper function to animate a fake cursor click
+async function animateFakeCursorClick(element, transitionDuration = 1.5, options) {
+    const fakeCursor = await createFakeCursor(null, element, transitionDuration);
+    await wait(DELAY_MEDIUM);
+    // Animate click (shrink cursor briefly)
+    fakeCursor.style.transform = `scale(${CURSOR_CLICK_SCALE})`;
+    await wait(DELAY_SHORT);
+    fakeCursor.style.transform = 'scale(1)';
+    await wait(DELAY_SHORT);
+    // Trigger pointer events if needed (flow graph uses pointer events instead of click)
+    if (options?.usePointerEvents) {
+        element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+        element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
+    }
+    // Click the element
+    element.click();
+    await wait(DELAY_SHORT);
+    // Remove fake cursor
+    fakeCursor.remove();
+}
+// Helper function to find close button in drawer
+function findCloseButton(drawer) {
+    return Array.from(drawer.querySelectorAll('button')).find(btn => {
+        const svg = btn.querySelector('svg.lucide-x');
+        return svg !== null;
+    });
+}
+// Helper function to find button by text
+function findButtonByText(container, text) {
+    const buttons = Array.from(container.querySelectorAll('button'));
+    return buttons.find(btn => btn.textContent?.includes(text));
+}
+export async function runTutorial() {
+    // Load the pre-built flow immediately when tutorial starts
+    await initFlow(preBuiltFlow, flowStore, flowStateStore);
+    await wait(DELAY_MEDIUM);
+    // Set the celsius input to 25
+    await wait(DELAY_SHORT);
+    const celsiusInput = document.querySelector('input[type="number"]');
+    if (celsiusInput) {
+        celsiusInput.value = '25';
+        celsiusInput.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    tutorial?.runTutorial();
+}
+// Pre-built flow - same as the flow builder tutorial result
+const preBuiltFlow = {
+    summary: 'Temperature Converter',
+    description: 'Convert Celsius to Fahrenheit and categorize the temperature',
+    value: {
+        modules: [
+            {
+                id: 'a',
+                value: {
+                    type: 'rawscript',
+                    content: 'export async function main(celsius: number) {\n  // Validate that the temperature is within a reasonable range\n  if (celsius < -273.15) {\n    throw new Error("Temperature cannot be below absolute zero (-273.15°C)");\n  }\n  \n  if (celsius > 1000) {\n    throw new Error("Temperature seems unreasonably high. Please check your input.");\n  }\n  \n  return {\n    celsius: celsius,\n    isValid: true,\n    message: "Temperature is valid"\n  };\n}',
+                    language: 'bun',
+                    input_transforms: {
+                        celsius: {
+                            expr: 'flow_input.celsius',
+                            type: 'javascript'
+                        }
+                    }
+                },
+                summary: 'Validate temperature input'
+            },
+            {
+                id: 'b',
+                value: {
+                    type: 'rawscript',
+                    content: 'export async function main(celsius: number) {\n  // Convert Celsius to Fahrenheit using the formula: F = (C × 9/5) + 32\n  const fahrenheit = (celsius * 9/5) + 32;\n  \n  return {\n    celsius: celsiu,\n    fahrenheit: Math.round(fahrenheit * 100) / 100 // Round to 2 decimal places\n  };\n}',
+                    language: 'bun',
+                    input_transforms: {
+                        celsius: {
+                            expr: 'results.a.celsius',
+                            type: 'javascript'
+                        }
+                    }
+                },
+                summary: 'Convert to Fahrenheit'
+            },
+            {
+                id: 'c',
+                value: {
+                    type: 'rawscript',
+                    content: 'export async function main(celsius: number, fahrenheit: number) {\n  // Categorize the temperature based on Celsius value\n  let category: string;\n  let emoji: string;\n  \n  if (celsius < 0) {\n    category = "Freezing";\n    emoji = "❄️";\n  } else if (celsius < 10) {\n    category = "Cold";\n    emoji = "🥶";\n  } else if (celsius < 20) {\n    category = "Cool";\n    emoji = "😊";\n  } else if (celsius < 30) {\n    category = "Warm";\n    emoji = "☀️";\n  } else {\n    category = "Hot";\n    emoji = "🔥";\n  }\n  \n  return {\n    celsius: celsius,\n    fahrenheit: fahrenheit,\n    category: category,\n    emoji: emoji\n  };\n}',
+                    language: 'bun',
+                    input_transforms: {
+                        celsius: {
+                            expr: 'results.b.celsius',
+                            type: 'javascript'
+                        },
+                        fahrenheit: {
+                            expr: 'results.b.fahrenheit',
+                            type: 'javascript'
+                        }
+                    }
+                },
+                summary: 'Categorize temperature'
+            }
+        ]
+    },
+    schema: {
+        $schema: 'https://json-schema.org/draft/2020-12/schema',
+        type: 'object',
+        properties: {
+            celsius: {
+                type: 'number',
+                description: 'Temperature in Celsius',
+                default: 25
+            }
+        },
+        required: ['celsius'],
+        order: ['celsius']
+    },
+    path: '',
+    edited_at: '',
+    edited_by: '',
+    archived: false,
+    extra_perms: {}
+};
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	index={index}
+	name="troubleshoot-flow"
+	tainted={false}
+	on:error
+	on:skipAll
+	getSteps={(driver) => {
+		const steps: DriveStep[] = [
+			{
+				popover: {
+					title: '🛠️ Troubleshoot a broken flow',
+					description:
+						'We created a flow that is a temperature converter that validates input and converts Celsius to Fahrenheit. For this tutorial, our flow is intentionally broken.',
+					onNextClick: () => {
+						driver.moveNext()
+					}
+				}
+			},
+			{
+				element: SELECTORS.testFlowButton,
+				onHighlighted: async () => {
+					stepComplete[1] = false
+					await wait(DELAY_SHORT)
+					stepComplete[1] = true
+				},
+				popover: {
+					title: 'Test our flow',
+					description:
+						'Let\'s run it so you can see what needs to be fixed.',
+					side: 'bottom',
+					onNextClick: async () => {
+						if (!checkStepComplete(1)) return
+
+						// Click the Test Flow button to open the drawer
+						const testFlowButton = document.querySelector(SELECTORS.testFlowButton) as HTMLElement
+						if (testFlowButton) {
+							testFlowButton.click()
+							await wait(DELAY_LONG)
+						}
+
+						driver.moveNext()
+					}
+				}
+			},
+			{
+				element: SELECTORS.testFlowDrawer,
+				onHighlighted: async () => {
+					stepComplete[2] = false
+					await wait(DELAY_SHORT)
+					stepComplete[2] = true
+				},
+				popover: {
+					title: 'Run the flow',
+					description:
+						'Click "Next" to execute the flow. We\'ll use the results to troubleshoot the error.',
+					side: 'left',
+					onNextClick: async () => {
+						if (!checkStepComplete(2)) return
+
+						// Click the Test button to execute the flow
+						const testButton = document.querySelector(SELECTORS.testFlowDrawer) as HTMLElement
+						if (testButton) {
+							testButton.click()
+						}
+
+						await wait(DELAY_LONG)
+						driver.moveNext()
+					}
+				}
+			},
+			{
+				element: '.border.rounded-md.shadow.p-2',
+				onHighlighted: async () => {
+					stepComplete[3] = false
+					await wait(DELAY_SHORT)
+					stepComplete[3] = true
+				},
+				popover: {
+					title: 'Review the error',
+					description:
+						'Our flow failed. Let\'s review the error and understand what happened.',
+					side: 'left',
+					onNextClick: () => {
+						if (!checkStepComplete(3)) return
+						driver.moveNext()
+					}
+				}
+			},
+			{
+				element: '.border-b.flex.flex-row.whitespace-nowrap.scrollbar-hidden.mx-auto',
+				onHighlighted: async () => {
+					stepComplete[4] = false
+					await wait(DELAY_SHORT)
+					stepComplete[4] = true
+				},
+				popover: {
+					title: 'Explore the tabs',
+					description:
+						'Use these tabs to navigate between different views: Result, Logs, and Graph. We\'ll focus on the Graph tab to review the error.',
+					side: 'bottom',
+					onNextClick: () => {
+						if (!checkStepComplete(4)) return
+						driver.moveNext()
+					}
+				}
+			},
+			{
+				element: '.grid.grid-cols-3.border.h-full',
+				onHighlighted: async () => {
+					stepComplete[5] = false
+					await wait(DELAY_SHORT)
+
+					// Find the step 'b' button inside the drawer and click it with fake cursor
+					const flowPreviewContent = getElementBySelector(SELECTORS.flowPreviewContent)
+					if (flowPreviewContent) {
+						const stepButton = findButtonByText(flowPreviewContent, TEXT.convertToFahrenheit)
+
+						if (stepButton) {
+							await animateFakeCursorClick(stepButton, 1.5, { usePointerEvents: true })
+							await wait(DELAY_MEDIUM)
+						}
+					}
+
+					stepComplete[5] = true
+				},
+				popover: {
+					title: 'Inspect the flow graph',
+					description:
+						'B step failed during the run. Let\'s take a closer look at its behavior.',
+					side: 'top',
+					onNextClick: () => {
+						if (!checkStepComplete(5)) return
+						driver.moveNext()
+					}
+				}
+			},
+			{
+				element: '.rounded-md.grow.bg-surface-tertiary.text-xs.flex.flex-col.max-h-screen.gap-2.overflow-hidden.border',
+				onHighlighted: async () => {
+					stepComplete[6] = false
+					await wait(DELAY_SHORT)
+					stepComplete[6] = true
+				},
+				popover: {
+					title: 'Error spotted!',
+					description:
+						'We made a typo in the code. Let\'s fix it and run the flow again.',
+					side: 'left',
+					onNextClick: async () => {
+						if (!checkStepComplete(6)) return
+
+						// Click the close button inside the drawer
+						const drawer = getElementBySelector(SELECTORS.flowPreviewContent)
+						if (drawer) {
+							const closeButton = findCloseButton(drawer)
+
+							if (closeButton) {
+								await animateFakeCursorClick(closeButton, 1.5)
+							}
+						}
+
+						await wait(DELAY_LONG)
+						driver.moveNext()
+					}
+				}
+			},
+			{
+				element: SELECTORS.stepB,
+				onHighlighted: async () => {
+					stepComplete[7] = false
+					await wait(DELAY_SHORT)
+
+					// Click on div id="b" to open the editor
+					const stepBDiv = getElementBySelector(SELECTORS.stepB)
+					if (stepBDiv) {
+						await animateFakeCursorClick(stepBDiv, 1.5)
+						await wait(DELAY_LONG)
+					}
+
+					stepComplete[7] = true
+				},
+				popover: {
+					title: 'Your turn now!',
+					description:
+						'Fix the issue in the code, and run the flow again to confirm everything works.<p style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,0.3); font-size: 0.9em; opacity: 0.9;"><strong>💡 Want to learn more?</strong> Access more tutorials from the <strong>Tutorials</strong> page in the main menu or in the <strong>Help</strong> submenu.</p>',
+					side: 'top',
+					onNextClick: () => {
+						if (!checkStepComplete(7)) return
+						updateProgress(index)
+						driver.destroy()
+					}
+				}
+			}
+		]
+
+		return steps
+	}}
+/>

package/package/components/tutorials/{FlowBuilderTutorialErrorHandler.svelte.d.ts → TroubleshootFlowTutorial.svelte.d.ts}

@@ -1,3 +1,6 @@
+interface Props {
+    index: number;
+}
 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,15 +14,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const FlowBuilderTutorialErrorHandler: $$__sveltets_2_IsomorphicComponent<{
-    runTutorial?: () => void;
-}, {
+declare const TroubleshootFlowTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
     error: CustomEvent<any>;
     skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    runTutorial: () => void;
-}, string>;
-type FlowBuilderTutorialErrorHandler = InstanceType<typeof FlowBuilderTutorialErrorHandler>;
-export default FlowBuilderTutorialErrorHandler;
+    runTutorial: () => Promise<void>;
+}, "">;
+type TroubleshootFlowTutorial = InstanceType<typeof TroubleshootFlowTutorial>;
+export default TroubleshootFlowTutorial;

package/package/components/tutorials/TutorialControls.svelte

@@ -33,7 +33,7 @@ const dispatch = createEventDispatcher();
 			</Button>
 			<Button
 				size="xs2"
-				color="dark"
+				variant="accent"
 				endIcon={{ icon: ArrowRight }}
 				on:click={() => {
 					dispatch('next')

package/package/components/tutorials/TutorialProgressBar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">"use strict";
+let { completed, total, label = 'tutorials' } = $props();
+const progressPercentage = $derived(total > 0 ? Math.round((completed / total) * 100) : 0);
+</script>
+
+<div class="flex-1 min-w-0">
+	<div class="flex items-center justify-between mb-2 gap-2">
+		<div class="text-xs font-semibold text-emphasis whitespace-nowrap">
+			Progress: {completed} of {total} {label} completed
+		</div>
+		<div class="text-xs font-normal text-secondary flex-shrink-0">{progressPercentage}%</div>
+	</div>
+	<div class="w-full h-2 bg-surface-secondary rounded-full overflow-hidden">
+		<div
+			class="h-full bg-surface-accent-primary transition-all duration-300 ease-out rounded-full"
+			style="width: {progressPercentage}%"
+		></div>
+	</div>
+</div>
+

package/package/components/tutorials/TutorialProgressBar.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    completed: number;
+    total: number;
+    label?: string;
+}
+declare const TutorialProgressBar: import("svelte").Component<Props, {}, "">;
+type TutorialProgressBar = ReturnType<typeof TutorialProgressBar>;
+export default TutorialProgressBar;

package/package/components/tutorials/TutorialRouter.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">import { skipAllTodos } from '../../tutorialUtils';
+import TutorialWrapper from './TutorialWrapper.svelte';
+let { tutorials } = $props();
+// Map tutorial IDs to their component instances
+const tutorialInstances = new Map();
+function skipAll() {
+    skipAllTodos();
+}
+// Helper function to register a tutorial instance
+function registerInstance(id, instance) {
+    tutorialInstances.set(id, instance);
+}
+// Export function to run tutorial by ID
+export function runTutorialById(id, options) {
+    const instance = tutorialInstances.get(id);
+    if (!instance) {
+        console.warn(`Tutorial instance not found for id: ${id}`);
+        return;
+    }
+    // Check if this tutorial supports skipStepsCount
+    const tutorial = tutorials.find((t) => t.id === id);
+    if (tutorial?.supportsSkipSteps && options?.skipStepsCount !== undefined) {
+        // Type assertion needed because TypeScript can't narrow the union type
+        ;
+        instance.runTutorial(options.skipStepsCount);
+    }
+    else {
+        // Call runTutorial without parameters
+        if ('runTutorial' in instance && typeof instance.runTutorial === 'function') {
+            instance.runTutorial();
+        }
+    }
+}
+</script>
+
+{#each tutorials as tutorial}
+	<TutorialWrapper
+		id={tutorial.id}
+		component={tutorial.component}
+		name={tutorial.name}
+		onInstanceReady={registerInstance}
+		onSkipAll={skipAll}
+	/>
+{/each}
+

package/package/components/tutorials/TutorialRouter.svelte.d.ts

@@ -0,0 +1,16 @@
+interface TutorialDefinition {
+    id: string;
+    component: any;
+    name?: string;
+    supportsSkipSteps?: boolean;
+}
+interface Props {
+    tutorials: TutorialDefinition[];
+}
+declare const TutorialRouter: import("svelte").Component<Props, {
+    runTutorialById: (id: string, options?: {
+        skipStepsCount?: number;
+    }) => void;
+}, "">;
+type TutorialRouter = ReturnType<typeof TutorialRouter>;
+export default TutorialRouter;

package/package/components/tutorials/TutorialWrapper.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { getTutorialIndex } from '../../tutorials/config';
+let { id, component: Component, name, onInstanceReady, onSkipAll } = $props();
+let instance = $state(undefined);
+const index = getTutorialIndex(id);
+$effect(() => {
+    if (instance) {
+        onInstanceReady(id, instance);
+    }
+});
+</script>
+
+{#if Component}
+	{@const Comp = Component}
+	<Comp
+		bind:this={instance}
+		{index}
+		{...(name ? { name } : {})}
+		on:error
+		on:skipAll={onSkipAll}
+		on:reload
+	/>
+{/if}
+

package/package/components/tutorials/TutorialWrapper.svelte.d.ts

@@ -0,0 +1,28 @@
+interface Props {
+    id: string;
+    component: any;
+    name?: string;
+    onInstanceReady: (id: string, instance: any) => void;
+    onSkipAll: () => void;
+}
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TutorialWrapper: $$__sveltets_2_IsomorphicComponent<Props, {
+    error: any;
+    reload: any;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type TutorialWrapper = InstanceType<typeof TutorialWrapper>;
+export default TutorialWrapper;

package/package/components/tutorials/utils.js

@@ -1,5 +1,7 @@
 import { deepEqual } from 'fast-equals';
-import { emptyApp, findGridItem } from '../apps/editor/appUtils';
+import { emptyApp } from '../apps/editor/appUtils';
+import { findGridItem } from '../apps/editor/appUtilsCore';
+import { isRunnableByName } from '../apps/inputType';
 export function setInputBySelector(selector, value) {
     const input = document.querySelector(selector);
     if (input) {
@@ -70,23 +72,21 @@ export function updateFlowModuleById(flow, id, callback) {
             else if (module.value.type === 'branchall') {
                 module.value.branches.forEach((branch) => dfs(branch.modules));
             }
-            else if (module.value.type === 'aiagent') {
-                dfs(module.value.tools);
-            }
+            // AI agent tools are leaf nodes - no traversal needed
         }
     };
     dfs(flow.value.modules);
 }
 export function updateBackgroundRunnableCode(app, index, newCode) {
     const script = app.hiddenInlineScripts[index];
-    if (script.type === 'runnableByName' && script.inlineScript) {
+    if (isRunnableByName(script) && script.inlineScript) {
         script.inlineScript.content = newCode;
     }
 }
 export function updateInlineRunnableCode(app, componentId, newCode) {
     const gridItem = findGridItem(app, componentId);
     if (gridItem?.data.componentInput?.type === 'runnable') {
-        if (gridItem.data.componentInput.runnable?.type === 'runnableByName' &&
+        if (isRunnableByName(gridItem.data.componentInput.runnable) &&
             gridItem.data.componentInput.runnable.inlineScript) {
             gridItem.data.componentInput.runnable.inlineScript.content = newCode;
         }