windmill-components 1.511.1 → 1.531.0

package/package/components/copilot/lib.js

@@ -7,7 +7,7 @@ import { EDIT_CONFIG, FIX_CONFIG, GEN_CONFIG } from './prompts';
 import { formatResourceTypes } from './utils';
 import { z } from 'zod';
 export const SUPPORTED_LANGUAGES = new Set(Object.keys(GEN_CONFIG.prompts));
-const OPENAI_MODELS = ['gpt-4o', 'gpt-4o-mini', 'o4-mini', 'o3', 'o3-mini'];
+const OPENAI_MODELS = ['gpt-5', 'gpt-5-mini', 'gpt-5-nano', 'gpt-4o', 'gpt-4o-mini', 'o4-mini', 'o3', 'o3-mini'];
 // need at least one model for each provider except customai
 export const AI_DEFAULT_MODELS = {
     openai: OPENAI_MODELS,
@@ -54,8 +54,14 @@ export async function fetchAvailableModels(resourcePath, workspace, provider) {
     }
     return data?.data.map((m) => m.id) ?? [];
 }
-function getModelMaxTokens(model) {
-    if (model.startsWith('gpt-4.1')) {
+function getModelMaxTokens(provider, model) {
+    if (model.startsWith('gpt-5')) {
+        return 128000;
+    }
+    else if ((provider === 'azure_openai' || provider === 'openai') && model.startsWith('o')) {
+        return 100000;
+    }
+    else if (model.startsWith('gpt-4.1')) {
         return 32768;
     }
     else if (model.startsWith('gpt-4o') || model.startsWith('codestral')) {
@@ -70,6 +76,9 @@ export function getModelContextWindow(model) {
     if (model.startsWith('gpt-4.1') || model.startsWith('gemini')) {
         return 1000000;
     }
+    else if (model.startsWith('gpt-5')) {
+        return 400000;
+    }
     else if (model.startsWith('gpt-4o') || model.startsWith('llama-3.3')) {
         return 128000;
     }
@@ -85,11 +94,11 @@ export function getModelContextWindow(model) {
 }
 function getModelSpecificConfig(modelProvider, tools) {
     if ((modelProvider.provider === 'openai' || modelProvider.provider === 'azure_openai') &&
-        modelProvider.model.startsWith('o')) {
+        (modelProvider.model.startsWith('o') || modelProvider.model.startsWith('gpt-5'))) {
         return {
             model: modelProvider.model,
             ...(tools && tools.length > 0 ? { tools } : {}),
-            max_completion_tokens: 100000
+            max_completion_tokens: getModelMaxTokens(modelProvider.provider, modelProvider.model)
         };
     }
     else {
@@ -107,7 +116,7 @@ function getModelSpecificConfig(modelProvider, tools) {
                     temperature: 0
                 }),
             ...(tools && tools.length > 0 ? { tools } : {}),
-            max_tokens: getModelMaxTokens(modelProvider.model)
+            max_tokens: getModelMaxTokens(modelProvider.provider, modelProvider.model)
         };
     }
 }

package/package/components/custom_ui.d.ts

@@ -66,12 +66,15 @@ export type EditorBarUi = {
     multiplayer?: boolean;
     autoformatting?: boolean;
     vimMode?: boolean;
+    relativeLineNumbers?: boolean;
     aiGen?: boolean;
     aiCompletion?: boolean;
     library?: boolean;
     useVsCode?: boolean;
     diffMode?: boolean;
     s3object?: boolean;
+    database?: boolean;
+    ducklake?: boolean;
 };
 export type EditableSchemaFormUi = {
     jsonOnly?: boolean;
@@ -104,6 +107,7 @@ export type ScriptBuilderWhitelabelCustomUi = {
         extraDeployOptions?: boolean;
         editableSummary?: boolean;
         diff?: boolean;
+        tagEdit?: boolean;
     };
     settingsPanel?: SettingsPanelUi;
     disableTooltips?: boolean;

package/package/components/dbOps.d.ts

@@ -1,7 +1,15 @@
 import { type ColumnDef, type DbType } from './apps/components/display/dbtable/utils';
-export type IDbTableOps = {
-    resourcePath: string;
+import type { DBSchema } from '../stores';
+export type DbInput = {
+    type: 'database';
     resourceType: DbType;
+    resourcePath: string;
+} | {
+    type: 'ducklake';
+    ducklake: string;
+};
+export type IDbTableOps = {
+    dbType: DbType;
     tableKey: string;
     colDefs: ColumnDef[];
     getRows: (params: {
@@ -27,9 +35,8 @@ export type IDbTableOps = {
         values: object;
     }) => Promise<void>;
 };
-export declare function dbTableOpsWithPreviewScripts({ resourcePath, resourceType, tableKey, colDefs, workspace }: {
-    resourcePath: string;
-    resourceType: DbType;
+export declare function dbTableOpsWithPreviewScripts({ input, tableKey, colDefs, workspace }: {
+    input: DbInput;
     tableKey: string;
     colDefs: ColumnDef[];
     workspace: string;
@@ -46,8 +53,13 @@ export type DbTableActionFactory = (params: {
     tableKey: string;
     refresh: () => void;
 }) => DbTableAction;
-export declare function dbDeleteTableActionWithPreviewScript({ workspace, resourcePath, resourceType }: {
+export declare function dbDeleteTableActionWithPreviewScript({ workspace, input }: {
     workspace: string;
-    resourcePath: string;
-    resourceType: DbType;
+    input: DbInput;
 }): DbTableActionFactory;
+export declare function getDucklakeSchema({ workspace, ducklake }: {
+    workspace: string;
+    ducklake: string;
+}): Promise<DBSchema>;
+export declare function getDbType(input: DbInput): DbType;
+export declare function wrapDucklakeQuery(query: string, ducklake: string): string;

package/package/components/dbOps.js

@@ -7,36 +7,35 @@ import { makeDeleteQuery } from './apps/components/display/dbtable/queries/delet
 import { makeInsertQuery } from './apps/components/display/dbtable/queries/insert';
 import { Trash2 } from 'lucide-svelte';
 import { makeDeleteTableQuery } from './apps/components/display/dbtable/queries/deleteTable';
-export function dbTableOpsWithPreviewScripts({ resourcePath, resourceType, tableKey, colDefs, workspace }) {
+import { stringifySchema } from './copilot/lib';
+export function dbTableOpsWithPreviewScripts({ input, tableKey, colDefs, workspace }) {
+    const dbType = getDbType(input);
+    const language = getLanguageByResourceType(dbType);
+    const dbArg = input?.type === 'database' ? { database: '$res:' + input.resourcePath } : {};
     return {
-        resourcePath,
-        resourceType,
+        dbType,
         tableKey,
         colDefs,
         getCount: async ({ quicksearch }) => {
-            const countQuery = makeCountQuery(resourceType, tableKey, undefined, colDefs);
+            let countQuery = makeCountQuery(dbType, tableKey, undefined, colDefs);
+            if (input.type === 'ducklake')
+                countQuery = wrapDucklakeQuery(countQuery, input.ducklake);
             const result = await runScriptAndPollResult({
                 workspace,
-                requestBody: {
-                    args: { database: '$res:' + resourcePath, quicksearch },
-                    language: getLanguageByResourceType(resourceType),
-                    content: countQuery
-                }
+                requestBody: { args: { ...dbArg, quicksearch }, language, content: countQuery }
             });
             const count = result?.[0].count;
             return count;
         },
         getRows: async (params) => {
-            const query = makeSelectQuery(tableKey, colDefs, undefined, resourceType);
+            let query = makeSelectQuery(tableKey, colDefs, undefined, dbType);
+            if (input.type === 'ducklake')
+                query = wrapDucklakeQuery(query, input.ducklake);
             let items = (await runScriptAndPollResult({
                 workspace,
-                requestBody: {
-                    args: { database: '$res:' + resourcePath, ...params },
-                    language: getLanguageByResourceType(resourceType),
-                    content: query
-                }
+                requestBody: { args: { ...dbArg, ...params }, language, content: query }
             }));
-            if (resourceType === 'ms_sql_server')
+            if (input.type === 'database' && input.resourceType === 'ms_sql_server')
                 items = items?.[0];
             if (!items || !Array.isArray(items)) {
                 throw 'items is not an array';
@@ -44,45 +43,40 @@ export function dbTableOpsWithPreviewScripts({ resourcePath, resourceType, table
             return items;
         },
         onUpdate: async ({ values }, colDef, newValue) => {
-            const updateQuery = makeUpdateQuery(tableKey, colDef, colDefs, resourceType);
+            let updateQuery = makeUpdateQuery(tableKey, colDef, colDefs, dbType);
+            if (input.type === 'ducklake')
+                updateQuery = wrapDucklakeQuery(updateQuery, input.ducklake);
             await runScriptAndPollResult({
                 workspace,
                 requestBody: {
-                    args: {
-                        database: '$res:' + resourcePath,
-                        value_to_update: newValue,
-                        ...values
-                    },
-                    language: getLanguageByResourceType(resourceType),
+                    args: { ...dbArg, value_to_update: newValue, ...values },
+                    language,
                     content: updateQuery
                 }
             });
         },
         onDelete: async ({ values }) => {
-            const deleteQuery = makeDeleteQuery(tableKey, colDefs, resourceType);
+            let deleteQuery = makeDeleteQuery(tableKey, colDefs, dbType);
+            if (input.type === 'ducklake')
+                deleteQuery = wrapDucklakeQuery(deleteQuery, input.ducklake);
             await runScriptAndPollResult({
                 workspace,
-                requestBody: {
-                    args: { database: '$res:' + resourcePath, ...values },
-                    language: getLanguageByResourceType(resourceType),
-                    content: deleteQuery
-                }
+                requestBody: { args: { ...dbArg, ...values }, language, content: deleteQuery }
             });
         },
         onInsert: async ({ values }) => {
-            const insertQuery = makeInsertQuery(tableKey, colDefs, resourceType);
-            runScriptAndPollResult({
+            let insertQuery = makeInsertQuery(tableKey, colDefs, dbType);
+            if (input.type === 'ducklake')
+                insertQuery = wrapDucklakeQuery(insertQuery, input.ducklake);
+            await runScriptAndPollResult({
                 workspace,
-                requestBody: {
-                    args: { database: '$res:' + resourcePath, ...values },
-                    language: getLanguageByResourceType(resourceType),
-                    content: insertQuery
-                }
+                requestBody: { args: { ...dbArg, ...values }, language, content: insertQuery }
             });
         }
     };
 }
-export function dbDeleteTableActionWithPreviewScript({ workspace, resourcePath, resourceType }) {
+export function dbDeleteTableActionWithPreviewScript({ workspace, input }) {
+    const dbArg = input?.type === 'database' ? { database: '$res:' + input.resourcePath } : {};
     return ({ tableKey, refresh }) => ({
         confirmTitle: `Are you sure you want to delete '${tableKey}' ? This action is irreversible`,
         displayName: 'Delete',
@@ -90,12 +84,16 @@ export function dbDeleteTableActionWithPreviewScript({ workspace, resourcePath,
         icon: Trash2,
         successText: `Table '${tableKey}' deleted successfully`,
         action: async () => {
-            const deleteQuery = makeDeleteTableQuery(tableKey, resourceType);
+            const dbType = getDbType(input);
+            const language = getLanguageByResourceType(dbType);
+            let deleteQuery = makeDeleteTableQuery(tableKey, dbType);
+            if (input.type === 'ducklake')
+                deleteQuery = wrapDucklakeQuery(deleteQuery, input.ducklake);
             await runScriptAndPollResult({
                 workspace,
                 requestBody: {
-                    args: { database: '$res:' + resourcePath },
-                    language: getLanguageByResourceType(resourceType),
+                    args: { ...dbArg },
+                    language,
                     content: deleteQuery
                 }
             });
@@ -103,3 +101,50 @@ export function dbDeleteTableActionWithPreviewScript({ workspace, resourcePath,
         }
     });
 }
+export async function getDucklakeSchema({ workspace, ducklake }) {
+    let result = await runScriptAndPollResult({
+        workspace,
+        requestBody: {
+            language: 'duckdb',
+            content: `ATTACH 'ducklake://${ducklake}' AS __ducklake__; ${DUCKLAKE_GET_SCHEMA_QUERY}`,
+            args: {}
+        }
+    });
+    const stringified = Array.isArray(result) && result.length && (result?.[0]?.['result'] ?? '[]');
+    if (!stringified)
+        throw new Error('Failed to get Ducklake schema: ' + JSON.stringify(result));
+    let schema = {
+        schema: { main: JSON.parse(stringified) },
+        publicOnly: true,
+        lang: 'ducklake'
+    };
+    return { ...schema, stringified: stringifySchema(schema) };
+}
+const DUCKLAKE_GET_SCHEMA_QUERY = `
+SELECT json_group_object(table_name, table_data) AS result FROM (
+	SELECT
+		table_name,
+		json_group_object(
+			c.column_name,
+			json_object(
+				'type', c.data_type,
+				'default', c.column_default,
+				'required', c.is_nullable == 'NO'
+			)
+		) AS table_data
+	FROM information_schema.columns c
+	WHERE table_catalog = '__ducklake__' AND table_schema = current_schema()
+	GROUP BY c.table_name
+)`;
+export function getDbType(input) {
+    switch (input.type) {
+        case 'database':
+            return input.resourceType;
+        case 'ducklake':
+            return 'duckdb';
+    }
+}
+export function wrapDucklakeQuery(query, ducklake) {
+    let attach = `ATTACH 'ducklake://${ducklake}' AS dl;USE dl;\n`;
+    return query.replace(/^(--.*\n)*/, (match) => match + attach);
+}

package/package/components/details/DetailPageHeader.svelte

@@ -69,7 +69,6 @@ const dispatch = createEventDispatcher();
 					<Button
 						{...btn.buttonProps}
 						startIcon={{ icon: btn.buttonProps.startIcon }}
-						on:click={btn.buttonProps.onClick}
 						btnClasses="hidden md:flex items-center gap-1"
 					>
 						{btn.label}
@@ -77,7 +76,6 @@ const dispatch = createEventDispatcher();
 					<Button
 						{...btn.buttonProps}
 						startIcon={{ icon: btn.buttonProps.startIcon }}
-						on:click={btn.buttonProps.onClick}
 						iconOnly
 						btnClasses="flex md:hidden items-center gap-1"
 					>

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;