windmill-components 1.623.1 → 1.642.0

package/package/components/flows/CreateActionsApp.svelte

@@ -4,16 +4,13 @@ import { Button } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import Modal from '../common/modal/Modal.svelte';
-import { LayoutDashboard, Loader2, Plus, Code2, FlaskConical } from 'lucide-svelte';
+import { LayoutDashboard, Loader2, Plus, Code2 } from 'lucide-svelte';
 import { importStore } from '../apps/store';
-import Badge from '../common/badge/Badge.svelte';
 import YAML from 'yaml';
 let drawer = undefined;
 let pendingRaw = $state('');
 let importType = $state('yaml');
-// Modal states
 let appTypeModalOpen = $state(false);
-let featurePreviewModalOpen = $state(false);
 async function importRaw() {
     $importStore = importType === 'yaml' ? YAML.parse(pendingRaw) : JSON.parse(pendingRaw);
     await goto('/apps/add?nodraft=true');
@@ -28,45 +25,41 @@ function selectLowCode() {
 }
 function selectFullCode() {
     appTypeModalOpen = false;
-    featurePreviewModalOpen = true;
-}
-function confirmFullCode() {
-    featurePreviewModalOpen = false;
     goto(`${base}/apps_raw/add?nodraft=true`);
 }
 </script>
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<Button
-		id="create-app-button"
-		aiId="apps-create-actions-app"
-		aiDescription="Create a new app"
-		unifiedSize="lg"
-		startIcon={{ icon: Plus }}
-		endIcon={{ icon: LayoutDashboard }}
-		on:click={openAppTypeModal}
-		variant="accent"
-		dropdownItems={[
-			{
-				label: 'Import low-code app from YAML',
-				onClick: () => {
-					drawer?.toggleDrawer?.()
-					importType = 'yaml'
-				}
-			},
-			{
-				label: 'Import low-code app from JSON',
-				onClick: () => {
-					drawer?.toggleDrawer?.()
-					importType = 'json'
+		<Button
+			id="create-app-button"
+			aiId="apps-create-actions-app"
+			aiDescription="Create a new app"
+			unifiedSize="lg"
+			startIcon={{ icon: Plus }}
+			endIcon={{ icon: LayoutDashboard }}
+			on:click={openAppTypeModal}
+			variant="accent"
+			dropdownItems={[
+				{
+					label: 'Import low-code app from YAML',
+					onClick: () => {
+						drawer?.toggleDrawer?.()
+						importType = 'yaml'
+					}
+				},
+				{
+					label: 'Import low-code app from JSON',
+					onClick: () => {
+						drawer?.toggleDrawer?.()
+						importType = 'json'
+					}
 				}
-			}
-		]}
-	>
-		<div class="flex flex-row items-center"> App </div>
-	</Button>
-</div>
+			]}
+		>
+			<div class="flex flex-row items-center"> App </div>
+		</Button>
+	</div>
 
 <!-- App Type Selection Modal -->
 <Modal bind:open={appTypeModalOpen} title="Choose your app builder">
@@ -106,57 +99,16 @@ function confirmFullCode() {
 					<h3 class="font-semibold text-primary">Full-code App</h3>
 					<p class="text-xs text-tertiary mt-1">
 						Build with React or Svelte with full control and a powerful AI agent.
+
+					<br /><br />
+					Better for complex apps or apps that require full flexibility and control.
 					</p>
 				</div>
-				<br /><br />
-				<div class="flex flex-row items-center gap-2">
-					<Badge color="yellow">
-						<FlaskConical size={12} class="mr-1" />
-						Preview (unstable)
-					</Badge>
-				</div>
 			</button>
 		</div>
 	</div>
 </Modal>
 
-<!-- Feature Preview Warning Modal -->
-<Modal kind="X" bind:open={featurePreviewModalOpen} title="Feature Preview Notice">
-	<div class="flex flex-col gap-4">
-		<div
-			class="flex items-start gap-3 p-4 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800"
-		>
-			<FlaskConical size={24} class="text-yellow-600 dark:text-yellow-400 shrink-0 mt-0.5" />
-			<div class="text-sm text-yellow-800 dark:text-yellow-200">
-				<p class="font-semibold mb-2">Full-code Apps are in Feature Preview</p>
-				<p>
-					This feature is not yet stable and may change significantly before it reaches General
-					Availability (GA), which is expected in <strong>January 2026</strong>.
-				</p>
-				<ul class="list-disc list-inside mt-2 space-y-1 text-yellow-700 dark:text-yellow-300">
-					<li>APIs and interfaces may change without notice</li>
-					<li>Some functionality may be incomplete or buggy</li>
-					<li>Not recommended for production use yet</li>
-				</ul>
-			</div>
-		</div>
-
-		<div class="flex justify-end gap-3 pt-2">
-			<Button
-				color="light"
-				size="sm"
-				on:click={() => {
-					featurePreviewModalOpen = false
-					appTypeModalOpen = true
-				}}
-			>
-				Go back
-			</Button>
-			<Button color="blue" size="sm" on:click={confirmFullCode}>I understand, continue</Button>
-		</div>
-	</div>
-</Modal>
-
 <!-- Raw JSON -->
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent

package/package/components/flows/CreateActionsFlow.svelte

@@ -20,35 +20,35 @@ async function importRaw() {
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<Button
-		id="create-flow-button"
-		aiId="flows-create-actions-flow"
-		aiDescription="Create a new flow"
-		unifiedSize="lg"
-		startIcon={{ icon: Plus }}
-		endIcon={{ icon: BarsStaggered }}
-		href="{base}/flows/add?nodraft=true"
-		variant="accent"
-		dropdownItems={[
-			{
-				label: 'Import from YAML',
-				onClick: () => {
-					drawer?.toggleDrawer?.()
-					importType = 'yaml'
+		<Button
+			id="create-flow-button"
+			aiId="flows-create-actions-flow"
+			aiDescription="Create a new flow"
+			unifiedSize="lg"
+			startIcon={{ icon: Plus }}
+			endIcon={{ icon: BarsStaggered }}
+			href="{base}/flows/add?nodraft=true"
+			variant="accent"
+			dropdownItems={[
+				{
+					label: 'Import from YAML',
+					onClick: () => {
+						drawer?.toggleDrawer?.()
+						importType = 'yaml'
+					}
+				},
+				{
+					label: 'Import from JSON',
+					onClick: () => {
+						drawer?.toggleDrawer?.()
+						importType = 'json'
+					}
 				}
-			},
-			{
-				label: 'Import from JSON',
-				onClick: () => {
-					drawer?.toggleDrawer?.()
-					importType = 'json'
-				}
-			}
-		]}
-	>
-		Flow
-	</Button>
-</div>
+			]}
+		>
+			Flow
+		</Button>
+	</div>
 
 <!-- Raw JSON -->
 <Drawer bind:this={drawer} size="800px">

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

@@ -11,6 +11,6 @@ type $$ComponentProps = {
     color?: 'nord' | undefined;
     fontClass?: string;
 };
-declare const DebounceLimit: import("svelte").Component<$$ComponentProps, {}, "debounce_delay_s" | "debounce_key" | "debounce_args_to_accumulate" | "max_total_debouncing_time" | "max_total_debounces_amount">;
+declare const DebounceLimit: import("svelte").Component<$$ComponentProps, {}, "debounce_key" | "debounce_delay_s" | "debounce_args_to_accumulate" | "max_total_debouncing_time" | "max_total_debounces_amount">;
 type DebounceLimit = ReturnType<typeof DebounceLimit>;
 export default DebounceLimit;

package/package/components/flows/FlowAssetsHandler.svelte

@@ -2,7 +2,6 @@
     let s = $state({
         val: {
             selectedAsset: undefined,
-            dbManagerDrawer: undefined,
             s3FilePicker: undefined,
             resourceEditorDrawer: undefined,
             resourceMetadataCache: {},
@@ -27,7 +26,6 @@ import { AssetService, ResourceService } from '../../gen';
 import { deepEqual } from 'fast-equals';
 import { workspaceStore } from '../../stores';
 import S3FilePicker from '../S3FilePicker.svelte';
-import DbManagerDrawer from '../DBManagerDrawer.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import { watch } from 'runed';
 let { modules, enableParser = false, enableDbExplore = false, enablePathScriptAndFlowAssets = false } = $props();
@@ -43,7 +41,7 @@ $effect(() => {
     const assets = allModules.flatMap((m) => getFlowModuleAssets(m, flowGraphAssetsCtx?.val.additionalAssetsMap) ?? []) ?? [];
     for (const asset of assets) {
         if (asset.kind == 'resource') {
-            let truncatedPath = asset.path.split('/').slice(0, 3).join('/');
+            let truncatedPath = asset.path.split('?table=')[0];
             if (truncatedPath in resMetadataCache)
                 continue;
             resMetadataCache[truncatedPath] = undefined; // avoid fetching multiple times because of async
@@ -144,6 +142,5 @@ $effect(() => {
 
 {#if flowGraphAssetsCtx}
 	<S3FilePicker bind:this={flowGraphAssetsCtx.val.s3FilePicker} readOnlyMode />
-	<DbManagerDrawer bind:this={flowGraphAssetsCtx.val.dbManagerDrawer} />
 	<ResourceEditorDrawer bind:this={flowGraphAssetsCtx.val.resourceEditorDrawer} />
 {/if}

package/package/components/flows/FlowHistoryInner.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { run, stopPropagation, createBubbler } from 'svelte/legacy';
+<script lang="ts">import { stopPropagation, createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { classNames, displayDate, emptyString, sendUserToast } from '../../utils';
@@ -14,6 +14,7 @@ let selectedVersion = $state(undefined);
 let selected = $state(undefined);
 let deploymentMsgUpdateMode = $state(false);
 let deploymentMsgUpdate = $state(undefined);
+let selectedVersionIndex = $state(undefined);
 async function loadFlow(version) {
     selected = await FlowService.getFlowVersion({
         workspace: $workspaceStore,
@@ -60,9 +61,11 @@ async function restoreVersion(flow) {
     sendUserToast('Flow restored from previous deployment');
 }
 loadVersions();
-run(() => {
+$effect.pre(() => {
     selectedVersion !== undefined && loadFlow(selectedVersion.id);
 });
+// Get available versions for comparison (versions after selected one)
+let availableVersions = $derived(selectedVersionIndex !== undefined ? versions.slice(selectedVersionIndex + 1) : []);
 </script>
 
 <Splitpanes class="!overflow-visible">
@@ -71,7 +74,7 @@ run(() => {
 			{#if !loading}
 				{#if versions.length > 0}
 					<div class="flex gap-2 flex-col">
-						{#each versions ?? [] as version}
+						{#each versions ?? [] as version (version.id)}
 							<!-- svelte-ignore a11y_click_events_have_key_events -->
 							<div
 								class={classNames(
@@ -81,7 +84,11 @@ run(() => {
 								role="button"
 								tabindex="0"
 								onclick={() => {
+									const versionIndex = versions.findIndex((v) => v.id === version.id)
 									selectedVersion = version
+									selectedVersionIndex = versionIndex
+									deploymentMsgUpdate = undefined
+									deploymentMsgUpdateMode = false
 								}}
 							>
 								<span class="text-xs truncate">
@@ -190,7 +197,11 @@ run(() => {
 						{#await import('../FlowViewer.svelte')}
 							<Loader2 class="animate-spin" />
 						{:then Module}
-							<Module.default flow={selected} />
+							<Module.default
+								flow={selected}
+								{availableVersions}
+								selectedVersionId={selectedVersion?.id}
+							/>
 						{/await}
 					</div>
 				{:else}

package/package/components/flows/FlowProgressBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import {} from '../../gen';
 import ProgressBar from '../progressBar/ProgressBar.svelte';
-let { job = undefined, currentSubJobProgress = $bindable(undefined), class: className } = $props();
+import { forLater } from '../../forLater';
+let { job = undefined, currentSubJobProgress = $bindable(undefined), class: className, slim = false, textPosition = 'top', showStepId = false } = $props();
 let error = $state(undefined);
 let index = $state(0);
 let subIndex = $state(undefined);
@@ -8,8 +9,16 @@ let subLength = $state(undefined);
 let length = $state(1);
 let nextInProgress = $state(false);
 let subIndexIsPercent = $state(false);
+let currentStepId = $state(undefined);
+let isWaitingForEvents = $state(false);
+let isCanceled = $state(false);
+let isScheduled = $state(false);
 let progressBar = $state(undefined);
 function updateJobProgress(job) {
+    // Check if job is scheduled for later
+    const isJobScheduled = Boolean('running' in job && 'scheduled_for' in job &&
+        job.scheduled_for && forLater(job.scheduled_for));
+    isScheduled = isJobScheduled;
     const modules = job?.flow_status?.modules;
     if (!modules?.length) {
         return;
@@ -19,10 +28,23 @@ function updateJobProgress(job) {
     let newError = undefined;
     let newNextInProgress = false;
     let maxDone = Math.max(job?.flow_status?.step ?? 0, 0);
+    let newCurrentStepId = undefined;
+    let newIsWaitingForEvents = false;
     if (modules.length > maxDone) {
         const nextModule = modules[maxDone];
         if (nextModule.type === 'InProgress') {
             newNextInProgress = true;
+            // Get the step ID if available
+            if (nextModule.id) {
+                newCurrentStepId = nextModule.id;
+            }
+        }
+        else if (nextModule.type === 'WaitingForEvents') {
+            newIsWaitingForEvents = true;
+            // Get the step ID if available for waiting events
+            if (nextModule.id) {
+                newCurrentStepId = nextModule.id;
+            }
         }
     }
     let module = modules[maxDone];
@@ -63,6 +85,9 @@ function updateJobProgress(job) {
     length = Math.max(modules.length, 1);
     index = maxDone;
     nextInProgress = newNextInProgress;
+    currentStepId = newCurrentStepId;
+    isWaitingForEvents = newIsWaitingForEvents;
+    isCanceled = job?.canceled || false;
 }
 export function reset() {
     progressBar?.resetP();
@@ -71,6 +96,10 @@ export function reset() {
     subLength = undefined;
     length = 1;
     index = 0;
+    currentStepId = undefined;
+    isWaitingForEvents = false;
+    isCanceled = false;
+    isScheduled = false;
 }
 $effect(() => {
     job && updateJobProgress(job);
@@ -86,5 +115,12 @@ $effect(() => {
 	{subIndex}
 	{error}
 	{subIndexIsPercent}
+	{slim}
 	class={className}
+	{textPosition}
+	stepId={currentStepId}
+	{showStepId}
+	{isWaitingForEvents}
+	{isCanceled}
+	{isScheduled}
 />

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

@@ -3,6 +3,9 @@ interface Props {
     job?: Job | undefined;
     currentSubJobProgress?: number | undefined;
     class?: string;
+    slim?: boolean;
+    textPosition?: 'top' | 'bottom';
+    showStepId?: boolean;
 }
 declare const FlowProgressBar: import("svelte").Component<Props, {
     reset: () => void;

package/package/components/flows/agentToolUtils.d.ts

@@ -1,10 +1,19 @@
 import type { AiAgent, FlowModule, FlowModuleValue } from '../../gen';
+export declare const SPECIAL_TOOL_KINDS: readonly ["mcpTool", "websearchTool", "aiAgentTool"];
+export type SpecialToolKind = (typeof SPECIAL_TOOL_KINDS)[number];
 export type AgentTool = AiAgent['tools'][number];
 export type FlowModuleTool = AgentTool & {
     value: {
         tool_type: 'flowmodule';
     } & FlowModuleValue;
 };
+export type AiAgentTool = AgentTool & {
+    value: {
+        tool_type: 'flowmodule';
+    } & {
+        type: 'aiagent';
+    } & FlowModuleValue;
+};
 export type McpTool = AgentTool & {
     value: {
         tool_type: 'mcp';
@@ -30,6 +39,10 @@ export declare function isMcpTool(tool: AgentTool): tool is McpTool;
  * Type guard to check if a tool is a Websearch tool
  */
 export declare function isWebsearchTool(tool: AgentTool): tool is WebsearchTool;
+/**
+ * Create an AI Agent tool (nested agent)
+ */
+export declare function createAiAgentTool(id: string): AiAgentTool;
 /**
  * Create an MCP tool from resource path
  */
@@ -38,6 +51,11 @@ export declare function createMcpTool(id: string): McpTool;
  * Create a Websearch tool
  */
 export declare function createWebsearchTool(id: string): WebsearchTool;
+/**
+ * Convert a FlowModuleTool to a FlowModule for use with loadFlowModuleState etc.
+ * Strips the extra `tool_type` field and maps AgentTool fields to FlowModule fields.
+ */
+export declare function agentToolToFlowModule(tool: FlowModuleTool): FlowModule;
 /**
  * Convert a FlowModule back to an AgentTool
  * Used when saving changes back to the AI Agent tools array

package/package/components/flows/agentToolUtils.js

@@ -1,3 +1,6 @@
+import { loadStoredConfig } from '../aiProviderStorage';
+import { AI_AGENT_SCHEMA } from './flowInfers';
+export const SPECIAL_TOOL_KINDS = ['mcpTool', 'websearchTool', 'aiAgentTool'];
 /**
  * Type guard to check if a tool is a FlowModule tool
  */
@@ -16,6 +19,38 @@ export function isMcpTool(tool) {
 export function isWebsearchTool(tool) {
     return tool.value.tool_type === 'websearch';
 }
+/**
+ * Create an AI Agent tool (nested agent)
+ */
+export function createAiAgentTool(id) {
+    const input_transforms = {
+        provider: {
+            type: 'static',
+            value: loadStoredConfig() ?? { kind: 'openai', resource: '', model: '' }
+        },
+        output_type: { type: 'static', value: 'text' },
+        user_message: { type: 'ai' }
+    };
+    for (const key of Object.keys(AI_AGENT_SCHEMA.properties ?? {})) {
+        if (!(key in input_transforms)) {
+            ;
+            input_transforms[key] = {
+                type: 'static',
+                value: undefined
+            };
+        }
+    }
+    return {
+        id,
+        summary: '',
+        value: {
+            tool_type: 'flowmodule',
+            type: 'aiagent',
+            tools: [],
+            input_transforms
+        }
+    };
+}
 /**
  * Create an MCP tool from resource path
  */
@@ -43,6 +78,18 @@ export function createWebsearchTool(id) {
         }
     };
 }
+/**
+ * Convert a FlowModuleTool to a FlowModule for use with loadFlowModuleState etc.
+ * Strips the extra `tool_type` field and maps AgentTool fields to FlowModule fields.
+ */
+export function agentToolToFlowModule(tool) {
+    const { tool_type: _, ...value } = tool.value;
+    return {
+        id: tool.id,
+        summary: tool.summary,
+        value: value
+    };
+}
 /**
  * Convert a FlowModule back to an AgentTool
  * Used when saving changes back to the AI Agent tools array

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

@@ -120,12 +120,11 @@ $effect.pre(() => {
 							}}><Unlock size={12} />hash</Button
 						>
 					{:else if latestHash}
-						<div class="flex">
+						<div class="flex gap-2">
 							<Button
 								title="Lock hash to always use this specific version"
-								color="light"
-								size="xs"
-								btnClasses="text-primary inline-flex gap-1 items-center"
+								unifiedSize="sm"
+								variant="default"
 								on:click={() => {
 									if (flowModuleValue.type == 'script') {
 										dispatch('setHash', latestHash)
@@ -134,12 +133,12 @@ $effect.pre(() => {
 							>
 							<Button
 								title="Reload latest hash"
-								size="xs"
-								color="light"
+								unifiedSize="sm"
+								variant="default"
 								on:click={() => dispatch('reload')}
-							>
-								<RefreshCw size={12} /></Button
-							>
+								startIcon={{ icon: RefreshCw }}
+								iconOnly
+							/>
 						</div>
 					{/if}
 					<input

package/package/components/flows/content/AgentToolWrapper.svelte

@@ -24,7 +24,7 @@ let { tool = $bindable(), noEditor = false, enableAi = false, parentModule = und
 	/>
 {:else if isMcpTool(tool)}
 	<!-- MCP tool - use McpToolEditor -->
-	<McpToolEditor bind:tool={tool as McpTool} {noEditor} />
+	<McpToolEditor bind:tool={tool as McpTool} />
 {:else if isWebsearchTool(tool)}
 	<WebsearchToolDisplay />
 {/if}