windmill-components 1.532.0 → 1.542.4

package/package/components/copilot/lib.js

@@ -1,28 +1,70 @@
-import { copilotInfo, copilotSessionModel, workspaceStore } from '../../stores';
+import { getCurrentModel, workspaceStore } from '../../stores';
 import { buildClientSchema, printSchema } from 'graphql';
-import { OpenAI } from 'openai';
+import OpenAI from 'openai';
+import Anthropic from '@anthropic-ai/sdk';
 import { get } from 'svelte/store';
 import { OpenAPI, ResourceService } from '../../gen';
 import { EDIT_CONFIG, FIX_CONFIG, GEN_CONFIG } from './prompts';
 import { formatResourceTypes } from './utils';
 import { z } from 'zod';
+import { processToolCall } from './chat/shared';
+import { generateRandomString } from '../../utils';
 export const SUPPORTED_LANGUAGES = new Set(Object.keys(GEN_CONFIG.prompts));
-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,
-    azure_openai: OPENAI_MODELS,
-    anthropic: ['claude-sonnet-4-0', 'claude-sonnet-4-0/thinking', 'claude-3-5-haiku-latest'],
-    mistral: ['codestral-latest'],
-    deepseek: ['deepseek-chat', 'deepseek-reasoner'],
-    googleai: ['gemini-2.0-flash', 'gemini-1.5-flash', 'gemini-1.5-pro'],
-    groq: ['llama-3.3-70b-versatile', 'llama-3.1-8b-instant'],
-    openrouter: ['meta-llama/llama-3.2-3b-instruct:free'],
-    togetherai: ['meta-llama/Llama-3.3-70B-Instruct-Turbo'],
-    customai: []
+const OPENAI_MODELS = [
+    'gpt-5',
+    'gpt-5-mini',
+    'gpt-5-nano',
+    'gpt-4o',
+    'gpt-4o-mini',
+    'o4-mini',
+    'o3',
+    'o3-mini'
+];
+export const AI_PROVIDERS = {
+    openai: {
+        label: 'OpenAI',
+        defaultModels: OPENAI_MODELS
+    },
+    azure_openai: {
+        label: 'Azure OpenAI',
+        defaultModels: OPENAI_MODELS
+    },
+    anthropic: {
+        label: 'Anthropic',
+        defaultModels: ['claude-sonnet-4-0', 'claude-sonnet-4-0/thinking', 'claude-3-5-haiku-latest']
+    },
+    mistral: {
+        label: 'Mistral',
+        defaultModels: ['codestral-latest']
+    },
+    deepseek: {
+        label: 'DeepSeek',
+        defaultModels: ['deepseek-chat', 'deepseek-reasoner']
+    },
+    googleai: {
+        label: 'Google AI',
+        defaultModels: ['gemini-2.0-flash', 'gemini-1.5-flash', 'gemini-1.5-pro']
+    },
+    groq: {
+        label: 'Groq',
+        defaultModels: ['llama-3.3-70b-versatile', 'llama-3.1-8b-instant']
+    },
+    openrouter: {
+        label: 'OpenRouter',
+        defaultModels: ['meta-llama/llama-3.2-3b-instruct:free']
+    },
+    togetherai: {
+        label: 'Together AI',
+        defaultModels: ['meta-llama/Llama-3.3-70B-Instruct-Turbo']
+    },
+    customai: {
+        label: 'Custom AI',
+        defaultModels: []
+    }
 };
