windmill-components 1.558.4 → 1.596.0

package/package/components/FlowStatusViewerInner.svelte

@@ -26,9 +26,10 @@ import FlowPreviewResult from './FlowPreviewResult.svelte';
 import FlowLogViewerWrapper from './FlowLogViewerWrapper.svelte';
 import { createState } from '../svelte5Utils.svelte';
 import JobLoader from './JobLoader.svelte';
-import { writable } from 'svelte/store';
-import { AI_TOOL_CALL_PREFIX, AI_TOOL_MESSAGE_PREFIX, getToolCallId } from './graph/renderers/nodes/AIToolNode.svelte';
+import { AI_TOOL_CALL_PREFIX, AI_TOOL_MESSAGE_PREFIX, AI_MCP_TOOL_CALL_PREFIX, AI_WEBSEARCH_PREFIX, getToolCallId } from './graph/renderers/nodes/AIToolNode.svelte';
 import JobAssetsViewer from './assets/JobAssetsViewer.svelte';
+import McpToolCallDetails from './McpToolCallDetails.svelte';
+import { SelectionManager } from './graph/selectionUtils.svelte';
 let { flowState: flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
 let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined, toolCallStore } = $props();
 let getTopModuleStates = $derived(topModuleStates ?? localModuleStates);
@@ -75,7 +76,7 @@ let jobResults = $state(flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} no
 let retry_selected = $state('');
 let timeout = undefined;
 let expandedSubflows = $state({});
