windmill-components 1.522.0 → 1.531.0

package/package/components/details/DetailPageLayout.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">import { Tabs, Tab, TabContent } from '../common';
-import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import DetailPageDetailPanel from './DetailPageDetailPanel.svelte';
 let { isOperator = false, flow_json = undefined, selected = $bindable(), header, form, scriptRender: script, save_inputs, flow_step, triggers } = $props();
@@ -13,9 +12,9 @@ const triggers_render = $derived(triggers);
 
 <main class="h-screen w-full" bind:clientWidth>
 	{#if clientWidth >= 768}
-		<div class="h-full w-full">
+		<div class="h-full w-full flex flex-col">
 			{@render header?.()}
-			<SplitPanesWrapper>
+			<div class="grow min-h-0 w-full">
 				<Splitpanes>
 					<Pane size={65} minSize={50}>
 						{@render form?.()}
@@ -37,41 +36,43 @@ const triggers_render = $derived(triggers);
 						</DetailPageDetailPanel>
 					</Pane>
 				</Splitpanes>
-			</SplitPanesWrapper>
+			</div>
 		</div>
 	{:else}
-		<div class="h-full w-full">
+		<div class="h-full w-full flex flex-col">
 			{@render header?.()}
-			<Tabs bind:selected={mobileTab}>
-				<Tab value="form">Run form</Tab>
-				<Tab value="saved_inputs">Inputs</Tab>
-				{#if !isOperator}
-					<Tab value="triggers">Triggers</Tab>
-				{/if}
-				{#if flow_json}
-					<Tab value="raw">Export</Tab>
-				{:else}
-					<Tab value="script">Script</Tab>
-				{/if}
+			<div class="grow min-h-0 w-full flex flex-col">
+				<Tabs bind:selected={mobileTab} wrapperClass="flex-none">
+					<Tab value="form">Run form</Tab>
+					<Tab value="saved_inputs">Inputs</Tab>
+					{#if !isOperator}
+						<Tab value="triggers">Triggers</Tab>
+					{/if}
+					{#if flow_json}
+						<Tab value="raw">Export</Tab>
+					{:else}
+						<Tab value="script">Script</Tab>
+					{/if}
 
-				{#snippet content()}
-					<div class="h-full">
-						<TabContent value="form" class="flex flex-col flex-1 h-full">
-							{@render form?.()}
-						</TabContent>
+					{#snippet content()}
+						<div class="grow min-h-0">
+							<TabContent value="form" class="flex flex-col flex-1 h-full">
+								{@render form?.()}
+							</TabContent>
 
-						<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
-							{@render save_inputs?.()}
-						</TabContent>
-						<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
-							{@render triggers?.()}
-						</TabContent>
-						<TabContent value="script" class="flex flex-col flex-1 h-full">
-							{@render script?.()}
-						</TabContent>
-					</div>
-				{/snippet}
-			</Tabs>
+							<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
+								{@render save_inputs?.()}
+							</TabContent>
+							<TabContent value="triggers" class="flex flex-col flex-1 h-full mt-[-2px]">
+								{@render triggers?.()}
+							</TabContent>
+							<TabContent value="script" class="flex flex-col flex-1 h-full">
+								{@render script?.()}
+							</TabContent>
+						</div>
+					{/snippet}
+				</Tabs>
+			</div>
 		</div>
 	{/if}
 </main>

package/package/components/flow_builder.d.ts

@@ -1,6 +1,5 @@
 import type { OpenFlow } from '../gen';
 import type { StateStore } from '../utils';
-import type { Writable } from 'svelte/store';
 import type { FlowState } from './flows/flowState';
 import type { FlowWithDraftAndDraftTriggers, Trigger } from './triggers/utils';
 import type { DiffDrawerI } from './diff_drawer';
@@ -15,7 +14,7 @@ export type FlowBuilderProps = {
     initialArgs?: Record<string, any>;
     loading?: boolean;
     flowStore: StateStore<OpenFlow>;
-    flowStateStore: Writable<FlowState>;
+    flowStateStore: StateStore<FlowState>;
     savedFlow?: FlowWithDraftAndDraftTriggers | undefined;
     diffDrawer?: DiffDrawerI | undefined;
     customUi?: FlowBuilderWhitelabelCustomUi;

package/package/components/flows/FlowEditor.svelte

@@ -9,7 +9,7 @@ import FlowAIChat from '../copilot/chat/flow/FlowAIChat.svelte';
 import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
 const { flowStore } = getContext('FlowEditorContext');
-let { loading, disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, disabledFlowInputs = false, smallErrorHandler = false, newFlow = false, savedFlow = undefined, onDeployTrigger = () => { }, onTestUpTo = undefined, onEditInput = undefined, forceTestTab, highlightArg, localModuleStates = writable({}), aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, localDurationStatuses, suspendStatus, showJobStatus, onDelete, flowHasChanged } = $props();
+let { loading, disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, disabledFlowInputs = false, smallErrorHandler = false, showJobStatus = false, newFlow = false, savedFlow = undefined, onDeployTrigger = () => { }, onTestUpTo = undefined, onEditInput = undefined, forceTestTab, highlightArg, localModuleStates = {}, testModuleStates = undefined, aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, suspendStatus, onDelete, flowHasChanged } = $props();
 let flowModuleSchemaMap = $state();
 export function isNodeVisible(nodeId) {
     return flowModuleSchemaMap?.isNodeVisible(nodeId) ?? false;
@@ -52,6 +52,7 @@ onDestroy(() => {
 						{disableSettings}
 						{smallErrorHandler}
 						{newFlow}
+						{showJobStatus}
 						on:reload
 						on:generateStep={({ detail }) => {
 							if (!aiChatManager.open) {
@@ -62,6 +63,7 @@ onDestroy(() => {
 						{onTestUpTo}
 						{onEditInput}
 						{localModuleStates}
+						{testModuleStates}
 						{aiChatOpen}
 						{showFlowAiButton}
 						{toggleAiChat}
@@ -73,7 +75,6 @@ onDestroy(() => {
 						{onHideJobStatus}
 						{individualStepTests}
 						flowJob={job}
-						{showJobStatus}
 						{suspendStatus}
 						{onDelete}
 						{flowHasChanged}
@@ -102,7 +103,6 @@ onDestroy(() => {
 					{onTestFlow}
 					{job}
 					{isOwner}
-					{localDurationStatuses}
 					{suspendStatus}
 					onOpenDetails={onOpenPreview}
 				/>

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

@@ -1,7 +1,8 @@
-import { type Writable } from 'svelte/store';
 import type { Flow, Job } from '../../gen';
 import type { Trigger } from '../triggers/utils';
-import type { DurationStatus, GraphModuleState } from '../graph';
+import type { GraphModuleState } from '../graph';
+import type { ModulesTestStates } from '../modulesTest.svelte';
+import type { StateStore } from '../../utils';
 interface Props {
     loading: boolean;
     disableStaticInputs?: boolean;
@@ -11,6 +12,7 @@ interface Props {
     disabledFlowInputs?: boolean;
     smallErrorHandler?: boolean;
     newFlow?: boolean;
+    showJobStatus?: boolean;
     savedFlow?: (Flow & {
         draft?: Flow | undefined;
     }) | undefined;
@@ -22,7 +24,8 @@ interface Props {
     aiChatOpen?: boolean;
     showFlowAiButton?: boolean;
     toggleAiChat?: () => void;
-    localModuleStates?: Writable<Record<string, GraphModuleState>>;
+    localModuleStates?: Record<string, GraphModuleState>;
+    testModuleStates?: ModulesTestStates;
     isOwner?: boolean;
     onTestFlow?: () => void;
     isRunning?: boolean;
@@ -31,12 +34,10 @@ interface Props {
     onHideJobStatus?: () => void;
     individualStepTests?: boolean;
     job?: Job;
-    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
-    suspendStatus?: Writable<Record<string, {
+    suspendStatus?: StateStore<Record<string, {
         job: Job;
         nb: number;
     }>>;
-    showJobStatus?: boolean;
     onDelete?: (id: string) => void;
     flowHasChanged?: boolean;
 }

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

@@ -1,11 +1,11 @@
 <script lang="ts">import FlowCardHeader from './FlowCardHeader.svelte';
-let { title = undefined, summary = $bindable(undefined), noEditor, noHeader = false, flowModuleValue = undefined, header, children } = $props();
+let { title = undefined, summary = $bindable(undefined), noEditor, noHeader = false, flowModuleValue = undefined, header, children, isAgentTool = false } = $props();
 </script>
 
 <div class="flex flex-col h-full">
 	{#if !noEditor && !noHeader}
 		<div>
-			<FlowCardHeader on:setHash on:reload {title} bind:summary {flowModuleValue}>
+			<FlowCardHeader on:setHash on:reload {title} bind:summary {flowModuleValue} {isAgentTool}>
 				{@render header?.()}
 			</FlowCardHeader>
 		</div>

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

@@ -7,6 +7,7 @@ interface Props {
     flowModuleValue?: FlowModuleValue | undefined;
     header?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
+    isAgentTool?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -11,7 +11,9 @@ import { ScriptService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { Lock, RefreshCw, Unlock } from 'lucide-svelte';
 import { createEventDispatcher, untrack } from 'svelte';
-let { flowModuleValue = undefined, title = undefined, summary = $bindable(undefined), children } = $props();
+import { twMerge } from 'tailwind-merge';
+import { validateToolName } from '../../graph/renderers/nodes/AIToolNode.svelte';
+let { flowModuleValue = undefined, title = undefined, summary = $bindable(undefined), children, isAgentTool = false } = $props();
 let latestHash = $state(undefined);
 function getCachedKey(path) {
     return `${$workspaceStore}-${path}`;
@@ -58,11 +60,11 @@ $effect.pre(() => {
 					</div>
 					<MetadataGen
 						bind:content={summary}
-						promptConfigName="summary"
+						promptConfigName={isAgentTool ? 'agentToolFunctionName' : 'summary'}
 						code={flowModuleValue.content}
 						class="w-full"
 						elementProps={{
-							placeholder: 'Summary'
+							placeholder: isAgentTool ? 'Tool name' : 'Summary'
 						}}
 					/>
 				{:else if flowModuleValue.type === 'script' && 'path' in flowModuleValue && flowModuleValue.path}
@@ -116,7 +118,14 @@ $effect.pre(() => {
 							>
 						</div>
 					{/if}
-					<input bind:value={summary} placeholder="Summary" class="w-full grow" />
+					<input
+						bind:value={summary}
+						placeholder={isAgentTool ? 'Tool name' : 'Summary'}
+						class={twMerge(
+							'w-full grow',
+							isAgentTool && !validateToolName(summary ?? '') && '!border-red-400'
+						)}
+					/>
 				{: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

@@ -4,6 +4,7 @@ interface Props {
     title?: string | undefined;
     summary?: string | undefined;
     children?: import('svelte').Snippet;
+    isAgentTool?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/content/BranchPredicateEditor.svelte

@@ -5,14 +5,11 @@ import { getStepPropPicker } from '../previousResults';
 import Button from '../../common/button/Button.svelte';
 import { Pen } from 'lucide-svelte';
 import PredicateGen from '../../copilot/PredicateGen.svelte';
-export let branch;
-export let parentModule;
-export let previousModule;
-export let enableAi = false;
+let { branch = $bindable(), parentModule, previousModule, enableAi = false } = $props();
 const { previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
-let editor = undefined;
-let open = false;
-$: stepPropPicker = getStepPropPicker($flowStateStore, parentModule, previousModule, parentModule.id, flowStore.val, previewArgs.val, false);
+let editor = $state(undefined);
+let open = $state(false);
+let stepPropPicker = $derived(getStepPropPicker(flowStateStore.val, parentModule, previousModule, parentModule.id, flowStore.val, previewArgs.val, false));
 </script>
 
 {#if open}

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

@@ -1,4 +1,14 @@
 import type { FlowModule } from '../../../gen';
+interface Props {
+    branch: {
+        summary?: string;
+        expr: string;
+        modules: Array<FlowModule>;
+    };
+    parentModule: FlowModule;
+    previousModule: FlowModule | undefined;
+    enableAi?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,19 +22,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const BranchPredicateEditor: $$__sveltets_2_IsomorphicComponent<{
-    branch: {
-        summary?: string;
-        expr: string;
-        modules: Array<FlowModule>;
-    };
-    parentModule: FlowModule;
-    previousModule: FlowModule | undefined;
-    enableAi?: boolean;
-}, {
+declare const BranchPredicateEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     updateSummary: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "branch">;
 type BranchPredicateEditor = InstanceType<typeof BranchPredicateEditor>;
 export default BranchPredicateEditor;

package/package/components/flows/content/FlowConstants.svelte

@@ -16,7 +16,7 @@ let resources = $derived(Object.fromEntries(scriptModules
     m.id,
     Object.entries(v.input_transforms)
         .map((x) => {
-        let schema = flowStateStore[m.id]?.schema;
+        let schema = flowStateStore.val[m.id]?.schema;
         let val = undefined;
         const [k, inputTransform] = x;
         const v = schema?.properties[k];
@@ -41,7 +41,7 @@ let steps = $derived(scriptModules
     Object.entries(v.input_transforms)
         .filter((x) => {
         const shouldDisplay = hideOptional
-            ? $flowStateStore[m.id]?.schema?.required?.includes(x[0])
+            ? flowStateStore.val[m.id]?.schema?.required?.includes(x[0])
             : true;
         return x[1].type == 'static' && shouldDisplay;
     })
@@ -109,7 +109,7 @@ setContext('PropPickerWrapper', {
 							noDynamicToggle
 							{filter}
 							class="mt-2"
-							schema={$flowStateStore[m.id]?.schema ?? {}}
+							schema={flowStateStore.val[m.id]?.schema ?? {}}
 							bind:args={steps[index][0]}
 						/>
 					</div>

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

@@ -10,7 +10,7 @@ import TriggersEditor from '../../triggers/TriggersEditor.svelte';
 import { handleSelectTriggerFromKind } from '../../triggers/utils';
 import { computeMissingInputWarnings } from '../missingInputWarnings';
 import FlowResult from './FlowResult.svelte';
-let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onTestFlow, job, isOwner, localDurationStatuses, suspendStatus, onOpenDetails } = $props();
+let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onTestFlow, job, isOwner, suspendStatus, onOpenDetails } = $props();
 const { selectedId, flowStore, flowStateStore, flowInputsStore, pathStore, initialPathStore, fakeInitialPath, previewArgs, flowInputEditorState } = getContext('FlowEditorContext');
 const { showCaptureHint, triggersState, triggersCount } = getContext('TriggerContext');
 function checkDup(modules) {
@@ -24,7 +24,7 @@ function checkDup(modules) {
     }
 }
 $effect(() => {
-    computeMissingInputWarnings(flowStore, $flowStateStore, flowInputsStore);
+    computeMissingInputWarnings(flowStore, flowStateStore.val, flowInputsStore);
 });
 </script>
 
@@ -43,7 +43,7 @@ $effect(() => {
 		{onTestFlow}
 	/>
 {:else if $selectedId === 'Result'}
-	<FlowResult {noEditor} {job} {isOwner} {localDurationStatuses} {suspendStatus} {onOpenDetails} />
+	<FlowResult {noEditor} {job} {isOwner} {suspendStatus} {onOpenDetails} />
 {:else if $selectedId === 'constants'}
 	<FlowConstants {noEditor} />
 {:else if $selectedId === 'failure'}

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

@@ -1,7 +1,6 @@
 import type { Flow, Job } from '../../../gen';
 import { type Trigger } from '../../triggers/utils';
-import type { Writable } from 'svelte/store';
-import type { DurationStatus } from '../../graph';
+import type { StateStore } from '../../../utils';
 interface Props {
     noEditor?: boolean;
     enableAi?: boolean;
@@ -16,8 +15,7 @@ interface Props {
     onTestFlow?: () => void;
     job?: Job;
     isOwner?: boolean;
-    localDurationStatuses?: Writable<Record<string, DurationStatus>>;
-    suspendStatus?: Writable<Record<string, {
+    suspendStatus?: StateStore<Record<string, {
         job: Job;
         nb: number;
     }>>;

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

@@ -90,7 +90,8 @@ const allToplevelNodes = [
     ['For loop', 'forloop'],
     ['While loop', 'whileloop'],
     ['Branch to one', 'branchone'],
-    ['Branch to all', 'branchall']
+    ['Branch to all', 'branchall'],
+    ['AI Agent', 'aiagent']
 ];
 let topLevelNodes = $state([]);
 function computeToplevelNodeChoices(funcDesc, preFilter) {

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

@@ -26,13 +26,13 @@ let editor = $state(undefined);
 let selected = $state('early-stop');
 const { flowPropPickerConfig } = getContext('PropPickerContext');
 flowPropPickerConfig.set(undefined);
-let stepPropPicker = $derived(getStepPropPicker($flowStateStore, parentModule, previousModule, mod.id, flowStore.val, previewArgs.val, false));
+let stepPropPicker = $derived(getStepPropPicker(flowStateStore.val, parentModule, previousModule, mod.id, flowStore.val, previewArgs.val, false));
 let previewOpen = $state(false);
 let jobId = $state(undefined);
 let job = $state(undefined);
 let iteratorFieldFocused = $state(false);
 let iteratorGen = $state(undefined);
-let previewIterationArgs = $derived($flowStateStore[mod.id]?.previewArgs ?? {});
+let previewIterationArgs = $derived(flowStateStore.val[mod.id]?.previewArgs ?? {});
 function setExpr(code) {
     if (mod.value.type === 'forloopflow') {
         mod.value.iterator = {