-export async function fetchAvailableModels(resourcePath, workspace, provider) {
+export async function fetchAvailableModels(resourcePath, workspace, provider, signal) {
     const models = await fetch(`${location.origin}${OpenAPI.BASE}/w/${workspace}/ai/proxy/models`, {
+        signal,
         headers: {
             'X-Resource-Path': resourcePath,
             'X-Provider': provider,
@@ -35,21 +77,34 @@ export async function fetchAvailableModels(resourcePath, workspace, provider) {
     }
     const data = (await models.json());
     if (data.data.length > 0) {
+        const sortFunc = (provider) => (a, b) => {
+            // First prioritize models in defaultModels array
+            const defaultModels = AI_PROVIDERS[provider]?.defaultModels || [];
+            const aInDefault = defaultModels.includes(a);
+            const bInDefault = defaultModels.includes(b);
+            if (aInDefault && !bInDefault)
+                return -1;
+            if (!aInDefault && bInDefault)
+                return 1;
+            return 0;
+        };
         switch (provider) {
             case 'openai':
                 return data.data
                     .filter((m) => m.id.startsWith('gpt-') || m.id.startsWith('o') || m.id.startsWith('codex'))
-                    .map((m) => m.id);
+                    .map((m) => m.id)
+                    .sort(sortFunc(provider));
             case 'azure_openai':
                 return data.data
                     .filter((m) => (m.id.startsWith('gpt-') || m.id.startsWith('o') || m.id.startsWith('codex')) &&
                     m.lifecycle_status !== 'deprecated' &&
                     (m.capabilities.completion || m.capabilities.chat_completion))
-                    .map((m) => m.id);
+                    .map((m) => m.id)
+                    .sort(sortFunc(provider));
             case 'googleai':
-                return data.data.map((m) => m.id.split('/')[1]);
+                return data.data.map((m) => m.id.split('/')[1]).sort(sortFunc(provider));
             default:
-                return data.data.map((m) => m.id);
+                return data.data.map((m) => m.id).sort(sortFunc(provider));
         }
     }
     return data?.data.map((m) => m.id) ?? [];
@@ -61,9 +116,15 @@ function getModelMaxTokens(provider, model) {
     else if ((provider === 'azure_openai' || provider === 'openai') && model.startsWith('o')) {
         return 100000;
     }
+    else if (model.startsWith('claude-sonnet') || model.startsWith('gemini-2.5')) {
+        return 64000;
+    }
     else if (model.startsWith('gpt-4.1')) {
         return 32768;
     }
+    else if (model.startsWith('claude-opus')) {
+        return 32000;
+    }
     else if (model.startsWith('gpt-4o') || model.startsWith('codestral')) {
         return 16384;
     }
@@ -93,12 +154,13 @@ export function getModelContextWindow(model) {
     }
 }
 function getModelSpecificConfig(modelProvider, tools) {
+    const maxTokens = getModelMaxTokens(modelProvider.provider, modelProvider.model);
     if ((modelProvider.provider === 'openai' || modelProvider.provider === 'azure_openai') &&
         (modelProvider.model.startsWith('o') || modelProvider.model.startsWith('gpt-5'))) {
         return {
             model: modelProvider.model,
             ...(tools && tools.length > 0 ? { tools } : {}),
-            max_completion_tokens: getModelMaxTokens(modelProvider.provider, modelProvider.model)
+            max_completion_tokens: maxTokens
         };
     }
     else {
@@ -116,7 +178,7 @@ function getModelSpecificConfig(modelProvider, tools) {
                     temperature: 0
                 }),
             ...(tools && tools.length > 0 ? { tools } : {}),
-            max_tokens: getModelMaxTokens(modelProvider.provider, modelProvider.model)
+            max_tokens: maxTokens
         };
     }
 }
@@ -169,8 +231,10 @@ export const PROVIDER_COMPLETION_CONFIG_MAP = {
 };
 class WorkspacedAIClients {
     openaiClient;
+    anthropicClient;
     init(workspace) {
         this.initOpenai(workspace);
+        this.initAnthropic(workspace);
     }
     getBaseURL(workspace) {
         return `${location.origin}${OpenAPI.BASE}/w/${workspace}/ai/proxy`;
@@ -186,19 +250,33 @@ class WorkspacedAIClients {
             dangerouslyAllowBrowser: true
         });
     }
+    initAnthropic(workspace) {
+        const baseURL = this.getBaseURL(workspace);
+        this.anthropicClient = new Anthropic({
+            baseURL,
+            apiKey: 'fake-key',
+            dangerouslyAllowBrowser: true
+        });
+    }
     getOpenaiClient() {
         if (!this.openaiClient) {
             throw new Error('OpenAI not initialized');
         }
         return this.openaiClient;
     }
+    getAnthropicClient() {
+        if (!this.anthropicClient) {
+            throw new Error('Anthropic not initialized');
+        }
+        return this.anthropicClient;
+    }
 }
 export const workspaceAIClients = new WorkspacedAIClients();
 export async function testKey({ apiKey, resourcePath, model, abortController, messages, aiProvider }) {
     if (!apiKey && !resourcePath) {
         throw new Error('API key or resource path is required');
     }
-    const modelToTest = model ?? AI_DEFAULT_MODELS[aiProvider][0];
+    const modelToTest = model ?? AI_PROVIDERS[aiProvider].defaultModels[0];
     if (!modelToTest) {
         throw new Error('Missing a model to test');
     }
@@ -330,12 +408,8 @@ const PROMPTS_CONFIGS = {
     edit: EDIT_CONFIG,
     gen: GEN_CONFIG
 };
-function getProviderAndCompletionConfig({ messages, stream, tools, forceModelProvider }) {
-    let info = get(copilotInfo);
-    const modelProvider = forceModelProvider ?? get(copilotSessionModel) ?? info.defaultModel ?? info.aiModels[0];
-    if (!modelProvider) {
-        throw new Error('No model selected');
-    }
+export function getProviderAndCompletionConfig({ messages, stream, tools, forceModelProvider }) {
+    const modelProvider = forceModelProvider ?? getCurrentModel();
     const providerConfig = PROVIDER_COMPLETION_CONFIG_MAP[modelProvider.provider];
     const processedMessages = prepareMessages(modelProvider.provider, messages);
     return {
@@ -444,7 +518,7 @@ export async function getFimCompletion(prompt, suffix, providerModel, abortContr
 export async function getCompletion(messages, abortController, tools) {
     const { provider, config } = getProviderAndCompletionConfig({ messages, stream: true, tools });
     const openaiClient = workspaceAIClients.getOpenaiClient();
-    const completion = await openaiClient.chat.completions.create(config, {
+    const completion = openaiClient.chat.completions.create(config, {
         signal: abortController.signal,
         headers: {
             'X-Provider': provider
@@ -452,6 +526,112 @@ export async function getCompletion(messages, abortController, tools) {
     });
     return completion;
 }
+function extractFirstJSON(str) {
+    let depth = 0, i = 0;
+    for (; i < str.length; i++) {
+        if (str[i] === '{')
+            depth++;
+        else if (str[i] === '}' && --depth === 0)
+            break;
+    }
+    return str.slice(0, i + 1);
+}
+export async function parseOpenAICompletion(completion, callbacks, messages, addedMessages, tools, helpers) {
+    const finalToolCalls = {};
+    let answer = '';
+    for await (const chunk of completion) {
+        if (!('choices' in chunk && chunk.choices.length > 0 && 'delta' in chunk.choices[0])) {
+            continue;
+        }
+        const c = chunk;
+        const delta = c.choices[0].delta.content;
+        if (delta) {
+            answer += delta;
+            callbacks.onNewToken(delta);
+        }
+        const toolCalls = c.choices[0].delta.tool_calls || [];
+        if (toolCalls.length > 0 && answer) {
+            // if tool calls are present but we have some textual content already, we need to display it to the user first
+            callbacks.onMessageEnd();
+            answer = '';
+        }
+        for (let i = 0; i < toolCalls.length; i++) {
+            const toolCall = toolCalls[i];
+            // Gemini models are missing the index field
+            if (toolCall.index === undefined ||
+                (typeof toolCall.index === 'string' && toolCall.index === '')) {
+                toolCall.index = i;
+            }
+            // Gemini models are missing the id field
+            if (toolCall.id === undefined || (typeof toolCall.id === 'string' && toolCall.id === '')) {
+                toolCall.id = generateRandomString();
+            }
+            const { index } = toolCall;
+            let finalToolCall = finalToolCalls[index];
+            if (!finalToolCall) {
+                finalToolCalls[index] = toolCall;
+            }
+            else {
+                if (toolCall.function?.arguments) {
+                    if (!finalToolCall.function) {
+                        finalToolCall.function = toolCall.function;
+                    }
+                    else {
+                        finalToolCall.function.arguments =
+                            (finalToolCall.function.arguments ?? '') + toolCall.function.arguments;
+                        // Make sure we only have one JSON object, else for Gemini models it sometimes results in two JSON objects
+                        finalToolCall.function.arguments = extractFirstJSON(finalToolCall.function.arguments || '{}');
+                    }
+                }
+            }
+            finalToolCall = finalToolCalls[index];
+            if (finalToolCall?.function) {
+                const { function: { name: funcName }, id: toolCallId } = finalToolCall;
+                if (funcName && toolCallId) {
+                    const tool = tools.find((t) => t.def.function.name === funcName);
+                    if (tool && tool.preAction) {
+                        tool.preAction({ toolCallbacks: callbacks, toolId: toolCallId });
+                    }
+                }
+            }
+        }
+    }
+    if (answer) {
+        const toAdd = { role: 'assistant', content: answer };
+        addedMessages.push(toAdd);
+        messages.push(toAdd);
+    }
+    callbacks.onMessageEnd();
+    const toolCalls = Object.values(finalToolCalls).filter((toolCall) => toolCall.id !== undefined && toolCall.function?.arguments !== undefined);
+    if (toolCalls.length > 0) {
+        const toAdd = {
+            role: 'assistant',
+            tool_calls: toolCalls.map((t) => ({
+                ...t,
+                function: {
+                    ...t.function,
+                    arguments: t.function.arguments || '{}'
+                }
+            }))
+        };
+        messages.push(toAdd);
+        addedMessages.push(toAdd);
+        for (const toolCall of toolCalls) {
+            const messageToAdd = await processToolCall({
+                tools,
+                toolCall,
+                helpers,
+                toolCallbacks: callbacks
+            });
+            messages.push(messageToAdd);
+            addedMessages.push(messageToAdd);
+        }
+    }
+    else {
+        return false;
+    }
+    return true;
+}
 export function getResponseFromEvent(part) {
     return part.choices?.[0]?.delta?.content || '';
 }
@@ -539,7 +719,7 @@ export async function deltaCodeCompletion(messages, generatedCodeDelta, abortCon
             continue;
         }
         if (!match[1].endsWith('`')) {
-            // skip udpating if possible that part of three ticks (end of code block)s
+            // skip updating if possible that part of three ticks (end of code block)s
             delta = getStringEndDelta(code, match[1]);
             generatedCodeDelta.set(delta);
             code = match[1];

package/package/components/copilot/shared.d.ts

@@ -41,7 +41,7 @@ export type VisualChange = {
 };
 export declare function setGlobalCSS(id: string, cssCode: string): void;
 export declare let VISUAL_CHANGES_CSS: string;
-export declare function displayVisualChanges(cssId: string, editor: meditor.IStandaloneCodeEditor, visualChanges: VisualChange[]): Promise<{
+export declare function displayVisualChanges(cssId: string, editor: meditor.IStandaloneCodeEditor, visualChanges: VisualChange[], revertMode?: boolean): Promise<{
     collection: meditor.IEditorDecorationsCollection;
     ids: string[];
 }>;

package/package/components/copilot/shared.js

@@ -1,6 +1,6 @@
 import { createLongHash } from '../../editorLangUtils';
 import {} from 'monaco-editor';
-function applyMonacoStyles(targetEl, greenHighlight) {
+function applyMonacoStyles(targetEl, greenHighlight, revertMode) {
     const computedStyles = window.getComputedStyle(document.querySelector('.monaco-editor .view-lines'));
     Object.assign(targetEl.style, {
         fontFamily: computedStyles.fontFamily,
@@ -10,7 +10,9 @@ function applyMonacoStyles(targetEl, greenHighlight) {
         whiteSpace: 'pre'
     });
     if (greenHighlight) {
-        targetEl.style.backgroundColor = 'var(--vscode-diffEditor-insertedTextBackground)';
+        targetEl.style.backgroundColor = revertMode
+            ? 'var(--vscode-diffEditor-removedTextBackground)'
+            : 'var(--vscode-diffEditor-insertedTextBackground)';
     }
 }
 export function setGlobalCSS(id, cssCode) {
@@ -22,7 +24,7 @@ export function setGlobalCSS(id, cssCode) {
     }
     styleTag.textContent = cssCode;
 }
-function addInlineGhostText(change) {
+function addInlineGhostText(change, revertMode) {
     const cssId = createLongHash();
     const decoration = {
         range: {
@@ -32,7 +34,11 @@ function addInlineGhostText(change) {
             endColumn: change.position.column + change.value.length
         },
         options: {
-            beforeContentClassName: `editor-ghost-text editor-ghost-text-content-${cssId} ${change.options?.greenHighlight ? 'editor-ghost-text-green' : ''}`
+            beforeContentClassName: `editor-ghost-text editor-ghost-text-content-${cssId} ${change.options?.greenHighlight
+                ? revertMode
+                    ? 'editor-ghost-text-removed'
+                    : 'editor-ghost-text-green'
+                : ''}`
         }
     };
     const safeContent = change.value.replaceAll('"', '\\"');
@@ -90,14 +96,14 @@ function getReviewButtons(editor, acceptFn, rejectFn) {
     reviewButtons.append(rejectButton);
     return reviewButtons;
 }
-async function addMultilineGhostText(editor, text, afterLineNumber, heightInLines, options) {
+async function addMultilineGhostText(editor, text, afterLineNumber, heightInLines, options, revertMode) {
     const el = document.createElement('div');
     el.textContent = text;
     if (options?.review) {
         const reviewButtons = getReviewButtons(editor, options.review.acceptFn, options.review.rejectFn);
         el.append(reviewButtons);
     }
-    applyMonacoStyles(el, options?.greenHighlight);
+    applyMonacoStyles(el, options?.greenHighlight, revertMode);
     const addZonePromise = new Promise((resolve, reject) => {
         editor?.changeViewZones((acc) => {
             const id = acc.addZone({
@@ -112,13 +118,13 @@ async function addMultilineGhostText(editor, text, afterLineNumber, heightInLine
     return addZonePromise;
 }
 export let VISUAL_CHANGES_CSS = `.editor-ghost-text-green { background-color: var(--vscode-diffEditor-insertedTextBackground) !important; }\n.editor-ghost-text-removed { background-color: var(--vscode-diffEditor-removedTextBackground); }\n\n.editor-ghost-text { display: inline-block; background-color: var(--vscode-editor-background); color: gray;}`;
-export async function displayVisualChanges(cssId, editor, visualChanges) {
+export async function displayVisualChanges(cssId, editor, visualChanges, revertMode) {
     let decorations = [];
     let css = '';
     let ids = [];
     for (const change of visualChanges) {
         if (change.type === 'added_inline') {
-            const { css: newCss, decoration } = addInlineGhostText(change);
+            const { css: newCss, decoration } = addInlineGhostText(change, revertMode);
             decorations.push(decoration);
             css += newCss;
         }
@@ -131,7 +137,7 @@ export async function displayVisualChanges(cssId, editor, visualChanges) {
                     endColumn: change.range.endColumn
                 },
                 options: {
-                    className: 'editor-ghost-text-removed',
+                    className: revertMode ? 'editor-ghost-text-green' : 'editor-ghost-text-removed',
                     isWholeLine: change.options?.isWholeLine
                 }
             };
@@ -157,7 +163,7 @@ export async function displayVisualChanges(cssId, editor, visualChanges) {
         }
         else if (change.type === 'added_block') {
             const id = await addMultilineGhostText(editor, change.value, change.position.afterLineNumber, change.value.split('\n').length, // we know it won't end by \n
-            change.options);
+            change.options, revertMode);
             ids.push(id);
         }
     }

package/package/components/flows/FlowEditor.svelte

@@ -8,8 +8,9 @@ import { writable } from 'svelte/store';
 import FlowAIChat from '../copilot/chat/flow/FlowAIChat.svelte';
 import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
+import { extractAllModules } from '../copilot/chat/shared';
 const { flowStore } = getContext('FlowEditorContext');
-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 { 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, previewOpen } = $props();
 let flowModuleSchemaMap = $state();
 export function isNodeVisible(nodeId) {
     return flowModuleSchemaMap?.isNodeVisible(nodeId) ?? false;
@@ -24,7 +25,7 @@ $effect(() => {
         lastDeployedFlow: savedFlow,
         lastSavedFlow: savedFlow?.draft,
         path: savedFlow?.path,
-        modules: flowStore.val.value.modules
+        modules: extractAllModules(flowStore.val.value.modules)
     };
     aiChatManager.flowOptions = options;
 });
@@ -117,6 +118,7 @@ onDestroy(() => {
 					{isOwner}
 					{suspendStatus}
 					onOpenDetails={onOpenPreview}
+					{previewOpen}
 				/>
 			{/if}
 		</Pane>

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

@@ -40,6 +40,7 @@ interface Props {
     }>>;
     onDelete?: (id: string) => void;
     flowHasChanged?: boolean;
+    previewOpen: 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/FlowModuleIcon.svelte

@@ -9,19 +9,19 @@ const iconHeight = height || size;
 </script>
 
 {#if module.value.type === 'aiagent'}
-	<Bot size={16} />
+	<Bot size={16} class="text-violet-800 dark:text-violet-400" />
 {:else if module.value.type === 'rawscript'}
 	<LanguageIcon lang={module.value.language} width={iconWidth} height={iconHeight} />
 {:else if module.summary === 'Terminate flow'}
-	<Square size={size} />
+	<Square {size} />
 {:else if module.value.type === 'identity'}
-	<ArrowDown size={size} />
+	<ArrowDown {size} />
 {:else if module.value.type === 'flow'}
-	<BarsStaggered size={size} />
+	<BarsStaggered {size} />
 {:else if module.value.type === 'forloopflow' || module.value.type === 'whileloopflow'}
-	<Repeat size={size} />
+	<Repeat {size} />
 {:else if module.value.type === 'branchone' || module.value.type === 'branchall'}
-	<GitBranch size={size} />
+	<GitBranch {size} />
 {:else if module.value.type === 'script'}
 	{#if module.value.path.startsWith('hub/')}
 		<IconedResourceType
@@ -31,9 +31,9 @@ const iconHeight = height || size;
 			silent={true}
 		/>
 	{:else}
-		<Building size={size} />
+		<Building {size} />
 	{/if}
 {:else}
 	<!-- Fallback icon for unknown module types -->
-	<BarsStaggered size={size} />
+	<BarsStaggered {size} />
 {/if}

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

@@ -47,7 +47,7 @@ $effect.pre(() => {
 </script>
 
 <div
-	class="overflow-x-auto scrollbar-hidden flex items-center justify-between px-4 py-1 flex-nowrap"
+	class="overflow-x-auto scrollbar-hidden flex items-center justify-between px-4 pt-1 pb-4 flex-nowrap"
 >
 	{#if flowModuleValue}
 		<span class="text-sm w-full mr-4">
@@ -129,6 +129,9 @@ $effect.pre(() => {
 				{:else if flowModuleValue.type === 'flow'}
 					<Badge color="indigo" capitalize>flow</Badge>
 					<input bind:value={summary} placeholder="Summary" class="w-full grow" />
+				{:else if flowModuleValue.type === 'aiagent'}
+					<Badge color="indigo">AI Agent</Badge>
+					<input bind:value={summary} placeholder="Summary" class="w-full grow" />
 				{/if}
 			</div>
 		</span>

package/package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -12,12 +12,18 @@ import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import { enterpriseLicense } from '../../../stores';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 let { noEditor, flowModule = $bindable(), previousModule, parentModule } = $props();
 let value = $state(flowModule.value);
 $effect(() => {
     value = flowModule.value;
 });
 let selected = $state('early-stop');
+useUiIntent(`branchall-${flowModule.id}`, {
+    openTab: (tab) => {
+        selected = tab;
+    }
+});
 </script>
 
 <div class="h-full flex flex-col w-full" id="flow-editor-branch-all-wrapper">

package/package/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -12,12 +12,18 @@ import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
 import FlowModuleMock from './FlowModuleMock.svelte';
 import { enterpriseLicense } from '../../../stores';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 let { flowModule = $bindable(), previousModule, parentModule, noEditor, enableAi = false } = $props();
 let value = $state(flowModule.value);
 $effect(() => {
     value = flowModule.value;
 });
 let selected = $state('early-stop');
+useUiIntent(`branchone-${flowModule.id}`, {
+    openTab: (tab) => {
+        selected = tab;
+    }
+});
 </script>
 
 <div class="h-full" id="flow-editor-branch-one-wrapper">

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, suspendStatus, onOpenDetails } = $props();
+let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onTestFlow, job, isOwner, suspendStatus, onOpenDetails, previewOpen = false } = $props();
 const { selectedId, flowStore, flowStateStore, flowInputsStore, pathStore, initialPathStore, fakeInitialPath, previewArgs, flowInputEditorState } = getContext('FlowEditorContext');
 const { showCaptureHint, triggersState, triggersCount } = getContext('TriggerContext');
 function checkDup(modules) {
@@ -41,6 +41,7 @@ $effect(() => {
 		}}
 		on:applyArgs
 		{onTestFlow}
+		{previewOpen}
 	/>
 {:else if $selectedId === 'Result'}
 	<FlowResult {noEditor} {job} {isOwner} {suspendStatus} {onOpenDetails} />

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

@@ -20,6 +20,7 @@ interface Props {
         nb: number;
     }>>;
     onOpenDetails?: () => void;
+    previewOpen?: 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> & {