-let selectedId = writable(selectedNode);
+let selectionManager = new SelectionManager();
 function onFlowModuleId() {
     let modId = flowJobIds?.moduleId;
     if (modId) {
@@ -308,7 +309,12 @@ function updateInnerModules() {
     if (localModuleStates) {
         innerModules?.forEach((mod, i) => {
             if (mod.type === 'WaitingForEvents' && innerModules?.[i - 1]?.type === 'Success') {
-                setModuleState(mod.id ?? '', { type: mod.type, args: job?.args, tag: job?.tag });
+                setModuleState(mod.id ?? '', {
+                    type: mod.type,
+                    args: job?.args,
+                    tag: job?.tag,
+                    script_hash: job?.script_hash
+                });
             }
             else if (mod.type === 'WaitingForExecutor' &&
                 localModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
@@ -325,7 +331,8 @@ function updateInnerModules() {
                         job_id: job?.id,
                         parent_module: mod['parent_module'],
                         args: job?.args,
-                        tag: job?.tag
+                        tag: job?.tag,
+                        script_hash: job?.script_hash
                     };
                     setModuleState(mod.id ?? '', newState);
                 })
@@ -355,7 +362,7 @@ function updateInnerModules() {
                     flow_jobs_success: mod.flow_jobs_success,
                     flow_jobs_duration: mod.flow_jobs_duration,
                     flow_jobs: mod.flow_jobs,
-                    iteration_total: mod.iterator?.itered?.length ?? mod.flow_jobs?.length
+                    iteration_total: mod.iterator?.itered_len ?? mod.flow_jobs?.length
                 });
             }
             if (mod.flow_jobs_duration && mod.flow_jobs) {
@@ -465,6 +472,19 @@ function updateInnerModules() {
                                 type: success != undefined ? (success ? 'Success' : 'Failure') : 'InProgress'
                             });
                         }
+                        else if (action.type == 'mcp_tool_call') {
+                            const mcpToolCallId = AI_MCP_TOOL_CALL_PREFIX + '-' + mod.id + '-' + idx;
+                            const success = mod.agent_actions_success?.[idx];
+                            setModuleState(mcpToolCallId, {
+                                type: success != undefined ? (success ? 'Success' : 'Failure') : 'InProgress'
+                            });
+                        }
+                        else if (action.type == 'web_search') {
+                            const websearchId = AI_WEBSEARCH_PREFIX + '-' + mod.id + '-' + idx;
+                            setModuleState(websearchId, {
+                                type: 'Success'
+                            });
+                        }
                         else if (action.type == 'message') {
                             const toolCallId = getToolCallId(idx, mod.id);
                             setModuleState(toolCallId, {
@@ -576,7 +596,7 @@ async function updateJobId() {
         await loadJobInProgress();
     }
 }
-let forloop_selected = $state(getTopModuleStates?.[buildSubflowKey(flowJobIds?.moduleId ?? '', prefix)]?.selectedForloop);
+let forloop_selected = $derived(getTopModuleStates?.[buildSubflowKey(flowJobIds?.moduleId ?? '', prefix)]?.selectedForloop);
 onDestroy(() => {
     destroyed = true;
     timeout && clearTimeout(timeout);
@@ -613,7 +633,8 @@ function onJobsLoadedInner(mod, job, force) {
                 args: job.args,
                 tag: job.tag,
                 started_at,
-                parent_module: mod['parent_module']
+                parent_module: mod['parent_module'],
+                script_hash: job.script_hash
             }, force);
             setDurationStatusByJob(id, job.id, {
                 created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
@@ -637,10 +658,11 @@ function onJobsLoadedInner(mod, job, force) {
                 flow_jobs: mod.flow_jobs,
                 flow_jobs_success: mod.flow_jobs_success,
                 flow_jobs_duration: mod.flow_jobs_duration,
-                iteration_total: mod.iterator?.itered?.length,
+                iteration_total: mod.iterator?.itered_len,
                 retries: mod?.failed_retries?.length,
                 skipped: mod.skipped,
-                agent_actions: mod.agent_actions
+                agent_actions: mod.agent_actions,
+                script_hash: job.script_hash
                 // retries: flowStateStore?.raw_flow
             }, force);
             setDurationStatusByJob(id, job.id, {
@@ -961,15 +983,17 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 		{#if render}
 			{#if innerModules && innerModules.length > 0 && !isListJob}
 				<Tabs class="mx-auto {wideResults ? '' : 'max-w-7xl'}" bind:selected>
-					<Tab value="graph"><span class="font-semibold text-md">Graph</span></Tab>
+					<Tab value="graph" label="Graph" />
 					<Tab
 						value="logs"
 						class={animateLogsTab
 							? 'animate-pulse animate-duration-1000 bg-surface-inverse text-primary-inverse'
-							: ''}><span class="font-semibold">Logs</span></Tab
-					>
-					<Tab value="sequence"><span class="font-semibold">Details</span></Tab>
-					<Tab value="assets"><span class="font-semibold">Assets</span></Tab>
+							: ''}
+						label="Logs"
+					/>
+
+					<Tab value="sequence" label="Details" />
+					<Tab value="assets" label="Assets" />
 				</Tabs>
 			{:else}
 				<div class="h-[30px]"></div>
@@ -981,13 +1005,13 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 			style="min-height: {minTabHeight}px"
 		>
 			{#if isListJob}
-				<h3 class="text-md leading-6 font-bold text-tertiary border-b mb-4">
+				<h3 class="text-md leading-6 font-bold text-primary border-b mb-4">
 					Subflows ({flowJobIds?.flowJobs.length})
 				</h3>
 				<div class="overflow-auto max-h-1/2">
 					{#each flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
 						{#if render && j + subflowsSize + 1 == (flowJobIds?.flowJobs.length ?? 0)}
-							<Button variant="border" color="light" on:click={() => (subflowsSize += 500)}
+							<Button variant="default" on:click={() => (subflowsSize += 500)}
 								>Load 500 more...</Button
 							>
 						{/if}
@@ -1094,7 +1118,7 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 					{#each modules as mod, i}
 						{#if render}
 							<div class="line w-8 h-10"></div>
-							<h3 class="text-tertiary mb-2 w-full">
+							<h3 class="text-primary mb-2 w-full">
 								{#if mod.id === 'preprocessor'}
 									Preprocessor module
 								{:else if job?.raw_flow?.modules && i < job?.raw_flow?.modules.length + hasPreprocessor}
@@ -1221,7 +1245,7 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 													flowJobs: mod.flow_jobs,
 													flowJobsSuccess: mod.flow_jobs_success ?? [],
 													flowJobsDuration: mod.flow_jobs_duration,
-													length: mod.iterator?.itered?.length ?? mod.flow_jobs.length,
+													length: mod.iterator?.itered_len ?? mod.flow_jobs.length,
 													branchall: job?.raw_flow?.modules?.[i]?.value?.type == 'branchall'
 												}
 											: undefined}
@@ -1321,7 +1345,7 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 					{/each}
 				</ul>
 			{:else}
-				<div class="p-2 text-tertiary text-sm italic">Empty flow</div>
+				<div class="p-2 text-primary text-sm italic">Empty flow</div>
 			{/if}
 		</div>
 		{#if selected == 'logs' && render}
@@ -1375,7 +1399,7 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 							{/each}
 						</div>
 						<FlowGraphV2
-							{selectedId}
+							{selectionManager}
 							triggerNode={true}
 							download={!hideDownloadInGraph}
 							minHeight={wrapperHeight}
@@ -1418,6 +1442,7 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 							earlyStop={job.raw_flow?.skip_expr !== undefined}
 							cache={job.raw_flow?.cache_ttl !== undefined}
 							modules={job.raw_flow?.modules ?? []}
+							notes={job.raw_flow?.notes ?? []}
 							failureModule={job.raw_flow?.failure_module}
 							preprocessorModule={job.raw_flow?.preprocessor_module}
 							allowSimplifiedPoll={false}
@@ -1429,15 +1454,14 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 					>
 						<Tabs bind:selected={rightColumnSelect}>
 							{#if !hideTimeline}
-								<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+								<Tab value="timeline" label="Timeline" />
 							{/if}
-							<Tab value="node_status"><span class="font-semibold">Node status</span></Tab>
+							<Tab value="node_status" label="Node status" />
 							{#if !hideNodeDefinition}
-								<Tab value="node_definition"><span class="font-semibold">Node definition</span></Tab
-								>
+								<Tab value="node_definition" label="Node definition" />
 							{/if}
 							{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
-								<Tab value="user_states"><span class="font-semibold">User States</span></Tab>
+								<Tab value="user_states" label="User States" />
 							{/if}
 						</Tabs>
 						{#if rightColumnSelect == 'timeline'}
@@ -1456,11 +1480,36 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 								durationStatuses={localDurationStatuses}
 							/>
 						{:else if rightColumnSelect == 'node_status'}
-							<div class="pt-2 grow flex flex-col">
+							<div class="p-2 grow flex flex-col gap-6">
 								{#if selectedNode?.startsWith(AI_TOOL_MESSAGE_PREFIX)}
 									<div class="pt-2 px-4 pb-4">
 										<Alert type="info" title="Message output is available on the AI agent node" />
 									</div>
+								{:else if selectedNode?.startsWith(AI_MCP_TOOL_CALL_PREFIX)}
+									{@const [, agentModuleId, toolCallIndex] = selectedNode.split('-')}
+									{@const agentNode = localModuleStates?.[agentModuleId]}
+									{@const agentActions = agentNode?.agent_actions}
+									{@const mcpActionIndex = parseInt(toolCallIndex)}
+									{@const mcpAction =
+										agentActions && mcpActionIndex >= 0 && mcpActionIndex < agentActions.length
+											? agentActions[mcpActionIndex]
+											: undefined}
+									{#if mcpAction?.type === 'mcp_tool_call' && agentNode?.result?.messages}
+										{@const message = agentNode.result.messages.find(
+											(m) => m.agent_action?.call_id === mcpAction.call_id
+										)}
+										<McpToolCallDetails
+											functionName={mcpAction.function_name}
+											args={mcpAction.arguments ?? {}}
+											result={message?.content}
+											type="Success"
+											workspaceId={job?.workspace_id}
+										/>
+									{/if}
+								{:else if selectedNode?.startsWith(AI_WEBSEARCH_PREFIX)}
+									<div class="p-2">
+										<Alert type="info" title="Web search output is available on the AI agent node" />
+									</div>
 								{:else if selectedNode}
 									{@const node = localModuleStates[selectedNode]}
 									{#if selectedNode == 'end'}
@@ -1496,104 +1545,115 @@ let minTabHeight = $derived(Math.max(tabsHeight.sequenceHeight, tabsHeight.logsH
 											module && module.value.type === 'aiagent' ? module.value.tools : undefined}
 										{@const parentLoopsPrefix = getParentLoopsPrefix(module?.id ?? '')}
 										{#if node.flow_jobs_results}
-											<span class="pl-1 text-tertiary"
-												>Result of step as collection of all subflows</span
-											>
-											<div class="overflow-auto max-h-[200px] p-2">
-												<DisplayResult
-													workspaceId={job?.workspace_id}
-													result={node.flow_jobs_results}
-													nodeId={selectedNode}
-													jobId={job?.id}
-													language={job?.language}
-												/>
+											<div>
+												<span class="pl-1 text-emphasis text-xs font-medium"
+													>Result of step as collection of all subflows</span
+												>
+												<div class="overflow-auto max-h-[200px] p-2">
+													<DisplayResult
+														workspaceId={job?.workspace_id}
+														result={node.flow_jobs_results}
+														nodeId={selectedNode}
+														jobId={job?.id}
+														language={job?.language}
+													/>
+												</div>
 											</div>
-											<span class="pl-1 text-tertiary text-lg pt-4">Selected subflow</span>
 										{/if}
-										<div class="px-2 flex gap-2 min-w-0 w-full">
-											<ModuleStatus
-												type={node.type}
-												scheduled_for={node.scheduled_for}
-												skipped={node.skipped}
-											/>
-											{#if node.duration_ms}
-												<Badge>
-													<Hourglass class="mr-2" size={10} />
-													{msToSec(node.duration_ms)} s
-												</Badge>
+										<div class="flex flex-col gap-2">
+											{#if node.flow_jobs_results}
+												<span class="pl-1 text-xs font-medium text-emphasis pt-4"
+													>Selected subflow</span
+												>
 											{/if}
-											{#if node.job_id}
-												<div class="grow w-full flex flex-row-reverse">
-													<a
-														class="text-right text-xs"
-														rel="noreferrer"
-														target="_blank"
-														href="{base}/run/{node.job_id ?? ''}?workspace={job?.workspace_id}"
-													>
-														{truncateRev(node.job_id ?? '', 10)}
-													</a>
+											<div class="flex flex-col gap-6">
+												<div class="flex flex-col gap-1">
+													<div class="flex gap-2 min-w-0 w-full items-center">
+														<ModuleStatus
+															type={node.type}
+															scheduled_for={node.scheduled_for}
+															skipped={node.skipped}
+														/>
+														{#if node.duration_ms}
+															<Badge>
+																<Hourglass class="mr-2" size={10} />
+																{msToSec(node.duration_ms)} s
+															</Badge>
+														{/if}
+														{#if node.job_id}
+															<div class="grow w-full flex flex-row-reverse">
+																<a
+																	class="text-right text-xs"
+																	rel="noreferrer"
+																	target="_blank"
+																	href="{base}/run/{node.job_id ??
+																		''}?workspace={job?.workspace_id}"
+																>
+																	{truncateRev(node.job_id ?? '', 10)}
+																</a>
+															</div>
+														{/if}
+													</div>
+													{#if !node.isListJob}
+														<JobArgs
+															id={node.job_id}
+															workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+															args={node.args}
+														/>
+													{/if}
 												</div>
-											{/if}
-										</div>
-										{#if !node.isListJob}
-											<div class="px-1 py-1">
-												<JobArgs
-													id={node.job_id}
-													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
-													args={node.args}
+												<FlowJobResult
+													tagLabel={customUi?.tagLabel}
+													workspaceId={job?.workspace_id}
+													jobId={node.job_id}
+													loading={node.type != 'Success' && node.type != 'Failure'}
+													waitingForExecutor={node.type == 'WaitingForExecutor'}
+													refreshLog={node.type == 'InProgress'}
+													col
+													result_stream={resultStreams[node.job_id ?? '']}
+													result={node.result}
+													tag={node.tag}
+													logs={node.logs}
+													downloadLogs={!hideDownloadLogs}
+													aiAgentStatus={agentTools &&
+													node?.job_id &&
+													(node.type === 'Success' || node.type === 'Failure')
+														? {
+																tools: agentTools,
+																agentJob: {
+																	id: node.job_id,
+																	result: node.result,
+																	logs: node.logs,
+																	args: node.args,
+																	success: node.type === 'Success',
+																	type: 'CompletedJob'
+																},
+																storedToolCallJobs: module
+																	? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
+																	: undefined,
+																onToolJobLoaded: (job, idx) => {
+																	if (module) {
+																		const storeKey = parentLoopsPrefix + module.id + '-' + idx
+																		toolCallStore?.setStoredToolCallJob(storeKey, job)
+																	}
+																}
+															}
+														: undefined}
 												/>
 											</div>
-										{/if}
-										<FlowJobResult
-											tagLabel={customUi?.tagLabel}
-											workspaceId={job?.workspace_id}
-											jobId={node.job_id}
-											noBorder
-											loading={node.type != 'Success' && node.type != 'Failure'}
-											waitingForExecutor={node.type == 'WaitingForExecutor'}
-											refreshLog={node.type == 'InProgress'}
-											col
-											result_stream={resultStreams[node.job_id ?? '']}
-											result={node.result}
-											tag={node.tag}
-											logs={node.logs}
-											downloadLogs={!hideDownloadLogs}
-											aiAgentStatus={agentTools &&
-											node?.job_id &&
-											(node.type === 'Success' || node.type === 'Failure')
-												? {
-														tools: agentTools,
-														agentJob: {
-															id: node.job_id,
-															result: node.result,
-															logs: node.logs,
-															args: node.args,
-															success: node.type === 'Success',
-															type: 'CompletedJob'
-														},
-														storedToolCallJobs: module
-															? toolCallStore?.getLocalToolCallJobs(parentLoopsPrefix)
-															: undefined,
-														onToolJobLoaded: (job, idx) => {
-															if (module) {
-																const storeKey = parentLoopsPrefix + module.id + '-' + idx
-																toolCallStore?.setStoredToolCallJob(storeKey, job)
-															}
-														}
-													}
-												: undefined}
-										/>
+										</div>
 									{:else}
-										<p class="p-2 text-tertiary italic"
+										<p class="p-2 text-primary italic"
 											>The execution of this node has no information attached to it. The job likely
 											did not run yet</p
 										>
 									{/if}
-								{:else}<p class="p-2 text-tertiary italic">Select a node to see its details here</p
+								{:else}<p class="p-2 text-primary italic">Select a node to see its details here</p
 									>{/if}
 							</div>
 						{:else if rightColumnSelect == 'node_definition'}
-							<FlowGraphViewerStep {stepDetail} />
+							{@const node = selectedNode ? localModuleStates[selectedNode] : undefined}
+							<FlowGraphViewerStep {stepDetail} jobScriptHash={node?.script_hash} />
 						{:else if rightColumnSelect == 'user_states'}
 							<div class="p-2">
 								<JobArgs argLabel="Key" args={job?.flow_status?.user_states ?? {}} />

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -7,6 +7,7 @@ import DisplayResult from './DisplayResult.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
 import SchemaForm from './SchemaForm.svelte';
+import { twMerge } from 'tailwind-merge';
 export let isOwner;
 export let workspaceId;
 export let job;
@@ -104,7 +105,7 @@ async function continu(approve) {
 }
 </script>
 
-<div class="w-full h-full mt-2 text-sm text-tertiary">
+<div class="w-full h-full mt-2 text-xs text-primary">
 	{#if !light}
 		<p>Waiting to be resumed</p>
 	{/if}
@@ -113,22 +114,22 @@ async function continu(approve) {
 	{/if}
 	<div>
 		{#if isOwner || resumeUrl}
-			<div class="flex flex-row gap-2 mt-2">
+			<div class={twMerge('flex gap-2 mt-2', light ? 'flex-col' : 'flex-row ')}>
 				{#if cancelUrl && !hide_cancel}
 					<div>
 						<Button
-							color="red"
 							title="Cancel the flow"
 							iconOnly
 							startIcon={{ icon: X }}
-							variant="border"
+							variant="default"
+							destructive
 							on:click={() => continu(false)}
 						/>
 					</div>
 				{/if}
 				<div>
-					<Button color="green" variant="border" on:click={() => continu(true)}
-						>Resume <Tooltip
+					<Button variant="accent" on:click={() => continu(true)}
+						>Resume <Tooltip class="text-white"
 							>Since you are an owner of this flow, you can send resume events without necessarily
 							knowing the resume id sent by the approval step</Tooltip
 						></Button
@@ -136,7 +137,12 @@ async function continu(approve) {
 				</div>
 
 				{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
-					<div class="w-full border rounded-lg p-2">
+					<div
+						class={twMerge(
+							'w-full border rounded-lg p-2',
+							light ? 'min-w-96 max-h-svh overflow-y-auto' : ''
+						)}
+					>
 						<SchemaForm onlyMaskPassword bind:args={default_payload} {defaultValues} {schema} />
 					</div>
 				{/if}

package/package/components/FlowTimelineBar.svelte

@@ -219,7 +219,7 @@ const opacity = $derived(Math.max(0.02, 1 / maximumOverlaps));
 		</div>
 		{#if selectedLen > 0}
 			<span
-				class="text-2xs text-tertiary font-mono font-normal w-10 truncate"
+				class="text-2xs text-primary font-mono font-normal w-10 truncate"
 				title={msToReadableTime(selectedLen, 1)}>{msToReadableTimeShort(selectedLen, 1)}</span
 			>
 		{/if}

package/package/components/FlowTutorials.svelte

@@ -1,63 +1,22 @@
-<script lang="ts">import { skipAllTodos } from '../tutorialUtils';
-import FlowBuilderTutorialBranchAll from './tutorials/FlowBuilderTutorialBranchAll.svelte';
-import FlowBuilderTutorialBranchOne from './tutorials/FlowBuilderTutorialBranchOne.svelte';
-import FlowBuilderTutorialSimpleFlow from './tutorials/FlowBuilderTutorialSimpleFlow.svelte';
-import FlowBuilderTutorialForLoop from './tutorials/FlowBuilderTutorialForLoop.svelte';
-import FlowBuilderTutorialErrorHandler from './tutorials/FlowBuilderTutorialErrorHandler.svelte';
-let flowBuilderTutorialSimpleFlow = $state(undefined);
-let flowBuilderTutorialForLoop = $state(undefined);
-let flowBuilderTutorialBranchOne = $state(undefined);
-let flowBuilderTutorialBranchAll = $state(undefined);
-let flowBuilderTutorialErrorHandler = $state(undefined);
-export function runTutorialById(id, indexToInsertAt) {
-    if (id === 'forloop') {
-        flowBuilderTutorialForLoop?.runTutorial(indexToInsertAt);
-    }
-    else if (id === 'branchone') {
-        flowBuilderTutorialBranchOne?.runTutorial();
-    }
-    else if (id === 'branchall') {
-        flowBuilderTutorialBranchAll?.runTutorial();
-    }
-    else if (id === 'action') {
-        flowBuilderTutorialSimpleFlow?.runTutorial();
-    }
-    else if (id === 'error-handler') {
-        flowBuilderTutorialErrorHandler?.runTutorial();
-    }
-}
-function skipAll() {
-    skipAllTodos();
+<script lang="ts">import TutorialRouter from './tutorials/TutorialRouter.svelte';
+import FlowBuilderLiveTutorial from './tutorials/FlowBuilderLiveTutorial.svelte';
+import TroubleshootFlowTutorial from './tutorials/TroubleshootFlowTutorial.svelte';
+let tutorialRouter = $state(undefined);
+export function runTutorialById(id) {
+    tutorialRouter?.runTutorialById(id);
 }
 </script>
 
-<FlowBuilderTutorialSimpleFlow
-	bind:this={flowBuilderTutorialSimpleFlow}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
-/>
-<FlowBuilderTutorialForLoop
-	bind:this={flowBuilderTutorialForLoop}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
-/>
-<FlowBuilderTutorialBranchOne
-	bind:this={flowBuilderTutorialBranchOne}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
-/>
-<FlowBuilderTutorialBranchAll
-	bind:this={flowBuilderTutorialBranchAll}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
-/>
-<FlowBuilderTutorialErrorHandler
-	bind:this={flowBuilderTutorialErrorHandler}
-	on:error
-	on:skipAll={skipAll}
-	on:reload
-/>
+<TutorialRouter
+	bind:this={tutorialRouter}
+	tutorials={[
+		{
+			id: 'flow-live-tutorial',
+			component: FlowBuilderLiveTutorial
+		},
+		{
+			id: 'troubleshoot-flow',
+			component: TroubleshootFlowTutorial
+		}
+	]}
+/>

package/package/components/FlowTutorials.svelte.d.ts

@@ -1,23 +1,5 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowTutorials: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    error: any;
-    reload: any;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    runTutorialById: (id: string, indexToInsertAt?: number | undefined) => void;
+declare const FlowTutorials: import("svelte").Component<Record<string, never>, {
+    runTutorialById: (id: string) => void;
 }, "">;
-type FlowTutorials = InstanceType<typeof FlowTutorials>;
+type FlowTutorials = ReturnType<typeof FlowTutorials>;
 export default FlowTutorials;

package/package/components/FlowViewer.svelte

@@ -15,10 +15,10 @@ if (initialOpen) {
 
 <Tabs bind:selected={tab}>
 	{#if !noGraph}
-		<Tab value="ui">Graph</Tab>
+		<Tab value="ui" label="Graph" />
 	{/if}
-	<Tab value="raw">Raw</Tab>
-	<Tab value="schema">Input Schema</Tab>
+	<Tab value="raw" label="Raw" />
+	<Tab value="schema" label="Input Schema" />
 
 	{#snippet content()}
 		<TabContent value="ui">